:root {
  --ink: #132b2f;
  --muted: #607174;
  --brand: #176b70;
  --brand-dark: #0d4f54;
  --brand-soft: #e8f4f2;
  --accent: #d79a48;
  --surface: #ffffff;
  --canvas: #f5f8f7;
  --line: #dbe5e3;
  --success: #247a5a;
  --shadow: 0 18px 50px rgba(22, 61, 64, 0.10);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }

h1, h2, h3, .nav-label, .nav-group-title, .lesson-kicker, .eyebrow, .video-tag, .resource-kind {
  text-transform: capitalize;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.03em;
}
.brand-dot { color: var(--brand); }
.brand-mark {
  width: 29px;
  height: 29px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: end;
  gap: 3px;
  padding: 4px;
  border-radius: 9px;
  background: var(--brand-soft);
}
.brand-mark span { display: block; border-radius: 9px; background: var(--brand); }
.brand-mark span:nth-child(1) { height: 45%; opacity: .55; }
.brand-mark span:nth-child(2) { height: 80%; }
.brand-mark span:nth-child(3) { height: 62%; opacity: .78; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.preview-pill {
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff5e6;
  color: #7d5423;
  border: 1px solid #efd8b3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.icon-button { display: none; border: 0; background: transparent; font-size: 25px; color: var(--ink); }

.app-shell { min-height: 100vh; padding-top: 72px; }
.sidebar {
  position: fixed;
  top: 72px;
  bottom: 0;
  left: 0;
  width: 310px;
  padding: 28px 20px 22px;
  overflow-y: auto;
  background: #f0f5f4;
  border-right: 1px solid var(--line);
  z-index: 40;
}
.sidebar-intro { padding: 0 10px 22px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.sidebar-intro h2 { margin: 5px 0 8px; font-size: 18px; line-height: 1.28; letter-spacing: -.02em; }
.sidebar-intro p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow {
  margin: 0;
  color: var(--brand);
  letter-spacing: .055em;
  font-weight: 800;
  font-size: 11px;
}
.nav-group-title {
  padding: 18px 10px 7px;
  color: var(--muted);
  letter-spacing: .035em;
  font-size: 11px;
  font-weight: 800;
}
.nav-item {
  width: 100%;
  display: grid;
  grid-template-columns: 29px 1fr auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  color: #355053;
  border-radius: 12px;
  padding: 10px;
  margin: 2px 0;
  transition: .16s ease;
}
.nav-item:hover { background: rgba(255,255,255,.75); color: var(--ink); }
.nav-item.active { background: white; color: var(--brand-dark); box-shadow: 0 4px 16px rgba(30,80,84,.08); }
.nav-number {
  min-width: 27px;
  height: 27px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #dceae8;
  font-weight: 800;
  font-size: 10px;
}
.nav-item.active .nav-number { background: var(--brand); color: white; }
.nav-label { line-height: 1.28; font-size: 13px; font-weight: 650; }
.nav-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1.5px solid #aabbb9;
  border-radius: 50%;
  font-size: 10px;
  color: transparent;
}
.nav-item.complete .nav-check { background: var(--success); border-color: var(--success); color: white; }
.sidebar-footer {
  position: sticky;
  bottom: -22px;
  margin: 20px -20px -22px;
  padding: 17px 30px 23px;
  background: linear-gradient(180deg, rgba(240,245,244,.85), #f0f5f4 30%);
}
.progress-row { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:8px; }
.progress-row strong { color:var(--brand-dark); }
.progress-track { height: 6px; border-radius: 999px; background: #d4e1df; overflow:hidden; }
.progress-track span { display:block; height:100%; width:0; background:var(--brand); border-radius:999px; transition: width .25s ease; }

main { margin-left: 310px; min-height: calc(100vh - 72px); }
.page { max-width: 1220px; margin: 0 auto; padding: 60px 54px 90px; }

.hero {
  position:relative;
  overflow:hidden;
  min-height: 540px;
  display:grid;
  align-items:center;
  padding: 72px;
  border-radius: 30px;
  background: linear-gradient(135deg, #0f555a 0%, #176b70 52%, #267b72 100%);
  color:white;
  box-shadow:var(--shadow);
}
.hero::after {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-180px;
  top:-120px;
  border-radius:50%;
  border:90px solid rgba(255,255,255,.07);
}
.hero::before {
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:90px;
  bottom:-95px;
  border-radius:50%;
  background:rgba(215,154,72,.22);
}
.hero-content { position:relative; z-index:2; max-width:760px; }
.hero .eyebrow { color:#bfe5df; }
.hero h1 { margin: 10px 0 20px; max-width: 760px; font-size: clamp(42px,5.6vw,72px); line-height: .99; letter-spacing: -.055em; }
.hero p { max-width: 690px; margin: 0 0 28px; color: rgba(255,255,255,.86); font-size: 18px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

.primary-btn, .secondary-btn, .resource-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 17px;
  border-radius:12px;
  text-decoration:none;
  border:0;
  font-weight:750;
  transition:.17s ease;
}
.primary-btn { background:white; color:var(--brand-dark); }
.primary-btn:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.13); }
.secondary-btn { background:rgba(255,255,255,.10); color:white; border:1px solid rgba(255,255,255,.28); }
.secondary-btn:hover { background:rgba(255,255,255,.16); }
.resource-button { min-height: 40px; padding: 0 13px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; }
.resource-button:hover { background: #d9ece9; }

.section { margin-top: 54px; }
.section-heading { max-width: 780px; margin-bottom: 24px; }
.section-heading h2 { margin:7px 0 9px; font-size:34px; line-height:1.1; letter-spacing:-.035em; }
.section-heading p { margin:0; color:var(--muted); }
.mini-heading { margin-bottom: 18px; }
.mini-heading h2 { font-size: 28px; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.pillar-card { padding:23px; border-radius:18px; background:var(--surface); border:1px solid var(--line); }
.pillar-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--brand-soft); color:var(--brand); margin-bottom:13px; font-weight:900; }
.pillar-card h3 { margin:0 0 7px; font-size:17px; }
.pillar-card p { margin:0; color:var(--muted); font-size:14px; }

.course-map { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.compact-map .course-card { min-height: 115px; }
.course-card {
  display:grid;
  grid-template-columns:45px 1fr;
  gap:14px;
  padding:19px;
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  transition:.17s ease;
}
.course-card:hover { transform:translateY(-2px); box-shadow:0 9px 25px rgba(29,70,74,.08); }
.course-card .num { min-width:45px; height:45px; padding:0 6px; display:grid; place-items:center; border-radius:13px; background:var(--brand-soft); color:var(--brand-dark); font-weight:850; font-size: 12px; }
.course-card h3 { margin:1px 0 4px; font-size:15px; }
.course-card p { margin:0; color:var(--muted); font-size:12px; }

.callout { display:grid; grid-template-columns:auto 1fr; gap:17px; align-items:start; padding:24px; border-radius:18px; background:#fff8ed; border:1px solid #eed9b8; }
.callout-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#f4e2c4; color:#765024; font-weight:900; }
.callout h3 { margin:1px 0 5px; font-size:16px; }
.callout p { margin:0; color:#6e6254; font-size:14px; }

.lesson-header { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; margin-bottom:30px; }
.lesson-kicker { color:var(--brand); font-weight:800; font-size:12px; letter-spacing:.045em; }
.lesson-header h1 { margin:6px 0 9px; font-size:clamp(34px,4vw,50px); line-height:1.05; letter-spacing:-.045em; }
.lesson-header p { max-width:800px; margin:0; color:var(--muted); font-size:17px; }
.complete-btn { flex:0 0 auto; border:1px solid #bad0cd; background:white; color:var(--brand-dark); border-radius:12px; padding:11px 14px; font-weight:750; }
.complete-btn.is-complete { background:var(--success); color:white; border-color:var(--success); }

.lesson-body { display: grid; gap: 22px; }
.content-card, .video-card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 28px rgba(23,67,70,.06);
}
.primary-video { width: 100%; }
.video-wrap { aspect-ratio:16/9; background:#102e31; }
.video-wrap iframe { width:100%; height:100%; border:0; display:block; }
.video-card-copy { padding: 16px 18px 19px; }
.video-card-copy h3 { margin: 7px 0 5px; font-size: 17px; line-height: 1.3; }
.video-card-copy p { margin: 0; color: var(--muted); font-size: 12.5px; }
.primary-video .video-card-copy { padding: 18px 22px 21px; }
.primary-video .video-card-copy h3 { font-size: 20px; }
.video-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .025em;
}
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.selected-resources { margin-top: 18px; }
.external-video-card { min-height: 100%; }
.external-video-visual {
  min-height: 210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,#0e5257,#2a8178);
  color:white;
}
.external-video-icon { font-size: 40px; line-height:1; }
.external-video-visual .video-tag { background:rgba(255,255,255,.14); color:white; border:1px solid rgba(255,255,255,.25); }

.lesson-copy-card { box-shadow:none; }
.copy { padding:25px 28px 29px; }
.copy h2 { margin:0 0 10px; font-size:23px; letter-spacing:-.02em; }
.copy h2:not(:first-child) { margin-top: 26px; }
.copy p { color:#425c5f; margin-bottom: 0; }
.takeaways { display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.takeaways li { display:grid; grid-template-columns:22px 1fr; gap:9px; align-items:start; color:#375255; font-size:14px; }
.takeaways li::before { content:"✓"; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:900; font-size:11px; margin-top:1px; }

.lesson-notes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top: 8px;
}
.info-card { padding:21px; background:white; border:1px solid var(--line); border-radius:18px; }
.info-card h3 { margin:0 0 8px; font-size:15px; }
.info-card p, .info-card li { color:var(--muted); font-size:13px; }
.info-card ul { margin:0; padding-left:18px; }
.info-card p:last-child { margin-bottom:0; }
.draft-note { background:#f9f1e5; border-color:#ead4b0; }

.resource-header { margin-bottom: 24px; }
.resource-callout { margin-bottom: 28px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.resource-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height: 230px;
  padding:22px;
  border-radius:18px;
  background:white;
  border:1px solid var(--line);
}
.resource-kind {
  display:inline-block;
  margin-bottom: 9px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  font-size:10px;
  font-weight:800;
}
.resource-card h3 { margin:0 0 8px; font-size:17px; line-height:1.3; }
.resource-card p { flex:1; margin:0 0 18px; color:var(--muted); font-size:13px; }

.source-link { color:var(--brand); font-weight:700; text-decoration:none; }
.source-link:hover { text-decoration:underline; }
.next-prev { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:30px; }
.text-btn { border:0; background:transparent; padding:10px 0; color:var(--brand); font-weight:750; text-align:left; }
.text-btn:last-child { text-align:right; }

.footer-note { margin-top:50px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.scrim { position:fixed; inset:72px 0 0; z-index:35; background:rgba(11,32,34,.34); }

@media (max-width: 1100px) {
  .page { padding:44px 36px 70px; }
  .hero { padding:54px; min-height:500px; }
  .lesson-notes { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .topbar { padding:0 18px; }
  .preview-pill { display:none; }
  .icon-button { display:block; }
  .sidebar {
    transform:translateX(-102%);
    transition:transform .22s ease;
    width:min(330px,87vw);
    box-shadow:20px 0 50px rgba(22,54,56,.16);
  }
  .sidebar.open { transform:translateX(0); }
  main { margin-left:0; }
  .page { padding:32px 18px 64px; }
  .hero { padding:38px 27px; min-height:500px; border-radius:22px; }
  .pillars, .course-map, .video-grid, .resource-grid { grid-template-columns:1fr; }
  .lesson-header { display:block; }
  .complete-btn { margin-top:20px; }
  .external-video-visual { min-height: 180px; }
}

@media (max-width: 520px) {
  .brand { font-size:19px; }
  .hero h1 { font-size:43px; }
  .hero p { font-size:16px; }
  .section-heading h2 { font-size:29px; }
  .copy { padding:21px; }
  .next-prev { align-items:center; }
  .text-btn { max-width: 48%; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}