/* Sepas reference compositions — shared page and responsive patterns. */

.courses-catalog-page,
.course-detail-page,
.contact-public-page,
.account-page {
  --reference-section-space: clamp(3.5rem, 7vw, 5.5rem);
  --reference-panel-radius: var(--sys-shape-extra-large);
  --reference-strong-radius: var(--sys-shape-extra-extra-large);
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero,
.contact-public-page[data-design-public="contact"] .contact-hero {
  padding-block: clamp(3rem, 7vw, 5.75rem);
  background:
    radial-gradient(circle at 10% 20%, rgb(44 119 114 / 0.08), transparent 28rem),
    linear-gradient(145deg, var(--sys-color-background), var(--sys-color-surface-container-low));
  color: var(--sys-color-on-background);
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero .type-h1,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero .type-h1,
.contact-public-page[data-design-public="contact"] .contact-hero .type-h1,
.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero .page-intro,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero .page-intro,
.contact-public-page[data-design-public="contact"] .contact-hero .page-intro,
.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero .interior-kicker,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero .interior-kicker,
.contact-public-page[data-design-public="contact"] .contact-hero .interior-kicker {
  color: inherit;
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-steps {
  padding-inline: 0;
  border: 0;
  border-block-start: 0.2rem solid var(--sys-color-secondary);
  border-radius: 0;
  background: transparent;
  color: var(--sys-color-on-background);
}

.contact-public-page[data-design-public="contact"] .interior-hero-aside {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--reference-panel-radius);
  background: var(--sys-color-secondary-container);
  color: var(--sys-color-on-secondary-container);
}

.course-detail-page[data-design-public="course-detail"] .detail-facts {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--reference-panel-radius);
  background: var(--sys-color-surface-container-low);
  color: var(--sys-color-on-surface);
}

.course-detail-page[data-design-public="course-detail"] .detail-facts div {
  border-color: var(--sys-color-outline-variant);
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-steps strong,
.courses-catalog-page[data-design-public="course-list"] .courses-catalog-steps small,
.course-detail-page[data-design-public="course-detail"] .detail-facts dt,
.course-detail-page[data-design-public="course-detail"] .detail-facts dd {
  color: inherit;
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero .btn-secondary,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero .btn-secondary {
  border-color: var(--sys-color-outline);
  background: var(--sys-color-surface);
  color: var(--sys-color-primary);
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero .breadcrumb,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero .breadcrumb,
.contact-public-page[data-design-public="contact"] .contact-hero .breadcrumb {
  color: var(--sys-color-on-surface-variant);
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-hero .breadcrumb a,
.course-detail-page[data-design-public="course-detail"] .course-detail-hero .breadcrumb a,
.contact-public-page[data-design-public="contact"] .contact-hero .breadcrumb a {
  color: inherit;
}

.courses-catalog-page[data-design-public="course-list"] .courses-catalog-steps li + li {
  border-block-start-color: var(--sys-color-outline-variant);
}

.course-entry-section {
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
  background: var(--sys-color-surface-container-low);
}

.courses-results-section {
  background: var(--sys-color-background);
}

.course-filter-sidebar {
  border-radius: var(--reference-panel-radius);
}

.course-card {
  overflow: hidden;
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--reference-panel-radius);
  background: var(--sys-color-surface);
}

.course-card:hover,
.course-card:focus-within {
  border-color: var(--sys-color-tertiary);
  box-shadow: var(--sys-elevation-level-2);
  transform: translateY(-0.25rem);
}

.course-detail-page[data-design-public="course-detail"] .course-detail-visual {
  overflow: hidden;
  border-color: rgb(255 255 255 / 0.18);
  border-radius: var(--reference-strong-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-2);
}

.course-detail-page[data-design-public="course-detail"] .course-detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-jump-bar {
  border-color: var(--sys-color-outline-variant);
  background: color-mix(in srgb, var(--sys-color-background) 94%, transparent);
  backdrop-filter: blur(0.75rem);
}

.course-jump-nav {
  scrollbar-width: thin;
}

.detail-content-section,
.course-resource-section,
.course-learning-section,
.course-continuation-section,
.course-video-section,
.course-teacher-section,
.course-classes-section,
.course-callback-section,
.course-gallery-section,
.course-articles-section {
  padding-block: var(--reference-section-space);
}

.course-learning-path > li,
.class-schedule-card,
.related-offline-card {
  border-radius: var(--reference-panel-radius);
}

.contact-overview-section {
  background: var(--sys-color-background);
}

.contact-information-card,
.contact-process-card {
  border-radius: var(--reference-panel-radius);
}

.contact-tabs {
  padding-block-end: var(--reference-section-space);
  background: var(--sys-color-surface-container-low);
}

.contact-form-index {
  position: sticky;
  z-index: calc(var(--z-header) - 1);
  inset-block-start: var(--header-height);
  padding-block: 1rem;
  border-block: 1px solid var(--sys-color-outline-variant);
  background: color-mix(in srgb, var(--sys-color-background) 96%, transparent);
  backdrop-filter: blur(0.75rem);
}

.contact-form-index > .container-wide {
  gap: 1.25rem 2rem;
}

.contact-form-index nav {
  overflow-x: auto;
  padding: 0.35rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
  scrollbar-width: thin;
}

.contact-form-index [role="tab"] {
  min-width: 10.5rem;
  border: 0;
  border-radius: var(--sys-shape-medium);
}

.contact-form-index [role="tab"][aria-selected="true"] {
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.contact-form-index [role="tab"][aria-selected="true"] small {
  color: var(--ref-color-navy-70);
}

[data-contact-panel] {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.contact-tabs.is-ready [data-contact-panel][hidden] {
  display: none;
}

[data-contact-panel] > .container {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--reference-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.account-page {
  padding-block: clamp(2rem, 5vw, 4.5rem);
  background:
    linear-gradient(180deg, var(--sys-color-surface-container-low) 0 15rem, transparent 15rem),
    var(--sys-color-background);
}

.account-heading {
  margin-block-end: 1.25rem;
}

.account-nav-shell {
  position: relative;
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}

.account-nav-toggle,
.account-nav-drawer-heading,
.account-nav-scrim {
  display: none;
}

.account-nav {
  margin: 0;
  padding: 0.65rem;
  border-radius: var(--reference-panel-radius);
}

.account-nav a {
  border-radius: var(--sys-shape-large);
}

.account-summary-primary,
.account-security,
.account-form,
.notification-card,
.ticket-summary,
.commerce-panel {
  border-radius: var(--reference-panel-radius);
  box-shadow: none;
}

.account-summary-primary {
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
}

.account-security {
  background: var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.account-security .eyebrow,
.account-security .type-h3,
.account-security .account-action-list a,
.account-security .account-action-list small {
  color: inherit;
}

/* User-facing families without a dedicated page reference. */

.auth-page[data-design-account] {
  min-height: calc(100svh - var(--header-height));
  background:
    radial-gradient(circle at 10% 18%, rgb(181 96 40 / 0.1), transparent 24rem),
    var(--sys-color-background);
}

.auth-page[data-design-account] .auth-context,
.auth-page[data-design-pilot="login"] .auth-context {
  overflow: hidden;
  border: 0;
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
  border-radius: var(--reference-strong-radius);
  background:
    radial-gradient(circle at 0 0, rgb(44 119 114 / 0.28), transparent 24rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: none;
}

.auth-page[data-design-account] .auth-context :is(h1, h2, h3, p, li, a),
.auth-page[data-design-pilot="login"] .auth-context :is(h1, h2, h3, p, li, a) {
  color: inherit;
}

.auth-page[data-design-account] .auth-card {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--reference-strong-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.auth-page[data-design-account] .result-mark .ui-icon,
.commerce-result-mark .ui-icon,
.registration-confirmation-mark .ui-icon {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 2.2;
}

.account-page[data-design-account] .account-overview-grid {
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.account-page[data-design-account] :is(
    .account-summary,
    .account-summary-primary,
    .account-security,
    .account-form,
    .notification-card,
    .ticket-summary,
    .empty-state
  ) {
  border-radius: var(--reference-panel-radius);
}

.account-page[data-design-account] .account-action-list > a {
  min-height: 3.25rem;
  border-radius: var(--sys-shape-large);
}

.account-page[data-design-account] .account-action-list > a > .ui-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sys-color-tertiary);
}

.account-logout-status {
  margin-block: 0.75rem 0;
  color: var(--sys-color-error);
  font-size: var(--text-small);
}

.account-page[data-design-account] .account-section-heading {
  gap: 0.75rem 1.25rem;
}

.commerce-page[data-design-account] {
  background:
    linear-gradient(180deg, var(--sys-color-surface-container-low) 0 13rem, transparent 13rem),
    var(--sys-color-background);
}

.commerce-page[data-design-account] :is(.commerce-panel, .commerce-order-card, .commerce-result) {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--reference-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: none;
}

.commerce-page[data-design-account="checkout"] .commerce-summary {
  overflow: hidden;
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
}

.commerce-page[data-design-account] .commerce-order-meta > div,
.commerce-page[data-design-account] .commerce-fake-summary > div,
.account-page[data-design-account] .commerce-order-meta > div {
  border: 1px solid var(--sys-color-outline-variant);
  background: var(--sys-color-surface-container-low);
}

.commerce-page[data-design-account] .commerce-result.is-success {
  border-color: color-mix(in srgb, var(--sys-color-success) 35%, var(--sys-color-outline-variant));
  background: var(--sys-color-success-container);
}

.commerce-page[data-design-account] .commerce-result.is-failed {
  border-color: color-mix(in srgb, var(--sys-color-error) 35%, var(--sys-color-outline-variant));
  background: var(--sys-color-error-container);
}

.learning-public-page[data-design-learning] .page-hero,
.learning-player-page[data-design-learning="player"] .learning-player-header {
  background:
    radial-gradient(circle at 12% 20%, rgb(44 119 114 / 0.22), transparent 28rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.learning-public-page[data-design-learning] .page-hero :is(.type-h1, .page-intro, .interior-kicker),
.learning-player-page[data-design-learning="player"] .learning-player-header :is(h1, p, a) {
  color: inherit;
}

.learning-public-page[data-design-learning] :is(
    .offline-course-card,
    .offline-course-cover,
    .offline-course-preview-card,
    .offline-course-price-card,
    .related-offline-card
  ),
.learning-player-page[data-design-learning="player"] :is(
    .learning-video-shell,
    .learning-text-lesson,
    .learning-player-locked,
    .learning-curriculum-sidebar
  ) {
  border-radius: var(--reference-panel-radius);
}

.learning-public-page[data-design-learning] .offline-course-price-card {
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
  background: var(--sys-color-surface);
}

.learning-player-page[data-design-learning="player"] .learning-video-stage {
  border-radius: var(--sys-shape-large);
}

.public-page[data-design-public]:not([data-design-public="contact"]) > .page-hero,
.static-page[data-design-public] > .page-hero {
  padding-block: clamp(2.75rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 10% 10%, rgb(44 119 114 / 0.09), transparent 25rem),
    linear-gradient(145deg, var(--sys-color-background), var(--sys-color-surface-container-low));
}

.public-page[data-design-public]:not([data-design-public="contact"]) .interior-hero-aside {
  border: 0;
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
  border-radius: var(--reference-panel-radius);
  background: var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.public-page[data-design-public]:not([data-design-public="contact"]) .interior-hero-aside :is(strong, p, span) {
  color: inherit;
}

.public-page[data-design-public] :is(.listing-section, .detail-content-section, .search-results-section),
.static-page[data-design-public] .static-page-reading-section {
  background: var(--sys-color-background);
}

.public-page[data-design-public] :is(.card, .gallery-card, .search-result-group, .content-filters) {
  border-radius: var(--reference-panel-radius);
}

.static-page[data-design-public="about"] .static-page-hero {
  background:
    radial-gradient(circle at 12% 18%, rgb(44 119 114 / 0.28), transparent 30rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.static-page[data-design-public="about"] .static-page-hero :is(
    .type-h1,
    .page-intro,
    .interior-kicker,
    .breadcrumb,
    .breadcrumb a
  ) {
  color: inherit;
}

.static-page[data-design-public="about"] .static-page-content {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 0;
  border-inline-start: 0.3rem solid var(--sys-color-tertiary);
  border-radius: var(--reference-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.static-page[data-design-public="about"] .static-page-content > p:first-child {
  color: var(--sys-color-primary);
  font-size: var(--sys-type-body-large-size);
  line-height: 2;
}

@media (min-width: 64rem) {
  .commerce-page[data-design-account="checkout"] .commerce-summary,
  .learning-public-page[data-design-learning="offline-detail"] .offline-course-price-card {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 1.25rem);
  }
}

@media (max-width: 53.75rem) {
  .js .account-nav-toggle {
    display: flex;
    width: 100%;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--sys-shape-large);
    background: var(--sys-color-surface);
    color: var(--sys-color-primary);
    text-align: start;
  }

  .account-nav-toggle span {
    display: grid;
  }

  .account-nav-toggle small {
    color: var(--sys-color-on-surface-variant);
  }

  .js .account-nav-drawer {
    position: fixed;
    z-index: calc(var(--z-overlay) + 1);
    inset-block: 0;
    inset-inline-start: 0;
    width: min(90vw, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    background: var(--sys-color-surface);
    box-shadow: var(--sys-elevation-level-3);
    visibility: hidden;
    pointer-events: none;
    transform: translateX(110%);
    transition: transform var(--sys-motion-duration-medium) var(--sys-motion-easing-emphasized);
  }

  .js .account-nav-drawer[data-open] {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .js .account-nav-drawer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--sys-color-outline-variant);
  }

  .account-nav-drawer-heading > div {
    display: grid;
  }

  .account-nav-drawer-heading span {
    color: var(--sys-color-on-surface-variant);
    font-size: var(--sys-type-body-small-size);
  }

  .js .account-nav-drawer .account-nav {
    display: grid;
    grid-template-columns: 1fr;
    margin-block-start: 1rem;
    padding: 0;
    border: 0;
  }

  .js .account-nav-scrim {
    position: fixed;
    z-index: var(--z-overlay);
    inset: 0;
    display: block;
    visibility: hidden;
    border: 0;
    background: rgb(7 27 45 / 0.58);
    opacity: 0;
    transition: opacity var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
  }

  .js .account-nav-scrim[data-open] {
    visibility: visible;
    opacity: 1;
  }

  html.account-navigation-open,
  body.account-navigation-open {
    overflow: hidden;
  }
}

@media (max-width: 47.999rem) {
  .courses-catalog-hero,
  .course-detail-hero,
  .contact-hero {
    padding-block: 2.75rem;
  }

  .courses-catalog-hero .type-h1,
  .course-detail-hero .type-h1,
  .contact-hero .type-h1 {
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .courses-catalog-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .courses-catalog-steps li {
    min-width: 0;
    padding: 0.85rem 0.55rem;
    text-align: center;
  }

  .courses-catalog-steps li + li {
    border-block-start: 0;
    border-inline-start: 1px solid var(--sys-color-outline-variant);
  }

  .courses-catalog-steps li > span {
    margin-inline: auto;
  }

  .courses-catalog-steps small {
    display: none;
  }

  .course-detail-hero .course-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-detail-hero .course-facts > div {
    padding-block: 0.7rem;
  }

  .course-detail-visual {
    order: -1;
    aspect-ratio: 16 / 9;
    max-height: 15rem;
  }

  .contact-form-index {
    position: static;
    padding-block: 1.25rem;
  }

  .contact-form-index > .container-wide {
    display: grid;
  }

  .contact-form-index nav {
    display: flex;
    scroll-snap-type: inline mandatory;
  }

  .contact-form-index [role="tab"] {
    flex: 0 0 min(78vw, 16rem);
    scroll-snap-align: start;
  }

  [data-contact-panel] > .container {
    width: min(calc(100% - 2rem), var(--content-max));
  }

  .account-page {
    padding-block: 1.5rem 3rem;
    background:
      linear-gradient(180deg, var(--sys-color-surface-container-low) 0 11rem, transparent 11rem),
      var(--sys-color-background);
  }

  .account-heading {
    gap: 0.45rem;
    margin-block-end: 1rem;
  }

  .account-heading > p {
    font-size: 0.95rem;
  }

  .account-heading .type-h1,
  .public-page[data-design-public] .page-hero .type-h1,
  .static-page[data-design-public] .page-hero .type-h1,
  .learning-public-page[data-design-learning] .page-hero .type-h1 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .auth-page[data-design-account] {
    padding-block: 1.25rem 2.5rem;
  }

  .auth-page[data-design-account] :is(.auth-context, .auth-card) {
    padding: 1.25rem;
    border-radius: var(--reference-panel-radius);
  }

  .public-page[data-design-public]:not([data-design-public="contact"]) > .page-hero,
  .static-page[data-design-public] > .page-hero,
  .learning-public-page[data-design-learning] > .page-hero {
    padding-block: 2.25rem;
  }

  .public-page[data-design-public]:not([data-design-public="contact"]) .interior-hero-aside {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 1rem;
  }

  .public-page[data-design-public]:not([data-design-public="contact"]) .interior-hero-aside > p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--sys-type-body-small-size);
  }

  .account-page[data-design-account] :is(
      .account-summary,
      .account-summary-primary,
      .account-security,
      .account-form,
      .notification-card,
      .ticket-summary,
      .empty-state
    ),
  .commerce-page[data-design-account] :is(.commerce-panel, .commerce-order-card, .commerce-result) {
    padding: 1rem;
  }

  .commerce-page[data-design-account] .commerce-items li,
  .commerce-page[data-design-account] .commerce-order-card {
    align-items: stretch;
  }

  .learning-player-page[data-design-learning="player"] .learning-curriculum-sidebar {
    max-height: min(22rem, 52svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .learning-player-page[data-design-learning="player"] .learning-curriculum-sidebar > h2 {
    position: sticky;
    z-index: 1;
    inset-block-start: -1rem;
    margin: -1rem -1rem 0.75rem;
    padding: 1rem;
    border-block-end: 1px solid var(--sys-color-outline-variant);
    background: var(--sys-color-surface);
  }

  .static-page[data-design-public="about"] .static-page-content {
    padding: 1.25rem;
    border-inline-start-width: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-age-paths > a,
  .course-card,
  .account-nav-drawer,
  .account-nav-scrim {
    transition: none;
  }
}

/* Visual replacement — Phase 3 homepage */
.home-page {
  --home-section-space: clamp(4rem, 8vw, 6rem);
  --home-panel-radius: 1.5rem;
  --home-feature-radius: 1.75rem;
  --home-hero-action: var(--ref-color-copper-600);
  --home-hero-action-hover: var(--ref-color-copper-700);
  position: relative;
  overflow: clip;
  isolation: isolate;
  background-color: var(--ref-color-ivory);
  background-image: var(--site-page-background-image);
  color: var(--sys-color-on-background);
}

.home-scroll-video {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: none;
  width: 100vw;
  height: 100vh;
  border: 0;
  background: var(--ref-color-navy-950);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.home-page[data-home-scroll-state="active"] {
  background-color: var(--ref-color-navy-950);
  background-image: none;
}

.home-page[data-home-scroll-state="active"] .home-scroll-video {
  display: block;
}

.home-scroll-content {
  position: relative;
  z-index: 1;
  padding-block-end: clamp(3rem, 7vw, 5rem);
  background: rgb(252 250 245 / 0.56);
  backdrop-filter: blur(0.5px);
}

.home-page[data-home-scroll-state="static"] {
  background-color: var(--ref-color-ivory);
  background-image: var(--site-page-background-image);
}

.home-page[data-home-scroll-state="static"] .home-scroll-video {
  display: none;
}

.home-page[data-home-scroll-state="static"] .home-scroll-content {
  background: rgb(252 250 245 / 0.52);
  backdrop-filter: none;
}

.home-page :is(.section, .section-compact) {
  padding-block: var(--home-section-space);
}

.home-page .section-alt {
  background: rgb(252 250 245 / 0.72);
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-block-end: 1px solid rgb(7 27 45 / 0.08);
  background: linear-gradient(to bottom, rgb(252 250 245 / 0.78), rgb(252 250 245 / 0.46));
}

.home-hero::before {
  position: absolute;
  inset: -18rem auto auto -14rem;
  width: 34rem;
  height: 34rem;
  border: 1.5rem solid rgb(169 79 35 / 0.07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.home-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.25rem, 6vw, 4.5rem);
}

.home-hero-grid.has-no-media {
  max-width: 48rem;
}

.home-hero-copy {
  min-width: 0;
}

.home-hero-kicker {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  margin: 0;
  padding-inline: 1rem;
  border: 1px solid var(--ref-color-navy-200);
  border-radius: var(--sys-shape-full);
  background: var(--ref-color-navy-100);
  color: var(--ref-color-navy-800);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
}

.home-hero .type-display {
  max-width: 14ch;
  margin-block-start: 1.25rem;
  color: var(--ref-color-navy-950);
  font-size: clamp(2.125rem, 9.2vw, 3.25rem);
  font-weight: var(--font-weight-black);
  line-height: 1.4;
  text-wrap: balance;
}

.home-hero-description {
  max-width: 38rem;
  margin-block-start: 1rem;
  color: var(--sys-color-on-surface-variant);
  font-size: clamp(0.9375rem, 2vw, 1rem);
  line-height: 2;
}

.home-hero-actions,
.home-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

.home-hero-primary.btn {
  --button-motion-fill: var(--home-hero-action-hover);
  --button-motion-label: var(--sys-color-on-tertiary);
  border: 2px solid var(--home-hero-action);
  border-radius: 1rem;
  background: var(--home-hero-action);
  color: var(--sys-color-on-tertiary);
  box-shadow: none;
  font-weight: var(--font-weight-bold);
}

.home-secondary-link,
.home-light-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: var(--font-weight-semibold);
}

.home-secondary-link {
  padding-inline: 1.25rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
  color: var(--ref-color-navy-950);
}

.home-secondary-link .ui-icon,
.home-light-link .ui-icon,
.home-language-heading .ui-icon {
  width: 1rem;
  height: 1rem;
}

.home-hero-languages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.home-hero-languages a {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
  color: var(--ref-color-navy-950);
  box-shadow: var(--sys-elevation-level-0);
}

.home-language-flag {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: 0.55rem;
  background: var(--ref-color-navy-100);
  color: var(--ref-color-navy-800);
}

.home-language-flag :is(img, .ui-icon) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-language-flag .ui-icon {
  width: 1rem;
  height: 1rem;
}

.home-hero-languages a > span:last-child {
  min-width: 0;
}

.home-hero-languages :is(strong, bdi) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-languages strong {
  font-size: 0.8125rem;
}

.home-hero-languages bdi {
  margin-block-start: 0.1rem;
  color: var(--sys-color-on-surface-variant);
  font-size: 0.625rem;
}

.home-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.75rem 0 0;
  padding: 1rem 0 0;
  border-block-start: 1px solid var(--sys-color-outline-variant);
  list-style: none;
}

.home-hero-facts li {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
  padding: 0.45rem 0.75rem;
  border-inline-start: 1px solid var(--sys-color-outline-variant);
}

.home-hero-facts li:first-child {
  border-inline-start: 0;
}

.home-hero-facts strong {
  color: var(--ref-color-navy-950);
  font-size: 0.8125rem;
}

.home-hero-facts span {
  overflow: hidden;
  color: var(--sys-color-on-surface-variant);
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-media {
  position: relative;
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  overflow: hidden;
  border: 0.5rem solid var(--sys-color-surface);
  border-radius: var(--home-feature-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--shadow-pop);
  aspect-ratio: 4 / 3;
}

.home-hero-image,
.home-hero-image img {
  width: 100%;
  height: 100%;
}

.home-hero-image {
  overflow: hidden;
  border-radius: calc(var(--home-feature-radius) - 0.5rem);
}

.home-hero-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(7 27 45 / 0.52), transparent 48%);
  content: "";
  pointer-events: none;
}

.home-hero-image img {
  object-fit: cover;
  animation: home-kenburns 20s var(--sys-motion-easing-standard) infinite alternate;
}

.home-hero-media figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 1rem 1rem;
  display: grid;
  gap: 0.1rem;
  color: var(--ref-color-ivory);
}

.home-hero-media figcaption strong {
  font-size: 0.875rem;
}

.home-hero-media figcaption span {
  overflow: hidden;
  max-width: 32ch;
  color: var(--ref-color-navy-200);
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes home-kenburns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.06) translateY(-1%); }
}

.home-language-ticker {
  position: relative;
  overflow: hidden;
  padding-block: 0.875rem;
  border-block: 1px solid var(--ref-color-navy-800);
  background-color: var(--ref-color-navy-950);
  color: var(--ref-color-navy-200);
}

.home-language-ticker-track {
  display: flex;
  width: max-content;
  direction: rtl;
  animation: home-ticker 44s linear infinite;
}

.home-language-ticker-track > div {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 0.75rem;
}

.home-language-ticker :is(a, span) {
  color: inherit;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.home-language-ticker-track > div > :is(span[aria-hidden], i) {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--ref-color-copper-500);
}

@keyframes home-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(25%); }
}

.home-course-finder,
.home-content-section,
.home-updates,
.home-faq {
  padding-block: var(--home-section-space);
}

.home-section-heading,
.home-page .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-block-end: 2rem;
}

.home-section-heading > div,
.home-page .section-heading > div {
  max-width: 45rem;
}

.home-section-heading > p {
  max-width: 36rem;
  margin: 0;
  color: var(--sys-color-on-surface-variant);
  line-height: 1.9;
}

.home-page :is(.home-section-heading, .section-heading) .type-h2 {
  margin-block-start: 0.35rem;
  color: var(--ref-color-navy-950);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  line-height: 1.45;
  text-wrap: balance;
}

.home-finder-layout {
  display: grid;
  gap: 1.25rem;
}

.home-age-paths,
.home-finder-tools {
  min-width: 0;
}

.home-subheading,
.home-language-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-subheading {
  margin-block-end: 1rem;
}

.home-subheading :is(h3, h4),
.home-language-heading h4 {
  margin: 0;
  color: var(--ref-color-navy-950);
}

.home-subheading > span {
  color: var(--ref-color-copper-700);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.home-age-grid {
  display: grid;
  gap: 0.75rem;
}

.home-age-grid > a {
  position: relative;
  display: grid;
  min-height: 8.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--home-panel-radius);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.94), rgb(237 245 244 / 0.86)),
    var(--sys-color-surface);
  color: var(--ref-color-navy-950);
  box-shadow: var(--sys-elevation-level-0);
}

.home-age-grid > a::before {
  position: absolute;
  inset: -3rem auto auto -3rem;
  width: 9rem;
  height: 9rem;
  border: 1.2rem solid rgb(31 98 95 / 0.07);
  border-radius: 50%;
  content: "";
}

.home-age-index {
  color: var(--ref-color-copper-700);
  font-size: 0.75rem;
  font-weight: var(--font-weight-black);
}

.home-age-grid h4 {
  margin: 0;
  font-size: 1.15rem;
}

.home-age-grid p {
  margin: 0.25rem 0 0;
  color: var(--sys-color-on-surface-variant);
  font-size: 0.8125rem;
}

.home-age-grid .ui-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ref-color-copper-700);
}

.home-finder-tools {
  align-self: start;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--home-panel-radius);
  background: rgb(255 255 255 / 0.9);
  box-shadow: var(--shadow-lift);
}

.home-page .home-search {
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--sys-color-outline-variant);
}

.home-page .home-search label {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--ref-color-navy-950);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
}

.home-page .home-search-control {
  display: grid;
  gap: 0.625rem;
}

.home-page .home-search-control input[type="search"] {
  min-width: 0;
  min-height: 3.25rem;
  border-color: var(--sys-color-outline-variant);
  background: var(--sys-color-surface);
}

.home-page .home-search-suggestions {
  margin-block-start: 0.75rem;
}

.home-page .home-search-suggestions > p {
  margin: 0 0 0.4rem;
  color: var(--sys-color-on-surface-variant);
  font-size: 0.75rem;
}

.home-page .home-search-suggestions > div {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-block-end: 0.35rem;
  scrollbar-width: thin;
}

.home-page .home-search-suggestions a {
  display: inline-flex;
  min-height: var(--tap-target);
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-full);
  background: var(--ref-color-copper-50);
  color: var(--ref-color-navy-950);
}

.home-page .home-search-suggestions a small {
  color: var(--ref-color-copper-700);
}

.home-language-paths {
  margin-block-start: 1.25rem;
}

.home-language-heading a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  gap: 0.35rem;
  color: var(--ref-color-copper-700);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
}

.home-language-paths ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.home-language-paths li a {
  display: grid;
  min-height: 3.25rem;
  align-content: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  color: var(--ref-color-navy-950);
}

.home-language-paths bdi {
  color: var(--sys-color-on-surface-variant);
  font-size: 0.6875rem;
}

.home-trust-rail {
  border-block: 1px solid rgb(7 27 45 / 0.12);
  background: rgb(255 255 255 / 0.7);
}

.home-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-trust-grid > div {
  display: grid;
  min-width: 0;
  min-height: 7rem;
  align-content: center;
  gap: 0.1rem;
  padding: 1rem;
  border-block-start: 1px solid var(--sys-color-outline-variant);
  border-inline-start: 1px solid var(--sys-color-outline-variant);
}

.home-trust-grid > div:nth-child(-n + 2) {
  border-block-start: 0;
}

.home-trust-grid > div:nth-child(odd) {
  border-inline-start: 0;
}

.home-trust-grid :is(strong, .ui-icon) {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ref-color-copper-600);
  font-size: 1.25rem;
}

.home-trust-grid span {
  color: var(--ref-color-navy-950);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
}

.home-trust-grid small,
.home-trust-grid small a {
  color: var(--sys-color-on-surface-variant);
  font-size: 0.6875rem;
}

.home-featured-courses,
.home-teachers,
.home-updates {
  background: rgb(252 250 245 / 0.66);
}

.home-page .home-card-grid {
  gap: 1rem;
}

.home-page .home-card-grid .card,
.home-teacher-list .card-person {
  height: 100%;
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--home-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-0);
}

.home-method {
  background-color: rgb(7 27 45 / 0.93);
  color: var(--ref-color-ivory);
}

.home-method .home-section-heading :is(.eyebrow, .type-h2),
.home-method .home-section-heading > p {
  color: inherit;
}

.home-method .home-section-heading .eyebrow {
  color: var(--ref-color-copper-400);
}

.home-method-layout,
.home-teachers-layout,
.home-journal-layout,
.home-story-layout,
.home-experiences-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
}

.home-method-layout.has-no-media,
.home-teachers-layout.has-no-media,
.home-journal-layout.has-no-media {
  grid-template-columns: minmax(0, 1fr);
}

.home-method-media,
.home-teachers-media,
.home-journal-media {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--home-feature-radius);
  background: var(--ref-color-navy-900);
  box-shadow: var(--shadow-lift);
}

.home-teachers-media,
.home-journal-media {
  border-color: var(--sys-color-outline-variant);
  background: var(--sys-color-surface);
}

.home-method-media img,
.home-teachers-media img,
.home-journal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-method-media figcaption,
.home-teachers-media figcaption {
  position: absolute;
  inset: auto 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: var(--sys-shape-large);
  background: rgb(7 27 45 / 0.8);
  color: var(--ref-color-ivory);
  font-size: 0.75rem;
  backdrop-filter: blur(0.5rem);
}

.home-method-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-method-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--ref-color-navy-800);
  border-radius: var(--sys-shape-extra-large);
  background: rgb(13 39 61 / 0.76);
}

.home-method-list li + li {
  margin-block-start: 0.75rem;
}

.home-method-list li > span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--sys-shape-large);
  background: var(--ref-color-navy-800);
  color: var(--ref-color-copper-400);
  font-weight: var(--font-weight-black);
}

.home-method-list :is(h3, p),
.home-method-note :is(strong, p) {
  margin: 0;
  color: inherit;
}

.home-method-list h3 {
  font-size: 1rem;
}

.home-method-list p {
  margin-block-start: 0.35rem;
  color: var(--ref-color-navy-200);
  font-size: 0.8125rem;
  line-height: 1.8;
}

.home-method-note {
  margin-block-start: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--ref-color-copper-600);
  border-inline-start: 0.25rem solid var(--ref-color-copper-400);
  border-radius: var(--sys-shape-extra-large);
  background: var(--sys-color-secondary-container);
  color: var(--sys-color-on-secondary-container);
}

.home-method-note p {
  margin-block-start: 0.35rem;
  line-height: 1.8;
}

.home-method-note .text-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  margin-block-start: 0.65rem;
}

.home-story,
.home-experiences {
  background-color: rgb(23 80 77 / 0.94);
  color: var(--ref-color-ivory);
}

.home-story :is(.eyebrow, .type-h2, p, a),
.home-experiences :is(.eyebrow, .type-h2, p) {
  color: inherit;
}

.home-story-copy > p:last-of-type,
.home-experiences-intro > p:last-child {
  max-width: 42rem;
  color: var(--ref-color-navy-200);
  line-height: 1.9;
}

.home-light-link {
  margin-block-start: 1rem;
  color: var(--ref-color-ivory);
}

.home-story-points,
.home-teacher-list {
  display: grid;
  gap: 0.75rem;
}

.home-story-points article {
  padding: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: var(--sys-shape-extra-large);
  background: rgb(7 27 45 / 0.22);
}

.home-story-points :is(span, strong, p) {
  display: block;
  margin: 0;
}

.home-story-points span {
  color: var(--ref-color-copper-400);
  font-size: 0.75rem;
}

.home-story-points strong {
  margin-block-start: 0.35rem;
}

.home-story-points p {
  margin-block-start: 0.45rem;
  color: var(--ref-color-navy-200);
  font-size: 0.8125rem;
  line-height: 1.8;
}

.home-statistics .home-section-heading {
  margin-block-end: 1.5rem;
}

.home-statistics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: var(--home-feature-radius);
  background: linear-gradient(to left, var(--ref-color-navy-900), var(--ref-color-navy-950));
  color: var(--ref-color-ivory);
  box-shadow: var(--shadow-lift);
}

.home-statistics-grid .stat-card {
  min-height: 8.5rem;
  padding: 1.5rem;
  border: 0;
  border-block-start: 1px solid var(--ref-color-navy-800);
  border-inline-start: 1px solid var(--ref-color-navy-800);
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.home-statistics-grid .stat-card:nth-child(-n + 2) {
  border-block-start: 0;
}

.home-statistics-grid .stat-card:nth-child(odd) {
  border-inline-start: 0;
}

.home-statistics-grid .stat-card strong {
  color: var(--ref-color-ivory);
  font-size: clamp(2rem, 6vw, 2.75rem);
}

.home-statistics-grid .stat-card span {
  color: var(--ref-color-navy-200);
}

.home-experiences .testimonial-grid {
  display: grid;
  gap: 0.75rem;
}

.home-experiences .testimonial-card,
.home-empty-dark {
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--sys-shape-extra-large);
  background: rgb(7 27 45 / 0.24);
  color: var(--ref-color-ivory);
}

.home-experiences .testimonial-card :is(blockquote, strong, span, time) {
  color: inherit;
}

.home-updates-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--home-section-space);
}

.home-reference-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(11rem, 1fr);
  gap: 0.75rem;
}

.home-reference-gallery figure,
.home-managed-gallery .gallery-card {
  position: relative;
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-extra-large);
  background: var(--sys-color-surface);
}

.home-reference-gallery-main {
  grid-column: 1 / -1;
  min-height: 18rem;
}

.home-reference-gallery img,
.home-managed-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sys-motion-duration-medium) var(--sys-motion-easing-standard);
}

.home-reference-gallery figcaption,
.home-managed-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgb(7 27 45 / 0.88));
  color: var(--ref-color-ivory);
  font-size: 0.8125rem;
}

.home-managed-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
  margin-block-start: 0.75rem;
}

.home-journal-media {
  min-height: 20rem;
}

.home-journal-layout .home-article-grid {
  grid-template-columns: minmax(0, 1fr);
}

.home-faq {
  background: rgb(237 245 244 / 0.72);
}

.home-faq-grid {
  display: grid;
  gap: 2rem;
}

.home-faq-intro .type-h2 {
  margin-block-start: 0.35rem;
  color: var(--ref-color-navy-950);
}

.home-faq-intro > p:not(.eyebrow) {
  color: var(--sys-color-on-surface-variant);
  line-height: 1.9;
}

.home-faq-intro .text-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  margin-block-start: 0.75rem;
}

.home-page .home-faq .faq-item {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-extra-large);
  background: rgb(255 255 255 / 0.9);
}

.home-final-cta {
  padding: var(--home-section-space) 0 0;
  background: transparent;
}

.home-final-cta-inner {
  position: relative;
  display: grid;
  gap: 1.25rem;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--home-feature-radius);
  background: var(--ref-color-copper-600);
  color: var(--ref-color-ivory);
}

.home-final-cta-inner::before,
.home-final-cta-inner::after {
  position: absolute;
  width: 16rem;
  height: 16rem;
  border: 1.4rem solid rgb(252 250 245 / 0.1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.home-final-cta-inner::before {
  inset: -7rem auto auto -6rem;
}

.home-final-cta-inner::after {
  inset: auto -7rem -8rem auto;
}

.home-final-cta-inner > * {
  position: relative;
  z-index: 1;
}

.home-final-cta .type-h2,
.home-final-cta p,
.home-final-cta .eyebrow {
  color: inherit;
}

.home-final-cta p:not(.eyebrow) {
  max-width: 42rem;
  color: var(--ref-color-copper-100);
  line-height: 1.9;
}

.home-final-cta-media {
  overflow: hidden;
  border-radius: var(--sys-shape-extra-large);
  aspect-ratio: 16 / 9;
}

.home-final-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-final-cta-actions {
  align-items: center;
  margin: 0;
}

.home-final-cta-actions .btn {
  background: var(--ref-color-navy-950);
  color: var(--ref-color-ivory);
}

.home-inline-empty,
.home-empty-dark {
  margin: 0;
  padding: 1.25rem;
  border-radius: var(--sys-shape-extra-large);
  line-height: 1.8;
}

.home-inline-empty {
  border: 1px dashed var(--sys-color-outline);
  background: rgb(255 255 255 / 0.48);
  color: var(--sys-color-on-surface-variant);
}

.js .home-reveal-item {
  opacity: 0;
  transform: translateY(0.875rem);
  transition:
    opacity 380ms var(--sys-motion-easing-emphasized),
    transform 380ms var(--sys-motion-easing-emphasized);
}

.js .home-reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 40rem) {
  .home-hero-languages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-age-grid,
  .home-story-points,
  .home-teacher-list,
  .home-experiences .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .home-search-control {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .home-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-trust-grid > div {
    border-block-start: 0;
  }

  .home-trust-grid > div:nth-child(odd) {
    border-inline-start: 1px solid var(--sys-color-outline-variant);
  }

  .home-trust-grid > div:first-child {
    border-inline-start: 0;
  }

  .home-reference-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 12rem;
  }

  .home-reference-gallery-main {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 24.75rem;
  }
}

@media (min-width: 64rem) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .home-hero .type-display {
    font-size: clamp(2.75rem, 4.2vw, 3.25rem);
  }

  .home-finder-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.85fr);
  }

  .home-age-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-age-grid > a {
    min-height: 18rem;
    align-content: end;
    align-items: end;
  }

  .home-method-layout,
  .home-teachers-layout,
  .home-journal-layout,
  .home-story-layout,
  .home-experiences-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  }

  .home-method-media,
  .home-teachers-media,
  .home-journal-media {
    min-height: 30rem;
  }

  .home-method-content {
    align-self: start;
  }

  .home-story-copy,
  .home-experiences-intro,
  .home-faq-intro {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 2rem);
    align-self: start;
  }

  .home-statistics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-statistics-grid .stat-card {
    border-block-start: 0;
  }

  .home-statistics-grid .stat-card:nth-child(odd) {
    border-inline-start: 1px solid var(--ref-color-navy-800);
  }

  .home-statistics-grid .stat-card:first-child {
    border-inline-start: 0;
  }

  .home-faq-grid {
    grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
  }

  .home-final-cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .home-final-cta-inner:has(.home-final-cta-media) {
    grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1fr) auto;
  }
}

@media (max-width: 63.999rem) {
  .home-page {
    background-color: var(--ref-color-ivory);
    background-image: var(--site-page-background-image);
  }

  .home-scroll-video {
    display: none;
  }

  .home-scroll-content {
    background: rgb(252 250 245 / 0.34);
    backdrop-filter: none;
  }
}

@media (max-width: 40rem) {
  .home-hero {
    background: linear-gradient(to bottom, rgb(226 235 242 / 0.72), rgb(252 250 245 / 0.38));
  }

  .home-hero-image img,
  .home-language-ticker-track {
    animation: none;
  }

  .home-hero-actions > *,
  .home-final-cta-actions > * {
    width: 100%;
  }

  .home-hero-facts li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .home-language-ticker-track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .home-language-ticker-track > div {
    scroll-snap-align: start;
  }

  .home-language-ticker-track > div[aria-hidden="true"] {
    display: none;
  }

  .home-reference-gallery {
    grid-template-columns: minmax(78vw, 20rem);
    grid-template-rows: 15rem;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78vw, 20rem);
    overflow-x: auto;
    padding-block-end: 0.75rem;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
  }

  .home-reference-gallery figure,
  .home-reference-gallery-main {
    grid-column: auto;
    grid-row: auto;
    min-height: 15rem;
    scroll-snap-align: start;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 40.0625rem) {
  .home-hero-primary.btn:hover {
    border-color: var(--home-hero-action-hover);
    border-radius: 0.375rem;
    box-shadow: 4px 4px 0 #000;
    color: var(--sys-color-on-tertiary);
    transform: translate(-0.25rem, -0.25rem);
  }

  .home-hero-primary.btn:active {
    border-radius: 1rem;
    box-shadow: none;
    transform: translate(0, 0);
  }

  .home-hero-languages a,
  .home-age-grid > a,
  .home-page .home-card-grid .card,
  .home-teacher-list .card-person {
    transition:
      transform var(--sys-motion-duration-medium) var(--sys-motion-easing-standard),
      border-color var(--sys-motion-duration-medium) var(--sys-motion-easing-standard),
      box-shadow var(--sys-motion-duration-medium) var(--sys-motion-easing-standard);
  }

  .home-hero-languages a:hover,
  .home-age-grid > a:hover,
  .home-page .home-card-grid .card:hover,
  .home-teacher-list .card-person:hover {
    border-color: var(--ref-color-copper-600);
    box-shadow: var(--shadow-lift);
    transform: translateY(-0.1875rem);
  }

  .home-reference-gallery figure:hover img {
    transform: scale(1.04);
  }

  .home-language-ticker:hover .home-language-ticker-track,
  .home-language-ticker:focus-within .home-language-ticker-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-scroll-video {
    display: none;
  }

  .home-page {
    background-color: var(--ref-color-ivory);
    background-image: var(--site-page-background-image);
  }

  .home-scroll-content {
    background: rgb(252 250 245 / 0.52);
    backdrop-filter: none;
  }

  .home-hero-image img,
  .home-language-ticker-track {
    animation: none;
  }

  .js .home-reveal-item,
  .js .home-reveal-item.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-page *,
  .home-page *::before,
  .home-page *::after {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .home-hero-media,
  .home-finder-tools,
  .home-age-grid > a,
  .home-method-list li,
  .home-story-points article,
  .home-statistics-grid,
  .home-final-cta-inner {
    border: 1px solid CanvasText;
  }

  .home-scroll-video {
    display: none;
  }
}

/* Visual replacement — Phase 7 learning and portals */
:is(
    [data-design-learning],
    [data-design-account^="portal-"],
    [data-design-account^="teacher-"]
  ) {
  --learning-operation-border: 1px solid var(--sys-color-outline-variant);
  --learning-operation-radius: var(--sys-shape-extra-large);
  --learning-operation-gap: clamp(0.85rem, 2vw, 1.25rem);
  --learning-operation-section-gap: clamp(2rem, 5vw, 3.5rem);
  color: var(--sys-color-on-surface);
}

:is([data-design-learning], [data-design-account^="portal-"], [data-design-account^="teacher-"])
  :is(button, .btn, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--tap-target);
}

[data-design-learning="offline-list"] .offline-course-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-block-end: var(--learning-operation-border);
  background:
    radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--sys-color-secondary) 12%, transparent), transparent 22rem),
    color-mix(in srgb, var(--sys-color-surface-container-low) 82%, transparent);
}

[data-design-learning="offline-list"] .listing-section {
  padding-block-start: clamp(2.5rem, 6vw, 4.5rem);
}

[data-design-learning="offline-list"] .offline-course-grid {
  gap: 1rem;
}

[data-design-learning="offline-list"] .offline-course-card {
  border: var(--learning-operation-border);
  border-radius: var(--learning-operation-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-0);
}

[data-design-learning="offline-list"] .offline-course-card-visual {
  min-height: 9rem;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--sys-color-secondary) 45%, transparent), transparent 9rem),
    linear-gradient(135deg, var(--sys-color-secondary), var(--sys-color-primary));
}

[data-design-learning="offline-list"] .offline-course-card-visual > span {
  color: var(--sys-color-inverse-on-surface);
}

[data-design-learning="offline-list"] .offline-course-card .card-footer {
  border-block-start-color: var(--sys-color-outline-variant);
}

[data-design-learning="offline-detail"] .offline-course-detail-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-block-end: var(--learning-operation-border);
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--sys-color-tertiary) 10%, transparent), transparent 24rem),
    color-mix(in srgb, var(--sys-color-surface-container-low) 84%, transparent);
}

[data-design-learning="offline-detail"] .offline-course-cover {
  border: 0.45rem solid var(--sys-color-surface);
  border-radius: var(--sys-shape-extra-extra-large);
  background: linear-gradient(145deg, var(--sys-color-secondary), var(--sys-color-primary));
  box-shadow: var(--sys-elevation-level-2);
}

[data-design-learning="offline-detail"] .offline-course-cover-fallback {
  color: var(--sys-color-inverse-on-surface);
}

[data-design-learning="offline-detail"] .offline-course-overview {
  padding-block-start: clamp(2.5rem, 6vw, 4.5rem);
}

[data-design-learning="offline-detail"] .offline-course-section {
  min-width: 0;
}

[data-design-learning="offline-detail"] .offline-course-section + .offline-course-section {
  margin-block-start: var(--learning-operation-section-gap);
  padding-block-start: var(--learning-operation-section-gap);
}

[data-design-learning="offline-detail"] .offline-course-curriculum > li {
  padding: 1rem;
  border: var(--learning-operation-border);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
}

[data-design-learning="offline-detail"] .offline-course-curriculum > li + li {
  margin-block-start: 0.75rem;
  padding-block-start: 1rem;
}

[data-design-learning="offline-detail"] .offline-course-curriculum article > ol li {
  min-height: 3.25rem;
  border: 1px solid transparent;
  background: var(--sys-color-surface-container-low);
}

[data-design-learning="offline-detail"] .offline-course-price-card {
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 0;
  border-block-start: 0.2rem solid var(--sys-color-tertiary);
  border-radius: var(--sys-shape-extra-large);
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--sys-color-secondary) 18%, transparent), transparent 12rem),
    var(--sys-color-inverse-surface);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-learning="offline-detail"] .offline-course-price-card :is(h2, p, legend, label, a:not(.btn)) {
  color: inherit;
}

[data-design-learning="offline-detail"] .offline-course-price-card .eyebrow {
  color: var(--sys-color-tertiary-container);
}

[data-design-learning="offline-detail"] .offline-course-lesson-cart .check-control {
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 22%, transparent);
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 7%, transparent);
}

[data-design-learning="offline-detail"] :is(
    .course-announcement,
    .learning-notification,
    .learning-review-card,
    .learning-comment-card,
    .learning-answer,
    .learning-interaction-form-card
  ) {
  border: var(--learning-operation-border);
  border-radius: var(--sys-shape-large);
  box-shadow: none;
}

[data-design-learning="offline-detail"] .learning-interaction-form-card {
  border-block-start: 0.2rem solid var(--sys-color-secondary);
}

[data-design-learning="player"] {
  min-height: 75vh;
  padding-block-end: clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--sys-color-secondary) 20%, transparent), transparent 28rem),
    var(--sys-color-inverse-surface);
  color: var(--sys-color-inverse-on-surface);
}

[data-design-learning="player"] .learning-player-header {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-block-end: 1px solid color-mix(in srgb, var(--sys-color-inverse-on-surface) 13%, transparent);
  background: transparent;
}

[data-design-learning="player"] .learning-player-header :is(.eyebrow, h1, p, a) {
  color: inherit;
}

[data-design-learning="player"] .learning-player-header .eyebrow {
  color: var(--sys-color-tertiary-container);
}

[data-design-learning="player"] .learning-player-layout {
  gap: clamp(1rem, 3vw, 1.75rem);
  padding-block-start: clamp(1.25rem, 3vw, 2rem);
  padding-block-end: 0;
}

[data-design-learning="player"] :is(.learning-video-shell, .learning-player-locked) {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 15%, transparent);
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 5%, transparent);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: none;
}

[data-design-learning="player"] .learning-video-shell {
  padding: 0;
}

[data-design-learning="player"] .learning-video-stage {
  border-radius: calc(var(--learning-operation-radius) - 1px) calc(var(--learning-operation-radius) - 1px) 0 0;
}

[data-design-learning="player"] .learning-player-controls {
  flex-wrap: wrap;
  margin: 0;
  padding: 0.85rem 1rem;
}

[data-design-learning="player"] .learning-player-controls select {
  width: auto;
  min-width: 6.5rem;
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 25%, transparent);
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 9%, transparent);
  color: inherit;
}

[data-design-learning="player"] .learning-player-message {
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 6%, transparent);
}

[data-design-learning="player"] .learning-text-lesson {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-radius: var(--learning-operation-radius);
  background: var(--sys-color-surface);
  color: var(--sys-color-on-surface);
}

[data-design-learning="player"] :is(
    .learning-completion-panel,
    .learning-bookmark-panel,
    .learning-note-panel,
    .learning-lesson-discussion
  ) {
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 15%, transparent);
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 6%, transparent);
  color: var(--sys-color-inverse-on-surface);
}

[data-design-learning="player"] :is(
    .learning-completion-panel,
    .learning-bookmark-panel,
    .learning-note-panel,
    .learning-lesson-discussion
  ) :is(h2, h3, h4, p, label) {
  color: inherit;
}

[data-design-learning="player"] .learning-note-form textarea,
[data-design-learning="player"] .learning-interaction-form-card {
  background: var(--sys-color-surface);
  color: var(--sys-color-on-surface);
}

[data-design-learning="player"] .learning-progress-status {
  padding: 0.75rem 1rem;
  border-inline-start: 0.2rem solid var(--sys-color-secondary-container);
  background: color-mix(in srgb, var(--sys-color-secondary) 14%, transparent);
}

[data-design-learning="player"] .learning-curriculum-sidebar {
  max-height: calc(100vh - var(--header-height) - 3rem);
  overflow-y: auto;
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 15%, transparent);
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 6%, transparent);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: none;
  scrollbar-color: var(--sys-color-secondary-container) transparent;
}

[data-design-learning="player"] .learning-curriculum-sidebar h2 {
  padding-block-end: 0.8rem;
  border-block-end: 1px solid color-mix(in srgb, var(--sys-color-inverse-on-surface) 14%, transparent);
  color: inherit;
}

[data-design-learning="player"] .learning-curriculum-sidebar li li {
  min-height: 2.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--sys-shape-medium);
}

[data-design-learning="player"] .learning-curriculum-sidebar .is-current {
  background: var(--sys-color-tertiary);
  color: var(--sys-color-on-tertiary);
}

[data-design-learning="player"] .learning-curriculum-sidebar .is-current a {
  color: inherit;
}

[data-design-account^="portal-"] ,
[data-design-account^="teacher-"] {
  --account-page-space: clamp(2.25rem, 5vw, 4rem);
  --account-panel-radius: var(--sys-shape-extra-large);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-heading {
  padding-block-end: 1rem;
  border-block-end: var(--learning-operation-border);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-heading .type-h1 {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) :is(
    .account-summary,
    .account-security,
    .account-summary-primary,
    .surface-panel
  ) {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-overview-grid {
  gap: var(--learning-operation-gap);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-section-heading {
  gap: 0.75rem;
  margin-block-end: 1rem;
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-section-heading .type-h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-section-heading .type-h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary-grid {
  gap: 0;
  overflow: hidden;
  border: var(--learning-operation-border);
  border-radius: var(--sys-shape-large);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary-grid > div {
  min-height: 4.5rem;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-block-end: var(--learning-operation-border);
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary-grid > div:last-child {
  border-block-end: 0;
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-action-list {
  gap: 0.35rem;
}

:is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-action-list a {
  min-height: 3.25rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
}

[data-design-account^="portal-"] .account-nav {
  background: color-mix(in srgb, var(--sys-color-surface) 92%, transparent);
}

[data-design-account^="portal-"] .account-nav a[aria-current="page"] {
  border-inline-start: 0.2rem solid var(--sys-color-tertiary);
  background: var(--sys-color-tertiary-container);
}

[data-design-account^="portal-"] .account-security {
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--sys-color-secondary) 22%, transparent), transparent 14rem),
    var(--sys-color-inverse-surface);
}

[data-design-account^="portal-"] progress {
  overflow: hidden;
  height: 0.55rem;
  border: 0;
  border-radius: var(--sys-shape-full);
  background: var(--sys-color-surface-container-high);
  accent-color: var(--sys-color-secondary);
}

[data-design-account^="teacher-"] .account-nav {
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 13%, transparent);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--sys-color-secondary) 20%, transparent), transparent 13rem),
    var(--sys-color-inverse-surface);
  color: var(--sys-color-inverse-on-surface);
}

[data-design-account^="teacher-"] .account-nav a {
  color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 76%, transparent);
}

[data-design-account^="teacher-"] .account-nav a[aria-current="page"] {
  background: var(--sys-color-tertiary);
  color: var(--sys-color-on-tertiary);
}

[data-design-account^="teacher-"] .account-nav a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 9%, transparent);
  color: var(--sys-color-inverse-on-surface);
}

[data-design-account^="teacher-"] .account-summary-primary {
  border-block-start-color: var(--sys-color-secondary);
}

[data-design-account^="teacher-"] .form-demo {
  gap: 0.9rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: var(--learning-operation-border);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface-container-low);
}

[data-design-account^="teacher-"] .form-grid {
  gap: 0.75rem;
}

[data-design-account^="teacher-"] :is(input, select, textarea) {
  background: var(--sys-color-surface);
}

[data-design-account^="teacher-"] .account-actions {
  gap: 0.55rem;
}

[data-design-account^="teacher-"] table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sys-color-surface);
  font-size: var(--sys-type-body-small-size);
}

[data-design-account^="teacher-"] :is(th, td) {
  padding: 0.75rem;
  border-block-end: var(--learning-operation-border);
  text-align: start;
  vertical-align: top;
}

[data-design-account^="teacher-"] th {
  background: var(--sys-color-surface-container-low);
  color: var(--sys-color-on-surface-variant);
  font-weight: var(--ref-type-weight-bold);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  [data-design-learning="offline-list"] .offline-course-card,
  [data-design-learning="offline-detail"] .offline-course-curriculum > li,
  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary {
    transition:
      border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
      box-shadow var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
      transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
  }

  [data-design-learning="offline-list"] .offline-course-card:hover,
  [data-design-learning="offline-detail"] .offline-course-curriculum > li:hover,
  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary:hover {
    border-color: var(--sys-color-tertiary);
    box-shadow: var(--sys-elevation-level-1);
    transform: translateY(-0.15rem);
  }
}

@media (min-width: 48rem) {
  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary-grid > div {
    border-block-end: var(--learning-operation-border);
    border-inline-start: var(--learning-operation-border);
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-summary-grid > div:nth-child(odd) {
    border-inline-start: 0;
  }
}

@media (max-width: 63.999rem) {
  [data-design-learning="offline-detail"] .offline-course-price-card,
  [data-design-learning="player"] .learning-curriculum-sidebar {
    position: relative;
    inset: auto;
    max-height: none;
  }

  [data-design-learning="player"] .learning-curriculum-sidebar > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-design-account^="teacher-"] .account-nav-drawer {
    background: var(--sys-color-inverse-surface);
    color: var(--sys-color-inverse-on-surface);
  }

  [data-design-account^="teacher-"] .account-nav-drawer-heading {
    border-block-end-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 15%, transparent);
  }
}

@media (max-width: 40rem) {
  [data-design-learning="offline-list"] .offline-course-hero,
  [data-design-learning="offline-detail"] .offline-course-detail-hero {
    padding-block: 2.5rem;
  }

  [data-design-learning="offline-detail"] .offline-course-price-card {
    border-radius: var(--sys-shape-large);
  }

  [data-design-learning="player"] .learning-player-header .type-h2 {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
  }

  [data-design-learning="player"] .learning-player-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-design-learning="player"] .learning-player-controls select {
    width: 100%;
  }

  [data-design-learning="player"] :is(
      .learning-completion-panel,
      .learning-bookmark-panel,
      .learning-note-panel
    ) {
    display: grid;
  }

  [data-design-learning="player"] .learning-player-navigation,
  [data-design-learning="player"] .learning-note-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  [data-design-learning="player"] :is(.learning-player-navigation, .learning-note-actions) .btn {
    width: 100%;
  }

  [data-design-learning="player"] .learning-curriculum-sidebar > ol {
    grid-template-columns: minmax(0, 1fr);
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-heading {
    padding-block-end: 0.75rem;
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-heading .type-h1 {
    font-size: clamp(1.75rem, 9vw, 2.2rem);
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) :is(
      .account-summary,
      .account-security,
      .account-summary-primary,
      .surface-panel
    ) {
    padding: 1rem;
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-actions {
    align-items: stretch;
    flex-direction: column;
  }

  :is([data-design-account^="portal-"], [data-design-account^="teacher-"]) .account-actions .btn {
    width: 100%;
  }

  [data-design-account^="teacher-"] .form-demo {
    padding: 0.85rem;
  }

  [data-design-account^="teacher-"] .table-wrap,
  [data-design-account^="teacher-"] .table-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
      [data-design-learning],
      [data-design-account^="portal-"],
      [data-design-account^="teacher-"]
    ) * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (forced-colors: active) {
  :is(
      [data-design-learning],
      [data-design-account^="portal-"],
      [data-design-account^="teacher-"]
    ) :is(
      .offline-course-card,
      .offline-course-price-card,
      .learning-video-shell,
      .learning-text-lesson,
      .learning-curriculum-sidebar,
      .account-nav,
      .account-summary,
      .account-security,
      .form-demo
    ) {
    border: 1px solid CanvasText;
  }

  [data-design-account^="teacher-"] .account-nav a[aria-current="page"],
  [data-design-learning="player"] .learning-curriculum-sidebar .is-current {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* End Phase 7 learning and portals */

/* Visual replacement — Phase 4 public and catalog */
:is(.public-page, .static-page)[data-design-public] {
  --public-section-space: clamp(3.75rem, 7vw, 6rem);
  --public-panel-radius: 1.5rem;
  --public-feature-radius: 1.75rem;
  --public-readable: 48rem;
  overflow: clip;
  background: var(--sys-color-background);
  color: var(--sys-color-on-background);
}

:is(.public-page, .static-page)[data-design-public] > :is(.section, section.section),
.public-page[data-design-public] .detail-page > :is(.section, section.section) {
  padding-block: var(--public-section-space);
}

:is(.public-page, .static-page)[data-design-public] :is(.type-h1, .type-h2, .type-h3, .type-h4) {
  color: var(--ref-color-navy-950);
  text-wrap: balance;
}

:is(.public-page, .static-page)[data-design-public] .page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.25rem, 7vw, 6rem);
  border-block-end: 1px solid var(--sys-color-outline-variant);
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--sys-color-secondary) 13%, transparent), transparent 28rem),
    linear-gradient(145deg, var(--sys-color-background), var(--sys-color-surface-container-low));
}

:is(.public-page, .static-page)[data-design-public] .page-hero::after {
  position: absolute;
  inset: auto -10rem -18rem auto;
  width: 31rem;
  height: 31rem;
  border: 1px solid color-mix(in srgb, var(--sys-color-tertiary) 18%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

:is(.public-page, .static-page)[data-design-public] .page-hero > * {
  position: relative;
  z-index: 1;
}

:is(.public-page, .static-page)[data-design-public] .page-hero .type-h1 {
  max-width: 18ch;
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  line-height: 1.3;
}

:is(.public-page, .static-page)[data-design-public] .page-intro {
  max-width: 44rem;
  color: var(--sys-color-on-surface-variant);
  line-height: 2;
}

:is(.public-page, .static-page)[data-design-public] .interior-kicker {
  color: var(--ref-color-copper-700);
  font-weight: var(--font-weight-bold);
}

:is(.public-page, .static-page)[data-design-public] .interior-kicker > span {
  background: currentcolor;
}

:is(.public-page, .static-page)[data-design-public] .interior-hero-aside {
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 0;
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
  border-radius: 0;
  background: var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: none;
}

:is(.public-page, .static-page)[data-design-public] .interior-hero-aside :is(strong, p, span) {
  color: inherit;
}

:is(.public-page, .static-page)[data-design-public] :is(.listing-toolbar, .section-heading, .course-section-heading, .language-section-heading, .gallery-group-heading) {
  align-items: end;
  gap: 1rem 2rem;
  margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
}

:is(.public-page, .static-page)[data-design-public] :is(.listing-toolbar, .section-heading, .course-section-heading, .language-section-heading, .gallery-group-heading) > :is(p, div > p) {
  color: var(--sys-color-on-surface-variant);
  line-height: 1.9;
}

.public-page[data-design-public] :is(.card, .book-card, .class-schedule-card) {
  overflow: hidden;
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--public-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: none;
}

.public-page[data-design-public] :is(.card-course, .card-person, .card-article, .book-card) {
  min-height: 100%;
}

.teacher-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

.teacher-card-body > .text-link {
  align-self: flex-start;
  min-height: var(--tap-target);
  margin-block-start: auto;
}

.public-page[data-design-public] :is(.course-card-visual, .teacher-card-visual, .article-card-visual, .book-card-cover) {
  overflow: hidden;
  background: var(--sys-color-surface-container-low);
}

.public-page[data-design-public] :is(.course-card-visual, .teacher-card-visual, .article-card-visual, .book-card-cover) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sys-motion-duration-long) var(--sys-motion-easing-standard);
}

.public-page[data-design-public] :is(.card-title, .card-title a) {
  color: var(--ref-color-navy-950);
  line-height: 1.65;
}

.public-page[data-design-public] .card-text {
  color: var(--sys-color-on-surface-variant);
  line-height: 1.9;
}

.public-page[data-design-public] .card-footer {
  border-block-start-color: var(--sys-color-outline-variant);
}

.public-page[data-design-public] :is(.content-filters, .course-filter-sidebar) {
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--public-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: none;
}

.public-page[data-design-public] .active-filter-chip {
  min-height: var(--tap-target);
  border-radius: var(--sys-shape-full);
  background: var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.public-page[data-design-public="course-list"] .courses-catalog-hero,
.public-page[data-design-public="course-detail"] .course-detail-hero {
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--sys-color-secondary) 14%, transparent), transparent 30rem),
    linear-gradient(145deg, var(--sys-color-background), var(--sys-color-surface-container-low));
  color: var(--sys-color-on-background);
}

.public-page[data-design-public="course-list"] .courses-catalog-steps {
  padding: 0;
  border: 0;
  border-block-start: 0.22rem solid var(--sys-color-secondary);
  border-radius: 0;
  background: transparent;
}

.public-page[data-design-public="course-list"] .courses-catalog-steps li {
  padding-block: 1.25rem;
}

.public-page[data-design-public="course-list"] .course-entry-section {
  border-block-end: 1px solid var(--sys-color-outline-variant);
  background: var(--sys-color-surface-container-low);
}

.public-page[data-design-public="course-list"] .course-age-paths {
  border-block-start: 1px solid var(--sys-color-outline-variant);
}

.public-page[data-design-public="course-list"] .course-age-paths > a {
  min-height: 11rem;
  border-inline-start-color: var(--sys-color-outline-variant);
  border-radius: 0;
}

.public-page[data-design-public="course-list"] .course-language-paths a {
  min-height: var(--tap-target);
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-full);
  background: var(--sys-color-surface);
}

.public-page[data-design-public="course-list"] .courses-results-layout {
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.public-page[data-design-public="course-list"] .course-filter-sidebar {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1.5rem);
  padding: 1.25rem;
}

.public-page[data-design-public="course-detail"] .course-detail-grid {
  align-items: center;
}

.public-page[data-design-public="course-detail"] .course-detail-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 0.45rem solid var(--sys-color-surface);
  border-radius: var(--public-feature-radius);
  background: var(--ref-color-navy-10);
  box-shadow: var(--sys-elevation-level-2);
}

.public-page[data-design-public="course-detail"] .course-detail-visual :is(img, .course-image-fallback) {
  width: 100%;
  height: 100%;
}

.public-page[data-design-public="course-detail"] .course-detail-visual figcaption {
  position: absolute;
  inset: auto 1rem 1rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--sys-shape-full);
  background: color-mix(in srgb, var(--ref-color-navy-950) 82%, transparent);
  color: var(--sys-color-inverse-on-surface);
  font-size: var(--sys-type-body-small-size);
}

.public-page[data-design-public="course-detail"] .detail-facts {
  overflow: hidden;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--public-panel-radius);
  background: var(--sys-color-surface);
}

.public-page[data-design-public="course-detail"] .course-jump-bar {
  position: sticky;
  z-index: calc(var(--z-header) - 1);
  inset-block-start: var(--header-height);
  border-block: 1px solid var(--sys-color-outline-variant);
  background: color-mix(in srgb, var(--sys-color-background) 94%, transparent);
  backdrop-filter: blur(0.75rem);
}

.public-page[data-design-public="course-detail"] .course-jump-nav a {
  min-height: var(--tap-target);
  border-block-end: 0.15rem solid transparent;
}

.public-page[data-design-public="course-detail"] .course-jump-nav a:is(:hover, :focus-visible) {
  border-block-end-color: var(--sys-color-tertiary);
  color: var(--sys-color-tertiary);
}

.public-page[data-design-public="course-detail"] :is(.course-resource-section, .course-continuation-section, .course-classes-section, .course-gallery-section) {
  border-block-start: 1px solid var(--sys-color-outline-variant);
}

.public-page[data-design-public="course-detail"] .course-learning-path > li {
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--public-panel-radius);
  background: var(--sys-color-surface);
}

.language-detail-page[data-design-public="course-language"] .language-hero {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--sys-color-secondary) 34%, transparent), transparent 30rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.language-detail-page[data-design-public="course-language"] .language-hero :is(.type-h1, .page-intro, .interior-kicker, .breadcrumb, .breadcrumb a, .language-all-courses-link) {
  color: inherit;
}

.language-detail-page[data-design-public="course-language"] .language-hero .breadcrumb :is(li, a, span),
.static-page[data-design-public="about"] .static-page-hero .breadcrumb :is(li, a, span) {
  color: inherit;
}

/* Visual replacement — Phase 5 support, authentication and account */

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) {
  --account-page-space: clamp(2.75rem, 6vw, 5rem);
  --account-panel-radius: var(--sys-shape-extra-large);
  --account-hero-radius: var(--sys-shape-extra-extra-large);
  --account-control-height: 3.125rem;
  --account-panel-border: 1px solid var(--sys-color-outline-variant);
  --account-panel-background: var(--sys-color-surface);
  color: var(--sys-color-on-background);
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: var(--account-control-height);
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) textarea {
  min-height: 9rem;
  resize: vertical;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) :is(.btn, button, [role="tab"]) {
  min-height: 2.75rem;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .field {
  min-width: 0;
  gap: 0.45rem;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .field > label {
  color: var(--sys-color-on-surface);
  font-size: var(--text-small);
  font-weight: var(--sys-type-weight-bold);
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .field-help {
  color: var(--sys-color-on-surface-variant);
  line-height: 1.8;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .field-error :is(input, select, textarea),
:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--sys-color-error);
  background: var(--sys-color-error-container);
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .field-error-text {
  margin: 0;
  color: var(--sys-color-error);
  font-size: var(--text-small);
  font-weight: var(--sys-type-weight-bold);
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) :is(button, input, select, textarea, a):disabled,
:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) [aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(0.35);
  opacity: 0.58;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) form.is-pending {
  opacity: 0.88;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

:is(
    .contact-public-page[data-design-public="contact"],
    [data-design-support],
    .auth-page[data-design-account],
    .account-page[data-design-account]
  ) .is-loading::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.1rem;
  height: 1.1rem;
  border: 0.15rem solid currentcolor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  animation: account-loading-spin 0.75s linear infinite;
}

@keyframes account-loading-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

.contact-public-page[data-design-public="contact"] .contact-hero {
  padding-block: clamp(3.25rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 8% 18%, rgb(31 98 95 / 0.24), transparent 29rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.contact-public-page[data-design-public="contact"] .contact-hero :is(
    .type-h1,
    .page-intro,
    .interior-kicker,
    .breadcrumb,
    .breadcrumb a
  ) {
  color: inherit;
}

.contact-public-page[data-design-public="contact"] .contact-hero .interior-hero-aside {
  border: 1px solid rgb(255 255 255 / 0.18);
  border-block-start: 0.25rem solid var(--ref-color-copper-400);
  border-radius: var(--account-panel-radius);
  background: rgb(20 55 82 / 0.78);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: var(--sys-elevation-level-2);
}

.contact-public-page[data-design-public="contact"] .contact-overview-section {
  padding-block: var(--account-page-space);
  background: transparent;
}

.contact-public-page[data-design-public="contact"] :is(
    .contact-information-card,
    .contact-process-card
  ) {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: var(--account-panel-border);
  border-radius: var(--account-panel-radius);
  background: var(--account-panel-background);
  box-shadow: var(--sys-elevation-level-1);
}

.contact-public-page[data-design-public="contact"] .contact-process-card {
  border-color: var(--ref-color-navy-800);
  background: var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.contact-public-page[data-design-public="contact"] .contact-process-card :is(h2, p, li) {
  color: inherit;
}

.contact-public-page[data-design-public="contact"] .contact-tabs {
  padding-block-end: var(--account-page-space);
  background: color-mix(in srgb, var(--sys-color-surface-container-low) 72%, transparent);
}

.contact-public-page[data-design-public="contact"] .contact-form-index {
  position: sticky;
  z-index: calc(var(--z-header) - 1);
  inset-block-start: var(--header-height);
  padding-block: 0.75rem;
  border-block: 1px solid var(--sys-color-outline-variant);
  background: color-mix(in srgb, var(--sys-color-background) 94%, transparent);
  backdrop-filter: blur(0.85rem);
}

.contact-public-page[data-design-public="contact"] .contact-form-index nav {
  padding: 0.35rem;
  border: var(--account-panel-border);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.contact-public-page[data-design-public="contact"] .contact-form-index [role="tab"] {
  min-width: 9.5rem;
  border: 0;
  border-radius: var(--sys-shape-medium);
  background: transparent;
  color: var(--sys-color-on-surface-variant);
}

.contact-public-page[data-design-public="contact"] .contact-form-index [role="tab"][aria-selected="true"] {
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.contact-public-page[data-design-public="contact"] [data-contact-panel] {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.contact-public-page[data-design-public="contact"] [data-contact-panel] > .container {
  display: grid;
  grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: var(--account-panel-border);
  border-radius: var(--account-hero-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.contact-public-page[data-design-public="contact"] [data-contact-panel] .section-heading {
  align-content: start;
  margin: 0;
  padding-block-start: 0.4rem;
}

.contact-public-page[data-design-public="contact"] [data-contact-panel] :is(
    .inquiry-form,
    form.form-demo,
    .form-unavailable,
    .alert
  ) {
  grid-column: 2;
}

.contact-public-page[data-design-public="contact"] .form-unavailable {
  padding: 1.25rem;
  border: 1px solid var(--sys-color-warning);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-warning-container);
  color: var(--sys-color-on-warning-container);
}

[data-design-support] {
  min-height: min(44rem, calc(100svh - var(--header-height)));
  padding-block: var(--account-page-space);
  background:
    radial-gradient(circle at 10% 12%, rgb(31 98 95 / 0.13), transparent 24rem),
    transparent;
}

[data-design-support] > .container,
[data-design-support] .section > .container {
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border: var(--account-panel-border);
  border-radius: var(--account-hero-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-support] .section-heading {
  margin-block-end: 1.5rem;
}

[data-design-support] :is(.surface-card, .form-demo) {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: var(--account-panel-border);
  border-radius: var(--account-panel-radius);
  background: var(--sys-color-surface-container-low);
}

.auth-page[data-design-account] {
  min-height: calc(100svh - var(--header-height));
  padding-block: var(--account-page-space);
  background:
    radial-gradient(circle at 10% 16%, rgb(169 79 35 / 0.12), transparent 25rem),
    transparent;
}

.auth-page[data-design-account] .auth-shell {
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.86fr);
  align-items: stretch;
  gap: 0;
  max-width: 68rem;
}

.auth-page[data-design-account] .auth-context {
  position: relative;
  z-index: 0;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 0;
  border-radius: 0 var(--account-hero-radius) var(--account-hero-radius) 0;
  background:
    radial-gradient(circle at 0 0, rgb(31 98 95 / 0.34), transparent 25rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: var(--sys-elevation-level-2);
}

.auth-page[data-design-account] .auth-context::after {
  position: absolute;
  z-index: -1;
  inset: auto auto -7rem -6rem;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 50%;
  content: "";
}

.auth-page[data-design-account] .auth-context :is(h1, h2, h3, p, li, a, small) {
  color: inherit;
}

.auth-page[data-design-account] .auth-context .type-h1 {
  max-width: 13ch;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
}

.auth-page[data-design-account] :is(.auth-context-list, .auth-steps) {
  margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}

.auth-page[data-design-account] :is(.auth-context-list li, .auth-steps li) {
  border-color: rgb(255 255 255 / 0.16);
}

.auth-page[data-design-account] .auth-card {
  align-self: stretch;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: var(--account-panel-border);
  border-inline-start: 0;
  border-radius: var(--account-hero-radius) 0 0 var(--account-hero-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.auth-page[data-design-account] .auth-card-heading {
  margin-block-end: 1.25rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--sys-color-outline-variant);
}

.auth-page[data-design-account] .auth-form {
  gap: 1.05rem;
}

.auth-page[data-design-account] :is(.auth-card-links, .auth-card-footer) {
  border-color: var(--sys-color-outline-variant);
  color: var(--sys-color-on-surface-variant);
}

.auth-page[data-design-account] .auth-complete {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

.account-page[data-design-account] {
  padding-block: var(--account-page-space);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sys-color-surface-container-low) 78%, transparent) 0 18rem, transparent 18rem),
    transparent;
}

.account-page[data-design-account] .account-container {
  display: grid;
  grid-template-columns: minmax(13.5rem, 15rem) minmax(0, 1fr);
  grid-auto-flow: row;
  align-items: start;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}

.account-page[data-design-account] .account-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-end: 0.5rem;
}

.account-page[data-design-account] .account-heading > p {
  max-width: 42rem;
  color: var(--sys-color-on-surface-variant);
}

.account-page[data-design-account] .account-nav-shell {
  position: sticky;
  z-index: 2;
  inset-block-start: calc(var(--header-height) + 1.25rem);
  grid-column: 1;
  grid-row: 2 / span 20;
  margin: 0;
}

.account-page[data-design-account] .account-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.55rem;
  border: var(--account-panel-border);
  border-radius: var(--account-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.account-page[data-design-account] .account-nav a {
  min-height: 3.4rem;
  align-content: center;
  padding: 0.7rem 0.85rem;
  border-radius: var(--sys-shape-large);
}

.account-page[data-design-account] .account-nav a[aria-current="page"] {
  background: var(--sys-color-tertiary-container);
  color: var(--sys-color-on-tertiary-container);
}

.account-page[data-design-account] .account-container > :not(.account-heading):not(.account-nav-shell) {
  grid-column: 2;
  min-width: 0;
}

.account-page[data-design-account] :is(
    .account-summary,
    .account-security,
    .account-form,
    .notification-card,
    .notification-empty,
    .ticket-summary,
    .ticket-detail-facts,
    .ticket-reply-form,
    .ticket-claim-panel,
    .ticket-claim-form,
    .commerce-panel,
    .commerce-order-card,
    .commerce-empty-state,
    .learning-dashboard-filters,
    .learning-dashboard-card,
    .learning-dashboard-empty
  ) {
  border: var(--account-panel-border);
  border-radius: var(--account-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: none;
}

.account-page[data-design-account] :is(.account-summary-primary, .account-form, .ticket-claim-form) {
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
}

.account-page[data-design-account] .account-security {
  border-color: var(--ref-color-navy-800);
  background: var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.account-page[data-design-account] .account-security :is(.eyebrow, h2, h3, p, a, small) {
  color: inherit;
}

.account-page[data-design-account] .account-action-list a {
  min-height: 3.5rem;
  border-radius: var(--sys-shape-large);
}

.account-page[data-design-account] .account-action-list a:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 0.09);
}

.account-page[data-design-account] :is(.account-summary-grid, .ticket-detail-facts) > div {
  border-color: var(--sys-color-outline-variant);
  background: var(--sys-color-surface-container-low);
}

.account-page[data-design-account] .account-status-callout {
  border-color: var(--sys-color-warning);
  background: var(--sys-color-warning-container);
}

.account-page[data-design-account] .account-status-callout.is-positive {
  border-color: var(--sys-color-success);
  background: var(--sys-color-success-container);
}

.account-page[data-design-account] .notification-toolbar,
.ticket-page[data-design-account] .ticket-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: var(--account-panel-border);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
}

.account-page[data-design-account] .notification-card {
  position: relative;
  padding: 1.25rem;
}

.account-page[data-design-account] .notification-card.is-unread {
  border-inline-start: 0.25rem solid var(--sys-color-tertiary);
  background: var(--sys-color-tertiary-container);
}

.account-page[data-design-account] .notification-actions,
.ticket-page[data-design-account] :is(.ticket-toolbar-actions, .ticket-detail-actions) {
  gap: 0.6rem;
}

.ticket-page[data-design-account] .ticket-filter {
  display: flex;
  align-items: end;
  gap: 0.65rem;
}

.ticket-page[data-design-account] .ticket-filter select {
  width: auto;
  min-width: 9rem;
}

.ticket-page[data-design-account] .ticket-summary {
  padding: 1.25rem;
  transition:
    border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.ticket-page[data-design-account] .ticket-summary.is-unread {
  border-inline-start: 0.25rem solid var(--sys-color-tertiary);
}

.ticket-page[data-design-account] .ticket-summary h2 a:is(:hover, :focus-visible) {
  color: var(--sys-color-tertiary);
}

.ticket-page[data-design-account] .ticket-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.ticket-page[data-design-account] .ticket-detail-facts > div {
  padding: 1rem;
  border: 0;
  border-inline-start: 1px solid var(--sys-color-outline-variant);
}

.ticket-page[data-design-account] .ticket-detail-facts > div:first-child {
  border-inline-start: 0;
}

.ticket-page[data-design-account] .ticket-conversation {
  display: grid;
  gap: 1rem;
  padding-block: 0.75rem;
}

.ticket-page[data-design-account] .ticket-message {
  width: min(88%, 42rem);
  padding: 1rem 1.15rem;
  border: var(--account-panel-border);
  border-radius: var(--account-panel-radius) var(--account-panel-radius) var(--sys-shape-small) var(--account-panel-radius);
  background: var(--sys-color-surface);
}

.ticket-page[data-design-account] .ticket-message.is-staff {
  margin-inline-start: auto;
  border-color: color-mix(in srgb, var(--sys-color-secondary) 34%, var(--sys-color-outline-variant));
  border-radius: var(--account-panel-radius) var(--account-panel-radius) var(--account-panel-radius) var(--sys-shape-small);
  background: var(--sys-color-secondary-container);
}

.ticket-page[data-design-account] :is(.ticket-reply-form, .ticket-claim-form) {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-filters {
  padding: 1rem;
}

.account-page[data-design-account="my-courses"] .learning-dashboard-cover {
  border-radius: var(--sys-shape-large);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-progress {
  overflow: hidden;
  border-radius: var(--sys-shape-full);
  background: var(--sys-color-surface-container-high);
}

.commerce-page[data-design-account="order-list"] .commerce-order-list {
  display: grid;
  gap: 0.8rem;
}

.commerce-page[data-design-account="order-list"] .commerce-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.25rem;
}

.commerce-page[data-design-account="order-list"] .commerce-order-card > :last-child {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
}

.commerce-page[data-design-account="order-detail"] :is(.commerce-receipt, .commerce-panel) {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.commerce-page[data-design-account="order-detail"] .commerce-receipt-heading {
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--sys-color-outline-variant);
}

.commerce-page[data-design-account="order-detail"] .commerce-order-meta {
  gap: 0.7rem;
}

.commerce-page[data-design-account="order-detail"] .commerce-order-meta > div {
  border-radius: var(--sys-shape-large);
}

.commerce-page[data-design-account="order-detail"] .commerce-payment-history li {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface-container-low);
}

@media (hover: hover) and (pointer: fine) {
  .ticket-page[data-design-account] .ticket-summary:hover,
  .commerce-page[data-design-account="order-list"] .commerce-order-card:hover,
  .account-page[data-design-account] .notification-card:hover {
    border-color: var(--sys-color-tertiary);
    box-shadow: var(--sys-elevation-level-1);
    transform: translateY(-0.15rem);
  }
}

@media (max-width: 53.75rem) {
  .account-page[data-design-account] .account-container {
    display: block;
  }

  .account-page[data-design-account] .account-heading {
    display: grid;
    margin-block-end: 1.25rem;
  }

  .account-page[data-design-account] .account-nav-shell {
    position: relative;
    inset: auto;
    margin-block-end: 1.5rem;
  }

  .account-navigation-open .account-page[data-design-account] .account-nav-shell {
    z-index: var(--z-overlay);
  }

  .account-page[data-design-account] .js .account-nav-toggle,
  .js .account-page[data-design-account] .account-nav-toggle {
    min-height: 3.5rem;
    border-radius: var(--sys-shape-large);
    background: var(--sys-color-surface);
  }

  .account-page[data-design-account] .account-nav-drawer {
    border-radius: var(--account-panel-radius) 0 0 var(--account-panel-radius);
  }

  .account-page[data-design-account] .account-container > :not(.account-heading):not(.account-nav-shell) {
    margin-block-start: 1rem;
  }
}

@media (max-width: 40rem) {
  :is(
      .contact-public-page[data-design-public="contact"],
      [data-design-support],
      .auth-page[data-design-account],
      .account-page[data-design-account]
    ) {
    --account-page-space: 2rem;
    --account-panel-radius: var(--sys-shape-large);
    --account-hero-radius: var(--sys-shape-extra-large);
  }

  .contact-public-page[data-design-public="contact"] .contact-hero {
    padding-block: 2.5rem;
  }

  .contact-public-page[data-design-public="contact"] .contact-form-index {
    position: relative;
    inset: auto;
  }

  .contact-public-page[data-design-public="contact"] .contact-form-index nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 1fr));
    overflow-x: auto;
  }

  .contact-public-page[data-design-public="contact"] .contact-form-index [role="tab"] {
    min-width: 9rem;
  }

  .contact-public-page[data-design-public="contact"] [data-contact-panel] > .container {
    display: block;
    padding: 1rem;
  }

  .contact-public-page[data-design-public="contact"] [data-contact-panel] .section-heading {
    margin-block-end: 1.25rem;
  }

  [data-design-support] {
    min-height: 0;
    padding-inline: 1rem;
  }

  .auth-page[data-design-account] {
    padding-inline: 1rem;
  }

  .auth-page[data-design-account] .auth-shell {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auth-page[data-design-account] .auth-context {
    padding: 1.5rem;
    border-radius: var(--account-hero-radius) var(--account-hero-radius) 0 0;
  }

  .auth-page[data-design-account] .auth-context .type-h1 {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .auth-page[data-design-account] .auth-card {
    padding: 1.25rem;
    border: var(--account-panel-border);
    border-block-start: 0;
    border-radius: 0 0 var(--account-hero-radius) var(--account-hero-radius);
  }

  .auth-page[data-design-account] .auth-context-list {
    display: none;
  }

  .account-page[data-design-account] {
    padding-inline: 1rem;
  }

  .account-page[data-design-account] .account-overview-grid,
  .account-page[data-design-account] .account-summary-grid,
  .account-page[data-design-account] .account-form-layout {
    grid-template-columns: 1fr;
  }

  .account-page[data-design-account] :is(
      .notification-toolbar,
      .ticket-toolbar,
      .notification-card-heading,
      .account-section-heading
    ) {
    align-items: stretch;
    flex-direction: column;
  }

  .account-page[data-design-account] :is(.notification-actions, .ticket-toolbar-actions, .form-actions) {
    display: grid;
    grid-template-columns: 1fr;
  }

  .account-page[data-design-account] :is(.notification-actions, .ticket-toolbar-actions, .form-actions) :is(.btn, button, form) {
    width: 100%;
  }

  .ticket-page[data-design-account] .ticket-filter {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ticket-page[data-design-account] .ticket-filter select {
    width: 100%;
  }

  .ticket-page[data-design-account] .ticket-detail-facts {
    grid-template-columns: 1fr 1fr;
  }

  .ticket-page[data-design-account] .ticket-detail-facts > div:nth-child(odd) {
    border-inline-start: 0;
  }

  .ticket-page[data-design-account] .ticket-message {
    width: 94%;
  }

  .commerce-page[data-design-account="order-list"] .commerce-order-card {
    grid-template-columns: 1fr;
  }

  .commerce-page[data-design-account="order-list"] .commerce-order-card > :last-child {
    justify-items: start;
  }

  .commerce-page[data-design-account="order-detail"] .commerce-payment-history li {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
      .contact-public-page[data-design-public="contact"],
      [data-design-support],
      .auth-page[data-design-account],
      .account-page[data-design-account]
    ) *,
  :is(
      .contact-public-page[data-design-public="contact"],
      [data-design-support],
      .auth-page[data-design-account],
      .account-page[data-design-account]
    ) *::before,
  :is(
      .contact-public-page[data-design-public="contact"],
      [data-design-support],
      .auth-page[data-design-account],
      .account-page[data-design-account]
    ) *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (forced-colors: active) {
  :is(
      .contact-public-page[data-design-public="contact"],
      [data-design-support],
      .auth-page[data-design-account],
      .account-page[data-design-account]
    ) :is(
      .auth-context,
      .auth-card,
      .account-nav,
      .account-summary,
      .account-security,
      .notification-card,
      .ticket-summary,
      .ticket-message,
      .commerce-order-card,
      [data-contact-panel] > .container
    ) {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }
}

/* Phase 7 final cascade — keep the teacher workspace visually distinct. */
.account-page[data-design-account^="teacher-"] .account-nav {
  border-color: color-mix(in srgb, var(--sys-color-on-primary) 14%, transparent);
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.account-page[data-design-account^="teacher-"] .account-nav :is(h2, p),
.account-page[data-design-account^="teacher-"] .account-nav a {
  color: inherit;
}

.account-page[data-design-account^="teacher-"] .account-nav a:hover,
.account-page[data-design-account^="teacher-"] .account-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--sys-color-on-primary) 14%, transparent);
  color: var(--sys-color-on-primary);
}

.account-page[data-design-account^="teacher-"] .account-nav a[aria-current="page"] {
  box-shadow: inset -0.22rem 0 var(--sys-color-tertiary);
}

.account-page[data-design-account^="portal-"] .account-nav a[aria-current="page"] {
  box-shadow: inset -0.22rem 0 var(--sys-color-secondary);
}

@media (max-width: 53.75rem) {
  .account-page[data-design-account^="teacher-"] .account-nav-drawer {
    background: var(--sys-color-primary);
    color: var(--sys-color-on-primary);
  }
}

.language-detail-page[data-design-public="course-language"] .language-name-en {
  color: var(--ref-color-copper-400);
}

.language-detail-page[data-design-public="course-language"] .language-hero-visual {
  overflow: hidden;
  border: 0.45rem solid color-mix(in srgb, var(--sys-color-surface) 88%, transparent);
  border-radius: var(--public-feature-radius);
  box-shadow: var(--sys-elevation-level-2);
}

.language-detail-page[data-design-public="course-language"] .language-age-section {
  border-block: 1px solid var(--sys-color-outline-variant);
  background: var(--sys-color-surface);
}

.language-detail-page[data-design-public="course-language"] .language-age-paths > a {
  min-height: var(--tap-target);
  border-radius: var(--sys-shape-large);
}

.teachers-public-page[data-design-public="teacher-list"] .teacher-list-grid,
.books-public-page[data-design-public="book-list"] .book-grid,
.articles-public-page[data-design-public="article-list"] .articles-grid {
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.teacher-public-page[data-design-public="teacher-detail"] .teacher-detail-visual,
.book-public-page[data-design-public="book-detail"] .book-detail-cover {
  overflow: hidden;
  border: 0.45rem solid var(--sys-color-surface);
  border-radius: var(--public-feature-radius);
  background: var(--ref-color-navy-10);
  box-shadow: var(--sys-elevation-level-2);
}

.teacher-public-page[data-design-public="teacher-detail"] .teacher-professional-grid {
  gap: 1rem;
}

.teacher-public-page[data-design-public="teacher-detail"] .teacher-professional-card {
  border-block-start: 0.2rem solid var(--sys-color-secondary);
  border-radius: var(--public-panel-radius);
}

.book-public-page[data-design-public="book-detail"] .detail-facts {
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--public-panel-radius);
  background: var(--sys-color-surface);
}

.article-public-page[data-design-public="article-detail"] .article-editorial-hero .container {
  max-width: var(--public-readable);
}

.article-public-page[data-design-public="article-detail"] .article-editorial-hero .type-h1 {
  max-width: 22ch;
}

.article-public-page[data-design-public="article-detail"] .article-image-frame {
  overflow: hidden;
  max-width: 70rem;
  border-radius: var(--public-feature-radius);
  box-shadow: var(--sys-elevation-level-1);
}

.article-public-page[data-design-public="article-detail"] .article-content,
.static-page[data-design-public] .static-page-content {
  max-width: var(--public-readable);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 0;
  border-inline-start: 0.25rem solid var(--sys-color-secondary);
  border-radius: 0 var(--public-panel-radius) var(--public-panel-radius) 0;
  background: var(--sys-color-surface);
  box-shadow: none;
}

.article-public-page[data-design-public="article-detail"] .article-content :is(h2, h3),
.static-page[data-design-public] .static-page-content :is(h2, h3) {
  scroll-margin-block-start: calc(var(--header-height) + 1rem);
}

.gallery-public-page[data-design-public="gallery"] .gallery-editorial-group + .gallery-editorial-group {
  margin-block-start: var(--public-section-space);
  padding-block-start: var(--public-section-space);
  border-block-start: 1px solid var(--sys-color-outline-variant);
}

.gallery-public-page[data-design-public="gallery"] .gallery-card {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  border: 0;
  border-radius: var(--public-panel-radius);
  background: var(--ref-color-navy-10);
}

.gallery-public-page[data-design-public="gallery"] .gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-public-page[data-design-public="gallery"] .gallery-card figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--ref-color-navy-950) 88%, transparent), transparent);
  color: var(--sys-color-inverse-on-surface);
}

.search-public-page[data-design-public="search"] .search-form {
  margin-block-start: 2rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--public-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

.search-public-page[data-design-public="search"] .search-result-group {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 0;
  border-block-start: 0.2rem solid var(--sys-color-secondary);
  border-radius: 0;
  background: transparent;
}

.search-public-page[data-design-public="search"] .search-language-list a {
  min-height: var(--tap-target);
  border-radius: var(--sys-shape-large);
}

.calendar-public-page[data-design-public="class-calendar"] .calendar-filters {
  padding: clamp(1rem, 3vw, 1.5rem);
}

.calendar-public-page[data-design-public="class-calendar"] .calendar-term-group + .calendar-term-group {
  margin-block-start: var(--public-section-space);
  padding-block-start: var(--public-section-space);
  border-block-start: 1px solid var(--sys-color-outline-variant);
}

.calendar-public-page[data-design-public="class-calendar"] .calendar-term-heading {
  border-block-end-color: var(--sys-color-outline-variant);
}

.calendar-public-page[data-design-public="class-calendar"] .class-schedule-card {
  border-inline-start: 0.25rem solid var(--sys-color-secondary);
  border-radius: 0 var(--public-panel-radius) var(--public-panel-radius) 0;
}

.calendar-public-page[data-design-public="class-calendar"] .class-schedule-facts > div {
  border-color: var(--sys-color-outline-variant);
  background: var(--sys-color-surface-container-low);
}

.static-page[data-design-public="about"] .static-page-hero {
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--sys-color-secondary) 34%, transparent), transparent 30rem),
    var(--ref-color-navy-10);
  color: var(--sys-color-inverse-on-surface);
}

.static-page[data-design-public="about"] .static-page-hero :is(.type-h1, .page-intro, .interior-kicker, .breadcrumb, .breadcrumb a) {
  color: inherit;
}

.static-page[data-design-public="static-page"] .static-page-content {
  border-inline-start-color: var(--sys-color-tertiary);
}

.error-page[data-design-public="error"] {
  position: relative;
  min-height: min(48rem, calc(100svh - var(--header-height)));
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 8rem);
  border: 0;
  background:
    linear-gradient(to bottom, transparent 76%, color-mix(in srgb, var(--sys-color-tertiary-container) 68%, transparent) 76%),
    var(--sys-color-background);
}

.error-page[data-design-public="error"]::after {
  position: absolute;
  inset: auto -10rem -16rem auto;
  width: 31rem;
  height: 31rem;
  border: 1px solid color-mix(in srgb, var(--sys-color-tertiary) 18%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.error-page[data-design-public="error"] .container {
  position: relative;
  z-index: 1;
}

.error-page[data-design-public="error"] .error-code {
  color: var(--sys-color-surface-container-high);
  font-size: clamp(6rem, 18vw, 11rem);
  letter-spacing: -0.08em;
}

@media (min-width: 64rem) {
  .public-page[data-design-public] :is(.card-course, .card-person, .card-article, .book-card):is(:hover, :focus-within) {
    border-color: var(--sys-color-tertiary);
    box-shadow: var(--sys-elevation-level-2);
    transform: translateY(-0.25rem);
  }

  .public-page[data-design-public] :is(.card-course, .card-person, .card-article, .book-card):is(:hover, :focus-within) :is(.course-card-visual, .teacher-card-visual, .article-card-visual, .book-card-cover) img {
    transform: scale(1.035);
  }

  .gallery-public-page[data-design-public="gallery"] .gallery-editorial-grid > :first-child {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 37rem;
  }
}

@media (max-width: 63.999rem) {
  .public-page[data-design-public="course-list"] .course-filter-sidebar {
    position: static;
  }

  .public-page[data-design-public="course-detail"] .course-jump-bar {
    inset-block-start: 0;
  }
}

@media (max-width: 40rem) {
  :is(.public-page, .static-page)[data-design-public] {
    --public-section-space: 3.25rem;
    --public-panel-radius: 1.15rem;
    --public-feature-radius: 1.35rem;
  }

  :is(.public-page, .static-page)[data-design-public] .page-hero {
    padding-block: 2.5rem 3rem;
  }

  :is(.public-page, .static-page)[data-design-public] .page-hero .type-h1 {
    max-width: none;
    font-size: clamp(2.05rem, 10vw, 2.8rem);
  }

  :is(.public-page, .static-page)[data-design-public] .interior-hero-aside {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    padding: 1.1rem;
  }

  :is(.public-page, .static-page)[data-design-public] .interior-hero-aside p {
    grid-column: 1 / -1;
  }

  .public-page[data-design-public="course-list"] .courses-catalog-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-page[data-design-public="course-list"] .courses-catalog-steps li {
    padding: 0.8rem 0.45rem;
  }

  .public-page[data-design-public="course-list"] .course-age-paths > a {
    min-height: 9rem;
  }

  .public-page[data-design-public="course-detail"] .course-detail-visual,
  .language-detail-page[data-design-public="course-language"] .language-hero-visual,
  .teacher-public-page[data-design-public="teacher-detail"] .teacher-detail-visual,
  .book-public-page[data-design-public="book-detail"] .book-detail-cover {
    border-width: 0.3rem;
    border-radius: var(--public-feature-radius);
  }

  .public-page[data-design-public="course-detail"] .course-jump-nav {
    scroll-snap-type: inline mandatory;
  }

  .public-page[data-design-public="course-detail"] .course-jump-nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .article-public-page[data-design-public="article-detail"] .article-content,
  .static-page[data-design-public] .static-page-content {
    padding: 1.15rem;
    border-inline-start-width: 0.2rem;
  }

  .gallery-public-page[data-design-public="gallery"] .gallery-card {
    min-height: 15rem;
  }

  .search-public-page[data-design-public="search"] .search-form {
    padding: 1rem;
  }

  .search-public-page[data-design-public="search"] .search-form > div {
    display: grid;
  }

  .search-public-page[data-design-public="search"] .search-form .btn {
    width: 100%;
  }

  .calendar-public-page[data-design-public="class-calendar"] .class-schedule-card {
    border-inline-start-width: 0.2rem;
  }

  .error-page[data-design-public="error"] {
    min-height: calc(100svh - var(--header-height));
    padding-block: 4rem 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page[data-design-public] :is(.card-course, .card-person, .card-article, .book-card),
  .public-page[data-design-public] :is(.course-card-visual, .teacher-card-visual, .article-card-visual, .book-card-cover) img {
    transition: none;
  }
}

@media (forced-colors: active) {
  :is(.public-page, .static-page)[data-design-public] :is(
      .interior-hero-aside,
      .card,
      .book-card,
      .content-filters,
      .course-filter-sidebar,
      .detail-facts,
      .detail-visual,
      .class-schedule-card,
      .search-form,
      .article-content,
      .static-page-content
    ),
  .error-page[data-design-public="error"] {
    border: 1px solid CanvasText;
  }
}

/* Visual replacement — Phase 6 academics and commerce */

:is([data-design-academic], [data-design-commerce]) {
  --operation-space: clamp(2.75rem, 6vw, 5rem);
  --operation-panel-radius: var(--sys-shape-extra-large);
  --operation-compact-radius: var(--sys-shape-large);
  --operation-border: 1px solid var(--sys-color-outline-variant);
  color: var(--sys-color-on-background);
}

:is([data-design-academic], [data-design-commerce]) :is(input, select, textarea) {
  min-height: var(--tap-target);
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface);
}

:is([data-design-academic], [data-design-commerce]) :is(button, .btn, a[class*="control"]) {
  min-height: var(--tap-target);
}

[data-design-academic="class-calendar"] .calendar-hero,
[data-design-academic="registration-catalog"] .registration-hero,
[data-design-academic="registration-class-detail"] .registration-hero {
  padding-block: clamp(3.25rem, 7vw, 6rem);
  border-block-end: var(--operation-border);
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--sys-color-secondary) 10%, transparent), transparent 28rem),
    var(--sys-color-background);
}

[data-design-academic="class-calendar"] .calendar-hero .interior-hero-aside,
[data-design-academic="registration-class-detail"] .registration-capacity-card {
  border: 0;
  border-block-start: 0.2rem solid var(--sys-color-tertiary);
  border-radius: 0;
  background: var(--sys-color-inverse-surface);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-academic="class-calendar"] .calendar-hero .interior-hero-aside :is(strong, p, span),
[data-design-academic="registration-class-detail"] .registration-capacity-card :is(strong, small, span) {
  color: inherit;
}

[data-design-academic="class-calendar"] .calendar-section,
[data-design-academic="registration-catalog"] .registration-catalog-section {
  padding-block: var(--operation-space);
}

[data-design-academic="class-calendar"] .calendar-term-heading,
[data-design-academic="registration-catalog"] .registration-results-heading {
  padding-block-end: 1.25rem;
  border-block-end: 0.2rem solid var(--sys-color-secondary);
}

[data-design-academic="class-calendar"] .class-schedule-card,
[data-design-academic="registration-catalog"] .registration-class-card {
  overflow: hidden;
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-0);
}

[data-design-academic="class-calendar"] .class-schedule-main,
[data-design-academic="registration-catalog"] .class-schedule-main {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

[data-design-academic="class-calendar"] .class-schedule-facts,
[data-design-academic="registration-catalog"] .class-schedule-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: 1.25rem;
  border-block: var(--operation-border);
}

[data-design-academic="class-calendar"] .class-schedule-facts > div,
[data-design-academic="registration-catalog"] .class-schedule-facts > div {
  min-width: 0;
  padding: 0.9rem;
  border-block-end: var(--operation-border);
}

[data-design-academic="class-calendar"] .class-schedule-facts dt,
[data-design-academic="registration-catalog"] .class-schedule-facts dt {
  color: var(--sys-color-on-surface-variant);
  font-size: var(--sys-type-label-small-size);
}

[data-design-academic="class-calendar"] .class-schedule-facts dd,
[data-design-academic="registration-catalog"] .class-schedule-facts dd {
  margin-block-start: 0.2rem;
  color: var(--sys-color-on-surface);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

[data-design-academic="class-calendar"] .class-schedule-actions,
[data-design-academic="registration-catalog"] .class-schedule-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem clamp(1.25rem, 3vw, 1.75rem);
  border-block-start: var(--operation-border);
  background: var(--sys-color-surface-container-low);
}

.registration-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  border: var(--operation-border);
  border-radius: var(--operation-compact-radius);
  background: var(--sys-color-surface);
}

.registration-progress li {
  display: flex;
  min-width: 0;
  min-height: 4.5rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem;
  color: var(--sys-color-on-surface-variant);
}

.registration-progress li + li {
  border-block-start: 0;
  border-inline-start: var(--operation-border);
}

.registration-progress li > span {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border: var(--operation-border);
  border-radius: var(--sys-shape-full);
}

.registration-progress li.is-current {
  background: var(--sys-color-tertiary-container);
  color: var(--sys-color-on-tertiary-container);
}

.registration-progress li:is(.is-current, .is-complete) > span {
  border-color: var(--sys-color-tertiary);
  background: var(--sys-color-tertiary);
  color: var(--sys-color-on-tertiary);
}

@media (min-width: 48rem) {
  [data-design-academic="registration-catalog"] .registration-hero .registration-progress {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-design-academic="registration-catalog"] .registration-hero .registration-progress li + li {
    border-inline-start: 0;
    border-block-start: var(--operation-border);
  }
}

[data-design-academic="registration-catalog"] .registration-catalog-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

[data-design-academic="registration-catalog"] .registration-filter-panel {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1rem);
  padding: 1.25rem;
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
}

[data-design-academic="registration-catalog"] .registration-class-list {
  display: grid;
  gap: 1rem;
  margin-block-start: 1.25rem;
}

[data-design-academic="registration-class-detail"] .registration-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

[data-design-academic="registration-class-detail"] :is(.registration-detail-card, .registration-prerequisite-card) {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
}

[data-design-academic="registration-class-detail"] .registration-prerequisite-card {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1rem);
  border-block-start: 0.2rem solid var(--sys-color-secondary);
}

[data-design-academic="registration-class-detail"] .registration-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 1.5rem;
  border-block: var(--operation-border);
}

[data-design-academic="registration-class-detail"] .registration-facts > div {
  min-width: 0;
  padding: 1rem;
  border-block-end: var(--operation-border);
}

[data-design-academic="registration-class-detail"] .registration-prerequisite-card li {
  position: relative;
  padding-inline-start: 1.4rem;
  margin-block-start: 0.75rem;
}

[data-design-academic="registration-class-detail"] .registration-prerequisite-card li::before {
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-start: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--sys-shape-full);
  background: var(--sys-color-secondary);
  content: "";
}

[data-design-academic="registration-apply"] .registration-apply-section {
  padding-block: var(--operation-space);
}

[data-design-academic="registration-apply"] .registration-progress-private {
  max-width: 52rem;
  margin: 1.5rem auto 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-design-academic="registration-apply"] .registration-apply-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}

[data-design-academic="registration-apply"] .registration-selected-class {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1rem);
  padding: 1.5rem;
  border-block-start: 0.2rem solid var(--sys-color-tertiary);
  background: var(--sys-color-inverse-surface);
  color: var(--sys-color-inverse-on-surface);
}

[data-design-academic="registration-apply"] .registration-selected-class :is(h2, p, dt, dd, a) {
  color: inherit;
}

[data-design-academic="registration-apply"] .registration-selected-class dl {
  margin-block: 1.25rem;
  border-block: 1px solid var(--sys-color-inverse-outline);
}

[data-design-academic="registration-apply"] .registration-selected-class dl > div {
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--sys-color-inverse-outline);
}

[data-design-academic="registration-apply"] .registration-form-card {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-academic="registration-apply"] :is(.registration-summary, .registration-automatic-checks, .registration-legal-document) {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--operation-compact-radius);
  background: var(--sys-color-surface-container-low);
}

[data-design-academic^="registration-"] .registration-confirmation-shell,
[data-design-academic="waitlist-detail"] .registration-confirmation-shell {
  width: min(calc(100% - 2rem), 52rem);
}

[data-design-academic^="registration-"] .registration-confirmation-card,
[data-design-academic="waitlist-detail"] .registration-confirmation-card {
  padding: clamp(1.5rem, 5vw, 3rem);
  border: var(--operation-border);
  border-block-start: 0.25rem solid var(--sys-color-secondary);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-academic="registration-payment-failed"] .registration-confirmation-card {
  border-block-start-color: var(--sys-color-error);
}

[data-design-academic^="registration-"] .registration-confirmation-mark,
[data-design-academic="waitlist-detail"] .registration-confirmation-mark {
  display: inline-grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border-radius: var(--sys-shape-extra-large);
  background: var(--sys-color-success-container);
  color: var(--sys-color-success);
}

[data-design-academic="registration-payment-failed"] .registration-confirmation-mark {
  background: var(--sys-color-error-container);
  color: var(--sys-color-error);
}

[data-design-academic^="registration-"] .registration-confirmation-mark .ui-icon,
[data-design-academic="waitlist-detail"] .registration-confirmation-mark .ui-icon {
  width: 2.25rem;
  height: 2.25rem;
}

[data-design-academic^="registration-"] :is(.registration-summary, .registration-order-card, .registration-transfer-card, .registration-refund-card, .registration-withdrawal-card),
[data-design-academic="waitlist-detail"] .registration-summary {
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--operation-compact-radius);
  background: var(--sys-color-surface-container-low);
}

[data-design-academic] .registration-reference,
[data-design-commerce] .commerce-reference,
[data-design-commerce] :is(dd[dir="ltr"], small[dir="ltr"]) {
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

[data-design-academic^="placement-"] .account-container {
  max-width: 74rem;
}

[data-design-academic^="placement-"] .account-heading {
  padding-block-end: 1.5rem;
  border-block-end: 0.2rem solid var(--sys-color-secondary);
}

[data-design-academic^="placement-"] :is(.account-summary, .account-security) {
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-0);
}

[data-design-academic="placement-attempt"] .account-summary-primary {
  border-block-start: 0.2rem solid var(--sys-color-tertiary);
}

[data-design-academic="placement-attempt"] .account-security:has(.check-control) {
  border: 0;
  background: var(--sys-color-inverse-surface);
  color: var(--sys-color-inverse-on-surface);
  box-shadow: var(--sys-elevation-level-2);
}

[data-design-academic="placement-attempt"] .account-security:has(.check-control) :is(h2, h3, h4, p, legend) {
  color: inherit;
}

[data-design-academic="placement-attempt"] .check-control {
  min-height: var(--tap-target);
  padding: 0.85rem 1rem;
  border: 1px solid var(--sys-color-inverse-outline);
  border-radius: var(--operation-compact-radius);
  background: color-mix(in srgb, var(--sys-color-inverse-on-surface) 8%, transparent);
}

[data-design-academic="placement-result"] .account-summary-primary {
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
}

[data-design-academic="placement-result"] .account-summary-grid > div:first-child {
  background: var(--sys-color-primary-container);
  color: var(--sys-color-on-primary-container);
}

[data-design-commerce] {
  padding-block: var(--operation-space);
}

[data-design-commerce] .commerce-heading {
  max-width: 46rem;
  padding-block-end: 1.5rem;
  border-block-end: 0.2rem solid var(--sys-color-secondary);
}

[data-design-commerce] .commerce-panel,
[data-design-commerce] .commerce-empty-state {
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-0);
}

[data-design-commerce="checkout"] .commerce-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 2rem);
}

[data-design-commerce="checkout"] .commerce-summary {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1rem);
  border-block-start: 0.25rem solid var(--sys-color-tertiary);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-commerce="checkout"] .commerce-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  padding: 0;
  margin-block: 1.5rem 2rem;
  border: var(--operation-border);
  border-radius: var(--operation-compact-radius);
  background: var(--sys-color-surface);
}

[data-design-commerce="checkout"] .commerce-steps li {
  min-height: 4rem;
  padding: 0.85rem 1rem;
}

[data-design-commerce="checkout"] .commerce-steps li + li {
  border-inline-start: var(--operation-border);
}

[data-design-commerce="checkout"] .commerce-steps li[aria-current="step"] {
  background: var(--sys-color-tertiary-container);
  color: var(--sys-color-on-tertiary-container);
}

[data-design-commerce="checkout"] .commerce-coupon,
[data-design-commerce="checkout"] :is(.commerce-gateway, .commerce-terms) {
  border: var(--operation-border);
  border-radius: var(--operation-compact-radius);
  background: var(--sys-color-surface-container-low);
}

[data-design-commerce="checkout"] .commerce-pay-button {
  width: 100%;
}

[data-design-commerce^="payment-"] {
  min-height: min(70vh, 46rem);
}

[data-design-commerce^="payment-"] .commerce-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: var(--operation-border);
  border-radius: var(--operation-panel-radius);
  background: var(--sys-color-surface);
  box-shadow: var(--sys-elevation-level-1);
}

[data-design-commerce^="payment-"] .commerce-result-mark {
  display: inline-grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border-radius: var(--sys-shape-extra-large);
}

[data-design-commerce^="payment-"] .commerce-result-mark .ui-icon {
  width: 2.25rem;
  height: 2.25rem;
}

[data-design-commerce="payment-success"] .commerce-result-mark {
  background: var(--sys-color-success-container);
  color: var(--sys-color-success);
}

[data-design-commerce="payment-failed"] .commerce-result-mark {
  background: var(--sys-color-error-container);
  color: var(--sys-color-error);
}

[data-design-commerce="payment-redirect"] .commerce-panel {
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-block-start: 0.25rem solid var(--sys-color-info);
}

[data-design-commerce="payment-redirect"] .commerce-fake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

[data-design-commerce^="order-"] .commerce-order-status {
  width: fit-content;
  min-height: 1.75rem;
  align-content: center;
  padding-inline: 0.7rem;
  border-radius: var(--sys-shape-full);
  background: var(--sys-color-surface-container-high);
  color: var(--sys-color-on-surface);
  font-size: var(--sys-type-label-small-size);
  font-weight: var(--font-weight-semibold);
}

@media (hover: hover) and (pointer: fine) {
  [data-design-academic="class-calendar"] .class-schedule-card,
  [data-design-academic="registration-catalog"] .registration-class-card {
    transition:
      border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
      box-shadow var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
      transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
  }

  [data-design-academic="class-calendar"] .class-schedule-card:hover,
  [data-design-academic="registration-catalog"] .registration-class-card:hover {
    border-color: var(--sys-color-tertiary);
    box-shadow: var(--sys-elevation-level-1);
    transform: translateY(-0.1875rem);
  }
}

@media (max-width: 53.75rem) {
  [data-design-academic="registration-catalog"] .registration-catalog-layout,
  [data-design-academic="registration-class-detail"] .registration-detail-layout,
  [data-design-academic="registration-apply"] .registration-apply-layout,
  [data-design-commerce="checkout"] .commerce-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-design-academic="registration-catalog"] .registration-filter-panel,
  [data-design-academic="registration-class-detail"] .registration-prerequisite-card,
  [data-design-academic="registration-apply"] .registration-selected-class,
  [data-design-commerce="checkout"] .commerce-summary {
    position: static;
  }
}

@media (max-width: 40rem) {
  :is([data-design-academic], [data-design-commerce]) {
    --operation-space: 2.5rem;
    --operation-panel-radius: var(--sys-shape-large);
    --operation-compact-radius: var(--sys-shape-medium);
  }

  .registration-progress,
  [data-design-academic="registration-apply"] .registration-progress-private,
  [data-design-commerce="checkout"] .commerce-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .registration-progress li,
  [data-design-commerce="checkout"] .commerce-steps li {
    min-height: var(--tap-target);
  }

  .registration-progress li + li,
  [data-design-commerce="checkout"] .commerce-steps li + li {
    border-inline-start: 0;
    border-block-start: var(--operation-border);
  }

  [data-design-academic="class-calendar"] .class-schedule-facts,
  [data-design-academic="registration-catalog"] .class-schedule-facts,
  [data-design-academic="registration-class-detail"] .registration-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-design-academic="class-calendar"] .class-schedule-actions,
  [data-design-academic="registration-catalog"] .class-schedule-actions,
  [data-design-commerce="payment-redirect"] .commerce-fake-actions {
    align-items: stretch;
    flex-direction: column;
  }

  [data-design-academic="class-calendar"] .class-schedule-actions .btn,
  [data-design-academic="registration-catalog"] .class-schedule-actions .btn,
  [data-design-commerce="payment-redirect"] .commerce-fake-actions .btn {
    width: 100%;
  }

  [data-design-commerce^="payment-"] .commerce-result {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  [data-design-commerce^="payment-"] .commerce-result-mark {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-design-academic] *,
  [data-design-commerce] * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (forced-colors: active) {
  [data-design-academic] :is(
      .class-schedule-card,
      .registration-progress,
      .registration-filter-panel,
      .registration-detail-card,
      .registration-prerequisite-card,
      .registration-form-card,
      .registration-confirmation-card,
      .account-summary,
      .account-security
    ),
  [data-design-commerce] :is(.commerce-panel, .commerce-result, .commerce-steps) {
    border: 1px solid CanvasText;
  }

  .registration-progress li.is-current,
  [data-design-commerce="checkout"] .commerce-steps li[aria-current="step"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* Visual regression repairs — navigation, contrast and data grouping */
.site-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.account-page[data-design-account] .account-security :is(
    .eyebrow,
    h2,
    h3,
    h4,
    p,
    a:not(.btn),
    small,
    strong
  ),
.account-page[data-design-account="profile"] .account-logout-form .btn {
  color: var(--sys-color-inverse-on-surface);
}

.account-page[data-design-account] .account-security .empty-state {
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 36%, transparent);
  background: rgb(255 255 255 / 0.08);
  color: var(--sys-color-inverse-on-surface);
}

.account-page[data-design-account] .account-security .empty-state :is(h2, h3, h4, p, small, strong) {
  color: inherit;
}

.account-page[data-design-account] .account-action-list a:is(:hover, :focus-visible) strong {
  color: inherit;
}

.account-page[data-design-account] .account-security .btn-secondary {
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 48%, transparent);
  background: transparent;
  color: var(--sys-color-inverse-on-surface);
}

.account-page[data-design-account] .account-security .btn-secondary:is(:hover, :focus-visible) {
  border-color: var(--sys-color-inverse-on-surface);
  background: rgb(255 255 255 / 0.09);
  color: var(--sys-color-inverse-on-surface);
}

.account-page[data-design-account] .account-security .btn-secondary:active {
  background: rgb(255 255 255 / 0.16);
}

.account-page[data-design-account="profile"] .account-logout-form .btn {
  border-color: color-mix(in srgb, var(--sys-color-inverse-on-surface) 48%, transparent);
}

.account-page[data-design-account="profile"] .account-logout-form .btn:is(:hover, :focus-visible) {
  border-color: var(--sys-color-inverse-on-surface);
  background: rgb(255 255 255 / 0.09);
}

.account-page[data-design-account="profile"] .account-summary-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-large);
  background: var(--sys-color-surface-container-low);
}

.account-page[data-design-account="profile"] .account-summary-grid > div {
  display: grid;
  min-width: 0;
  min-height: 6rem;
  align-content: center;
  padding: 1rem;
  border: 0;
  border-block-end: 1px solid var(--sys-color-outline-variant);
  background: transparent;
}

.account-page[data-design-account="profile"] .account-summary-grid > div:last-child {
  border-block-end: 0;
}

.account-page[data-design-account="profile"] .account-summary-grid dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40.001rem) {
  .account-page[data-design-account="profile"] .account-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-page[data-design-account="profile"] .account-summary-grid > div:nth-child(even) {
    border-inline-start: 1px solid var(--sys-color-outline-variant);
  }

  .account-page[data-design-account="profile"] .account-summary-grid > div:nth-last-child(-n + 2) {
    border-block-end: 0;
  }
}

@media (max-width: 63.999rem) {
  .account-page[data-design-account="profile"] .account-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .account-page[data-design-account="profile"] .account-summary-grid,
  .account-page[data-design-account="profile"] .account-summary-grid > div,
  .account-page[data-design-account="profile"] .account-logout-form .btn {
    border-color: CanvasText;
  }
}