/* ============================================================
   edtrainit / medtrainit design system
   Palette, type, layout per brief. No deviations.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-alt: #FAFAFA;
  --text: #0B0F1A;
  --text-secondary: #4A5468;
  --hairline: #E5E7EB;
  --accent: #0F8B8D;
  --accent-deep: #0D5C63;
  --editorial-dark: #0B1220;

  --max-width: 1200px;
  --pad-desktop: 40px;
  --pad-mobile: 24px;
  --section-pad-desktop: 80px;
  --section-pad-mobile: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

button { font-family: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad-desktop);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--pad-mobile); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--hairline);
  height: 64px;
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad-desktop);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
}
.wordmark-bold {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 22px;
}
.footer-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* ============================================================
   HERO EMOTIONAL + TRUST + PRIMARY CTA
   ============================================================ */
.hero-emotional {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 32px;
  max-width: 38ch;
}
.hero-trust strong {
  color: var(--text);
  font-weight: 600;
}
.text-link-primary {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--accent-deep) !important;
  border-bottom-color: var(--accent-deep) !important;
  border-bottom-width: 2px !important;
}
.text-link-primary:hover {
  color: var(--text) !important;
  border-bottom-color: var(--text) !important;
}

/* ============================================================
   STAKES — UNIVERSAL EMOTIONAL HOOK FIRST, IMAT EVIDENCE SECOND
   ============================================================ */
.stakes-section { padding: var(--section-pad-desktop) 0; }
.stakes-emotional {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
  max-width: 50ch;
  margin-top: 32px;
  margin-bottom: 24px;
}
.stakes-emotional em {
  font-style: italic;
  color: var(--accent-deep);
}
.stakes-emotional-2 {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  margin-bottom: 48px;
}
.stakes-quote {
  margin: 48px 0;
  padding: 32px 40px;
  border-left: 3px solid var(--text);
  background: var(--bg-alt);
}
.stakes-quote blockquote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 40ch;
}
.stakes-imat {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
}
.stakes-imat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.stakes-imat-readout {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  max-width: 60ch;
  margin-bottom: 32px;
}
.stakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 16px;
}
.stakes-card {
  border: 1px solid var(--hairline);
  padding: 32px 24px;
  text-align: center;
  background: var(--bg);
}
.stakes-card-negative {
  background: var(--bg-alt);
  border-color: var(--text);
}
.stakes-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 12px;
}
.stakes-card-negative .stakes-value { color: var(--accent-deep); }
.stakes-label {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.stakes-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .stakes-grid { grid-template-columns: 1fr; gap: 16px; }
  .stakes-quote { padding: 24px 24px; }
}

/* ============================================================
   KILLER LINE — visible visual moment
   ============================================================ */
.killer-line {
  margin: 64px 0 0;
  padding: 64px 48px;
  background: var(--editorial-dark);
  text-align: center;
}
.killer-line-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 24ch;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .killer-line { padding: 40px 24px; }
}

/* ============================================================
   HOW IT WORKS — 3-STEP INFOGRAPHIC
   ============================================================ */
.how-section { padding: var(--section-pad-desktop) 0; }
.how-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 32px;
  align-items: flex-start;
  margin: 56px 0 40px;
}
.how-step {
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  min-height: 220px;
}
.how-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.how-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 16px;
}
.how-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.how-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  color: var(--accent);
  align-self: center;
  padding-top: 16px;
}
.how-readout {
  margin-top: 32px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
  max-width: 56ch;
}
@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr; gap: 16px; }
  .how-arrow { transform: rotate(90deg); justify-self: start; padding-top: 0; }
  .how-step { min-height: 0; }
}

/* ============================================================
   URGENCY BAND
   ============================================================ */
.urgency-band {
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 32px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.nav-links a.cta-link {
  font-weight: 600;
  color: var(--text);
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--accent-deep); }

.cta-link {
  border-bottom: 1px solid var(--text);
  padding-bottom: 1px;
}
.cta-link:hover { border-color: var(--accent-deep); }

@media (max-width: 768px) {
  .nav-inner { padding: 0 var(--pad-mobile); }
  .nav-links { gap: 16px; }
  .nav-links li:not(:last-child) { display: none; }
}

/* ============================================================
   EMAIL COPY BUTTON
   ============================================================ */
.email-copy {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1.3;
  border-bottom: 1px solid var(--text);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.email-copy:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.email-copy.is-copied {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent-deep);
  border-color: transparent;
  letter-spacing: 0.06em;
}
.email-copy.inline-email {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.email-copy.inline-email:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding: var(--section-pad-desktop) 0;
}

.micro-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.hero-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 32px;
  max-width: 18ch;
}

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-bottom: 32px;
}

.tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ============================================================
   HERO TRUST LINE
   ============================================================ */
.hero-trust {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
  font-style: italic;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}

/* ============================================================
   TEAM PULL (credibility paragraph that follows the two-col)
   ============================================================ */
.team-pull {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
  max-width: 52ch;
}

/* ============================================================
   HERO LINKS (medtrainit)
   ============================================================ */
.hero-links {
  display: flex;
  gap: 32px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.text-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.text-link:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ============================================================
   GENERIC SECTIONS
   ============================================================ */
.section {
  padding: var(--section-pad-desktop) 0;
}
.section-bordered {
  border-top: 1px solid var(--hairline);
}

@media (max-width: 768px) {
  .hero, .section { padding: var(--section-pad-mobile) 0; }
}

.section-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 60px;
  max-width: 24ch;
}

/* ============================================================
   THREE COLUMN
   ============================================================ */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.col-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--text);
}
.col p {
  color: var(--text-secondary);
  max-width: 32ch;
}
@media (max-width: 768px) {
  .three-col { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   PRODUCT ROWS (edtrainit)
   ============================================================ */
.product-rows {
  border-top: 1px solid var(--hairline);
}
.product-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.product-row-live {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, padding 0.2s ease;
  padding-left: 0;
  padding-right: 0;
}
.product-row-live:hover {
  background: var(--bg-alt);
  padding-left: 12px;
  padding-right: 12px;
}
.product-row-live:hover .product-name { color: var(--accent-deep); }
.product-row-live:hover .product-arrow { transform: translate(2px, -2px); color: var(--accent-deep); }
.product-arrow {
  display: inline-block;
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 18px;
  color: var(--text-secondary);
  transition: transform 0.2s ease, color 0.2s ease;
}
.product-url {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.product-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.product-desc { color: var(--text-secondary); }
.product-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: right;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .product-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .product-status { text-align: left; }
  .product-row-live:hover { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pullquote {
  padding: 120px 0;
  text-align: center;
  border-top: 1px solid var(--hairline);
}
.pullquote blockquote {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 36ch;
  margin: 0 auto 24px;
}
.pullquote .attribution {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .pullquote { padding: 60px 0; }
}

/* ============================================================
   TWO COLUMN (Team)
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.two-col p { color: var(--text-secondary); max-width: 42ch; }
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   INFORMATION ROWS
   ============================================================ */
.info-rows {
  margin-top: 48px;
  border-top: 1px solid var(--hairline);
}
.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
  gap: 24px;
}
.info-row dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.info-row dd {
  font-size: 17px;
  color: var(--text);
}
@media (max-width: 768px) {
  .info-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   CONTRAST (medtrainit)
   ============================================================ */
.contrast {
  padding: var(--section-pad-desktop) 0;
  border-top: 1px solid var(--hairline);
}
.contrast-grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 48px;
  margin-top: 12px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.contrast-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.contrast-text-secondary {
  font-size: 17px;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 32ch;
}
.contrast-text-primary {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  max-width: 42ch;
}
@media (max-width: 768px) {
  .contrast { padding: var(--section-pad-mobile) 0; }
  .contrast-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   PILOT NOTE
   ============================================================ */
.pilot-note {
  margin-top: 32px;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ============================================================
   JOIN (medtrainit)
   ============================================================ */
.join {
  background: var(--bg-alt);
}
.join .lede { margin-bottom: 8px; }
.big-email {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -0.01em;
}
.join-email { margin-top: 16px; }

.contrast-grid-second {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
}

/* ============================================================
   CONTRAST HOOK (additional line below contrast)
   ============================================================ */
.contrast-hook {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* ============================================================
   LAYER ROWS (You need more than practice)
   ============================================================ */
.layer-rows {
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
}
.layer-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.layer-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.layer-desc { color: var(--text-secondary); font-size: 17px; }
.layer-row-emphasis .layer-name { color: var(--accent-deep); }
.layer-conclusion {
  margin-top: 40px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}
@media (max-width: 768px) {
  .layer-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
}

/* ============================================================
   PROGRESS / DIAGNOSTIC REPORT
   ============================================================ */
.progress-section {}

/* Four-sheet overview cards */
.sheet-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 48px 0 64px;
}
.sheet-card {
  padding: 24px 20px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  transition: border-color 0.2s ease;
}
.sheet-card-hero {
  border-color: var(--text);
  background: var(--bg-alt);
}
.sheet-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.sheet-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 12px;
}
.sheet-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .sheet-overview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sheet-overview { grid-template-columns: 1fr; }
}

/* Sheet 3 — recovery funnel (the killer) */
.sheet-three {
  margin: 0 0 64px;
  padding: 40px;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
}
.sheet-three-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.sheet-three-subtitle {
  margin-top: 8px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--text-secondary);
}
.recovery-table {
  border-top: 1px solid var(--hairline);
}
.recovery-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.recovery-row-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 12px 0;
}
.recovery-stage {
  font-size: 16px;
  color: var(--text);
}
.recovery-value {
  font-size: 16px;
  color: var(--text);
}
.recovery-value strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--accent-deep);
  font-size: 18px;
}
.recovery-cohort {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text-secondary);
}
.recovery-row-final {
  background: transparent;
  padding: 20px 0;
}
.recovery-row-final .recovery-stage {
  font-weight: 500;
}
.recovery-row-final .recovery-value strong {
  font-size: 22px;
}
.recovery-readout {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg);
  border-left: 2px solid var(--accent-deep);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.readout-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.recovery-caption {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .sheet-three { padding: 24px 20px; }
  .recovery-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .recovery-row-header { display: none; }
  .recovery-stage {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
}

/* Bullets below report */
.report-bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.report-bullet p { color: var(--text-secondary); max-width: 32ch; font-size: 16px; }
.bullet-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text) !important;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .report-bullets { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   WEBINAR REGISTRATION — EMBEDDED GOOGLE FORM
   ============================================================ */
.register-block {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.register-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.register-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 32px;
  max-width: 64ch;
}
.form-embed {
  background: #FFFFFF;
  padding: 8px;
  margin: 32px 0 24px;
  border: 1px solid rgba(255,255,255,0.15);
  max-width: 720px;
}
.form-embed iframe {
  width: 100%;
  display: block;
  border: 0;
  min-height: 900px;
}
.form-note {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 16px;
  max-width: 70ch;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .form-embed iframe { min-height: 1100px; }
}

/* ============================================================
   DARK SECTION (Webinar)
   ============================================================ */
.section-dark {
  background: var(--editorial-dark);
  color: #FFFFFF;
}
.section-dark .section-headline,
.section-headline-light { color: #FFFFFF !important; }
.section-dark .lede,
.lede-light { color: rgba(255,255,255,0.7) !important; }
.section-dark .micro-label,
.micro-label-light { color: rgba(255,255,255,0.55) !important; }
.section-dark .info-rows,
.info-rows-light { border-top-color: rgba(255,255,255,0.15) !important; }
.section-dark .info-row,
.info-rows-light .info-row { border-bottom-color: rgba(255,255,255,0.15) !important; }
.section-dark .info-row dt,
.info-rows-light .info-row dt { color: rgba(255,255,255,0.5) !important; }
.section-dark .info-row dd,
.info-rows-light .info-row dd { color: #FFFFFF !important; }
.webinar-cta { margin-top: 40px; }
.text-link-light {
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF !important;
  font-size: 17px;
  font-weight: 500;
}
.text-link-light:hover { color: rgba(255,255,255,0.75) !important; border-bottom-color: rgba(255,255,255,0.75) !important; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--hairline); }
.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  padding: 24px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 22px;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-item p {
  padding: 0 0 28px 0;
  color: var(--text-secondary);
  max-width: 72ch;
  font-size: 17px;
}

/* ============================================================
   IP NOTICE
   ============================================================ */
.ip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ============================================================
   IP NOTICE
   ============================================================ */
.ip-notice {
  padding: 48px 0 24px;
  border-top: 1px solid var(--hairline);
  background: var(--bg-alt);
}
.ip-notice p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 80ch;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px var(--pad-desktop);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 60px;
}
.footer-left { text-align: left; }
.footer-centre { text-align: center; line-height: 1.5; }
.footer-right { text-align: right; }
.footer a, .footer .email-copy {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  border-color: var(--hairline);
}
.footer a:hover, .footer .email-copy:hover {
  color: var(--text);
  border-color: var(--text);
}
.footer-sep { margin: 0 8px; color: var(--hairline); }
.footer-sub {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 24px;
    gap: 12px;
  }
  .footer-left, .footer-centre, .footer-right { text-align: left; }
}

/* ============================================================
   SCROLL-IN ANIMATION
   Bulletproof: content is visible by default. Only fades in
   if the page has explicitly added `.js` class to <html>.
   If JS fails for any reason, content stays visible.
   ============================================================ */
html.js .fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
html.js .fade-in.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FOCUS
   ============================================================ */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   FINAL-BUILD ADDITIONS — dashboard, killer line, costs-twice
   ============================================================ */

/* Hero emotional sub-line and hero badge */
.hero-emotional {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 24px;
  max-width: 40ch;
}
.hero-badge {
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.text-link-primary {
  font-weight: 600 !important;
  color: var(--accent-deep) !important;
  border-bottom-color: var(--accent-deep) !important;
  border-bottom-width: 2px !important;
}

/* Costs twice block - bordered pull-out */
.costs-twice {
  margin: 32px 0 0;
  padding: 28px 32px;
  border-left: 3px solid var(--text);
  background: var(--bg-alt);
}
.costs-twice blockquote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 50ch;
}

/* Stakes infographic */
.stakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 24px;
}
.stakes-card {
  border: 1px solid var(--hairline);
  padding: 36px 24px;
  text-align: center;
  background: var(--bg);
}
.stakes-card-negative {
  background: var(--bg-alt);
  border-color: var(--text);
}
.stakes-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 12px;
}
.stakes-card-negative .stakes-value { color: var(--accent-deep); }
.stakes-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.stakes-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* Killer section */
.killer-section {
  background: var(--editorial-dark);
  padding: 80px 0;
}
.killer-line {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
}

/* How-it-works steps */
.how-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  margin-top: 48px;
}
.how-step {
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.how-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.how-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--text);
}
.how-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.how-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  color: var(--accent);
  align-self: center;
}
@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-arrow { transform: rotate(90deg); justify-self: start; }
}

/* ============================================================
   THE DASHBOARD MOCK - the killer visual
   ============================================================ */
.dashboard-section { background: var(--bg-alt); }
.dashboard-mock {
  margin: 48px 0 16px;
  padding: 40px;
  background: var(--bg);
  border: 1px solid var(--hairline);
}
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}
.dash-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.dash-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dash-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary);
}
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.dash-stat {
  padding: 20px;
  border: 1px solid var(--hairline);
}
.dash-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.dash-stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dash-stat-accent { color: var(--accent-deep); }
.dash-stat-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
}

.dash-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.dash-funnel { margin-bottom: 32px; }
.funnel-table {
  border: 1px solid var(--hairline);
}
.funnel-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--text);
  align-items: baseline;
}
.funnel-row:last-child { border-bottom: 0; }
.funnel-row-head {
  background: var(--bg-alt);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.funnel-row strong { color: var(--accent-deep); font-weight: 600; }
.funnel-row-final {
  background: var(--bg-alt);
  font-weight: 600;
}
.funnel-row-final strong { color: var(--accent-deep); }

.dash-readout {
  padding: 20px 24px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent-deep);
}
.dash-readout-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.dash-readout-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.dash-disclaimer {
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .stakes-grid { grid-template-columns: 1fr; }
  .dashboard-mock { padding: 24px; }
  .dash-header { flex-direction: column; gap: 8px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .funnel-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .funnel-row-head { display: none; }
  .funnel-row > div:first-child { font-weight: 600; }
}

/* Changes list */
.changes-list {
  margin-top: 32px;
  border-top: 1px solid var(--hairline);
}
.changes-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.changes-row dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}
.changes-row dd {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

/* Urgency note */
.urgency-note {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Form embed */
.form-embed {
  background: #FFFFFF;
  padding: 8px;
  margin: 28px 0 16px;
  border: 1px solid rgba(255,255,255,0.15);
  max-width: 720px;
}
.form-embed iframe {
  width: 100%;
  display: block;
  border: 0;
  min-height: 900px;
}
.register-block {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.register-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.register-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 24px;
}
.form-note {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 12px;
  max-width: 70ch;
}

/* For-parents subtle differentiation */
.for-parents { background: var(--bg-alt); }

/* ============================================================
   FINAL REBUILD ADDITIONS — fixes from screenshot review
   ============================================================ */

/* WHO BUILT IT - 3 credentials cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.team-credential {
  padding: 28px 24px;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.cred-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}
.cred-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.team-stamp {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* PROBLEM SECTION - 3 infographic cards */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.problem-card {
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.problem-card-emphasis {
  background: var(--bg-alt);
  border-color: var(--text);
}
.problem-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.problem-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
}
.problem-card-emphasis .problem-headline { color: var(--accent-deep); }
.problem-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.problem-card-emphasis .problem-desc { color: var(--text); }
@media (max-width: 720px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* KILLER BAND - fixed (overrides old broken .killer-line rules) */
.killer-band {
  background: #0B1220;
  padding: 96px 0;
  margin: 0;
}
.killer-band-text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4.2vw, 48px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  text-align: center !important;
  max-width: 26ch !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* HOW IT WORKS - sharper step cards */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 48px;
}
.step-card {
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  position: relative;
}
.step-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--text);
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}
.step-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
}
.step-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.step-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--accent);
  align-self: center;
}
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); justify-self: start; }
}

/* WHAT CHANGES - 4 visual cards */
.changes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.change-card {
  padding: 28px 24px;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.change-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.change-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}
.change-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .changes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .changes-grid { grid-template-columns: 1fr; }
}

/* Section-alt for subtle background variation */
.section-alt { background: var(--bg-alt); }

/* 4-step grid (replaces 3-step where used) */
.steps-grid-four {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
}
@media (max-width: 1100px) {
  .steps-grid-four { grid-template-columns: 1fr !important; }
}
.step-card-final {
  background: #FAFAFA;
  border-color: #0B0F1A;
}
.step-badge-final {
  background: #0D5C63 !important;
}

/* For parents - 3-card grid */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.parent-card {
  padding: 32px 28px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
}
.parent-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #0B0F1A;
  margin-bottom: 14px;
}
.parent-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #4A5468;
}
@media (max-width: 900px) {
  .parent-grid { grid-template-columns: 1fr; }
}

/* PREMIUM CUSTOM FORM - white-on-dark, restrained */
.register-form { margin: 32px 0 16px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
  margin-bottom: 36px;
}
.form-field { display: flex; flex-direction: column; }
.form-field-full { grid-column: 1 / -1; }
.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}
.form-required { color: rgba(255,255,255,0.45); margin-left: 4px; }
.form-field input,
.form-field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  border-radius: 0;
  padding: 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form-field input::placeholder { color: rgba(255,255,255,0.35); }
.form-field input:focus,
.form-field select:focus { border-bottom-color: #FFFFFF; }
.form-field select option { color: #0B0F1A; background: #FFFFFF; }
.form-submit {
  background: transparent;
  border: 0;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #FFFFFF;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.form-submit:hover { opacity: 0.7; }
.form-submit:disabled { opacity: 0.5; cursor: wait; }
.form-status {
  margin-top: 24px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  min-height: 1.4em;
  color: rgba(255,255,255,0.85);
}
.form-status-success { color: #7AD0B0; }
.form-status-error { color: #F5A4A4; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== VISIBILITY FIXES — make micro-labels and contrast labels stand out ===== */
.micro-label {
  color: #0D5C63 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
}
.contrast-label {
  color: #0D5C63 !important;
  font-weight: 600 !important;
}
.dash-section-label,
.dash-readout-label,
.dash-eyebrow {
  color: #0D5C63 !important;
  font-weight: 600 !important;
}
.problem-num,
.change-num,
.how-num {
  color: #0D5C63 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.stakes-caption {
  color: #4A5468 !important;
}

/* ===== AN EDTRAINIT LTD PRODUCT TAG ===== */
.product-tag {
  display: inline-block;
  padding: 4px 12px;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4A5468;
  border: 1px solid #E5E7EB;
  background: #FAFAFA;
}
.nav-product-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4A5468;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid #E5E7EB;
}
@media (max-width: 720px) {
  .nav-product-tag { display: none; }
}

/* ===== LEGAL SECTION ===== */
.legal-section {
  padding: 60px 0;
  background: #FAFAFA;
  border-top: 1px solid #E5E7EB;
}
.legal-block {
  margin-bottom: 32px;
}
.legal-block:last-child { margin-bottom: 0; }
.legal-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0D5C63;
  font-weight: 600;
  margin-bottom: 12px;
}
.legal-body {
  font-size: 13px;
  line-height: 1.6;
  color: #4A5468;
  max-width: 80ch;
}

/* ===== MOBILE FIXES ===== */
@media (max-width: 720px) {
  /* Hide the product tag in the nav on small screens — show it below the hero instead */
  .nav-product-tag { display: none !important; }

  /* Mobile hero product tag — push it down so it doesn't overlap */
  .product-tag {
    display: block;
    margin-top: 20px;
    text-align: left;
  }

  /* Tighten the nav for mobile */
  .nav-inner {
    padding: 0 20px;
  }

  /* Show ONLY Register button on mobile (others hidden) — make Register pop */
  .nav-links li:not(:last-child) {
    display: none;
  }
  .nav-links a.cta-link {
    font-weight: 600;
    color: var(--accent-deep) !important;
    border-bottom: 2px solid var(--accent-deep);
    padding-bottom: 2px;
  }

  /* Section padding tighter on mobile */
  .section,
  .stakes-section,
  .how-section,
  .dashboard-section {
    padding: 56px 0 !important;
  }
  .container {
    padding: 0 20px;
  }

  /* Hero headline & body — tighter spacing on mobile */
  .hero-headline {
    font-size: clamp(40px, 11vw, 60px) !important;
    line-height: 1.05 !important;
  }
  .hero-emotional {
    font-size: 18px !important;
  }

  /* Section headlines smaller on mobile */
  .section-headline {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.15 !important;
  }

  /* Stakes cards stack */
  .stakes-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Problem cards stack */
  .problem-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Team grid stack */
  .team-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Step cards stack with arrows below */
  .steps-grid,
  .steps-grid-four { grid-template-columns: 1fr !important; gap: 16px !important; }
  .step-arrow {
    transform: rotate(90deg) !important;
    justify-self: start !important;
    margin-left: 16px !important;
  }

  /* Changes cards 1-column on mobile */
  .changes-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Parent cards stack */
  .parent-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Dashboard cleanup */
  .dashboard-mock { padding: 20px !important; }
  .dash-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .dash-stats { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .dash-stat { padding: 14px !important; }
  .dash-stat-value { font-size: 28px !important; }
  .funnel-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 14px 16px !important; }
  .funnel-row-head { display: none !important; }
  .funnel-row > div:first-child {
    font-weight: 600;
    color: #0B0F1A;
    margin-bottom: 4px;
  }

  /* Form grid stacks */
  .form-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Contrast cards stack */
  .contrast-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Pullquote tighter */
  .pullquote blockquote { font-size: 22px !important; line-height: 1.35 !important; }

  /* Killer band tighter */
  .killer-band { padding: 56px 24px !important; }
  .killer-band-text { font-size: 28px !important; }

  /* Footer stacks */
  .footer-inner {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Legal section tighter */
  .legal-section { padding: 40px 0 !important; }
  .legal-body { font-size: 12px !important; }
}

/* Even tighter on small phones */
@media (max-width: 420px) {
  .hero-headline { font-size: 36px !important; }
  .section-headline { font-size: 26px !important; }
  .container { padding: 0 16px; }
  .nav-inner { padding: 0 16px; }
}

/* ===== HAMBURGER MENU + APPLE-STYLE MOBILE NAV ===== */
.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 12px 10px;
  position: relative;
  z-index: 1001;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #0B0F1A;
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
  border-radius: 2px;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-product-tag { display: none !important; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 32px 24px;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1000;
    overflow-y: auto;
    border-top: 1px solid #E5E7EB;
  }
  .nav-links.is-open {
    transform: translateX(0);
    display: flex !important;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid #E5E7EB;
    display: block !important;
  }
  .nav-links li:last-child { border-bottom: 0; margin-top: 16px; }
  .nav-links a {
    display: block !important;
    padding: 18px 0;
    font-size: 22px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #0B0F1A !important;
    letter-spacing: -0.01em !important;
  }
  .nav-links a.cta-link {
    color: #FFFFFF !important;
    background: #0D5C63;
    padding: 16px 24px !important;
    text-align: center;
    font-weight: 700 !important;
  }
}

/* ===== APPLE-STYLE STRONG SECTION LABELS (visibility upgrade) ===== */
.micro-label {
  color: #0D5C63 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  position: relative;
  padding-left: 32px;
  display: inline-block;
}
.micro-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 2px;
  background: #0D5C63;
}
.micro-label-light {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.micro-label-light::before { background: #FFFFFF !important; }
.section-dark .micro-label::before { background: #FFFFFF !important; }
@media (max-width: 720px) {
  .micro-label { font-size: 12px !important; padding-left: 28px; }
  .micro-label::before { width: 18px; }
}

/* ===== FINAL OVERRIDE: bulletproof hamburger visibility ===== */
@media (max-width: 720px) {
  button.nav-toggle {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    padding: 12px 10px !important;
    position: relative !important;
    z-index: 1001 !important;
    margin: 0 !important;
  }
  button.nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #0B0F1A !important;
    margin: 5px 0 !important;
    border-radius: 2px !important;
  }
  .nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  ul.nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 85% !important;
    max-width: 380px !important;
    background: #FFFFFF !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 88px 28px 32px !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    box-shadow: -20px 0 60px rgba(0,0,0,0.15) !important;
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
  }
  ul.nav-links.is-open {
    transform: translateX(0) !important;
  }
  ul.nav-links li {
    width: 100% !important;
    border-bottom: 1px solid #E5E7EB !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  ul.nav-links li:last-child {
    border-bottom: 0 !important;
    margin-top: 24px !important;
  }
  ul.nav-links a {
    display: block !important;
    padding: 22px 0 !important;
    font-size: 22px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #0B0F1A !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
  }
  ul.nav-links a.cta-link {
    color: #FFFFFF !important;
    background: #0D5C63 !important;
    padding: 18px 24px !important;
    text-align: center !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
  }
}

/* ===== FINAL FINAL: drawer items MUST show when open ===== */
@media (max-width: 720px) {
  ul.nav-links.is-open li {
    display: block !important;
  }
  ul.nav-links.is-open li:not(:last-child) {
    display: block !important;
  }
  ul.nav-links.is-open a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ============================================== */
/* ===== CLEAN DRAWER REBUILD - V6 OVERRIDE ===== */
/* ============================================== */
@media (max-width: 720px) {
  /* Nav container — keep it clean */
  .nav { background: #FFFFFF; }
  .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    height: 64px !important;
  }
  .nav-brand { display: flex !important; align-items: baseline !important; }
  .wordmark {
    color: #0B0F1A !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .nav-product-tag { display: none !important; }

  /* Hamburger button */
  .nav-toggle {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    cursor: pointer !important;
    z-index: 2000 !important;
    position: relative !important;
  }
  .nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #0B0F1A !important;
    margin: 5px auto !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
  }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0 !important; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* CLOSED drawer — completely off-screen, hidden */
  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #FFFFFF !important;
    padding: 24px 24px 40px !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 1500 !important;
    overflow-y: auto !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    align-items: stretch !important;
  }

  /* OPEN drawer — slide in, force every child visible */
  .nav-links.is-open {
    transform: translateX(0) !important;
  }
  .nav-links li,
  .nav-links.is-open li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .nav-links li:last-child { border-bottom: 0 !important; margin-top: 20px !important; }
  .nav-links a,
  .nav-links.is-open a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 20px 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #0B0F1A !important;
    text-decoration: none !important;
    background: transparent !important;
    letter-spacing: -0.01em !important;
  }
  .nav-links a.cta-link,
  .nav-links.is-open a.cta-link {
    color: #FFFFFF !important;
    background: #0D5C63 !important;
    text-align: center !important;
    padding: 18px 24px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    border-bottom: 0 !important;
  }
}

/* ============================================================ */
/* FINAL V7: Native <details> mobile menu — guaranteed to work */
/* ============================================================ */
.mobile-menu { display: none; }
.nav-links-desktop { display: flex; }

@media (max-width: 720px) {
  .nav-links-desktop { display: none !important; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 100;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary::marker { content: ''; }
  .hamburger { display: block; width: 24px; height: 18px; position: relative; }
  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #0B0F1A;
    margin-bottom: 6px;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .hamburger span:last-child { margin-bottom: 0; }
  .mobile-menu[open] .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-menu[open] .hamburger span:nth-child(2) { opacity: 0; }
  .mobile-menu[open] .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .mobile-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    background: #FFFFFF;
    padding: 16px 24px 32px;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 99;
    margin-top: 14px;
  }
  .mobile-menu-panel a {
    display: block;
    padding: 18px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #0B0F1A;
    text-decoration: none;
    border-bottom: 1px solid #E5E7EB;
    letter-spacing: -0.01em;
  }
  .mobile-menu-panel a:last-child { border-bottom: 0; }
  .mobile-menu-panel a.mobile-cta {
    margin-top: 14px;
    background: #0D5C63;
    color: #FFFFFF;
    text-align: center;
    padding: 16px 24px;
    border-radius: 4px;
    border-bottom: 0;
    font-weight: 700;
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  ul.nav-links { display: none !important; }
}

/* ============================================================ */
/* NEW DASHBOARD V8 — inline HTML/CSS, IP-safe, mobile-ready    */
/* ============================================================ */
.dash-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px;
  max-width: 980px;
  margin: 48px auto 0;
  font-family: 'Inter', sans-serif;
}
.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid #E5E7EB;
}
.dash-card-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 22px; color: #0B0F1A; letter-spacing: -0.015em; }
.dash-card-day { font-size: 13px; color: #4A5468; }
.dash-card-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.dash-summary-box { padding: 18px 20px; border: 1px solid #E5E7EB; border-radius: 8px; }
.dash-summary-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #0D5C63; font-weight: 600; margin-bottom: 10px; }
.dash-summary-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 38px; line-height: 1; color: #0B0F1A; letter-spacing: -0.02em; }
.dash-summary-suffix { font-weight: 500; font-size: 14px; color: #4A5468; margin-left: 4px; }
.dash-summary-trend { font-size: 12px; color: #0D5C63; margin-top: 8px; font-weight: 500; }
.dash-summary-list { font-size: 14px; line-height: 1.6; color: #0B0F1A; font-weight: 500; }
.dash-summary-verdict { font-size: 13px; line-height: 1.5; color: #0B0F1A; }
.dash-card-map { margin-bottom: 28px; }
.dash-map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.dash-map-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: #0B0F1A; }
.dash-map-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.dash-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #4A5468; }
.dash-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.dash-swatch-closed { background: #0D5C63; }
.dash-swatch-progress { background: #A6DCD9; }
.dash-swatch-flight { background: #D4ECEA; border: 1px solid #B5D9D6; }
.dash-swatch-empty { background: #F2F2F2; border: 1px solid #E5E7EB; }
.dash-map-row { display: grid; grid-template-columns: 110px repeat(8, 1fr); gap: 6px; margin-bottom: 6px; align-items: center; }
.dash-map-label { font-size: 13px; font-weight: 500; color: #0B0F1A; }
.dash-cell { height: 22px; border-radius: 4px; }
.dash-c-closed { background: #0D5C63; }
.dash-c-progress { background: #A6DCD9; }
.dash-c-flight { background: #D4ECEA; border: 1px solid #B5D9D6; }
.dash-c-empty { background: #F2F2F2; border: 1px solid #E5E7EB; }
.dash-card-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 24px; border-top: 1px solid #E5E7EB; margin-bottom: 16px; }
.dash-footer-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #0D5C63; font-weight: 600; margin-bottom: 12px; }
.dash-footer-item { display: flex; justify-content: space-between; font-size: 13px; color: #0B0F1A; padding: 6px 0; gap: 12px; }
.dash-footer-time { color: #4A5468; font-size: 12px; white-space: nowrap; }
.dash-footer-body { font-size: 13px; line-height: 1.55; color: #0B0F1A; }
.dash-card-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid #F2F2F2; }
.dash-card-private, .dash-card-updated { font-size: 11px; color: #4A5468; }
.dash-disclaimer { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #4A5468; margin-top: 16px; text-align: center; }

@media (max-width: 720px) {
  .dash-card { padding: 20px; margin-top: 32px; }
  .dash-card-name { font-size: 18px; }
  .dash-card-day { font-size: 11px; }
  .dash-card-summary { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
  .dash-summary-box { padding: 14px 16px; }
  .dash-summary-value { font-size: 32px; }
  .dash-map-row { grid-template-columns: 80px repeat(8, 1fr); gap: 3px; }
  .dash-map-label { font-size: 12px; }
  .dash-cell { height: 16px; }
  .dash-map-legend { gap: 8px; }
  .dash-legend-item { font-size: 10px; }
  .dash-card-footer { grid-template-columns: 1fr; gap: 20px; }
  .dash-card-base { flex-direction: column; gap: 4px; }
}
@media (max-width: 420px) {
  .dash-card { padding: 16px; }
  .dash-map-row { grid-template-columns: 64px repeat(8, 1fr); gap: 2px; }
  .dash-map-label { font-size: 11px; }
  .dash-cell { height: 14px; }
}