/* Corvata brand tokens + reusable components.
   Source of truth: the LIVE Rate Studio site CSS (20 - Rate Studio/Website/
   full-custom-css-combined.css), not the Brand Guide doc — the doc claims
   "All Round Gothic Book" headings, but production actually runs IBM Plex
   Sans headings / Inter body (confirmed from that file's own comment,
   2026-09-22). Match what's actually shipped, not what the doc says.
   Colors match the Brand Guide's swatches exactly, just the fonts differ. */

:root {
  /* Primary */
  --corvata-teal: #1985A1;
  --corvata-purple: #4D2C84;
  --corvata-gray: #4C5C68;
  --corvata-gold: #FDB714;

  /* Secondary */
  --corvata-green: #81C341;
  --corvata-gray-light: #BDCFD2;
  --corvata-blue: #84D3E8;
  --corvata-magenta: #A6499B;

  /* Chart tints (20%) */
  --chart-teal-tint: #D1E7EC;
  --chart-purple-tint: #DBD5E6;
  --chart-gold-tint: #FFF1D0;
  --chart-gray-tint: #DBDEE1;
  --chart-green-tint: #E6F3D9;
  --chart-blue-tint: #E6F6FA;
  --chart-magenta-tint: #EDDBEB;

  /* Semantic roles — h1 purple, h2/h3 teal, matching Rate Studio's Avada
     per-level heading colors */
  --color-heading: var(--corvata-purple);
  --color-heading-2: var(--corvata-teal);
  --color-body-text: var(--corvata-gray);
  --color-muted-text: var(--corvata-gray);
  --color-accent: var(--corvata-teal);
  --color-paper: #FAFBFC;
  --color-band-header-bg: var(--corvata-purple);
  --color-band-header-text: #ffffff;
  --color-score-panel-bg: var(--chart-teal-tint);

  --font-heading: "IBM Plex Sans", "Open Sans", Tahoma, sans-serif;
  --font-body: "Inter", "Open Sans", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--color-body-text);
  background: var(--color-paper);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; font-weight: 700; }
h1 { color: var(--color-heading); }
h2, h3 { color: var(--color-heading-2); }

a { text-decoration: none; }

/* Small uppercase label with a gold dash — used above every section/screen heading. */
.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--corvata-teal);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--corvata-gold); display: inline-block; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: 0.15s ease;
}
.btn-primary { background: var(--corvata-purple); color: #fff; }
.btn-primary:hover { filter: brightness(0.88); }
.btn-primary:disabled { background: var(--corvata-gray-light); cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--corvata-gray); border: 1.5px solid var(--corvata-gray-light); }
.btn-ghost:hover { border-color: var(--corvata-teal); color: var(--corvata-teal); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--corvata-gray-light);
  border-radius: 14px;
  padding: 28px 24px;
}

/* Pill-group: an accessible single-choice control built on real radio inputs,
   styled as a horizontal row of pills — the same technique Rate Studio uses
   for its pricing-tier switcher (.mode-pills), generalized here so it works
   for any number of dynamically-generated options (e.g. one per question)
   without per-instance CSS. Markup:
   <div class="pill-group">
     <input type="radio" name="q1" id="q1-1" value="1"><label for="q1-1">Ad hoc</label>
     ...
   </div> */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-group input { position: absolute; opacity: 0; pointer-events: none; }
.pill-group label {
  flex: 1;
  min-width: 90px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 6px;
  border-radius: 8px;
  border: 1px solid var(--corvata-gray-light);
  color: var(--corvata-gray);
  cursor: pointer;
  line-height: 1.25;
  transition: 0.12s ease;
}
.pill-group input:checked + label { background: var(--corvata-teal); border-color: var(--corvata-teal); color: #fff; }
.pill-group input:focus-visible + label { outline: 2px solid var(--corvata-teal); outline-offset: 2px; }