/* =========================================================================
   style.css — neutral, clean theme.
   ► To apply FutureSkill CI later: change ONLY the variables in :root below
     (brand colours + font) and drop the logo into index.html. Nothing else.
   ========================================================================= */
:root {
  /* =========================================================
     Hewitt Consulting × FutureSkill — CI v1.0
     Source: Brand & Style Guide (Navy/Teal primary, Purple/
     Magenta/Gold accent). Only these variables should change
     if the brand guideline is updated later.
     ========================================================= */
  --brand:        #0B4C88;   /* Navy  — primary: nav, headings, primary buttons */
  --brand-dark:   #109CA3;   /* Teal  — hover state, data/chart accents */
  --brand-soft:   #E8F0F7;   /* light navy tint (selected backgrounds) */
  --accent:       #F7C948;   /* Gold  — accent: importance rating, badges */
  --accent-soft:  #FDF3D9;
  --ink:          #0F172A;   /* Text Primary */
  --muted:        #475569;   /* Text Secondary */
  --line:         #E8EDF4;   /* Light Border */
  --bg:           #FAFBFD;   /* Background */
  --card:         #ffffff;
  --ok:           #1eaf6a;   /* utility success green (not a CI brand color) */
  --radius:       20px;      /* Card Radius (CI) */
  --radius-sm:    12px;      /* Button / Input Radius (CI) */
  --g1:           #6B4EFF;   /* Purple  — Management   */
  --g2:           #D83D87;   /* Magenta — Office Staff */
  --g3:           #F7C948;   /* Gold    — Key Talent   */
  /* Report-only semantic severity ramp (assessment/consulting report, see
     .result-card below) — aliases onto the existing CI palette rather than
     new hues: teal=strength, amber=watch/plan, red=urgent, purple=secondary. */
  --sev-ok:        var(--brand-dark);
  --sev-plan:      #C9982B;
  --sev-watch:     #B5591A;
  --sev-urgent:    #C0392B;
  --sev-ok-bg:     var(--brand-soft);
  --sev-plan-bg:   #FBF3E2;
  --sev-watch-bg:  var(--accent-soft);
  --sev-urgent-bg: #FCEBEA;
  --purple:        var(--g1);
  --font-heading: 'IBM Plex Sans Thai', sans-serif;
  --font: 'IBM Plex Sans Thai', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; } /* safety net: nothing should ever force horizontal scroll */
body { font-family: var(--font); color: var(--ink); line-height: 1.5;
  background-color: var(--bg);
  background-image: url(bg-page.jpg);
  background-repeat: no-repeat; background-size: cover; background-position: top center;
  background-attachment: fixed; min-height: 100vh; }
button { font-family: inherit; }

/* ---- shell ---- */
.app { max-width: 820px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.body-shell { display: block; flex: 1; }
.sidenav { display: none; }
.main-col { width: 100%; }
.appbar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--card);
  border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-lockup .logo-hewitt { height: 32px; width: auto; flex: none; }
.brand-divider { width: 1px; height: 26px; background: var(--line); flex: none; }
.brand-lockup .logo-futureskill { height: 22px; width: auto; flex: none; }
.appbar .co { margin-left: auto; display: flex; align-items: center; }
.lang-toggle { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: 14px;
  padding: 2px; border-radius: 20px; background: var(--brand-soft); border: 1px solid var(--line); }
.lang-btn { border: none; background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .3px; color: var(--muted); padding: 4px 10px; border-radius: 16px; line-height: 1.2; }
.lang-btn.on { background: var(--brand); color: #fff; }
.lang-btn:not(.on):hover { color: var(--brand); }
@media (max-width: 620px) {
  .lang-toggle { margin-left: 8px; }
  .lang-btn { padding: 3px 8px; font-size: 11px; }
}
.wordmark-sm { height: 30px; width: auto; max-width: 100%; display: block; }
.wordmark-lg { height: 74px; width: auto; max-width: 100%; display: block; margin: 0 auto 8px; }

.progress-wrap { padding: 0 20px; }
.progress { height: 6px; background: #dfe5ee; border-radius: 6px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--brand);
  border-radius: 6px; transition: width .35s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--muted); margin: 6px 2px 0; }

.screen { flex: 1; padding: 10px 20px 28px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(11,30,60,.06);
  padding: 30px 28px 24px; margin-top: 12px; }
.section-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.qtitle { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.qtitle .qhl { color: var(--brand-dark); }
.qhelp { color: var(--muted); font-size: 13.5px; margin: 2px 0 18px; }
.compact-help { margin-bottom: 4px; }

/* ---- footer nav ---- */
.nav { display: flex; gap: 12px; align-items: center; padding: 16px 20px 26px; }
.btn { border: none; border-radius: var(--radius-sm); padding: 12px 22px; font-size: 15px; cursor: pointer;
  transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.btn.primary { background: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.primary:disabled { background: #b9c4d8; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { color: var(--brand-dark); background: var(--brand-soft); }
.nav .spacer { flex: 1; }
.savehint { font-size: 11.5px; color: var(--muted); }

/* ---- options (single / multi) ---- */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; cursor: pointer; transition: .12s; font-size: 15px; }
.opt:hover { border-color: #c7d6e6; background: #f7fafd; }
.opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.opt .mark { width: 20px; height: 20px; border: 2px solid #c2cbdc; flex: none; display: grid; place-items: center; }
.opt.single .mark { border-radius: 50%; }
.opt.multi .mark { border-radius: 6px; }
.opt.sel .mark { border-color: var(--brand); background: var(--brand); }
.opt.sel .mark::after { content: ""; width: 8px; height: 8px; background: #fff; border-radius: inherit; }
.opt.disabled { opacity: .45; pointer-events: none; }
.counter { font-size: 12.5px; color: var(--muted); margin: 4px 2px 12px; }
.counter b { color: var(--brand); }
.otherbox { margin-top: 8px; width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 14px; }
.otherbox:focus { outline: none; border-color: var(--brand); }

/* ---- dropdown (searchable) ---- */
.dd { position: relative; }
.dd input { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 15px; }
.dd input:focus { outline: none; border-color: var(--brand); }
.dd-list { list-style: none; margin: 6px 0 0; padding: 6px; max-height: 290px; overflow: auto;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.dd-list li { padding: 13px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px; min-height: 20px; }
.dd-list li:hover, .dd-list li.active { background: var(--brand-soft); }
.dd-list li.none { color: var(--muted); cursor: default; }

/* ---- scale ---- */
.scale { display: flex; gap: 10px; }
.scale .pt { flex: 1; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 8px;
  text-align: center; cursor: pointer; transition: .12s; }
.scale .pt:hover { border-color: #c3d2ee; }
.scale .pt.sel { border-color: var(--brand); background: var(--brand-soft); }
.scale .pt .n { font-size: 22px; font-weight: 700; color: var(--brand); }
.scale .pt .l { font-size: 11.5px; color: var(--muted); margin-top: 4px; min-height: 28px; }
.scale-details { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sd-card { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: #fbfcff; cursor: pointer; }
.sd-card:hover { border-color: #c3d2ee; }
.sd-card.sel { border-color: var(--brand); background: var(--brand-soft); }
.sd-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c2cbdc; background: #fff; flex: none; margin-top: 2px; display: grid; place-items: center; }
.sd-card.sel .sd-mark { border-color: var(--brand); background: var(--brand); }
.sd-card.sel .sd-mark::after { content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.sd-body { flex: 1; min-width: 0; }
.sd-t { font-family: var(--font-heading); font-weight: 700; font-size: 13px; margin-bottom: 5px; color: var(--brand-dark); }
.sd-def { font-size: 12.5px; color: var(--ink); margin-bottom: 5px; line-height: 1.5; }
.sd-ex { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---- skill / method picker ---- */
.search { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px;
  font-size: 14.5px; margin-bottom: 10px; }
.search:focus { outline: none; border-color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { display: flex; align-items: center; gap: 6px; background: var(--brand); color: #fff;
  border-radius: 999px; padding: 6px 8px 6px 12px; font-size: 13px; }
.chip .rank { background: rgba(255,255,255,.25); border-radius: 50%; width: 18px; height: 18px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 15px; line-height: 1; }
.acc { border: 1.5px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; }
.other-acc-pad { padding: 0 15px 14px; }
.other-acc-pad .otherbox { margin-top: 0; }
/* no overflow:hidden here — it used to clip the skill-tooltip (.q::after) popup at the
   accordion edge, cutting its text off; corners are rounded explicitly below instead */
.acc > summary { list-style: none; cursor: pointer; padding: 13px 15px; font-weight: 600;
  background: #f8fafe; display: flex; align-items: center; gap: 8px; color: var(--ink);
  border-radius: calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px) 0 0; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > *:last-child { border-radius: 0 0 calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px); overflow: hidden; }
.acc .chev { color: #9aa6bd; transition: transform .15s; }
.acc[open] .chev { transform: rotate(90deg); }
.acc .cnt { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.pickrow { display: flex; align-items: center; gap: 12px; padding: 11px 15px; cursor: pointer;
  border-top: 1px solid #eef1f6; font-size: 14.5px; }
.pickrow:hover { background: #fafbfe; }
.pickrow.sel { background: var(--brand-soft); }
.pickrow .mark { width: 20px; height: 20px; border: 2px solid #c2cbdc; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 11px; color: #fff; font-weight: 700; }
.pickrow.sel .mark { background: var(--brand); border-color: var(--brand); }
.pickrow .th { color: var(--muted); font-size: 12px; }
.pickrow.disabled { opacity: .4; pointer-events: none; }

/* ---- Q15+Q17 merged 2-column pick (Engagement vs Effectiveness) ---- */
.dualrow { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-top: 1px solid #eef1f6; }
.dualname { flex: 1; font-size: 13.5px; min-width: 0; }
.dualhead { background: #fbfcff; border-top: none; border-bottom: 1.5px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 8px 15px; margin-bottom: 8px; }
.dualcolhead { width: 108px; flex: none; text-align: center; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dualcolhead .counter-sm { color: var(--muted); font-size: 11px; font-weight: 400; }
.dualcell { width: 108px; flex: none; display: flex; justify-content: center; cursor: pointer; padding: 4px 0; }
.dualcell .mark { width: 20px; height: 20px; border: 2px solid #c2cbdc; border-radius: 6px;
  display: grid; place-items: center; font-size: 11px; color: #fff; font-weight: 700; }
.dualcell.sel .mark { background: var(--brand); border-color: var(--brand); }
.dualcell.disabled { opacity: .4; pointer-events: none; }
.dualpad { border-top: 1px solid #eef1f6; }
@media (max-width: 640px) {
  .dualcolhead, .dualcell { width: 64px; }
}

/* ---- benchmark matrix (Q11) ---- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tab { font-size: 13px; padding: 8px 13px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid var(--line); background: #f4f7fc; color: var(--muted); min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.tab.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.tab .opt-tag { font-size: 10px; opacity: .7; }
.matrix-legend { position: sticky; top: 0; z-index: 2; background: #fbfcff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0; }
.matrix-legend b { color: var(--brand); }
.matrix-legend .imp b { color: var(--accent); }
.mcat { border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px; }
.mcat > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 600;
  background: #f8fafe; display: flex; align-items: center; gap: 8px; }
.mcat > summary::-webkit-details-marker { display: none; }
.mcat .chev { color: #9aa6bd; transition: transform .15s; }
.mcat[open] .chev { transform: rotate(90deg); }
.mcat .cnt { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.mcat .done { color: var(--ok); }
.mrow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #eef1f6; }
.mrow:nth-child(even) { background: #fafbfe; }
.mrow.head { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); background: #fff; }
.mname { flex: 1; font-size: 13.5px; min-width: 120px; }
.mname .q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: #e2e8f3; color: #5a6b8c; font-size: 10px; cursor: help; margin-left: 5px; }
/* custom instant tooltip — replaces the native title attribute, whose hover delay
   made it look broken; also works on tap since it's toggled via a click class */
.q { position: relative; }
.q::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 12px; font-weight: 400;
  line-height: 1.4; padding: 8px 10px; border-radius: 8px; width: max-content; max-width: 240px;
  white-space: normal; text-align: left; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .08s ease; z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.q:hover::after, .q:focus::after, .q.tip-open::after { opacity: 1; visibility: visible; }
.rgrp { width: 150px; display: flex; justify-content: space-between; gap: 3px; }
.rgrp.imp { border-left: 1px dashed var(--line); padding-left: 12px; margin-left: 6px; }
.rgrp.lbl { justify-content: center; }
.dot { width: 26px; height: 26px; border: 2px solid #c2cbdc; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 10px; color: transparent; }
.rgrp.cur .dot.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.rgrp.imp .dot.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ---- outcome matrix (Q20) ---- */
.omrow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid #eef1f6; }
.omrow.head { font-size: 11px; color: var(--muted); font-weight: 700; }
.omname { flex: 1; font-size: 14px; }
.oscale { display: flex; gap: 6px; }
.ocell { width: 92px; text-align: center; font-size: 11px; color: var(--muted); cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 4px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.ocell.sel { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 600; }

/* ---- intro / end screens ---- */
.hero { text-align: center; padding: 24px 10px; }
.hero h1 { font-family: var(--font-heading); font-size: 26px; font-weight: 700; margin: 8px 0; }
.hero > p { color: var(--muted); max-width: 520px; margin: 8px auto; }
.hero > p.hero-cta { color: var(--brand); font-size: 14px; line-height: 1.5; margin-top: 14px; }
.hero > p.hero-cta b { font-family: var(--font-heading); }
.meta-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.pill { background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; padding: 7px 14px; border-radius: 999px; }
.big-emoji { font-size: 46px; }

/* ---- post-submit thank-you + benefits ---- */
.benefit-block { text-align: left; max-width: 1040px; margin: 30px auto 0; }
.benefit-head { margin-bottom: 16px; }
.benefit-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.benefit-h { margin: 0 0 10px; font-size: 22px; padding-bottom: 12px; border-bottom: 3px solid var(--accent); display: inline-block; }
.benefit-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.benefit-card { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; }
.bc-head { padding: 16px 18px; color: #fff; }
.benefit-card.teal .bc-head { background: var(--brand-dark); }
.benefit-card.navy .bc-head { background: var(--brand); }
.benefit-card.gold .bc-head { background: #B8860B; }
.bc-head h4 { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 700; text-transform: uppercase; }
.bc-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.bc-section p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.bc-section h5 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.bc-section + .bc-section { padding-top: 14px; border-top: 1px dashed var(--line); }
.bc-intro p { text-align: center; font-weight: 600; font-size: 15px; line-height: 1.4; }
.benefit-card.teal .bc-intro p { color: var(--brand-dark); }
.benefit-card.navy .bc-intro p { color: var(--brand); }
.benefit-card.gold .bc-intro p { color: #B8860B; }
.bc-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--ok); margin-bottom: 2px; }
.benefit-list { margin: 0; padding: 0; list-style: none; }
.benefit-list li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
.benefit-list li:last-child { margin-bottom: 0; }
.benefit-list li::before { content: '•'; position: absolute; left: 2px; color: var(--brand-dark); font-weight: 700; }
@media (max-width: 780px) {
  .benefit-cols { grid-template-columns: 1fr; }
}
.thanks-card .btn { margin-top: 22px; }

/* ---- halfway milestone interstitial ---- */
.halfway-card > p { font-size: 15px; }
.dash-preview { text-align: left; margin: 24px 0 6px; }
.dash-preview .ranktip { display: inline-block; }
.halfway-card .btn { margin-top: 22px; }

.err { color: #c0392b; font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---- respondent metadata form (single screen, multiple fields) ---- */
.respondent-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
.rf-field { display: flex; flex-direction: column; gap: 6px; }
.rf-field .oe-label { font-weight: 600; }
.rf-field .otherbox { margin-top: 0; }
.rf-select { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 15px; font-family: inherit; background: #fff; color: var(--ink); }
.rf-select:focus { outline: none; border-color: var(--brand); }

/* ---- welcome disclosure box + PDPA consent ---- */
.notice-box { background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 20px auto 0; max-width: 460px; text-align: left; }
.notice-box h4 { margin: 0 0 10px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--ink); }
.notice-box ul { margin: 0; padding-left: 18px; }
.notice-box li { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.notice-box li:last-child { margin-bottom: 0; }
.notice-box li b { color: var(--ink); }
.pdpa-box { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 6px; text-align: left; }
.pdpa-box input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 2px;
  accent-color: var(--brand); cursor: pointer; }
.pdpa-box label { font-size: 13.5px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.pdpa-box label b { color: var(--ink); }

/* ---- welcome email ---- */
.email-form { max-width: 460px; margin: 8px auto 0; text-align: left; }
.email-form .otherbox { margin-top: 6px; }
.email-form .btn { width: 100%; margin-top: 12px; }
.oe-label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; }
.oe-label-gap { margin-top: 16px; }
.oe-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.oe-hint-strong { color: var(--brand-dark); font-weight: 600; }

/* ---- draft-sync notice (resume loaded / cross-device conflict) ---- */
.sync-note { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 8px); z-index: 90;
  max-width: min(92vw, 520px); background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.5;
  padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transition: opacity .25s ease-out, transform .25s ease-out; }
.sync-note.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- email confirmation modal (before the survey starts) ---- */
.confirm-overlay { position: fixed; inset: 0; background: rgba(16, 26, 40, .55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-box { background: #fff; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  padding: 28px 26px; max-width: 440px; width: 100%; text-align: center; }
.confirm-h { margin: 0 0 8px; font-family: var(--font-heading); font-size: 19px; color: var(--ink); }
.confirm-p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.confirm-email { margin: 16px 0; padding: 14px 16px; background: var(--brand-soft);
  border: 1.5px solid var(--brand); border-radius: var(--radius-sm); font-size: 18px; font-weight: 700;
  color: var(--brand-dark); word-break: break-all; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.confirm-actions .btn { flex: 1; }
@media (max-width: 620px) {
  .confirm-actions { flex-direction: column-reverse; }
}

/* ---- open-end box ---- */
.openend { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.oe-area { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: 14px; font-family: inherit; margin-top: 6px; resize: vertical; }
.oe-area:focus { outline: none; border-color: var(--brand); }

/* ---- rank list (▲▼) ---- */
.ranktip { font-size: 12.5px; color: var(--brand-dark); background: var(--brand-soft);
  border-radius: var(--radius-sm); padding: 9px 12px; margin: 14px 0 10px; font-weight: 600; }
.ranklist { display: flex; flex-direction: column; gap: 8px; }
.rankrow { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 14px; background: #fff; cursor: grab; }
.rankrow .rnum { width: 30px; height: 30px; flex: none; background: var(--brand); color: #fff;
  border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.rankrow .rname { flex: 1; font-size: 15px; }
.rctrl { display: flex; flex-direction: column; gap: 3px; }
.arrow { border: 1px solid var(--line); background: #f6f8fc; border-radius: 6px; width: 30px; height: 20px;
  cursor: pointer; line-height: 1; font-size: 11px; color: var(--muted); }
.arrow:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.arrow:disabled { opacity: .3; cursor: default; }

/* ---- benchmark (Q11 current, by 3 colored groups) + importance (Q11b) ---- */
.substep { font-size: 14px; margin-bottom: 6px; }
.subdots { display: flex; gap: 6px; margin-bottom: 12px; }
.sd { width: 26px; height: 6px; border-radius: 6px; background: #dde3ee; }
.sd.on { background: var(--brand); }
.sd.done { background: var(--ok); }
.glegend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: #fbfcff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 10px; font-size: 12px; }
.gtag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.gtag i { width: 12px; height: 12px; border-radius: 50%; background: var(--gc); display: inline-block; }
.gscale { color: var(--muted); }
.brow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid #eef1f6; }
.brow.head { border-top: none; }
.bname { flex: 0 0 200px; min-width: 120px; max-width: 240px; font-size: 13.5px; }
.bname .q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: #e2e8f3; color: #5a6b8c; font-size: 10px; cursor: help; margin-left: 5px; }
.bgrp { display: flex; gap: 3px; padding-left: 8px; }
.bgrp .gh { font-size: 11px; font-weight: 700; color: var(--gc); width: 100%; text-align: center; }
.gdot { width: 26px; height: 26px; border: 2px solid #c8d0df; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 10px; color: transparent; }
.bgrp .gdot.on { border-color: var(--gc); background: var(--gc); color: #fff; }
.bgrp.imp { --gc: var(--accent); }
.bgrp:focus { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.kbd-hint { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.kbd-hint kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-family: inherit; font-size: 11px; }

/* ---- results dashboard ---- */
.rh { font-family: var(--font-heading); font-size: 15px; font-weight: 600; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 4px; }
.fact { background: var(--brand-soft); border-radius: var(--radius-sm); padding: 6px 10px; }
.fk { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.fv { font-size: 13px; font-weight: 700; color: var(--ink); }
.fx { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.fact .fk { font-size: 11.5px; color: var(--muted); }
.fact .fv { font-size: 16px; font-weight: 700; color: var(--brand-dark); margin-top: 2px; }
.chart { overflow-x: auto; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.barrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.blabel { width: 180px; flex: none; color: var(--ink); }
.btrack { flex: 1; height: 14px; background: #eef1f6; border-radius: 7px; overflow: hidden; }
.btrack i { display: block; height: 100%; background: var(--brand); border-radius: 7px; }
.bval { width: 26px; text-align: right; color: var(--muted); }
.gbars { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 16px; }
.gbarrow { border-bottom: 1px solid #eef1f6; padding-bottom: 8px; }
.gblabel { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.gbline { display: flex; align-items: center; gap: 8px; font-size: 10.5px; margin: 3px 0; }
.gbtag { width: 130px; flex: none; color: var(--muted); }
.gbtrack { flex: 1; height: 10px; background: #eef1f6; border-radius: 5px; overflow: hidden; }
.gbtrack i { display: block; height: 100%; border-radius: 5px; }
.gbval { width: 28px; text-align: right; color: var(--muted); flex: none; }
.radar-wrap { margin: 4px 0 8px; }
.radar-legend { display: flex; justify-content: center; gap: 22px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.radar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.grouphdr { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; margin: 12px 0 4px; }
.grouphdr i { width: 12px; height: 12px; border-radius: 50%; }
.rankout { margin: 6px 0 0; padding-left: 22px; }
.rankout li { font-size: 14.5px; margin: 3px 0; }
.foot-note { margin-top: 18px; font-style: italic; }

/* ---- results dashboard: header + download + Org Character + priority gaps ---- */
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.result-head-text { flex: 1 1 auto; max-width: 70%; min-width: 0; }
.result-head .btn { flex: none; white-space: nowrap; }
.char-card { display: flex; align-items: center; gap: 14px; margin: 8px 0 8px; padding: 12px 14px;
  border-radius: var(--radius); background: linear-gradient(135deg, var(--brand-soft), var(--accent-soft));
  border: 1px solid var(--line); }
.char-emoji { font-size: 42px; flex: none; line-height: 1; }
.char-illustration { flex: none; height: 168px; display: flex; align-items: center; justify-content: center; }
.char-illustration img { width: 100%; height: 100%; object-fit: contain; }
.char-card.two-col { align-items: flex-start; gap: 26px; }
.char-illustration-full { flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; }
.char-illustration-full img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 12px; }
.char-illustration-full .char-emoji { font-size: 64px; }
.char-illus-block { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.char-left { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 30%; }
.char-right { flex: 1 1 70%; min-width: 0; }
.char-gaps-h { margin-top: 16px; font-size: 18px; }
.char-tag { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--brand); }
.char-title { font-family: var(--font-heading); font-size: 21px; font-weight: 700; color: var(--ink); margin: 2px 0 2px; }
.char-subtitle { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.char-desc { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.char-bullets { margin: 0 0 10px; padding: 0; list-style: none; }
.char-bullets li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-bottom: 2px; }
.char-bullets li:last-child { margin-bottom: 0; }
.char-bullets li::before { content: '•'; position: absolute; left: 2px; color: var(--brand); font-weight: 700; }
.char-dataline { font-size: 12.5px; margin: 6px 0 4px; }
.char-tagline { font-weight: 700; font-size: 14.5px; color: var(--brand); margin: 4px 0 2px; }
.peak-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); }
.runnerup-card { margin: 14px 0 2px; padding: 5px 8px; gap: 8px; background: var(--card); width: 100%; }
.runnerup-card .char-illustration { height: 76px; }
.runnerup-card .char-illustration .char-emoji { font-size: 26px; }
.runnerup-card .char-title { font-size: 14px; margin: 1px 0; }
.char-analysis { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.ga-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.char-analysis-item { font-size: 12px; line-height: 1.4; color: var(--ink);
  border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 4px solid var(--ai-color, var(--brand)); background: var(--ai-bg, #fbfcff); padding: 6px 10px; }
.char-analysis-item.strength { --ai-color: var(--brand-dark); --ai-bg: var(--brand-soft); }
.char-analysis-item.sev-urgent { --ai-color: #C0392B; --ai-bg: #FCEBEA; }
.char-analysis-item.sev-high { --ai-color: #B7791F; --ai-bg: var(--accent-soft); }
.char-analysis-item.sev-moderate { --ai-color: #2E6FA3; --ai-bg: #EAF2FA; }
.ga-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ga-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--ai-color); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; flex: none; font-family: var(--font-heading); }
.ga-name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--ink); }
.ga-line { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 2px 0; }
.ga-line b { color: var(--ink); }
.ga-status { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ai-color); color: #fff; margin-top: 2px; }
.ga-note { border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; padding: 6px 10px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ga-note-list { margin: 0; padding-left: 15px; }
.ga-note-list li { margin-bottom: 3px; }
.ga-note-list li:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .ga-row { grid-template-columns: 1fr; } }
.peak-card .char-desc { margin-bottom: 8px; }
.tier-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; border: 1.5px solid var(--tc); color: var(--tc); margin: 2px 0 8px; }
.tier-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); display: inline-block; }
.gap-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 6px; }
.gap-card { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: #fff; }

/* Q20 business-outcome cards — same severity colors as .char-analysis-item's
   --ai-color tokens, but a top accent bar instead of a left one, so the two
   card families read as visually distinct even though they share a palette */
.outcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 6px; }
.outcome-card { border: 1px solid var(--line); border-top: 4px solid var(--ai-color, var(--brand)); border-radius: var(--radius-sm); padding: 12px 14px; background: #fff; }
.outcome-card.sev-urgent { --ai-color: #C0392B; }
.outcome-card.sev-moderate { --ai-color: #2E6FA3; }
.outcome-card.ok { --ai-color: var(--ok); }
.outcome-icon { font-size: 20px; line-height: 1; }
.outcome-text { font-size: 12px; color: var(--ink); line-height: 1.4; margin: 4px 0 6px; }
.outcome-text b { font-family: var(--font-heading); }
.outcome-level { font-size: 11.5px; font-weight: 700; color: var(--ai-color); }

/* 22-skill comparison table — div-based rows (matches the rest of the file's
   convention) grouped by category; gap badge reuses the same severity palette
   as .char-analysis-item/.outcome-card, just as a pill instead of a border accent.
   Two columns of 3 categories each — same half-the-height trick as .gbars. */
.skill22 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.skill22-group { margin: 10px 0 4px; }
.skill22-group-h { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.skill22-row { display: grid; grid-template-columns: 1fr 30px 30px 60px; gap: 4px; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.15; }
.skill22-row:last-child { border-bottom: none; }
.skill22-head { border-bottom: 2px solid var(--line); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.skill22-head .skill22-num { color: var(--muted); }
/* skill name is the row's primary text; current/target recede as secondary
   reference numbers; gap — number + a small severity word underneath, no pill —
   is the strongest signal, exactly matching the read order category → skill →
   gap → current/target */
.skill22-name { color: var(--ink); font-weight: 600; }
.skill22-num { text-align: center; color: var(--muted); font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.skill22-gapcell { text-align: right; }
.skill22-gapnum { font-family: var(--font-heading); font-weight: 700; font-size: 13px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.skill22-gaplabel { font-size: 8.5px; letter-spacing: .1px; }
.skill22-gapcell.ok .skill22-gapnum, .skill22-gapcell.ok .skill22-gaplabel { color: var(--sev-ok); }
.skill22-gapcell.ok .skill22-gapnum { font-weight: 600; opacity: .85; }
.skill22-gapcell.sev-urgent .skill22-gapnum, .skill22-gapcell.sev-urgent .skill22-gaplabel { color: var(--sev-urgent); }
.skill22-gapcell.sev-high .skill22-gapnum, .skill22-gapcell.sev-high .skill22-gaplabel { color: var(--sev-watch); }
.skill22-gapcell.sev-moderate .skill22-gapnum, .skill22-gapcell.sev-moderate .skill22-gaplabel { color: var(--sev-plan); }
@media (max-width: 640px) { .skill22 { grid-template-columns: 1fr; } .skill22-row { font-size: 11px; } }

/* gap spotlight — the single most-important skill gap (Q12/Q13/Q14/Q14b) */
.gap-spotlight { display: grid; grid-template-columns: 210px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; }
.gs-left { padding: 14px; border-right: 1px dashed var(--line); }
.gs-skill-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--ink); margin: 4px 0 10px; }
.gs-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.gs-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--line); display: block; }
.gs-dots span.on { background: var(--brand); }
.gs-pill { display: inline-block; }
.gs-right { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.gs-block-h { font-family: var(--font-heading); font-weight: 700; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
@media (max-width: 640px) { .gap-spotlight { grid-template-columns: 1fr; } .gs-left { border-right: none; border-bottom: 1px dashed var(--line); } }

/* shared callout box — group disparity, method mismatch, future-skills compare */
.insight-box { background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink); margin: 10px 0 6px; }

/* two-column comparison — method mismatch (Q15b/Q17b), future skills compare (Q7b/Q18) */
.mismatch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 6px; }
.mismatch-list { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink); line-height: 1.7; }
.mismatch-list li.match { color: var(--ok); font-weight: 600; }
.match-tag { font-size: 11px; font-weight: 700; color: var(--ok); }
@media (max-width: 640px) { .mismatch-cols { grid-template-columns: 1fr; } }
.gap-rank { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--brand); }
.gap-name { font-size: 14px; font-weight: 600; color: var(--ink); margin: 4px 0 6px; }
.gap-delta { font-size: 13px; color: #c0392b; font-weight: 700; }
.section-h2 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--ink); margin: 6px 0 3px; }
.char-card + .section-h2 { margin-top: 24px; }
.print-header + .section-h2 { margin-top: 24px; }
.gbars + .section-h2 { margin-top: 24px; }

/* =========================================================================
   REPORT REDESIGN — results/PDF page only, scoped under .result-card.
   Moves the visual language from "assessment dashboard" (tinted boxes,
   solid badges, borders everywhere) toward a premium consulting report:
   whitespace-led hierarchy, thin rules instead of containers, color used
   only where it carries meaning. Every rule here is scoped to .result-card
   so the live question-answering screens — which reuse several of the same
   base classes (.facts/.fact, .rh, .chip, .pill) — are completely untouched.
   Data, copy, and structure are unchanged; this is presentation only.
   ========================================================================= */
.result-card { background: #fff; }
.result-card .qtitle { font-size: 24px; letter-spacing: -.2px; }
.result-card .qhelp { margin-bottom: 22px; }

/* section headers: a short accent rule + generous whitespace does the
   separating, not a full-width border or a background */
.result-card .section-h2 {
  font-size: 19px; letter-spacing: .1px; color: var(--ink);
  margin: 40px 0 22px; padding-bottom: 5px; border-bottom: 2px solid var(--brand);
  display: block; width: fit-content;
}
.result-card .section-h2.accent-purple { border-bottom-color: var(--purple); }
.result-card h3.rh {
  font-family: var(--font-heading); font-size: 14.5px; font-weight: 700; letter-spacing: .1px;
  margin: 26px 0 12px; padding-top: 0; border-top: none; color: var(--ink);
}

/* exec-summary strip + the closing facts grid: a stat row — label above a
   dominant value, separated by a hairline rule, not three tinted boxes */
.result-card .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0; }
.result-card .fact { background: none; border-radius: 0; padding: 0 20px; border-left: 1px solid var(--line); }
.result-card .fact:first-child { border-left: none; padding-left: 0; }
.result-card .fact .fk { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.result-card .fact .fv { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 0; }
/* exec-summary strip: three bordered blocks, stacked vertically, each with an icon,
   label, value, and a one-line supporting detail pulled from data already computed
   elsewhere on the page (archetype gloss, average gap, the Q12 skill's category) */
.result-card .exec-strip.facts { grid-template-columns: 1fr; gap: 6px; margin: 4px 0 26px; }
.result-card .exec-strip .fact {
  display: block; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); background: #fff; padding: 12px 14px;
}
.result-card .exec-fact-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.result-card .exec-fact-icon { font-size: 16px; line-height: 1; }
.result-card .exec-strip .fact .fk { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin-bottom: 0; }
.result-card .exec-strip .fact .fv { font-size: 16px; font-weight: 700; color: var(--ink); }
.result-card .exec-strip .fact .fx { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* Org Character hero: clean ground + a single rule instead of a gradient
   card — the illustration and typography carry the weight, not a box */
.result-card .char-card { background: none; border: none; border-radius: 0; padding: 0 0 28px; margin: 0 0 8px; }
.result-card .char-tag { color: var(--brand); }
.result-card .char-title { font-size: 26px; }
.result-card .runnerup-card { border-top: 1px dashed var(--line); padding: 16px 0 0; margin: 18px 0 0; background: none; }

/* current → target: the peak-domain score as a visual comparison, not a sentence */
.result-card .score-compare { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 4px; }
.result-card .sc-block { text-align: center; }
.result-card .sc-label { font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; height: 13px; }
.result-card .sc-num { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1; }
.result-card .sc-num span { font-size: 15px; font-weight: 600; color: var(--muted); }
.result-card .sc-arrow { font-size: 20px; color: var(--line); align-self: center; margin-top: 13px; }
.result-card .sc-gap-block { margin-left: 4px; }
.result-card .sc-gap { display: inline-block; font-family: var(--font-heading); font-size: 15px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.result-card .sc-gap.ok { background: none; border: 1px solid var(--sev-ok); color: var(--sev-ok); }
.result-card .sc-gap.watch { background: none; border: 1px solid var(--sev-watch); color: var(--sev-watch); }

/* skill-gap identity rows: a colored rule + whitespace instead of a tinted card */
.result-card .char-analysis-item { background: none; border: none; border-left: 2px solid var(--ai-color, var(--brand)); border-radius: 0; padding: 2px 0 2px 16px; }
.result-card .char-analysis-item.strength { --ai-color: var(--sev-ok); }
.result-card .char-analysis-item.sev-urgent { --ai-color: var(--sev-urgent); }
.result-card .char-analysis-item.sev-high { --ai-color: var(--sev-watch); }
.result-card .char-analysis-item.sev-moderate { --ai-color: var(--sev-plan); }
/* the strength row (★) reads as an outlined mark; the #1/#2 gap ranks stay filled so the
   two largest gaps are unmistakably flagged rather than blending into the flat list */
.result-card .ga-rank { background: none; border: 1.5px solid var(--ai-color); color: var(--ai-color); }
.result-card .char-analysis-item.sev-urgent .ga-rank,
.result-card .char-analysis-item.sev-high .ga-rank { background: var(--ai-color); border-color: var(--ai-color); color: #fff; }
.result-card .ga-status { background: none; border: none; padding: 0; font-weight: 700; color: var(--ai-color); }
.result-card .ga-note { background: none; border: none; border-left: 1px solid var(--line); border-radius: 0; padding: 2px 0 2px 16px; }

/* Q20 outcomes: a hairline-separated row with a colored accent per item,
   not four bordered cards */
/* business-outcome context sits below the main insights, so it reads visually
   quieter: smaller type, muted icon, no bold color on an item with no answer */
.result-card .outcome-cards { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; margin: 4px 0 24px; }
.result-card .outcome-card { background: none; border: none; border-radius: 0; padding: 0 0 0 16px; border-left: 1px solid var(--line); }
.result-card .outcome-card:first-child { border-left: none; padding-left: 0; }
.result-card .outcome-icon { font-size: 16px; opacity: .85; }
.result-card .outcome-text { font-size: 11.5px; }
.result-card .outcome-level { font-size: 11px; }
.result-card .outcome-card.sev-urgent { --ai-color: var(--sev-urgent); }
.result-card .outcome-card.sev-moderate { --ai-color: var(--sev-plan); }
.result-card .outcome-card.ok { --ai-color: var(--sev-ok); }
.result-card .outcome-card.no-data { --ai-color: var(--muted); }
.result-card .outcome-card.no-data .outcome-level { font-weight: 400; font-style: italic; }

/* bridges the category-level radar and the skill-level table: two big at-a-glance
   numbers, the same weight as the score-compare numerals on page 1 */
.result-card .radar-stats { display: flex; gap: 40px; margin: 4px 0 22px; flex-wrap: wrap; }
.result-card .radar-stat { }
.result-card .rs-num { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; }
.result-card .rs-num span { font-size: 16px; font-weight: 600; color: var(--muted); }
.result-card .rs-label { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* gap spotlight: drop the outer box, keep the dashed column divider */
.result-card .gap-spotlight { border: none; border-radius: 0; }
.result-card .gs-left { padding-left: 0; }
.result-card .gs-right { padding-right: 0; }

/* callouts: a pull-quote rule instead of a tinted panel */
.result-card .insight-box { background: none; border-left: 2px solid var(--brand); border-radius: 0; padding: 4px 0 4px 16px; }

/* "match" indicators read as positive/on-track — teal, not utility green */
.result-card .mismatch-list li.match { color: var(--sev-ok); }
.result-card .match-tag { color: var(--sev-ok); }

/* chips reused here (obstacle tags) read quieter outlined, not solid-filled —
   scoped so the live skill/method picker's chips (rank + remove button) are untouched */
.result-card .chip { background: none; border: 1px solid var(--brand); color: var(--brand); }

/* page 3 — "From Skill Gaps to Action": one headline, four labeled sections
   (Who / What / How / Readiness) instead of an unlabeled list of findings */
.result-card .page3-title { font-size: 22px; border-bottom-width: 3px; display: block; }
.result-card .section-eyebrow { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 22px 0 4px; }
.result-card .section-eyebrow + .section-h2,
.result-card .section-eyebrow + h3.rh { margin-top: 2px; }

/* "skills to develop this year" is the visual anchor of section 02 — bigger, bolder,
   numbered; "next 2–3 years" stays present but recedes */
.result-card .mismatch-col-primary .gs-block-h { font-size: 13px; color: var(--ink); }
.result-card .mismatch-col-primary .mismatch-list { font-size: 15px; font-weight: 600; line-height: 2; }
.result-card .mismatch-col-primary .mismatch-list li::marker { font-family: var(--font-heading); font-weight: 700; color: var(--brand); font-size: 15px; }
.result-card .mismatch-col-secondary { opacity: .8; }
.result-card .mismatch-col-secondary .mismatch-list { font-size: 12px; }

/* section 04 — AI readiness is the headline metric, skills strategy a supporting line */
.result-card .readiness-block { margin: 8px 0 4px; }
.result-card .readiness-ai { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-card .ra-num { font-family: var(--font-heading); font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; }
.result-card .ra-num span { font-size: 17px; font-weight: 600; color: var(--muted); }
.result-card .ra-caption { font-size: 12px; color: var(--muted); }
.result-card .ra-detail { flex-basis: 100%; font-size: 13px; color: var(--ink); font-weight: 600; }
.result-card .readiness-strategy { margin-top: 8px; font-size: 13px; color: var(--ink); }
.result-card .rst-label { color: var(--muted); }
.result-card .rst-label::after { content: ': '; }
.result-card .rst-value { font-weight: 700; }

/* data visualization as the hero: a bit more on-screen presence than the
   question-flow default. @media screen (not just a plain rule) so it can
   never outrank @media print's own compact sizing below on specificity —
   both use !important on the same selector, and this one is more specific,
   so without the screen guard it would win during printing too and blow
   the tuned 3-page layout. */
@media screen {
  .result-card .radar-wrap svg { max-width: 560px !important; }
}
.result-card .gbtrack { height: 12px; }

/* ---- info / intro pages (Q11intro, Q14gap) ---- */
.info-page .rh:first-of-type { margin-top: 20px; }
.intro-groups { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.intro-gcard { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: #fbfcff; }
.intro-gcard .ig-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gc); margin-top: 3px; flex: none; }
.intro-gcard .ig-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.intro-gcard .ig-def { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.intro-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.intro-lcard { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 6px; text-align: center; background: #fff; }
.intro-lcard .il-n { font-size: 20px; font-weight: 700; color: var(--brand); }
.intro-lcard .il-l { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.intro-cats { display: flex; flex-direction: column; gap: 8px; }
.intro-ccard { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: #fff; }
.intro-ccard .ic-name { font-weight: 700; font-size: 13px; color: var(--brand-dark); }
.intro-ccard .ic-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* header shown only inside the printed/exported PDF — the normal .appbar (with its own
   logos + wordmark) is hidden when printing, so this is the only branding on the page */
.print-header { display: none; }

@media print {
  @page { margin: 14mm 12mm; }
  .appbar, .body-shell .sidenav, .nav, .progress-wrap, .no-print { display: none !important; }
  /* the on-screen layout keeps body/.app at min-height:100vh to fill the viewport — in
     print that floor has nothing to do with actual content and was padding a trailing
     blank page onto the PDF whenever a section's real content fell short of it */
  body, .app { min-height: 0 !important; background: #fff !important; }
  /* the >=900px desktop breakpoint applies zoom:1.25 to make on-screen browsing feel
     roomier — window.print() prints whatever zoom is active on screen, so without this
     reset a desktop-width print inflates every element by 25% and blows the 3-page
     layout's pagination math by that same 25%, well past what any spacing tweak fixes */
  .app { zoom: 1 !important; max-width: 100% !important; padding: 0 !important; }
  .main-col { max-width: 100% !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: none !important; padding: 0 !important; }
  /* NOT position:fixed — Chrome's headless print repeated/duplicated it at the wrong
     spot instead of once per page. Three static instances are placed in the DOM instead:
     one at the very top, one before each of the page-2 and page-3 sections (see paintResults). */
  .print-header { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
  .print-header.page-break-before { break-before: page; page-break-before: always; }
  .print-header .brand-lockup { display: flex; align-items: center; gap: 12px; }
  .print-header .logo-futureskill { height: 20px; width: auto; }
  .print-header .logo-hewitt { height: 28px; width: auto; }
  .print-header .wordmark { height: 26px; width: auto; }
  /* keep each card whole on one printed page — a stretched image or long analysis
     card that straddled a page break used to bleed/overlap into the next page */
  .char-card, .char-analysis-item, .gap-card, .runnerup-card, .ga-row, .fact, .gbarrow,
  .outcome-card, .skill22-group, .skill22-row, .gap-spotlight, .insight-box, .mismatch-col { break-inside: avoid; page-break-inside: avoid; }
  /* 2-column layout roughly halves the vertical footprint of the 6-category
     benchmark bars, which is what makes the whole details section fit on one page */
  .radar-wrap svg { max-width: 430px !important; }
  .radar-legend { margin-top: 6px !important; font-size: 12px !important; }
  .radar-stats { gap: 40px !important; margin: 24px 0 4px !important; }
  .rs-num { font-size: 26px !important; }
  .rs-label { font-size: 9.5px !important; margin-top: 1px !important; }
  /* tighter vertical rhythm than the on-screen version — the redesigned results page packs
     an exec-summary strip, business-outcome cards, a 22-skill table and a gap spotlight
     into 3 physical pages, so print spacing has to be noticeably denser than screen spacing */
  /* page 1 leans into being a spacious "cover" page rather than fighting for every px —
     pages 2-4 stay dense, this is page-1-only since these classes each only appear once,
     on page 1 */
  .char-card { margin: 0 0 16px !important; padding: 6px 8px !important; }
  .exec-strip.facts { margin-bottom: 26px !important; gap: 9px !important; }
  .exec-strip.facts + .section-h2 { margin-top: 26px !important; }
  .outcome-cards { margin-bottom: 40px !important; }
  /* one scoped override, not a duplicate pixel value — same aspect-ratio-driven sizing
     as screen, just a bigger share of the (narrower) printed column */
  .char-left { flex: 0 0 34% !important; }
  .char-card + .section-h2 { margin-top: 18px !important; }
  .section-h2 { margin-top: 16px !important; margin-bottom: 8px !important; padding-bottom: 4px !important; }
  .section-eyebrow + .section-h2, .section-eyebrow + h3.rh { margin-top: 2px !important; }
  .outcome-card { padding: 4px 6px !important; }
  .outcome-icon { font-size: 13px !important; line-height: 1 !important; }
  .outcome-text { font-size: 10px !important; margin: 1px 0 !important; }
  .outcome-level { font-size: 10px !important; }
  .exec-strip .fact { padding: 8px 10px !important; }
  .outcome-cards { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; margin: 0 !important; padding: 4px 0 !important; }
  .char-tagline { margin: 1px 0 !important; font-size: 12px !important; }
  .char-subtitle { margin-bottom: 1px !important; font-size: 10.5px !important; }
  .char-dataline { margin: 1px 0 2px !important; font-size: 10.5px !important; }
  .runnerup-card { margin: 10px 0 0 !important; padding: 8px 5px 2px !important; }
  .runnerup-card .char-illustration { height: 76px !important; }
  .runnerup-card .char-title { font-size: 12px !important; }
  .char-bullets li { margin-bottom: 0 !important; font-size: 10.5px !important; }
  .char-analysis { gap: 2px !important; }
  .char-analysis-item { padding: 2px 6px !important; font-size: 10px !important; }
  .ga-head { margin-bottom: 0 !important; }
  .ga-name { font-size: 11px !important; }
  .ga-line { font-size: 10px !important; margin: 0 !important; }
  .ga-row { gap: 6px !important; }
  .ga-note { padding: 3px 7px !important; }
  .ga-note-list li { margin-bottom: 0 !important; }
  h3.rh { margin-top: 7px !important; margin-bottom: 4px !important; }
  .qhelp.compact-help { margin: 1px 0 !important; font-size: 11px !important; }
  .skill22-row { padding: 1px 4px !important; font-size: 10px !important; line-height: 1.1 !important; }
  .skill22-gapnum { font-size: 11px !important; }
  .skill22-gaplabel { font-size: 7.5px !important; }
  .skill22-group { margin: 4px 0 1px !important; }
  .skill22-group-h { font-size: 12px !important; margin-bottom: 2px !important; }
  .gap-spotlight { margin-bottom: 2px !important; }
  .gs-left, .gs-right { padding: 4px 6px !important; }
  .gs-skill-name { margin: 2px 0 6px !important; }
  .gbars { row-gap: 4px !important; }
  .gbarrow { font-size: 10.5px !important; }
  .gblabel { margin-bottom: 1px !important; }
  .insight-box { padding: 3px 8px !important; margin: 2px 0 !important; font-size: 10.5px !important; line-height: 1.3 !important; }
  .mismatch-list { font-size: 11.5px !important; line-height: 1.4 !important; }
  .facts { margin: 2px 0 !important; }
  .fact { padding: 3px 7px !important; }
  .fact .fk { font-size: 9.5px !important; margin-bottom: 0 !important; }
  .fact .fv { font-size: 12px !important; margin-top: 0 !important; }
  .page3-title { font-size: 16px !important; margin: 0 0 4px !important; padding-bottom: 3px !important; }
  .section-eyebrow { font-size: 9px !important; margin: 14px 0 2px !important; }
  .mismatch-col-primary .mismatch-list { font-size: 12px !important; line-height: 1.5 !important; }
  .mismatch-col-primary .mismatch-list li::marker { font-size: 12px !important; }
  .readiness-block { margin: 2px 0 !important; }
  .ra-num { font-size: 22px !important; }
  .ra-num span { font-size: 12px !important; }
  .ra-detail { font-size: 10.5px !important; }
  .readiness-strategy { margin-top: 3px !important; font-size: 10.5px !important; }
}

/* =========================================================================
   DESKTOP LAYOUT (>=900px) — section sidebar + wider canvas.
   Mobile/tablet below this breakpoint is untouched; a dedicated mobile pass
   is planned for the next phase.
   ========================================================================= */
@media (min-width: 900px) {
  /* wider canvas + a uniform 125% scale-up (same effect as a user pressing
     Ctrl/Cmd "+" a couple of times in their browser) so desktop feels roomier */
  .app { max-width: 1180px; padding: 0 32px; zoom: 1.25; }
  .appbar { padding: 20px 0; }
  .body-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 40px; align-items: start; }
  .main-col { max-width: 760px; }
  .progress-wrap { padding: 0; }
  .screen { padding: 10px 0 28px; }
  .nav { padding: 16px 0 26px; }
  .card { padding: 40px 44px 32px; }
  .qtitle { font-size: 22px; }
  .hero { padding: 40px 20px; }

  .sidenav { display: none; }
  .sidenav.on { display: block; position: sticky; top: 28px; }
  .sidenav-inner { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 18px; box-shadow: 0 10px 30px rgba(11,30,60,.05); }
  .sidenav h5 { margin: 0 0 14px; font-family: var(--font-heading); font-size: 11.5px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
  .sidenav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .sidenav li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px;
    font-size: 12.5px; color: var(--muted); line-height: 1.35; }
  .sidenav li .dot { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--line);
    display: grid; place-items: center; font-size: 10px; flex: none; background: #fff; color: transparent; }
  .sidenav li.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
  .sidenav li.done { cursor: pointer; }
  .sidenav li.done:hover, .sidenav li.done:focus { background: var(--brand-soft); color: var(--ink); outline: none; }
  .sidenav li.active { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
  .sidenav li.active .dot { border-color: var(--brand); }

  /* benchmark / importance / outcome matrices get breathing room on wide screens */
  .rgrp, .bgrp { width: 168px; }
  .omrow .omname { font-size: 14.5px; }

  /* results dashboard: use the full width instead of the narrow question column */
  .body-shell.results-mode { grid-template-columns: 1fr; }
  .body-shell.results-mode .main-col { max-width: 1100px; margin: 0 auto; }
}

@media (max-width: 620px) {
  /* tighter shell paddings so content gets more usable width */
  .appbar { padding: 12px 14px; }
  .brand-lockup { gap: 10px; }
  .brand-lockup .logo-hewitt { height: 26px; }
  .brand-lockup .logo-futureskill { height: 18px; }
  .brand-divider { height: 20px; }
  .progress-wrap { padding: 0 14px; }
  .screen { padding: 8px 14px 16px; }
  .card { padding: 22px 16px 18px; border-radius: 16px; }
  .hero { padding: 26px 16px; }
  .wordmark-lg { height: auto; width: 100%; max-width: 280px; margin: 0 auto 8px; }

  /* footer nav: keep it reachable with the thumb at all times */
  .nav { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); z-index: 5; }
  .btn { padding: 12px 16px; font-size: 14.5px; }
  .savehint { display: none; } /* saves space; the sticky nav itself signals persistence */

  .qtitle { font-size: 18px; }
  .ocell { width: 70px; }
  .scale { flex-wrap: wrap; }
  .scale .pt { min-width: 28%; }
  .facts { grid-template-columns: 1fr; }
  .blabel { width: 108px; font-size: 11.5px; }
  .gbtag { width: 92px; font-size: 11px; }
  /* rating rows with 4 circles (Q11 per-group view, Q11b, Q20): narrow the
     skill-name label so it wraps onto ~2 lines, and use the freed-up space
     to make the circles noticeably bigger and easier to tap. */
  .bname, .omname { flex: 0 0 86px; max-width: 86px; min-width: 0; width: 86px;
    font-size: 11.5px; line-height: 1.28; white-space: normal; }
  .bgrp { gap: 6px; padding-left: 4px; }
  .gdot { width: 36px; height: 36px; font-size: 13.5px; }
  .omrow { align-items: flex-start; padding: 12px 4px; }
  .char-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .char-illustration { height: 112px; }
  .char-illustration-full { width: auto; height: 33vh; }
  .char-illus-block { width: auto; }
  .char-left { flex: 0 0 auto; width: 100%; align-items: center; }
  .char-right { flex: 0 0 auto; width: 100%; }
  .result-head { flex-direction: column; align-items: stretch; }
  .result-head-text { flex: 0 0 auto; width: 100%; }
  .result-head .btn { flex: 0 0 auto; width: 100%; }
  .gap-cards { grid-template-columns: 1fr 1fr; }

  /* ---- progressive-disclosure controls used by the long rating/picking questions ---- */
  .grp-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
  .grp-tab { flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px; border: 1.5px solid var(--line);
    font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; background: #fff; }
  .grp-tab .gt-dot { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 4px; background: var(--gc); }
  .grp-tab.active { border-color: var(--gc); background: var(--brand-soft); color: var(--ink); }
  .grp-tab .gt-check { color: var(--ok); margin-left: 3px; }

  .cat-stepper-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600;
    color: var(--ink); margin-bottom: 8px; }
  .cat-stepper-head .csh-n { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft);
    padding: 2px 8px; border-radius: 999px; flex: none; }
  .cat-stepnav { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 2px; }
  .cat-stepnav .btn { flex: 1; padding: 10px 8px; font-size: 13px; }
  .cat-stepnav .btn:disabled { opacity: .35; }
}

/* =========================================================================
   WELCOME REDESIGN — the pre-start screen only (paintWelcome).
   No sidebar, no pills/emoji, PDPA notice collapsed behind <details>,
   form fields as short label + input + small helper. Question screens,
   thanks/halfway (which still use .card.hero/.meta-pills) are untouched.
   ========================================================================= */
@media (min-width: 900px) {
  /* welcome has no sidebar — collapse the reserved grid column so the content
     column sits centered instead of pushed right by an empty 248px gutter */
  .body-shell.welcome-mode { grid-template-columns: 1fr; }
  .body-shell.welcome-mode .main-col { margin: 0 auto; }
}
.welcome-wrap { max-width: 640px; margin: 0 auto; }
.welcome-hero { text-align: center; padding: 26px 10px 4px; }
.welcome-hero .intro { font-size: 14.5px; color: var(--muted); line-height: 1.85; max-width: 34em; margin: 16px auto 0; }
.welcome-hero .intro b { color: var(--ink); }
.welcome-cta-line { font-size: 15px; font-weight: 700; color: var(--brand); margin: 16px 0 0; }
.welcome-meta { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.welcome-meta b { color: var(--ink); }

.welcome-form { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(11,30,60,.06); padding: 28px 30px 24px; margin-top: 26px; }
.wf-h { margin: 0 0 4px; font-family: var(--font-heading); font-size: 16.5px; font-weight: 700; color: var(--ink); }
.wf-sub { margin: 0 0 22px; font-size: 13px; color: var(--muted); }
.wfield { margin-bottom: 20px; }
.wf-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.wfield .otherbox { margin-top: 0; width: 100%; }
.wf-help { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.wf-help b { color: var(--ink); font-weight: 600; }
.wf-pdfline { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--brand-dark);
  font-weight: 600; margin-top: 7px; }
.wf-pdfline svg { flex: none; }

.welcome-consent { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 2px; }
.welcome-consent input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 3px;
  accent-color: var(--brand); cursor: pointer; }
.welcome-consent label { font-size: 12.5px; color: var(--muted); line-height: 1.7; cursor: pointer; }
.welcome-consent label b { color: var(--ink); }
.wf-more { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; cursor: pointer; }
.wf-more:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.btn-startfull { width: 100%; margin-top: 16px; font-weight: 700; }
.welcome-trust { display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 14px; }
.welcome-trust svg { flex: none; margin-top: 2px; }

details.welcome-notice { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
details.welcome-notice summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; font-family: var(--font-heading); font-size: 13.5px; font-weight: 600; color: var(--ink); }
details.welcome-notice summary::-webkit-details-marker { display: none; }
details.welcome-notice summary .chev { margin-left: auto; color: #9aa6bd; transition: transform .15s; font-size: 12px; }
details.welcome-notice[open] summary .chev { transform: rotate(90deg); }
details.welcome-notice summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: -2px; border-radius: 12px; }
details.welcome-notice .notice-body { padding: 2px 22px 16px; border-top: 1px solid var(--line); }
details.welcome-notice .notice-body ul { margin: 12px 0 0; padding-left: 18px; }
details.welcome-notice .notice-body li { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin-bottom: 9px; }
details.welcome-notice .notice-body li b { color: var(--ink); }
details.welcome-notice .notice-body li:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .welcome-hero { padding-top: 12px; }
  .welcome-form { padding: 20px 16px 18px; }
  details.welcome-notice summary { padding: 12px 16px; }
  details.welcome-notice .notice-body { padding: 2px 16px 14px; }
}