/*
Theme Name: opnf.sh
Theme URI: https://opnf.sh
Author: opnForum
Author URI: https://opnforum.com
Description: Terminal-inspired product site for opnf.sh Linux engineering courses.
Version: 2.20
License: Proprietary
Text Domain: opnfsh
*/

/* ── Reset & Base ──────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --bg-card: #131313;
  --bg-card-hover: #1a1a1a;
  --border: #222;
  --border-hover: #333;
  --text: #d4d4d4;
  --text-dim: #888;
  --text-muted: #555;
  --accent: #ff6b1a;
  --accent-hover: #ff8a47;
  --green: #22c55e;
  --blue: #3b82f6;
  --red: #ef4444;
  --purple: #a855f7;
  --white: #e8e8e8;
  --radius: 6px;
  --radius-lg: 10px;
  --max-w: 1120px;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; }

::selection { background: var(--accent); color: #fff; }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--white);
  font-weight: 600;
  line-height: 1.2;
}
h1 { font-size: 42px; letter-spacing: -0.02em; }
h2 { font-size: 28px; letter-spacing: -0.01em; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

p { margin-bottom: 16px; max-width: 680px; }
p:last-child { margin-bottom: 0; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes blink {
  50% { opacity: 0; }
}

/* ── Layout ────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.section:last-child { border-bottom: none; }

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
}

.header-nav-desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-nav-desktop a {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.header-nav-desktop a:hover { color: var(--white); }
.header-nav-desktop a.nav-login {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 5px 15px; /* 5+1px border = same box height as the solid Enroll (6px) */
  border-radius: var(--radius);
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.header-nav-desktop a.nav-login:hover { border-color: var(--accent); color: var(--accent); }
.header-nav-desktop a.nav-enroll {
  color: var(--bg);
  background: var(--accent);
  padding: 6px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background 0.15s;
}
.header-nav-desktop a.nav-enroll:hover { background: var(--accent-hover); color: var(--bg); }
/* Enroll + Sign In (or avatar) read as a pair: tighten the 28px nav gap between them */
.header-nav-desktop a.nav-enroll + a.nav-login,
.header-nav-desktop a.nav-enroll + .nav-user { margin-left: -16px; }

/* ── Mobile action cluster (Enroll + hamburger) ─────────── */
.header-actions-mobile { display: flex; align-items: center; gap: 12px; }
.nav-enroll-mobile {
  display: none; /* shown only under the mobile breakpoint */
  align-items: center;
  color: var(--bg);
  background: var(--accent);
  padding: 6px 14px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-enroll-mobile:hover { background: var(--accent-hover); }

/* ── User Avatar (desktop) ─────────────────────────────── */
.nav-user { position: relative; margin-left: 4px; }
.nav-avatar-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; padding: 0; cursor: pointer; transition: opacity 0.15s; }
.nav-avatar-btn:hover { opacity: 0.8; }
.nav-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.nav-avatar-fallback { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #2a2a2a; color: var(--white); border-radius: 50%; font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.nav-avatar-icon { color: #b0b0b0; }
.nav-avatar-btn:hover .nav-avatar-icon { color: var(--white); }
.nav-user-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px 0; z-index: 200; }
.nav-user-menu.open { display: block; }
.nav-user-header { padding: 10px 16px; }
.nav-user-name { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--white); }
.nav-user-divider { height: 1px; background: var(--border); margin: 4px 0; }
.nav-user-menu a { display: flex !important; align-items: center; gap: 10px; padding: 10px 16px !important; font-size: 14px !important; color: var(--text-dim) !important; transition: background 0.15s, color 0.15s; }
.nav-user-menu a:hover { background: rgba(255,255,255,0.03) !important; color: var(--white) !important; }

/* ── Courses Dropdown (desktop) ────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-dropdown-trigger .nav-chevron { transition: transform 0.15s; }
.nav-dropdown:hover .nav-dropdown-trigger .nav-chevron { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: -12px; padding-top: 12px; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; bottom: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.nav-dropdown-menu a { position: relative; display: block; padding: 10px 20px; font-size: 14px; white-space: nowrap; }
.nav-dropdown-menu a:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.nav-dropdown-menu a:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.03); }
.nav-drop-security:hover { color: var(--red) !important; }
.nav-drop-data:hover { color: var(--green) !important; }
.nav-drop-devops:hover { color: var(--blue) !important; }
.nav-drop-ai:hover { color: var(--purple) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
}

/* ── Mobile Nav Overlay (outside header — free from backdrop-filter stacking) ── */
.mobile-nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 9999; overflow-y: auto; }
.mobile-nav-overlay.open { display: block; }
.mobile-nav-inner { padding: 24px; }
.nav-close { display: flex; align-items: center; justify-content: flex-end; background: none; border: none; color: var(--text-dim); padding: 0 0 20px; cursor: pointer; width: 100%; }
.mobile-nav-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; font-family: var(--font-heading); font-size: 15px; color: var(--text); text-decoration: none; transition: background 0.15s; }
.mobile-nav-item:hover { background: var(--bg-card-hover); }
.mobile-nav-label { pointer-events: none; color: var(--text-dim); border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; }
.mobile-nav-sub { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 48px; background: var(--bg-card); border: 1px solid var(--border); border-top: none; font-family: var(--font-heading); font-size: 14px; text-decoration: none; transition: background 0.15s; }
.mobile-nav-sub + .mobile-nav-item { margin-top: 12px; }
.mobile-nav-sub-last { border-radius: 0 0 var(--radius) var(--radius); }
.mobile-nav-sub:hover { background: var(--bg-card-hover); }
.mobile-nav-sub.nav-drop-security { color: var(--red); }
.mobile-nav-sub.nav-drop-data { color: var(--green); }
.mobile-nav-sub.nav-drop-devops { color: var(--blue); }
.mobile-nav-sub.nav-drop-ai { color: var(--purple); }
.mobile-nav-divider { height: 1px; background: var(--border); margin: 12px 0; }
.mobile-nav-signin { justify-content: center; background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 600; margin-top: 8px; }
.mobile-nav-enroll { justify-content: center; background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-weight: 600; }
.mobile-nav-enroll:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: transparent !important; }

@media (max-width: 768px) {
  .header-nav-desktop { display: none; }
  .nav-toggle { display: block; }
  .nav-enroll-mobile { display: inline-flex; }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  padding: 100px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 24px;
}
.hero-logo .bash {
  font-size: 24px;
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}
.hero-logo .filename {
  font-size: 72px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-logo .hl-quote { color: var(--text-dim); }

.hero-tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  margin: 16px auto 0;
}
.hero-tagline .hash { color: var(--accent); }

.hero-sub {
  font-size: 16px;
  color: var(--text);
  max-width: 600px;
  margin: 32px auto 0;
  line-height: 1.7;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
}
.hero-stat-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--accent);
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.hero-echo {
  font-family: var(--font-mono);
  font-size: 14px;
  margin-top: 48px;
  text-align: left;
  display: inline-block;
}
.hero-echo .line {
  display: block;
  padding: 2px 0;
}
.hero-echo .ln { color: var(--text-muted); margin-right: 8px; }
.hero-echo .cmd { color: var(--text-dim); }

@media (max-width: 600px) {
  .hero { padding: 64px 0 56px; }
  .hero-logo .filename { font-size: 42px; line-height: 1.2; }
  .hero-logo .bash { font-size: 18px; }
  .hero-stats { gap: 20px; }
  .hero-stat-num { font-size: 22px; }
}

/* ── Track Cards ───────────────────────────────────────── */
.track-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}

.track-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.track-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.track-card img {
  opacity: 0.8;
  transition: opacity 0.2s;
}
.track-card:hover img {
  opacity: 1;
}
.track-card[data-track="data"] { border-top: 2px solid var(--green); }
.track-card[data-track="devops"] { border-top: 2px solid var(--blue); }
.track-card[data-track="security"] { border-top: 2px solid var(--red); }

.track-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.track-card[data-track="data"] .track-label { color: var(--green); }
.track-card[data-track="devops"] .track-label { color: var(--blue); }
.track-card[data-track="security"] .track-label { color: var(--red); }

.track-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.track-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}

.track-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.track-cta {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  transition: all 0.15s;
}
.track-card[data-track="data"] .track-cta:hover { border-color: var(--green); color: var(--green); }
.track-card[data-track="devops"] .track-cta:hover { border-color: var(--blue); color: var(--blue); }
.track-card[data-track="security"] .track-cta:hover { border-color: var(--red); color: var(--red); }

/* ── AI Pro Featured Card ─────────────────────────────── */
.ai-featured {
  margin-top: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--purple);
  border-radius: var(--radius-lg);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.ai-featured::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 100%;
  background: radial-gradient(ellipse at top right, rgba(168,85,247,0.06), transparent 70%);
  pointer-events: none;
}
.ai-featured:hover {
  border-left-color: var(--border-hover);
  border-right-color: var(--border-hover);
  border-bottom-color: var(--border-hover);
  transform: translateY(-2px);
}
.ai-featured-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-featured-icon img {
  max-height: 90px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.ai-featured:hover .ai-featured-icon img {
  opacity: 1;
}
.ai-featured-body {
  position: relative;
  z-index: 1;
  padding-right: 24px;
}
.ai-featured-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ai-featured .track-label {
  color: var(--purple);
  margin-bottom: 0;
}
.ai-badge-new {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(168,85,247,0.12);
  color: var(--purple);
}
.ai-featured .track-title {
  font-size: 22px;
  margin-bottom: 10px;
}
.ai-featured .track-desc {
  margin-bottom: 20px;
}
.ai-featured .track-meta {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.ai-featured-mobile-cta {
  display: none;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  transition: all 0.15s;
}
.ai-featured-mobile-cta:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.ai-featured-sidebar {
  position: relative;
  z-index: 1;
  border-left: 1px solid var(--border);
  padding-left: 24px;
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.ai-featured .track-cta {
  margin-top: 4px;
}
.ai-featured .track-cta:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.ai-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.ai-feature-list li {
  font-size: 13px;
  color: var(--text-dim);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-feature-list li::before {
  content: '›';
  color: var(--purple);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 768px) {
  .track-grid { grid-template-columns: 1fr; }
  .track-meta { display: none; }
  .ai-featured {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  .ai-featured-icon {
    height: 90px;
    margin-bottom: 20px;
  }
  .ai-featured-icon img { max-height: 80px; }
  .ai-featured-body { padding-right: 0; }
  .ai-featured-header { margin-bottom: 12px; }
  .ai-featured .track-title { font-size: 20px; margin-bottom: 12px; }
  .ai-featured .track-desc { margin-bottom: 20px; }
  .ai-featured .track-meta { margin-bottom: 0; }
  .ai-featured-sidebar { display: none; }
  .ai-featured-mobile-cta { display: block; }
}

/* ── Approach ──────────────────────────────────────────── */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .approach-grid { grid-template-columns: 1fr; }
  #faq-list { grid-template-columns: 1fr !important; }
}

/* ── Tools Marquee ──────────────────────────────────────── */
@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.tools-marquee {
  display: flex;
  white-space: nowrap;
}
.marquee-left { animation: marqueeLeft 30s linear infinite; }
.marquee-right { animation: marqueeRight 30s linear infinite; }
.tools-track {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
 opacity: 0.8;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-secondary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 32px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── Pricing ───────────────────────────────────────────── */
.price-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.price-three-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.price-option-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

/* Own toggle */
.price-toggle-wrap {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 12px;
}
.price-toggle-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.price-toggle-btn.active {
  background: var(--bg);
  color: var(--white);
  border: 1px solid var(--border);
}

/* Course picker dropdown */
.price-course-picker {
  margin-bottom: 16px;
}
.price-course-picker select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.price-course-picker select:focus {
  outline: none;
  border-color: var(--accent);
}
.price-period {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}
.price-own-grid {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 8px 0;
}
.price-own-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
}
.price-own-single .price-amount,
.price-own-bundle .price-amount { margin: 0; }
.price-own-single .price-desc,
.price-own-bundle .price-desc { margin-bottom: 0; }

.price-free-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin-bottom: 20px;
}

.price-schools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin-top: 32px;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.price-amount {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 700;
  color: var(--white);
  margin: 8px 0;
}
.price-amount .currency { font-size: 18px; color: var(--text-dim); vertical-align: super; }
.price-amount sup { font-size: 18px; }

.price-desc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.price-list {
  list-style: none;
  flex: 1;
  margin-bottom: 24px;
}
.price-list li {
  font-size: 13px;
  color: var(--text-dim);
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
}
.price-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 12px;
}

.price-btn {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  transition: all 0.15s;
  margin-top: auto;
}
.price-btn-buy {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 12px;
  margin-bottom: 8px;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff !important;
  transition: background 0.15s;
}
.price-btn-buy:hover { background: var(--accent-hover); }

.bundle-card {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin-top: 20px;
  position: relative;
}
.bundle-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px;
}

.bundle-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bundle-track-card {
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid;
}
.bundle-track-card.data { border-color: rgba(34,197,94,0.2); background: rgba(34,197,94,0.03); }
.bundle-track-card.devops { border-color: rgba(59,130,246,0.2); background: rgba(59,130,246,0.03); }
.bundle-track-card.security { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.03); }

@media (max-width: 768px) {
  .price-options { grid-template-columns: 1fr; }
  .price-three-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .bundle-tracks { grid-template-columns: 1fr; }
  .price-free-bar { flex-direction: column; text-align: center; }
}

/* ── Commitments ───────────────────────────────────────── */
.commitments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin-top: 32px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.commitment-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.commitment-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: none;
}

@media (max-width: 600px) {
  .commitments { grid-template-columns: 1fr; }
}

/* ── FAQ ───────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}
.faq-q:hover { color: var(--accent); }
.faq-chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.faq-item.open .faq-chevron { transform: rotate(90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-a-inner {
  padding: 0 0 20px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 680px;
}

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  font-family: var(--font-heading);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 40px;
}

.footer-nav-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.footer-brand-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 280px;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: 16px;
  color: var(--text-dim);
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--white); }

.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-nav-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ── Page Templates ────────────────────────────────────── */

/* ── Product Hero (two-column) ─────────────────────────── */
.product-hero {
  padding: 80px 0 56px;
}
.product-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-hero-icon {
  height: 140px;
  width: auto;
  opacity: 0.9;
  display: block;
  margin-bottom: 24px;
}
.product-hero-title {
  font-size: 42px;
  margin-bottom: 16px;
}
.product-hero-desc {
  color: var(--text-dim);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.product-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Features card (right column) */
.product-hero-features {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
}
.product-hero-features-label {
  margin-bottom: 16px;
}

/* Security Pro overrides (red accent instead of blue) */
.product-hero-features-security {
  border-top-color: var(--red);
}
.product-hero-features-security .feature-icon {
  color: var(--red);
}
.product-stats-band-security .product-stat-num {
  color: var(--red);
}
.req-card-featured-security.req-card-featured {
  border-top-color: var(--red);
}
.req-card-featured-security.req-card-featured .req-card-label {
  color: var(--red);
}
/* Security Pro: tutorial numbers are red (track color) */
.security-curriculum .curr-tutorial-num {
  color: var(--red);
}

/* Data Pro overrides (green accent instead of blue) */
.product-hero-features-data {
  border-top-color: var(--green);
}
.product-hero-features-data .feature-icon {
  color: var(--green);
}
.product-stats-band-data .product-stat-num {
  color: var(--green);
}
.req-card-featured-data.req-card-featured {
  border-top-color: var(--green);
}
.req-card-featured-data.req-card-featured .req-card-label {
  color: var(--green);
}
/* Data Pro: tutorial numbers/names are green (track color), labs swap to blue */
.data-curriculum .curr-tutorial-num {
  color: var(--green);
}
.data-curriculum .curr-tutorial-num.lab,
.data-curriculum .curr-tutorial-name.lab {
  color: var(--blue);
}

/* AI Pro overrides (purple accent) */
.product-hero-features-ai {
  border-top-color: var(--purple);
}
.product-hero-features-ai .feature-icon {
  color: var(--purple);
}
.product-stats-band-ai .product-stat-num {
  color: var(--purple);
}
.req-card-featured-ai.req-card-featured {
  border-top-color: var(--purple);
}
.req-card-featured-ai.req-card-featured .req-card-label {
  color: var(--purple);
}
/* AI Pro: tutorial numbers are purple (track color), labs swap to blue */
.ai-curriculum .curr-tutorial-num {
  color: var(--purple);
}
.ai-curriculum .curr-tutorial-num.lab,
.ai-curriculum .curr-tutorial-name.lab {
  color: var(--green);
}
.product-hero-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-hero-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.product-hero-features-list li:first-child {
  border-top: none;
  padding-top: 0;
}
.product-hero-features-list li:last-child {
  padding-bottom: 0;
}
.feature-icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 900px) {
  .product-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-hero-title {
    font-size: 34px;
  }
}

/* ── Product Stats Band ────────────────────────────────── */
.product-stats-band {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.product-stats-grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 32px 0;
}
.product-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.product-stat-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1.1;
}
.product-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

@media (max-width: 600px) {
  .product-stats-grid {
    gap: 24px;
  }
  .product-stat-num {
    font-size: 22px;
  }
}

/* ── Hardware Requirements ─────────────────────────────── */
.req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.req-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.req-card-featured {
  border-top: 2px solid var(--blue);
}
.req-card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.req-card-featured .req-card-label {
  color: var(--blue);
}
.req-card-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 20px;
  max-width: none;
}
.req-list {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px 20px;
  margin: 0;
}
.req-list dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}
.req-list dd {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}
.req-footnote {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 24px;
  max-width: 720px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .req-grid {
    grid-template-columns: 1fr;
  }
  .req-list {
    grid-template-columns: 80px 1fr;
    gap: 8px 16px;
  }
}

/* ── Career Outcomes ──────────────────────────────────── */
.career-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.career-metro-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.career-metro-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.career-metro-select {
  font-family: var(--font-heading);
  font-size: 14px;
  padding: 10px 36px 10px 14px;
  background: var(--bg-card);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 240px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.career-metro-select:focus {
  outline: none;
  border-color: var(--accent);
}
.metro-combo {
  position: relative;
  min-width: 240px;
}
.metro-combo-input {
  width: 100%;
  box-sizing: border-box;
}
.metro-combo-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.metro-combo-list.open { display: block; }
.metro-combo-option {
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.metro-combo-option:hover {
  background: rgba(255,255,255,0.05);
  color: var(--white);
}
.metro-combo-empty {
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-muted);
}
.career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.career-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}
.career-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.career-card-salary {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
}
.career-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.career-list li {
  font-size: 14px;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  gap: 8px;
}
.career-list li:last-child {
  border-bottom: none;
}
.career-list li::before {
  content: '›';
  color: var(--marker-color, var(--text-muted));
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.career-footnote {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 24px;
  max-width: 720px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .career-grid {
    grid-template-columns: 1fr;
  }
  .career-header {
    flex-direction: column;
    align-items: stretch;
  }
  .career-metro-picker {
    margin-top: 16px;
  }
  .career-metro-select {
    width: 100%;
  }
}

/* ── Curriculum Accordion ──────────────────────────────── */
.curriculum-list { max-width: none; }
.curr-item { border-bottom: 1px solid var(--border); }
.curr-item:first-child { border-top: 1px solid var(--border); }
.curr-item:last-child { border-bottom: none; }
.curr-q {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  flex-wrap: wrap;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.curr-q:hover .curr-chevron {
  color: var(--text);
}
.curr-level {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 70px;
}
.curr-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 200px;
}
.curr-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.curr-chevron {
  color: var(--text-dim);
  font-size: 20px;
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
}
.curr-item.open .curr-chevron { transform: rotate(90deg); }
.curr-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.curr-a-inner {
  padding: 0 0 28px 86px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.curr-a-inner > p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: none;
  grid-column: 1 / -1;
}
.curr-a-inner hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
.curr-tutorial {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.curr-tutorial:last-child { border-bottom: none; }
.curr-tutorial-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.quiz-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}
.curr-tutorial-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  flex-shrink: 0;
  min-width: 32px;
}
.curr-tutorial-num.lab { color: var(--green); }
.curr-tutorial-num.exam { color: var(--accent); }
.curr-tutorial-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.curr-tutorial-name.lab { color: var(--green); }
.curr-tutorial-name.exam { color: var(--accent); }
.curr-tutorial-tools {
  font-size: 14px;
  color: var(--text);
  margin-top: 4px;
  padding-left: 44px;
  line-height: 1.6;
}
.curr-tutorial-cmds {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 44px;
}

@media (max-width: 600px) {
  .curr-title { font-size: 16px; }
  .curr-a-inner { padding: 0 0 24px 0; grid-template-columns: 1fr; }
  .curr-q { gap: 8px; }
  .curr-level { width: auto; }
}
.page-content {
  padding: 80px 0;
}
.page-content h1 {
  margin-bottom: 32px;
}
.page-content p {
  color: var(--text-dim);
  line-height: 1.8;
}

/* ── Utility ───────────────────────────────────────────── */
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-red { color: var(--red); }
.text-purple { color: var(--purple); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.tools-marquee:hover .tools-track { opacity: 1; }

/* ── About: BLS Growth Slope Chart ─────────────────────── */
.growth-chart {
  margin: 36px 0;
  padding: 22px 20px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.growth-chart-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.growth-svg-wrap {
  width: 100%;
  overflow: hidden;
}
.growth-svg {
  width: 100%;
  height: auto;
  display: block;
}
.gc-axis {
  stroke: var(--border);
  stroke-width: 1;
}
.gc-year {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.gc-line line {
  stroke: var(--gc-color, #333);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: gcDraw 1s ease-out forwards;
  animation-delay: var(--gc-delay, 0s);
}
.gc-line circle {
  fill: var(--gc-color, #333);
  opacity: 0;
  animation: gcDot 0.3s ease-out forwards;
  animation-delay: calc(var(--gc-delay, 0s) + 0.9s);
}
.gc-lbl {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  animation: gcDot 0.4s ease-out forwards;
  animation-delay: calc(var(--gc-delay, 0s) + 0.9s);
}
.gc-line.gc-faint line {
  stroke: #3a3a3a;
  stroke-width: 1.5;
}
.gc-line.gc-faint circle {
  fill: #3a3a3a;
}
.gc-lbl-faint {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
}
@keyframes gcDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes gcDot {
  to { opacity: 1; }
}
.growth-chart-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── About: course logos row ───────────────────────────── */
.about-course-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 28px 0;
  padding: 28px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-course-logos img {
  height: 90px;
  width: auto;
  max-width: 22%;
  object-fit: contain;
  opacity: 0.9;
}
@media (max-width: 560px) {
  .about-course-logos {
    gap: 10px;
    padding: 20px 10px;
  }
  .about-course-logos img {
    height: auto;
    max-width: 22%;
  }
}

/* ── About: animated lesson demo ───────────────────────── */
.demo-term {
  margin: 32px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0a0a;
  font-family: var(--font-mono);
}
.demo-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #131313;
  border-bottom: 1px solid var(--border);
}
.demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
}
.demo-dot:nth-child(1) { background: #e8662e; }
.demo-term-title {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.demo-term-body {
  height: 320px;
  overflow: hidden;
  padding: 18px;
  font-size: 12.5px;
  line-height: 1.6;
}
.demo-teach {
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--red);
  animation: demoFade 0.4s ease-out;
}
.demo-teach-title {
  color: var(--red);
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 12px;
}
.demo-teach-text {
  color: #bbb;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.65;
}
.demo-tip {
  margin-bottom: 14px;
  color: #dba617;
  font-size: 11.5px;
  animation: demoFade 0.4s ease-out;
}
.demo-tip-bulb { color: #dba617; }
.demo-cmd-line {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 6px;
  animation: demoFade 0.3s ease-out;
}
.demo-prompt { color: #22c55e; white-space: pre; }
.demo-cmd { color: #fff; word-break: break-all; }
.demo-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: #e8662e;
  margin-left: 2px;
  animation: demoBlink 1s step-end infinite;
}
.demo-output {
  color: #999;
  white-space: pre-wrap;
  margin: 4px 0 14px;
  animation: demoFade 0.3s ease-out;
}
.demo-done {
  color: #22c55e;
  margin-top: 10px;
  font-size: 12px;
  animation: demoFade 0.5s ease-out;
}
.demo-spacer { height: 10px; }
.demo-phase {
  color: #e8662e;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding-bottom: 4px;
  margin: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  animation: demoFade 0.4s ease-out;
}
.demo-header {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
  animation: demoFade 0.4s ease-out;
}
.demo-subhead {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  margin-bottom: 6px;
  animation: demoFade 0.4s ease-out;
}
.demo-cmdhead {
  color: #e8662e;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  margin: 14px 0 6px;
  animation: demoFade 0.3s ease-out;
}
.demo-desc {
  color: #ccc;
  font-family: var(--font-body);
  font-size: 12.5px;
  margin-top: 6px;
  animation: demoFade 0.3s ease-out;
}
.demo-typehint {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 3px 0 4px;
  animation: demoFade 0.3s ease-out;
}
.demo-typehint-cmd { color: #dba617; }
.demo-ok {
  color: #22c55e;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-top: 2px;
  animation: demoFade 0.3s ease-out;
}
.demo-ask-q {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  animation: demoFade 0.4s ease-out;
}
.demo-ask-mark { color: #e8662e; font-weight: 700; }
.demo-ask-correct {
  color: #22c55e;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-top: 4px;
  animation: demoFade 0.3s ease-out;
}
.demo-lab-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #a855f7;
  border: 1px solid #a855f7;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
  animation: demoFade 0.3s ease-out;
}
.demo-lab-scenario-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  animation: demoFade 0.3s ease-out;
}
.demo-lab-scenario {
  color: #ccc;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 2px;
  animation: demoFade 0.4s ease-out;
}
.demo-lab-task-label {
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  animation: demoFade 0.3s ease-out;
}
.demo-lab-task {
  color: #ddd;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 2px;
  animation: demoFade 0.4s ease-out;
}
.demo-lab-note {
  color: #a855f7;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 4px;
  animation: demoFade 0.4s ease-out;
}
.demo-lab-react {
  color: #888;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  margin-top: 5px;
  animation: demoFade 0.4s ease-out;
}
.demo-lab-complete {
  color: #22c55e;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  animation: demoFade 0.5s ease-out;
}
@keyframes demoFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes demoBlink {
  50% { opacity: 0; }
}
@media (max-width: 560px) {
  .demo-term-body { height: 320px; font-size: 11.5px; }
  .demo-term-title { font-size: 9.5px; }
}

/* ── About: bottom CTA ─────────────────────────────────── */
.about-cta {
  margin: 44px 0 8px;
  padding: 36px 28px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.about-cta-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 8px;
}
.about-cta-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 24px;
}
.about-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.about-cta-primary {
  font-size: 14px;
  padding: 12px 28px;
}
.about-cta-secondary {
  font-size: 14px;
  padding: 12px 28px;
}
@media (max-width: 480px) {
  .about-cta-buttons { flex-direction: column; }
  .about-cta-primary, .about-cta-secondary { width: 100%; }
}

/* ── Homepage: lesson demo two-column ──────────────────── */
#lesson-demo { padding-top: 56px; padding-bottom: 56px; }
.lesson-demo-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.lesson-demo-heading {
  font-size: 40px;
  line-height: 1.1;
  margin: 8px 0 20px;
}
.lesson-demo-heading .ldh-1,
.lesson-demo-heading .ldh-2,
.lesson-demo-heading .ldh-3 { display: block; }
.lesson-demo-desc {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.lesson-demo-visual { min-width: 0; }
.lesson-demo-visual .demo-term { margin: 0; }
.lesson-demo-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.lesson-demo-btns-mobile { display: none; }
@media (max-width: 860px) {
  .lesson-demo-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }
  .lesson-demo-heading { font-size: 32px; margin-top: 4px; }
  .lesson-demo-heading .ldh-1,
  .lesson-demo-heading .ldh-2 { display: inline; }
  .lesson-demo-heading .ldh-3 { display: block; }
  .lesson-demo-text { text-align: center; }
  .lesson-demo-visual { width: 100%; }
  .lesson-demo-btns-desktop { display: none; }
  .lesson-demo-btns-mobile {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
}

/* ── Pricing hero title responsive ─────────────────────── */
.pricing-hero-title { font-size: 48px; }
@media (max-width: 600px) {
  .pricing-hero-title { font-size: 38px; line-height: 1.2; }
}

/* ── For Schools page ──────────────────────────────────── */
.schools-title { font-size: 42px; line-height: 1.1; margin: 8px 0 16px; }
.schools-lede { font-size: 18px; color: var(--text); line-height: 1.6; max-width: 680px; margin-bottom: 28px; }
.schools-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.schools-h2 { font-size: 28px; margin: 64px 0 8px; }
.schools-sub { color: var(--text-dim); font-size: 15px; margin-bottom: 24px; }

/* Steps */
.schools-steps { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; }
.schools-step { display: flex; gap: 20px; align-items: flex-start; }
.schools-step-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.schools-step-body h3 { font-size: 18px; margin: 6px 0 6px; }
.schools-step-body p { color: var(--text-dim); line-height: 1.65; margin: 0; }

/* Demo dashboard */
.schools-demo {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0d0d0d;
}
.schools-demo-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #161616;
  border-bottom: 1px solid var(--border);
}
.schools-demo-dot { width: 11px; height: 11px; border-radius: 50%; background: #333; }
.schools-demo-dot:first-child { background: #e8662e; }
.schools-demo-title { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
.schools-demo-body { padding: 8px 4px 4px; overflow-x: auto; }
.schools-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.schools-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.schools-th-progress { width: 130px; }
.schools-table tbody td { padding: 14px 16px; border-bottom: 1px solid #1a1a1a; }
.schools-table tbody tr:last-child td { border-bottom: none; }
.schools-td-name { color: var(--text); font-weight: 500; }
.schools-position { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.05em; }
.schools-score { font-weight: 600; }
.schools-score-green { color: var(--green); }
.schools-score-red { color: var(--red); }
.schools-score-plain { color: var(--text); }
.schools-score-muted { color: var(--text-muted); }
.schools-last-green { color: var(--green); }
.schools-last-red { color: var(--red); }
.schools-last-muted { color: var(--text-muted); }
.schools-progress-inline { display: flex; align-items: center; gap: 8px; }
.schools-progress-bar { flex: 1; height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
.schools-progress-fill { height: 100%; background: var(--red); border-radius: 3px; }
.schools-progress-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); min-width: 34px; }
.schools-demo-config {
  display: flex; gap: 32px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: #111;
}
.schools-config-item { display: flex; flex-direction: column; gap: 3px; }
.schools-config-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.schools-config-value { font-family: var(--font-mono); font-size: 15px; color: var(--text); }

/* Benefits */
.schools-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.schools-benefit {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.schools-benefit h3 { font-size: 17px; margin: 0 0 8px; }
.schools-benefit p { color: var(--text-dim); line-height: 1.6; margin: 0; font-size: 14px; }

/* Bottom CTA */
.schools-bottom-cta {
  margin-top: 64px;
  padding: 44px 32px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.schools-bottom-cta h2 { font-size: 26px; margin: 0 0 10px; }
.schools-bottom-cta p { color: var(--text-dim); line-height: 1.6; max-width: 560px; margin: 0 auto 24px; }

@media (max-width: 680px) {
  .schools-title { font-size: 32px; }
  .schools-lede { font-size: 16px; }
  .schools-h2 { font-size: 24px; margin-top: 48px; }
  .schools-benefits { grid-template-columns: 1fr; }
  .schools-demo-config { flex-direction: column; gap: 14px; }
  .schools-table { font-size: 13px; }
  .schools-table thead th, .schools-table tbody td { padding: 10px 12px; }
}

/* For Teams & Schools — added elements */
.schools-audience-note { color: var(--text-muted); font-size: 13px; font-family: var(--font-mono); margin-top: 16px; letter-spacing: 0.02em; }
.schools-educators {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.schools-mission { font-size: 16px; color: var(--text); line-height: 1.7; margin-bottom: 18px; max-width: 720px; }

/* ═══════════════════════════════════════════════════════════════════════
   opnOS Full Screen — page-opnos.php

   The opnOS plugin does NOT flow its desktop into the content column. Its
   #desktop and #taskbar are position:fixed, pinned to inset:0 / bottom:0 —
   they cover the WHOLE viewport, header included, and their window z-indexes
   start at 5000 and climb, far above the site header's z-index:100.

   So keeping the header visible is not a wrapper job: we push the fixed
   desktop, the taskbar, and every fixed overlay the plugin owns down by the
   header height, hide the footer, and isolate the desktop's stacking so its
   escalating window numbers can never climb over the header.

   get_footer() is still CALLED — footer.php is where wp_footer() lives, and
   wp_footer() is where the plugin's scripts print. The footer markup ships;
   this hides it.
   ═══════════════════════════════════════════════════════════════════════ */

body.opnos-fullscreen {
  /* the measured height of .header-inner. If that changes, change this. */
  --opnos-header-h: 72px;
  overflow: hidden;
  overscroll-behavior: none;
}

/* The site header keeps its place at the top of the flow. The opnOS main
   wrapper takes no space of its own — the desktop inside it is fixed. */
body.opnos-fullscreen .opnos-main {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Push the fixed desktop below the header. #desktop is `inset: 0 0 var(--bar-h) 0`
   in the plugin; we reassert the same box but starting at the header, not the
   top of the viewport. */
body.opnos-fullscreen #desktop {
  top: var(--opnos-header-h);
}

/* The taskbar is fixed to the bottom already — that is correct and stays. The
   start menu, tray popovers, toasts and modal layer are all fixed too and, in a
   full-viewport plugin, are measured from the viewport edges. They already sit
   below the header because the header occupies the top 72px and these anchor to
   the bottom; the one that spans the full height is the modal backdrop. */

/* The modal backdrop is `position:fixed; inset:0` — pull its top down so a dialog
   overlay does not grey out the site header. */
body.opnos-fullscreen #modal-root > * {
  top: var(--opnos-header-h);
}

/* Isolate the desktop's stacking context. The plugin hands each focused window
   `++zTop` from a base above 5000, forever, in the ROOT stacking context — given
   a long enough session those numbers would climb over the header (z-index:100).
   Trapping the desktop in its own layer means whatever number a window writes on
   itself, it can never escape past the header. */
body.opnos-fullscreen #desktop { isolation: isolate; }

/* Header only. The footer stays in the DOM for wp_footer(); it just isn't shown. */
body.opnos-fullscreen .site-footer { display: none; }

/* ── Plugin missing ── */
.opnos-missing {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px 24px;
  text-align: center;
}
.opnos-missing h1 { font-family: var(--font-heading); margin-bottom: 12px; }
.opnos-missing p { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   Curriculum launch links — template-parts/course-curriculum.php

   The WHOLE row is one <a>, matching the terminal's .term-nav-item exactly:
   same padding (10px 8px), same radius, same rgba(255,255,255,0.03) hover
   wash, no text recolor. The negative margins cancel the anchor's padding
   so nothing shifts: .curr-tutorial keeps its 10px 0 (the terminal page
   also uses that class, so it must not change), and -10px/-8px margin
   + 10px/8px padding nets to zero — the hover box just bleeds 8px wider
   than the text, exactly like the terminal.

   Inside the anchor the original structure is intact: the head keeps its
   flex (gap 12px + 32px num = the 44px .curr-tutorial-tools indent), and
   .quiz-label sits back inside the name span with its 6px margin — the
   terminal has no separate quiz target either.
   ═══════════════════════════════════════════════════════════════════════ */

.curr-launch {
  display: block;
  margin: -10px -8px;
  padding: 10px 8px;
  border-radius: var(--radius);
  transition: background 0.1s;
  color: inherit;
  text-decoration: none;
}
.curr-launch:hover { background: rgba(255, 255, 255, 0.03); }

.curr-tutorial-num.cards,
.curr-tutorial-name.cards { color: #dba617; }

.curr-launch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.03);
}