/* ============================================================
   SkillGapCoach — Design System  (Brand Guidelines V1)
   Single source of truth for all styles.
   To retheme: edit the :root variables at the top only.
   ============================================================ */


/* ── 1. Brand Tokens ─────────────────────────────────────────
   Raw palette from Brand Guidelines V1.
   Never use these directly in components — use the semantic
   aliases in section 2 so a palette swap stays in one place.
   ────────────────────────────────────────────────────────── */
:root {
  /* Primary */
  --color-midnight-ink:      #151826;
  --color-career-blue:       #2457A6;
  --color-career-blue-hover: #1E4788;
  --color-soft-career-blue:  #D9ECFF;
  --color-sky-bg:            #EEF7FF;
  --color-growth-teal:       #20A99A;

  /* Secondary */
  --color-mint-success: #E8F7F4;
  --color-warm-signal:  #F4B860;
  --color-cloud-white:  #F8FAFC;
  --color-pure-white:   #FFFFFF;

  /* Neutral */
  --color-deep-gray:  #344054;
  --color-slate-gray: #667085;
  --color-mist-gray:  #E5E7EB;
  --color-pale-gray:  #F2F4F7;
  --color-fog:        #98A2B3;

  /* Functional */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error:   #DC2626;
  --color-info:    #2563EB;


/* ── 2. Semantic Aliases ────────────────────────────────────
   Map tokens to roles. Change the right-hand side here to
   retheme the whole app without touching any component rule.
   ────────────────────────────────────────────────────────── */
  --bg:             var(--color-sky-bg);
  --nav-bg:         var(--color-cloud-white);
  --white:          var(--color-pure-white);

  /* Text */
  --text:           var(--color-midnight-ink);
  --text-subtle:    var(--color-slate-gray);
  --text-muted:     var(--color-fog);
  --text-deep:      var(--color-deep-gray);

  /* Borders & surfaces */
  --border:         var(--color-mist-gray);
  --border-light:   var(--color-pale-gray);
  --surface:        var(--color-cloud-white);

  /* Primary action (CTA) */
  --primary:        var(--color-career-blue);
  --primary-hover:  var(--color-career-blue-hover);
  --primary-light:  var(--color-sky-bg);
  --primary-border: var(--color-soft-career-blue);

  /* Progress / success signal */
  --teal:           var(--color-growth-teal);
  --teal-light:     var(--color-mint-success);

  /* Skill-gap highlight */
  --gap-signal:     var(--color-warm-signal);
  --warm:           var(--color-warm-signal);
  --warm-bg:        #FFF4DF;
  --warm-text:      #A76305;

  /* Status */
  --success:        var(--color-success);
  --error:          var(--color-error);
  --error-bg:       #FEF3F2;
  --error-border:   #FECDCA;


/* ── 3. Typography ──────────────────────────────────────────
   Manrope → headings, nav, buttons, numbers, brand text
   Inter   → body copy, labels, forms, dashboard text
   ────────────────────────────────────────────────────────── */
  --font-sans: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;


/* ── 4. Shape & Spacing ─────────────────────────────────────*/
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}


/* ── 5. Reset ───────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
}

button { cursor: pointer; font-family: var(--font-sans); border: none; background: none; }


/* ── 6. Shared Buttons ──────────────────────────────────────*/
.btn-primary {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--primary);
  padding: 0 48px;
  height: 52px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:disabled { background: #C5D4E0; cursor: not-allowed; }

.btn-outline {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
}

.btn-ghost {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-subtle);
  border: 1.5px solid var(--border);
  padding: 0 24px;
  height: 38px;
  border-radius: 10px;
  width: 100%;
}
.btn-ghost:hover { background: var(--surface); }

.btn-b2b { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 16px; line-height: 1.3; }
.btn-b2b-note {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}


/* ── 7. Shared Components ───────────────────────────────────*/
.error-banner {
  background: var(--error-bg);
  border: 1.5px solid var(--error-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--error);
  margin-top: 16px;
}


/* ── 8. Nav ─────────────────────────────────────────────────*/
.nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo          { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nav-logo-text     { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.nav-right         { display: flex; align-items: center; gap: 16px; }
.nav-powered       { font-size: 13px; color: var(--text-subtle); font-family: var(--font-body); display: flex; align-items: center; gap: 6px; }
.nav-powered-name  { font-weight: 600; color: var(--text-deep); }


/* ── 9. Landing Page ────────────────────────────────────────*/
.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 48px 48px;
  text-align: center;
}
.landing-hero h1 {
  font-size: 48px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -1px;
  line-height: 1.15;
  max-width: 700px;
}
.landing-hero .hero-sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-subtle);
  margin-top: 20px;
  max-width: 880px;
  line-height: 1.75;
}
.step-label {
  margin-top: 48px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-deep);
}
.role-select-wrap { margin-top: 14px; }
.role-select {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--primary-border);
  border-radius: var(--radius-md);
  padding: 12px 44px 12px 18px;
  min-width: 320px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232457A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.role-select:hover { border-color: var(--primary); }
.role-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36, 87, 166, 0.12);
}
.role-select:disabled { color: var(--text-muted); cursor: default; }
.landing-hero .btn-primary { margin-top: 32px; }
.reuse-note {
  margin-top: 14px;
  font-family: var(--font-body); font-size: 12px; color: var(--text-subtle);
}
.reuse-note strong { font-weight: 600; color: var(--text-deep); }
.reuse-note a { color: var(--primary); text-decoration: underline; cursor: pointer; }
#landing-error { margin-top: 12px; }
.landing-privacy {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}


/* ── 10. Upload Page ────────────────────────────────────────*/
.progress-bar  { background: var(--border); height: 3px; width: 100%; }
.progress-fill { background: var(--primary); height: 3px; width: 50%; }
.progress-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-subtle);
  text-align: center;
  padding: 10px 0;
}

.upload-main { padding: 48px; max-width: 960px; margin: 0 auto; }
.upload-title { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 8px; }
.upload-sub   { font-family: var(--font-body); font-size: 15px; color: var(--text-subtle); margin-bottom: 36px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.card       { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.card-sub   { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }

.upload-zone {
  border: 1.5px dashed #C8DFF5;
  border-radius: var(--radius-md);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: #F8FBFF;
  transition: all 0.15s;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--primary); background: var(--primary-light); }
.upload-zone.selected { border-color: var(--teal); background: var(--teal-light); border-style: solid; }

.upload-icon {
  width: 40px; height: 40px;
  background: var(--primary-light);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.upload-zone p    { font-family: var(--font-body); font-size: 14px; color: var(--text-subtle); text-align: center; }
.upload-zone span { font-size: 12px; color: var(--text-muted); font-family: var(--font-body); }

.btn-browse {
  font-size: 13px; font-weight: 600;
  color: var(--primary); background: var(--primary-light);
  border: 1.5px solid var(--primary-border);
  padding: 8px 20px; border-radius: var(--radius-sm);
  margin-top: 4px;
}

.role-display {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.role-display-label { font-size: 14px; font-weight: 600; color: var(--primary); }
.btn-change-role {
  font-family: var(--font-body); font-size: 12px; color: var(--text-muted);
  cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0;
}
.btn-change-role:hover { color: var(--text-subtle); }

.cta-row                 { display: flex; justify-content: center; margin-top: 32px; }
.cta-row .btn-primary    { min-width: 220px; }


/* ── 11. Loading Page ───────────────────────────────────────*/
.loading-center {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 100px 48px; text-align: center;
}
.spinner {
  width: 56px; height: 56px;
  border: 3px solid var(--primary-border);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 32px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-title { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 8px; }
.loading-sub   { font-family: var(--font-body); font-size: 15px; color: var(--text-subtle); margin-bottom: 48px; max-width: 460px; }

.steps { display: flex; align-items: center; }
.step  { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 180px; }

.step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transition: background 0.3s, color 0.3s;
}
.step-dot.done    { background: var(--teal); color: var(--white); }
.step-dot.active  { background: var(--primary); color: var(--white); animation: pulse 1.5s ease-in-out infinite; }
.step-dot.waiting { background: var(--border); color: var(--text-muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.step-label        { font-family: var(--font-body); font-size: 13px; color: var(--text-subtle); }
.step-label.done   { color: var(--teal); font-weight: 500; }
.step-label.active { color: var(--primary); font-weight: 500; }

.step-connector      { width: 80px; height: 2px; background: var(--border); margin-bottom: 20px; transition: background 0.3s; }
.step-connector.done { background: var(--teal); }

.loading-error { margin-top: 32px; }
.loading-error .btn-ghost { margin-top: 16px; width: auto; padding: 0 32px; }


/* ── 12. Results Page ───────────────────────────────────────*/
.results-main  { padding: 40px 48px; max-width: 1100px; margin: 0 auto; }
.results-title { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 4px; }
.results-sub   { font-family: var(--font-body); font-size: 14px; color: var(--text-subtle); margin-bottom: 28px; }

/* Metrics row */
.metrics     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.metric-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; padding: 20px 24px; }
.metric-label { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.metric-value { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
.metric-value.blue { color: var(--primary); }
.metric-value.teal { color: var(--teal); }
.metric-value.md   { font-size: 20px; }
.metric-sub   { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Two-column layout */
.results-layout    { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.results-card      { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.results-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 20px; }

/* Skill gap map */
.map-sub {
  font-family: var(--font-body); font-size: 12px; color: var(--text-muted);
  line-height: 1.5; margin: -12px 0 20px;
  list-style: disc; padding-left: 16px;
}
.map-sub li + li { margin-top: 4px; }

.skill-row  { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.skill-cell { width: 130px; flex-shrink: 0; }
.skill-name {
  display: block;
  font-family: var(--font-body); font-size: 13px; color: var(--text-deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skill-bar-bg   { flex: 1; height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.skill-bar-fill { height: 8px; border-radius: 4px; transition: width 0.6s ease; }
.fill-gap       { background: var(--error); }
.fill-matched   { background: var(--teal); }
.fill-inferred  { background: var(--warm); }
.fill-next      { background: var(--primary); }

.skill-badge         { font-family: var(--font-body); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.badge-missing       { background: var(--error-bg); color: var(--error); }
.badge-matched       { background: var(--teal-light); color: var(--success); }
.badge-inferred      { background: var(--warm-bg); color: var(--warm-text); }
.badge-next          { background: var(--primary-light); color: var(--primary); }

/* Skill status legend */
.skill-legend { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 16px; }
.legend-title {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--text-deep); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.legend-items { display: grid; gap: 8px; }
.legend-item  { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; color: var(--text-subtle); }
.legend-dot   { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.dot-matched  { background: var(--teal); }
.dot-inferred { background: var(--warm); }
.dot-missing  { background: var(--error); }
.dot-next     { background: var(--primary); }

/* Hover tooltips */
.tip { position: relative; cursor: help; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  width: max-content; max-width: 260px;
  background: var(--text); color: var(--white);
  font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.5;
  text-align: left; white-space: pre-line; text-transform: none; letter-spacing: normal;
  padding: 10px 12px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(21, 24, 38, 0.18);
  opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none;
}
.tip::before {
  content: '';
  position: absolute; bottom: calc(100% + 3px); left: 14px; z-index: 20;
  border: 5px solid transparent; border-top-color: var(--text);
  opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none;
}
.tip:hover::after, .tip:hover::before { opacity: 1; visibility: visible; }

/* Recommended next step */
.recommend-card    { background: var(--white); border: 2px solid var(--primary); border-radius: var(--radius-lg); padding: 28px; }
.recommend-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
}
.recommend-title    { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-bottom: 4px; }
.recommend-provider { font-family: var(--font-body); font-size: 13px; color: var(--text-subtle); margin-bottom: 16px; }

.impact-box   { background: var(--primary-light); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.impact-box p { font-family: var(--font-body); font-size: 13px; color: var(--primary); line-height: 1.5; }
.impact-box strong { font-weight: 700; }

.recommend-meta      { display: flex; gap: 16px; margin-bottom: 20px; }
.recommend-meta span { font-family: var(--font-body); font-size: 12px; color: var(--text-subtle); }

.recommend-card .btn-primary { width: 100%; font-size: 14px; height: 44px; padding: 0; margin-bottom: 12px; }
.btn-download {
  width: 100%; height: 44px;
  font-size: 14px; font-weight: 700; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: var(--radius-md);
  background: var(--white);
}
.btn-download:hover { background: var(--primary-light); }
.divider { border: none; border-top: 1px solid var(--border-light); margin: 20px 0; }
.recommend-card .btn-ghost { margin-bottom: 8px; }
.action-buttons { display: flex; flex-direction: column; gap: 8px; }
.btn-ghost-subtle { color: var(--text-muted, #9ca3af); border-color: var(--border-light); font-size: 12px; }

/* More courses grid */
.courses-section { margin-top: 28px; }
.courses-title   { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.courses-sub     { font-family: var(--font-body); font-size: 13px; color: var(--text-subtle); line-height: 1.6; max-width: 640px; margin-bottom: 16px; }
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: 1px;
  border: 1.5px solid var(--text-muted); border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: 10px; font-weight: 700; color: var(--text-muted);
}
.info-icon:hover { border-color: var(--primary); color: var(--primary); }
.courses-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

.course-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.course-num  { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--text-muted); }
.course-name { font-size: 13px; font-weight: 700; color: var(--text); }
.course-meta { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); }
.course-tag  { font-family: var(--font-body); font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 8px; display: inline-block; }
.tag-free    { background: var(--teal-light); color: var(--success); }
.tag-paid    { background: var(--border-light); color: var(--text-subtle); }

.btn-course { font-size: 11px; font-weight: 600; color: var(--primary); border: 1.5px solid var(--primary-border); padding: 5px 10px; border-radius: 7px; margin-top: 4px; align-self: flex-start; }
.btn-course:hover { background: var(--primary-light); }

/* Print / "Download Report": strip chrome so the PDF is just the report */
@media print {
  body { background: var(--white); }
  #app-nav, .app-footer, .btn-download, .btn-ghost, .btn-course,
  .recommend-card .btn-primary { display: none !important; }
  .results-layout { grid-template-columns: 1fr; }
  .results-card, .recommend-card, .skill-legend, .course-card { break-inside: avoid; }
}

/* ── App shell footer ───────────────────────────────────────*/
#app { display: flex; flex-direction: column; min-height: 100vh; }
#app-main { flex: 1; }

.app-footer { text-align: center; padding: 28px 24px 32px; border-top: 1px solid var(--border-light); }
.app-footer-text { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.app-footer-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.app-footer-links button {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-subtle);
  border: 1.5px solid var(--border); border-radius: var(--radius-full); padding: 7px 16px;
  background: var(--white);
}
.app-footer-links button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ── Upload page: what happens next ─────────────────────────*/
.role-note { margin-top: 16px; margin-bottom: 0; }

.next-steps { margin-top: 28px; text-align: center; }
.next-steps-title { font-size: 14px; font-weight: 700; color: var(--text-deep); margin-bottom: 10px; }
.next-steps ol {
  display: grid; gap: 6px; text-align: center;
  list-style-position: inside;
  font-family: var(--font-body); font-size: 13px; color: var(--text-subtle); line-height: 1.6;
  margin: 0; padding-left: 0;
}

/* ── Legal popups (footer: GDPR / Terms / Legal Notice) ─────*/
.legal-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.legal-modal[hidden] { display: none; }
.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(21, 24, 38, 0.55); }

.legal-modal-dialog {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 680px; max-height: min(80vh, 720px);
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(21, 24, 38, 0.25);
}
.legal-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--border-light);
}
.legal-modal-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }
.legal-modal-close {
  flex-shrink: 0; width: 32px; height: 32px; font-size: 20px; line-height: 1;
  color: var(--text-subtle); border: 1.5px solid var(--border); border-radius: var(--radius-full);
  background: var(--white);
}
.legal-modal-close:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.legal-modal-body { overflow-y: auto; padding: 20px 24px 28px; font-family: var(--font-body); font-size: 13px; color: var(--text-deep); line-height: 1.65; }
.legal-modal-body h2 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--text); margin: 18px 0 6px; }
.legal-modal-body h2:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 10px; }
.legal-modal-body ul { margin: 0 0 10px; padding-left: 20px; }
.legal-modal-body li { margin-bottom: 4px; }