:root {
  --bg-0: #020712;
  --bg-1: #071426;
  --bg-2: #0b1f38;
  --panel: rgba(8, 20, 38, 0.78);
  --panel-2: rgba(10, 28, 52, 0.84);
  --white: #ffffff;
  --soft-white: #f1f7ff;
  --muted: #b8c7d9;
  --muted-2: #8498af;
  --blue: #2f80ed;
  --blue-soft: #72b7ff;
  --cyan: #98dcff;
  --green: #78dfb2;
  --danger: #ffb1b1;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(143, 201, 255, 0.28);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.32);
  --radius: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--soft-white);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(47, 128, 237, 0.28), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(114, 183, 255, 0.16), transparent 34%),
    linear-gradient(145deg, var(--bg-0), var(--bg-1) 50%, #02050c);
  overflow-x: hidden;
}

button, input { font: inherit; }
button { border: 0; }

.app-shell {
  width: min(80vw, 1500px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 34px 0;
}

.view {
  min-height: calc(100vh - 68px);
  animation: fadeUp .46s var(--ease) both;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.logo-dot {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--blue), #0c4d9c);
  box-shadow: 0 16px 35px rgba(47,128,237,.35);
}
.logo-dot svg { width: 24px; height: 24px; fill: white; }
.brand-small { color: var(--muted); font-weight: 700; }

.hero-card {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(26px, 4vw, 54px);
  padding: clamp(28px, 5vw, 70px);
  align-items: stretch;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 610px;
}
.eyebrow, .lesson-page-label, .question-count {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-title, .page-title, .lesson-title, .complete-title {
  font-family: "Lora", Georgia, serif;
  line-height: .98;
  letter-spacing: -.05em;
  margin: 0;
}
.hero-title { font-size: clamp(4.2rem, 9vw, 9rem); }
.hero-subtitle, .lead, .complete-text {
  color: var(--muted);
  line-height: 1.68;
  font-size: 1.04rem;
  max-width: 820px;
}
.hero-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.mini-stat {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
}
.mini-stat strong { display: block; font-size: 2rem; line-height: 1; }
.mini-stat span { display: block; margin-top: 8px; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.form-panel {
  align-self: center;
  padding: clamp(25px, 4vw, 44px);
  border-radius: 26px;
  background: rgba(2, 8, 18, .38);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.form-panel h2 {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 26px 0 14px;
}
.form-panel p { color: var(--muted); line-height: 1.68; }
.field-group { display: grid; gap: 16px; margin-top: 24px; }
.field label { display: block; margin-bottom: 8px; font-weight: 800; }
.field input {
  width: 100%;
  padding: 16px;
  color: var(--white);
  background: rgba(0,0,0,.24);
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  outline: none;
}
.field input:focus { border-color: var(--blue-soft); box-shadow: 0 0 0 4px rgba(47,128,237,.16); }
.field input::placeholder { color: var(--muted-2); }
.error-message { min-height: 22px; color: var(--danger) !important; font-weight: 800; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.btn {
  min-height: 48px;
  padding: 13px 19px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--blue), #1457b7); box-shadow: 0 18px 40px rgba(47,128,237,.30); }
.btn-secondary { color: var(--white); background: rgba(255,255,255,.075); border: 1px solid var(--line-strong); }
.btn-ghost { color: var(--cyan); background: transparent; border: 1px solid var(--line); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.dashboard-card, .lesson-card, .quiz-card, .complete-card { min-height: calc(100vh - 68px); padding: 30px; }
.dashboard-header {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 430px);
  gap: 26px;
  align-items: end;
  padding: 12px 4px 24px;
}
.page-title { font-size: clamp(3rem, 6vw, 6.6rem); }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(47,128,237,.15);
  color: var(--cyan);
  border: 1px solid rgba(114,183,255,.28);
  font-weight: 900;
}
.progress-wrap { padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.055); }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 900; margin-bottom: 10px; }
.progress-track { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .55s var(--ease); }

.roadmap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.lesson-tile {
  min-height: 360px;
  text-align: left;
  padding: 20px;
  color: var(--white);
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
}
.lesson-tile:not(.locked):hover { transform: translateY(-5px); border-color: rgba(114,183,255,.52); background: linear-gradient(160deg, rgba(47,128,237,.19), rgba(255,255,255,.045)); }
.lesson-tile.locked { opacity: .44; cursor: not-allowed; filter: grayscale(.35); }
.tile-number { width: 44px; height: 44px; display: grid; place-items: center; color: white; border-radius: 15px; background: rgba(47,128,237,.25); border: 1px solid rgba(114,183,255,.28); font-weight: 900; }
.tile-title { font-family: "Lora", Georgia, serif; margin: 20px 0 10px; font-size: 1.55rem; line-height: 1.08; letter-spacing: -.025em; }
.tile-desc { color: var(--muted); line-height: 1.52; margin: 0; }

.tile-image-slot {
  width: 100%;
  height: 88px;
  margin: 16px 0 4px;
  border-radius: 18px;
  border: 1px solid rgba(114,183,255,.22);
  background: linear-gradient(135deg, rgba(47,128,237,.12), rgba(255,255,255,.045));
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.tile-image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-image-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  color: var(--muted-2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.tile-image-slot.image-missing .tile-image-placeholder { display: flex; }

.tile-status { color: var(--cyan); font-weight: 900; margin-top: 24px; }
.tile-lock svg, .tile-check svg { width: 22px; height: 22px; fill: var(--cyan); }

.lesson-layout, .quiz-layout { display: grid; grid-template-columns: minmax(270px, 360px) 1fr; gap: 24px; align-items: stretch; }
.side-note { border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.052); padding: 24px; align-self: stretch; }
.side-note h2 { font-family: "Lora", Georgia, serif; font-size: 2.15rem; line-height: 1; margin: 0 0 12px; letter-spacing: -.035em; }
.side-note p { color: var(--muted); line-height: 1.6; }
.score-card { margin-top: 22px; display: grid; gap: 10px; }
.score-line { padding: 13px 14px; border-radius: 15px; background: rgba(0,0,0,.18); border: 1px solid var(--line); color: var(--muted); font-weight: 900; }
.lesson-panel, .quiz-panel {
  min-height: 640px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  padding: clamp(24px, 4vw, 48px);
}
.lesson-title { font-size: clamp(2.7rem, 5vw, 5.7rem); margin-bottom: 16px; }
.lesson-content { max-width: 1020px; }
.lesson-content p { color: #d8e4f0; font-size: 1.03rem; line-height: 1.58; margin: 0 0 12px; }
.lesson-page { animation: pageIn .35s var(--ease) both; }
.lesson-page h3 { font-size: 1.32rem; margin: 0 0 12px; color: var(--white); }
.lesson-page-label { margin-bottom: 14px; }
.page-dots { display: flex; gap: 8px; margin: 16px 0 0; }
.page-dot { width: 34px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); }
.page-dot.active { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.callout { margin: 18px 0; padding: 18px; border-radius: 18px; background: linear-gradient(145deg, rgba(47,128,237,.14), rgba(255,255,255,.045)); border: 1px solid rgba(114,183,255,.24); }
.callout strong { display: block; margin-bottom: 9px; color: var(--white); }
.callout p { margin: 0; color: var(--muted); line-height: 1.55; }
.callout ul { margin: 8px 0 0; padding-left: 20px; color: #d8e4f0; line-height: 1.55; }

.question-count { margin-bottom: 12px; }
.question-text { font-family: "Lora", Georgia, serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 24px; }
.answers { display: grid; gap: 12px; }
.answer-btn {
  width: 100%;
  text-align: left;
  padding: 17px 18px;
  border-radius: 17px;
  color: var(--white);
  background: rgba(255,255,255,.065);
  border: 1px solid var(--line);
  cursor: pointer;
  line-height: 1.45;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.answer-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(114,183,255,.42); background: rgba(47,128,237,.12); }
.answer-btn.correct { border-color: rgba(120,223,178,.78); background: rgba(120,223,178,.14); }
.answer-btn.incorrect { border-color: rgba(255,177,177,.70); background: rgba(255,177,177,.10); }
.feedback-box { margin-top: 18px; padding: 17px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: #d8e4f0; line-height: 1.58; }
.hidden { display: none !important; }

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 7, 17, .72);
  backdrop-filter: blur(12px);
  animation: overlayIn .28s var(--ease) both;
}
.transition-message {
  width: min(720px, 92vw);
  text-align: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(12, 36, 68, .96), rgba(3, 11, 24, .96));
  border: 1px solid rgba(114,183,255,.34);
  box-shadow: var(--shadow);
  animation: popIn .52s var(--ease) both;
}
.transition-message .big-check {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--blue), #0c4d9c);
  box-shadow: 0 18px 45px rgba(47,128,237,.32);
}
.transition-message svg { width: 44px; height: 44px; fill: white; }
.transition-message h2 { font-family: "Lora", Georgia, serif; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; margin: 0 0 12px; letter-spacing: -.045em; }
.transition-message p { color: #ffffff; margin: 0; font-size: 1.08rem; line-height: 1.55; }

.complete-card { display: grid; place-items: center; }
.complete-panel {
  width: min(100%, 1120px);
  min-height: 640px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at top, rgba(47,128,237,.25), transparent 43%), rgba(255,255,255,.052);
  padding: clamp(28px, 5vw, 58px);
  display: grid;
  align-content: center;
}
.complete-badge { width: 96px; height: 96px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: 30px; background: linear-gradient(145deg, var(--blue), #0c4d9c); box-shadow: 0 20px 54px rgba(47,128,237,.35); }
.complete-badge svg { width: 52px; height: 52px; fill: white; }
.complete-title { font-size: clamp(2.8rem, 6vw, 6.5rem); }
.complete-text { margin-left: auto; margin-right: auto; }
.certificate-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px auto; width: min(100%, 860px); }
.cert-item { padding: 18px; border-radius: 18px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.cert-item strong { display: block; color: var(--cyan); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.cert-item span { color: var(--white); font-weight: 900; }
.certificate-note { margin: 8px auto 0; color: var(--muted-2); max-width: 820px; line-height: 1.55; font-size: .95rem; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; transform: translateY(18px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1180px) {
  .app-shell { width: min(94vw, 1480px); }
  .hero-card, .dashboard-header, .lesson-layout, .quiz-layout { grid-template-columns: 1fr; }
  .hero-copy { min-height: 460px; }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-tile { min-height: 240px; }
}
@media (max-width: 720px) {
  .app-shell { width: 100%; padding: 0; }
  .card, .hero-card, .dashboard-card, .lesson-card, .quiz-card, .complete-card { min-height: 100vh; border-radius: 0; padding: 20px; }
  .hero-bottom, .roadmap, .certificate-strip { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}


/* v4 polish: flatter page sections, no nested card stacking, wide landing, cooldown messaging, and certificate wrapping */
.landing-wide {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.5vw, 52px);
}
.hero-topbar { margin-bottom: clamp(20px, 3vw, 34px); }
.landing-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}
.landing-wide .hero-copy {
  min-height: 0;
  justify-content: center;
}
.landing-wide .hero-title {
  font-size: clamp(3.6rem, 6.8vw, 7.9rem);
  max-width: 1040px;
}
.landing-wide .hero-subtitle {
  max-width: 1010px;
  line-height: 1.6;
  margin: 22px 0 0;
}
.landing-wide .form-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 0 clamp(20px, 3vw, 42px);
  border-left: 1px solid var(--line-strong);
}
.landing-wide .form-panel h2 {
  margin-top: 12px;
}
.landing-wide .hero-bottom {
  max-width: 980px;
}

/* Remove the stacked-card look inside major pages while keeping readable structure */
.side-note,
.lesson-panel,
.quiz-panel,
.progress-wrap,
.mini-stat,
.score-line,
.callout,
.feedback-box,
.cert-item {
  box-shadow: none;
}
.side-note {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 26px 10px 2px;
}
.lesson-panel,
.quiz-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(16px, 3vw, 38px);
}
.lesson-layout, .quiz-layout {
  gap: clamp(18px, 3vw, 36px);
}
.lesson-error {
  min-height: 24px;
  margin: 14px 0 0;
  color: var(--danger);
  font-weight: 900;
}
.lesson-content p {
  max-width: 1080px;
}

/* Completion card is a compact horizontal certificate-style screen */
.complete-card {
  display: grid;
  place-items: center;
}
.complete-panel {
  width: min(100%, 1180px);
  min-height: 560px;
  aspect-ratio: 16 / 8.6;
  background: transparent;
  border: 0;
  padding: clamp(24px, 4vw, 48px);
}
.complete-title {
  font-size: clamp(2.4rem, 4.8vw, 5.4rem);
}
.complete-text {
  max-width: 960px;
  line-height: 1.52;
}
.compact-message {
  margin-top: 0;
  margin-bottom: 0;
}
.certificate-strip {
  width: min(100%, 1000px);
}
.cert-item span {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.certificate-note {
  max-width: 940px;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .landing-grid { grid-template-columns: 1fr; }
  .landing-wide .form-panel {
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    padding: 26px 0 0;
  }
  .side-note {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 20px;
  }
}
@media (max-width: 720px) {
  .landing-wide { min-height: 100vh; }
  .complete-panel {
    aspect-ratio: auto;
    min-height: auto;
  }
}


/* v5 landing redesign: full website front page, clean nav, and multi-screen intro overlay */
.app-shell {
  width: min(92vw, 1680px);
  padding: 26px 0;
}

.landing-page {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 42px);
  padding: 0;
}

.site-nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px clamp(18px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.032));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}

.nav-brand {
  justify-self: start;
}

.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
}

.nav-links span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 9px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-links span:first-child {
  color: var(--white);
  background: rgba(47, 128, 237, .20);
  border: 1px solid rgba(114, 183, 255, .24);
}

.nav-message {
  justify-self: end;
  color: var(--cyan);
  font-weight: 900;
  letter-spacing: -.01em;
  text-align: right;
}

.landing-hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: clamp(24px, 4vw, 58px) clamp(8px, 2vw, 28px) clamp(22px, 3vw, 40px);
}

.landing-copy-block {
  min-height: unset;
  justify-content: center;
}

.landing-page .hero-title {
  max-width: 1050px;
  font-size: clamp(3.4rem, 6.8vw, 7.7rem);
  line-height: .95;
}

.landing-page .hero-subtitle {
  max-width: 1060px;
  margin-top: 22px;
  color: #c8d7e8;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
}

.landing-stats {
  max-width: 960px;
  margin-top: clamp(22px, 3vw, 34px);
}

.landing-page .mini-stat {
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.032));
  border-color: rgba(143, 201, 255, .20);
}

.start-training-panel {
  width: 100%;
  align-self: center;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(12, 35, 66, .82), rgba(2, 8, 18, .66)),
    radial-gradient(circle at top right, rgba(47, 128, 237, .20), transparent 42%);
  border: 1px solid rgba(143, 201, 255, .22);
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}

.start-training-panel h2 {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2.15rem, 3vw, 3.35rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 8px 0 12px;
}

.start-training-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.compact-fields {
  margin-top: 22px;
  gap: 14px;
}

.start-btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.transition-overlay.intro-mode {
  background: rgba(2, 7, 18, .76);
  backdrop-filter: blur(12px) saturate(120%);
}

.intro-sequence-card {
  width: min(90vw, 840px);
  padding: clamp(28px, 5vw, 56px);
  border-radius: 34px;
  border: 1px solid rgba(143, 201, 255, .28);
  background:
    linear-gradient(145deg, rgba(7, 20, 38, .94), rgba(2, 8, 18, .90)),
    radial-gradient(circle at 18% 0%, rgba(47, 128, 237, .26), transparent 38%);
  box-shadow: 0 38px 120px rgba(0, 0, 0, .55);
  animation: introCardIn .55s var(--ease) both;
  text-align: left;
}

.intro-sequence-card .eyebrow {
  margin-top: 28px;
  margin-bottom: 16px;
}

.intro-sequence-card h2 {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.intro-sequence-card p:last-child {
  max-width: 720px;
  color: #c9d8ea;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  margin: 18px 0 0;
}

.intro-progress {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

.intro-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .45s var(--ease);
}

@keyframes introCardIn {
  from { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 1180px) {
  .site-nav {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .nav-brand,
  .nav-message {
    justify-self: center;
    text-align: center;
  }
  .landing-hero {
    grid-template-columns: 1fr;
    padding-top: 16px;
  }
  .start-training-panel {
    max-width: 680px;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: 100%;
    padding: 0;
  }
  .landing-page {
    min-height: 100vh;
    padding: 16px;
  }
  .site-nav {
    border-radius: 22px;
  }
  .nav-links {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 20px;
  }
  .landing-hero {
    padding: 8px 0 22px;
  }
  .landing-page .hero-title {
    font-size: clamp(2.65rem, 15vw, 4.4rem);
  }
  .landing-stats {
    grid-template-columns: 1fr;
  }
}

/* Lesson left-side visual slot */
.lesson-side-image {
  width: 100%;
  min-height: 260px;
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(29,78,216,0.14), rgba(2,6,23,0.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 45px rgba(0,0,0,0.18);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-side-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lesson-side-image span {
  position: relative;
  z-index: 1;
  text-align: center;
  color: rgba(255,255,255,0.74);
  font-weight: 800;
  line-height: 1.35;
  padding: 18px;
}

.lesson-side-image small {
  display: inline-block;
  margin-top: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .lesson-side-image { min-height: 190px; }
}


/* v9 requested cleanup */
.tile-image-slot, .tile-image-placeholder { display: none !important; }

.lesson-side-image {
  width: 100%;
  min-height: 260px;
  margin-top: 14px;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  display: block;
}

.lesson-side-image img {
  position: static !important;
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: contain;
  display: block;
}

.lesson-side-image span,
.lesson-side-image small {
  display: none !important;
}

.intro-sequence-card { animation-duration: .8s; }
.intro-progress span { transition: width .8s var(--ease); }


/* Website integration polish */
.empathy-anchor-page .lesson-side-image img,
.lesson-side-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.empathy-anchor-page .app-shell {
  min-height: auto;
}


/* =========================================
   EMPATHY ANCHOR READABILITY + ONE-PAGE START FIX
   ========================================= */
body.empathy-anchor-page {
  background: #ffffff !important;
  color: #102a43 !important;
}

/* Remove duplicate top intro so the certification start screen becomes the clean hero. */
.empathy-anchor-page .ea-site-intro {
  display: none !important;
}

.empathy-anchor-page .empathy-anchor-main {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  color: #102a43 !important;
}

.empathy-anchor-page .app-shell {
  width: min(94vw, 1380px) !important;
  max-width: 1380px !important;
  min-height: auto !important;
  padding: clamp(28px, 3.4vw, 48px) 0 clamp(40px, 4vw, 62px) !important;
  margin: 0 auto !important;
}

.empathy-anchor-page .landing-page {
  min-height: auto !important;
  padding: 0 !important;
  display: block !important;
}

.empathy-anchor-page .landing-hero {
  min-height: calc(100vh - 210px);
  display: grid !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, 0.84fr) !important;
  gap: clamp(26px, 3.5vw, 54px) !important;
  align-items: center !important;
  padding: clamp(30px, 4vw, 50px) !important;
  border: 1px solid #e3ebf4 !important;
  border-radius: 28px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 55%, rgba(248,251,255,0.94) 100%),
    radial-gradient(circle at 8% 0%, rgba(43,108,176,0.10), transparent 36%) !important;
  box-shadow: 0 18px 45px rgba(12, 23, 36, 0.06) !important;
}

.empathy-anchor-page .landing-copy-block,
.empathy-anchor-page .hero-copy {
  min-height: 0 !important;
  justify-content: center !important;
  color: #102a43 !important;
}

.empathy-anchor-page .eyebrow,
.empathy-anchor-page .lesson-page-label,
.empathy-anchor-page .question-count {
  color: #1d5b92 !important;
  margin-bottom: 12px !important;
}

.empathy-anchor-page .landing-page .hero-title,
.empathy-anchor-page .hero-title {
  color: #102a43 !important;
  -webkit-text-fill-color: #102a43 !important;
  background: none !important;
  font-size: clamp(2.45rem, 4.4vw, 4.85rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  max-width: 940px !important;
}

.empathy-anchor-page .landing-page .hero-subtitle,
.empathy-anchor-page .hero-subtitle,
.empathy-anchor-page .lead,
.empathy-anchor-page .complete-text {
  color: #566f88 !important;
  font-size: clamp(0.96rem, 1vw, 1.05rem) !important;
  line-height: 1.58 !important;
  max-width: 900px !important;
  margin-top: 18px !important;
}

.empathy-anchor-page .landing-stats,
.empathy-anchor-page .hero-bottom {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 22px !important;
  max-width: 900px !important;
}

.empathy-anchor-page .mini-stat {
  background: #ffffff !important;
  border: 1px solid #e3ebf4 !important;
  border-radius: 16px !important;
  padding: 15px !important;
  box-shadow: 0 10px 24px rgba(12, 23, 36, 0.04) !important;
}

.empathy-anchor-page .mini-stat strong {
  color: #102a43 !important;
  font-size: 1.55rem !important;
}

.empathy-anchor-page .mini-stat span {
  color: #60758b !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

/* Start form panel */
.empathy-anchor-page .start-training-panel {
  background: #ffffff !important;
  border: 1px solid #dce8f4 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 34px rgba(12, 23, 36, 0.07) !important;
  color: #102a43 !important;
  padding: clamp(24px, 2.6vw, 34px) !important;
}

.empathy-anchor-page .start-training-panel h2 {
  color: #102a43 !important;
  -webkit-text-fill-color: #102a43 !important;
  background: none !important;
  font-size: clamp(1.8rem, 2.6vw, 2.65rem) !important;
  line-height: 1.05 !important;
  margin: 6px 0 12px !important;
}

.empathy-anchor-page .start-training-panel p,
.empathy-anchor-page .field label,
.empathy-anchor-page .error-message {
  color: #566f88 !important;
}

.empathy-anchor-page .field label {
  font-weight: 800 !important;
  color: #102a43 !important;
}

.empathy-anchor-page .field input {
  background: #f8fbff !important;
  border: 1px solid #d9e4f0 !important;
  border-radius: 12px !important;
  color: #102a43 !important;
  padding: 14px !important;
}

.empathy-anchor-page .field input::placeholder {
  color: #8799aa !important;
}

.empathy-anchor-page .field input:focus {
  border-color: #2b6cb0 !important;
  box-shadow: 0 0 0 4px rgba(43,108,176,0.13) !important;
}

.empathy-anchor-page .btn {
  border-radius: 10px !important;
  min-height: 46px !important;
}

.empathy-anchor-page .btn-primary {
  background: #2b6cb0 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(43,108,176,0.16) !important;
}

.empathy-anchor-page .btn-secondary,
.empathy-anchor-page .btn-ghost {
  background: #ffffff !important;
  border: 1px solid #d9e4f0 !important;
  color: #234a6d !important;
}

/* Keep the actual training screens readable too. */
.empathy-anchor-page .card,
.empathy-anchor-page .dashboard-card,
.empathy-anchor-page .lesson-card,
.empathy-anchor-page .quiz-card,
.empathy-anchor-page .complete-card,
.empathy-anchor-page .lesson-tile,
.empathy-anchor-page .side-note,
.empathy-anchor-page .lesson-panel,
.empathy-anchor-page .quiz-panel,
.empathy-anchor-page .progress-wrap,
.empathy-anchor-page .callout,
.empathy-anchor-page .feedback-box,
.empathy-anchor-page .complete-panel,
.empathy-anchor-page .cert-item,
.empathy-anchor-page .score-line,
.empathy-anchor-page .answer-btn {
  background: #ffffff !important;
  border-color: #e3ebf4 !important;
  color: #102a43 !important;
  box-shadow: 0 14px 30px rgba(12, 23, 36, 0.05) !important;
}

.empathy-anchor-page .page-title,
.empathy-anchor-page .lesson-title,
.empathy-anchor-page .complete-title,
.empathy-anchor-page .tile-title,
.empathy-anchor-page .side-note h2,
.empathy-anchor-page .lesson-page h3,
.empathy-anchor-page .question-text,
.empathy-anchor-page .complete-panel h2 {
  color: #102a43 !important;
  -webkit-text-fill-color: #102a43 !important;
  background: none !important;
}

.empathy-anchor-page .tile-desc,
.empathy-anchor-page .side-note p,
.empathy-anchor-page .lesson-content p,
.empathy-anchor-page .callout p,
.empathy-anchor-page .feedback-box,
.empathy-anchor-page .complete-text,
.empathy-anchor-page .certificate-note,
.empathy-anchor-page .score-line,
.empathy-anchor-page .progress-meta {
  color: #5a728a !important;
}

.empathy-anchor-page .answer-btn:hover:not(:disabled) {
  background: #f2f7fd !important;
  border-color: #b9d2ea !important;
}

.empathy-anchor-page .answer-btn.correct {
  background: #eaf8f1 !important;
  border-color: #61bd8f !important;
}

.empathy-anchor-page .answer-btn.incorrect {
  background: #fff0f0 !important;
  border-color: #e59a9a !important;
}

.empathy-anchor-page .progress-track,
.empathy-anchor-page .page-dot {
  background: #e3ebf4 !important;
}

.empathy-anchor-page .progress-fill,
.empathy-anchor-page .page-dot.active {
  background: linear-gradient(90deg, #2b6cb0, #6ea6dc) !important;
}

.empathy-anchor-page .logo-dot,
.empathy-anchor-page .complete-badge,
.empathy-anchor-page .transition-message .big-check {
  background: #2b6cb0 !important;
}

@media (max-width: 1050px) {
  .empathy-anchor-page .landing-hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .empathy-anchor-page .landing-stats,
  .empathy-anchor-page .hero-bottom {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .empathy-anchor-page .app-shell {
    width: 100% !important;
    padding: 0 !important;
  }

  .empathy-anchor-page .landing-hero {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 24px 18px !important;
  }

  .empathy-anchor-page .landing-page .hero-title,
  .empathy-anchor-page .hero-title {
    font-size: clamp(2.25rem, 12vw, 3.25rem) !important;
  }
}


/* =========================================
   EMPATHY ANCHOR FIX: TAKEAWAYS + DEVELOPER SKIP
   ========================================= */
.empathy-anchor-page .callout {
  background: #f8fbff !important;
  border: 1px solid #dbe7f3 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  color: #102a43 !important;
  box-shadow: 0 10px 22px rgba(12, 23, 36, 0.04) !important;
}

.empathy-anchor-page .callout strong {
  display: block !important;
  color: #102a43 !important;
  margin-bottom: 10px !important;
  font-weight: 850 !important;
}

.empathy-anchor-page .callout ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.empathy-anchor-page .callout li {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e3ebf4 !important;
  border-radius: 12px !important;
  color: #24445f !important;
  line-height: 1.45 !important;
  padding: 12px 12px 12px 34px !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}

.empathy-anchor-page .callout li::before {
  content: "✓";
  position: absolute;
  left: 13px;
  top: 12px;
  color: #2b6cb0;
  font-weight: 900;
}

.developer-skip-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.developer-skip-btn {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px dashed #9db5ca;
  background: #f8fbff;
  color: #42627e;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.developer-skip-btn:hover,
.developer-skip-btn:focus-visible {
  background: #eaf3fc;
  border-color: #2b6cb0;
  color: #102a43;
  transform: translateY(-1px);
}

@media (max-width: 780px) {
  .empathy-anchor-page .callout ul {
    grid-template-columns: 1fr !important;
  }

  .developer-skip-wrap {
    justify-content: stretch;
  }

  .developer-skip-btn {
    width: 100%;
  }
}


/* =========================================
   EMPATHY ANCHOR CERTIFICATE COMPLETION FIX
   ========================================= */
.empathy-anchor-page .complete-card {
  background: #ffffff !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: clamp(28px, 4vw, 54px) !important;
}

.empathy-anchor-page .complete-panel {
  width: min(100%, 1180px) !important;
  min-height: auto !important;
  aspect-ratio: auto !important;
  background: #ffffff !important;
  border: 1px solid #e3ebf4 !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 45px rgba(12, 23, 36, 0.06) !important;
  padding: clamp(32px, 5vw, 58px) !important;
}

.empathy-anchor-page .certificate-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: min(100%, 1040px) !important;
  margin: 28px auto !important;
}

.empathy-anchor-page .cert-item {
  background: #ffffff !important;
  border: 1px solid #dce8f4 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(12, 23, 36, 0.04) !important;
  padding: 20px !important;
  min-height: 104px !important;
  text-align: left !important;
}

.empathy-anchor-page .cert-item strong {
  display: block !important;
  color: #1d5b92 !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.empathy-anchor-page .cert-item span {
  display: block !important;
  color: #102a43 !important;
  -webkit-text-fill-color: #102a43 !important;
  font-size: clamp(1rem, 1.2vw, 1.22rem) !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.empathy-anchor-page .certificate-note {
  display: none !important;
}

.empathy-anchor-page .complete-text.compact-message {
  color: #36516a !important;
  font-weight: 700 !important;
}

@media (max-width: 780px) {
  .empathy-anchor-page .certificate-strip {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================
   EMPATHY ANCHOR BRAND LOGO SWAP
   ========================================= */
.logo-dot.logo-image-wrap {
  width: 54px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.brand-logo-image {
  display: block;
  width: 54px;
  height: auto;
  object-fit: contain;
}

.brand-mark span:last-child {
  color: #102a43 !important;
}

/* Intro overlay text color fix */
.empathy-anchor-page .intro-sequence-card h2,
.empathy-anchor-page .intro-sequence-card p:last-child {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}