/* =============================================================================
   Savology Short Survey — styles
   All colors/spacing use the exact Savology design tokens.
   Font math follows Savology: html font-size 62.5% => 1rem = 10px.
   ============================================================================= */

/* ---- Vendored web font (Red Hat Text, variable, weights 400–700) --------- */
/* Google serves Red Hat Text as ONE variable woff2 spanning 400..700, so a
   single @font-face with font-weight range covers all our weights offline. */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/redhattext-var-latin.woff2') format('woff2');
}

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --sav-green: #008B72;      /* primary, icons, positive */
  --sav-green-grad: #00AF84; /* gradient stop */
  --sav-light-teal: #F0FAF7;
  --sav-navy: #0D2E3B;       /* text / headings */
  --sav-red: #C82C28;        /* low grades */
  --danger-bg: #FCF4F4;
  --ice: #F4F6F8;
  --frost: #ECF0F3;          /* borders / dividers */
  --gray02: #E3E8EC;
  --viridian: #667a77;       /* body text */
  --slate: #496773;
  --placeholder: #A6BDB9;
  --white: #FFFFFF;

  --radius: .6rem;
  --divider: 2px solid var(--frost);
  --shadow: 0 4px 18px 0 rgba(29, 59, 65, .14);

  --w-bold: 500;   /* Savology "bold" */
  --w-xbold: 700;  /* Savology "extra-bold" */

  --app-max: 480px;
}

/* ---- Reset-ish ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;            /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Red Hat Text', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.6rem;           /* 16px base body */
  line-height: 1.45;
  color: var(--sav-navy);
  background: var(--ice);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; }

/* =============================================================================
   App frame + screen switching
   ============================================================================= */
.app {
  max-width: var(--app-max);
  min-height: 100vh;
  min-height: 100dvh;       /* natural page scroll; short screens still fill the viewport */
  margin: 0 auto;
  background: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(13, 46, 59, .06);
}

.screen { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.screen.is-active { display: flex; }

/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 0;
  border-radius: var(--radius);
  font-size: 1.7rem;
  font-weight: var(--w-bold);
  line-height: 1;
  padding: 1.6rem 2rem;
  min-height: 5.4rem;          /* thumb-friendly */
  cursor: pointer;
  transition: transform .06s ease, opacity .15s ease, box-shadow .15s ease;
  color: var(--white);
}
.btn--block { width: 100%; }
.btn--primary {
  background: linear-gradient(180deg, var(--sav-green-grad) 0%, var(--sav-green) 100%);
  box-shadow: 0 6px 16px rgba(0, 139, 114, .28);
}
.btn--primary:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }

/* small square icon button (back chevron) */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem;
  border: 0; background: transparent; color: var(--sav-navy);
  border-radius: var(--radius); cursor: pointer; flex: 0 0 auto;
}
.iconbtn:active { background: var(--frost); }
.iconbtn:disabled { opacity: .28; cursor: default; }

/* =============================================================================
   Cards
   ============================================================================= */
.card {
  background: var(--white);
  border: 1px solid var(--frost);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* =============================================================================
   WELCOME
   ============================================================================= */
.welcome__scroll {
  flex: 1 1 auto;
  padding: 3.6rem 2.2rem calc(2.8rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem;
}
.welcome__logo { height: auto; margin-bottom: .4rem; }
.welcome__headline {
  font-size: clamp(2.6rem, 8vw, 3.2rem); line-height: 1.15; font-weight: var(--w-xbold);
  color: var(--sav-navy); overflow-wrap: break-word;
}
.welcome__sub { font-size: 1.6rem; line-height: 1.5; color: var(--viridian); }
/* research-backed reasons */
.why { list-style: none; width: 100%; text-align: left; display: flex; flex-direction: column;
  gap: 1.7rem; margin: 1rem 0 .4rem; }
.why__item { display: flex; gap: 1.3rem; align-items: flex-start; }
.why__icon {
  width: 3.4rem; height: 3.4rem; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; color: var(--sav-green); background: var(--sav-light-teal);
  border-radius: 50%; margin-top: .2rem;
}
.why__text { font-size: 1.5rem; line-height: 1.5; color: var(--viridian); }
.why__text strong { color: var(--sav-navy); font-weight: var(--w-bold); }
.welcome__scroll .btn--primary { margin-top: .8rem; }
.welcome__fineprint { font-size: 1.3rem; color: var(--placeholder); line-height: 1.4; }
.welcome__sources { font-size: 1.1rem; color: var(--placeholder); line-height: 1.4; margin-top: -.4rem; }

/* =============================================================================
   SURVEY
   ============================================================================= */
.survey__bar {
  display: flex; align-items: center; gap: 1.2rem;
  padding: calc(1rem + env(safe-area-inset-top)) 1.6rem 1rem;
  border-bottom: 1px solid var(--frost);
  background: var(--white);
}
.survey__logo { flex: 0 0 auto; height: auto; opacity: .9; }

/* 6-segment progress bar */
.progress { display: flex; gap: .5rem; flex: 1 1 auto; }
.progress__seg {
  flex: 1 1 0; height: .6rem; border-radius: 999px; background: var(--gray02);
  overflow: hidden;
}
.progress__seg::after {
  content: ""; display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sav-green-grad), var(--sav-green));
  transition: width .35s ease;
}
.progress__seg.is-filled::after { width: 100%; }
.progress__seg.is-current::after { width: 55%; }

.survey__scroll {
  flex: 1 1 auto;              /* grows to fill short steps; long steps flow and the page scrolls */
  padding: 2rem 1.6rem 2.4rem;
}
.step-card { padding: 2.4rem 2rem; }
.step-card__title {
  font-size: 2.4rem; font-weight: var(--w-xbold); color: var(--sav-navy);
  margin-bottom: 2rem;
}

.survey__foot {
  padding: 1.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--frost);
  background: var(--white);
}

/* ---- Questions ------------------------------------------------------------ */
.questions { display: flex; flex-direction: column; gap: 2.8rem; }
.q { display: flex; flex-direction: column; gap: 1.2rem; }
.q__label { font-size: 1.8rem; font-weight: var(--w-bold); color: var(--sav-navy); }
.q__help { font-size: 1.4rem; color: var(--viridian); margin-top: -.6rem; }

/* stepper (+/-) */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; }
.stepper__btn {
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  border: 2px solid var(--gray02); background: var(--white);
  color: var(--sav-green); font-size: 3rem; line-height: 1; font-weight: var(--w-bold);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; transition: border-color .12s, background .12s;
}
.stepper__btn:active { background: var(--sav-light-teal); }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper__value {
  flex: 1 1 auto; text-align: center; width: 100%; min-width: 0;
  font-size: 3.6rem; font-weight: var(--w-xbold); color: var(--sav-navy);
  font-variant-numeric: tabular-nums;
  font-family: inherit; border: 0; background: transparent; padding: 0;
  border-bottom: 2px dashed var(--gray02); border-radius: 0;
  caret-color: var(--sav-green);
}
.stepper__value:focus { outline: none; border-bottom: 2px solid var(--sav-green); }

/* chips / range chips (shared pill styling) */
.chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.chip {
  border: 2px solid var(--gray02); background: var(--white);
  color: var(--slate); border-radius: 999px;
  padding: 1.2rem 1.8rem; font-size: 1.6rem; font-weight: var(--w-bold);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
  min-height: 4.8rem; display: inline-flex; align-items: center;
}
.chip:active { transform: translateY(1px); }
.chip.is-selected {
  border-color: var(--sav-green); background: var(--sav-light-teal); color: var(--sav-green);
}

/* boolean = a 2-up chip row that fills the width */
.boolean { display: flex; gap: 1rem; }
.boolean .chip { flex: 1 1 0; justify-content: center; }

/* select dropdown (the ONLY typing-free typed control) */
.select {
  position: relative; width: 100%;
}
.select select {
  -webkit-appearance: none; appearance: none;
  width: 100%; border: 2px solid var(--gray02); border-radius: var(--radius);
  background: var(--white); color: var(--sav-navy);
  font-size: 1.7rem; font-weight: var(--w-bold);
  padding: 1.6rem 4.4rem 1.6rem 1.6rem; min-height: 5.4rem; cursor: pointer;
}
.select select:focus { outline: none; border-color: var(--sav-green); }
.select::after {
  content: ""; position: absolute; right: 1.8rem; top: 50%; pointer-events: none;
  width: 1rem; height: 1rem; margin-top: -.7rem;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);
}

/* =============================================================================
   LOADING interstitial
   ============================================================================= */
.screen--loading, .screen--error { justify-content: center; }
.loading__inner { text-align: center; padding: 3.2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center; }
.spinner {
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  border: .5rem solid var(--frost); border-top-color: var(--sav-green);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading__text { font-size: 1.8rem; font-weight: var(--w-bold); color: var(--slate); }

/* =============================================================================
   ERROR
   ============================================================================= */
.error__inner { text-align: center; padding: 3.2rem 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; align-items: center; }
.error__icon { color: var(--sav-red); }
.error__title { font-size: 2.2rem; font-weight: var(--w-xbold); }
.error__msg { font-size: 1.6rem; color: var(--viridian); }
.error__inner .btn { margin-top: 1rem; width: 100%; }

/* =============================================================================
   RESULT / REPORT CARD
   ============================================================================= */
.result__bar {
  display: flex; align-items: center; justify-content: center;
  padding: calc(1.4rem + env(safe-area-inset-top)) 1.6rem 1.4rem;
  border-bottom: 1px solid var(--frost); background: var(--white);
}
.result__scroll {
  flex: 1 1 auto;
  padding: 2rem 1.6rem 2.4rem;
  display: flex; flex-direction: column; gap: 1.6rem;
  background: var(--ice);
}

/* hero / gauge card */
.result__hero { padding: 2.8rem 2rem 3.2rem; text-align: center; }
.result__eyebrow {
  font-size: 1.4rem; font-weight: var(--w-bold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--viridian); margin-bottom: 1.6rem;
}
.gauge { width: 20rem; height: 20rem; margin: 0 auto; position: relative; }
.gauge svg { width: 100%; height: 100%; display: block; transform: rotate(0deg); }
.gauge__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.gauge__letter { font-size: 5.4rem; font-weight: var(--w-xbold); line-height: 1; }
.gauge__score { font-size: 1.6rem; font-weight: var(--w-bold); color: var(--viridian); margin-top: .4rem; }
.result__scorelabel {
  font-size: 1.5rem; font-weight: var(--w-bold); color: var(--sav-navy);
  margin-top: 1.4rem;
}
.result__scorelabel strong { color: var(--sav-green); }
.result__caption { font-size: 1.6rem; color: var(--slate); margin-top: 1rem; }
.result__note {
  font-size: 1.3rem; line-height: 1.45; color: var(--viridian);
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--frost);
}

/* "What a free account unlocks" card, above the sticky CTA */
.result__account { padding: 2.4rem 2rem 2.6rem; }

/* Email-sent notice (Gmail users get an Updates-tab tip) */
.result__emailnotice {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.3rem 1.6rem; border-radius: var(--radius);
  background: var(--frost); border: 1px solid var(--sav-green-grad);
}
/* display:flex above beats the UA's [hidden]{display:none} — restate it, or the
   notice renders as an empty green pill before/without a confirmed send */
.result__emailnotice[hidden] { display: none; }
.emailnotice__icon { flex: 0 0 auto; color: var(--sav-green); margin-top: .1rem; }
.emailnotice__text { font-size: 1.4rem; line-height: 1.45; color: var(--sav-navy); }
.emailnotice__text strong { font-weight: var(--w-bold); }

/* donut arc animation: stroke-dasharray animates from 0 -> target */
.donut-arc { transition: stroke-dasharray 1s ease-in-out; }

/* grades card */
.result__grades { padding: .4rem 0 .4rem; overflow: hidden; }
.result__grades-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1.8rem 2rem 1.2rem;
}
.result__grades-head h3 { font-size: 1.9rem; font-weight: var(--w-xbold); }
.result__grades-sub { font-size: 1.3rem; color: var(--placeholder); }

.grades { display: block; }
.grade-row {
  border-top: var(--divider);
}
.grade-row__main {
  display: flex; align-items: center; gap: 1.4rem;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: 1.6rem 2rem; cursor: pointer; min-height: 6rem;
}
.grade-row__icon {
  width: 3.4rem; height: 3.4rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sav-green);
  background: var(--sav-light-teal); border-radius: 50%;
}
.grade-row__icon svg { width: 2rem; height: 2rem; display: block; }
.grade-row__title { flex: 1 1 auto; font-size: 1.7rem; font-weight: var(--w-bold); color: var(--sav-navy); }
.grade-row__grade { font-size: 2.2rem; font-weight: var(--w-xbold); min-width: 3.6rem; text-align: left; }
.grade-row__chev {
  width: 1.8rem; height: 1.8rem; flex: 0 0 auto; color: var(--placeholder);
  transition: transform .2s ease;
}
.grade-row.is-open .grade-row__chev { transform: rotate(90deg); }

/* expandable explanation */
.grade-row__detail {
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
}
.grade-row.is-open .grade-row__detail { max-height: 12rem; }
.grade-row__detail p {
  padding: 0 2rem 1.6rem 6.8rem;
  font-size: 1.45rem; line-height: 1.5; color: var(--viridian);
}

/* letter color accents (by numeric thresholds) */
.g-green { color: var(--sav-green) !important; }
.g-navy  { color: var(--sav-navy)  !important; }
.g-red   { color: var(--sav-red)   !important; }

/* Report card sticky account CTA (always visible; no scrolling to act) */
.result__foot {
  padding: 1.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--frost); background: var(--white); text-align: center;
}
.result__cta-note { font-size: 1.3rem; color: var(--viridian); margin-top: .9rem; line-height: 1.4; }
.preview-pill {
  display: inline-block; margin-bottom: 1rem; padding: .3rem 1.1rem;
  font-size: 1.1rem; font-weight: var(--w-bold); letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); background: var(--frost); border-radius: 999px;
}

/* Unlock interstitial (between survey and report card) */
.unlock__scroll {
  flex: 1 1 auto;
  padding: 2rem 1.6rem 2.4rem; background: var(--ice);
}
.unlock__foot {
  padding: 1.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--frost); background: var(--white); text-align: center;
}
.unlock__foot-note { font-size: 1.3rem; color: var(--viridian); margin-top: .9rem; line-height: 1.4; }

/* Conversion content (used inside the unlock card) */
.unlock__card { padding: 2.6rem 2rem 2.4rem; }
.next__eyebrow {
  font-size: 1.3rem; font-weight: var(--w-bold); letter-spacing: .05em;
  text-transform: uppercase; color: var(--sav-green); margin-bottom: .8rem;
}
.next__eyebrow {
  font-size: 1.3rem; font-weight: var(--w-bold); letter-spacing: .05em;
  text-transform: uppercase; color: var(--sav-green); margin-bottom: .8rem;
}
.next__headline { font-size: 2.4rem; font-weight: var(--w-xbold); color: var(--sav-navy); line-height: 1.15; }
.next__sub { font-size: 1.55rem; color: var(--slate); line-height: 1.5; margin-top: 1rem; }
.next__label {
  font-size: 1.25rem; font-weight: var(--w-bold); letter-spacing: .05em; text-transform: uppercase;
  color: var(--viridian); margin: 2.4rem 0 1.2rem;
}
.opps, .pillars { display: flex; flex-direction: column; gap: 1.4rem; }
.opp { display: flex; gap: 1.4rem; align-items: flex-start; }
.opp__icon {
  width: 3.4rem; height: 3.4rem; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; color: var(--sav-green);
  background: var(--sav-light-teal); border-radius: 50%; margin-top: .1rem;
}
.opp__icon svg { width: 2rem; height: 2rem; }
.opp__body { display: flex; flex-direction: column; gap: .2rem; }
.opp__title { font-size: 1.6rem; font-weight: var(--w-bold); color: var(--sav-navy); }
.opp__text { font-size: 1.45rem; line-height: 1.45; color: var(--viridian); }
.pillar { display: flex; gap: 1.2rem; align-items: flex-start; }
.pillar__check {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto; color: var(--sav-green);
  display: inline-flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.pillar__body { display: flex; flex-direction: column; gap: .1rem; }
.pillar__title { font-size: 1.55rem; font-weight: var(--w-bold); color: var(--sav-navy); }
.pillar__text { font-size: 1.4rem; line-height: 1.45; color: var(--viridian); }

/* Capture gate (name + email form on the unlock screen) */
.capture { margin-top: 1.6rem; padding: 2rem 1.8rem 2.2rem; display: flex; flex-direction: column; gap: 1.4rem; }
.capture__lead { font-size: 1.8rem; font-weight: var(--w-xbold); color: var(--sav-navy); line-height: 1.25; }
.capture__split { display: flex; gap: 1.2rem; }
.capture__split .field { flex: 1 1 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: .5rem; }
/* the `hidden` attribute (used to drop the phone/ZIP fields per version config) must
   win over the .field display rule above — author CSS otherwise overrides [hidden]. */
.field[hidden] { display: none; }
.field__label { font-size: 1.35rem; font-weight: var(--w-bold); color: var(--slate); }
.field__opt { font-weight: 400; color: var(--placeholder); }
.field__input {
  width: 100%; font: inherit; font-size: 1.6rem; color: var(--sav-navy);
  padding: 1.15rem 1.2rem; background: var(--white);
  border: 2px solid var(--gray02); border-radius: var(--radius); -webkit-appearance: none;
}
.field__input::placeholder { color: var(--placeholder); }
.field__input:focus { outline: none; border-color: var(--sav-green); }
.consent { display: flex; gap: 1rem; align-items: flex-start; margin-top: .2rem; cursor: pointer; }
.consent__box { flex: 0 0 auto; width: 2rem; height: 2rem; margin: .15rem 0 0; accent-color: var(--sav-green); }
.consent__text { font-size: 1.35rem; line-height: 1.45; color: var(--viridian); }
.consent__text a { color: var(--sav-green); font-weight: var(--w-bold); }
.capture__error { font-size: 1.35rem; color: var(--sav-red); line-height: 1.4; margin-top: -.4rem; }

/* Legal pages (terms.html / privacy.html) */
.legal { padding: 2.4rem 2rem calc(3rem + env(safe-area-inset-bottom)); background: var(--white); }
.legal__back { display: inline-block; font-size: 1.4rem; font-weight: var(--w-bold); color: var(--sav-green); text-decoration: none; margin-bottom: 1.6rem; }
.legal__logo { display: block; margin-bottom: 1.6rem; }
.legal__eyebrow { font-size: 1.2rem; font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--sav-green); }
.legal__title { font-size: 2.6rem; font-weight: var(--w-xbold); color: var(--sav-navy); margin: .4rem 0 .8rem; }
.legal__meta { font-size: 1.35rem; color: var(--slate); margin: .2rem 0; }
.legal__h2 { font-size: 1.85rem; font-weight: var(--w-xbold); color: var(--sav-navy); margin: 2.4rem 0 .8rem; }
.legal__p { font-size: 1.55rem; line-height: 1.55; color: var(--viridian); margin: .8rem 0; }
.legal__list { margin: .8rem 0; padding-left: 2rem; display: flex; flex-direction: column; gap: .6rem; }
.legal__list li { font-size: 1.55rem; line-height: 1.5; color: var(--viridian); }

/* =============================================================================
   Partner versions — role picker + co-brand lockup
   ============================================================================= */
/* Healthcare role picker (full-width tappable rows) */
.roles-list { display: flex; flex-direction: column; gap: 1rem; margin: 1.8rem 0 1.2rem; }
.roles-attribution {
  font-size: 1.25rem; line-height: 1.5; color: var(--viridian);
  border-top: 1px solid var(--gray02); padding-top: 1.2rem; margin: 0 0 1.2rem;
}
.chip--block {
  width: 100%; justify-content: space-between; text-align: left;
  padding: 1.5rem 1.6rem; font-size: 1.6rem; border-radius: var(--radius);
}
.chip--block::after {
  content: "›"; color: var(--placeholder); font-size: 2rem; line-height: 1;
}
.btn--ghost { background: transparent; color: var(--viridian); font-weight: var(--w-bold); }
.btn--ghost:hover { color: var(--sav-navy); }

/* Co-brand lockup (e.g. Direct Wealth Care powered by Savology): the artwork is a
   wide horizontal mark, so size it by height and let width follow the aspect. */
[data-brand="dwc"] .welcome__logo { width: auto; height: 5rem; margin-bottom: 1rem; }
[data-brand="dwc"] .survey__logo  { width: auto; height: 3rem; }
[data-brand="dwc"] .result__logo  { width: auto; height: 3.4rem; }

/* "Sponsored by <partner>" co-brand row (intro screens) */
.cobrand { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: -.6rem; flex-wrap: wrap; }
.cobrand__by { font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--w-bold); color: var(--placeholder); }
.cobrand__logo { height: 5.2rem; width: auto; display: block; }
.cobrand__name { font-size: 2.1rem; font-weight: var(--w-xbold); color: var(--sav-navy); }
.cobrand--unlock { margin: .2rem 0 1.6rem; }

/* reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  .donut-arc, .progress__seg::after, .grade-row__detail, .grade-row__chev { transition: none; }
  .spinner { animation-duration: 2s; }
}