/* Homepage composition. Shared brand tokens remain the source of truth. */
.ua-home-premium { --ua-text-xs: .8125rem; --ua-text-sm: .9375rem; }
.ua-home-premium main { overflow: clip; }
.ua-home-premium .ua-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.ua-home-premium .ua-section-title { margin-bottom: 1.75rem; }
.ua-home-premium .ua-section-title h2 { font-size: clamp(1.6rem, 3vw, 2.65rem); line-height: 1.45; }
.ua-home-premium .ua-kicker { font-size: .8125rem; }
.ua-home-premium .ua-btn { min-height: 3rem; }
/* The artwork is wide (1916x821). Cropping it to a tall hero cut the books and zoomed the scene on laptops,
   so it keeps its own ratio, sits beside the text, and is sized so the student's head stays clear of the headline. */
.ua-home-premium .ua-home-hero { position: relative; isolation: isolate; display: grid; align-items: center; }
.ua-home-premium .ua-home-hero > * { grid-area: 1 / 1; }
.ua-home-premium .ua-home-hero__image { justify-self: left; width: min(59% + 15rem, 118% - 29rem, 100rem); margin: 0; z-index: -1; }
.ua-home-premium .ua-home-hero__image img { width: 100%; height: auto; object-fit: cover; }
.ua-home-premium .ua-home-hero__image::after { inset: 0; height: auto; background: linear-gradient(270deg, var(--ua-navy-950) 0%, rgb(5 11 22 / 70%) 18%, transparent 48%), linear-gradient(0deg, var(--ua-navy-950), transparent 16%), linear-gradient(180deg, var(--ua-navy-950), transparent 12%); }
.ua-home-premium .ua-home-hero__content { display: block; padding-block: 4rem; text-align: start; }
.ua-home-premium .ua-home-hero__content > div { max-width: 31rem; width: 43%; }
.ua-home-premium .ua-home-hero h1 { font-size: clamp(2.7rem, 4.2vw, 4rem); line-height: 1.35; text-wrap: balance; }
.ua-home-premium .ua-home-hero__intro p { max-width: 29rem; font-size: 1.0625rem; line-height: 1.95; margin-block: 1.5rem; }
.ua-home-premium .ua-home-actions { gap: .75rem; }
.ua-home-premium .ua-home-hero__intro .ua-hero-assurance { font-size: .8125rem; color: #b8c5d9; margin: 1.25rem 0 0; }
.ua-hero-assurance span { padding-inline: .3rem; }
.ua-home-premium .ua-home-stats { background: var(--ua-navy-950); border-bottom: 1px solid rgb(255 255 255 / 12%); }
.ua-home-premium .ua-home-stats__grid { padding-block: 1.6rem; }
.ua-home-premium .ua-home-stats__grid div { border-color: rgb(255 255 255 / 12%); }
.ua-home-premium .ua-home-stats strong { color: var(--ua-gold-400); }
.ua-home-premium .ua-home-stats span { color: #c0ccde; }
.ua-home-premium .ua-compare { background: var(--ua-paper); }
.ua-home-premium .ua-compare-card { box-shadow: none; padding: 1.25rem; }
.ua-home-premium .ua-journey, .ua-home-premium .ua-learning, .ua-home-premium .ua-home-market { background: var(--ua-paper); }
.ua-home-premium .ua-journey { padding-top: 1rem; }
.ua-home-premium .ua-journey__steps { gap: .75rem; }
.ua-home-premium .ua-journey-step { min-height: 0; padding: 1.15rem; background: transparent; box-shadow: none; }
.ua-home-premium .ua-journey-step.is-active { background: white; border-color: var(--ua-gold-600); transform: none; }
.ua-home-premium .ua-journey-step > strong { margin-top: .6rem; }
.ua-home-premium .ua-journey-step .ua-icon-box { width: 2.5rem; height: 2.5rem; }
.ua-home-premium .ua-journey__detail { display: block; align-content: center; min-height: 5.5rem; margin-top: .75rem; font-size: .9375rem; color: var(--ua-text); border-inline-start: 3px solid var(--ua-gold-500); background: var(--ua-surface); }
.ua-home-premium .ua-learning { padding-top: 1rem; }
.ua-home-premium .ua-learning__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ua-home-premium .ua-course-card { box-shadow: none; border-color: var(--ua-line); }
.ua-home-premium .ua-course-card__cover { height: 9rem; }
.ua-track-symbols { position: absolute; overflow: hidden; }
.ua-track-art { width: 90%; height: 85%; filter: drop-shadow(0 0 12px rgb(113 192 255 / 24%)); }
.ua-home-premium .ua-course-card__body { padding: 1.25rem; }
.ua-home-premium .ua-course-card h3 { margin-block: .7rem; }
.ua-home-premium .ua-course-card p { min-height: 0; line-height: 1.8; }
.ua-home-premium .ua-course-card__body > small { min-height: 0; font-size: .8125rem; padding-top: .8rem; }
.ua-home-premium .ua-course-card__body > a { min-height: 2.75rem; align-items: center; margin-top: .5rem; }
.ua-home-premium .ua-home-market { padding-top: 0; }
.ua-home-premium .ua-home-market::before { display: none; }
.ua-home-premium .ua-home-market__grid { margin-top: 1.5rem; }
.ua-home-premium .ua-home-service { background: white; box-shadow: none; }
.ua-home-premium .ua-home-service__visual { height: 5rem; background: var(--ua-navy-900); }
.ua-home-premium .ua-home-service__visual::before, .ua-home-premium .ua-home-service__visual::after, .ua-home-premium .ua-home-service__visual i { display: none; }
.ua-home-premium .ua-home-service__visual span { font-size: .875rem; color: #c0ccde; }
.ua-home-premium .ua-home-service__visual b { font-size: 1.125rem; color: var(--ua-gold-400); }
.ua-home-premium .ua-home-service__body small { font-size: .8125rem; }
.ua-home-premium .ua-home-service__body h3, .ua-home-premium .ua-home-service__body p { min-height: 0; }
.ua-home-premium .ua-home-service__body p { font-size: .9375rem; }
.ua-home-premium .ua-home-service__body footer strong { font: 800 .9375rem var(--ua-font-ar); }
.ua-home-premium .ua-home-market__note { font-size: .875rem; }
.ua-home-premium .ua-profit-story { padding-block: 4rem 2rem; background: radial-gradient(circle at 15% 20%, rgb(53 86 216 / 18%), transparent 30%), radial-gradient(circle at 88% 30%, rgb(222 184 111 / 10%), transparent 28%), var(--ua-navy-950); }
.ua-home-premium .ua-profit-principles { margin-top: 2.5rem; }
.ua-home-premium .ua-profit-principles small { font-size: .8125rem; }
.ua-home-premium .ua-plans { padding-top: 2rem; background: var(--ua-navy-950); color: white; }
.ua-home-premium .ua-plans .ua-kicker { color: var(--ua-gold-400); }
.ua-home-premium .ua-plans .ua-section-title h2 { color: white; }
.ua-home-premium .ua-plans .ua-section-title p { color: #b8c5d9; }
.ua-home-premium .ua-plans__grid { margin-top: 2rem; }
.ua-home-premium .ua-plan-card { padding: 1.35rem; border-radius: 1rem; box-shadow: none; }
.ua-home-premium .ua-plan-card.is-featured { background: linear-gradient(155deg, var(--ua-gold-300), #fff8e9); }
.ua-home-premium .ua-plan-card.is-featured { --ua-muted: var(--ua-text); --ua-gold-700: var(--ua-navy-700); }
.ua-home-premium .ua-plan-card.is-selected { transform: none; }
.ua-home-premium .ua-plan-card__flag { font-size: .8125rem; }
.ua-home-premium .ua-plan-card__price { margin-block: 1.25rem .75rem; }
.ua-home-premium .ua-plan-card__price strong { font-family: var(--ua-font-latin); }
.ua-home-premium .ua-plan-card > p { min-height: 4.5rem; font-size: .9375rem; }
.ua-home-premium .ua-plan-card ul { font-size: .875rem; gap: .65rem; }
.ua-plan-calculate { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: .4rem; padding: .5rem; border: 0; background: transparent; color: var(--ua-gold-700); font: 800 .8125rem var(--ua-font-ar); cursor: pointer; }
.ua-home-premium .ua-plans__note { background: transparent; color: #b8c5d9; padding-inline: 0; }
.ua-home-premium .ua-plans__note a { color: var(--ua-gold-400); }
.ua-home-premium .ua-workspace { background: var(--ua-paper); }
.ua-home-premium .ua-workspace__screen { min-height: 26rem; }
.ua-home-premium .ua-screen__bar small { font-size: .8125rem; }
.ua-home-premium .ua-about { padding-top: 1rem; }
.ua-home-premium .ua-about__visual { min-height: 19rem; }
.ua-home-premium .ua-about__visual small { font-size: .8125rem; letter-spacing: .05em; }
.ua-home-premium .ua-about__values { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.ua-home-premium .ua-about__values span { align-items: center; font-size: .9375rem; }
.ua-home-premium .ua-about__values .ua-icon { flex: none; color: var(--ua-gold-700); }
.ua-home-premium .ua-contact { background: white; padding-top: 1rem; }
.ua-home-premium .ua-contact__card { padding: 2rem; }
.ua-home-premium .ua-calculator { padding-block: 3.5rem; }
.ua-home-premium .ua-calculator__lab { gap: 1rem; margin-top: 2rem; }
.ua-home-premium .ua-level-panel, .ua-home-premium .ua-calc-panel, .ua-home-premium .ua-plan-switch button { min-width: 0; }
.ua-home-premium .ua-calc-panel .ua-input { min-width: 0; width: 100%; }
.ua-home-premium .ua-plan-switch small, .ua-home-premium .ua-level-panel__title small { font-size: .8125rem; }
.ua-home-premium .ua-level-grid { grid-template-columns: repeat(8, minmax(2.75rem, 1fr)); max-height: 21rem; }
.ua-home-premium .ua-level-grid button { min-height: 2.75rem; }
.ua-home-premium .ua-calc-result { min-height: 9rem; }
.ua-home-premium .ua-calc-error { color: var(--ua-gold-300); font-size: .875rem; margin: 0; }
.ua-home-premium .ua-calc-error:empty { display: none; }
.ua-home-premium .ua-mobile-dock { bottom: max(.75rem, env(safe-area-inset-bottom)); }
.ua-home-premium .ua-site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.ua-home-premium .ua-catalog-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ua-line); border-radius: 1rem; background: white; }
.ua-catalog-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ua-navy-900); }
.ua-catalog-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.ua-catalog-body small { color: var(--ua-gold-700); font-size: .8125rem; }
.ua-catalog-body h3 { font-size: 1.125rem; line-height: 1.6; margin-block: .5rem; }
.ua-catalog-body p { color: var(--ua-muted); font-size: .9375rem; margin: 0 0 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ua-catalog-body footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--ua-line); }
.ua-catalog-body footer a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ua-gold-700); font-weight: 800; }
.ua-catalog-status { grid-column: 1 / -1; padding: 1.5rem; border: 1px solid var(--ua-line); border-radius: 1rem; background: white; color: var(--ua-text); }
@media (max-width: 70rem) {
  .ua-home-premium .ua-learning__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-home-premium .ua-home-hero__content > div { width: 48%; }
  .ua-home-premium .ua-home-hero h1 { font-size: 3rem; }
  .ua-home-premium .ua-level-grid { grid-template-columns: repeat(5, minmax(2.75rem, 1fr)); }
}
/* Too narrow to fit the whole scene beside the headline: stack the full image above the text. */
@media (max-width: 62rem) {
  .ua-home-premium .ua-home-hero { display: block; }
  .ua-home-premium .ua-home-hero__image { width: 100%; }
  .ua-home-premium .ua-home-hero__image::after { background: linear-gradient(0deg, var(--ua-navy-950), transparent 30%), linear-gradient(180deg, var(--ua-navy-950), transparent 10%); }
  .ua-home-premium .ua-home-hero__content { padding-block: 1rem 3rem; text-align: center; }
  .ua-home-premium .ua-home-hero__content > div { width: 100%; max-width: 36rem; margin-inline: auto; }
  .ua-home-premium .ua-home-hero__intro p { margin-inline: auto; }
  .ua-home-premium .ua-home-actions { justify-content: center; }
}
@media (max-width: 48rem) {
  .ua-home-premium .ua-home-hero { display: block; min-height: 0; }
  .ua-home-premium .ua-home-hero__image { position: relative; width: 100%; height: 15rem; }
  .ua-home-premium .ua-home-hero__image img { height: 100%; object-position: 77% center; }
  .ua-home-premium .ua-home-hero__image::after { background: linear-gradient(0deg, var(--ua-navy-950), transparent 45%); }
  .ua-home-premium .ua-home-hero__content { padding-block: .5rem 2rem; text-align: center; }
  .ua-home-premium .ua-home-hero__content > div { width: 100%; max-width: none; }
  .ua-home-premium .ua-home-hero h1 { font-size: clamp(2rem, 8.7vw, 3rem); }
  .ua-home-premium .ua-home-hero__intro p { margin: 1rem auto; font-size: 1rem; }
  .ua-home-premium .ua-home-actions .ua-btn { width: auto; flex: 1 1 auto; }
  .ua-home-premium .ua-home-stats__grid { gap: 1rem; padding-block: 1.25rem; }
  .ua-home-premium .ua-home-stats__grid div { display: grid; gap: .5rem; justify-content: center; text-align: center; padding: 0; }
  .ua-home-premium .ua-home-stats span { font-size: .8125rem; }
  /* Comparison and plans swipe sideways on phones instead of stacking into several screens. */
  .ua-home-premium .ua-compare__grid, .ua-home-premium .ua-plans__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .ua-home-premium .ua-compare__grid::-webkit-scrollbar, .ua-home-premium .ua-plans__grid::-webkit-scrollbar { display: none; }
  .ua-home-premium .ua-compare__grid { margin-inline: -1rem; padding: .25rem 1rem 1rem; }
  .ua-home-premium .ua-compare-card, .ua-home-premium .ua-plan-card { scroll-snap-align: start; }
  .ua-home-premium .ua-compare-card.is-us { order: -1; }
  .ua-home-premium .ua-section-title--center { text-align: start; }
  .ua-home-premium .ua-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-home-premium .ua-journey-step { padding: 1rem; }
  .ua-home-premium .ua-journey-step > strong { font-size: 1rem; }
  .ua-home-premium .ua-journey-step > small { display: none; }
  .ua-home-premium .ua-journey__detail { min-height: 8rem; }
  .ua-home-premium .ua-learning__grid { grid-template-columns: 1fr; gap: 1rem; }
  .ua-home-premium .ua-course-card { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); }
  .ua-home-premium .ua-course-card__cover { height: 100%; min-height: 11rem; }
  .ua-home-premium .ua-track-art { width: 100%; }
  .ua-home-premium .ua-course-card__body { padding: 1rem; }
  .ua-home-premium .ua-course-card h3 { margin-block: .4rem; font-size: 1.125rem; }
  .ua-home-premium .ua-course-card p { margin-block: .5rem; }
  .ua-home-premium .ua-course-card__body > small { display: none; }
  .ua-home-premium .ua-home-market__grid { grid-template-columns: 1fr; }
  .ua-home-premium .ua-home-service { display: grid; grid-template-columns: 4rem minmax(0, 1fr); }
  .ua-home-premium .ua-home-service__visual { height: 100%; padding: .75rem; align-items: start; justify-content: center; }
  .ua-home-premium .ua-home-service__visual b { display: none; }
  .ua-home-premium .ua-home-service__body { padding: 1rem; }
  .ua-home-premium .ua-profit-story { padding-top: 2.5rem; }
  .ua-home-premium .ua-profit-principles { gap: 1rem; margin-top: 2rem; }
  .ua-home-premium .ua-plan-card > p { min-height: 0; }
  .ua-home-premium .ua-plan-card__price { margin-block: 1rem; display: flex; align-items: baseline; justify-content: space-between; }
  .ua-home-premium .ua-plan-card ul { margin-bottom: 1rem; }
  .ua-home-premium .ua-plans__grid { margin: 1rem -1rem 0; padding: 1rem 1rem 1.25rem; }
  .ua-home-premium .ua-workspace__layout { gap: 1.5rem; }
  .ua-home-premium .ua-workspace__copy { text-align: start; }
  .ua-home-premium .ua-workspace__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .ua-home-premium .ua-workspace__tabs button { justify-content: center; padding: .75rem .4rem; min-height: 3rem; text-align: center; }
  .ua-home-premium .ua-workspace__tabs small, .ua-home-premium .ua-workspace__tabs .ua-icon { display: none; }
  .ua-home-premium .ua-workspace__tabs strong { font-size: .8125rem; }
  .ua-home-premium .ua-workspace__screen { min-height: 25rem; }
  .ua-home-premium .ua-about__visual { min-height: 12rem; }
  .ua-home-premium .ua-about__values { grid-template-columns: 1fr; }
  .ua-home-premium .ua-contact__card { padding: 1.5rem; }
  .ua-home-premium .ua-calculator { padding-block: 2.5rem; }
  .ua-home-premium .ua-level-panel, .ua-home-premium .ua-calc-panel { padding: 1rem; }
  .ua-home-premium .ua-catalog-card { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); }
  .ua-home-premium .ua-catalog-cover { height: 100%; aspect-ratio: auto; }
  .ua-home-premium .ua-catalog-body { padding: 1rem; }
}
@media (max-width: 23rem) {
  .ua-home-premium .ua-level-grid { grid-template-columns: repeat(4, minmax(2.75rem, 1fr)); }
  .ua-home-premium .ua-calc-panel__top { align-items: start; flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ua-home-premium [data-workspace-screen] { animation: ua-screen-in 220ms ease-out; }
  @keyframes ua-screen-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Tablet: ten columns of comfortable buttons instead of screen-wide squares */
@media (min-width: 36.01rem) and (max-width: 70rem) {
  .ua-home-premium .ua-level-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .ua-home-premium .ua-level-grid button { aspect-ratio: auto; }
}
/* Service covers can be square: show the whole image on the dark card instead of cropping it */
.ua-catalog-cover--whole { object-fit: contain; }

/* Phones: the live course and service cards swipe sideways, each with its whole cover on top, like the
   plans and the comparison above. Stacked with a 5rem sliver of the cover beside the text, the course
   banners (wide, with their own lettering) showed nothing and the section ran two screens long. */
@media (max-width: 48rem) {
  .ua-home-premium .ua-learning__grid[data-catalog-state="live"],
  .ua-home-premium .ua-home-market__grid[data-catalog-state="live"] { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .75rem; margin-inline: -1rem; padding: .25rem 1rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .ua-home-premium .ua-learning__grid[data-catalog-state="live"]::-webkit-scrollbar,
  .ua-home-premium .ua-home-market__grid[data-catalog-state="live"]::-webkit-scrollbar { display: none; }
  .ua-home-premium [data-catalog-state="live"]:has(> .ua-catalog-card:only-child) { grid-auto-columns: 100%; }
  .ua-home-premium .ua-catalog-card { display: flex; flex-direction: column; scroll-snap-align: start; }
  .ua-home-premium .ua-catalog-cover { height: auto; aspect-ratio: 16 / 9; }
}
