/* NinjaSite Academy visual refresh — readable, tactile, and intentionally designed. */
.na {
  --navy: #071a2c;
  --navy-2: #0d2e49;
  --ink: #10263d;
  --muted: #536d84;
  --blue: #1d7ff2;
  --blue-dark: #1265c7;
  --cyan: #70c8ff;
  --lime: #c7f000;
  --canvas: #e8eef4;
  --surface: #f7fafc;
  --surface-2: #eef4f8;
  --line: #cfdce7;
  font-size: 17px;
  line-height: 1.7;
  background: var(--canvas);
  color: var(--ink);
}

.na .btn {
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.15px;
  box-shadow: 0 10px 24px #0a4f9c24;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.na .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px #0a4f9c32;
}

.na .btn.secondary,
.na .btn.light {
  background: #f8fbfd;
  border-color: #bfd0de;
  box-shadow: 0 8px 20px #0c2a4512;
}

.na .link {
  font-size: 15px;
  font-weight: 750;
}

.na .eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
}

.na .card {
  background: linear-gradient(145deg, #fbfdff, #f3f7fa);
  border: 1px solid #cedce7;
  border-radius: 18px;
  box-shadow: 0 16px 44px #102e4810;
}

/* Public navigation and hero */
.na .public-top {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 22%, #23557a 0, #102f4d 22%, transparent 48%),
    linear-gradient(125deg, #061523 0%, #0a2035 54%, #0a2944 100%);
}

.na .public-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .24;
  background-image:
    linear-gradient(#7bc8ff14 1px, transparent 1px),
    linear-gradient(90deg, #7bc8ff14 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent);
}

.na .weekly-ribbon {
  min-height: 46px;
  padding: 11px 24px;
  font-size: 12.5px;
  letter-spacing: 1px;
  background: #153f61;
  border-bottom: 1px solid #7cc9ff1f;
}

.na .weekly-ribbon .status-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #55adf51d, 0 0 16px #64c6ff;
}

.na .public-nav {
  max-width: 1380px;
  height: 108px;
  padding: 24px 44px;
}

.na .public-nav .brand img {
  width: 57px;
  height: 57px;
}

.na .public-nav .brand-academy {
  font-size: 27px;
}

.na .public-nav nav {
  gap: 34px;
  font-size: 15px;
  font-weight: 750;
}

.na .public-nav nav > a:not(.btn) {
  position: relative;
  padding: 13px 0;
}

.na .public-nav nav > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 6px;
  height: 2px;
  background: var(--cyan);
  transition: right .2s ease;
}

.na .public-nav nav > a:not(.btn):hover::after {
  right: 0;
}

.na .public-nav nav .btn {
  min-height: 50px;
  padding: 13px 21px;
  font-size: 14px;
}

.na .public-hero {
  grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
  gap: clamp(44px, 5vw, 82px);
  min-height: 780px;
  padding-top: 76px;
  padding-bottom: 62px;
}

.na .hero-copy {
  position: relative;
  z-index: 2;
}

.na .hero-title {
  max-width: 720px;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(54px, 5.1vw, 76px);
  line-height: 1.02;
  letter-spacing: -4px;
  font-weight: 730;
}

.na .hero-title em {
  display: block;
  margin-top: 14px;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(44px, 4vw, 61px);
  line-height: 1.08;
  letter-spacing: -2.8px;
  font-weight: 400;
  color: #82c8ff;
}

.na .hero-description {
  max-width: 660px;
  margin: 28px 0 27px;
  color: #c1d3e2;
  font-size: 19px;
  line-height: 1.72;
}

.na .hero-copy .actions {
  gap: 22px;
}

.na .hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  color: #d8eafa;
  font-size: 14px;
  font-weight: 750;
}

.na .hero-text-link .icon {
  width: 18px;
}

.na .hero-outcomes {
  display: grid;
  gap: 0;
  margin-top: 34px;
  max-width: 650px;
  border-top: 1px solid #b7d6ec30;
}

.na .hero-outcomes > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #b7d6ec24;
}

.na .hero-outcomes .icon {
  width: 22px;
  height: 22px;
  color: #73c6ff;
}

.na .hero-outcomes strong,
.na .hero-outcomes small {
  display: block;
}

.na .hero-outcomes strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: -.2px;
}

.na .hero-outcomes small {
  margin-top: 2px;
  color: #9eb7cb;
  font-size: 12px;
  line-height: 1.5;
}

.na .hero-fine {
  margin-top: 20px;
  color: #9bb3c7;
  font-size: 11px;
  letter-spacing: .15px;
}

.na .hero-fine strong {
  color: #cde7fb;
  margin-left: 6px;
}

.na .hero-design-lab {
  position: relative;
  align-self: center;
  min-width: 0;
}

.na .hero-design-lab::before,
.na .hero-design-lab::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.na .hero-design-lab::before {
  width: 150px;
  height: 150px;
  right: -30px;
  top: -42px;
  border: 1px solid #78c9ff40;
  box-shadow: inset 0 0 50px #2b8cdc18;
}

.na .hero-design-lab::after {
  width: 16px;
  height: 16px;
  left: -8px;
  bottom: 82px;
  background: var(--lime);
  box-shadow: 0 0 30px #c7f0008c;
}

.na .hero-image-frame {
  position: relative;
  overflow: hidden;
  padding: 8px;
  border: 1px solid #9dd6ff5c;
  border-radius: 26px;
  background: linear-gradient(145deg, #ffffff1e, #51b3f20a);
  box-shadow: 0 34px 90px #000a, 0 0 0 12px #3ba4ed0a;
}

.na .hero-image-frame img {
  display: block;
  width: 100%;
  min-height: 455px;
  object-fit: cover;
  border-radius: 19px;
}

.na .hero-image-badge {
  position: absolute;
  top: 25px;
  left: 25px;
  padding: 8px 11px;
  border: 1px solid #b7e0ff60;
  border-radius: 999px;
  background: #071b2dd9;
  backdrop-filter: blur(8px);
  color: #d8eeff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.na .hero-design-lab figcaption {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 19px 8px 0;
  color: #a9c1d5;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.na .hero-design-lab figcaption span {
  color: #6fc3ff;
  font-weight: 800;
}

.na .hero-design-lab figcaption strong {
  color: #d6e8f5;
  font-size: 10px;
}

.na .hero-design-lab figcaption i {
  height: 1px;
  background: #7abce94a;
}

.na .hero-proof-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 72px;
  border-top: 1px solid #a9d4f124;
  color: #b8ccdc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.na .hero-proof-strip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
}

/* Public content */
.na .experience-section {
  max-width: none;
  padding-top: 105px;
  padding-bottom: 96px;
  background:
    radial-gradient(circle at 10% 90%, #8ecbff24, transparent 28%),
    #eef3f6;
}

.na .experience-section > * {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.na .section-opening {
  align-items: center;
}

.na .large-heading,
.na .large-heading em {
  font-size: clamp(42px, 4vw, 57px);
  line-height: 1.1;
}

.na .section-opening > p {
  color: #405d74;
  font-size: 18px;
  line-height: 1.85;
}

.na .simple-learning {
  gap: 22px;
  margin-top: 54px;
}

.na .simple-learning article {
  position: relative;
  min-height: 330px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid #c9d9e5;
  border-radius: 20px;
  background: linear-gradient(145deg, #fafdff, #eaf1f6);
  box-shadow: 0 18px 40px #17344b0d;
  transition: transform .2s ease, box-shadow .2s ease;
}

.na .simple-learning article:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 55px #17344b18;
}

.na .simple-learning article > span {
  position: absolute;
  top: 24px;
  right: 25px;
  width: auto;
  height: auto;
  margin: 0;
  color: #5f7d95;
  background: transparent;
  font-size: 13px;
}

.na .step-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 42px;
  border-radius: 17px;
  color: #2083e9;
  background: linear-gradient(145deg, #d9ecff, #f4f9fe);
  box-shadow: inset 0 0 0 1px #7bbbf137;
}

.na .step-icon .icon {
  width: 28px;
  height: 28px;
}

.na .simple-learning h3 {
  max-width: 300px;
  font-size: 26px;
  line-height: 1.2;
}

.na .simple-learning p {
  color: #4f6b81;
  font-size: 16px;
  line-height: 1.75;
}

.na .live-section {
  padding: 96px 0;
  background:
    linear-gradient(120deg, #dce8f1, #edf3f7 55%, #d8e6f1),
    #e5edf3;
}

.na .thursday-poster {
  padding: 46px;
  border-radius: 24px;
  border-color: #8dcaff45;
  background:
    radial-gradient(circle at 95% 5%, #2f6a925c, transparent 37%),
    linear-gradient(145deg, #0b1e32, #123d5b);
  box-shadow: 0 32px 70px #0b223a35;
}

.na .weekly-call-times > div {
  padding: 15px 0;
}

.na .weekly-call-times strong {
  font-size: 30px;
}

.na .weekly-call-times span {
  font-size: 20px;
}

.na .thursday-poster h3 {
  font-size: 35px;
}

.na .live-copy p {
  color: #3f5d73;
  font-size: 17px;
  line-height: 1.85;
}

.na .experience-story {
  background:
    linear-gradient(90deg, #ffffff08 1px, transparent 1px),
    linear-gradient(#ffffff08 1px, transparent 1px),
    #081c2f;
  background-size: 64px 64px;
}

.na .experience-inner {
  padding-top: 90px;
  padding-bottom: 90px;
}

.na .experience-story h2,
.na .experience-story h2 em {
  font-size: 46px;
  line-height: 1.16;
}

.na .experience-prose p {
  color: #c0d2df;
  font-size: 15px;
}

.na .faq-section {
  padding-top: 94px;
  padding-bottom: 94px;
  background: #edf2f5;
}

.na .faq-list details {
  padding: 22px 4px;
}

.na .faq-list summary {
  font-size: 16px;
  font-weight: 750;
}

.na .faq-list details p {
  font-size: 15px;
  line-height: 1.75;
}

.na .closing-stage {
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 0, #35749e99, transparent 38%),
    #0b2942;
  box-shadow: 0 28px 60px #071a2c2b;
}

/* Authentication */
.na .auth-page {
  max-width: 1220px;
  gap: 90px;
  padding-top: 70px;
  background: transparent;
}

.na .auth-story h1,
.na .auth-story h1 em {
  font-size: clamp(43px, 4.5vw, 61px);
  line-height: 1.08;
}

.na .auth-story > p {
  color: #b7cede;
  font-size: 17px;
}

.na .auth-note {
  color: #a8bed0;
  font-size: 13px;
}

.na .auth-art .roadmap-studio {
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0, #2d6385, transparent 40%),
    #0c2942;
}

.na .roadmap-studio {
  transform: none;
}

.na .auth-card {
  padding: 42px;
  border-radius: 22px;
  border: 1px solid #c6d7e4;
  background: linear-gradient(145deg, #fbfdff, #edf4f8);
  box-shadow: 0 28px 80px #0a29441c;
}

.na .auth-card h2 {
  font-size: 31px;
}

.na .auth-card > p,
.na .auth-card .hint,
.na .auth-card .checkbox,
.na .auth-card .auth-after {
  font-size: 14px;
}

/* Application shell and primary navigation */
.na .shell {
  grid-template-columns: 288px minmax(0, 1fr);
  background: linear-gradient(90deg, #071a2c 288px, var(--canvas) 288px);
}

.na .sidebar {
  width: 288px;
  padding: 30px 20px 22px;
  color: #d5e3ee;
  border-right: 1px solid #66bffb21;
  background:
    radial-gradient(circle at 0 0, #1b5175 0, transparent 34%),
    linear-gradient(180deg, #081c2f, #061624);
  box-shadow: 18px 0 45px #06152418;
}

.na .sidebar .brand {
  padding: 0 9px 31px;
  color: #fff;
}

.na .sidebar .brand img {
  width: 49px;
  height: 49px;
}

.na .sidebar .brand-academy {
  font-size: 24px;
}

.na .sidebar .brand-product,
.na .sidebar .brand-name small {
  color: #a8c0d3;
}

.na .sidebar .brand-lockup {
  border-color: #ffffff35;
}

.na .nav-group {
  margin: 18px 14px 10px;
  color: #7692a9;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 2px;
}

.na .nav-item,
.na .sidebar-foot .nav-item {
  min-height: 50px;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 11px;
  color: #b8cad8;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.na .nav-item .icon {
  width: 20px;
  height: 20px;
  color: #7aa8ca;
}

.na .nav-item:hover {
  color: #fff;
  background: #ffffff0b;
}

.na .nav-item.active {
  color: #fff;
  background: linear-gradient(105deg, #176fc8, #268ee7);
  box-shadow: 0 10px 26px #006dca35;
}

.na .nav-item.active .icon {
  color: #fff;
}

.na .sidebar-foot {
  padding-top: 24px;
  border-top: 1px solid #ffffff13;
}

.na .sponsor-note,
.na .sidebar .sponsor-note {
  margin-top: 18px;
  padding: 17px;
  border-color: #7bc8ff24;
  background: #77c7ff0b;
  color: #91a9bc;
  font-size: 12px;
}

.na .sponsor-note strong {
  color: #d7ebfa;
}

.na .workspace {
  position: relative;
  background:
    radial-gradient(circle at 85% 0, #c9e7fb88, transparent 26%),
    linear-gradient(180deg, #e7eef4, #eef3f7 70%, #e6edf3);
}

.na .app-top {
  height: 86px;
  padding: 0 42px;
  border-bottom: 1px solid #c9d9e4;
  background: #f7fafccd;
  backdrop-filter: blur(14px);
}

.na .breadcrumb {
  color: #6c8396;
  font-size: 14px;
}

.na .breadcrumb strong {
  color: #173c5a;
  font-weight: 750;
}

.na .top-actions .link {
  font-size: 14px;
}

.na .account-name {
  font-size: 14px;
}

.na .account-name small {
  font-size: 11px;
}

.na .avatar {
  width: 43px;
  height: 43px;
  font-size: 13px;
}

.na .app-main {
  max-width: 1510px;
  padding: 40px 44px 90px;
}

/* Every interior page begins with a designed editorial banner. */
.na .page-title {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  min-height: 210px;
  margin-bottom: 32px;
  padding: 37px 42px;
  overflow: hidden;
  border: 1px solid #4c8fbd42;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, #2c698f 0, transparent 29%),
    linear-gradient(125deg, #081c2f 0%, #0d304b 65%, #123d5b 100%);
  box-shadow: 0 22px 55px #0b294421;
}

.na .page-title::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(#9ed6ff14 1px, transparent 1px),
    linear-gradient(90deg, #9ed6ff14 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.na .page-title-copy {
  position: relative;
  z-index: 1;
}

.na .page-title .eyebrow {
  color: #83c9fb;
}

.na .page-title h1 {
  max-width: 910px;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(36px, 3.3vw, 49px);
  line-height: 1.08;
  letter-spacing: -2px;
  font-weight: 690;
}

.na .page-title p,
.na .page-title > p {
  max-width: 820px;
  margin-top: 14px;
  color: #c0d5e5;
  font-size: 17px;
  line-height: 1.65;
}

.na .page-title-art {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 122px;
  justify-self: end;
}

.na .page-title-art span {
  position: absolute;
  display: block;
  width: 118px;
  height: 76px;
  border: 1px solid #8dd0ff5c;
  border-radius: 9px;
  background: linear-gradient(145deg, #a9dfff1c, #ffffff04);
  box-shadow: inset 0 0 0 5px #ffffff05;
}

.na .page-title-art span::before {
  content: '';
  display: block;
  height: 9px;
  border-bottom: 1px solid #8dd0ff45;
}

.na .page-title-art span:nth-child(1) {
  left: 0;
  top: 8px;
}

.na .page-title-art span:nth-child(2) {
  right: 0;
  top: 30px;
}

.na .page-title-art span:nth-child(3) {
  left: 30px;
  bottom: 0;
  width: 72px;
  height: 48px;
  background: #238be42b;
}

.na .page-title-art i {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 20px #c7f000a1;
}

/* Member dashboard and lessons */
.na .focused-home {
  gap: 28px;
}

.na .welcome-player {
  position: relative;
  padding: 37px;
  overflow: hidden;
}

.na .welcome-player::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--lime));
}

.na .welcome-player-title h2 {
  font-size: 34px;
}

.na .welcome-copy {
  color: #405e76;
  font-size: 17px;
}

.na .welcome-video {
  border-radius: 18px;
  background:
    radial-gradient(circle at 65% 0, #285b7e, transparent 43%),
    linear-gradient(135deg, #081c30, #123b59);
  box-shadow: inset 0 0 0 1px #87cdff25, 0 18px 35px #0a2b421d;
}

.na .video-pending strong {
  font-size: 22px;
}

.na .video-pending p {
  font-size: 15px;
}

.na .next-call-panel {
  position: relative;
  overflow: hidden;
  padding: 35px;
  border: 1px solid #77bff23d;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, #35769e8c, transparent 36%),
    linear-gradient(145deg, #081c30, #123b59);
  box-shadow: 0 24px 55px #0a2d4828;
}

.na .next-call-panel::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border: 1px solid #86d1ff32;
  border-radius: 50%;
}

.na .next-call-panel h2 {
  font-size: 38px;
}

.na .next-call-panel > p,
.na .next-call-panel .next-call-date {
  font-size: 16px;
}

.na .your-first-steps {
  padding: 23px 28px;
  border: 1px solid #ccdbe6;
  border-radius: 15px;
  background: #f4f8fb;
  font-size: 14px;
}

.na .note-banner,
.na .reminder-control,
.na .next-action,
.na .path-choice {
  border-radius: 15px;
  border-color: #bcd7ea;
  background: linear-gradient(135deg, #e7f3fc, #f3f8fb);
}

.na .note-banner {
  padding: 20px 23px;
  font-size: 15px;
}

.na .course-grid {
  gap: 24px;
}

.na .plain-course {
  position: relative;
  min-height: 190px;
  padding: 30px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, #cceaff, transparent 35%),
    linear-gradient(145deg, #fbfdff, #edf4f8);
  box-shadow: 0 14px 32px #102e4810;
}

.na .plain-course::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  right: -35px;
  bottom: -42px;
  border: 1px solid #4d9cd63b;
  border-radius: 50%;
}

.na .plain-course:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px #102e481c;
}

.na .plain-course-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(145deg, #d7ebfb, #f8fbfe);
  box-shadow: inset 0 0 0 1px #5da7dd2c;
}

.na .plain-course h3,
.na .app-main .course-body h3 {
  font-size: 23px;
}

.na .plain-course .course-body p,
.na .app-main .course-body p {
  color: #4b687f;
  font-size: 15px;
}

.na .lesson-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
}

.na .lesson-main {
  padding: 40px;
}

.na .lesson-objective {
  color: #34556e;
  font-size: 20px;
}

.na .reading-heading {
  padding-top: 36px;
  color: #477897;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.5px;
}

.na .prose p,
.na .lesson-main .prose p {
  color: #314f67;
  font-size: 18px;
  line-height: 1.92;
}

.na .next-action {
  padding: 30px;
}

.na .next-action .eyebrow {
  font-size: 10px;
}

.na .next-action li,
.na ol {
  color: #34576f;
  font-size: 16px;
  line-height: 1.82;
}

.na .lesson-nav {
  position: sticky;
  top: 105px;
  padding: 26px;
  border-radius: 18px;
}

.na .lesson-nav h3 {
  font-size: 20px;
}

.na .lesson-link {
  gap: 13px;
  padding: 16px 12px;
  font-size: 14px;
}

.na .lesson-link h3 {
  font-size: 17px;
}

.na .lesson-link p,
.na .lesson-nav p {
  font-size: 14px;
}

/* Live calls, community, forms, and administration */
.na .live-details-hero {
  padding: 38px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0, #d8edfc, transparent 35%),
    linear-gradient(135deg, #fbfdff, #edf4f8);
  box-shadow: 0 18px 45px #102e4812;
}

.na .live-details-hero > div h2 {
  font-size: 42px;
}

.na .live-details-hero > div p {
  color: #3d5b72;
  font-size: 18px;
}

.na .call-list {
  gap: 19px;
}

.na .call-row {
  padding: 28px;
  border-radius: 17px;
  background:
    linear-gradient(90deg, #f9fcfe, #eff5f9);
  box-shadow: 0 12px 28px #102e480c;
  transition: transform .18s ease, box-shadow .18s ease;
}

.na .call-row:hover {
  transform: translateX(4px);
  box-shadow: 0 18px 36px #102e4818;
}

.na .call-row h3 {
  font-size: 22px;
}

.na .call-row p,
.na .call-row small {
  font-size: 15px;
}

.na .call-date-icon {
  border: 1px solid #b8d6ea;
  background: linear-gradient(145deg, #ddecf7, #f8fbfd);
}

.na .call-detail,
.na .invite-callout,
.na .guidelines {
  padding: 38px;
}

.na .call-detail > p,
.na .invite-callout p,
.na .guidelines p {
  color: #3c5b72;
  font-size: 17px;
  line-height: 1.9;
}

.na .guidelines h3 {
  margin-top: 35px;
  color: #0e3958;
  font-size: 22px;
}

.na .community-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
}

.na .composer {
  padding: 25px;
  border-radius: 17px;
}

.na .composer button {
  padding: 16px;
  border-radius: 11px;
  background: #eef4f8;
  font-size: 15px;
}

.na .post,
.na .question,
.na .review-card {
  padding: 31px;
  border-radius: 18px;
}

.na .post h3 {
  font-size: 24px;
}

.na .post-body,
.na .question p,
.na .review-card .review-text {
  color: #3b5b73;
  font-size: 16px;
  line-height: 1.85;
}

.na .community-side .side-card,
.na .side-card {
  padding: 28px;
  border-radius: 18px;
}

.na .side-card h3,
.na .community-side h3 {
  font-size: 21px;
}

.na .side-card p,
.na .rules li {
  font-size: 14px;
}

.na .split,
.na .settings-grid {
  gap: 28px;
}

.na .form-card,
.na .editor {
  padding: 34px;
}

.na .form-card h2,
.na .editor h2 {
  font-size: 26px;
}

.na .field label,
.na label {
  color: #274860;
  font-size: 14px;
  font-weight: 750;
}

.na input:not([type=checkbox]),
.na textarea,
.na select,
.na .field input,
.na .field textarea,
.na .field select {
  min-height: 51px;
  border-color: #b9ccda;
  border-radius: 10px;
  background: #f8fbfd;
  color: #14324a;
  font-size: 16px;
}

.na textarea {
  min-height: 135px;
}

.na .hint,
.na .form-card .hint,
.na .form-card .small,
.na .checkbox {
  font-size: 13px;
}

.na .admin-stats {
  gap: 20px;
}

.na .admin-stat {
  position: relative;
  min-height: 145px;
  padding: 25px;
  overflow: hidden;
  border-radius: 17px;
  border-top: 0;
  background:
    radial-gradient(circle at 100% 0, #cdeaff, transparent 43%),
    linear-gradient(145deg, #fbfdff, #edf4f8);
}

.na .admin-stat::after {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: 92px;
  height: 92px;
  border: 1px solid #5aa8dc38;
  border-radius: 50%;
}

.na .admin-stat span {
  color: #496981;
  font-size: 13px;
  font-weight: 700;
}

.na .admin-stat strong {
  font-size: 39px;
  font-weight: 650;
}

.na .table-wrap {
  border-radius: 17px;
  border-color: #c9d9e4;
  background: #f7fafc;
  box-shadow: 0 14px 35px #102e480c;
}

.na table {
  font-size: 15px;
}

.na th {
  padding: 19px 21px;
  color: #41617a;
  background: #e4edf4;
  font-size: 11px;
  font-weight: 850;
}

.na td {
  padding: 20px 21px;
  color: #385871;
  background: #f8fbfd;
}

.na tr:nth-child(even) td {
  background: #f1f6f9;
}

.na td strong {
  font-size: 15px;
}

.na td small {
  font-size: 13px;
}

.na .schedule-admin-grid {
  gap: 24px;
}

.na .schedule-admin-grid .editor {
  position: relative;
  overflow: hidden;
}

.na .schedule-admin-grid .editor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #1d7ff2, #6fc9ff);
}

@media (max-width: 1200px) {
  .na .shell {
    grid-template-columns: 255px minmax(0, 1fr);
    background: linear-gradient(90deg, #071a2c 255px, var(--canvas) 255px);
  }

  .na .sidebar {
    width: 255px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .na .nav-item,
  .na .sidebar-foot .nav-item {
    font-size: 14px;
  }

  .na .public-hero {
    grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
    gap: 38px;
  }

  .na .hero-title {
    font-size: 56px;
    letter-spacing: -3px;
  }

  .na .hero-title em {
    font-size: 46px;
  }

  .na .hero-image-frame img {
    min-height: 390px;
  }

  .na .app-main {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 1000px) {
  .na .public-nav nav {
    font-size: 13px;
  }

  .na .public-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 64px;
  }

  .na .hero-copy {
    max-width: 820px;
  }

  .na .hero-design-lab {
    width: min(820px, 100%);
    margin: 12px auto 0;
  }

  .na .hero-image-frame img {
    min-height: 0;
  }

  .na .hero-proof-strip {
    flex-wrap: wrap;
  }

  .na .lesson-layout,
  .na .community-layout {
    grid-template-columns: 1fr;
  }

  .na .lesson-nav {
    position: static;
  }

  .na .community-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .na {
    font-size: 16px;
  }

  .na .weekly-ribbon {
    min-height: 44px;
    font-size: 10px;
  }

  .na .public-nav {
    height: 88px;
    padding: 18px 21px;
  }

  .na .public-nav nav .btn {
    min-height: 42px;
    font-size: 11px;
  }

  .na .public-hero {
    padding-top: 45px;
    padding-bottom: 44px;
  }

  .na .hero-title {
    font-size: 45px;
    letter-spacing: -2.2px;
  }

  .na .hero-title em {
    margin-top: 10px;
    font-size: 37px;
    letter-spacing: -1.7px;
  }

  .na .hero-description {
    font-size: 17px;
  }

  .na .hero-outcomes > div {
    padding: 14px 0;
  }

  .na .hero-outcomes small {
    font-size: 12px;
  }

  .na .hero-image-frame {
    padding: 5px;
    border-radius: 17px;
  }

  .na .hero-image-frame img {
    border-radius: 12px;
  }

  .na .hero-design-lab figcaption {
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
  }

  .na .hero-design-lab figcaption i {
    display: none;
  }

  .na .hero-proof-strip {
    justify-content: flex-start;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .na .hero-proof-strip span {
    width: 100%;
  }

  .na .hero-proof-strip i {
    display: none;
  }

  .na .experience-section,
  .na .live-section,
  .na .faq-section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .na .large-heading,
  .na .large-heading em {
    font-size: 39px;
  }

  .na .section-opening > p,
  .na .live-copy p {
    font-size: 16px;
  }

  .na .simple-learning article {
    min-height: 0;
    padding: 28px;
  }

  .na .step-icon {
    margin-bottom: 29px;
  }

  .na .thursday-poster {
    padding: 29px;
  }

  .na .experience-story h2,
  .na .experience-story h2 em {
    font-size: 35px;
  }

  .na .shell {
    grid-template-columns: 1fr;
    background: var(--canvas);
  }

  .na .sidebar {
    width: min(310px, 88vw);
    padding: 25px 17px;
  }

  .na .app-top {
    height: 72px;
    padding: 0 17px;
  }

  .na .app-main {
    padding: 22px 17px 95px;
  }

  .na .section-head {
    flex-wrap: wrap;
  }

  .na .section-head .btn {
    max-width: 100%;
    white-space: normal;
  }

  .na .table-wrap {
    width: 100%;
    max-width: 100%;
  }

  .na .page-title {
    grid-template-columns: 1fr 72px;
    min-height: 190px;
    padding: 28px 24px;
    border-radius: 18px;
  }

  .na .page-title h1 {
    font-size: 32px;
    letter-spacing: -1.3px;
  }

  .na .page-title p,
  .na .page-title > p {
    font-size: 14px;
  }

  .na .page-title-art {
    width: 70px;
    height: 92px;
    opacity: .72;
  }

  .na .page-title-art span {
    width: 63px;
    height: 42px;
  }

  .na .page-title-art span:nth-child(2) {
    top: 25px;
  }

  .na .page-title-art span:nth-child(3) {
    left: 10px;
    width: 47px;
    height: 30px;
  }

  .na .welcome-player,
  .na .lesson-main,
  .na .call-detail,
  .na .invite-callout,
  .na .guidelines,
  .na .form-card,
  .na .editor,
  .na .post,
  .na .question,
  .na .review-card {
    padding: 24px;
  }

  .na .next-call-panel {
    padding: 27px;
  }

  .na .next-call-panel h2 {
    font-size: 33px;
  }

  .na .your-first-steps {
    padding: 20px;
  }

  .na .plain-course {
    min-height: 0;
    padding: 24px 20px;
  }

  .na .lesson-objective {
    font-size: 18px;
  }

  .na .prose p,
  .na .lesson-main .prose p {
    font-size: 16px;
  }

  .na .next-action li,
  .na ol {
    font-size: 15px;
  }

  .na .live-details-hero {
    padding: 25px;
  }

  .na .live-details-hero > div h2 {
    font-size: 32px;
  }

  .na .live-details-hero > div p {
    font-size: 16px;
  }

  .na .call-row {
    padding: 21px;
  }

  .na .community-side {
    display: block;
  }

  .na .admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .na .admin-stat {
    min-height: 125px;
  }

  .na input:not([type=checkbox]),
  .na textarea,
  .na select,
  .na .field input,
  .na .field textarea,
  .na .field select {
    font-size: 16px;
  }
}

@media (max-width: 440px) {
  .na .public-nav {
    gap: 10px;
  }

  .na .public-nav .brand {
    min-width: 0;
  }

  .na .public-nav .brand img {
    width: 40px;
    height: 40px;
  }

  .na .public-nav .brand-lockup {
    padding-left: 8px;
  }

  .na .public-nav .brand-product {
    font-size: 8px;
  }

  .na .public-nav .brand-academy {
    font-size: 19px;
  }

  .na .public-nav nav {
    gap: 0;
  }

  .na .public-nav nav .public-login {
    display: none !important;
  }

  .na .public-nav nav .btn {
    max-width: 115px;
    padding: 9px 11px;
    font-size: 10px;
    line-height: 1.25;
  }

  .na .hero-title {
    font-size: 39px;
  }

  .na .hero-title em {
    font-size: 32px;
  }

  .na .hero-copy .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .na .hero-text-link {
    justify-content: center;
  }

  .na .hero-image-badge {
    top: 14px;
    left: 14px;
    font-size: 7px;
  }

  .na .page-title {
    grid-template-columns: 1fr;
  }

  .na .page-title-art {
    display: none;
  }

  .na .page-title h1 {
    font-size: 30px;
  }

  .na .admin-stats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .na .hero-image-frame {
    animation: academy-float 7s ease-in-out infinite;
  }

  .na .page-title-art span:nth-child(2) {
    animation: academy-panel 6s ease-in-out infinite;
  }
}

@keyframes academy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes academy-panel {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Homepage hero — compact, outcome-led, and purpose-built for the Academy. */
.na .public-nav {
  height: 96px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.na .public-hero.hero-v3 {
  grid-template-columns: minmax(0, .94fr) minmax(530px, 1.06fr);
  gap: clamp(46px, 5vw, 76px);
  min-height: 0;
  padding-top: 48px;
  padding-bottom: 52px;
}

.na .hero-v3 .hero-title {
  max-width: 620px;
  font-size: clamp(50px, 4.25vw, 64px);
  line-height: 1.015;
  letter-spacing: -3.4px;
  text-wrap: balance;
}

.na .hero-v3 .hero-title em {
  max-width: 560px;
  margin-top: 18px;
  font-size: clamp(27px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -1.25px;
  text-wrap: balance;
}

.na .hero-v3 .hero-description {
  max-width: 600px;
  margin: 22px 0 24px;
  font-size: 17px;
  line-height: 1.65;
}

.na .hero-v3 .hero-value-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 620px;
  margin-top: 27px;
  padding-top: 18px;
  border-top: 1px solid #afd3ec2c;
  color: #dbeaf5;
  font-size: 11px;
}

.na .hero-v3 .hero-value-line > span {
  width: 100%;
  color: #74c6ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.55px;
}

.na .hero-v3 .hero-value-line strong {
  font-size: 12px;
  font-weight: 750;
}

.na .hero-v3 .hero-value-line i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
}

.na .hero-v3 .hero-fine {
  margin-top: 13px;
}

.na .hero-pathway-board {
  position: relative;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #70b8e74d;
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0, #268bd229, transparent 38%),
    linear-gradient(145deg, #102f49, #0a2136 64%, #081b2e);
  box-shadow: 0 32px 80px #0007, inset 0 1px #ffffff14;
}

.na .hero-pathway-board::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--cyan), var(--blue) 58%, var(--lime));
}

.na .pathway-grid {
  position: absolute;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image:
    linear-gradient(#8ccfff22 1px, transparent 1px),
    linear-gradient(90deg, #8ccfff22 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(135deg, transparent 5%, #000 45%, transparent 96%);
}

.na .hero-pathway-board > header,
.na .hero-pathway-board > footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px 16px 26px;
  color: #a9c8df;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.35px;
}

.na .hero-pathway-board > header {
  border-bottom: 1px solid #9ed6f72a;
}

.na .pathway-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dbefff;
}

.na .pathway-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px #c7f00014, 0 0 18px #c7f00070;
}

.na .pathway-intro {
  position: relative;
  z-index: 1;
  padding: 29px 26px 22px;
}

.na .pathway-intro > span,
.na .pathway-impact > span {
  color: #72c7ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.7px;
}

.na .pathway-intro h2 {
  margin-top: 9px;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(29px, 2.5vw, 38px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: 760;
}

.na .pathway-intro h2 em {
  display: block;
  margin-top: 7px;
  color: #91cbf5;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: .83em;
  line-height: 1.18;
  letter-spacing: -1px;
  font-weight: 400;
}

.na .pathway-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 0 22px 23px 26px;
}

.na .pathway-route article {
  min-width: 0;
  padding: 16px 13px 14px;
  border: 1px solid #9bcff02b;
  border-radius: 7px;
  background: #ffffff09;
}

.na .pathway-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-bottom: 21px;
  border: 1px solid #6fc8ff61;
  border-radius: 50%;
  color: #8fd3ff;
  font-size: 9px;
  font-weight: 850;
}

.na .pathway-route small,
.na .pathway-route strong,
.na .pathway-route p {
  display: block;
}

.na .pathway-route small {
  min-height: 25px;
  color: #70c5ff;
  font-size: 7px;
  line-height: 1.45;
  letter-spacing: 1px;
}

.na .pathway-route strong {
  min-height: 49px;
  margin-top: 7px;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: -.1px;
}

.na .pathway-route p {
  margin-top: 8px;
  color: #93aec2;
  font-size: 9px;
  line-height: 1.45;
}

.na .pathway-arrow {
  display: grid;
  place-items: center;
  color: var(--lime);
}

.na .pathway-arrow .icon {
  width: 17px;
}

.na .pathway-impact {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 22px 20px 26px;
  padding: 15px 17px;
  border-left: 2px solid var(--lime);
  background: linear-gradient(90deg, #c7f00013, #ffffff08);
}

.na .pathway-impact > span {
  color: var(--lime);
}

.na .pathway-impact p {
  color: #d2e2ee;
  font-size: 11px;
  line-height: 1.55;
}

.na .hero-pathway-board > footer {
  justify-content: flex-start;
  border-top: 1px solid #9ed6f72a;
  background: #04131f38;
}

.na .hero-pathway-board > footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c2d9ea;
  letter-spacing: .5px;
}

.na .hero-pathway-board > footer .icon {
  width: 12px;
  height: 12px;
  color: #71c6ff;
}

.na .hero-pathway-board > footer strong {
  margin-left: auto;
  color: #648ba8;
  font-size: 8px;
}

@media (max-width: 1180px) {
  .na .public-hero.hero-v3 {
    grid-template-columns: minmax(0, .85fr) minmax(500px, 1.15fr);
    gap: 34px;
  }

  .na .hero-v3 .hero-title {
    font-size: 50px;
  }
}

@media (max-width: 1000px) {
  .na .public-hero.hero-v3 {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 48px;
  }

  .na .hero-v3 .hero-copy,
  .na .hero-pathway-board {
    width: min(760px, 100%);
  }
}

@media (max-width: 720px) {
  .na .public-nav {
    height: 82px;
  }

  .na .public-hero.hero-v3 {
    gap: 34px;
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .na .hero-v3 .hero-title {
    font-size: 44px;
    letter-spacing: -2.35px;
  }

  .na .hero-v3 .hero-title em {
    font-size: 28px;
    letter-spacing: -1px;
  }

  .na .pathway-route {
    grid-template-columns: 1fr;
  }

  .na .pathway-route article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
  }

  .na .pathway-number {
    margin: 0;
  }

  .na .pathway-route small,
  .na .pathway-route strong {
    min-height: 0;
  }

  .na .pathway-arrow {
    display: none;
  }

  .na .pathway-impact {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .na .hero-pathway-board > footer {
    flex-wrap: wrap;
  }
}

@media (max-width: 440px) {
  .na .hero-v3 .hero-title {
    font-size: 39px;
  }

  .na .hero-v3 .hero-title em {
    font-size: 25px;
  }

  .na .hero-v3 .hero-description {
    font-size: 16px;
  }

  .na .hero-v3 .hero-value-line {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .na .hero-v3 .hero-value-line i {
    display: none;
  }

  .na .hero-pathway-board > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .na .pathway-intro,
  .na .pathway-route {
    padding-left: 20px;
    padding-right: 17px;
  }

  .na .pathway-impact {
    margin-left: 20px;
    margin-right: 17px;
  }

  .na .pathway-intro h2 {
    font-size: 28px;
  }
}

/* The homepage's useful visual: the real recurring live-call schedule. */
.na .hero-schedule-board .schedule-intro {
  position: relative;
  z-index: 1;
  padding: 25px 26px 19px;
}

.na .hero-schedule-board .schedule-intro > span {
  color: #72c7ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.7px;
}

.na .hero-schedule-board .schedule-intro h2 {
  margin-top: 8px;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(29px, 2.45vw, 37px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  font-weight: 770;
}

.na .hero-schedule-board .schedule-intro h2 em {
  display: block;
  margin-top: 5px;
  color: #91cbf5;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: .82em;
  line-height: 1.18;
  letter-spacing: -1px;
  font-weight: 400;
}

.na .hero-schedule-board .schedule-intro p {
  margin-top: 10px;
  color: #9fb8cb;
  font-size: 11px;
  line-height: 1.5;
}

.na .schedule-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 0 22px 17px 26px;
}

.na .schedule-list article {
  display: grid;
  grid-template-columns: 92px 86px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-height: 76px;
  padding: 12px 15px;
  border: 1px solid #9bcff02b;
  border-radius: 7px;
  background: #ffffff09;
}

.na .schedule-list article.featured {
  border-color: #70c8ff70;
  background: linear-gradient(90deg, #197dc22c, #ffffff0b);
  box-shadow: inset 3px 0 #70c8ff;
}

.na .schedule-day,
.na .schedule-time,
.na .schedule-type {
  min-width: 0;
}

.na .schedule-day small,
.na .schedule-day strong,
.na .schedule-time strong,
.na .schedule-time span,
.na .schedule-type strong,
.na .schedule-type small {
  display: block;
}

.na .schedule-day small {
  color: #77caff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 1.4px;
}

.na .schedule-day strong {
  margin-top: 3px;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
}

.na .schedule-time {
  padding-left: 14px;
  border-left: 1px solid #9bcff02e;
}

.na .schedule-time strong {
  color: var(--lime);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.6px;
}

.na .schedule-time span {
  margin-top: 5px;
  color: #8eabc0;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.na .schedule-type strong {
  color: #f4faff;
  font-size: 12px;
  line-height: 1.3;
}

.na .schedule-type small {
  margin-top: 4px;
  color: #91aabd;
  font-size: 9px;
  line-height: 1.45;
}

.na .schedule-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 22px 17px 26px;
  padding: 11px 14px;
  border-left: 2px solid var(--lime);
  background: linear-gradient(90deg, #c7f00012, #ffffff07);
  color: #c5d9e8;
  font-size: 9px;
  line-height: 1.45;
}

.na .schedule-note .icon {
  width: 17px;
  height: 17px;
  color: var(--lime);
}

.na .schedule-note strong {
  color: #fff;
  font-weight: 750;
}

.na .hero-schedule-board > footer {
  min-height: 54px;
}

.na .hero-schedule-board > footer .schedule-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #eef8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}

.na .hero-schedule-board > footer .schedule-action .icon {
  width: 14px;
  color: #7fcfff;
}

.na .hero-schedule-board > footer > span {
  margin-left: auto;
  color: #7594aa;
  font-size: 8px;
  letter-spacing: .45px;
}

@media (max-width: 720px) {
  .na .schedule-list article {
    grid-template-columns: 74px 72px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .na .schedule-time {
    padding-left: 10px;
  }

  .na .schedule-time strong {
    font-size: 18px;
  }
}

@media (max-width: 440px) {
  .na .hero-schedule-board .schedule-intro,
  .na .schedule-list {
    padding-left: 20px;
    padding-right: 17px;
  }

  .na .hero-schedule-board .schedule-intro h2 {
    font-size: 28px;
  }

  .na .schedule-list article {
    grid-template-columns: 57px 61px minmax(0, 1fr);
    gap: 8px;
    padding: 11px 9px;
  }

  .na .schedule-day strong {
    font-size: 12px;
  }

  .na .schedule-time strong {
    font-size: 16px;
  }

  .na .schedule-type strong {
    font-size: 10px;
  }

  .na .schedule-type small {
    font-size: 8px;
  }

  .na .schedule-note {
    margin-left: 20px;
    margin-right: 17px;
  }

  .na .hero-schedule-board > footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .na .hero-schedule-board > footer > span {
    margin-left: 0;
  }
}

/* Keep the complete desktop hero visible on a normal laptop screen. */
@media (min-width: 1001px) {
  .na .public-top {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    overflow: hidden;
  }

  .na .public-top::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 20%;
    right: -9vw;
    width: 52vw;
    height: 52vw;
    border: 1px solid #72caff1f;
    border-radius: 50%;
    background: radial-gradient(circle, #2698e51c 0, #1675b612 34%, transparent 68%);
    box-shadow: 0 0 0 7vw #48b5f706, 0 0 0 14vw #48b5f704;
    pointer-events: none;
  }

  .na .weekly-ribbon {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 11.5px;
  }

  .na .public-nav {
    height: 82px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .na .public-nav .brand img {
    width: 50px;
    height: 50px;
  }

  .na .public-nav .brand-academy {
    font-size: 25px;
  }

  .na .public-nav nav {
    gap: 29px;
    font-size: 14px;
  }

  .na .public-nav nav .btn {
    min-height: 46px;
    padding: 11px 19px;
  }

  .na .public-hero.hero-v3 {
    position: relative;
    flex: 1 1 auto;
    align-items: center;
    width: 100%;
    gap: clamp(34px, 4vw, 60px);
    padding-top: 27px;
    padding-bottom: 28px;
  }

  .na .hero-v3 .hero-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -32px -42px -30px -54px;
    border-radius: 28px;
    background: radial-gradient(circle at 28% 46%, #0b426d4f, transparent 68%);
    filter: blur(2px);
    pointer-events: none;
  }

  .na .hero-v3 .eyebrow {
    width: max-content;
    max-width: 100%;
    padding: 7px 11px 7px 0;
    color: #b8d8ee;
  }

  .na .hero-v3 .hero-title {
    font-size: clamp(46px, 3.7vw, 56px);
    line-height: 1.01;
    letter-spacing: -3px;
  }

  .na .hero-v3 .hero-title em {
    margin-top: 11px;
    font-size: clamp(25px, 2vw, 30px);
    line-height: 1.16;
  }

  .na .hero-v3 .hero-description {
    margin: 16px 0 17px;
    font-size: 15.5px;
    line-height: 1.52;
  }

  .na .hero-copy .actions .btn {
    min-height: 47px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: linear-gradient(135deg, #168df5, #287be7);
    box-shadow: 0 12px 34px #087bd44a, inset 0 1px #ffffff33;
  }

  .na .hero-v3 .hero-value-line {
    gap: 8px;
    margin-top: 17px;
    padding-top: 12px;
  }

  .na .hero-v3 .hero-fine {
    margin-top: 9px;
  }

  .na .hero-pathway-board > header {
    padding: 12px 19px 11px 22px;
  }

  .na .hero-schedule-board .schedule-intro {
    padding: 15px 22px 12px;
  }

  .na .hero-schedule-board .schedule-intro h2 {
    margin-top: 5px;
    font-size: clamp(25px, 2vw, 30px);
    letter-spacing: -1.35px;
  }

  .na .hero-schedule-board .schedule-intro p {
    margin-top: 6px;
    line-height: 1.35;
  }

  .na .schedule-list {
    gap: 6px;
    padding: 0 18px 10px 22px;
  }

  .na .schedule-list article {
    grid-template-columns: 82px 78px minmax(0, 1fr);
    gap: 12px;
    min-height: 62px;
    padding: 8px 12px;
  }

  .na .schedule-day strong {
    font-size: 14px;
  }

  .na .schedule-time {
    padding-left: 11px;
  }

  .na .schedule-time strong {
    font-size: 19px;
  }

  .na .schedule-time span {
    margin-top: 3px;
  }

  .na .schedule-type strong {
    font-size: 11px;
  }

  .na .schedule-type small {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.3;
  }

  .na .schedule-note {
    gap: 9px;
    margin: 0 18px 10px 22px;
    padding: 8px 11px;
    line-height: 1.3;
  }

  .na .hero-schedule-board > footer {
    min-height: 42px;
    padding: 10px 18px 10px 22px;
  }

  .na .hero-schedule-board {
    border-color: #74caff63;
    box-shadow: 0 36px 90px #0008, 0 0 0 1px #72caff12, inset 0 1px #ffffff1a;
  }

  .na .hero-proof-strip {
    min-height: 50px;
    gap: 21px;
    width: calc(100% - 88px);
    margin-top: auto;
    background: linear-gradient(90deg, transparent, #0f395a80 18%, #0f395a80 82%, transparent);
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .na .public-hero.hero-v3 {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .na .hero-v3 .hero-title {
    font-size: clamp(44px, 3.45vw, 52px);
  }

  .na .hero-v3 .hero-description {
    margin-top: 13px;
    margin-bottom: 14px;
  }

  .na .hero-v3 .hero-value-line {
    margin-top: 13px;
    padding-top: 10px;
  }

  .na .hero-proof-strip {
    min-height: 46px;
  }
}

/* Registration is a task, not a second oversized marketing page. */
@media (min-width: 721px) {
  .na .auth-page {
    grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
    align-items: center;
    gap: clamp(32px, 4vw, 58px);
    min-height: calc(100vh - 120px);
    min-height: calc(100svh - 120px);
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .na .auth-story {
    position: relative;
    overflow: hidden;
    padding: 30px 32px;
    border: 1px solid #79c9ff2b;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, #2b80b94d, transparent 44%),
      linear-gradient(145deg, #102f49b8, #081c2fbd);
    box-shadow: 0 28px 65px #020c1547, inset 0 1px #ffffff12;
  }

  .na .auth-story::after {
    content: '';
    position: absolute;
    right: -64px;
    bottom: -88px;
    width: 230px;
    height: 230px;
    border: 1px solid #78c9ff2b;
    border-radius: 50%;
    box-shadow: 0 0 0 34px #63c2ff0a, 0 0 0 68px #63c2ff06;
    pointer-events: none;
  }

  .na .auth-story h1,
  .na .auth-story h1 em {
    font-size: clamp(40px, 4vw, 54px);
    line-height: 1.04;
  }

  .na .auth-story > p {
    max-width: 470px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
  }

  .na .auth-art {
    display: none;
  }

  .na .auth-note {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 14px 0 0;
    border-top: 1px solid #8bcdf72b;
    border-left: 0;
    font-size: 11px;
    line-height: 1.55;
  }

  .na .auth-card {
    padding: 23px 28px 22px;
    border-radius: 17px;
    box-shadow: 0 28px 70px #020d1738, 0 0 0 1px #ffffff59;
  }

  .na .auth-card h2 {
    margin-bottom: 4px;
    font-size: 26px;
  }

  .na .auth-card > p {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .na .auth-card .form-row {
    gap: 12px;
  }

  .na .auth-card .field {
    margin-bottom: 8px;
  }

  .na .auth-card .field label {
    margin-bottom: 4px;
    font-size: 10px;
  }

  .na .auth-card input:not([type=checkbox]) {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 13px;
  }

  .na .auth-card .hint {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.35;
  }

  .na .auth-card .checkbox,
  .na .auth-card .checkbox .link {
    font-size: 9.5px;
    line-height: 1.35;
  }

  .na .auth-card .checkbox {
    gap: 8px;
    margin: 6px 0 8px;
  }

  .na .auth-card input[type=checkbox] {
    width: 15px;
    height: 15px;
    margin-top: 0;
  }

  .na .auth-card .btn.full {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
  }

  .na .auth-card .auth-after {
    margin-top: 9px;
    font-size: 10px !important;
  }
}

@media (min-width: 721px) and (max-width: 1000px) {
  .na .auth-page {
    grid-template-columns: minmax(235px, .7fr) minmax(420px, 1.3fr);
    gap: 24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .na .auth-story {
    padding: 26px 24px;
  }

  .na .auth-story h1,
  .na .auth-story h1 em {
    font-size: 36px;
  }
}