/* ============================================================
   Career Launch Academy — shared stylesheet
   Two visual worlds:
   - World A: professional-blue base (Home, Start, Truth, Resume, Interview, Strategy)
   - World B: dark charcoal/scarlet studio (Profile & Presence) — see profile.css
   ============================================================ */

:root {
  /* World A — professional blue base */
  --primary:        #0A66C2;
  --primary-dark:   #004182;
  --surface:        #FFFFFF;
  --canvas:         #F3F2EF;
  --border:         #E0DFDC;
  --ink:            #1D2226;
  --ink-muted:      #5E6D77;
  --success:        #057642;
  --success-bg:     #EAF5EF;
  --warning:        #B24020;
  --warning-bg:     #FBEEEA;

  /* shared scarlet accent used for "truth" highlights on the light base */
  --scarlet:        #D72638;
  --scarlet-dim:    #9E1B28;

  /* type scale */
  --fs-hero:   clamp(2.2rem, 5vw, 3.6rem);
  --fs-h1:     clamp(1.9rem, 3.5vw, 2.6rem);
  --fs-h2:     clamp(1.45rem, 2.5vw, 1.9rem);
  --fs-h3:     1.2rem;
  --fs-body:   1.05rem;
  --fs-small:  0.9rem;
  --fs-chip:   0.78rem;

  --radius:     10px;
  --radius-sm:  6px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12);

  --maxw: 1140px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4 { line-height: 1.2; font-weight: 700; margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* ---------- skip link + focus ---------- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--scarlet); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1rem; height: 64px;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  flex: 0 0 auto;
}
.nav__links { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__links a {
  color: var(--ink-muted); font-size: .92rem; font-weight: 500;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
}
.nav__links a:hover { color: var(--ink); background: var(--canvas); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.nav__cta {
  background: var(--primary) !important; color: #fff !important;
  font-weight: 600 !important; padding: .55rem 1rem !important;
}
.nav__cta:hover { background: var(--primary-dark) !important; }
.nav__toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .6rem; cursor: pointer; font-size: 1.2rem; line-height: 1; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--border); padding: .5rem var(--gutter) 1rem;
    gap: .1rem; margin-left: 0; box-shadow: var(--shadow-md);
    transform: translateY(-120%); transition: transform .25s ease; max-height: calc(100vh - 64px); overflow:auto;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: .8rem .6rem; font-size: 1rem; }
  .nav__cta { margin-top: .4rem; text-align: center; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: .85rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--primary); background: #fff; }
.btn--scarlet { background: var(--scarlet); color: #fff; }
.btn--scarlet:hover { background: var(--scarlet-dim); color: #fff; }
.btn--lg { font-size: 1.08rem; padding: 1rem 1.7rem; }

/* ============================================================
   SOURCE CHIP — the trust device
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-chip); font-weight: 600; line-height: 1.2;
  color: var(--primary-dark); background: #EAF1FA;
  border: 1px solid #CFE0F4; border-radius: 100px;
  padding: .2rem .6rem; vertical-align: middle; white-space: nowrap;
}
.chip::before { content: "▸"; font-size: .7em; opacity: .7; }
.chip--data { color: var(--success); background: var(--success-bg); border-color: #C2E5D2; }
a.chip:hover { text-decoration: none; filter: brightness(.97); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.card--pad-lg { padding: clamp(1.5rem, 3vw, 2.25rem); }

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }

/* hub cards */
.hub-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s; color: var(--ink);
}
.hub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #c9d6e3; text-decoration: none; }
.hub-card__icon {
  width: 44px; height: 44px; border-radius: 10px; background: #EAF1FA; color: var(--primary);
  display: grid; place-items: center; margin-bottom: .4rem;
}
.hub-card__icon svg { width: 24px; height: 24px; }
.hub-card h3 { margin: 0; font-size: var(--fs-h3); color: var(--ink); }
.hub-card p { margin: 0; color: var(--ink-muted); font-size: .98rem; }
.hub-card__go { margin-top: auto; padding-top: .6rem; color: var(--primary); font-weight: 600; font-size: .92rem; }
.hub-card--dark { background: linear-gradient(135deg,#232327,#1A1A1D); border-color:#3a3a40; color:#F5F5F5; }
.hub-card--dark h3 { color:#fff; }
.hub-card--dark p { color:#A8A8AD; }
.hub-card--dark .hub-card__icon { background: rgba(215,38,56,.16); color: var(--scarlet); }
.hub-card--dark .hub-card__go { color: var(--scarlet); }

/* ============================================================
   MYTH CARD — myth → correction → truth
   ============================================================ */
.myth {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem;
}
.myth__claim {
  background: var(--warning-bg); border-bottom: 1px solid #f0d6cd;
  padding: 1.1rem 1.4rem; display: flex; gap: .75rem; align-items: flex-start;
}
.myth__x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--warning); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; margin-top: 2px;
}
.myth__claim strong { font-size: 1.12rem; color: #7a2a16; }
.myth__body { padding: 1.3rem 1.4rem; }
.myth__truth {
  margin-top: 1rem; padding: 1rem 1.2rem; background: var(--success-bg);
  border-left: 4px solid var(--success); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.myth__truth strong { color: var(--success); }

/* ============================================================
   CONTRAST PAIR — weak ⟷ strong
   ============================================================ */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (max-width: 760px) { .contrast { grid-template-columns: 1fr; } }
.contrast__col { border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--border); }
.contrast__col--weak { background: var(--warning-bg); border-color: #f0d6cd; }
.contrast__col--strong { background: var(--success-bg); border-color: #C2E5D2; }
.contrast__label {
  display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small);
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6rem;
}
.contrast__col--weak .contrast__label { color: var(--warning); }
.contrast__col--strong .contrast__label { color: var(--success); }
.contrast__col p:last-child { margin-bottom: 0; }
.contrast__col em { color: var(--ink-muted); font-size: .92rem; display:block; margin-top:.5rem; }

/* ============================================================
   EYEBROW / SECTION HEADERS
   ============================================================ */
.eyebrow {
  display: inline-block; font-size: var(--fs-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--primary);
  margin-bottom: .6rem;
}
.eyebrow--scarlet { color: var(--scarlet); }
.lede { font-size: 1.18rem; color: var(--ink-muted); max-width: 60ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #fff; border-top: 1px solid var(--border); padding-block: 2.5rem; margin-top: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 1.4rem; } }
.footer h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.footer a { display: block; color: var(--ink); font-size: .95rem; padding: .15rem 0; }
.footer__mission { color: var(--ink-muted); font-size: .95rem; max-width: 38ch; }
.footer__legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: .85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-muted); }
.pill-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.note {
  font-size: .92rem; color: var(--ink-muted); background: var(--canvas);
  border-left: 3px solid var(--border); padding: .8rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- scroll reveal (only hides when JS confirms it can reveal) ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   WORLD B — PROFILE & PRESENCE DARK STUDIO
   Scoped under .studio so it never leaks into World A pages.
   ============================================================ */
.studio {
  --d-base:      #1A1A1D;
  --d-surface:   #232327;
  --d-raised:    #2C2C31;
  --d-border:    #36363D;
  --d-border-lit:#44444C;
  --d-ink:       #F5F5F5;
  --d-muted:     #A8A8AD;
  --d-faint:     #75757D;
  --scarlet:     #D72638;
  --scarlet-dim: #9E1B28;
  --scarlet-soft:rgba(215,38,56,.14);
  --gold:        #C9A227;
  background: var(--d-base);
  color: var(--d-ink);
}
.studio ::selection { background: var(--scarlet); color:#fff; }

/* studio nav override — dark, sits on charcoal */
.studio .nav { background: rgba(26,26,29,.88); border-bottom-color: var(--d-border); }
.studio .nav .brand { color: var(--d-ink); }
.studio .nav__links a { color: var(--d-muted); }
.studio .nav__links a:hover { color:#fff; background: var(--d-raised); }
.studio .nav__links a[aria-current="page"] { color: var(--scarlet); }
.studio .nav__toggle { color: var(--d-ink); border-color: var(--d-border-lit); }
.studio .nav__cta { background: var(--scarlet) !important; }
.studio .nav__cta:hover { background: var(--scarlet-dim) !important; }
@media (max-width:900px){ .studio .nav__links { background: var(--d-surface); border-bottom-color: var(--d-border); } }

/* studio hero */
.studio-hero { padding-block: clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem); position:relative; overflow:hidden; }
.studio-hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60ch 40ch at 85% -10%, rgba(215,38,56,.18), transparent 60%),
    radial-gradient(40ch 30ch at 0% 110%, rgba(201,162,39,.06), transparent 55%);
  pointer-events:none;
}
.studio-hero__inner { position:relative; max-width: 720px; }
.studio-hero h1 { font-size: var(--fs-hero); color:#fff; margin-bottom:.35em; }
.studio-hero h1 .scar { color: var(--scarlet); }
.studio-hero p.lede { color: var(--d-muted); font-size:1.2rem; }
.studio-kicker { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--scarlet); margin-bottom:1rem; }
.studio-kicker::before { content:""; width:22px; height:2px; background: var(--scarlet); }

/* studio section + headings */
.studio .section { border-top:1px solid var(--d-border); }
.studio h2 { color:#fff; }
.studio .eyebrow { color: var(--scarlet); }
.studio .lede { color: var(--d-muted); }
.studio .muted { color: var(--d-faint); }

/* ---- the mock profile ---- */
.profile-doc {
  background: var(--d-surface); border:1px solid var(--d-border); border-radius: 14px;
  overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); max-width: 720px; margin: 0 auto;
}
.pf-banner {
  height: 150px; position:relative;
  background:
    linear-gradient(120deg, #2a2730, #1f1d24),
    repeating-linear-gradient(45deg, rgba(215,38,56,.05) 0 12px, transparent 12px 24px);
  border-bottom:1px solid var(--d-border);
}
.pf-banner__tag {
  position:absolute; left:1.4rem; bottom:1.1rem; font-size:.85rem; font-weight:600; color:#cfcfd6;
  background: rgba(0,0,0,.35); padding:.3rem .7rem; border-radius:6px; backdrop-filter: blur(4px);
}
.pf-photo {
  width: 116px; height:116px; border-radius:50%; border:4px solid var(--d-surface);
  background: linear-gradient(135deg,#3a3a42,#26262c); margin:-58px 0 0 1.6rem; position:relative;
  display:grid; place-items:center; color: var(--d-faint);
}
.pf-photo svg { width:54px; height:54px; }
.pf-body { padding: .4rem 1.6rem 1.6rem; }
.pf-name { font-size:1.5rem; font-weight:700; color:#fff; margin:.6rem 0 .1rem; }
.pf-headline { font-size:1.05rem; color: var(--scarlet); font-weight:600; margin-bottom:.4rem; min-height:1.5em; }
.pf-meta { font-size:.9rem; color: var(--d-faint); }
.pf-open { display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; font-size:.82rem; font-weight:600; color:#6fae8a; }
.pf-open::before { content:""; width:7px; height:7px; border-radius:50%; background:#6fae8a; }
.pf-divider { border:none; border-top:1px solid var(--d-border); margin:0; }
.pf-section { padding: 1.3rem 1.6rem; border-top:1px solid var(--d-border); position:relative; }
.pf-section h3 { color:#fff; font-size:1.1rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.pf-section p { color:#c9c9d0; font-size:.96rem; }
.pf-tag-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.pf-tag { font-size:.82rem; font-weight:500; color:#cfcfd6; background: var(--d-raised); border:1px solid var(--d-border-lit); border-radius:100px; padding:.25rem .7rem; }

/* recruiter-eye margin marker */
.eye {
  position:absolute; top:1.3rem; right:1.3rem;
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--gold); background: rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.3);
  padding:.2rem .55rem; border-radius:100px;
}
.eye svg { width:13px; height:13px; }

/* ---- teaching panels alongside each section ---- */
.teach-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; align-items:start; margin-top:2rem; }
@media (max-width:900px){ .teach-grid { grid-template-columns:1fr; } }
.teach-card { background: var(--d-surface); border:1px solid var(--d-border); border-radius: var(--radius); padding:1.4rem; }
.teach-card h4 { color:#fff; font-size:1.05rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.teach-card h4 .ic { width:28px; height:28px; border-radius:7px; background: var(--scarlet-soft); color: var(--scarlet); display:grid; place-items:center; flex:0 0 auto; }
.teach-list { list-style:none; padding:0; margin:0; }
.teach-list li { padding:.5rem 0; border-bottom:1px solid var(--d-border); font-size:.94rem; color:#c9c9d0; display:flex; gap:.6rem; }
.teach-list li:last-child { border-bottom:none; }
.teach-list .mk { flex:0 0 auto; font-weight:700; }
.teach-list .mk--good { color:#6fae8a; }
.teach-list .mk--bad { color:#e0796b; }
.teach-think { margin-top:1rem; padding:.9rem 1.1rem; background: rgba(201,162,39,.08); border-left:3px solid var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:.92rem; color:#e8dcc0; }
.teach-think b { color: var(--gold); }

/* ---- headline example swapper ---- */
.swapper { background: var(--d-surface); border:1px solid var(--d-border); border-radius: var(--radius); padding:1.5rem; margin-top:1.5rem; }
.swapper__tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; }
.swap-tab {
  font-family:inherit; font-size:.86rem; font-weight:600; color: var(--d-muted);
  background: var(--d-raised); border:1px solid var(--d-border-lit); border-radius:100px;
  padding:.4rem .9rem; cursor:pointer; transition: all .15s;
}
.swap-tab:hover { color:#fff; border-color: var(--scarlet); }
.swap-tab[aria-selected="true"] { background: var(--scarlet); color:#fff; border-color: var(--scarlet); }
.swap-body { display:grid; gap:1rem; }
.swap-line { border-radius: var(--radius-sm); padding:1rem 1.2rem; }
.swap-line__label { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; display:block; }
.swap-line--weak { background: rgba(178,64,32,.12); border:1px solid rgba(178,64,32,.4); }
.swap-line--weak .swap-line__label { color:#e0796b; }
.swap-line--weak .swap-line__text { color:#d8b4a8; }
.swap-line--strong { background: rgba(5,118,66,.12); border:1px solid rgba(5,118,66,.4); }
.swap-line--strong .swap-line__label { color:#6fae8a; }
.swap-line--strong .swap-line__text { color:#bfe0cc; font-weight:500; }
.swap-line__text { font-size:1.02rem; line-height:1.5; }

/* ---- weak/strong experience toggle ---- */
.toggle-demo { background: var(--d-surface); border:1px solid var(--d-border); border-radius: var(--radius); padding:1.5rem; margin-top:1.5rem; }
.toggle-switch { display:inline-flex; background: var(--d-base); border:1px solid var(--d-border-lit); border-radius:100px; padding:.25rem; margin-bottom:1.2rem; }
.toggle-switch button {
  font-family:inherit; font-size:.86rem; font-weight:600; border:none; background:none; cursor:pointer;
  color: var(--d-muted); padding:.45rem 1.1rem; border-radius:100px; transition: all .15s;
}
.toggle-switch button[aria-selected="true"] { background: var(--scarlet); color:#fff; }
.toggle-content { font-size:1rem; line-height:1.6; color:#cfcfd6; }
.toggle-content .xp { padding:1rem 1.2rem; background: var(--d-raised); border-radius: var(--radius-sm); border-left:3px solid var(--d-border-lit); }
.toggle-content .xp--weak { border-left-color:#b24020; }
.toggle-content .xp--strong { border-left-color:#057642; }
.toggle-content .xp b { color:#fff; }
.toggle-note { margin-top:1rem; font-size:.92rem; color: var(--d-faint); }

/* studio CTA + footer harmonized */
.studio-cta { background: linear-gradient(135deg, #232327, #1A1A1D); border-top:1px solid var(--d-border); text-align:center; }
.studio-cta h2 { color:#fff; }
.studio-cta p { color: var(--d-muted); }
.studio .footer { background:#151517; border-top-color: var(--d-border); }
.studio .footer h4 { color: var(--d-faint); }
.studio .footer a { color:#cfcfd6; }
.studio .footer a:hover { color: var(--scarlet); }
.studio .footer__mission, .studio .footer__legal { color: var(--d-faint); }
.studio .footer__legal { border-top-color: var(--d-border); }
.studio .brand__mark { background: var(--scarlet); }
.studio .chip { color:#cbd9e8; background: rgba(255,255,255,.04); border-color: var(--d-border-lit); }
.studio .chip--data { color:#6fae8a; background: rgba(5,118,66,.1); border-color: rgba(5,118,66,.3); }

/* ============================================================
   RESUME LAB — scorer + example library (World A / light)
   ============================================================ */
.lab-hero { background: linear-gradient(180deg,#fff,var(--canvas)); padding-block: clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem); }
.lab-hero h1 { font-size: var(--fs-h1); max-width:20ch; }

/* section tabs (sticky sub-nav) */
.lab-tabs { display:flex; flex-wrap:wrap; gap:.5rem; }
.lab-tabs a { font-size:.9rem; font-weight:600; color:var(--primary); background:#fff; border:1px solid var(--border); padding:.45rem .9rem; border-radius:100px; }
.lab-tabs a:hover { border-color:var(--primary); text-decoration:none; }

/* ---- length decision tool ---- */
.length-tool { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.length-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
@media (max-width:760px){ .length-grid { grid-template-columns:1fr; } }
.length-card { border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem; background:var(--canvas); }
.length-card h4 { font-size:1.05rem; color:var(--primary-dark); margin-bottom:.3rem; }
.length-card .who { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:.5rem; }
.length-card p { font-size:.92rem; color:var(--ink-muted); margin:0; }

/* ---- scorer ---- */
.scorer { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.scorer textarea {
  width:100%; min-height:200px; resize:vertical; font-family:inherit; font-size:.96rem; line-height:1.5;
  padding:1rem; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink); background:#fcfcfb;
}
.scorer textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,102,194,.12); }
.scorer__row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.9rem; }
.scorer__privacy { font-size:.85rem; color:var(--ink-muted); display:inline-flex; align-items:center; gap:.4rem; margin-left:auto; }
.scorer__privacy::before { content:"🔒"; }

.score-head { display:flex; gap:1.25rem; align-items:center; padding:1.25rem; border-radius:var(--radius); margin-top:.5rem; }
.score-head--good { background:var(--success-bg); }
.score-head--ok { background:#FBF6E9; }
.score-head--bad { background:var(--warning-bg); }
.score-dial {
  --p:0; flex:0 0 auto; width:84px; height:84px; border-radius:50%;
  background: conic-gradient(var(--primary) calc(var(--p)*1%), #e3e3e0 0);
  display:grid; place-items:center; position:relative;
}
.score-dial::after { content:""; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.score-dial__num { position:relative; z-index:1; font-weight:800; font-size:1.5rem; color:var(--ink); }
.score-verdict { font-size:1.2rem; font-weight:700; color:var(--ink); }
.score-note { font-size:.95rem; color:var(--ink-muted); margin:.2rem 0 0; }

.check-list { list-style:none; padding:0; margin:.5rem 0 0; }
.check { display:flex; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.check:last-child { border-bottom:none; }
.check__icon { flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.check--good .check__icon { background:var(--success-bg); color:var(--success); }
.check--ok .check__icon { background:#FBF6E9; color:#B8860B; }
.check--bad .check__icon { background:var(--warning-bg); color:var(--warning); }
.check__name { font-weight:700; color:var(--ink); display:block; }
.check__msg { font-size:.94rem; color:var(--ink-muted); }

/* ---- example library ---- */
.persona-tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.5rem; }
.persona-tab {
  font-family:inherit; font-size:.86rem; font-weight:600; color:var(--ink-muted);
  background:#fff; border:1px solid var(--border); border-radius:100px; padding:.45rem .9rem; cursor:pointer; transition:all .15s;
}
.persona-tab:hover { border-color:var(--primary); color:var(--ink); }
.persona-tab[aria-selected="true"] { background:var(--primary); color:#fff; border-color:var(--primary); }
.ex-role { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:1rem; }
.ex-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .ex-grid { grid-template-columns:1fr; } }
.ex-col { border-radius:var(--radius); padding:1.1rem; border:1px solid var(--border); }
.ex-col--poor { background:var(--warning-bg); border-color:#f0d6cd; }
.ex-col--avg { background:#FBF6E9; border-color:#ECDFC0; }
.ex-col--exc { background:var(--success-bg); border-color:#C2E5D2; }
.ex-col__label { display:inline-block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.18rem .55rem; border-radius:100px; margin-bottom:.7rem; }
.ex-col--poor .ex-col__label { background:var(--warning); color:#fff; }
.ex-col--avg .ex-col__label { background:#B8860B; color:#fff; }
.ex-col--exc .ex-col__label { background:var(--success); color:#fff; }
.ex-bullets { margin:0 0 .8rem; padding-left:1.1rem; }
.ex-bullets li { font-size:.92rem; margin-bottom:.4rem; color:var(--ink); }
.ex-why { font-size:.88rem; color:var(--ink-muted); margin:0; padding-top:.7rem; border-top:1px dashed rgba(0,0,0,.12); }
.ex-why b { color:var(--ink); }
.ex-commentary { margin-top:1.25rem; background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.2rem 1.4rem; }
.ex-commentary__tag { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#ff7a6b; margin-bottom:.4rem; }
.ex-commentary p { margin:0; font-size:1.02rem; font-style:italic; color:#e8eaed; }

/* ============================================================
   INTERVIEW CENTER (World A / light)
   ============================================================ */
.center-hero { background: linear-gradient(180deg,#fff,var(--canvas)); padding-block: clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem); }
.center-hero h1 { font-size: var(--fs-h1); max-width:18ch; }

/* STAR trainer */
.star { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.star__tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.3rem; }
.star-tab {
  font-family:inherit; font-size:.86rem; font-weight:600; color:var(--ink-muted);
  background:#fff; border:1px solid var(--border); border-radius:100px; padding:.45rem .9rem; cursor:pointer; transition:all .15s;
}
.star-tab:hover { border-color:var(--primary); color:var(--ink); }
.star-tab[aria-selected="true"] { background:var(--primary); color:#fff; border-color:var(--primary); }
.star-prompt { font-size:1.05rem; font-weight:600; color:var(--ink); background:var(--canvas); border-radius:var(--radius-sm); padding:.9rem 1.1rem; margin-bottom:1.2rem; }
.star-prompt span { color:var(--primary-dark); }
.star-grid { display:grid; gap:.8rem; }
.star-row { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.1rem; }
.star-letter { width:38px; height:38px; border-radius:8px; background:var(--primary); color:#fff; font-weight:800; font-size:1.1rem; display:grid; place-items:center; }
.star-row--s .star-letter { background:#0A66C2; }
.star-row--t .star-letter { background:#0E7A9E; }
.star-row--a .star-letter { background:#057642; }
.star-row--r .star-letter { background:#B8860B; }
.star-row__k { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); display:block; margin-bottom:.15rem; }
.star-row__text { font-size:.98rem; color:var(--ink); }
.star-scaffold { margin-top:1.3rem; padding-top:1.3rem; border-top:1px dashed var(--border); }
.star-scaffold h4 { font-size:1rem; margin-bottom:.3rem; }
.star-scaffold p.muted { font-size:.9rem; margin-bottom:.8rem; }
.star-field { margin-bottom:.7rem; }
.star-field label { display:block; font-size:.8rem; font-weight:700; color:var(--ink-muted); margin-bottom:.25rem; }
.star-field textarea {
  width:100%; min-height:52px; resize:vertical; font-family:inherit; font-size:.94rem; line-height:1.45;
  padding:.6rem .8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fcfcfb; color:var(--ink);
}
.star-field textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,102,194,.12); }
.star-save-note { font-size:.82rem; color:var(--ink-muted); display:inline-flex; align-items:center; gap:.4rem; }
.star-save-note::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--success); }

/* tracks */
.track-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
@media (max-width:760px){ .track-grid { grid-template-columns:1fr; } }
.track { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm); }
.track__head { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.track__icon { width:34px; height:34px; border-radius:8px; background:#EAF1FA; color:var(--primary); display:grid; place-items:center; flex:0 0 auto; }
.track__icon svg { width:19px; height:19px; }
.track h3 { margin:0; font-size:1.12rem; }
.track__assess { font-size:.82rem; font-weight:600; color:var(--success); margin-bottom:.6rem; }
.track p { font-size:.95rem; color:var(--ink-muted); margin:0 0 .6rem; }
.track__eg { font-size:.9rem; color:var(--ink); background:var(--canvas); border-left:3px solid var(--primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:.6rem .8rem; }
.track__eg b { color:var(--primary-dark); }

/* virtual setup checklist */
.vsetup { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:760px){ .vsetup { grid-template-columns:1fr; } }
.vsetup__item { display:flex; gap:.9rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; }
.vsetup__ic { flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:#EAF1FA; color:var(--primary); display:grid; place-items:center; }
.vsetup__ic svg { width:22px; height:22px; }
.vsetup__item h4 { font-size:1rem; margin-bottom:.2rem; }
.vsetup__item p { font-size:.92rem; color:var(--ink-muted); margin:0; }

/* question bank */
.qbank__filters { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.3rem; }
.qfilter {
  font-family:inherit; font-size:.84rem; font-weight:600; color:var(--ink-muted);
  background:#fff; border:1px solid var(--border); border-radius:100px; padding:.4rem .85rem; cursor:pointer; transition:all .15s;
}
.qfilter:hover { border-color:var(--primary); color:var(--ink); }
.qfilter[aria-selected="true"] { background:var(--primary); color:#fff; border-color:var(--primary); }
.qbank__list { display:grid; gap:.7rem; }
.qitem { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.2rem; }
.qitem__cat { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--primary-dark); background:#EAF1FA; padding:.12rem .5rem; border-radius:100px; margin-bottom:.5rem; }
.qitem__q { font-size:1.02rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
.qitem__sub { font-size:.9rem; color:var(--ink-muted); }
.qitem__sub b { color:var(--ink); font-weight:600; }
.qbank__count { font-size:.85rem; color:var(--ink-muted); margin-bottom:1rem; }

/* ============================================================
   JOB SEARCH STRATEGY (World A / light)
   ============================================================ */
/* funnel calculator */
.funnel { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.funnel__controls { display:grid; gap:1rem; margin-bottom:1.5rem; }
.funnel__field label { display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.funnel__field label .val { color:var(--primary); font-weight:700; float:right; }
.funnel__field input[type=number] {
  width:140px; font-family:inherit; font-size:1rem; padding:.55rem .7rem; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink);
}
.funnel__field input[type=range] { width:100%; accent-color:var(--primary); }
.funnel__field input:focus { outline:none; border-color:var(--primary); }
.funnel-viz { display:grid; gap:.5rem; }
.funnel-stage { border-radius:var(--radius-sm); padding:.9rem 1.1rem; color:#fff; transition:width .4s ease; position:relative; min-width:auto; }
.funnel-stage__label { font-size:.82rem; font-weight:600; opacity:.92; }
.funnel-stage__num { font-size:1.5rem; font-weight:800; line-height:1.1; }
.funnel-stage--apps { background:#0A66C2; }
.funnel-stage--screens { background:#0E6E92; }
.funnel-stage--interviews { background:#0B7A63; }
.funnel-stage--offers { background:#057642; }
.funnel-rate { font-size:.78rem; color:var(--ink-muted); text-align:center; padding:.1rem 0; }
.funnel-diagnosis { margin-top:1.3rem; padding:1rem 1.2rem; border-radius:var(--radius-sm); background:var(--canvas); border-left:4px solid var(--primary); }
.funnel-diagnosis h4 { font-size:1rem; margin-bottom:.3rem; color:var(--primary-dark); }
.funnel-diagnosis p { font-size:.94rem; color:var(--ink-muted); margin:0; }

/* networking templates */
.tmpl { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; margin-bottom:1rem; box-shadow:var(--shadow-sm); }
.tmpl__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.tmpl__title { font-size:1.02rem; font-weight:700; color:var(--ink); }
.tmpl__when { font-size:.82rem; color:var(--ink-muted); }
.tmpl__body { font-size:.95rem; color:var(--ink); line-height:1.55; background:var(--canvas); border-radius:var(--radius-sm); padding:.9rem 1.1rem; white-space:pre-wrap; }
.tmpl__copy { font-family:inherit; font-size:.82rem; font-weight:600; color:var(--primary); background:#fff; border:1px solid var(--border); border-radius:100px; padding:.35rem .8rem; cursor:pointer; transition:all .15s; flex:0 0 auto; }
.tmpl__copy:hover { border-color:var(--primary); }
.tmpl__copy.copied { background:var(--success-bg); color:var(--success); border-color:#C2E5D2; }

/* veteran hub */
.vet { background:linear-gradient(180deg,#0d2438,#0a1c2c); color:#fff; }
.vet .eyebrow { color:#7fb2e0; }
.vet h2, .vet h3 { color:#fff; }
.vet .lede { color:#aac4dc; }
.vet-band { padding-block: clamp(3rem,6vw,4.5rem); }
.vet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:1.5rem; }
@media (max-width:760px){ .vet-grid { grid-template-columns:1fr; } }
.vet-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:1.4rem; }
.vet-card h3 { font-size:1.1rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.vet-card p { font-size:.95rem; color:#bcd2e6; margin:0 0 .6rem; }
.vet-card p:last-child { margin-bottom:0; }
.vet-xlate { display:grid; gap:.6rem; margin:.8rem 0 0; }
.vet-xlate__row { border-radius:var(--radius-sm); padding:.7rem .9rem; font-size:.92rem; }
.vet-xlate__row--bad { background:rgba(178,64,32,.22); border:1px solid rgba(178,64,32,.45); color:#f0c5b8; }
.vet-xlate__row--good { background:rgba(5,118,66,.22); border:1px solid rgba(5,118,66,.45); color:#bfe6cf; }
.vet-xlate__lbl { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85; display:block; margin-bottom:.2rem; }

/* generic strategy section subnav reuse .lab-tabs */

/* ---- matters-list (shared: used on Truth + Strategy) ---- */
.matters-list { list-style:none; padding:0; margin:1rem 0 0; }
.matters-list li { display:flex; gap:.8rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.matters-list li:last-child { border-bottom:none; }
.matters-list .tick { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--success-bg); color:var(--success); display:grid; place-items:center; font-weight:700; margin-top:2px; }

/* ============================================================
   RESOURCE DIRECTORY (Truth & Resources hub)
   ============================================================ */
.res-toggle { display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:100px; padding:.25rem; margin-bottom:1.5rem; }
.res-toggle button {
  font-family:inherit; font-size:.9rem; font-weight:600; border:none; background:none; cursor:pointer;
  color:var(--ink-muted); padding:.5rem 1.2rem; border-radius:100px; transition:all .15s;
}
.res-toggle button[aria-selected="true"] { background:var(--primary); color:#fff; }

.res-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:760px){ .res-grid { grid-template-columns:1fr; } }
.res-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); }
.res-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.res-card__name { font-size:1.05rem; font-weight:700; color:var(--ink); }
.res-card__cost { font-size:.8rem; font-weight:700; white-space:nowrap; }
.res-card__cost--free { color:var(--success); }
.res-card__cost--paid { color:var(--warning); }
.res-card__purpose { font-size:.92rem; color:var(--ink-muted); margin-bottom:.7rem; }
.res-card__row { font-size:.88rem; margin-bottom:.3rem; display:flex; gap:.5rem; }
.res-card__row .lbl { flex:0 0 auto; font-weight:700; }
.res-card__row--pro .lbl { color:var(--success); }
.res-card__row--con .lbl { color:var(--warning); }
.res-card__row--use .lbl { color:var(--primary); }
.res-verdict { font-size:.88rem; color:var(--ink); background:var(--canvas); border-left:3px solid var(--primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:.6rem .8rem; margin-top:.7rem; }
.res-verdict b { color:var(--primary-dark); }
.res-group-label { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin:1.5rem 0 .8rem; }