/* =========================================================
   TechGics Learning Labs — Shared Stylesheet
   Used by: index.html, dataready-lab.html, level1-data-foundations.html
   No external fonts, no external libraries, mobile-first.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --tg-navy: #0f2748;
  --tg-navy-2: #15315a;
  --tg-blue: #2563eb;
  --tg-blue-dark: #1d4ed8;
  --tg-teal: #0ea5a4;
  --tg-amber: #f59e0b;
  --tg-orange: #ea580c;       /* brand accent — concept cards, CTAs */
  --tg-orange-soft: #fff1e6;  /* tinted background for orange accents */
  --tg-green: #16a34a;
  --tg-red: #dc2626;
  --tg-bg: #f6f8fb;
  --tg-card: #ffffff;
  --tg-text: #16213a;
  --tg-muted: #5a6a85;
  --tg-border: #e3e8f0;
  --tg-shadow: 0 6px 18px rgba(15, 39, 72, 0.08);
  --tg-shadow-lg: 0 14px 40px rgba(15, 39, 72, 0.12);
  --tg-radius: 12px;
  --tg-radius-lg: 18px;
  --tg-maxw: 1180px;
  --tg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--tg-font);
  color: var(--tg-text);
  background: var(--tg-bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--tg-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--tg-navy); line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.container { max-width: var(--tg-maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.muted { color: var(--tg-muted); }
.center { text-align: center; }

/* ---------- Header / Nav ---------- */
.tg-header {
  background: #fff;
  border-bottom: 1px solid var(--tg-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.tg-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: var(--tg-maxw);
  margin: 0 auto;
  gap: 20px;
}
.tg-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--tg-navy);
  font-size: 1.15rem;
}
.tg-logo:hover { text-decoration: none; }
.tg-logo-mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-teal));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: var(--tg-shadow);
}
.tg-logo-sub {
  font-size: 0.72rem;
  color: var(--tg-muted);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: block;
}
.tg-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tg-nav a {
  color: var(--tg-text);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
}
.tg-nav a:hover { background: var(--tg-bg); text-decoration: none; }
.tg-nav a.active { color: var(--tg-blue); background: #eaf1ff; }
.tg-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 1.1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.05s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--tg-blue);
  color: #fff;
  box-shadow: var(--tg-shadow);
}
.btn-primary:hover { background: var(--tg-blue-dark); }
.btn-secondary {
  background: #fff;
  color: var(--tg-navy);
  border-color: var(--tg-border);
}
.btn-secondary:hover { background: var(--tg-bg); }
.btn-ghost {
  background: transparent;
  color: var(--tg-navy);
  border-color: transparent;
}
.btn-danger {
  background: #fff;
  color: var(--tg-red);
  border-color: #f5cdcd;
}
.btn-danger:hover { background: #fff5f5; }
.btn-success { background: var(--tg-green); color: #fff; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.tg-hero {
  background: linear-gradient(135deg, var(--tg-navy) 0%, var(--tg-navy-2) 60%, #1e3a8a 100%);
  color: #fff;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}
.tg-hero::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, rgba(14,165,164,0.35), transparent 70%);
  pointer-events: none;
}
.tg-hero h1 { color: #fff; margin-bottom: 0.4em; }
.tg-hero .tagline {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #cfe0ff;
  margin-bottom: 1.5em;
}
.tg-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tg-hero .pill {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #cfe0ff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-bottom: 18px;
}
.tg-hero-inner {
  max-width: var(--tg-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.tg-hero-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--tg-radius-lg);
  padding: 24px;
  backdrop-filter: blur(6px);
}
.tg-hero-card h3 { color: #fff; }
.tg-hero-card ul { padding-left: 18px; color: #dbe6ff; margin: 0; }
.tg-hero-card li { margin-bottom: 6px; }

/* ---------- Cards / Grid ---------- */
.grid {
  display: grid;
  gap: 20px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--tg-card);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 22px;
  box-shadow: var(--tg-shadow);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--tg-shadow-lg); }
.card h3 { margin-top: 0; }
.card .badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tg-blue);
  background: #eaf1ff;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-weight: 700;
}
.card .badge.coming { color: var(--tg-amber); background: #fff4e0; }
.card .badge.live { color: var(--tg-green); background: #e7f7ec; }

.feature-card {
  background: linear-gradient(135deg, #fff, #f3f7ff);
  border: 1px solid #d6e2ff;
}

/* ---------- Section heading helper ---------- */
.section-head { text-align: center; margin-bottom: 40px; }
.section-head .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  color: var(--tg-teal);
  font-weight: 700;
  margin-bottom: 6px;
}
.section-head h2 { margin-bottom: 0.4em; }
.section-head p { color: var(--tg-muted); max-width: 720px; margin: 0 auto; }

/* ---------- Lists with icons ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: 8px 0 8px 30px;
  border-bottom: 1px dashed var(--tg-border);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 8px;
  width: 22px; height: 22px;
  background: #e7f7ec;
  color: var(--tg-green);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card {
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 28px;
  text-align: center;
  box-shadow: var(--tg-shadow);
}
.price-card.highlight {
  border-color: var(--tg-blue);
  box-shadow: 0 14px 40px rgba(37,99,235,0.18);
  transform: translateY(-4px);
}
.price-card h3 { margin-bottom: 6px; }
.price-card .price { font-size: 2.2rem; font-weight: 800; color: var(--tg-navy); }
.price-card .price small { font-size: 0.95rem; color: var(--tg-muted); font-weight: 500; }
.price-card .placeholder-tag {
  display: inline-block;
  background: #fff4e0;
  color: var(--tg-amber);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* ---------- Notes / Callouts ---------- */
.note {
  background: #fff8e6;
  border: 1px solid #ffe6a8;
  color: #6b4f00;
  padding: 18px 20px;
  border-radius: var(--tg-radius);
}
.note strong { color: #4a3700; }
.disclaimer {
  background: #fff;
  border: 1px dashed var(--tg-border);
  color: var(--tg-muted);
  padding: 16px 20px;
  border-radius: var(--tg-radius);
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.tg-footer {
  background: var(--tg-navy);
  color: #cfd9eb;
  padding: 50px 20px 24px;
  margin-top: 60px;
}
.tg-footer a { color: #cfd9eb; }
.tg-footer-inner {
  max-width: var(--tg-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
}
.tg-footer h4 { color: #fff; margin-bottom: 12px; font-size: 1rem; }
.tg-footer ul { list-style: none; padding: 0; margin: 0; }
.tg-footer li { margin-bottom: 8px; font-size: 0.92rem; }
.tg-footer-bottom {
  max-width: var(--tg-maxw);
  margin: 30px auto 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: #93a4c2;
}

/* =========================================================
   PRODUCT PAGE — DataReady Lab
   ========================================================= */
.roadmap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  counter-reset: lvl;
}
.roadmap .step {
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 18px;
  position: relative;
  box-shadow: var(--tg-shadow);
}
.roadmap .step::before {
  counter-increment: lvl;
  content: "Level " counter(lvl);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tg-blue);
  background: #eaf1ff;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.roadmap .step h4 { margin: 6px 0 8px; }
.roadmap .step p { font-size: 0.92rem; color: var(--tg-muted); margin: 0; }

.level-block {
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--tg-shadow);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  align-items: start;
}
.level-block .ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-teal));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.3rem;
  box-shadow: var(--tg-shadow);
}

/* =========================================================
   LEVEL 1 SIMULATOR
   ========================================================= */
.lab-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  max-width: var(--tg-maxw);
  margin: 24px auto;
  padding: 0 20px;
  align-items: start;
}
.lab-sidebar {
  position: sticky;
  top: 80px;
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 18px;
  box-shadow: var(--tg-shadow);
}
.lab-sidebar h4 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tg-muted);
}
.lab-nav { list-style: none; padding: 0; margin: 0; }
.lab-nav li { margin-bottom: 4px; }
.lab-nav button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--tg-text);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-nav button:hover { background: var(--tg-bg); }
.lab-nav button.active {
  background: #eaf1ff;
  color: var(--tg-blue);
  font-weight: 600;
}
.lab-nav .lesson-status {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--tg-muted);
}
.lab-nav .lesson-status.done { color: var(--tg-green); }

.progress-wrap {
  margin: 14px 0 6px;
}
.progress-bar {
  width: 100%;
  height: 10px;
  background: #eef2f8;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--tg-blue), var(--tg-teal));
  transition: width 0.4s ease;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--tg-muted);
  margin-top: 6px;
}
.score-pill {
  display: inline-block;
  background: #eaf1ff;
  color: var(--tg-blue);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
}

.lab-main {
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 28px;
  box-shadow: var(--tg-shadow);
  min-height: 400px;
}
.lab-section { display: none; }
.lab-section.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.lab-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tg-teal);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Lesson cards */
.lesson-card {
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 18px;
  margin-bottom: 16px;
  background: #fbfcff;
}
.lesson-card h4 { margin-top: 0; color: var(--tg-navy); }
.lesson-card .example {
  background: #fff;
  border-left: 4px solid var(--tg-blue);
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Sample data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.95rem;
  background: #fff;
}
.data-table th, .data-table td {
  border: 1px solid var(--tg-border);
  padding: 8px 10px;
  text-align: left;
}
.data-table thead th {
  background: var(--tg-navy);
  color: #fff;
  font-weight: 600;
}
.data-table tbody tr:nth-child(even) { background: #f8faff; }

/* Practice activity */
.activity {
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 18px;
  margin: 16px 0;
  background: #fff;
}
.activity .q {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--tg-navy);
}
.activity input[type="text"],
.activity input[type="number"] {
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  width: 220px;
  max-width: 100%;
}
.activity input:focus { outline: 2px solid var(--tg-blue); border-color: var(--tg-blue); }
.activity .options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.activity .options label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbfcff;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  cursor: pointer;
}
.activity .options label:hover { background: #f3f7ff; }
.activity .options input { margin: 0; }
.activity .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.activity .feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  display: none;
}
.activity .feedback.show { display: block; }
.activity .feedback.correct { background: #e7f7ec; color: #14532d; border: 1px solid #b6e6c2; }
.activity .feedback.wrong { background: #fde8e8; color: #7b1d1d; border: 1px solid #f5c2c2; }
.activity .hint {
  display: none;
  margin-top: 10px;
  background: #fff8e6;
  border: 1px solid #ffe6a8;
  color: #6b4f00;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.93rem;
}
.activity .hint.show { display: block; }

/* Quiz */
.quiz-progress {
  background: #f3f7ff;
  border: 1px solid #d6e2ff;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.quiz-question {
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 22px;
  background: #fff;
}
.quiz-question h3 { margin-top: 0; }
.quiz-stem {
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: var(--tg-text);
}
.quiz-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  gap: 8px;
  flex-wrap: wrap;
}

/* Completion screen */
.completion {
  text-align: center;
  padding: 30px 10px;
}
.completion .badge-big {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-teal));
  color: #fff;
  font-size: 2.4rem;
  display: grid; place-items: center;
  margin: 0 auto 16px;
  box-shadow: var(--tg-shadow-lg);
}
.completion .score {
  font-size: 3rem;
  font-weight: 800;
  color: var(--tg-navy);
  margin: 6px 0;
}
.completion .band {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  background: #eaf1ff;
  color: var(--tg-blue);
}
.completion .band.pass-strong { background: #e7f7ec; color: #14532d; }
.completion .band.pass-review { background: #fff4e0; color: #6b4f00; }
.completion .band.fail { background: #fde8e8; color: #7b1d1d; }
.completion .summary {
  text-align: left;
  background: #fbfcff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 18px;
  margin-top: 16px;
}

/* Beta feedback form */
.feedback-form label {
  display: block;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--tg-navy);
}
.feedback-form textarea,
.feedback-form input[type="text"],
.feedback-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}
.feedback-form textarea { min-height: 80px; resize: vertical; }
.feedback-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .tg-hero-inner { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: repeat(2, 1fr); }
  .tg-footer-inner { grid-template-columns: 1fr 1fr; }
  .lab-shell { grid-template-columns: 1fr; }
  .lab-sidebar { position: static; }
}
@media (max-width: 640px) {
  .section { padding: 44px 0; }
  .grid-2, .grid-3, .grid-4, .roadmap { grid-template-columns: 1fr; }
  .tg-footer-inner { grid-template-columns: 1fr; }
  .level-block { grid-template-columns: 1fr; }
  .level-block .ring { width: 60px; height: 60px; font-size: 1rem; }
  .feedback-form .row { grid-template-columns: 1fr; }
  .tg-nav { display: none; flex-direction: column; width: 100%; padding-top: 10px; }
  .tg-nav.open { display: flex; }
  .tg-nav-toggle { display: inline-block; }
  .tg-header-inner { flex-wrap: wrap; }
}

/* ---------- Print-friendly ---------- */
@media print {
  .tg-header, .tg-footer, .lab-sidebar, .btn { display: none !important; }
  body { background: #fff; }
  .lab-main { box-shadow: none; border: 0; }
}

/* =========================================================
   v0.2 — 10-level course additions
   ========================================================= */

/* Storage banner (shown when localStorage is blocked) */
.storage-banner {
  background: #fff8e6;
  border: 1px solid #ffe6a8;
  color: #6b4f00;
  padding: 10px 14px;
  border-radius: var(--tg-radius);
  margin: 10px 20px 0;
  font-size: 0.92rem;
  text-align: center;
}

/* Locked level screen */
.locked-screen {
  text-align: center;
  padding: 50px 20px;
}
.locked-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff4e0;
  color: var(--tg-amber);
  font-size: 2.4rem;
  display: grid; place-items: center;
  margin: 0 auto 16px;
  box-shadow: var(--tg-shadow-lg);
}

/* Difficulty chips on quiz questions */
.quiz-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.diff-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.diff-easy      { background: #e7f7ec; color: #14532d; }
.diff-medium    { background: #fff4e0; color: #6b4f00; }
.diff-challenge { background: #fde8e8; color: #7b1d1d; }

/* Quiz feedback box (was scoped to .activity .feedback only) */
.quiz-question .feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  display: none;
}
.quiz-question .feedback.show     { display: block; }
.quiz-question .feedback.correct  { background: #e7f7ec; color: #14532d; border: 1px solid #b6e6c2; }
.quiz-question .feedback.wrong    { background: #fde8e8; color: #7b1d1d; border: 1px solid #f5c2c2; }
.quiz-question .feedback.neutral  { background: #f3f7ff; color: #1d4ed8; border: 1px solid #d6e2ff; }

/* Activity feedback neutral state */
.activity .feedback.neutral { background: #f3f7ff; color: #1d4ed8; border: 1px solid #d6e2ff; }

/* Quiz options + inputs (built dynamically by app.js) */
.quiz-option {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fbfcff;
  cursor: pointer;
}
.quiz-option:hover { background: #f3f7ff; }
.quiz-text-input {
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  width: 240px;
  font-family: inherit;
}

/* Artifact example block */
.artifact-example {
  background: #f3f7ff;
  border: 1px solid #d6e2ff;
  border-radius: var(--tg-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.artifact-example pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  margin: 8px 0 0;
  color: var(--tg-text);
}
.artifact-output {
  background: #fbfcff;
  border: 1px dashed var(--tg-border);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--tg-text);
}

/* Artifact + Explain field layout */
.art-field { margin-bottom: 14px; }
.art-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--tg-navy);
}
.art-field input[type="text"],
.art-field textarea,
.art-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}
.art-field textarea { min-height: 70px; resize: vertical; }

/* Course dashboard (10-level grid) */
.course-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.level-card {
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 18px;
  box-shadow: var(--tg-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.level-card.locked   { opacity: 0.85; }
.level-card.passed   { border-color: var(--tg-green); }
.level-card.inprogress { border-color: var(--tg-amber); }
.level-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.level-card .lvl-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--tg-muted);
  text-transform: uppercase;
}
.level-card .lvl-state {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.lvl-state.locked     { background: #f1f3f8; color: var(--tg-muted); }
.lvl-state.available  { background: #eaf1ff; color: var(--tg-blue); }
.lvl-state.inprogress { background: #fff4e0; color: var(--tg-amber); }
.lvl-state.passed     { background: #e7f7ec; color: var(--tg-green); }
.level-card h3 { margin: 0; font-size: 1.1rem; }
.level-card .lvl-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.level-card .lvl-foot { margin-top: auto; padding-top: 8px; }

/* Course progress bar (on dashboard) */
.course-progress-bar {
  width: 100%;
  height: 14px;
  background: #eef2f8;
  border-radius: 999px;
  overflow: hidden;
}
.course-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tg-blue), var(--tg-teal));
  transition: width 0.4s ease;
}
.course-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--tg-muted);
  margin-top: 6px;
}

/* Certificate card */
.cert-card {
  border-left: 4px solid var(--tg-blue);
}

/* Completion hero */
.completion-hero {
  text-align: center;
  padding: 30px 10px 10px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .course-dashboard { grid-template-columns: 1fr; }
  .quiz-text-input { width: 100%; }
}

/* =========================================================
   v0.4 — Mobile-friendly polish pass
   ========================================================= */

/* Tables: horizontal scroll on narrow screens (no wrapper required). */
@media (max-width: 640px) {
  .data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .data-table thead, .data-table tbody { display: table; width: max-content; }
  .data-table thead { width: max-content; }
}

/* Bigger touch targets and tighter hero on phones. */
@media (max-width: 640px) {
  .btn        { min-height: 44px; padding: 12px 16px; }
  .btn-sm     { min-height: 38px; padding: 10px 14px; }
  .lab-nav button { min-height: 44px; padding: 12px 14px; }
  .quiz-option {
    padding: 14px 12px;
    line-height: 1.4;
    align-items: flex-start;
  }
  .quiz-option input[type="radio"],
  .quiz-option input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
    transform: scale(1.1);
  }
  .activity .options label {
    padding: 14px 12px;
    line-height: 1.4;
  }

  .tg-hero { padding: 48px 18px; }
  .tg-hero h1 { font-size: 1.55rem; line-height: 1.2; }
  .tg-hero .tagline { font-size: 1rem; }
  .tg-hero .actions .btn { flex: 1 1 100%; }

  .section { padding: 36px 0; }
  .section-tight { padding: 24px 0; }

  /* Lab shell on phones: less visual weight on the sidebar (it stacks
     above main content; trim padding and pin the score/progress so users
     see them without scrolling, then collapse the lesson list visually). */
  .lab-shell { gap: 14px; padding: 0 14px; }
  .lab-sidebar {
    padding: 14px;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15,39,72,0.06);
  }
  .lab-sidebar h4 { margin: 10px 0 6px; }
  .lab-sidebar .lab-nav { max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lab-main { padding: 18px; }
  .lab-main h1 { font-size: 1.5rem; }
  .lab-main h2 { font-size: 1.3rem; }
  .lab-eyebrow { font-size: 0.7rem; }

  /* Quiz progress bar wraps cleanly on phones. */
  .quiz-progress {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .quiz-controls .btn { flex: 1 1 calc(50% - 4px); }

  /* Course dashboard: full-width cards, tighter padding. */
  .course-dashboard { grid-template-columns: 1fr; gap: 12px; }
  .level-card { padding: 16px; }
  .level-card h3 { font-size: 1.05rem; }

  /* Pricing cards: stack with tighter spacing. */
  .pricing-grid { grid-template-columns: 1fr; gap: 14px; }
  .price-card { padding: 22px 18px; }

  /* Footer: more breathing room when stacked. */
  .tg-footer-inner { gap: 24px; }
  .tg-footer-bottom { padding-top: 20px; }

  /* Disclaimers + notes: tighter padding to save vertical space. */
  .disclaimer, .note { padding: 14px 16px; font-size: 0.92rem; }

  /* Artifact + explain output: keep horizontal scrollable so long lines
     are reachable without forcing the page to scroll. */
  .artifact-output {
    font-size: 0.85rem;
    padding: 12px;
    overflow-x: auto;
    white-space: pre;
  }

  /* Dashboard nav crowding: collapse non-essential nav items behind the
     hamburger toggle (the toggle is already wired). */
  .tg-nav { gap: 4px; }
  .tg-nav a { font-size: 0.93rem; padding: 10px 12px; }
}

/* Tablet refinement */
@media (min-width: 641px) and (max-width: 960px) {
  .lab-shell { padding: 0 16px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .course-dashboard { grid-template-columns: repeat(2, 1fr); }
}

/* Reduce motion support — respect user OS setting. */
@media (prefers-reduced-motion: reduce) {
  .btn, .level-card, .lab-section, .progress-bar > span,
  .course-progress-bar > span {
    transition: none !important;
    animation: none !important;
  }
}

/* Focus visibility: ensure keyboard users see clear focus rings on
   inputs, buttons, and quiz radios/checkboxes (an accessibility gap
   flagged in earlier QA). */
button:focus-visible,
.btn:focus-visible,
.lab-nav button:focus-visible,
.activity input:focus-visible,
.quiz-option input:focus-visible,
.art-field input:focus-visible,
.art-field textarea:focus-visible,
.art-field select:focus-visible,
.feedback-form input:focus-visible,
.feedback-form textarea:focus-visible,
.feedback-form select:focus-visible {
  outline: 2px solid var(--tg-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================
   v0.5 — Brand assets: header logo, concept strip, concept cards
   ========================================================= */

/* Header logo image (replaces the gradient TG mark on every page).
   Sized for clear visibility without dominating the header. */
.tg-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .tg-logo-img { height: 32px; }
}

/* Five-concepts strip — image right under the hero.
   Natural size: 970 × 270 px. We cap max-width at the natural width to
   keep it crisp (no upscaling), center it, and give it breathing room.
   Hidden on phones because the individual concept cards below carry the
   same five-pillar message in a more legible stacked layout. */
.concept-strip-section {
  background: #fff;
  border-bottom: 1px solid var(--tg-border);
  padding: 24px 16px;       /* horizontal padding so the image never touches screen edges */
}
.concept-strip-img {
  display: block;
  width: 100%;
  max-width: 970px;         /* image's natural width — prevents upscaling blur */
  height: auto;
  margin: 2rem auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .concept-strip-img { display: none; }
  .concept-strip-section { padding: 0; border-bottom: 0; }
}

/* Concept cards (Learn / Analyze / Secure / Succeed / Foundation) */
.concept-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.concept-card {
  background: var(--tg-card);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--tg-shadow);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.concept-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tg-shadow-lg);
  border-color: var(--tg-orange);
}
.concept-card-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}
.concept-card h3 {
  margin: 0;
  color: var(--tg-navy);
  font-size: 1.1rem;
}
.concept-card p {
  color: var(--tg-muted);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}
/* Subtle orange-accent underline on each card title */
.concept-card h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--tg-orange);
  border-radius: 999px;
  margin: 8px auto 0;
}

/* Responsive concept-card grid */
@media (max-width: 1100px) {
  .concept-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .concept-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .concept-card { padding: 18px 14px; }
  .concept-card-img { width: 80px; height: 80px; }
}
@media (max-width: 420px) {
  .concept-cards { grid-template-columns: 1fr; }
  .concept-card-img { width: 96px; height: 96px; }
}

/* Optional: orange-accent button variant (not used by default; available
   for callouts later). */
.btn-accent {
  background: var(--tg-orange);
  color: #fff;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.25);
}
.btn-accent:hover {
  background: #c2410c;
}