/* The Academy (pages/academy-*.tsx, lib/academy.tsx): website v2's look (site-v2.css is loaded first) on the TOTC
   e-learning layouts. The course card, rails, the hero's lesson card and floating chips, paths, categories, the
   curriculum, the price card, the lesson player and the auth split. Tokens only, classes ma-. */

.ma-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ma-badge-academy {
  padding: 2px 8px; border-radius: var(--ats-radius-pill); border: 1px solid color-mix(in oklab, var(--ats-info) 45%, var(--ats-border));
  font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ats-accent-text);
}
@media (max-width: 720px) { .ma-badge-academy { display: none; } }

/* ---------- covers, stars, price ---------- */
.ma-cover { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ats-media-bg); }
.ma-cover-empty {
  display: grid; place-items: center; font-family: var(--ats-font-display); font-size: 28px; font-weight: 600; color: var(--ats-muted-strong);
  background: radial-gradient(70% 90% at 70% 100%, var(--m2-glow), transparent 70%), var(--ats-media-bg);
}
.ma-stars { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-stars-row { position: relative; display: inline-block; color: color-mix(in oklab, var(--ats-fg) 18%, transparent); letter-spacing: 1px; line-height: 1; }
.ma-stars-on { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; color: var(--ats-warning); white-space: nowrap; }
.ma-stars-n { color: var(--ats-fg); }
.ma-price { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--ats-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ats-fg); white-space: nowrap; }
.ma-price-md { font-size: var(--ats-text-lead); }
.ma-price-lg { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.02em; }
.ma-price.is-free .ma-price-now { color: var(--ats-value-positive); }
.ma-price-was { font-size: 0.7em; color: var(--ats-muted); }

/* ---------- the course card ---------- */
.ma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ma-card {
  position: relative; display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--ats-border); border-radius: 16px;
  background: var(--m2-card); overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ma-card:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); transform: translateY(-2px); box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ats-grad-cta-from) 50%, transparent); }
.ma-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ma-card-link:focus-visible { outline: 2px solid var(--ats-info); outline-offset: 2px; }
.ma-card-art { position: relative; border-block-end: 1px solid var(--ats-border); }
.ma-card-flags { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; display: flex; gap: 6px; }
.ma-card-flags > * { background: color-mix(in oklab, var(--ats-bg) 82%, transparent); backdrop-filter: blur(6px); }
.ma-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; flex: 1; }
.ma-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); color: var(--ats-muted); }
.ma-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ma-card-title {
  margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; line-height: 1.3; color: var(--ats-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ma-card-sm .ma-card-title { font-size: var(--ats-text-ui); }
.ma-card-cat { margin: 0; font-size: var(--ats-text-label); color: var(--ats-accent-text); }
.ma-card-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-block-start: 1px solid var(--ats-border); }
.ma-card-who { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; font-size: var(--ats-text-label); color: var(--ats-muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-card-foot .ma-stars { display: none; }
.ma-card-foot .ma-price { margin-inline-start: auto; }
.ma-card-go { display: inline-flex; color: var(--ats-muted); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms; }
.ma-card:hover .ma-card-go { transform: translateX(3px); color: var(--ats-fg); }

.ma-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ma-rail > li { scroll-snap-align: start; display: flex; }
.ma-rail > li > .ma-card { flex: 1; }
.ma-row + .ma-row { margin-block-start: clamp(28px, 4vw, 44px); }
.ma-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
.ma-row-t { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; }
.ma-row-t span { font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-row-all { font-size: var(--ats-text-ui); color: var(--ats-accent-text); text-decoration: none; }
.ma-row-all:hover { text-decoration: underline; }
.ma-more { display: flex; justify-content: center; margin: 24px 0 0; }

/* ---------- home: the hero's lesson card and floating chips (TOTC's hero cards) ---------- */
.ma-hero-stack { position: relative; padding: 28px 28px 44px; }
.ma-player-card {
  position: relative; z-index: 1; border: 1px solid var(--ats-border-strong); border-radius: 18px; overflow: hidden; background: color-mix(in oklab, var(--ats-surface) 94%, transparent);
  box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--ats-grad-cta-from) 55%, transparent), 0 0 0 1px color-mix(in oklab, var(--ats-fg) 4%, transparent) inset;
}
.ma-player-art { position: relative; }
.ma-player-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--ats-bg) 70%, transparent)); }
.ma-player-play {
  position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; display: grid; place-items: center; inline-size: 58px; block-size: 58px;
  border-radius: 50%; background: var(--ats-grad-cta); color: var(--ats-accent-ink); box-shadow: 0 0 0 10px color-mix(in oklab, var(--ats-grad-cta-from) 22%, transparent);
}
.ma-player-time { position: absolute; z-index: 1; inset-block-end: 10px; inset-inline-end: 12px; padding: 2px 8px; border-radius: 6px; background: color-mix(in oklab, var(--ats-bg) 75%, transparent); font-size: var(--ats-text-micro); color: var(--ats-fg); }
.ma-player-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.ma-player-kicker { margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.04em; color: var(--ats-accent-text); }
.ma-player-title { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; color: var(--ats-fg); }
.ma-player-next { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 10px 0 0; list-style: none; border-block-start: 1px solid var(--ats-border); }
.ma-player-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; font-size: var(--ats-text-label); color: var(--ats-muted-strong); }
.ma-player-next li span:first-child, .ma-player-next li span:last-child { color: var(--ats-muted); font-size: var(--ats-text-micro); padding-block-start: 2px; }
.ma-float {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; max-inline-size: 260px;
  border: 1px solid var(--ats-border-strong); border-radius: 14px; background: color-mix(in oklab, var(--ats-surface) 82%, transparent);
  backdrop-filter: blur(12px); box-shadow: 0 18px 40px -20px color-mix(in oklab, var(--ats-bg) 80%, transparent); font-size: var(--ats-text-label); color: var(--ats-muted-strong); line-height: 1.35;
}
.ma-float strong { color: var(--ats-fg); font-weight: 600; }
.ma-float-ic { display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 10px; background: color-mix(in oklab, var(--ats-info) 18%, transparent); color: var(--ats-accent-text); }
.ma-float-ic.is-pos { background: color-mix(in oklab, var(--ats-value-positive) 18%, transparent); color: var(--ats-value-positive); }
.ma-float-a { inset-block-start: 0; inset-inline-start: -8px; }
.ma-float-b { inset-block-start: 38%; inset-inline-end: -14px; }
.ma-float-c { inset-block-end: 0; inset-inline-start: 18px; }
@media (max-width: 720px) {
  .ma-hero-stack { padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .ma-float { position: static; max-inline-size: none; }
}

/* ---------- home: paths (TOTC's "for instructors / for students" image cards) ---------- */
.ma-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: start; }
.ma-path { position: relative; isolation: isolate; display: flex; min-block-size: 380px; border: 1px solid var(--ats-border); border-radius: 18px; overflow: hidden; }
.ma-path-bg { position: absolute; inset: 0; z-index: -2; block-size: 100%; aspect-ratio: auto; opacity: 0.55; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.ma-path:hover .ma-path-bg { transform: scale(1.04); }
.ma-path::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--ats-bg) 30%, transparent) 0%, var(--ats-bg) 72%); }
.ma-path-in { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 22px; inline-size: 100%; box-sizing: border-box; min-inline-size: 0; }
.ma-path-kicker { margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ats-accent-text); }
.ma-path-title { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title); font-weight: 600; letter-spacing: -0.01em; color: var(--ats-fg); }
.ma-path-text { margin: 0; color: var(--ats-muted-strong); line-height: 1.55; }
.ma-path-course { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 4px; padding-block-start: 12px; border-block-start: 1px solid var(--ats-border); font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-path-course > span:first-child { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-path .ats-btn { align-self: flex-start; }

/* ---------- categories (TOTC's "favourite course from top category") ---------- */
.ma-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ma-cat {
  display: flex; flex-direction: column; gap: 8px; block-size: 100%; box-sizing: border-box; padding: 20px; border: 1px solid var(--ats-border); border-radius: 16px;
  background: var(--m2-card); color: inherit; text-decoration: none; transition: border-color 200ms, background 200ms;
}
.ma-cat:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--ats-grad-cta-from) 14%, transparent), transparent 60%), var(--m2-card); }
.ma-cat-n { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; background: var(--ats-grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; inline-size: fit-content; }
.ma-cat-name { font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.ma-cat-x { font-size: var(--ats-text-label); line-height: 1.5; color: var(--ats-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- home: features bento extras ---------- */
.ma-peek { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ma-peek li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ats-border); border-radius: 10px; background: color-mix(in oklab, var(--ats-bg) 40%, transparent); font-size: var(--ats-text-ui); }
.ma-peek li.is-on { border-color: color-mix(in oklab, var(--ats-info) 55%, var(--ats-border)); background: color-mix(in oklab, var(--ats-info) 10%, transparent); }
.ma-peek-ic { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 8px; background: color-mix(in oklab, var(--ats-fg) 6%, transparent); color: var(--ats-muted-strong); }
.ma-peek li.is-on .ma-peek-ic { background: var(--ats-grad-cta); color: var(--ats-accent-ink); }
.ma-peek-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ats-fg); }
.ma-peek-d { font-size: var(--ats-text-micro); color: var(--ats-muted); }
.ma-tile-ic { margin: 0; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: color-mix(in oklab, var(--ats-info) 14%, transparent); color: var(--ats-accent-text); }

/* ---------- home: instructor, reviews, posts ---------- */
.ma-teacher { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--ats-border); border-radius: 20px; background: radial-gradient(80% 120% at 0% 0%, color-mix(in oklab, var(--ats-grad-cta-from) 14%, transparent), transparent 60%), var(--m2-card); }
.ma-teacher .ats-avatar { inline-size: clamp(96px, 12vw, 148px); block-size: clamp(96px, 12vw, 148px); box-shadow: 0 0 0 6px color-mix(in oklab, var(--ats-grad-cta-from) 18%, transparent); }
.ma-teacher-copy { display: flex; flex-direction: column; gap: 14px; }
.ma-teacher-figs { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }
.ma-teacher-figs div { display: flex; flex-direction: column-reverse; gap: 2px; }
.ma-teacher-figs dt { font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-teacher-figs dd { margin: 0; font-size: var(--ats-text-title); font-weight: 500; color: var(--ats-fg); }
.ma-reviews, .ma-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1023px) {
  .ma-paths, .ma-reviews, .ma-posts { grid-template-columns: minmax(0, 1fr); }
  .ma-path { min-block-size: 300px; }
  .ma-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ma-cats { grid-template-columns: minmax(0, 1fr); }
  .ma-teacher { grid-template-columns: minmax(0, 1fr); }
  .ma-rail { grid-auto-columns: minmax(250px, 82%); }
}

/* ---------- courses: the search block, tabs, count, instructors ---------- */
.ma-search { display: flex; flex-direction: column; gap: 14px; max-inline-size: 860px; margin-inline: auto; padding: 16px; border: 1px solid var(--ats-border-strong); border-radius: 20px; background: color-mix(in oklab, var(--ats-surface) 82%, transparent); backdrop-filter: blur(12px); box-shadow: 0 30px 80px -40px var(--m2-glow); }
.ma-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ma-search-row > :last-child { margin-inline-start: auto; }
.ma-catalogue { padding-block-start: 8px; }
.ma-tabs { margin-block-end: 14px; }
.ma-cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.ma-count { margin: 0; font-size: var(--ats-text-ui); color: var(--ats-muted); }
.ma-count strong { color: var(--ats-fg); }
.ma-pages { margin-block-start: 24px; }
.ma-teachers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ma-tcard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 22px; text-align: center; border: 1px solid var(--ats-border); border-radius: 18px; background: var(--m2-card); color: inherit; text-decoration: none; transition: border-color 200ms; }
.ma-tcard:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); }
.ma-tcard-name { font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; color: var(--ats-fg); }
.ma-tcard-x { font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); }
.ma-tcard-figs { font-size: var(--ats-text-label); color: var(--ats-accent-text); }

/* ---------- course page: hero, sticky tabs, two columns, price card, curriculum ---------- */
.ma-chero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 64px); border-block-end: 1px solid var(--m2-line); }
.ma-chero-bg { position: absolute; inset: 0; z-index: -2; }
.ma-chero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.22; filter: blur(2px) saturate(120%); }
.ma-chero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ats-bg) 25%, color-mix(in oklab, var(--ats-bg) 70%, transparent) 60%, color-mix(in oklab, var(--ats-bg) 40%, transparent)), linear-gradient(0deg, var(--ats-bg), transparent 40%); }
.ma-chero .m2-hero-glow { z-index: -1; }
.ma-chero-in { display: flex; flex-direction: column; gap: 18px; padding-inline-end: calc(400px + clamp(24px, 4vw, 48px) + var(--m2-pad)); }
.ma-chero .m2-title-xl { font-size: clamp(34px, 4.6vw, 58px); }
.ma-crumbs { font-size: var(--ats-text-label); }
.ma-chero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: var(--ats-text-ui); color: var(--ats-muted-strong); }
.ma-chero-meta li { display: inline-flex; align-items: center; gap: 7px; }
.ma-chero-meta a { color: var(--ats-fg); }
.ma-tabs-wrap { position: sticky; inset-block-start: 59px; z-index: 5; background: color-mix(in oklab, var(--ats-bg) 88%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--m2-line); }
.ma-navtabs { border-block-end: 0; }
.ma-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.ma-cmain { min-inline-size: 0; }
.ma-cside { position: sticky; inset-block-start: 120px; margin-block-start: -300px; z-index: 6; }
.ma-csec { display: flex; flex-direction: column; gap: 16px; padding-block: clamp(32px, 4vw, 48px); scroll-margin-block-start: 130px; }
.ma-csec + .ma-csec { border-block-start: 1px solid var(--m2-line); }
.ma-csec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.ma-csec-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title); font-weight: 600; letter-spacing: -0.01em; }
.ma-csec-h3 { margin: 12px 0 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; }
.ma-csec-sub { margin: 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-learn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 18px; list-style: none; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); }
.ma-learn li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: var(--ats-text-ui); line-height: 1.5; color: var(--ats-muted-strong); }
.ma-learn li svg { color: var(--ats-value-positive); margin-block-start: 2px; }
.ma-learn strong { color: var(--ats-fg); font-weight: 600; }

.ma-buy { display: flex; flex-direction: column; border: 1px solid var(--ats-border-strong); border-radius: 20px; overflow: hidden; background: color-mix(in oklab, var(--ats-surface) 96%, transparent); box-shadow: 0 40px 90px -40px var(--m2-glow); }
.ma-buy-video { border-radius: 0; border: 0; }
.ma-buy-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.ma-buy-price { display: flex; align-items: center; gap: 10px; }
.ma-buy-or { margin: 0; font-size: var(--ats-text-label); line-height: 1.5; color: var(--ats-muted); text-align: center; }
.ma-buy-or a { color: var(--ats-accent-text); }
.ma-buy-h { margin: 6px 0 0; padding-block-start: 14px; border-block-start: 1px solid var(--ats-border); font-family: var(--ats-font-display); font-size: var(--ats-text-ui); font-weight: 600; }
.ma-buy-list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: var(--ats-text-ui); color: var(--ats-muted-strong); }
.ma-buy-list li { display: flex; align-items: center; gap: 10px; }
.ma-buy-list svg { color: var(--ats-accent-text); flex: none; }
.ma-buy-foot { display: flex; align-items: center; gap: 6px; margin: 0; padding-block-start: 12px; border-block-start: 1px solid var(--ats-border); font-size: var(--ats-text-label); color: var(--ats-muted); }

.ma-cur-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; inline-size: 100%; text-align: start; }
.ma-cur-n { font-size: var(--ats-text-label); color: var(--ats-accent-text); }
.ma-cur-t { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ma-cur-t strong { font-weight: 600; color: var(--ats-fg); }
.ma-cur-t span { font-size: var(--ats-text-label); font-weight: 400; color: var(--ats-muted); }
.ma-cur-meta { font-size: var(--ats-text-micro); font-weight: 400; color: var(--ats-muted); white-space: nowrap; }
.ma-lessons { display: flex; flex-direction: column; margin: 0; padding: 0 0 0 42px; list-style: none; }
.ma-lessons li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-block-start: 1px solid var(--ats-border); font-size: var(--ats-text-ui); }
.ma-lesson-ic { display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 7px; background: color-mix(in oklab, var(--ats-fg) 6%, transparent); color: var(--ats-muted); }
.ma-lessons li.is-preview .ma-lesson-ic { background: color-mix(in oklab, var(--ats-value-positive) 18%, transparent); color: var(--ats-value-positive); }
.ma-lesson-t { color: var(--ats-muted-strong); min-inline-size: 0; }
a.ma-lesson-t { color: var(--ats-fg); }
.ma-lesson-d { font-size: var(--ats-text-micro); color: var(--ats-muted); }

.ma-ins { display: flex; align-items: center; gap: 16px; }
.ma-ins-name { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; }
.ma-ins-figs { margin: 4px 0 0; font-size: var(--ats-text-label); color: var(--ats-accent-text); }
.ma-rating { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); inline-size: fit-content; }
.ma-rating-v { margin: 0; font-size: 44px; font-weight: 500; letter-spacing: -0.03em; background: var(--ats-grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ma-rating-x { margin: 4px 0 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-rating .ma-stars-row { font-size: 18px; }
.ma-creviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1024px) { .ma-buybar { display: none; } }
@media (max-width: 1180px) {
  .ma-chero-in { padding-inline-end: var(--m2-pad); }
  .ma-cgrid { grid-template-columns: minmax(0, 1fr); }
  .ma-cside { position: static; margin-block-start: 0; order: -1; padding-block-start: 24px; max-inline-size: 560px; }
}
@media (max-width: 720px) {
  .ma-learn, .ma-creviews { grid-template-columns: minmax(0, 1fr); }
  .ma-lessons { padding-inline-start: 0; }
  .ma-lessons li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .ma-lessons li .ats-badge { display: none; }
  .ma-tabs-wrap { inset-block-start: 69px; }
  .ma-search-row > :last-child { margin-inline-start: 0; }
}
.ma-more-text { border-block-start: 1px solid var(--ats-border); padding-block-start: 12px; }
.ma-more-text > summary { cursor: pointer; inline-size: fit-content; color: var(--ats-accent-text); font-size: var(--ats-text-ui); list-style: none; }
.ma-more-text > summary::-webkit-details-marker { display: none; }
.ma-more-text > summary::after { content: ' ↓'; }
.ma-more-text[open] > summary::after { content: ' ↑'; }
.ma-more-text[open] > .m2s-paras { margin-block-start: 14px; }

/* ---------- lesson player (TOTC course full view + meeting's course contents) ---------- */
.ma-player { display: flex; flex-direction: column; min-block-size: 100vh; }
.ma-pbar { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 10px var(--m2-pad); border-block-end: 1px solid var(--m2-line); background: color-mix(in oklab, var(--ats-bg) 85%, transparent); backdrop-filter: blur(12px); }
.ma-pbar-back { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 10px; border: 1px solid var(--ats-border); color: var(--ats-fg); }
.ma-pbar-back:hover { border-color: var(--ats-border-strong); }
.ma-pbar-brand { display: inline-flex; }
.ma-pbar-t { display: flex; flex-direction: column; gap: 6px; flex: 1; min-inline-size: 0; max-inline-size: 560px; }
.ma-pbar-course { margin: 0; font-family: var(--ats-font-display); font-weight: 600; font-size: var(--ats-text-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-pbar-pct { margin: 0 0 0 auto; font-size: var(--ats-text-label); color: var(--ats-muted-strong); white-space: nowrap; }
.ma-pgrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); flex: 1; }
.ma-pside { position: sticky; inset-block-start: 57px; align-self: start; max-block-size: calc(100vh - 57px); overflow: auto; padding: 18px 14px 32px; border-inline-end: 1px solid var(--m2-line); scrollbar-width: thin; box-sizing: border-box; }
.ma-pside-h { margin: 0 4px 12px; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ats-muted); }
.ma-psec { border: 1px solid var(--ats-border); border-radius: 12px; background: var(--m2-card); margin-block-end: 8px; overflow: hidden; }
.ma-psec.is-open { border-color: color-mix(in oklab, var(--ats-info) 35%, var(--ats-border)); }
.ma-psec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; padding: 11px 12px; border: 0; background: none; color: var(--ats-fg); font: inherit; font-size: var(--ats-text-ui); font-weight: 600; text-align: start; cursor: pointer; }
.ma-psec-n { font-size: var(--ats-text-micro); font-weight: 400; color: var(--ats-muted); }
.ma-plist { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 6px 8px; list-style: none; }
.ma-pitem { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; inline-size: 100%; padding: 8px 8px; border: 0; border-radius: 8px; background: none; color: var(--ats-muted-strong); font: inherit; font-size: var(--ats-text-label); text-align: start; cursor: pointer; }
.ma-pitem:hover { background: color-mix(in oklab, var(--ats-fg) 5%, transparent); color: var(--ats-fg); }
.ma-pitem-ic { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 6px; background: color-mix(in oklab, var(--ats-fg) 6%, transparent); color: var(--ats-muted); }
.ma-pitem.is-done .ma-pitem-ic { background: color-mix(in oklab, var(--ats-value-positive) 18%, transparent); color: var(--ats-value-positive); }
.ma-pitem.is-now { background: color-mix(in oklab, var(--ats-info) 12%, transparent); color: var(--ats-fg); }
.ma-pitem.is-now .ma-pitem-ic { background: var(--ats-grad-cta); color: var(--ats-accent-ink); }
.ma-pitem-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-pitem-d { font-size: var(--ats-text-micro); color: var(--ats-muted); }
.ma-pmain { display: flex; flex-direction: column; gap: 18px; min-inline-size: 0; max-inline-size: 1040px; padding: 22px clamp(16px, 3vw, 40px) 64px; box-sizing: border-box; }
.ma-pband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--ats-border-strong); background: radial-gradient(70% 140% at 100% 0%, var(--m2-glow), transparent 70%), var(--m2-card); }
.ma-pband-k { margin: 0 0 6px; font-size: var(--ats-text-micro); letter-spacing: 0.04em; color: var(--ats-accent-text); }
.ma-pband-t { margin: 0; font-family: var(--ats-font-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.ma-pband-d { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ats-text-ui); color: var(--ats-muted-strong); white-space: nowrap; }
.ma-pvideo { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -50px var(--m2-glow); }
.ma-quiz { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(28px, 5vw, 56px); border: 1px dashed var(--ats-border-strong); border-radius: 18px; background: var(--m2-card); }
.ma-quiz-k { margin: 0; font-size: var(--ats-text-micro); color: var(--ats-accent-text); text-transform: uppercase; letter-spacing: 0.08em; }
.ma-quiz-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title); }
.ma-quiz-x { margin: 0; color: var(--ats-muted-strong); }
.ma-pnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ma-ppanel { padding-block: 4px 8px; }
.ma-files { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ma-files li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ats-border); border-radius: 12px; background: var(--m2-card); }
.ma-files li > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-files strong { font-size: var(--ats-text-ui); color: var(--ats-fg); }
.ma-files-ic { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; background: color-mix(in oklab, var(--ats-info) 14%, transparent); color: var(--ats-accent-text); }
.ma-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; color: var(--ats-muted-strong); }
.ma-ask p { margin: 0; }
.ma-upnext { display: flex; flex-direction: column; gap: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--m2-line); }
.ma-upnext-k { margin: 0; font-size: var(--ats-text-micro); color: var(--ats-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ma-upnext-b { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ats-border); border-radius: 12px; background: var(--m2-card); color: var(--ats-fg); font: inherit; text-align: start; cursor: pointer; }
.ma-upnext-b:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); }
.ma-upnext-b .m2-mono { font-size: var(--ats-text-label); color: var(--ats-muted); }
@media (max-width: 1023px) {
  .ma-pgrid { grid-template-columns: minmax(0, 1fr); }
  .ma-pside { position: static; max-block-size: none; border-inline-end: 0; border-block-start: 1px solid var(--m2-line); order: 2; }
  .ma-pbar-pct { display: none; }
}
@media (max-width: 720px) {
  .ma-pband { flex-direction: column; align-items: flex-start; }
  .ma-pnav { flex-wrap: wrap; }
  .ma-pnav > :nth-child(2) { order: -1; flex-basis: 100%; }
  .ma-pbar .m-site-theme { display: none; }
}

/* ---------- instructor profile (TOTC literature course: the banner, avatar breaking out of it) ---------- */
.ma-prof { padding-block: clamp(20px, 3vw, 36px) 0; }
.ma-prof-banner {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 5vw, 56px); border: 1px solid var(--ats-border-strong); border-radius: 24px; background: linear-gradient(180deg, color-mix(in oklab, var(--ats-surface) 70%, transparent), var(--ats-bg));
}
.ma-prof-banner .m2-hero-glow { background: radial-gradient(40% 60% at 15% 50%, var(--m2-glow) 0%, transparent 70%), radial-gradient(30% 40% at 90% 100%, var(--m2-glow-2), transparent 70%); }
.ma-prof-avatar.ats-avatar { inline-size: clamp(120px, 16vw, 220px); block-size: clamp(120px, 16vw, 220px); box-shadow: 0 0 0 8px color-mix(in oklab, var(--ats-grad-cta-from) 20%, transparent), 0 30px 80px -30px var(--m2-glow); }
.ma-prof-id { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.ma-prof-name { font-size: clamp(34px, 5vw, 60px); }
.ma-prof-stats { margin-block-start: 16px; }
.ma-prof-panel { padding-block-start: 6px; }
.ma-prof-about { max-inline-size: 760px; }
.ma-grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 720px) { .ma-prof-banner { grid-template-columns: minmax(0, 1fr); } .ma-cat-bar { flex-wrap: wrap; } }

/* ---------- membership: tiers, the €1,000 band, comparison, benefits, packs ---------- */
.ma-tiers { padding-block-start: 0; }
.ma-tiers .ats-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ma-tiers-note { margin: 18px 0 0; text-align: center; font-size: var(--ats-text-ui); color: var(--ats-muted); }
.ma-tiers-note strong { color: var(--ats-fg); }
.ma-band { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); text-align: center; border: 1px solid var(--ats-border-strong); border-radius: 22px; background: color-mix(in oklab, var(--ats-surface) 70%, var(--ats-bg)); }
.ma-band-glow { position: absolute; inset: 30% -10% -60%; z-index: -1; background: radial-gradient(50% 50% at 50% 100%, var(--m2-glow), transparent 70%); }
.ma-band-t { margin: 0; font-family: var(--ats-font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; }
.ma-band-x { margin: 0; max-inline-size: 60ch; color: var(--ats-muted-strong); line-height: 1.6; }
.ma-compare { border: 1px solid var(--ats-border); border-radius: 16px; overflow-x: auto; background: var(--m2-card); }
.ma-compare table { inline-size: 100%; min-inline-size: 620px; border-collapse: collapse; font-size: var(--ats-text-ui); }
.ma-compare th, .ma-compare td { padding: 13px 16px; border-block-end: 1px solid var(--ats-border); text-align: center; color: var(--ats-muted-strong); }
.ma-compare thead th { font-family: var(--ats-font-display); font-weight: 600; color: var(--ats-fg); }
.ma-compare tbody th { text-align: start; font-weight: 500; color: var(--ats-fg); }
.ma-compare tr:last-child > * { border-block-end: 0; }
.ma-compare .is-vip { background: color-mix(in oklab, var(--ats-info) 8%, transparent); }
.ma-compare thead .is-vip { color: var(--ats-accent-text); }
.ma-compare .ma-yes { color: var(--ats-value-positive); vertical-align: middle; }
.ma-compare .ma-no { color: var(--ats-muted); opacity: 0.6; vertical-align: middle; }
.ma-compare-price td { font-weight: 500; color: var(--ats-fg); }
.ma-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ma-benefits li { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); }
.ma-benefits-n { font-size: var(--ats-text-micro); color: var(--ats-accent-text); }
.ma-benefits h3 { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; }
.ma-benefits p { margin: 0; font-size: var(--ats-text-ui); line-height: 1.55; color: var(--ats-muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ma-faq-a { margin: 0; line-height: 1.65; color: var(--ats-muted-strong); }
.ma-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ma-pack { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); }
.ma-pack-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ma-pack h3 { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; }
.ma-pack-price { margin: 0; font-size: var(--ats-text-title); font-weight: 500; }
.ma-pack ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: var(--ats-text-label); color: var(--ats-muted-strong); flex: 1; }
.ma-pack ul li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.ma-pack ul svg { color: var(--ats-value-positive); margin-block-start: 2px; }
.ma-pack .ats-btn { align-self: flex-start; }
@media (max-width: 1180px) { .ma-tiers .ats-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .ma-benefits, .ma-packs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .ma-tiers .ats-plan-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- checkout (TOTC checkout: the form beside the summary, offers under it) ---------- */
.ma-co-head { display: flex; flex-direction: column; gap: 16px; margin-block-end: clamp(24px, 3vw, 36px); }
.ma-co-steps { max-inline-size: 640px; }
.ma-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.ma-co-form { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--ats-border); border-radius: 20px; background: var(--m2-card); }
.ma-co-set { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0 0 18px; border: 0; border-block-end: 1px solid var(--ats-border); min-inline-size: 0; }
.ma-co-legend { padding: 0; margin-block-end: 4px; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; color: var(--ats-fg); }
.ma-co-hint { margin: 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-co-hint a { color: var(--ats-accent-text); }
.ma-co-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ma-co-fine { margin: 0; font-size: var(--ats-text-caption); color: var(--ats-muted); text-align: center; }
.ma-co-sum { position: sticky; inset-block-start: 84px; display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--ats-border-strong); border-radius: 20px; background: radial-gradient(90% 60% at 100% 0%, color-mix(in oklab, var(--ats-grad-cta-from) 14%, transparent), transparent 60%), var(--m2-card); box-shadow: 0 40px 90px -50px var(--m2-glow); }
.ma-co-sum-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-title-sm); font-weight: 600; }
.ma-co-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ma-co-cover { border-radius: 10px; border: 1px solid var(--ats-border); }
.ma-co-item-t { margin: 0; font-weight: 600; font-size: var(--ats-text-ui); line-height: 1.35; }
.ma-co-item-x { margin: 4px 0 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.ma-co-item-p { margin: 0; font-weight: 500; }
.ma-co-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.ma-co-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-block-start: 14px; border-block-start: 1px solid var(--ats-border); }
.ma-co-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--ats-text-ui); color: var(--ats-muted-strong); }
.ma-co-lines dt, .ma-co-lines dd { margin: 0; }
.ma-co-lines .is-total { padding-block-start: 10px; border-block-start: 1px solid var(--ats-border); font-size: var(--ats-text-lead); font-weight: 600; color: var(--ats-fg); }
.ma-co-gets { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 14px 0 0; list-style: none; border-block-start: 1px solid var(--ats-border); font-size: var(--ats-text-label); color: var(--ats-muted-strong); }
.ma-co-gets li { display: flex; gap: 8px; align-items: center; }
.ma-co-gets svg { color: var(--ats-value-positive); flex: none; }
.ma-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ma-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); }
.ma-offer.is-hi { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 55%, var(--ats-border)); background: radial-gradient(100% 80% at 100% 0%, color-mix(in oklab, var(--ats-grad-cta-from) 18%, transparent), transparent 60%), var(--m2-card); }
.ma-offer-k { margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ats-accent-text); }
.ma-offer-p { margin: 0; font-size: var(--ats-text-title); font-weight: 500; }
.ma-offer-p span { font-size: var(--ats-text-ui); color: var(--ats-muted); }
.ma-offer-x { margin: 0; font-size: var(--ats-text-ui); color: var(--ats-muted); line-height: 1.5; flex: 1; }
@media (max-width: 1023px) {
  .ma-co-grid { grid-template-columns: minmax(0, 1fr); }
  .ma-co-sum { position: static; order: -1; }
  .ma-offers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) { .ma-co-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sign in (TOTC login/register on the kit's AuthLayout; the photo is a wall of course art) ---------- */
.ma-auth-art { position: absolute; inset: 0; overflow: hidden; }
.ma-auth-wall { position: absolute; inset: -8% -20%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; transform: rotate(-8deg); opacity: 0.75; }
.ma-auth-wall .ma-cover { border-radius: 12px; border: 1px solid var(--ats-border); }
.ma-auth-veil { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 100%, var(--m2-glow), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--ats-bg) 20%, transparent), var(--ats-bg) 88%); }
.ma-auth-copy { position: absolute; inset-inline: clamp(24px, 4vw, 48px); inset-block-end: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 8px; }
.ma-auth-t { margin: 0; max-inline-size: 20ch; font-family: var(--ats-font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ats-fg); }
.ma-auth-x { margin: 0; font-family: var(--ats-font-mono); font-size: var(--ats-text-label); color: var(--ats-muted-strong); }
.ma-auth-seg { margin-block-end: 6px; }
.ma-auth-form { display: flex; flex-direction: column; gap: 14px; }
.ma-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--ats-text-label); }
.ma-auth-row a, .ma-auth-alt a { color: var(--ats-accent-text); }
.ma-auth-alt { margin: 14px 0 0; text-align: center; font-size: var(--ats-text-label); }
.ma-auth-switch { padding: 0; border: 0; background: none; color: var(--ats-accent-text); font: inherit; cursor: pointer; text-decoration: underline; }
.ma-auth a:has(> .ats-brandmark), .ma-auth .ats-auth-brand > a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }