:root {
  --brand-yellow: #FFCD17;
  --brand-blue: #0647B5;
  --brand-navy: #071B65;
  --brand-charcoal: #20232B;
  --brand-white: #FFFFFF;
  --brand-soft: #F7F9FE;
  --brand-cream: #FFF4C6;
  --brand-gradient: linear-gradient(115deg, var(--brand-blue) 0%, var(--brand-navy) 100%);
  --surface: var(--brand-white);
  --muted: #4B5670;
  --border: #DCE4F3;
  --control-border: #63718B;
  --error: #a32426;
  --radius: 1.25rem;
  --control-radius: .75rem;
  --shadow: 0 .65rem 2rem rgb(32 35 43 / .06);
}

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

body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--brand-soft);
  color: var(--brand-charcoal);
  font: 1rem/1.85 Tahoma, "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3 { margin-block: 0 .45em; line-height: 1.4; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.25rem, 2.8vw, 1.85rem); }
h3 { font-size: 1.1rem; }
p { margin-block: 0 .85em; }
p:last-child { margin-block-end: 0; }
a { color: inherit; text-underline-offset: .24em; }
a:hover { text-decoration-thickness: .13em; }
:where(a, button, input, select, textarea):focus-visible {
  outline: .19rem solid var(--focus-color, var(--brand-charcoal));
  outline-offset: .2rem;
}
dt { font-weight: 700; }
dd { margin: 0; overflow-wrap: anywhere; }

.container { inline-size: min(100% - 2rem, 74rem); margin-inline: auto; }
.page { flex: 1; padding-block: clamp(1.25rem, 4vw, 3.5rem); }
.stack > * + * { margin-block-start: 1rem; }
.muted { color: var(--muted); }
.eyebrow { font-size: .85rem; font-weight: 700; }
.full-width { grid-column: 1 / -1; }

.site-header { background: var(--surface); border-block-end: 1px solid var(--border); }
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding-block: .85rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  inline-size: fit-content;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.brand small { display: block; margin-block-start: .2rem; font-size: .68rem; font-weight: 400; }
.brand-mark {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  flex: none;
  border-radius: .7rem;
  background: var(--brand-yellow);
  color: var(--brand-charcoal);
}
.brand-mark svg { inline-size: 1.6rem; block-size: 1.6rem; }
.site-nav, .account-actions, .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.site-nav { grid-column: 1 / -1; grid-row: 2; border-block-start: 1px solid var(--border); padding-block-start: .5rem; }
.site-nav a { padding: .35rem .55rem; border-radius: .5rem; text-decoration: none; font-size: .9rem; }
.site-nav a:hover { background: var(--brand-cream); }
.site-nav a[aria-current="page"] { background: var(--brand-yellow); font-weight: 700; }
.account-actions { justify-content: flex-end; }
.account-actions form { margin: 0; }
.account-actions :is(button, .button) { padding-inline: .6rem; font-size: .85rem; }

.site-footer {
  --focus-color: var(--brand-yellow);
  padding-block: 2rem 1rem;
  background: var(--brand-navy);
  color: var(--brand-soft);
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; }
.footer-inner p { margin-block-start: .65rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .6rem 1.2rem; }
.footer-legal { border-block-start: 1px solid #53639A; margin-block-start: 1.25rem; padding-block-start: 1rem; font-size: .9rem; }

.panel, .card {
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel { padding: clamp(1rem, 4vw, 2.5rem); box-shadow: var(--shadow); }
.card { padding: clamp(1rem, 2.5vw, 1.45rem); overflow-wrap: anywhere; }
.card p { color: var(--muted); }
.page-heading { margin-block-end: 1.25rem; }
.page-heading .eyebrow, .section-heading .eyebrow { color: var(--muted); margin-block-end: .35rem; }

.hero {
  --focus-color: var(--brand-yellow);
  color: var(--brand-white);
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.25rem, 5vw, 4rem);
  border: 1px solid var(--brand-blue);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background: var(--brand-gradient);
}
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.hero .eyebrow, .badge {
  display: inline-block;
  border-radius: 5rem;
  background: var(--brand-cream);
  padding: .2rem .75rem;
  color: var(--brand-charcoal);
}
.hero-intro { max-inline-size: 39ch; }
.hero .actions { margin-block-start: 1.25rem; }
.hero-art { display: block; inline-size: min(100%, 25rem); max-block-size: 15rem; margin-inline: auto; }
.hero-break { display: none; }
.callout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-start: 1.25rem; }
.home-section { margin-block-start: clamp(2rem, 5vw, 4rem); }
.section-heading { margin-block-end: 1rem; }
.category-grid, .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .8rem;
}
.category-grid, .tag-list { list-style: none; margin: 0; padding: 0; }
.category-card { display: flex; align-items: center; gap: .65rem; font-weight: 700; }
.category-number {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: .6rem;
  background: var(--brand-cream);
}
.tag-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.badge { font-size: .82rem; font-weight: 700; }
.empty-card { border-block-start: .25rem solid var(--brand-yellow); }
.empty-card .eyebrow { color: var(--muted); }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-block-size: 2.75rem;
  padding: .45rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: var(--brand-yellow);
  color: var(--brand-charcoal);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
:is(button, .button):hover { background: var(--brand-cream); color: var(--brand-charcoal); }
.button--on-blue { border-color: var(--brand-white); background: transparent; color: var(--brand-white); }
.button--outline { border-color: var(--brand-charcoal); background: transparent; }
.button--quiet { background: var(--brand-cream); }

.consultation-panel { max-inline-size: 56rem; margin-inline: auto; }
.auth-panel { max-inline-size: 34rem; margin-inline: auto; }
.auth-panel form > div { margin-block-end: 1rem; }
.notice {
  background: var(--brand-cream);
  border-inline-start: .25rem solid var(--brand-yellow);
  border-radius: var(--control-radius);
  padding: .9rem 1rem;
  margin-block: 1rem;
}
.notice h2 { font-size: 1.15rem; }
.field-grid { display: grid; gap: 1rem; }
.field-grid > div { min-inline-size: 0; }
label { font-weight: 700; }
:is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) {
  display: block;
  inline-size: 100%;
  min-block-size: 2.75rem;
  margin-block: .25rem;
  padding: .5rem .65rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  color: inherit;
  background: var(--surface);
  font: inherit;
}
textarea { resize: vertical; }
input[type="checkbox"] { inline-size: 1.1rem; block-size: 1.1rem; vertical-align: middle; accent-color: var(--brand-yellow); }
.helptext { color: var(--muted); font-size: .9rem; }
.errorlist { color: var(--error); padding-inline-start: 1.5rem; }
[aria-invalid="true"] { border-color: var(--error); }
.consent-field { background: var(--brand-soft); border: 1px solid var(--border); padding: .75rem; border-radius: var(--control-radius); }

.request-list { padding-inline-start: 1.5rem; overflow-wrap: anywhere; }
.request-list li { padding-block: .65rem; border-block-end: 1px solid var(--border); }
.request-list .request-title { display: inline-block; font-weight: 700; }
.request-list .request-meta { display: block; margin-block-start: .25rem; font-size: .9rem; color: var(--muted); }
.detail-grid > div { background: var(--brand-soft); padding: .7rem; border-radius: var(--control-radius); }
.tracking-code { overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
.skip-link {
  position: absolute;
  z-index: 1;
  inset-inline-start: 1rem;
  inset-block-start: .5rem;
  background: var(--brand-yellow);
  padding: .5rem;
}
.skip-link:not(:focus) { clip-path: inset(50%); }

@media (min-width: 40rem) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hero-art { max-block-size: none; }
}

@media (min-width: 55rem) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; }
  .site-nav { grid-column: 2; grid-row: 1; justify-content: center; padding: 0; border: 0; }
  .hero-break { display: initial; }
  .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.catalog-banner {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--brand-gradient);
  color: var(--brand-white);
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}
.catalog-card, .catalog-option { display: flex; flex-direction: column; gap: .75rem; min-inline-size: 0; }
.catalog-card { box-shadow: var(--shadow); }
.catalog-option .catalog-card { flex: 1; }
.catalog-card > * { margin-block: 0; }
.catalog-featured { border-block-start: .25rem solid var(--brand-yellow); }
.catalog-identity {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.catalog-identity > :not(.catalog-avatar) { min-inline-size: 0; }
.catalog-name { margin: 0; font-size: 1.15rem; color: var(--brand-navy); }
.catalog-subtitle { color: var(--muted); margin-block: .2rem 0; }
.catalog-avatar {
  display: block;
  flex: none;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  object-fit: cover;
  object-position: center 32%;
  border-radius: var(--control-radius);
  background: var(--brand-soft);
}
.catalog-initial {
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: var(--brand-yellow);
  font-size: 1.45rem;
  font-weight: 700;
}
.catalog-detail .catalog-avatar { inline-size: clamp(4rem, 10vw, 7rem); block-size: auto; aspect-ratio: 1; }
.catalog-detail h1 { margin: 0; color: var(--brand-navy); }
.catalog-summary { max-inline-size: 68ch; overflow-wrap: anywhere; }
.promotional-artwork { margin-inline: auto; max-inline-size: 46rem; }
.promotional-artwork img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--control-radius); }
.scholarship-terms { font-size: .9rem; }
.catalog-specialties { font-size: .9rem; }
.catalog-actions { margin-block-start: auto; padding-block-start: .4rem; }
.catalog-actions .button { font-size: .875rem; padding-inline: .65rem; }
.catalog-empty { padding: clamp(1.25rem, 4vw, 2rem); }
.catalog-facts { display: grid; gap: .65rem; margin-block: 1rem; }
.catalog-facts > div { background: var(--brand-soft); border-radius: var(--control-radius); padding: .7rem; }
.filter-bar { align-items: end; gap: .75rem; }
.filter-bar > div { flex: 0 1 13rem; min-inline-size: 0; }
.filter-bar select { margin-block-end: 0; }
.compare-choice { display: flex; align-items: center; gap: .5rem; padding-inline: .6rem; font-size: .9rem; }
.compare-choice input { flex: none; }
.home-section.empty-card + .home-section.empty-card { margin-block-start: .75rem; }

.package-terms {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.4rem;
  margin-block: 0;
  padding: .55rem .75rem;
  background: var(--brand-cream);
  border-radius: var(--control-radius);
}
.package-terms dt { font-size: .8rem; color: var(--muted); }
.package-terms dd { color: var(--brand-navy); }
.package-terms strong { font-size: 1.15rem; }
.package-services { margin-block: 0; padding-inline-start: 1.25rem; overflow-wrap: anywhere; }
.package-services li::marker { color: var(--brand-blue); }
.package-detail-grid { display: grid; gap: 1rem; }
.package-selection { align-self: start; background: var(--brand-soft); }
.package-selection .button { inline-size: 100%; text-align: center; }

@media (min-width: 48rem) {
  .package-detail-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .65rem; }
.report-metrics > div { background: var(--brand-soft); padding: .75rem; border-radius: var(--control-radius); }
.report-subject { border-block-start: 1px solid var(--border); padding-block: .6rem; }
.report-subject summary { cursor: pointer; font-weight: 700; }
.report-subject[open] summary { margin-block-end: .65rem; }
.study-days { list-style: none; padding: 0; margin: 0; }
.study-days li { display: grid; gap: .4rem .75rem; padding-block: .65rem; border-block-start: 1px solid var(--border); }
.study-days span { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.study-days meter { inline-size: min(100%, 7rem); }
.study-days meter::-webkit-meter-optimum-value { background: var(--brand-blue); }
.study-days meter::-moz-meter-bar { background: var(--brand-blue); }

@media (min-width: 40rem) {
  .study-days li { grid-template-columns: minmax(6rem, auto) 1fr 1fr; }
}
