/* getaskmed.com/onboarding: the iOS app's onboarding (iOS/AskMed/Onboarding) on the web. Colors, sizes and spacing
   are OnboardingTheme's and each screen's own; tokens from web.css. iOS sizes every number by the screen's height
   (ScreenScale: height / 874 on the iPhone 17 Pro design). Here --u does the same: one design point is
   min(column height / 780, column width / 402), 780 being the iPhone design's height without the status bar and
   home indicator, so a screen fills a browser window the way it fills the phone. */
:root {
  --ob-success: #1FB052;
  --ob-strong: #C7D1E0;
  --ob-tertiary: #8F9CAD;
  --ob-red: #FF3B30;
  --ob-ease: cubic-bezier(0.22, 0.9, 0.3, 1);
}

html.ob-html, html.ob-html body { height: 100%; }
html.ob-html { background: var(--bg); overflow: hidden; }
.ob-page {
  margin: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.ob-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The phone column. On a phone it is the whole window; on a computer, a phone-sized card in the middle. */
.ob-app {
  --u: 1px;
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  container-type: size;
}
@supports (height: 1cqh) {
  .ob-app { --u: min(1.1px, calc(100cqh / 780), calc(100cqw / 402)); }
}
@media (min-width: 700px) and (min-height: 600px) {
  html.ob-html, .ob-page { background: var(--highlight); }
  .ob-page { align-items: center; }
  .ob-app {
    width: 430px;
    height: min(calc(100vh - 48px), 860px);
    height: min(calc(100dvh - 48px), 860px);
    border: 1px solid var(--stroke);
    border-radius: 40px;
    box-shadow: 0 24px 80px rgba(13, 18, 33, 0.12);
  }
}

.ob-app svg { display: block; flex: none; }
.ob-app button { font-family: inherit; -webkit-appearance: none; appearance: none; }
.ob-app :focus { outline: none; }
.ob-app :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Progress bar with the back button (OnboardingProgressBar), screens 1-10. */
.ob-bar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u));
  flex: none;
}
.ob-bar[hidden] { display: none; }
.ob-back {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--subtle);
  color: var(--secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.ob-back svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.ob-track { flex: 1; height: calc(6 * var(--u)); border-radius: 99px; background: var(--subtle); position: relative; overflow: hidden; }
.ob-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10%;
  min-width: calc(8 * var(--u));
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  transition: width 0.5s var(--ob-ease);
}

/* Screens: one shown at a time, sliding in from the right as in OnboardingFlow. */
.ob-stage { position: relative; flex: 1; min-height: 0; }
.ob-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--text);
}
.ob-screen[hidden] { display: none; }
.ob-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ob-scroll::-webkit-scrollbar { display: none; }
.ob-foot { flex: none; padding: 0 calc(22 * var(--u)) calc(18 * var(--u) + env(safe-area-inset-bottom, 0px)); }

/* Screens that fit without scrolling (Welcome, Personalizing, Completion): VStacks of Spacers that share the
   leftover height equally, each at least its minLength. They scroll only if a window is too short. */
.ob-fit { align-items: center; overflow-y: auto; scrollbar-width: none; }
.ob-fit::-webkit-scrollbar { display: none; }
.ob-sp { flex: 1 1 0; min-height: 0; }
.ob-sp[data-min="8"] { min-height: calc(8 * var(--u)); }
.ob-sp[data-min="18"] { min-height: calc(18 * var(--u)); }
.ob-sp[data-min="20"] { min-height: calc(20 * var(--u)); }
.ob-sp[data-min="22"] { min-height: calc(22 * var(--u)); }
.ob-sp[data-min="28"] { min-height: calc(28 * var(--u)); }
.ob-sp[data-min="30"] { min-height: calc(30 * var(--u)); }
.ob-fit > .ob-cta { width: calc(100% - 44 * var(--u)); }

/* Primary button (PrimaryCTAButton). */
.ob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: 100%;
  height: calc(58 * var(--u));
  flex: none;
  border: 0;
  border-radius: calc(18 * var(--u));
  background: linear-gradient(180deg, var(--primary), var(--deep));
  color: #FFFFFF;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(18, 89, 181, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease-out;
}
.ob-cta:hover { color: #FFFFFF; }
.ob-cta:active:not(:disabled) { transform: scale(0.97); }
.ob-cta:disabled { background: var(--ob-strong); box-shadow: none; cursor: default; }
.ob-cta svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* Screen header (ScreenHeader): Georgia Bold title, system-font subtitle. */
.ob-header { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ob-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: 1.14;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
  color: var(--text);
}
.ob-sub { margin: 0; font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--secondary); }
.ob-quiz-head { flex: none; padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }

/* Scrolling screens (Trust, Chat, Safety, Institutions). */
.ob-body {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(100 * var(--u));
}
.ob-body-22 { gap: calc(22 * var(--u)); padding-top: calc(4 * var(--u)); }
.ob-center { align-items: center; text-align: center; }

/* Quiz rows (QuizOptionRow). */
.ob-options { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: 0 calc(22 * var(--u)) calc(100 * var(--u)); }
.ob-opt {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  margin: 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--stroke);
  border-radius: calc(16 * var(--u));
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease-out;
}
.ob-opt:active { transform: scale(0.97); }
.ob-opt[aria-checked="true"] { background: var(--highlight); border-color: var(--primary); box-shadow: inset 0 0 0 0.5px var(--primary); }
.ob-opt-text { flex: 1; min-width: 0; font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.25; color: var(--text); }
.ob-emoji { width: calc(36 * var(--u)); height: calc(36 * var(--u)); display: grid; place-items: center; font-size: calc(24 * var(--u)); line-height: 1; flex: none; }
.ob-opt-icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--subtle); color: var(--secondary); flex: none; }
.ob-opt-icon svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ob-opt[aria-checked="true"] .ob-opt-icon { background: rgba(18, 89, 181, 0.12); color: var(--primary); }
.ob-radio, .ob-box {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  margin-left: calc(8 * var(--u));
  border: 1.5px solid var(--ob-strong);
  flex: none;
  display: grid;
  place-items: center;
}
.ob-radio { border-radius: 50%; }
.ob-radio::after { content: ""; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--primary); transform: scale(0); }
.ob-opt[aria-checked="true"] .ob-radio { border-color: var(--primary); }
.ob-opt[aria-checked="true"] .ob-radio::after { transform: scale(1); }
.ob-box { border-radius: calc(7 * var(--u)); color: #FFFFFF; }
.ob-box svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); opacity: 0; }
.ob-opt[aria-checked="true"] .ob-box { background: var(--primary); border-color: var(--primary); }
.ob-opt[aria-checked="true"] .ob-box svg { opacity: 1; }

/* Specialty grid (SpecialtyQuizView): 2 columns of 92-point tiles. */
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: calc(10 * var(--u)); margin: 0; }
.ob-spec-grid { padding: 0 calc(22 * var(--u)) calc(110 * var(--u)); }
.ob-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  height: calc(92 * var(--u));
  margin: 0;
  padding: calc(14 * var(--u)) calc(8 * var(--u));
  border: 1px solid var(--stroke);
  border-radius: calc(16 * var(--u));
  background: #FFFFFF;
  color: var(--primary);
  cursor: pointer;
  transition: transform 0.12s ease-out;
}
.ob-spec:active { transform: scale(0.97); }
.ob-spec svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.ob-spec .ob-opt-text { flex: none; font-size: calc(14 * var(--u)); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob-spec[aria-checked="true"] { background: linear-gradient(180deg, var(--primary), var(--deep)); border-color: var(--primary); color: #FFFFFF; box-shadow: 0 4px 20px rgba(18, 89, 181, 0.18); }
.ob-spec[aria-checked="true"] .ob-opt-text { color: #FFFFFF; }

/* Pillar cards (PillarRow). */
.ob-pillars { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.ob-pillars-10 { gap: calc(10 * var(--u)); }
.ob-pillar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(14 * var(--u));
  border: 1px solid var(--stroke);
  border-radius: calc(18 * var(--u));
  background: #FFFFFF;
  text-align: left;
}
.ob-pillar-icon { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--highlight); color: var(--primary); display: grid; place-items: center; flex: none; }
.ob-pillar-icon svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ob-pillar b { display: block; font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.25; }
.ob-pillar small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.3; color: var(--secondary); }

.ob-stars { display: inline-flex; gap: calc(2 * var(--u)); color: var(--gold); }
.ob-stars svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.ob-stars-sm { gap: calc(3 * var(--u)); }

/* 0 Welcome */
.ob-welcome { padding-bottom: calc(10 * var(--u)); }
.ob-hero { position: relative; width: calc(140 * var(--u)); height: calc(140 * var(--u)); flex: none; }
.ob-hero-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--teal));
  box-shadow: 0 calc(14 * var(--u)) calc(56 * var(--u)) rgba(18, 89, 181, 0.35);
  color: #FFFFFF;
  display: grid;
  place-items: center;
}
.ob-hero-circle svg { width: calc(90 * var(--u)); height: calc(90 * var(--u)); }
.ob-spark { position: absolute; color: var(--gold); }
.ob-spark-1 { width: calc(20 * var(--u)); height: calc(20 * var(--u)); left: calc(70 * var(--u) + 56 * var(--u) - 10 * var(--u)); top: calc(70 * var(--u) - 52 * var(--u) - 10 * var(--u)); }
.ob-spark-2 { width: calc(14 * var(--u)); height: calc(14 * var(--u)); left: calc(70 * var(--u) - 58 * var(--u) - 7 * var(--u)); top: calc(70 * var(--u) + 48 * var(--u) - 7 * var(--u)); }
.ob-brand { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); text-align: center; }
.ob-welcome-to { font-family: var(--sans); font-size: calc(18 * var(--u)); font-weight: 500; line-height: 1.2; color: var(--secondary); }
.ob-brand-name { font-family: var(--serif); font-weight: 700; font-size: calc(54 * var(--u)); line-height: 1.05; letter-spacing: 0; color: var(--text); }
.ob-tagline { margin: calc(6 * var(--u)) 0 0; font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: calc(2 * var(--u)); color: var(--primary); text-align: center; }
.ob-value { margin: 0; padding: 0 calc(28 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--secondary); text-align: center; }
.ob-rated {
  margin-top: calc(18 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--stroke);
  border-radius: calc(22 * var(--u));
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  flex: none;
}
.ob-rated-top { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.ob-rated-top strong { font-size: calc(15 * var(--u)); font-weight: 800; }
.ob-rated-line { font-size: calc(14 * var(--u)); font-weight: 500; color: var(--secondary); text-align: center; }
.ob-rated-line strong { font-weight: 800; color: var(--text); }
.ob-chips { margin-top: calc(18 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); flex: none; }
.ob-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); padding: 0 calc(20 * var(--u)); }
.ob-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.ob-chip svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--teal); }
.ob-welcome > .ob-cta { margin-top: calc(14 * var(--u)); }
.ob-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  width: calc(100% - 44 * var(--u));
  height: calc(44 * var(--u));
  margin-top: calc(6 * var(--u));
  flex: none;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
  white-space: nowrap;
}
.ob-signin:hover { color: var(--secondary); }
.ob-signin strong { font-weight: 700; color: var(--primary); }
.ob-noscript { margin: 0 0 calc(10 * var(--u)); font-size: 15px; }
/* The Welcome entrance (spring 0.7 s): the logo grows in, the words rise in. */
.ob-welcome .ob-hero, .ob-welcome .ob-brand, .ob-welcome .ob-tagline, .ob-welcome .ob-value, .ob-welcome .ob-rated, .ob-welcome .ob-chips { opacity: 0; }
.ob-welcome .ob-hero { transform: scale(0.85); }
.ob-welcome .ob-brand, .ob-welcome .ob-tagline { transform: translateY(calc(10 * var(--u))); }
.ob-welcome.is-in .ob-hero, .ob-welcome.is-in .ob-brand, .ob-welcome.is-in .ob-tagline, .ob-welcome.is-in .ob-value, .ob-welcome.is-in .ob-rated, .ob-welcome.is-in .ob-chips {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out 0.05s, transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.05s;
}

/* 1 Trust: rises in (easeOut 0.45 s). */
.ob-rise { opacity: 0; transform: translateY(calc(14 * var(--u))); }
.is-in .ob-rise { opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
.ob-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(16 * var(--u));
  border: 1px solid rgba(18, 89, 181, 0.15);
  border-radius: calc(18 * var(--u));
  background: var(--highlight);
}
.ob-quote .ob-stars svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ob-quote blockquote { margin: 0; font-size: calc(14.5 * var(--u)); font-weight: 500; font-style: italic; line-height: 1.32; }
.ob-quote figcaption { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ob-avatar { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, var(--primary), var(--teal)); color: #FFFFFF; display: grid; place-items: center; font-size: calc(11 * var(--u)); font-weight: 700; flex: none; }
.ob-quote figcaption b { display: block; font-size: calc(13 * var(--u)); font-weight: 600; }
.ob-quote figcaption small { display: block; font-size: calc(11.5 * var(--u)); color: var(--secondary); }

/* 6 Chat value: the sample question card. */
.ob-card { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border: 1px solid var(--stroke); border-radius: calc(22 * var(--u)); background: #FFFFFF; }
.ob-mock { box-shadow: 0 calc(6 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.04); }
.ob-ask { margin: 0; display: flex; align-items: flex-start; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--subtle); font-size: calc(14 * var(--u)); font-weight: 500; line-height: 1.3; }
.ob-ask i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); border-radius: 50%; background: var(--primary); flex: none; }
.ob-ask-btn { margin: 0; display: flex; justify-content: center; }
.ob-ask-btn span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--teal)); color: #FFFFFF; font-size: calc(13 * var(--u)); font-weight: 600; }
.ob-ask-btn svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.ob-searches { list-style: none; margin: 0; padding: calc(2 * var(--u)) 0 0; display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.ob-searches li { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--ob-tertiary); transition: color 0.25s ease-in-out; }
.ob-searches svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.ob-i-on { color: var(--ob-success); }
.ob-searches li .ob-i-on, .ob-steps li .ob-i-on, .ob-steps li .ob-spin { display: none; }
.ob-searches li.on { color: var(--text); }
.ob-searches li.on .ob-i-off { display: none; }
.ob-searches li.on .ob-i-on { display: block; }
.ob-card hr { width: 100%; margin: calc(2 * var(--u)) 0; border: 0; border-top: 1px solid #DEE1E7; }
.ob-from { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.ob-from-label { margin: 0; display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; color: var(--primary); }
.ob-from-label svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ob-from-teal { margin-top: calc(4 * var(--u)); color: var(--teal); }
.ob-line { display: block; height: calc(9 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--subtle); }
.ob-w90 { width: 90%; }
.ob-w75 { width: 75%; }
.ob-w85 { width: 85%; }
.ob-w60 { width: 60%; }

/* 7 Safety value */
.ob-check-head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ob-check-icon { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: rgba(31, 176, 82, 0.12); color: var(--ob-success); display: grid; place-items: center; flex: none; }
.ob-check-icon svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ob-check-name { flex: 1; min-width: 0; }
.ob-check-name b { display: block; font-size: calc(14 * var(--u)); font-weight: 700; }
.ob-check-name small { display: block; font-size: calc(12 * var(--u)); color: var(--secondary); }
.ob-major { padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: rgba(255, 59, 48, 0.12); color: var(--ob-red); font-size: calc(10 * var(--u)); font-weight: 900; flex: none; }
.ob-advice { margin: 0; padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--subtle); font-size: calc(13 * var(--u)); line-height: 1.32; }
.ob-cite { margin: 0; display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: var(--primary); }
.ob-cite svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ob-compare { padding: calc(16 * var(--u)); border: 1px solid rgba(18, 89, 181, 0.15); border-radius: calc(18 * var(--u)); background: var(--highlight); }
.ob-compare-title { margin: 0; font-size: calc(14 * var(--u)); font-weight: 700; }
.ob-compare-head, .ob-compare li { display: grid; grid-template-columns: 1fr calc(60 * var(--u)) calc(60 * var(--u)); align-items: center; justify-items: center; }
.ob-compare-head { margin-top: calc(10 * var(--u)); padding-bottom: calc(2 * var(--u)); font-size: calc(11 * var(--u)); }
.ob-compare-head b:first-of-type { color: var(--primary); }
.ob-compare-head b:last-of-type { color: var(--secondary); }
.ob-compare ul { list-style: none; margin: calc(10 * var(--u)) 0 0; padding: 0; }
.ob-compare li { padding: calc(12 * var(--u)) 0; border-top: 1px solid #D5DCE8; font-size: calc(13 * var(--u)); }
.ob-compare li:first-child { padding-top: calc(2 * var(--u)); border-top: 0; }
.ob-compare li:last-child { padding-bottom: calc(2 * var(--u)); }
.ob-compare li span { justify-self: start; }
.ob-compare li svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.ob-yes { color: var(--ob-success); }
.ob-no { color: rgba(255, 59, 48, 0.7); }

/* 8 Institutions: the cards as the app draws them (InstitutionCard's seal treatment). */
.ob-schools-title { margin: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-family: var(--serif); font-weight: 700; letter-spacing: 0; line-height: 1.12; }
.ob-schools-title span:first-child { font-size: calc(24 * var(--u)); color: var(--text); }
.ob-schools-title span:last-child { font-size: calc(30 * var(--u)); color: var(--primary); }
.ob-schools-sub { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.3; color: var(--secondary); }
.ob-school-grid { width: 100%; padding: 0; list-style: none; column-gap: 12px; row-gap: calc(12 * var(--u)); }
.ob-school {
  position: relative;
  height: calc(96 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: calc(14 * var(--u));
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  color: var(--tint);
}
.ob-school::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--u)); background: var(--tint); }
.ob-school svg { width: calc(20 * var(--u)); height: calc(22 * var(--u)); }
.ob-school b { font-family: var(--serif); font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1.15; white-space: nowrap; }
.ob-school small { font-size: calc(8.5 * var(--u)); font-weight: 800; letter-spacing: calc(1.2 * var(--u)); text-transform: uppercase; opacity: 0.7; white-space: nowrap; }
.ob-red { --tint: #A61A26; }
.ob-wine { --tint: #8C1A26; }
.ob-navy { --tint: #002173; }
.ob-blue { --tint: #1A3380; }

/* 9 Personalizing */
.ob-orb { position: relative; width: calc(240 * var(--u)); height: calc(240 * var(--u)); flex: none; display: grid; place-items: center; }
.ob-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid; animation: ob-pulse 2s ease-in-out infinite alternate; }
.ob-ring-1 { width: calc(160 * var(--u)); height: calc(160 * var(--u)); margin: calc(-80 * var(--u)) 0 0 calc(-80 * var(--u)); border-color: rgba(18, 89, 181, 0.10); }
.ob-ring-2 { width: calc(200 * var(--u)); height: calc(200 * var(--u)); margin: calc(-100 * var(--u)) 0 0 calc(-100 * var(--u)); border-color: rgba(18, 89, 181, 0.07); animation-delay: 0.2s; }
.ob-ring-3 { width: calc(240 * var(--u)); height: calc(240 * var(--u)); margin: calc(-120 * var(--u)) 0 0 calc(-120 * var(--u)); border-color: rgba(18, 89, 181, 0.04); animation-delay: 0.4s; }
.ob-orb-core { position: relative; width: calc(120 * var(--u)); height: calc(120 * var(--u)); border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--teal)); box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(18, 89, 181, 0.35); color: #FFFFFF; display: grid; place-items: center; }
.ob-orb-core svg { width: calc(58 * var(--u)); height: calc(58 * var(--u)); animation: ob-glow 1.4s ease-in-out infinite alternate; }
@keyframes ob-pulse { to { transform: scale(1.05); } }
@keyframes ob-glow { to { transform: scale(1.08); } }
.ob-personal-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.15; letter-spacing: 0; text-align: center; }
.ob-personal-sub { margin: calc(8 * var(--u)) 0 0; font-size: calc(14 * var(--u)); color: var(--secondary); }
.ob-steps { list-style: none; margin: 0; padding: 0 calc(30 * var(--u)); width: 100%; display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.ob-steps li { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.3; color: var(--ob-tertiary); transition: color 0.35s ease-in-out; }
.ob-step-icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: grid; place-items: center; flex: none; }
.ob-step-icon svg { width: 100%; height: 100%; }
.ob-steps li.now { font-weight: 600; color: var(--text); }
.ob-steps li.done { color: var(--text); }
.ob-steps li.now .ob-i-off, .ob-steps li.done .ob-i-off { display: none; }
.ob-steps li.now .ob-spin { display: block; }
.ob-steps li.done .ob-i-on { display: block; }
.ob-spin { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid rgba(18, 89, 181, 0.2); border-top-color: var(--primary); animation: ob-spin 0.8s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* 10 Completion */
.ob-done { padding-bottom: calc(18 * var(--u) + env(safe-area-inset-bottom, 0px)); }
.ob-seal { width: calc(160 * var(--u)); height: calc(160 * var(--u)); border-radius: 50%; background: rgba(31, 176, 82, 0.12); color: var(--ob-success); display: grid; place-items: center; flex: none; }
.ob-seal svg { width: calc(96 * var(--u)); height: calc(96 * var(--u)); opacity: 0; transform: scale(0.6); }
.ob-done-text { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); opacity: 0; transform: translateY(calc(12 * var(--u))); }
.ob-done-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: calc(38 * var(--u)); line-height: 1.1; letter-spacing: 0; }
.ob-done-msg { margin: 0; padding: 0 calc(28 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--secondary); text-align: center; }
.ob-summary { width: calc(100% - 44 * var(--u)); margin: 0; padding: calc(16 * var(--u)); border: 1px solid var(--stroke); border-radius: calc(18 * var(--u)); background: #FFFFFF; display: flex; flex-direction: column; gap: calc(10 * var(--u)); flex: none; opacity: 0; }
.ob-summary div { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
.ob-summary dt { display: flex; align-items: center; gap: calc(10 * var(--u)); color: var(--secondary); flex: none; }
.ob-summary dt svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--primary); }
.ob-summary dd { margin: 0 0 0 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-done.is-in .ob-seal svg { opacity: 1; transform: none; transition: opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1); }
.ob-done.is-in .ob-done-text { opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1); }
.ob-done.is-in .ob-summary { opacity: 1; transition: opacity 0.5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ob-ring, .ob-orb-core svg, .ob-spin { animation-duration: 0s; animation-iteration-count: 1; }
  .ob-track i { transition: none; }
}