@charset "UTF-8";
/* ============================================================
   BeginCDL.com - Main Stylesheet
   Theme: Navy Authority + Safety Orange
   Standard: Mobile-first, WCAG AA contrast, no inline styles
   ============================================================ */

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

/* Critical: hidden attribute must always win */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a { color: var(--orange-dk); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 2px; }

ul, ol { list-style: none; }

/* ==== Design Tokens - Light (default) ==== */
:root {
  /* Brand */
  --navy:        #17456f;
  --navy-mid:    #23608f;
  --navy-lt:     #3c7cb4;
  --orange:      #bf5600;
  --orange-dk:   #a44a00;
  --orange-lt:   #ff9534;
  /* Orange that clears AA on the navy mobile drawer (4.8:1 on its sub-panel). --orange-lt is
     4.2:1 there, just under. Not themed: the drawer is navy whatever the site theme is. */
  --orange-on-navy: #ffa857;
  --orange-bg:   #fff6ee;

  /* Surface */
  --bg:          #f7f9fc;
  --surface:     #ffffff;
  --surface-2:   #f1f6fb;
  --border:      #d9e2ee;
  --border-lt:   #e9eff7;

  /* Text */
  --text:        #17222f;
  --text-muted:  #56687e;
  --text-invert: #ffffff;

  /* Status */
  --success:     #15803d;
  --success-bg:  #f0fdf4;
  --danger:      #b91c1c;
  --danger-bg:   #fef2f2;
  --warn:        #92400e;
  --warn-bg:     #fffbeb;

  /* Elevation */
  --shadow-sm:   0 1px 2px rgba(23,69,111,0.06), 0 1px 3px rgba(23,69,111,0.04);
  --shadow-md:   0 4px 14px rgba(23,69,111,0.08), 0 2px 5px rgba(23,69,111,0.05);
  --shadow-lg:   0 12px 32px rgba(23,69,111,0.10), 0 4px 10px rgba(23,69,111,0.05);

  /* Shape */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;

  /* Layout */
  --max-w:       1200px;
  --nav-h:       64px;
  --gap:         1.5rem;
}

/* ==== Design Tokens - Dark ==== */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --navy:        #1a4a7a;
    --navy-mid:    #1f5490;
    --navy-lt:     #2a6ab0;
    --orange:      #f07a1a;
    --orange-dk:   #ffa554;
    --orange-lt:   #ffc38c;
    --orange-bg:   #2a1a00;

    --bg:          #141c28;
    --surface:     #1c2636;
    --surface-2:   #232f42;
    --border:      #33445c;
    --border-lt:   #2a3648;

    --text:        #e2eaf4;
    --text-muted:  #8aa4c0;
    --text-invert: #ffffff;

    --success:     #4ade80;
    --success-bg:  #052e16;
    --danger:      #f87171;
    --danger-bg:   #450a0a;

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.40);
  }
}

:root[data-theme="dark"] {
  --navy:        #1a4a7a;
  --navy-mid:    #1f5490;
  --navy-lt:     #2a6ab0;
  --orange:      #f07a1a;
  --orange-dk:   #ffa554;
  --orange-lt:   #ffc38c;
  --orange-bg:   #2a1a00;

  --bg:          #141c28;
  --surface:     #1c2636;
  --surface-2:   #232f42;
  --border:      #33445c;
  --border-lt:   #2a3648;

  --text:        #e2eaf4;
  --text-muted:  #8aa4c0;
  --text-invert: #ffffff;

  --success:     #4ade80;
  --success-bg:  #052e16;
  --danger:      #f87171;
  --danger-bg:   #450a0a;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.40);
}

/* ==== Typography ==== */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] h1,
  :root[data-theme="auto"] h2,
  :root[data-theme="auto"] h3 {
    color: var(--text);
  }
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 { color: var(--text); }

h1 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { color: var(--text); margin-bottom: 0; }
small { font-size: 0.8125rem; color: var(--text-muted); }

/* ==== Layout ==== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2.5rem; } }

main { flex: 1; }

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==== Buttons ==== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--orange);
  color: var(--text-invert);
  border-color: var(--orange);
}
.btn-primary:hover {
  background-color: var(--orange-dk);
  border-color: var(--orange-dk);
  color: var(--text-invert);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  color: var(--text);
  border-color: var(--text-muted);
}
.btn-outline:hover {
  background-color: var(--surface-2);
  border-color: var(--orange);
  color: var(--orange-dk);
}

.btn-outline-invert {
  background-color: transparent;
  color: var(--text-invert);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-invert:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: var(--text-invert);
  color: var(--text-invert);
}

.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}
.btn-lg {
  padding: 0.75rem 1.75rem;
  font-size: 1.0625rem;
}
.btn-block {
  display: flex;
  width: 100%;
  margin-bottom: 0.5rem;
}
.btn-danger {
  background-color: var(--danger);
  color: var(--text-invert);
  border-color: var(--danger);
}

/* ==== Navigation ==== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--navy);
  border-bottom: 3px solid var(--orange);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* prevent any child from creating horizontal scroll */
}

.nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 0.75rem;
  overflow: hidden;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--text-invert);
}
.site-logo:hover { color: var(--text-invert); text-decoration: none; }

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange);
  color: var(--text-invert);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-invert);
  letter-spacing: -0.01em;
}

/* Primary nav - desktop */
.primary-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  margin-left: 1.5rem;
}

.primary-nav a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;
}
.primary-nav a:hover {
  color: var(--text-invert);
  background-color: rgba(255,255,255,0.12);
  text-decoration: none;
}
.primary-nav a[aria-current="page"] {
  color: var(--text-invert);
  background-color: rgba(255,255,255,0.15);
  border-bottom: 2px solid var(--orange);
}

/* Desktop nav needs ~1060px to fit every link plus the state picker, cart and Sign In; below that the drawer is used. */
@media (min-width: 1080px) {
  .primary-nav { display: flex; }
  .nav-toggle  { display: none !important; }
}

/* On mobile and tablet: hide desktop-only nav elements */
@media (max-width: 1079px) {
  .nav-actions .btn-outline-invert, .nav-actions .nav-logout { display: none !important; }
  .nav-actions .state-picker-wrap  { display: none !important; }
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}

.nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.85);
  font-size: 1.25rem;
  text-decoration: none;
  transition: background-color 0.15s;
}
.nav-cart:hover {
  background-color: rgba(255,255,255,0.12);
  color: var(--text-invert);
  text-decoration: none;
}

.cart-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: var(--orange);
  color: var(--text-invert);
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  color: var(--text-invert);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.15s;
  flex-shrink: 0;
}
.nav-toggle:hover { background-color: rgba(255,255,255,0.12); }

/* ==== State picker ==== */
.state-picker-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.state-picker {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255,255,255,0.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  color: var(--text-invert);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 1.6rem 0.35rem 0.6rem;
  height: 34px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.state-picker:hover {
  background-color: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.6);
}
.state-picker:focus {
  background-color: rgba(255,255,255,0.18);
  border-color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.state-picker option {
  background-color: var(--navy);
  color: #fff;
}
/* Tighten state picker on narrow screens */
@media (max-width: 819px) {
  .state-picker {
    max-width: 90px;
    font-size: 0.75rem;
    padding-left: 0.4rem;
  }
}
@media (max-width: 400px) {
  .state-picker { max-width: 72px; }
  .logo-text    { font-size: 0.9375rem; }
}

/* Selector state prompt link */

/* ==== Mobile nav drawer ==== */
.mobile-nav {
  background-color: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.10);
  animation: mnav-in 0.2s cubic-bezier(0.4,0,0.2,1);
  /* Allow scroll if content is taller than viewport */
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes mnav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* State touch button */
.mnav-state-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: rgba(0,0,0,0.22);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(217,98,0,0.25);
  min-height: 56px;
}
.mnav-state-btn:active { background-color: rgba(217,98,0,0.2); }
.mnav-state-txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mnav-chevron { flex-shrink: 0; opacity: 0.5; }

/* Nav link sections */
.mnav-section {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mnav-section:last-child { border-bottom: none; }

/* Nav links - big touch targets */
.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 1.25rem;
  color: rgba(255,255,255,0.80);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  -webkit-tap-highlight-color: rgba(255,255,255,0.08);
  transition: background-color 0.1s;
}
.mnav-link:active,
.mnav-link:focus-visible {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
.mnav-link.mnav-active {
  color: #fff;
  font-weight: 700;
  border-left-color: var(--orange);
  background-color: rgba(255,255,255,0.06);
}
.mnav-arrow {
  color: rgba(255,255,255,0.30);
  font-size: 1.25rem;
  line-height: 1;
}

/* Cart count badge (inline) */
.mnav-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 5px;
  margin-left: 0.4rem;
  line-height: 1;
  vertical-align: middle;
}

/* Bottom section - auth CTAs */
.mnav-section-bottom {
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.mnav-btn {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 52px;
  line-height: 52px;
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.12s;
}
.mnav-btn:active { filter: brightness(0.88); }
.mnav-btn-primary { background-color: var(--orange); color: #fff; }
.mnav-btn-outline {
  background-color: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.mnav-btn-ghost {
  background-color: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 36px;
  line-height: 36px;
}

/* ==== State picker modal (full-screen, touch) ==== */
.state-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background-color: var(--navy);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.state-modal[hidden] { display: none !important; }

.state-modal-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100dvh;
}
.state-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 60px;
  flex-shrink: 0;
  background-color: var(--navy-mid, #122a4a);
  border-bottom: 2px solid var(--orange);
}
.state-modal-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}
.state-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: rgba(255,255,255,0.12);
}
.state-modal-close:active { background-color: rgba(255,255,255,0.10); }

.state-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Individual state option rows */
.state-opt {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 56px;
  padding: 0 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(217,98,0,0.15);
}
.state-opt:active { background-color: rgba(217,98,0,0.18); }
.state-opt.state-opt-selected { background-color: rgba(217,98,0,0.12); }
.state-opt.state-opt-selected .state-opt-code { color: var(--orange); }
.state-opt-clear {
  color: rgba(255,255,255,0.45);
  font-size: 0.875rem;
  font-style: italic;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  min-height: 48px;
}
.state-opt-code {
  font-weight: 800;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  width: 28px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.state-opt-name {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  flex: 1;
}
.state-opt-check {
  color: var(--orange);
  font-weight: 700;
  font-size: 1.125rem;
  margin-left: auto;
}

/* ==== Footer ==== */
.site-footer {
  background-color: var(--navy);
  border-top: 3px solid var(--orange);
  color: rgba(255,255,255,0.7);
  padding: 3rem 0 2rem;
  margin-top: auto;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 960px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
}

.footer-brand .site-logo { margin-bottom: 0.75rem; }
.footer-brand p {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  max-width: 300px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-links-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-lt);
  margin-bottom: 0.25rem;
}
.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}
.footer-links a:hover { color: var(--text-invert); text-decoration: none; }
.site-footer a { color: var(--orange-lt); }
.site-footer .site-logo, .site-footer .site-logo .logo-text { color: var(--text-invert); }
.site-footer .footer-links a { color: rgba(255,255,255,0.75); }
.site-footer .footer-links a:hover { color: #fff; }

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.72);
}
.site-footer p, .site-footer li, .site-footer span { color: inherit; }

/* ==== Page header ==== */
.page-header {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 2.5rem;
  background-color: var(--surface);
}
.page-header h1 { margin-bottom: 0.5rem; }
.page-header p  { color: var(--text-muted); font-size: 1.0625rem; max-width: 680px; }
.page-header-state { font-weight: 800; color: var(--orange); }

/* Page header description: one readable block under the H1 with an orange rule (matches .section-why) */
.page-header .page-header-desc, .page-header-desc { max-width: 46rem; margin: 0.85rem 0 0; padding: 0.15rem 0 0.15rem 1rem; border-left: 3px solid var(--orange); font-size: 1.125rem; line-height: 1.7; color: var(--text); opacity: 0.92; }
.page-header .page-header-desc--sub { margin-top: 0.6rem; font-size: 1rem; opacity: 0.8; }
.page-header-desc a { color: var(--orange-dk); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); }
.page-header-desc a:hover { border-bottom-color: var(--orange); }
.page-header.page-header--compact .page-header-desc { font-size: 1rem; margin-top: 0.6rem; }
@media (max-width: 640px) { .page-header .page-header-desc { font-size: 1.0625rem; line-height: 1.65; padding-left: 0.85rem; } }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--orange); text-decoration: none; }
.breadcrumb span { color: var(--text-muted); }

/* State page profile grid */
.state-profile-grid { align-items: start; }

.state-meta-row {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* ==== Cards ==== */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 1.25rem; }

.card h2 { margin-bottom: 1rem; }
.card h3 { margin-bottom: 0.5rem; }

/* ==== Section chrome ==== */
.section { padding: 4rem 0; }

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-dk);
  margin-bottom: 0.625rem;
}
.hero .section-eyebrow,
.cta-band .section-eyebrow,
.product-featured .section-eyebrow,
.site-footer .section-eyebrow { color: var(--orange-lt); }

/* ==== Hero ==== */
.hero {
  background-color: var(--navy);
  background-image:
    linear-gradient(135deg, #17456f 0%, #23608f 55%, #3c7cb4 100%);
  padding: 5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}

/* Road stripe decorative element */
.hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--orange) 0px, var(--orange) 60px,
    transparent 60px, transparent 100px
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero h1 {
  color: var(--text-invert);
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
}

.hero h1 strong {
  color: var(--orange-lt);
  font-weight: 800;
}

.hero-sub {
  color: rgba(255,255,255,0.8);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.35em;
  max-width: 580px;
  margin: 0 auto 2rem;
  text-align: left;
}

.hero-actions {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.hero-stat { text-align: center; }
.hero-stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--orange-lt);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hero-stat-label {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

/* ==== Feature cards ==== */
.feature-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--border-lt));
  transform: translateY(-2px);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
  margin: 0;
}
.feature-icon svg { display: block; }
/* Icon sits inline with the heading; a wrapped heading keeps its text aligned and the icon centred on it */
.feature-head { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-lt); }
.feature-card h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; color: var(--text); }
.feature-card p  { margin: 0; color: var(--text); opacity: 0.85; font-size: 0.975rem; line-height: 1.7; }
.feature-card p a { color: var(--orange); font-weight: 600; }

/* ==== Endorsement cards ==== */
.endorse-card {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-top-color 0.15s, box-shadow 0.15s;
}
.endorse-card:hover {
  border-top-color: var(--orange);
  box-shadow: var(--shadow-md);
}
.endorse-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy);
  color: var(--text-invert);
  font-weight: 800;
  font-size: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}
.endorse-card h3 { font-size: 0.9375rem; margin: 0; }
.endorse-card p  { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.5; flex: 1; }
.endorse-card a  { font-size: 0.8125rem; font-weight: 600; color: var(--orange-dk); }
.endorse-card a:hover { color: var(--orange-dk); text-decoration: underline; }

/* ==== CTA band ==== */
.cta-band {
  background-color: var(--navy);
  padding: 4rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--text-invert); margin-bottom: 0.75rem; }
.cta-band p  { color: rgba(255,255,255,0.75); margin-bottom: 1.75rem; font-size: 1.0625rem; }
/* Secondary line under the button: the same decision reached from the vehicle instead of the
   questions. Sits below the CTA, so it drops the paragraph's bottom margin. */
.cta-band-alt {
  margin: 1.5rem 0 0 !important;
  font-size: 0.9375rem !important;
  color: rgba(255,255,255,0.72) !important;
}
.cta-band-alt a { color: var(--orange-on-navy, #ffa857); font-weight: 700; }
.cta-band-alt a:hover { color: var(--text-invert); }

/* ==== FAQ ==== */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  user-select: none;
  transition: background-color 0.1s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--orange);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s;
}
.faq-item[open] summary { background-color: var(--surface-2); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  background-color: var(--surface-2);
  border-top: 1px solid var(--border-lt);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .faq-item summary { color: var(--text); }
}
:root[data-theme="dark"] .faq-item summary { color: var(--text); }

/* ==== State grid ==== */
.state-search-wrap {
  position: relative;
  max-width: 380px;
  margin-bottom: 1.75rem;
}
.state-search-wrap svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.state-search {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.state-search:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.625rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .state-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 0.5rem 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-top-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.state-card:hover {
  border-top-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.state-abbr {
  display: block;
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.state-name {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .state-abbr { color: var(--text); }
}
:root[data-theme="dark"] .state-abbr { color: var(--text); }

/* Active state card */
.state-card--active {
  border-top-color: var(--orange);
  background-color: var(--surface-2);
  box-shadow: var(--shadow-md);
  position: relative;
}
.state-card--active .state-abbr { color: var(--orange); }
.state-card-check {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}

/* Currently-viewing note in page header */
.states-active-note {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
}
.states-active-note a {
  color: var(--orange-dk);
  text-decoration: underline;
}

/* ==== State detail ==== */

.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78125rem;
  font-weight: 500;
}
.note-list { display: flex; flex-direction: column; gap: 0.625rem; }
.note-list li {
  padding: 0.625rem 0.875rem;
  background-color: var(--warn-bg);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--warn); /* dark brown - always readable on the pale-yellow bg */
}
.card-agency .agency-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

/* State layout */

/* ==== Products ==== */
.products-page { padding-top: 2.5rem; }

/* Section grouping */
.products-section { margin-bottom: 3.5rem; }
.products-section--alt {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-left: 0;
  margin-right: 0;
}
.products-section-header { margin-bottom: 1.75rem; }
.products-section-header h2 { margin-bottom: 0.25rem; font-size: 1.375rem; }
.products-section-header p  { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }

.products-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 2.25rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-lt);
}

/* Featured product: Complete CDL Study Package */
.product-featured {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
  display: flex;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.product-featured::after {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(217,98,0,0.12);
  pointer-events: none;
}
.product-featured-body { flex: 1; min-width: 0; }
.product-featured-body h2 {
  color: #fff;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  margin: 0.5rem 0 0.75rem;
}
.product-featured-body .product-overview {
  color: rgba(255,255,255,0.72);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  flex: none;
}
.product-featured-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.product-featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.275em 0.65em;
  border-radius: 4px;
}
.product-featured-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  min-width: 190px;
  position: relative;
  z-index: 1;
}
.product-featured-price {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--orange-lt);   /* 3.05:1 on the navy panel; --orange manages only 1.44:1 */
  line-height: 1;
  margin-bottom: 0.125rem;
}
.product-featured-save {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #86efac;   /* light green: 4.75:1 on the navy panel; --success manages only 1.33:1 */
  margin: 0 0 0.375rem;
}

/* Base product card */
.product-card {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.product-card-sm { padding: 1.125rem; gap: 0.5rem; }

/* Bundle card variant - orange top accent */
.product-card--bundle { border-top: 3px solid var(--orange); }

/* Card-top row (badge + savings) */
.product-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Includes list inside bundle cards */
.product-includes-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.275rem;
  flex: 1;
}
.product-includes-list li {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1.3;
}

/* Icon on individual module cards */
.mod-card-icon {
  font-size: 1.875rem;
  line-height: 1;
  margin-bottom: 0.125rem;
}

/* Badges */
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--navy);
  color: var(--text-invert);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 3px;
  width: fit-content;
}
.product-badge--value   { background-color: var(--orange); }
.product-badge--upgrade { background-color: #7c3aed; }

.product-savings-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2em 0.55em;
  border-radius: 3px;
}

/* Shared text */
.product-card h3 {
  font-size: 1.0625rem;
  color: var(--navy);
  margin: 0;
}
.product-overview {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  flex: 1;
}
.product-who {
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.product-footer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-lt);
  margin-top: auto;
}
.price    { font-size: 1.125rem; font-weight: 800; color: var(--navy); margin-right: auto; }
.price-sm { font-size: 0.9375rem; font-weight: 700; color: var(--navy); margin-right: auto; }

/* Grid-5 for endorsements */

/* Products mobile */
@media (max-width: 900px) {
  .product-featured { flex-direction: column; padding: 1.75rem; gap: 1.75rem; }
  .product-featured-cta { width: 100%; min-width: unset; }
  .product-featured-price { font-size: 2.125rem; }

}
@media (max-width: 640px) {

  .products-section--alt { padding: 1.25rem; }
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .product-card h3 { color: var(--text); }
  :root[data-theme="auto"] .price            { color: var(--text); }
  :root[data-theme="auto"] .price-sm         { color: var(--text); }
}
:root[data-theme="dark"] .product-card h3 { color: var(--text); }
:root[data-theme="dark"] .price            { color: var(--text); }
:root[data-theme="dark"] .price-sm         { color: var(--text); }

/* Product detail */

.includes-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.includes-list { display: flex; flex-direction: column; gap: 0.3rem; list-style: none; padding: 0; margin: 0; }
.includes-list li { font-size: 0.9rem; color: var(--text); padding-left: 1.25rem; position: relative; line-height: 1.4; }
.includes-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* Topics covered - name + description */
.topic-list { display: flex; flex-direction: column; gap: 0; }
.topic-item {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-lt);
}
.topic-item:last-child { border-bottom: none; padding-bottom: 0; }
.topic-item:first-child { padding-top: 0; }
.topic-item-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topic-item-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--orange);
  flex-shrink: 0;
}
.topic-item-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.card-sticky { position: sticky; top: calc(var(--nav-h) + 1rem); }
.add-to-cart-panel { border-top: 3px solid var(--orange); }
.product-detail-layout .card.add-to-cart-panel h2 { margin-bottom: 0; }   /* beats .product-detail-layout .card h2 */
.price-display { font-size: 2rem; font-weight: 800; color: var(--orange); margin-bottom: 0; }
.product-detail-layout { align-items: start; padding-bottom: 3rem; }

/* ==== Cart ==== */
.cart-layout { padding-bottom: 3rem; }
.cart-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .cart-grid { grid-template-columns: minmax(0, 1fr) 22rem; } }

.cart-empty { text-align: center; padding: 3.5rem 1.5rem; max-width: 34rem; margin: 0 auto; }
.cart-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.cart-empty h2 { margin-bottom: .5rem; }
.cart-empty p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 1.0625rem; }

.cart-items { display: flex; flex-direction: column; gap: 1rem; }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.25rem 1.5rem; }
.cart-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; }
.cart-item-tag { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); border-radius: 999px; padding: .125rem .5rem; margin-bottom: .375rem; }
.cart-item-name { font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.3; }
.cart-item-price { font-weight: 800; font-size: 1.25rem; color: var(--orange); white-space: nowrap; }
.cart-item-desc { color: var(--text-muted); font-size: .9375rem; line-height: 1.55; margin: 0 0 .75rem; }
.cart-item-includes { list-style: none; margin: 0 0 .875rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .25rem .75rem; font-size: .875rem; }
.cart-item-includes li::before { content: "\2713  "; color: var(--orange); font-weight: 700; }
.cart-item-facts { list-style: none; margin: 0; padding: .75rem 0 0; border-top: 1px solid var(--border-lt); display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; font-size: .8125rem; color: var(--text-muted); }
.cart-item-actions { align-self: start; }
.cart-item-actions .btn-ghost { font-size: .8125rem; color: var(--text-muted); white-space: nowrap; }
.cart-item-actions .btn-ghost:hover { color: #e5484d; background: color-mix(in srgb, #e5484d 10%, transparent); }

.cart-notice { padding: .875rem 1.125rem; border-radius: var(--radius); background: color-mix(in srgb, #16a34a 12%, var(--surface)); border: 1px solid color-mix(in srgb, #16a34a 40%, transparent); font-size: .9rem; font-weight: 600; }
.cart-continue { margin: .25rem 0 0; font-size: .9rem; }

.cart-summary { padding: 1.5rem; position: sticky; top: 5rem; }
.cart-summary h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.cart-summary-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .375rem 0; color: var(--text-muted); }
.cart-summary-line span:first-child { flex: 1; }
.cart-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: .875rem 0 .75rem; margin-top: .375rem; border-top: 2px solid var(--border-lt); font-size: 1.0625rem; }
.cart-summary-total strong { font-size: 1.5rem; }
.cart-summary-note { font-size: .8125rem; color: var(--text-muted); margin: 0 0 .75rem; line-height: 1.5; }
.cart-summary .btn-block { margin-top: .5rem; }
.cart-trust { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--border-lt); display: flex; flex-direction: column; gap: .5rem; font-size: .8125rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .cart-item { grid-template-columns: 1fr; padding: 1rem; }
  .cart-item-actions { justify-self: end; }
  .cart-summary { position: static; }
}

/* ==== Checkout ==== */
.checkout-layout { padding-bottom: 3rem; align-items: start; }
.checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-lt);
  font-size: 0.9375rem;
}
.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

/* ==== Forms ==== */
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3125rem;
  margin-top: 1rem;
}
label:first-child { margin-top: 0; }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 0.5625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}

.form-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3.5rem 1rem;
}
.form-card {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--orange);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.form-card h1 { font-size: 1.625rem; margin-bottom: 1.5rem; }
.form-error {
  color: var(--danger);
  background-color: var(--danger-bg);
  border: 1px solid rgba(185,28,28,0.2);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.form-msg {
  color: var(--success);
  background-color: var(--success-bg);
  border: 1px solid rgba(21,128,61,0.2);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.form-alt { font-size: 0.875rem; text-align: center; margin-top: 1.25rem; color: var(--text-muted); }

.form-submit-row { margin-top: 1.5rem; }

/* ==== CDL Classes page ==== */
.classes-page { padding-top: 2rem; }

/* Quick-compare anchor strip */
.class-compare-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-sm);
}
.class-compare-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.15s;
}
.class-compare-item:hover { background-color: var(--surface-2); text-decoration: none; }
.class-compare-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.375rem;
  font-weight: 900;
  flex-shrink: 0;
  color: #fff;
}
.class-compare-letter--a { background-color: var(--orange); }
.class-compare-letter--b { background-color: var(--navy); }
.class-compare-letter--c { background-color: #0e7490; }
.class-compare-label { font-weight: 700; font-size: 0.9375rem; display: block; line-height: 1.2; }
.class-compare-desc  { font-size: 0.8125rem; color: var(--text-muted); display: block; line-height: 1.3; }
.class-compare-divider { color: var(--border); font-size: 1.5rem; padding: 0 0.25rem; flex-shrink: 0; }

/* Class cards */
.cdl-class-card {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.cdl-class-card:hover { box-shadow: var(--shadow-md); }
.cdl-class-card--featured {
  border-top: 3px solid var(--orange);
}

/* Card top row: big letter + meta + badge */
.class-card-top {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.class-letter-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--navy);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}
.cdl-class-card--featured .class-letter-badge { background-color: var(--orange); }
.class-card-meta { flex: 1; min-width: 0; }
.class-card-meta h2 { margin: 0 0 0.375rem; font-size: 1.375rem; }
.class-weight-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background-color: var(--surface-2);
  border: 1px solid var(--border-lt);
  padding: 0.25em 0.75em;
  border-radius: 20px;
  margin-top: 0.25rem;
}
.class-featured-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background-color: var(--orange);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  white-space: nowrap;
}

.class-summary {
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 68ch;
  padding-left: 1rem;
  border-left: 3px solid var(--orange);
}

/* Two-column details grid */
.class-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.75rem;
}
.class-details-col h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-lt);
}
.class-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.class-detail-list li {
  font-size: 0.9375rem;
  color: var(--text);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.class-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* Card footer CTAs */
.class-card-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-lt);
}

/* Bottom CTA band */
.class-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin-top: 0.5rem;
}
.class-cta-band-body h2 { color: #fff; margin-bottom: 0.375rem; font-size: 1.25rem; }
.class-cta-band-body p  { color: rgba(255,255,255,0.72); font-size: 0.9375rem; margin: 0; }

/* Mobile */
@media (max-width: 820px) {
  .class-compare-strip { flex-direction: column; }
  .class-compare-item  { width: 100%; border-bottom: 1px solid var(--border-lt); }
  .class-compare-item:last-child { border-bottom: none; }
  .class-compare-divider { display: none; }
  .class-details-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .class-cta-band { flex-direction: column; align-items: flex-start; padding: 1.75rem; }
  .cdl-class-card { padding: 1.5rem; }
}

/* ==== Endorsements page ==== */
.endorsements-page { padding-top: 2rem; }

/* Intro stat strip */
.endorse-intro-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.75rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.endorse-intro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}
.endorse-intro-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
}
.endorse-intro-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.endorse-intro-divider {
  width: 1px;
  height: 2.5rem;
  background-color: var(--border-lt);
  flex-shrink: 0;
}
.endorse-intro-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.endorse-intro-note a { color: var(--orange-dk); }

/* Card grid - 2 columns */
.endorse-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Endorsement detail card */
.endorse-detail-card {
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
  border-top: 3px solid var(--border-lt);
}
.endorse-detail-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.endorse-detail-card--orange { border-top-color: var(--orange); }
.endorse-detail-card--navy   { border-top-color: var(--navy); }
.endorse-detail-card--danger { border-top-color: #dc2626; }
.endorse-detail-card--blue   { border-top-color: #0e7490; }
.endorse-detail-card--yellow { border-top-color: #d97706; }

/* Top row: code badge + meta */
.endorse-detail-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.endorse-code-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background-color: var(--navy);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.endorse-detail-card--orange .endorse-code-badge { background-color: var(--orange); }
.endorse-detail-card--danger .endorse-code-badge { background-color: #dc2626; }
.endorse-detail-card--blue   .endorse-code-badge { background-color: #0e7490; }
.endorse-detail-card--yellow .endorse-code-badge { background-color: #b45309; }

.endorse-detail-meta { flex: 1; min-width: 0; }
.endorse-detail-meta h2 { font-size: 1.125rem; margin: 0.125rem 0 0; }
.endorse-type-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body sections */
.endorse-detail-body { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.endorse-detail-section h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}
.endorse-detail-section p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Footer CTA */
.endorse-detail-footer {
  padding-top: 1rem;
  border-top: 1px solid var(--border-lt);
  margin-top: auto;
}

/* Mobile */
@media (max-width: 820px) {
  .endorse-card-grid { grid-template-columns: 1fr; }
  .endorse-intro-strip { gap: 1rem; padding: 1rem 1.25rem; }
  .endorse-intro-divider { display: none; }
}

/* ==== Account / Admin ==== */
.account-layout { padding-bottom: 3rem; align-items: start; }

.orders-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.orders-table thead th {
  text-align: left;
  padding: 0.625rem 0.875rem;
  background-color: var(--surface-2);
  border-bottom: 2px solid var(--border);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.orders-table tbody td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border-lt);
  color: var(--text);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.125rem 0.5625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: capitalize;
}

/* Admin stats */

/* ==== CDL Selector ==== */
/* Two-column layout: questions left, plan right */
/* Selector: the tool sits on a lighter band so it reads as the "app", separate from the explainer below */
.selector-band { background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 6%, var(--surface-2)), var(--surface-2)); border-top: 1px solid var(--border-lt); border-bottom: 1px solid var(--border-lt); margin-top: -2.5rem; padding: 3.5rem 0 4rem; }
.selector-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
/* The question card: the focal point of the page */
.selector-questions { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--orange); border-radius: var(--radius-lg); padding: 2.5rem 2.75rem 2.25rem; box-shadow: var(--shadow-lg); min-height: 26rem; }
@media (min-width: 860px) {
  .selector-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 640px) {
  .selector-band { padding: 2rem 0 2.5rem; }
}

.sel-question h2 { margin-bottom: 1.25rem; font-size: 1.75rem; line-height: 1.2; }
.sel-options { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.75rem; }
.sel-option {
  text-align: left;
  padding: 1.15rem 1.5rem;
  background-color: var(--surface-2);
  border: 2px solid var(--border-lt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, background-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sel-option::after { content: "->"; color: var(--orange); font-weight: 700; }
.sel-option:hover {
  border-color: var(--orange);
  background-color: var(--orange-bg);
}
.selector-disclaimer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
  padding: 0.75rem;
  background-color: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-lt);
}
.selector-nav { margin-bottom: 1rem; }
.sel-result h2 { margin-bottom: 1rem; font-size: 1.75rem; line-height: 1.2; }
.sel-result { padding: 0.5rem 0 0; }
/* ==== CDL Plan panel ==== */
.cdl-plan {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.plan-heading {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-lt);
  color: var(--navy);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .plan-heading { color: var(--text); }
}
:root[data-theme="dark"] .plan-heading { color: var(--text); }

.plan-empty p { font-size: 1rem; line-height: 1.6; color: var(--text); opacity: 0.85; }

.plan-items {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
.plan-item {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background-color: var(--surface-2);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-sm);
}
.plan-item-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.plan-item-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.plan-item-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--orange);
  white-space: nowrap;
  flex-shrink: 0;
}
.plan-footer {
  border-top: 1px solid var(--border-lt);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.plan-total {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: var(--navy);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .plan-total { color: var(--text); }
}
:root[data-theme="dark"] .plan-total { color: var(--text); }

/* Success-outline button for "In Cart" state */
.btn-success-outline {
  background-color: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
  cursor: default;
}
.btn-success-outline:hover {
  background-color: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
}

/* Class badge - success banner with checkmark */
.sel-class-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--success-bg);
  color: var(--success);
  border: 2px solid var(--success);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  line-height: 1.4;
}
.sel-class-badge::after {
  content: "\2713";
  flex-shrink: 0;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1;
  color: var(--success);
}

.sel-note {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--surface);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.sel-continue { margin-top: 0.5rem; }
.sel-yes { border-color: var(--success) !important; }
.sel-yes:hover { background-color: var(--success-bg) !important; border-color: var(--success) !important; }
.sel-no  { border-color: var(--danger) !important; }
.sel-no:hover  { background-color: var(--danger-bg) !important; border-color: var(--danger) !important; }

/* ==== Content pages ==== */
.content-page { max-width: 960px; padding: 0 0 4rem; }

/* ==== About page ==== */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.about-section { margin-bottom: 2.5rem; }
.about-section:last-child { margin-bottom: 0; }
.about-main h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.85rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--border-lt); }
.about-main p { margin: 0 0 1rem; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.75; max-width: 42rem; }
.about-main p:last-child { margin-bottom: 0; }
.about-main a:not(.btn) { color: var(--orange-dk); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); }
.about-main a:not(.btn):hover { border-bottom-color: var(--orange); }
.about-list { list-style: none; margin: 0; padding: 0; max-width: 42rem; }
.about-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; color: var(--text-muted); line-height: 1.65; }
.about-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 800; }
.about-list strong { color: var(--text); }
.about-steps { list-style: none; counter-reset: about-step; margin: 0.5rem 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.about-steps li { counter-increment: about-step; position: relative; padding: 1.1rem 1.25rem 1.1rem 4.1rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); }
.about-steps li::before { content: counter(about-step); position: absolute; left: 1.15rem; top: 1.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
.about-steps h3 { font-size: 1.05rem; margin: 0 0 0.35rem; line-height: 1.3; }
.about-steps p { margin: 0; font-size: 0.975rem; line-height: 1.65; }
.about-links { font-size: 0.95rem; }
.about-try-card { padding: 1.5rem 1.75rem; border: 2px solid var(--orange); }
.about-try-card h2 { border: 0; padding: 0; margin-bottom: 0.5rem; }
.about-try-card p { margin-bottom: 1.1rem; }
.about-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.about-sidebar .card { padding: 1.25rem; }
.about-sidebar h3 { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin: 0 0 0.85rem; }
.about-stats-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; }
.about-stat-num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--text); line-height: 1; }
.about-stat-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.about-coverage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.about-coverage-list li { font-size: 0.925rem; display: flex; align-items: center; gap: 0.5rem; }
.about-coverage-list li::before { content: "\2713"; color: var(--orange); font-weight: 800; }
.about-coverage-list a { color: var(--text); text-decoration: none; }
.about-coverage-list a:hover { color: var(--orange); }
.text-sm { font-size: 0.875rem; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-sidebar { position: static; }
  .about-steps li { padding-left: 3.6rem; }
  .about-try-card { padding: 1.25rem; }
  .about-try-card .btn { width: 100%; }
}
/* ==== ELDT page ==== */
.eldt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.eldt-grid .card { margin: 0; }
.eldt-grid .card h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.eldt-grid .card p { color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.65; }
.eldt-list { padding-left: 1.25rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.eldt-list li { margin-bottom: 0.45rem; line-height: 1.55; }
.eldt-steps { padding-left: 1.25rem; color: var(--text-muted); margin-bottom: 0; }
.eldt-steps li { margin-bottom: 0.9rem; line-height: 1.6; }
.eldt-steps li strong { color: var(--text); display: block; margin-bottom: 0.15rem; }
.card--highlight { border: 2px solid var(--accent); }
.eldt-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0 1rem; }
.eldt-coming-soon { background: var(--surface-alt, var(--surface)); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; border-radius: 0 4px 4px 0; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0; }
@media (max-width: 768px) { .eldt-grid { grid-template-columns: 1fr; } }
.content-body h2 { margin: 2rem 0 0.75rem; font-size: 1.375rem; }
.content-body h3 { margin: 1.5rem 0 0.5rem; }
.content-body p  { margin-bottom: 1rem; color: var(--text-muted); }
.content-body ul,
.content-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content-body li { margin-bottom: 0.375rem; color: var(--text-muted); }

/* ==== Section spacing helpers ==== */

.mt-1 { margin-top: 1rem; }

.pb-3 { padding-bottom: 3rem; }

/* ==== Utility ==== */
.text-muted   { color: var(--text-muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==== Table overflow wrapper ==== */
.table-wrap { overflow-x: auto; }

/* ==== Section heading with bottom margin ==== */
.section-heading { margin-bottom: 1.75rem; }

/* ==== Section alt background ==== */
.section-alt {
  background-color: var(--surface-2);
  border-top: 1px solid var(--border-lt);
  border-bottom: 1px solid var(--border-lt);
}

/* ==== FAQ narrow container ==== */
.faq-list-narrow { max-width: 720px; }

/* PDF embed */

/* Quick Review (HTML) */

.qr-list { display: flex; flex-direction: column; gap: 1rem; }
.qr-card {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
}
.qr-card-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .5rem;
}
.qr-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
}
.qr-ref {
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg);
  padding: .125rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--border-lt);
}
.qr-question {
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.5;
  margin: 0 0 .625rem;
}
.qr-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.qr-options li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.45;
  padding: .375rem .625rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-muted);
}
.qr-options li.qr-correct {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  color: var(--text);
  font-weight: 700;
}
.qr-letter {
  font-weight: 700;
  min-width: 1.25rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .qr-card { padding: .875rem 1rem; }
  .qr-question { font-size: .875rem; }
  .qr-options li { font-size: .8125rem; }
}

/* Quick Review (HTML bullet list) */
.qr-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.qr-bullet {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.qr-bullet-text {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text);
}
.qr-bullet-text strong { color: var(--text); }
.qr-bullet-text ul {
  margin: .5rem 0 0;
  padding-left: 1.25rem;
}
.qr-bullet-text ul li {
  margin-bottom: .25rem;
  font-size: .875rem;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .qr-bullet { padding: .875rem 1rem; gap: .625rem; }
  .qr-bullet-text { font-size: .875rem; }
}

/* Buttons - disabled state */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }

/* Payment page - card form (Stripe Elements mount inside .stripe-input) */
.order-code { font-size: .8em; font-weight: 600; color: var(--text-muted); margin-left: .375rem; }
.stripe-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: .75rem .875rem; min-height: 2.9rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  margin-bottom: .875rem; transition: border-color .15s, box-shadow .15s;
}
.stripe-input.is-focused { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 25%, transparent); }
.stripe-input.is-invalid { border-color: #e5484d; }
.pay-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .875rem; }
.pay-row label { margin-top: 0; }
.pay-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .pay-row--2 { grid-template-columns: 1fr; } }
#payment-form input[type="text"] { min-height: 2.9rem; padding: .75rem .875rem; font-size: 16px; line-height: 1.2; box-sizing: border-box; margin-bottom: .875rem; }
#pay-error { margin: 0 0 .875rem; }
@media (max-width: 480px) { .pay-row:not(.pay-row--2) { grid-template-columns: 1fr 1fr; } .pay-row:not(.pay-row--2) > div:first-child { grid-column: 1 / -1; } }
/* Checkout - step indicator */
.checkout-steps {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8125rem; font-weight: 600; color: var(--text-muted);
}
.checkout-steps li { display: flex; align-items: center; gap: .5rem; }
.checkout-steps li + li::before {
  content: ""; display: block; width: 2rem; height: 2px; background: var(--border);
  margin-right: .25rem; border-radius: 2px;
}
.checkout-steps .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: 50%;
  border: 2px solid var(--border); font-size: .75rem; line-height: 1;
}
.checkout-steps .is-done .step-num { background: var(--border); border-color: var(--border); color: var(--text); }
.checkout-steps .is-done { color: var(--text); }
.checkout-steps .is-current .step-num { background: var(--orange); border-color: var(--orange); color: #fff; }
.checkout-steps .is-current { color: var(--text); }
.checkout-steps .is-current .step-label { color: var(--orange); }
@media (max-width: 480px) {
  .checkout-steps li + li::before { width: 1rem; }
  .checkout-steps .step-label { display: none; }
  .checkout-steps .is-current .step-label { display: inline; }
}
/* Checkout */
.checkout-line { align-items: flex-start; gap: 1rem; }
.checkout-line-name { font-weight: 600; }
.checkout-line-sub { font-size: .8125rem; color: var(--text-muted); margin-top: .125rem; }
.checkout-note { font-size: .8125rem; color: var(--text-muted); margin: .75rem 0 0; }
.checkout-trust { margin-top: 1rem; }
.checkout-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.checkout-powered { text-align: center; margin-top: .75rem; }
.checkout-layout select { width: 100%; }
.checkout-result { max-width: 40rem; margin: 2rem auto 4rem; }
.checkout-result .card { padding: 2rem; text-align: center; }
.checkout-result .btn { margin: .25rem; }
.form-hint { font-size: .8125rem; color: var(--text-muted); margin: .25rem 0 .875rem; }
.small { font-size: .75rem; }

.orders-table td:first-child { white-space: nowrap; }
.status-badge--ok    { background: color-mix(in srgb, #16a34a 10%, transparent); border-color: color-mix(in srgb, #16a34a 40%, transparent); color: #0f5f2d; }
.status-badge--warn  { background: color-mix(in srgb, var(--orange) 8%, transparent); border-color: color-mix(in srgb, var(--orange) 40%, transparent); color: var(--orange-dk); }
.status-badge--muted { color: var(--text-muted); }
.status-badge--err   { background: color-mix(in srgb, #dc2626 12%, transparent); border-color: color-mix(in srgb, #dc2626 40%, transparent); color: #b91c1c; }

/* Price checks on Admin -> Products: what the derived pricing logic thinks is wrong. */
.price-check-scope { margin: -0.35rem 0 0.9rem; font-size: 0.85rem; }
.price-check-none { margin: 0; color: var(--text-muted); }
.price-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.price-check-item { padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; background: var(--surface-2); }
.price-check-item strong { display: block; font-size: 0.94rem; }
.price-check-item span { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--text-muted); }
.price-check-item--error { border-left-color: #dc2626; }
.price-check-item--warning { border-left-color: var(--orange); }

/* Receipt */
.receipt-layout { max-width: 48rem; margin: 0 auto 4rem; }
.receipt-card { padding: 1.75rem 2rem; }
.receipt-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 2px solid var(--border-lt); }
.receipt-brand { font-size: 1.25rem; font-weight: 800; }
.receipt-sub { font-size: .8125rem; color: var(--text-muted); }
.receipt-meta { display: grid; grid-template-columns: 1fr; gap: .25rem 1rem; min-width: 14rem; font-size: .875rem; align-content: start; }
.receipt-meta > div { display: flex; gap: .5rem; justify-content: space-between; }
.receipt-meta span { color: var(--text-muted); }
.receipt-status--paid, .receipt-status--complete { color: #15803d; }
.receipt-status--pending { color: var(--orange); }
.receipt-status--refunded, .receipt-status--cancelled { color: var(--text-muted); }
.receipt-bill { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-lt); font-size: .9375rem; }
.receipt-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .25rem; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9375rem; }
.receipt-table th, .receipt-table td { text-align: left; padding: .625rem .25rem; border-bottom: 1px solid var(--border-lt); vertical-align: top; }
.receipt-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.receipt-table .num { text-align: right; white-space: nowrap; }
.receipt-table tfoot td { border-bottom: none; padding-top: .875rem; font-size: 1.0625rem; }
.receipt-item-name { font-weight: 600; }
.receipt-includes { list-style: none; margin: .375rem 0 .125rem; padding: 0 0 0 1.25rem; font-size: .8125rem; color: var(--text-muted); border-left: 2px solid var(--border-lt); }
.receipt-includes li { padding: .125rem 0; }
.receipt-includes li::before { content: "- "; color: var(--orange); }
.receipt-foot { display: flex; gap: 2rem; flex-wrap: wrap; font-size: .875rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-lt); }
.receipt-foot code { font-size: .8125rem; }
.receipt-actions { display: flex; gap: .625rem; flex-wrap: wrap; padding-top: 1.25rem; }
@media (max-width: 640px) {
  .receipt-card { padding: 1.25rem; }
  .receipt-head { flex-direction: column; }
}
@media print {
  /* Receipt prints light regardless of the on-screen theme */
  html, body { background: #fff !important; color: #111 !important; }
  .site-header, .site-footer, .breadcrumb, .no-print { display: none !important; }
  .page-header { background: none !important; border: none !important; margin-bottom: .5rem; padding: 0; }
  .page-header h1, .page-header p { color: #111 !important; }
  .section-eyebrow { color: #c2410c !important; }
  .receipt-layout { max-width: none; margin: 0; }
  .receipt-card { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; color: #111 !important; padding: 1.5rem !important; }
  .receipt-card *, .receipt-card .text-muted, .receipt-label, .receipt-sub, .receipt-meta span, .receipt-table th, .receipt-includes { color: #111 !important; }
  .receipt-status--paid, .receipt-status--complete { color: #15803d !important; }
  .receipt-head, .receipt-bill, .receipt-foot, .receipt-table th, .receipt-table td { border-color: #ddd !important; }
  .receipt-includes { border-left-color: #ddd !important; }
  .receipt-includes li::before { color: #c2410c !important; }
  a { color: #111 !important; text-decoration: none; }
  @page { margin: .6in; }
}

/* Study Guide - multi-part PDF switcher */
.study-parts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

/* Audio */
.audio-section-list { display: flex; flex-direction: column; gap: 1.25rem; }
.audio-section { background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: 1rem 1.25rem; }
.audio-section-label { font-weight: 600; margin-bottom: .6rem; font-size: .9375rem; }
.audio-player { width: 100%; display: block; }

/* Audio PDF companion - appears above audio list when a track plays */
.audio-pdf-companion { margin-bottom: 1.5rem; border: 1px solid var(--border-lt); border-radius: var(--radius); overflow: hidden; }
.audio-pdf-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border-lt); }
.audio-pdf-label { font-weight: 600; font-size: .9rem; }
.audio-pdf-actions { display: flex; align-items: center; gap: .5rem; }
.btn-ghost { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: .25rem .5rem; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; }
.btn-ghost:hover { background: var(--border-lt); color: var(--text); }

/* ---- Quiz ----
   Sections: Launcher -> Session -> Result -> Missed -> Mobile
   ---- */

/* ==== Question session ==== */
#quiz-area { max-width: 720px; }

/* Progress bar */
.quiz-progress { margin-bottom: 1.5rem; }
.quiz-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.quiz-progress-bar {
  height: 8px;
  background: var(--border-lt);
  border-radius: 99px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 99px;
  transition: width .35s ease;
}

/* Question card */
.quiz-question-card {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.quiz-q-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 1.5rem;
}

/* Answer options */
.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 1.25rem;
}
.quiz-opt {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  width: 100%;
  padding: .875rem 1.125rem;
  background: var(--bg);
  border: 2px solid var(--border-lt);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s, box-shadow .12s;
  font-family: inherit;
}
.quiz-opt:hover:not(:disabled) {
  border-color: var(--orange);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--orange-bg);
}
.quiz-opt:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.quiz-opt:disabled { cursor: default; }

/* Letter badge */
.quiz-opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  min-width: 1.625rem;
  border-radius: 50%;
  background: var(--border-lt);
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: .05rem;
  transition: background .12s, color .12s;
}
.quiz-opt:hover:not(:disabled) .quiz-opt-letter {
  background: var(--orange);
  color: #fff;
}
.quiz-opt-text {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
}

/* Correct / wrong feedback */
.quiz-opt--correct {
  border-color: var(--success) !important;
  background: var(--success-bg) !important;
}
.quiz-opt--correct .quiz-opt-letter {
  background: var(--success);
  color: #fff;
}
.quiz-opt--wrong {
  border-color: var(--danger) !important;
  background: var(--danger-bg) !important;
}
.quiz-opt--wrong .quiz-opt-letter {
  background: var(--danger);
  color: #fff;
}

/* Source ref & next button */
.quiz-src {
  display: block;
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border-lt);
}
.quiz-next {
  margin-top: 1.25rem;
  width: 100%;
  font-size: 1rem;
}

/* ==== Result screen ==== */
.quiz-result {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.75rem;
  max-width: 480px;
  box-shadow: var(--shadow-sm);
}
.quiz-result--pass {
  background: var(--success-bg);
  border: 2px solid var(--success);
}
.quiz-result--fail {
  background: var(--danger-bg);
  border: 2px solid var(--danger);
}
.quiz-result-pct {
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.quiz-result--pass .quiz-result-pct { color: var(--success); }
.quiz-result--fail .quiz-result-pct { color: var(--danger); }
.quiz-result-status {
  font-size: 1.125rem;
  font-weight: 700;
  margin: .5rem 0 .875rem;
}
.quiz-result--pass .quiz-result-status { color: var(--success); }
.quiz-result--fail .quiz-result-status { color: var(--danger); }
.quiz-result p { color: var(--text-muted); font-size: .9375rem; margin: 0; line-height: 1.55; }
.quiz-result-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  justify-content: center;
}

/* ==== Missed questions review ==== */
.quiz-missed { max-width: 680px; margin-bottom: 2rem; }
.quiz-missed h3 {
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.quiz-missed ul {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0;
}
.quiz-missed li {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
}
.quiz-missed-q {
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 .5rem;
}
.quiz-missed-ans {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
}
.quiz-missed-ans strong { color: var(--text); }

/* ==== Mobile ==== */
@media (max-width: 480px) {
  .quiz-question-card { padding: 1.25rem; }
  .quiz-q-text { font-size: 1rem; }
  .quiz-result { padding: 1.75rem 1.25rem; }
  .quiz-result-pct { font-size: 3rem; }
  .quiz-result-actions { flex-direction: column; }
  .quiz-result-actions .btn { width: 100%; }
}

.site-banner { background: var(--orange); color: #fff; font-weight: 600; font-size: .9rem; padding: .5rem 0; text-align: center; }

/* ==== Maintenance notices ==== */
.product-maintenance { display: flex; flex-direction: column; gap: .25rem; }
.product-maintenance-badge { display: inline-block; width: fit-content; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); border-radius: 3px; padding: .25rem .5rem; }
.product-maintenance p { margin: 0; font-size: .8125rem; color: var(--text-muted); }
.product-maintenance-banner { padding: .75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--orange) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); font-size: .9rem; font-weight: 600; }

/* ==== Admin portal ==== */
.admin-body { background: var(--bg); color: var(--text); margin: 0; }
.admin-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.admin-side { background: var(--navy); color: #fff; display: flex; flex-direction: column; padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh; }
.admin-brand { color: #fff; font-weight: 800; font-size: 1.125rem; text-decoration: none; display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.admin-brand .brand-badge, .admin-login-brand .brand-badge { background: var(--orange); color: #fff; font-size: .75rem; font-weight: 800; padding: .2rem .45rem; border-radius: 4px; }
.admin-nav { display: flex; flex-direction: column; gap: .125rem; }
.admin-nav a { color: rgba(255,255,255,.78); text-decoration: none; padding: .55rem .75rem; border-radius: var(--radius-sm, 6px); display: flex; align-items: center; gap: .625rem; font-size: .9375rem; font-weight: 600; }
.admin-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav a.is-active { background: var(--orange); color: #fff; }
.admin-nav-icon { width: 1.25rem; text-align: center; }
.admin-side-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8125rem; }
.admin-who { color: #fff; font-weight: 600; margin-bottom: .5rem; }
.admin-who small { display: block; color: rgba(255,255,255,.6); font-weight: 400; }
.admin-side-link { display: block; color: rgba(255,255,255,.7); text-decoration: none; padding: .25rem 0; }
.admin-side-link:hover { color: #fff; }
.admin-main { padding: 2rem 2.5rem 4rem; max-width: 80rem; }
.admin-head { margin-bottom: 1.5rem; }
.admin-head h1 { margin: 0 0 .25rem; display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.admin-head p { margin: .25rem 0 0; }
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-back { font-size: .8125rem; color: var(--text-muted); text-decoration: none; display: inline-block; margin-bottom: .5rem; }
.admin-flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-weight: 600; background: color-mix(in srgb, #16a34a 12%, var(--surface)); border: 1px solid color-mix(in srgb, #16a34a 40%, transparent); }
.admin-flash--err { background: color-mix(in srgb, #e5484d 12%, var(--surface)); border-color: color-mix(in srgb, #e5484d 40%, transparent); }
.admin-callout { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; background: color-mix(in srgb, var(--orange) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.admin-callout ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.admin-stat { background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: 1rem 1.25rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .25rem; }
.admin-stat:hover { border-color: var(--orange); }
.admin-stat-value { font-size: 1.75rem; font-weight: 800; }
.admin-stat-label { font-size: .8125rem; color: var(--text-muted); font-weight: 600; }
.admin-card { margin-bottom: 1.5rem; padding: 1.5rem; }
.admin-card h2 { font-size: 1.125rem; margin: 0 0 1rem; }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.admin-card-head h2 { margin: 0; }
.admin-two { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 1000px) { .admin-two { grid-template-columns: 1fr 1fr; } }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table th, .admin-table td { text-align: left; padding: .625rem .5rem; border-bottom: 1px solid var(--border-lt); vertical-align: top; }
.admin-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.admin-table .num { text-align: right; white-space: nowrap; }
.admin-table tr.is-muted td { opacity: .6; }
.admin-table a { font-weight: 600; }
.admin-items { max-width: 18rem; font-size: .8125rem; }
.nowrap { white-space: nowrap; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; font-size: .875rem; color: var(--text-muted); }
.admin-search { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.admin-search input[type="search"] { flex: 1; min-width: 14rem; }
.admin-search select { width: auto; }
.admin-form label { display: block; font-weight: 600; font-size: .875rem; margin: .75rem 0 .3rem; }
.admin-form input:not([type="checkbox"]):not([type="radio"]), .admin-form select, .admin-form textarea { width: 100%; box-sizing: border-box; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.admin-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.admin-form-actions { margin-top: 1.25rem; }
.admin-fieldset { border: 1px solid var(--border-lt); border-radius: var(--radius); padding: .75rem 1rem 1rem; margin: 1rem 0 0; }
.admin-fieldset legend { font-weight: 700; font-size: .875rem; padding: 0 .375rem; }
.admin-check, .admin-radio { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; font-size: .9rem; margin: .5rem 0; cursor: pointer; }
.admin-check input, .admin-radio input { margin-top: .2rem; }
.admin-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
.admin-inline { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; flex-wrap: wrap; }
.admin-inline input, .admin-inline select { width: auto; flex: 1; min-width: 8rem; }
.admin-actions { display: flex; gap: .625rem; flex-wrap: wrap; }
.admin-access-row { padding: .5rem 0; border-bottom: 1px solid var(--border-lt); font-size: .9rem; }
.admin-access-row:last-child { border-bottom: none; }
.admin-reset-link { margin-top: .75rem; font-size: .8125rem; word-break: break-all; }
.btn-danger { background: #e5484d; color: #fff; border-color: #e5484d; }
.btn-danger:hover { background: #c93a3f; }
.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.admin-login .form-card { max-width: 24rem; width: 100%; }
.admin-login-brand { font-weight: 800; display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-side-foot { margin: 0 0 0 auto; border: none; padding: 0; }
  .admin-main { padding: 1.25rem; }
  .admin-form-grid, .admin-form-grid--3 { grid-template-columns: 1fr; }
}
.admin-card h2.mt-1 { margin-top: 1.5rem; }
.q-option { display: grid; grid-template-columns: 3.5rem 1fr; gap: .5rem .75rem; align-items: start; margin-bottom: .75rem; }
.q-option-radio { display: flex; align-items: center; gap: .375rem; padding-top: .5rem; font-size: 1rem; }
.q-option textarea { margin: 0; }
.q-len { grid-column: 2; }
.q-option.is-tell textarea { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent); }
.admin-pre { background: var(--bg); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: .75rem 1rem; font-size: .75rem; overflow-x: auto; white-space: pre; }
.error-page { text-align: center; padding: 4rem 1rem 5rem; max-width: 36rem; margin: 0 auto; }
.error-code { font-size: 5rem; font-weight: 900; color: var(--orange); line-height: 1; letter-spacing: -.02em; }
.error-page h1 { margin: .5rem 0; }
.error-page p { color: var(--text-muted); font-size: 1.0625rem; }
.error-actions { display: flex; gap: .625rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.legal-body h2 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.legal-body p, .legal-body li { line-height: 1.65; }.inline-form { display: inline; }

.pay-consent { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; line-height: 1.5; margin: .25rem 0 1rem; }
.pay-consent input { margin-top: .25rem; flex-shrink: 0; }
.legal-body ul, .legal-body ol { list-style: disc; padding-left: 1.5rem; margin: .5rem 0 1rem; }
.legal-body ol { list-style: decimal; }
.bundles-with { margin-top: 1rem; padding: 1.25rem; }
.bundles-with .includes-label { margin-top: 0; }
.bundle-offer { padding: .875rem 0; border-top: 1px solid var(--border-lt); }
.bundle-offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.bundle-offer-name { font-weight: 700; font-size: .9375rem; }
.bundle-offer-price { font-weight: 800; color: var(--orange); white-space: nowrap; }
.bundle-offer-mods { font-size: .8125rem; color: var(--text-muted); margin: .25rem 0 .625rem; line-height: 1.45; }
.bundle-offer-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bundle-offer.is-complete { margin: .75rem 0 .25rem; padding: 1rem 1rem 1.125rem; border: 2px solid var(--orange); border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 14%, var(--surface)), var(--surface)); box-shadow: 0 6px 22px color-mix(in srgb, var(--orange) 20%, transparent); }
.bundle-offer.is-complete + .bundle-offer { border-top: 0; }
.bundle-offer.is-complete .bundle-offer-name { font-size: 1.0625rem; color: var(--orange); }
.bundle-offer.is-complete .bundle-offer-price { font-size: 1.125rem; }
.bundle-offer-tag { display: inline-block; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--orange); padding: .2rem .55rem; border-radius: 999px; margin-bottom: .5rem; }
.add-to-cart.is-in-cart, .add-to-cart.is-in-cart:disabled { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-lt); cursor: default; opacity: 1; }

/* Cart: in-place upgrade offers */
.cart-upgrades { margin-top: 1.5rem; }
.cart-upgrades h2 { font-size: 1.25rem; margin: 0 0 .25rem; }
.cart-upgrades-lead { color: var(--text-muted); font-size: .9rem; margin: 0 0 1rem; }
.cart-upgrade { position: relative; padding: 1.25rem; border: 1px solid var(--border-lt); border-radius: var(--radius); background: var(--surface); margin-bottom: .875rem; }
.cart-upgrade.is-complete { border: 2px solid var(--orange); background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 14%, var(--surface)), var(--surface)); box-shadow: 0 8px 28px color-mix(in srgb, var(--orange) 22%, transparent); padding-top: 1.5rem; }
.cart-upgrade-tag { position: absolute; top: -.75rem; left: 1.25rem; font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--orange); padding: .25rem .65rem; border-radius: 999px; }
.cart-upgrade-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cart-upgrade h3 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.cart-upgrade.is-complete h3 { font-size: 1.25rem; color: var(--orange); }
.cart-upgrade-sub { margin: 0; color: var(--text-muted); font-size: .875rem; line-height: 1.5; }
.cart-upgrade-pricing { text-align: right; flex-shrink: 0; }
.cart-upgrade-delta { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--orange); }
.cart-upgrade-delta-note { font-size: .75rem; color: var(--text-muted); }
.cart-upgrade-adds { list-style: none; margin: .875rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem .75rem; font-size: .875rem; font-weight: 600; }
.cart-upgrade-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--border-lt); }
.cart-upgrade-anchor { font-size: .8125rem; color: var(--text-muted); }
.cart-upgrade-anchor s { opacity: .8; }
.cart-upgrade.is-complete .btn-primary { padding-inline: 1.5rem; font-weight: 800; }
@media (max-width: 560px) {
  .cart-upgrade-head { flex-direction: column; }
  .cart-upgrade-pricing { text-align: left; }
  .cart-upgrade-foot .btn { width: 100%; }
}

/* Admin: payment mode */
.admin-mode-pill { display: block; margin: .5rem 0 1rem; padding: .35rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-align: center; }
.admin-mode-test { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #fbbf24; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); }
.admin-mode-live { background: color-mix(in srgb, #22c55e 18%, transparent); color: #22c55e; border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); }
.stripe-mode-card { border-left: 4px solid #f59e0b; }
.stripe-mode-card.stripe-mode-live { border-left-color: #22c55e; }
.stripe-mode-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stripe-mode-head h2 { margin: 0; }
.stripe-mode-badge { font-weight: 800; font-size: .8125rem; letter-spacing: .04em; color: var(--warn); }
.stripe-mode-live .stripe-mode-badge { color: var(--success); }
.stripe-mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stripe-mode-option { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--border-lt); border-radius: var(--radius); cursor: pointer; }
.stripe-mode-option.is-selected { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }
.stripe-mode-option input { margin-top: .2rem; }
.stripe-mode-option-body { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; }
.stripe-mode-status.is-ok { color: var(--success); font-weight: 700; }
.stripe-mode-status.is-bad { color: var(--danger); font-weight: 700; }
.stripe-mode-keys { color: var(--text-muted); font-size: .8125rem; line-height: 1.7; }
.stripe-mode-form .admin-form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Screenshot mode for the selector (?shot=1): tool only */
body.is-shot .site-header, body.is-shot header.nav, body.is-shot .page-header, body.is-shot footer, body.is-shot .selector-about, body.is-shot .selector-disclaimer { display: none !important; }
body.is-shot .selector-layout { padding-top: 1.5rem; }

/* CDL Selector: about section with angled screenshots */
.selector-about { padding: 3rem 0 4rem; border-top: 1px solid var(--border-lt); margin-top: 2rem; }
.sel-about-intro { max-width: 52rem; margin-bottom: 2.5rem; }
.sel-about-intro h2 { font-size: 1.75rem; margin: 0 0 .75rem; }
.sel-about-intro p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.sel-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0 0 3rem; perspective: 1400px; }
.sel-shot { margin: 0; text-align: center; }
.sel-shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border-lt); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04); transition: transform .35s ease, box-shadow .35s ease; transform-style: preserve-3d; }
.sel-shot-1 img { transform: rotateY(14deg) rotateX(3deg) scale(.96); }
.sel-shot-2 img { transform: rotateX(4deg) scale(1.02); }
.sel-shot-3 img { transform: rotateY(-14deg) rotateX(3deg) scale(.96); }
.sel-shot:hover img { transform: rotateY(0) rotateX(0) scale(1.04); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 0 0 2px color-mix(in srgb, var(--orange) 60%, transparent); }
.sel-shot figcaption { margin-top: .875rem; font-size: .875rem; font-weight: 700; color: var(--text-muted); }
.sel-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.sel-about-grid .card + .card { margin-top: 0; }
.sel-about-card h3 { margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--border-lt); font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: var(--text); position: relative; }
.sel-about-card h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 2.5rem; height: 2px; background: var(--orange); }
.sel-about-card p { margin: 0; line-height: 1.65; font-size: .9375rem; }
.sel-about-list { margin: 0; padding-left: 1.1rem; line-height: 1.6; font-size: .9375rem; }
.sel-about-list li { margin-bottom: .5rem; }
.sel-about-faq { max-width: 52rem; }
.sel-about-faq h3 { font-size: 1.375rem; margin: 0 0 1rem; }
.sel-about-faq dt { font-weight: 800; margin-top: 1.25rem; font-size: 1.0625rem; }
.sel-about-faq dd { margin: .375rem 0 0; line-height: 1.65; color: var(--text-muted); }
.sel-about-cta { margin-top: 2rem; }
@media (max-width: 900px) {
  .sel-shots, .sel-about-grid { grid-template-columns: 1fr; }
  .sel-shot img { transform: none !important; }
}

/* CDL Selector: answer history */
.sel-history { margin: 1.5rem 0 1rem; }
.sel-history-title { font-size: .8125rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .5rem; }
.sel-history-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.sel-history-row { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .625rem .875rem; border: 1px solid var(--border-lt); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.sel-history-row:hover { border-color: var(--orange); }
.sel-history-row:hover .sel-history-edit { opacity: 1; }
.sel-history-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-size: .75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sel-history-q { flex: 1; font-size: .9rem; line-height: 1.35; }
.sel-history-a { flex-shrink: 0; font-weight: 800; font-size: .8125rem; padding: .15rem .6rem; border-radius: 999px; }

.sel-history-edit { flex-shrink: 0; font-size: .75rem; color: var(--orange-dk); opacity: .6; }
@media (max-width: 560px) { .sel-history-edit { display: none; } }
.sel-hint { margin: -.5rem 0 1.25rem; color: var(--text); opacity: 0.85; font-size: 1.0625rem; line-height: 1.65; max-width: 44rem; }
.admin-note-row { display: grid; grid-template-columns: 10rem 1fr; gap: .75rem; margin-bottom: .75rem; align-items: start; }
@media (max-width: 640px) { .admin-note-row { grid-template-columns: 1fr; } }

/* CDL Selector: state information card */
.sel-state-card { margin-bottom: 3rem; padding: 1.75rem; border-left: 4px solid var(--orange); }
.sel-state-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sel-state-head h3 { margin: 0; font-size: 1.375rem; }
.sel-state-blurb { font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.25rem; }
.sel-state-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.sel-state-card h4 { font-size: .8125rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 .5rem; }
.sel-state-grid h4 { margin-top: 0; }
.sel-state-list { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.sel-state-notes { margin: 0 0 .5rem; padding-left: 1.1rem; line-height: 1.6; }
.sel-state-notes li { margin-bottom: .5rem; }
@media (max-width: 700px) { .sel-state-grid { grid-template-columns: 1fr; } }

.checkout-line-includes { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .75rem; font-size: .8125rem; color: var(--text-muted); }
.checkout-line-includes li::before { content: "\2713  "; color: var(--orange); font-weight: 700; }
.audio-section.is-unavailable { opacity: .75; }

.recaptcha-wrap { margin: 1rem 0 .25rem; }
.recaptcha-wrap .g-recaptcha { transform-origin: 0 0; }
@media (max-width: 360px) { .recaptcha-wrap .g-recaptcha { transform: scale(.85); } }

/* Classes page: state-specific block */
.class-state-block { margin: 1.25rem 0 .25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--surface-2); border-left: 4px solid var(--orange); }
.class-state-block h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.class-state-block p { margin: 0 0 .65rem; line-height: 1.65; font-size: .9375rem; color: var(--text); }
.class-state-examples { list-style: none; margin: .25rem 0 .9rem; padding: 0; line-height: 1.6; font-size: .9375rem; color: var(--text); }
.class-state-examples li { position: relative; padding-left: 1.1rem; margin-bottom: .5rem; }
.class-state-examples li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.class-state-note { font-size: .9rem; color: var(--text-muted); }
.class-state-agency { font-size: .875rem; color: var(--text-muted); margin-bottom: 0 !important; }

/* Endorsements page: state-specific block */
.endorse-state-block { margin: 0 1.25rem 1.25rem; padding: 1.1rem 1.25rem 1rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-lt); border-left: 3px solid var(--orange); }
.endorse-state-block h3 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; color: var(--text); }
.endorse-state-examples { list-style: none; margin: 0; padding: 0; font-size: .9375rem; line-height: 1.65; color: var(--text); }
.endorse-state-examples li { position: relative; padding-left: 1.1rem; margin-bottom: .7rem; }
.endorse-state-examples li:last-child { margin-bottom: 0; }
.endorse-state-examples li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.endorse-state-examples strong { color: var(--text); font-weight: 700; }

.checkout-account-notice { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); font-size: .875rem; line-height: 1.5; }
.checkout-account-notice strong { display: block; margin-bottom: .2rem; }
#co-account-notice { color: var(--text); }
#co-account-notice a { font-weight: 700; }
.checkout-account-notice span { color: var(--text-muted); }

/* Notice box (set-password and similar) */
.notice-box { margin: 0 0 1.25rem; padding: 1rem 1.125rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); border-left: 4px solid var(--orange); background: color-mix(in srgb, var(--orange) 10%, var(--surface)); font-size: .9375rem; line-height: 1.6; }
.notice-box strong { display: block; margin-bottom: .35rem; font-size: 1rem; }
.notice-box p { margin: 0; }

/* Account page on phones: grid items must not grow past the screen, and the order table becomes stacked cards */
.account-layout > * { min-width: 0; }
.account-layout .table-wrap { max-width: 100%; }
@media (max-width: 640px) {
  /* Each order becomes a compact card: order number + status on line 1, date + days left on line 2 */
  .account-layout .orders-table, .account-layout .orders-table tbody { display: block; width: 100%; }
  .account-layout .orders-table thead { display: none; }
  .account-layout .orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; padding: .875rem 1rem; margin-bottom: .625rem; border: 1px solid var(--border-lt); border-radius: var(--radius); background: var(--surface-2); }
  .account-layout .orders-table td { display: block; padding: 0; border: 0; white-space: nowrap; }
  .account-layout .orders-table td[data-label="Order"] { grid-column: 1; grid-row: 1; font-size: 1.0625rem; }
  .account-layout .orders-table td[data-label="Order"] code { font-size: 1rem; }
  .account-layout .orders-table td[data-label="Status"] { grid-column: 2; grid-row: 1; justify-self: end; }
  .account-layout .orders-table td[data-label="Date"] { grid-column: 1; grid-row: 2; font-size: .8125rem; color: var(--text-muted); }
  .account-layout .orders-table td[data-label="Date"]::before { content: "Ordered "; }
  .account-layout .orders-table td[data-label="Days left"] { grid-column: 2; grid-row: 2; justify-self: end; font-size: .8125rem; color: var(--text-muted); }
  .account-layout .orders-table td[data-label="Days left"]::before { content: ""; display: none; }
  .account-header .btn { width: 100%; text-align: center; }
  .account-layout .form-submit-row .btn { width: 100%; }
}
.order-link code { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 2px; }
.order-link:hover code { color: var(--text); }
.diag-list { list-style: none; margin: 0; padding: 0; }
.diag-list li { display: flex; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--border-lt); line-height: 1.45; }
.diag-list li:first-child { border-top: 0; }
.diag-icon { flex-shrink: 0; width: 1.5rem; font-weight: 800; text-align: center; }
.diag-ok .diag-icon { color: var(--success); } .diag-bad .diag-icon { color: var(--danger); } .diag-warn .diag-icon { color: var(--warn); }
.diag-bad strong { color: var(--danger); }

/* Account: read-only profile facts */
.profile-facts { margin: 0 0 1rem; padding: 0; display: grid; gap: .625rem; }
.profile-fact { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; align-items: baseline; padding: .625rem 0; border-bottom: 1px solid var(--border-lt); }
.profile-fact:last-child { border-bottom: 0; }
.profile-fact dt { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.profile-fact dd { margin: 0; font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 480px) { .profile-fact { grid-template-columns: 1fr; gap: .15rem; } }
.orders-table td, .orders-table th { white-space: nowrap; }

/* State home hero: state flag badge above the eyebrow */

/* Hero background video: sits under the gradient overlay, behind .hero-inner */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.hero-video ~ .hero-inner { position: relative; z-index: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--navy) 92%, transparent) 0%,
    color-mix(in srgb, var(--navy-mid) 78%, transparent) 60%,
    color-mix(in srgb, var(--navy-lt) 70%, transparent) 100%);
  display: none;
}
.hero:has(.hero-video)::after { display: block; }
.hero::before { z-index: 2; }
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero:has(.hero-video)::after { display: none; }
}

/* Crossfade loop (hero-video.js): both copies stacked, only the active one visible */
.hero-video { transition: opacity 1s linear; }
.hero-video--alt, .hero-video:not(.is-on) { opacity: 0; }
.hero-video.is-on { opacity: 0.55; }

/* State-specific section on study-material pages */
.product-state h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.product-state-examples, .product-state-notes { margin: 0 0 0.75rem 1.1rem; padding: 0; }
.product-state-examples li, .product-state-notes li { margin-bottom: 0.4rem; }
.product-state-agency { margin-top: 1rem; }
.product-state-faq { margin: 0; }
.product-state-faq dt { font-weight: 700; margin-top: 0.75rem; }
.product-state-faq dd { margin: 0.25rem 0 0; color: var(--text-muted); }

/* State guide on the study-material listing */
.products-state h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.products-state-rec h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.products-state-rec p:last-child { margin-bottom: 0; }
.products-state-routes { margin-top: 1.25rem; }

/* Admin sales */
.sales-bar { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); vertical-align: middle; margin-right: .5rem; overflow: hidden; }
.sales-bar-fill { height: 100%; background: var(--orange); }
.admin-inline-form select { padding: .4rem .6rem; }
.admin-stat-value small { font-size: .9rem; font-weight: 600; color: var(--text-muted); }

/* Selector on phones: recommendations (plan) above the answer history */
@media (max-width: 859px) {
  .selector-layout { display: flex; flex-direction: column; gap: 1.5rem; }
  .selector-questions { display: contents; }
  /* the column is unwrapped here, so the question step carries the card look instead */
  #selector-step { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--orange); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem 0.5rem; box-shadow: var(--shadow-lg); }
  #selector-step { order: 1; }
  .selector-nav { order: 2; }
  .cdl-plan { order: 3; }
  #selector-history { order: 4; }
  .selector-questions > .selector-disclaimer { order: 5; }
}

/* Footer content */
.footer-brand p { max-width: 340px; margin-bottom: 0.75rem; }
.footer-trust { list-style: none; margin: 0 0 0.75rem; padding: 0; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.footer-trust li { margin-bottom: 0.25rem; }
.footer-contact a { color: rgba(255,255,255,0.88); text-decoration: underline; text-underline-offset: 2px; }
.footer-links-label--gap { margin-top: 1rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.footer-bottom p { margin: 0; }
.footer-disclaimer { max-width: 640px; }

/* Home page trust signals */
.trust-section { padding-top: 0; }
.trust-strip { list-style: none; margin: 0 0 2rem; padding: 1.25rem 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center; border: 1px solid var(--border-lt); border-radius: var(--radius); background: var(--surface); }
.trust-num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--orange); line-height: 1.1; }
.trust-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
.trust-quotes { margin-bottom: 1.5rem; }
.trust-quote { margin: 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--orange); background: var(--surface); border-radius: var(--radius); }
.trust-quote p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.55; }
.trust-quote footer { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.trust-behind { text-align: center; color: var(--text-muted); margin: 0; }
.trust-behind a { color: var(--orange-dk); font-weight: 600; }
@media (max-width: 640px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }

/* State licensing process block */
.state-licensing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
@media (min-width: 860px) { .state-licensing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.state-licensing-grid > .card { margin: 0; min-width: 0; overflow-wrap: break-word; }
.state-licensing .card h3 { margin-bottom: 0.5rem; }
.fee-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0.25rem 0 0.5rem; font-size: 0.95rem; }
.fee-table td:first-child { width: 58%; }
.fee-table td { padding: 0.45rem 0; border-bottom: 1px solid var(--border-lt); vertical-align: top; }
.fee-table td:last-child { width: 42%; text-align: right; white-space: normal; font-weight: 700; padding-left: 1rem; }
.fee-table tr:last-child td { border-bottom: 0; }
.state-licensing-source { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.state-licensing-source a { color: var(--orange-dk); }
.quirk-list { margin: 0; padding-left: 1.1rem; }
.quirk-list li { margin-bottom: 0.5rem; line-height: 1.5; }
.quirk-list li:last-child { margin-bottom: 0; }

/* Process cards on the state licensing block */
.card-process { position: relative; border-left: 4px solid var(--orange); }
.card-process--wait { border-left-color: #8db4ff; }
.card-process--fees { border-left-color: #2fbf71; }
.card-process--quirks { border-left-color: #f5c451; }
.card-process h3 { display: flex; align-items: center; gap: 0.5rem; }
.card-process-icon { font-size: 1.1rem; line-height: 1; }
.card-process p a { color: var(--orange-dk); word-break: break-word; }
.quirk-list { list-style: none; margin: 0; padding: 0; counter-reset: quirk; }
.quirk-list li { counter-increment: quirk; display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid var(--border-lt); line-height: 1.5; }
.quirk-list li:first-child { border-top: 0; padding-top: 0.25rem; }
.quirk-list li::before { content: counter(quirk); flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(245,196,81,0.18); color: #f5c451; font-size: 0.8rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1rem; }

/* State flag beside the licensing-block heading */
.section-heading--flag { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.heading-flag { width: 48px; height: 32px; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 2px 6px rgba(0,0,0,0.35); flex-shrink: 0; }

/* Contextual CTA card on state pages (after the licensing process block) */
.cta-card { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 16%, transparent), color-mix(in srgb, var(--orange) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); }
@media (min-width: 900px) { .cta-card { grid-template-columns: 1.6fr 1fr; } }
.cta-card-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-dk); margin: 0 0 0.35rem; }
.cta-card h3 { font-size: 1.35rem; margin: 0 0 0.5rem; }
.cta-card-body p:last-child { margin: 0; color: var(--text-muted); }
.cta-card-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.cta-card-actions .btn { text-align: center; }
.faq-item p a { color: var(--orange-dk); font-weight: 600; }
/* Closing banner */
.cta-band--close .section-eyebrow { color: var(--orange-lt); }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ==== Pay once messaging ==== */
.pay-once { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.45; margin: 0.9rem auto 0; max-width: 560px; }
.pay-once-icon { flex-shrink: 0; font-weight: 800; }
.pay-once--hero { color: rgba(255,255,255,0.78); justify-content: center; text-align: left; }
.pay-once--hero .pay-once-icon { color: var(--orange); }
.pay-once--card { color: var(--text-muted); margin: 0.75rem 0 0; max-width: none; }
.pay-once--card .pay-once-icon { color: var(--success); }
.pay-once--inline { color: var(--text-muted); margin: 0.5rem 0 0; max-width: none; }

.hero .pay-once + .hero-stats { margin-top: 1.75rem; }

/* ==== Access length picker ==== */
.term-picker { border: 0; padding: 0; margin: 0 0 1rem; }
.term-picker-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem; }
.term-option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.8rem; margin-bottom: 0.45rem; border: 1px solid var(--border-lt); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.term-option:hover { border-color: var(--orange); }
.term-option.is-selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.term-option input { accent-color: var(--orange); margin-right: 0.5rem; }
.term-option-main { flex: 1; display: flex; flex-direction: column; font-weight: 600; font-size: 0.95rem; }
.term-option-main small { font-weight: 400; font-size: 0.78rem; color: var(--text-muted); }
.term-popular { display: inline-block; margin-left: 0.4rem; font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange-dk); }
.term-option-price { font-weight: 800; white-space: nowrap; }

.term-picker--cart { margin: 1rem 0; }
.cart-summary-line--term span:first-child, .checkout-line--term .checkout-line-name { color: var(--orange); }

/* ==== Access length picker (compact) ==== */
.term-picker { border: 0; padding: 0; margin: 0 0 0.9rem; }
.term-picker-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.4rem; }
.term-option { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "radio title price"; column-gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; margin-bottom: 0.35rem; border: 1px solid var(--border-lt); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.term-option:hover { border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
.term-option.is-selected { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }
.term-option input { grid-area: radio; margin: 0; accent-color: var(--orange); }
.term-option-main { display: contents; }
.term-option-title { grid-area: title; display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.term-popular { display: inline-block; font-style: normal; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--orange); padding: 0.1rem 0.4rem; border-radius: 999px; }
.term-option-main small { grid-area: note; display: none; font-size: 0.76rem; line-height: 1.35; color: var(--text-muted); }
.term-option.is-selected .term-option-main small { display: block; }

.term-option-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.term-option-price strong { font-size: 0.92rem; }
.term-option-price small { font-size: 0.7rem; color: var(--text-muted); }

.term-picker--cart { margin: 0.9rem 0; }
.term-badge--best-value { background: #2fbf71; color: #0d1520; }

/* ==== Product page: readable paragraphs and lists ==== */
.product-detail-layout .card p { line-height: 1.7; }
.product-detail-layout .card p:last-child { margin-bottom: 0; }
.product-detail-layout .card h2 { margin-bottom: 0.85rem; }
.product-detail-layout .card h3 { font-size: 1.05rem; margin: 1.35rem 0 0.6rem; }
.product-detail-layout .product-state-examples,
.product-detail-layout .product-state-notes { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.product-detail-layout .product-state-examples li,
.product-detail-layout .product-state-notes li { position: relative; padding-left: 1.35rem; line-height: 1.6; margin: 0; }
.product-detail-layout .product-state-examples li::before,
.product-detail-layout .product-state-notes li::before { content: ""; position: absolute; left: 0.2rem; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.product-detail-layout .product-state-faq dt { margin-top: 1rem; }
.product-detail-layout .product-state-faq dd { line-height: 1.65; }

/* ==== Study material: what every purchase includes ==== */
.products-terms { list-style: none; margin: -0.75rem 0 2.75rem; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0.5rem 2.5rem; font-size: 0.875rem; color: var(--text-muted); }
.products-terms li { display: flex; gap: 0.45rem; align-items: flex-start; line-height: 1.4; }
.products-terms-icon { color: var(--success); font-weight: 800; }
@media (max-width: 860px) { .products-terms { grid-template-columns: 1fr; justify-content: start; gap: 0.5rem; padding-left: 0.25rem; } }

/* ==== Support page ==== */
.support-page { max-width: 1080px; }
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.support-form-card h2 { margin-bottom: 1rem; }
.support-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.support-form label { display: block; margin: 0.9rem 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
.support-form label:first-of-type { margin-top: 0; }
.support-form input, .support-form select, .support-form textarea { width: 100%; }
.support-form textarea { resize: vertical; min-height: 9rem; }
.support-optional { font-weight: 400; color: var(--text-muted); }
.support-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.support-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.support-submit .form-hint { margin: 0; }
.support-errors { margin: 0; padding-left: 1.1rem; }
.support-errors li { margin: 0.15rem 0; }
.support-sent { margin-bottom: 1rem; }
.support-aside { display: flex; flex-direction: column; gap: 1rem; }
.support-aside h3 { margin-bottom: 0.5rem; }
.support-aside p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.support-links { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9375rem; }
.support-links a { color: var(--orange-dk); font-weight: 600; }
.support-admin-body { white-space: pre-wrap; font-family: inherit; font-size: 0.95rem; line-height: 1.6; background: var(--surface-2); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0; }

.admin-inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) { .support-layout { grid-template-columns: 1fr; } .support-row { grid-template-columns: 1fr; gap: 0; } }

/* ==== FAQ page ==== */
.faq-page { max-width: 880px; }
.faq-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.25rem; }
.faq-toc a { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.85rem; border: 1px solid var(--border-lt); border-radius: 999px; background: var(--surface); color: var(--text); }
.faq-toc a:hover { border-color: var(--orange); color: var(--orange); }
.faq-section { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.faq-section h2 { font-size: 1.3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--orange); display: inline-block; }
.faq-page .faq-item p { line-height: 1.65; }
.faq-more { text-align: center; padding: 2rem 1.5rem; }
.faq-more h3 { margin-bottom: 0.4rem; }
.faq-more p { color: var(--text-muted); margin-bottom: 1.25rem; }
.faq-more .btn { margin: 0.25rem; }

/* ==== "In cart" state links to the cart ==== */
a.add-to-cart.is-in-cart { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
a.add-to-cart.is-in-cart:hover { border-color: var(--orange); color: var(--text); }
.in-cart-go { font-size: 0.78em; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.04em; }
.in-cart-go::after { content: " \2192"; }
.btn-success-outline .in-cart-go { color: inherit; margin-left: 0.35rem; }
a.btn-success-outline { cursor: pointer; }
a.btn-success-outline:hover { background-color: var(--success); color: #fff; }

/* ============================================================
   Study program (dashboard + module pages)
   Layout: compact page header -> overview card (readiness + next step)
   -> numbered module rows grouped by type. Module page: sticky tabs,
   panel headers, quiz launcher with one card per mode.
   ============================================================ */
:root { --ready: #15803d; --ready-bg: rgba(21,128,61,0.12); --studying: var(--orange-dk); --studying-bg: rgba(217,98,0,0.12); }
:root[data-theme="auto"] { --ready: #4ade80; }
.page-header--compact { padding: 1.75rem 0 1.5rem; margin-bottom: 1.75rem; }
.page-header--compact h1 { font-size: 1.85rem; margin-bottom: 0.35rem; }
.page-header--compact .section-eyebrow { margin-bottom: 0.4rem; display: inline-block; }

/* Icons: one small glyph per content type, reused on rows, legend and tabs */
.program-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 5px; font-size: 0.72rem; font-weight: 800; line-height: 1; color: #fff; flex-shrink: 0; vertical-align: middle; }
.program-ico--guide  { background: #2f6fdb; }
.program-ico--guide::before  { content: "G"; }
.program-ico--review { background: #7c3aed; }
.program-ico--review::before { content: "R"; }
.program-ico--quiz   { background: var(--orange); }
.program-ico--quiz::before   { content: "Q"; }
.program-ico--qa     { background: #0e9f8a; }
.program-ico--qa::before     { content: "A"; }
.program-ico--audio  { background: #db2f7a; }
.program-ico--audio::before  { content: "\266B"; font-size: 0.8rem; }

/* ---- Dashboard ---- */
.program { max-width: 1040px; }
.program-empty { text-align: center; padding: 3rem 1.5rem; }
.program-empty h2 { margin-bottom: 0.4rem; }
.program-empty p { color: var(--text-muted); margin-bottom: 1.25rem; }
.program-state { margin-bottom: 3rem; }

.program-overview { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: stretch; margin-bottom: 2rem; }
.program-overview-main { background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.program-overview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.program-overview-head h2 { font-size: 1.3rem; margin: 0; }
.program-access { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; }
.program-access em { font-style: normal; color: var(--orange); font-weight: 600; }
.program-readiness-text { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.45rem; }
.program-readiness-text strong { color: var(--text); }
.program-readiness-pct { font-weight: 800; color: var(--text); }
.program-readiness-bar { height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; border: 1px solid var(--border-lt); }
.program-readiness-fill { height: 100%; background: var(--orange); border-radius: 6px; transition: width 0.4s ease; }
.program-readiness.is-ready .program-readiness-fill { background: var(--ready); }
.program-readiness.is-ready .program-readiness-text strong { color: var(--ready); }
.program-legend { list-style: none; margin: auto 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--border-lt); display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8rem; color: var(--text-muted); }
.program-legend li { display: flex; align-items: center; gap: 0.4rem; }

.program-next { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.35rem 1.5rem; border-radius: var(--radius-lg); background: var(--navy); color: #fff; text-decoration: none; border: 1px solid transparent; transition: transform 0.12s, box-shadow 0.12s; }
.program-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.program-next-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-lt); }
.program-next-title { font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.program-next-sub { font-size: 0.85rem; color: rgba(255,255,255,0.72); margin-bottom: 0.75rem; }
.program-next .btn { margin-top: auto; align-self: flex-start; }

.program-group { margin-bottom: 1.75rem; }
.program-group-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.6rem 0.25rem; }
.program-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.program-row-link { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 170px 1.25rem; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem 0.9rem 0.9rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.program-row-link:hover { border-color: var(--orange); box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); }
.program-row.is-current .program-row-link { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
.program-row-num { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-lt); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; color: var(--text-muted); }
.program-row--ready .program-row-num { background: var(--ready-bg); border-color: var(--ready); color: var(--ready); }
.program-row--studying .program-row-num { background: var(--studying-bg); border-color: var(--orange); color: var(--orange); }
.program-row-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.program-row-title { font-weight: 700; font-size: 1.02rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.program-row-current { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-dk); }
.program-row-focus { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
.program-row-has { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; }
.program-row-count { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.35rem; }
.program-row-status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.program-pill { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.22rem 0.6rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border-lt); color: var(--text-muted); white-space: nowrap; }
.program-pill--ready { background: var(--ready-bg); border-color: transparent; color: var(--ready); }
.program-pill--studying { background: var(--studying-bg); border-color: transparent; color: var(--orange); }
.program-pill--info { color: var(--text-muted); }
.program-row-meta { font-size: 0.75rem; color: var(--text-muted); }
.program-row-bar { display: block; width: 100%; max-width: 150px; height: 4px; border-radius: 2px; background: var(--bg); overflow: hidden; }
.program-row-bar span { display: block; height: 100%; background: var(--orange); }
.program-row-go { color: var(--text-muted); font-size: 1.1rem; text-align: right; transition: color 0.12s, transform 0.12s; }
.program-row-link:hover .program-row-go { color: var(--orange); transform: translateX(3px); }

.program-expired { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem; opacity: 0.9; }
.program-expired h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.program-expired p { color: var(--text-muted); margin: 0; }
.program-more { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border-lt); }

@media (max-width: 860px) {
  .program-overview { grid-template-columns: 1fr; }
  .program-row-link { grid-template-columns: 2rem minmax(0, 1fr) 1rem; grid-template-areas: "num body go" "num status go"; row-gap: 0.5rem; }
  .program-row-num { grid-area: num; align-self: start; }
  .program-row-body { grid-area: body; }
  .program-row-status { grid-area: status; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
  .program-row-bar { max-width: 90px; }
  .program-row-go { grid-area: go; }
}

/* ---- Module page ---- */
.module-layout { max-width: 960px; }
.module-back { display: block; width: max-content; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.9rem; text-decoration: none; }
.module-back:hover { color: var(--orange); }
.module-intro-blurb { margin-bottom: 1.5rem; line-height: 1.7; }
.module-intro-blurb p { margin: 0 0 .75rem; }
.module-intro-blurb p:last-child { margin-bottom: 0; }

.module-tabs { position: sticky; top: var(--nav-h); z-index: 20; display: flex; gap: 0.35rem; margin: 0 0 1.5rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); overflow-x: auto; scrollbar-width: none; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.module-tabs::-webkit-scrollbar { display: none; }
.mod-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: none; border: 0; border-radius: var(--radius); padding: 0.6rem 0.9rem; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.mod-tab:hover { background: var(--bg); color: var(--text); }
.mod-tab--active:hover { background: var(--navy); color: #fff; }
.mod-tab--active { background: var(--navy); color: #fff; }
.mod-tab-count { font-size: 0.7rem; font-weight: 800; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
.mod-tab--active .mod-tab-count { background: rgba(255,255,255,0.18); color: #fff; }
.mod-panel { margin-bottom: 2rem; }

.panel-head { margin-bottom: 1.25rem; }
.panel-head h2 { font-size: 1.35rem; margin: 0 0 0.3rem; }
.panel-head p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 62rem; margin: 0; }
.panel-head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.panel-head--row .btn { flex-shrink: 0; }

/* Quiz launcher */
.quiz-launcher { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; align-items: start; }
.quiz-modes { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.quiz-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name btn" "desc btn"; column-gap: 1rem; row-gap: 0.15rem; align-items: center; width: 100%; text-align: left; padding: 0.95rem 1.1rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); cursor: pointer; font-family: inherit; color: var(--text); transition: border-color 0.12s, box-shadow 0.12s; }
.quiz-mode:hover { border-color: var(--orange); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.quiz-mode-name { grid-area: name; font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.quiz-mode-desc { grid-area: desc; font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
.quiz-mode .btn { grid-area: btn; }
.lesson-outline { background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: 1rem 1.25rem; }
.lesson-outline-label { font-weight: 800; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.lesson-outline ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.3rem 1rem; }
.lesson-outline li { font-size: 0.875rem; color: var(--text); padding-left: 1rem; position: relative; }
.lesson-outline li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.quiz-launcher-side { background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; position: sticky; top: calc(var(--nav-h) + 4.5rem); }
.quiz-launcher-side h3 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.75rem; }
.quiz-stats-empty { color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; margin: 0; }
.quiz-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
.quiz-stat { background: var(--bg); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: 0.65rem 0.5rem; text-align: center; min-width: 0; }
.quiz-stat-num { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.quiz-stat-num--ready { color: var(--ready); }
.quiz-stat-num--studying { color: var(--orange); }
.quiz-stat-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
.quiz-stats-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.quiz-trend-pt.is-pass { color: var(--ready); font-weight: 700; }
.quiz-loading { color: var(--text-muted); padding: 2.5rem 0; font-style: italic; }
.quiz-error { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: .5rem; }

/* Quiz session header (restart / back) */
.quiz-head { margin-bottom: 1rem; }
.quiz-head-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.quiz-mode-badge { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--studying-bg); color: var(--orange-dk); }
.quiz-mode-badge--exam { background: rgba(220,60,60,0.15); color: var(--danger); }
.quiz-mode-badge--missed { background: rgba(80,140,255,0.15); color: #4f8cff; }
.quiz-head-actions { display: flex; gap: 0.5rem; }
.quiz-keys { font-size: 0.75rem; color: var(--text-muted); margin: 0.75rem 0 0; }
.quiz-empty { text-align: center; padding: 1.5rem 0; }
.quiz-empty p { margin-bottom: 1rem; }
.quiz-missed-ans--right { color: var(--ready); }

/* Prev / next module */
.module-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-lt); }
.module-nav-link { display: inline-flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; justify-self: start; text-align: left; }
.module-nav-link--next { justify-self: end; }
.module-nav-link:hover { border-color: var(--orange); }
.module-nav-link small { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-dk); }
.module-nav-link--next { text-align: right; align-items: flex-end; }
.module-nav-all { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.module-nav-all:hover { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .quiz-launcher { grid-template-columns: 1fr; }
  .quiz-launcher-side { position: static; }
  .quiz-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .module-tabs { flex-wrap: wrap; overflow: visible; position: static; }
  .mod-tab { padding: 0.55rem 0.75rem; font-size: 0.85rem; flex: 1 1 auto; }
  .module-tabs { border-radius: var(--radius); }
  .module-nav { grid-template-columns: 1fr; }
  .module-nav-all { text-align: center; order: 3; }
  .module-nav-link--next { text-align: left; align-items: flex-start; }
}
@media (max-width: 480px) {
  .quiz-stats-grid { grid-template-columns: 1fr 1fr; }
  .quiz-mode { grid-template-columns: 1fr; grid-template-areas: "name" "desc" "btn"; }
  .quiz-mode .btn { justify-self: start; margin-top: 0.4rem; }
}

/* ==== Study guide PDF viewer (PDF.js, fits the screen width on phones) ==== */
.pdf-viewer { position: relative; border: 1px solid var(--border-lt); border-radius: var(--radius); background: #525659; overflow: clip; }
.pdf-viewer--companion { max-height: 70vh; overflow-y: auto; }
.pdfv-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; background: var(--surface); border-bottom: 1px solid var(--border-lt); font-size: 0.8rem; color: var(--text-muted); }
.pdf-viewer:not(.pdf-viewer--companion) .pdfv-bar { top: calc(var(--nav-h) + 4.4rem); }
.pdfv-page { font-weight: 700; color: var(--text); margin-right: auto; white-space: nowrap; }
.pdfv-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.55rem; border: 1px solid var(--border-lt); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-weight: 800; font-size: 0.95rem; line-height: 1; cursor: pointer; text-decoration: none; }
.pdfv-btn:hover { border-color: var(--orange); color: var(--orange); }
.pdfv-btn--text { font-size: 0.78rem; font-weight: 700; }
.pdfv-status { font-size: 0.78rem; color: var(--text-muted); margin-left: 0.5rem; }
.pdfv-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.pdfv-pagebox { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); max-width: 100%; }
.pdfv-pagebox canvas { display: block; max-width: 100%; }
.pdfv-fallback { padding: 1.5rem; color: #fff; text-align: center; }
.pdfv-fallback a { color: var(--orange); font-weight: 600; }
@media (max-width: 760px) { .pdf-viewer:not(.pdf-viewer--companion) .pdfv-bar { top: var(--nav-h); } .pdfv-pages { gap: 6px; padding: 6px 0; } }

/* ============================================================
   Study guide (HTML converted from the CDL manual)
   Reading layout: section jump-list, one card per manual section,
   numbered sub-headings, run-in bold leads, nested bullets, figures,
   note callouts, and the "Test Your Knowledge" review box.
   ============================================================ */

.study-section { background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem 1.25rem; margin-bottom: 1.25rem; scroll-margin-top: calc(var(--nav-h) + 5rem); }
.study-section h3 { display: flex; align-items: center; gap: 0.75rem; font-size: 1.3rem; line-height: 1.25; margin: 0 0 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border-lt); }
.study-section h3 .qr-num { width: 2rem; height: 2rem; min-width: 2rem; font-size: 0.85rem; }

/* Body text */
.study-body { font-size: 1rem; line-height: 1.75; color: var(--text); max-width: 46rem; }
.study-body p { margin: 0 0 1rem; }
.study-body p:last-child { margin-bottom: 0; }
.study-body p > strong:first-child { color: var(--text); }
.study-body em { color: var(--text-muted); font-style: normal; font-size: .875rem; }

/* Sub-headings: "2.1.1 – Why Inspect" */
.study-body h4 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--text); margin: 1.75rem 0 0.6rem; padding-left: 0.75rem; border-left: 3px solid var(--orange); }
.study-body h4:first-child { margin-top: 0.25rem; }
.study-body h4 + h4 { margin-top: 0.75rem; }

/* Lists */
.study-body ul, .study-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.study-body ul { list-style: none; padding-left: 1.35rem; }
.study-body ul > li { position: relative; margin-bottom: 0.45rem; line-height: 1.6; }
.study-body ul > li::before { content: ""; position: absolute; left: -1.05rem; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.study-body ul ul { margin: 0.4rem 0 0.25rem; padding-left: 1.3rem; }
.study-body ul ul > li { margin-bottom: 0.3rem; font-size: 0.95rem; }
.study-body ul ul > li::before { width: 6px; height: 6px; background: transparent; border: 2px solid var(--orange); box-sizing: border-box; top: 0.62em; }
.study-body ol { list-style: none; counter-reset: study-q; padding-left: 2.1rem; }
.study-body ol > li { position: relative; counter-increment: study-q; margin-bottom: 0.5rem; line-height: 1.6; }
.study-body ol > li::before { content: counter(study-q); position: absolute; left: -2.1rem; top: 0.15em; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-lt); font-size: 0.72rem; font-weight: 800; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; }
.study-body li > p { margin: 0; }

/* Notes and warnings */
.study-body .study-note { padding: 0.75rem 1rem; background: var(--bg); border-left: 3px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.95rem; }

/* Figures (cropped from the manual) */
.study-fig { margin: 1.25rem 0 1.5rem; padding: 0.85rem; background: #fff; border: 1px solid var(--border-lt); border-radius: var(--radius); text-align: center; }
.study-fig img { display: block; max-width: 100%; max-height: 640px; width: auto; height: auto; margin: 0 auto; }
.study-fig figcaption { margin-top: 0.6rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #475569; }

/* Test Your Knowledge review box (end of each manual subsection) */
.study-review { margin: 1.75rem 0 0.5rem; padding: 1.1rem 1.25rem 0.9rem; background: color-mix(in srgb, var(--orange) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); border-radius: var(--radius); }
.study-review-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin: 0 0 0.15rem; }
.study-review h4 { margin: 0 0 0.75rem; padding: 0; border: 0; font-size: 1.15rem; }
.study-review ol { margin-bottom: 0.75rem; }
.study-review p:last-child { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Tables (hand-written guides) */
.study-body table, .study-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0 0 1rem; }
.study-body th, .study-body td, .study-table th, .study-table td { text-align: left; padding: 0.45rem 0.65rem; border: 1px solid var(--border-lt); vertical-align: top; }
.study-body th, .study-table th { background: var(--bg); font-weight: 700; }
.study-src { font-size: .8125rem; color: var(--text-muted); border-top: 1px solid var(--border-lt); padding-top: .625rem; margin-top: 1rem !important; margin-bottom: 0 !important; }

@media (max-width: 640px) {
  .study-section { padding: 1.1rem 1rem 1rem; border-radius: var(--radius); }
  .study-section h3 { font-size: 1.15rem; }
  .study-body { font-size: 0.975rem; line-height: 1.7; }
  .study-body h4 { font-size: 1rem; }
  .study-fig { padding: 0.5rem; }
  .study-fig img { max-height: none; }
  .study-review { padding: 0.9rem 0.9rem 0.75rem; }
  .study-body table, .study-table { display: block; overflow-x: auto; }
}
.study-body h4.study-covers { border: 0; padding: 0; margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.study-body ul.study-covers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.25rem 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-lt); }
.study-body ul.study-covers-list > li { margin-bottom: 0.15rem; font-size: 0.925rem; color: var(--text-muted); }

/* Study guide reader: one section at a time */
.study-nav { position: sticky; top: calc(var(--nav-h) + 4.4rem); z-index: 15; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; margin-bottom: 0.35rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.study-nav .btn { flex-shrink: 0; white-space: nowrap; }
.study-nav .btn:disabled { opacity: 0.35; }
.study-nav-pick { flex: 1 1 auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin: 0; }
.study-nav-pos { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.study-nav-select { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0.45rem 0.6rem; font-size: 0.9rem; font-weight: 600; border: 1px solid var(--border-lt); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.study-progress { height: 4px; border-radius: 2px; background: var(--bg); margin: 0 0.25rem 1.25rem; overflow: hidden; }
.study-progress-fill { height: 100%; width: 0; background: var(--orange); transition: width 0.3s ease; }
.study-section-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-lt); }
.study-section-foot .btn:disabled { opacity: 0.35; }
.study-reader.is-all .study-section-foot { display: none; }
.study-all-toggle { text-align: center; margin: 0.5rem 0 0; }
@media (max-width: 760px) {
  .study-nav { top: var(--nav-h); flex-wrap: wrap; }
  .study-nav-pick { order: -1; flex-basis: 100%; }
  .study-nav .btn { flex: 1 1 0; }
  .study-section-foot { flex-direction: column-reverse; align-items: stretch; }
  .study-section-foot .btn { width: 100%; text-align: center; }
}
.quiz-link { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.quiz-link:hover { color: var(--orange); }
.study-finish { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; padding: 0.5rem 0; }
.study-finish p { margin: 0; font-weight: 600; }
.study-section-foot:has(.study-finish) { flex-direction: column; align-items: stretch; }
.study-section-foot:has(.study-finish) .study-nav-prev { align-self: flex-start; }

/* ==== How it works (program tour) ==== */
.tour { max-width: 1120px; }
.tour-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center; padding: 2.5rem 0; border-bottom: 1px solid var(--border-lt); }
.tour-step--flip .tour-text { order: 2; }
.tour-step--flip .tour-shot { order: 1; }
.tour-head { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 0.75rem; }
.tour-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; margin: 0; }
.tour-text h2 { font-size: 1.5rem; line-height: 1.25; margin: 0; }
.tour-text p { color: var(--text-muted); line-height: 1.65; margin: 0 0 0.9rem; }
.tour-points { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tour-points li { position: relative; padding-left: 1.4rem; line-height: 1.55; font-size: 0.95rem; }
.tour-points li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.tour-note { font-size: 0.9rem; }
.tour-shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-lt); box-shadow: 0 18px 44px rgba(0,0,0,0.35); background: var(--bg); }
.tour-shot img { display: block; width: 100%; height: auto; }
.tour-shot--pair { display: grid; grid-template-columns: 1fr; gap: 0; border: 0; box-shadow: none; background: none; }
.tour-shot--pair img { border: 1px solid var(--border-lt); border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(0,0,0,0.35); }
.tour-shot--pair img + img { margin-top: 1rem; }
.tour-shot--phones { display: flex; gap: 1.25rem; justify-content: center; border: 0; box-shadow: none; background: none; overflow: visible; }
.tour-shot--phones img { width: 46%; max-width: 260px; border: 6px solid #0b1220; border-radius: 22px; box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
.tour-summary { padding: 2.5rem 0 0; }
.tour-summary-card { padding: 2rem 2.25rem; }
.tour-summary-card h2 { margin-bottom: 1rem; }
.tour-summary-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem 1.5rem; }
.tour-summary-list li { position: relative; padding-left: 1.4rem; line-height: 1.5; }
.tour-summary-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.tour-summary-stats { color: var(--text-muted); margin: 0 0 1.25rem; }
.tour-summary-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.hero-tour-link { margin-top: 1rem; font-size: 0.95rem; }
.hero-tour-link a { color: rgba(255,255,255,0.85); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero-tour-link a:hover { color: #fff; }
@media (max-width: 860px) {
  .tour-step { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
  .tour-step--flip .tour-text { order: 1; }
  .tour-step--flip .tour-shot { order: 2; }
  .tour-shot--phones img { width: 48%; }
  .tour-summary-card { padding: 1.5rem 1.25rem; }
  .tour-summary-actions .btn { width: 100%; text-align: center; }
}

/* ============================================================
   Nav: Study Material dropdown (desktop) and accordion (mobile)
   ============================================================ */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { padding-right: 0.35rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.nav-dd-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; align-self: stretch; padding: 0;
  background: none; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: rgba(255,255,255,0.7); cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.nav-dd-toggle svg { transition: transform 0.15s; }
.nav-item:hover > a, .nav-item:hover .nav-dd-toggle, .nav-item.is-open > a, .nav-item.is-open .nav-dd-toggle,
.nav-dd-toggle:focus-visible { color: var(--text-invert); background-color: rgba(255,255,255,0.12); }
.nav-item.is-open .nav-dd-toggle svg { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 60;
  min-width: 34rem; padding: 1rem 1.1rem 0.75rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-lt); border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(12,35,64,0.18);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.14s, transform 0.14s, visibility 0s linear 0.14s;
}
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; } /* hover bridge */
.nav-item:hover .nav-dropdown, .nav-item.is-open .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.nav-dd-heading { margin: 0 0 0.3rem; padding: 0 0.6rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.primary-nav .nav-dd-link {
  display: block; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.primary-nav .nav-dd-link:hover, .primary-nav .nav-dd-link:focus-visible { background: var(--surface-2); color: var(--orange-dk); text-decoration: underline; text-underline-offset: 2px; }
.primary-nav .nav-dd-all {
  display: block; margin: 0.6rem -1.1rem 0; padding: 0.7rem 1.7rem 0.25rem;
  border-top: 1px solid var(--border-lt);
  font-size: 0.85rem; font-weight: 700; color: var(--orange-dk); text-decoration: none;
}
.primary-nav .nav-dd-all:hover { text-decoration: underline; }

/* Mobile: Study Material row splits into a link and an expand button */
.mnav-link-split { padding-right: 0; }
.mnav-link-split > a { flex: 1; display: flex; align-items: center; min-height: 56px; color: inherit; text-decoration: none; }
.mnav-expand {
  display: flex; align-items: center; justify-content: center;
  width: 56px; min-height: 56px; padding: 0;
  background: none; border: 0; border-left: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55); cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.08);
}
.mnav-expand svg { transition: transform 0.15s; }
.mnav-group-open .mnav-expand { color: var(--orange); }
.mnav-group-open .mnav-expand svg { transform: rotate(180deg); }
.mnav-sub { background: rgba(0,0,0,0.22); padding: 0.4rem 0 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mnav-sub-heading { margin: 0.6rem 0 0.15rem; padding: 0 1.25rem 0 2rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.mnav-sub-link {
  display: flex; align-items: center; min-height: 46px; padding: 0 1.25rem 0 2rem;
  background: rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92); font-size: 0.95rem; text-decoration: none;
  border-left: 3px solid transparent;
}
.mnav-sub-link:last-of-type { border-bottom: 0; }
.mnav-sub-link:hover, .mnav-sub-link:active, .mnav-sub-link:focus-visible { background: rgba(255,255,255,0.20); color: #fff; text-decoration: none; }
.mnav-sub-link.mnav-sub-active { color: #fff; font-weight: 700; border-left-color: var(--orange); }
.mnav-sub-all { margin-top: 0.4rem; color: var(--orange-on-navy); font-weight: 700; } /* was var(--orange): 2.0:1 on the navy sub-panel */
.primary-nav .nav-dd-link.is-current { color: var(--orange); font-weight: 700; }
@media (min-width: 1080px) {
  /* The dropdown hangs below the bar; the horizontal-scroll guard is only needed for the mobile drawer. */
  .site-header, .nav-inner { overflow: visible; }
}

/* ============================================================
   Free practice test (pages/free-practice-test.php)
   ============================================================ */
/* stretch, not start: the sidebar runs to 802px while the launcher is 260px, so aligning to the
   top left the quiz column as a short slab with a half-empty column beside it. */
.demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: stretch; }
.demo-main { display: flex; flex-direction: column; min-width: 0; }
.demo-main-title { font-size: 1.125rem; margin: 0 0 0.75rem; color: var(--navy); }
/* The launcher grows to the height of the row, but its content stays at the top: with the intro,
   the study-material note and the bullets there is enough to fill it, and vertically centring a
   block that long just pushes the start button away from where the eye lands. */
.demo-main > .demo-launch { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.demo-main > #demo-quiz:not([hidden]) { flex: 1 1 auto; }
.demo-launch { padding: 1.75rem; }
.demo-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.demo-facts li { position: relative; padding-left: 1.6rem; margin-bottom: 0.65rem; line-height: 1.5; }
.demo-facts li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 800; }
.demo-launch-note { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.demo-side { display: flex; flex-direction: column; gap: 1.25rem; }
.demo-side .card { padding: 1.25rem; }
.demo-side-label { color: var(--orange-dk); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.5rem; }
.demo-side p { font-size: 0.925rem; line-height: 1.55; }
.demo-audio .audio-player { width: 100%; margin: 0.75rem 0 0.5rem; }
.demo-audio-note { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.demo-side-list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.demo-side-list li { position: relative; padding-left: 1.3rem; margin-bottom: 0.45rem; font-size: 0.9rem; line-height: 1.45; }
.demo-side-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
/* The label carries the state name, so "See the District of Columbia Complete Study Material"
   needs 318px in a 258px column. .btn is nowrap by default, which pushed the text out through
   both sides of the border. Full width here means it has to be allowed to wrap. */
.demo-side-card .btn {
  width: 100%;
  white-space: normal;
  text-wrap: balance;        /* splits two lines evenly rather than leaving one orphan word */
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  line-height: 1.35;
}
.demo-side-links { margin: 0.85rem 0 0; font-size: 0.85rem; text-align: center; }

.demo-cta { padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; border: 2px solid var(--orange); max-width: 680px; }
.demo-cta-lead { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.1rem; }
.demo-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.demo-email { padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; max-width: 680px; }
.demo-email-desc { margin: 0 0 0.85rem; font-size: 0.925rem; color: var(--text-muted); }
.demo-email-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.demo-email-form input { flex: 1 1 220px; min-width: 0; padding: 0.7rem 0.9rem; font: inherit; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.demo-email-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.demo-email-msg { margin: 0.75rem 0 0; }

@media (max-width: 900px) {
  .demo-layout { grid-template-columns: 1fr; }
  .demo-side { order: 2; }
  .demo-launch { padding: 1.25rem; }
  .demo-launch .btn-lg { width: 100%; }
  .demo-cta { padding: 1.25rem; }
  .demo-cta-actions .btn { width: 100%; }
  .demo-email-form .btn { width: 100%; }
}

/* Free practice test entry points */
.hero-link-sep { color: rgba(255,255,255,0.4); margin: 0 0.4rem; }
.hero-tour-link .hero-free-test { color: #fff; }
.demo-banner { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; padding: 0.9rem 1.25rem; background: var(--surface); border: 1px solid var(--border-lt); border-left: 4px solid var(--orange); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s; }
.demo-banner:hover { text-decoration: none; box-shadow: var(--shadow-md); border-color: var(--orange); }
.demo-banner-tag { flex-shrink: 0; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-banner-text { flex: 1; font-size: 0.95rem; line-height: 1.45; }
.demo-banner-go { flex-shrink: 0; font-weight: 700; color: var(--orange-dk); white-space: nowrap; }
@media (max-width: 640px) {
  .demo-banner { flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem 1rem; }
  .demo-banner-text { flex-basis: 100%; }
  .demo-banner-go { margin-left: auto; }
}
.primary-nav .nav-dd-free { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem -1.1rem 0; padding: 0.7rem 1.7rem 0.4rem; border-top: 1px solid var(--border-lt); font-size: 0.85rem; font-weight: 700; color: var(--text); text-decoration: none; }
.primary-nav .nav-dd-free:hover { color: var(--orange); }
.nav-dd-free-tag { padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.primary-nav .nav-dd-free + .nav-dd-all { margin-top: 0; padding-top: 0.35rem; border-top: 0; }
.mnav-sub-free { margin-top: 0.4rem; font-weight: 700; color: #fff; }

/* Program nav (signed-in students with active material) */
.nav-dropdown--modules { min-width: 19rem; }
.nav-dropdown--help { min-width: 14rem; }
.nav-dd-ready { float: right; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ready); }
.primary-nav .nav-dd-continue { display: block; margin: -0.25rem -0.5rem 0.75rem; padding: 0.7rem 0.85rem; border-radius: var(--radius); background: var(--surface-2); border-left: 3px solid var(--orange); text-decoration: none; color: var(--text); }
.primary-nav .nav-dd-continue:hover { text-decoration: none; background: color-mix(in srgb, var(--orange) 10%, var(--surface-2)); }
.nav-dd-continue-label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.nav-dd-continue-title { display: block; font-size: 0.9rem; font-weight: 700; margin-top: 0.15rem; }
.primary-nav .nav-dd-mod, .mnav-sub .nav-dd-mod { display: flex; align-items: center; gap: 0.6rem; }
.nav-dd-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--border); box-sizing: border-box; }
.nav-dd-mod--studying .nav-dd-dot { background: var(--orange); }
.nav-dd-mod--ready .nav-dd-dot { background: var(--ready); }
.nav-dd-mod--none .nav-dd-dot { background: transparent; border: 2px solid var(--border); }
.mnav-ready { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); font-size: 0.7rem; font-weight: 700; vertical-align: middle; }
.mnav-sub-continue { color: var(--orange-dk); font-weight: 700; }
.mnav-sub .nav-dd-mod { gap: 0.7rem; }
.mnav-sub .nav-dd-dot { background: rgba(255,255,255,0.25); }
.mnav-sub .nav-dd-mod--studying .nav-dd-dot { background: var(--orange); }
.mnav-sub .nav-dd-mod--ready .nav-dd-dot { background: #4ade80; }
.mnav-sub .nav-dd-mod--none .nav-dd-dot { background: transparent; border-color: rgba(255,255,255,0.25); }
.nav-logout { color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; }
.nav-logout:hover { color: #fff; background: rgba(255,255,255,0.12); text-decoration: none; }

/* "Not in your program yet": owned-row look, static (no hover lift), price + buttons instead of status */
.program-more .program-list { gap: 0.5rem; }.program-row--locked .program-row-num { border-style: dashed; font-size: 1.1rem; }.program-row-actions .btn { white-space: nowrap; }
.program-row-actions .in-cart-go { display: none; }
@media (max-width: 860px) {
  .program-row-static { grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "num body" "num status"; }
  .program-row-buy { width: 100%; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
  .program-row-price { text-align: left; min-width: 0; }
  .program-row-actions { justify-content: flex-start; }
}

/* Admin support: reply thread + form; account page: ticket list */
.admin-inline-form--tight { display: inline-flex; margin-left: 0.5rem; vertical-align: middle; }
.admin-inline-form--tight input[type="text"] { padding: 0.3rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.support-reply { margin: 0 0 0.5rem 1.5rem; }
.support-reply-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.support-reply-body { margin: 0 0 0.75rem; border-left: 3px solid var(--orange); }
.support-reply-form { margin: 1.25rem 0; }
.support-reply-form label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.support-reply-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); margin-bottom: 0.6rem; }
.support-reply-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }

.account-tickets { list-style: none; margin: 0; padding: 0; }
.account-ticket { border: 1px solid var(--border-lt); border-radius: var(--radius); margin-bottom: 0.6rem; background: var(--surface); }
.account-ticket summary { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.8rem 1rem; cursor: pointer; list-style: none; }
.account-ticket summary::-webkit-details-marker { display: none; }
.account-ticket summary code { font-size: 0.85rem; }
.account-ticket-topic { flex: 1; font-weight: 600; min-width: 8rem; }
.account-ticket-date { font-size: 0.8rem; color: var(--text-muted); }
.account-ticket-body { padding: 0 1rem 1rem; }
.account-ticket-msg { white-space: pre-wrap; font-family: inherit; font-size: 0.925rem; line-height: 1.6; background: var(--surface-2); border-radius: var(--radius); padding: 0.85rem 1rem; margin: 0 0 0.75rem; }
.account-ticket-msg--reply { border-left: 3px solid var(--orange); margin-left: 1.25rem; }
.account-ticket-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0.75rem 0 0.3rem; }
.account-ticket-label--reply { margin-left: 1.25rem; color: var(--orange); }
.account-ticket-wait { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Home: feature grid intro; hero stats two-up on phones */
/* "Why BeginCDL": two short paragraphs under the section heading, before the feature cards */
.section-why { margin: -0.25rem 0 2.5rem; padding: 1.5rem 1.75rem; background: var(--surface); border: 1px solid var(--border-lt); border-left: 4px solid var(--orange); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.section-why p { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.8; color: var(--text); }
.section-why p:last-child { margin-bottom: 0; }
.brand-inline { font-weight: 800; white-space: nowrap; }
.brand-inline-mark { font-size: 1em; padding: 0.05em 0.3em; margin-right: 0.1em; vertical-align: 0; border-radius: 0.18em; line-height: 1.15; }
@media (max-width: 640px) { .section-why { margin-bottom: 2rem; padding: 1.1rem 1.15rem; } .section-why p { font-size: 1.0625rem; line-height: 1.7; } }
@media (max-width: 639px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin-top: 2.25rem; }
}

/* Email verification screen */
.verify-tips { list-style: none; margin: 1rem 0 1.25rem; padding: 0; }
.verify-tips li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; }
.verify-tips li::before { content: ""; position: absolute; left: 0.2rem; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.verify-resend { padding-top: 1rem; border-top: 1px solid var(--border-lt); }
.form-success { padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--success-bg); border: 1px solid var(--success); color: var(--text); }

/* Registration form: two-column names, per-field errors */
.form-card--register { max-width: 460px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.875rem; }
.form-card input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(185,28,28,0.12); }
.field-error { margin: 0.3rem 0 0; font-size: 0.8125rem; color: var(--danger); }
.field-error + .form-hint { margin-top: 0.2rem; }
.form-fineprint { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--text-muted); text-align: center; line-height: 1.5; }
@media (max-width: 420px) { .form-2col { grid-template-columns: 1fr; gap: 0; } }
.form-intro { margin: -0.75rem 0 1.25rem; color: var(--text-muted); font-size: 0.925rem; }
.form-h1-mark { font-size: 0.78em; padding: 0.06em 0.3em; margin-right: 0.1em; vertical-align: 0.06em; letter-spacing: 0.02em; border-radius: 0.14em; }
.hero-h1-mark { font-size: 0.78em; padding: 0.06em 0.3em; margin-right: 0.1em; vertical-align: 0.06em; letter-spacing: 0.02em; border-radius: 0.14em; }
/* "yes" / "no" in the selector intro, styled like the answer buttons */
.sel-word { display: inline-block; padding: 0 0.45em; border: 2px solid; border-radius: var(--radius-sm); font-weight: 700; line-height: 1.35; }
.sel-word--yes { border-color: var(--success); }
.sel-word--no { border-color: var(--danger); }

/* Feature rows: card text beside a program screenshot, alternating sides */
.feature-rows { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: stretch; }
.feature-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-row--flip .feature-card { order: 2; }
.feature-row--flip .feature-shot { order: 1; }
.feature-row .feature-card { justify-content: center; }
.feature-row .feature-card:hover { transform: none; }
.feature-shot { margin: 0; position: relative; height: 340px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-lt); box-shadow: var(--shadow-md); background: var(--bg); }
.feature-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feature-shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .feature-row--flip { grid-template-columns: 1fr; }
  .feature-row--flip .feature-card { order: 1; }
  .feature-row--flip .feature-shot { order: 2; }
  .feature-shot { height: 220px; }
}
/* Free test results on phones: nothing may force the column wider than the screen */
#demo-quiz { min-width: 0; }
#demo-quiz .quiz-result, #demo-quiz .demo-cta, #demo-quiz .demo-email, #demo-quiz .quiz-missed { max-width: 100%; }
.demo-cta-actions .btn { white-space: normal; text-align: center; line-height: 1.3; }
/* Header state picker: brief pulse when a page sends the user to it */
.state-picker.is-attention { animation: picker-pulse 0.8s ease-out 2; }
@keyframes picker-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 75%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--orange) 0%, transparent); } }
/* Nav: the Selector Tool link is the one free tool, so it gets a pill treatment */
.primary-nav a.nav-tool { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0.25rem; padding: 0.35rem 0.8rem; border: 1px solid color-mix(in srgb, var(--orange) 60%, transparent); border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--orange) 12%, transparent); font-weight: 600; }
.primary-nav a.nav-tool svg { color: var(--orange); }
.primary-nav a.nav-tool:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.primary-nav a.nav-tool:hover svg { color: #fff; }
.primary-nav a.nav-tool[aria-current="page"] { background: var(--orange); border-color: var(--orange); border-bottom: 1px solid var(--orange); }
.primary-nav a.nav-tool[aria-current="page"] svg { color: #fff; }
.mnav-tool { display: inline-flex; align-items: center; gap: 0.5rem; }
.mnav-tool svg { color: var(--orange); }

/* Weight tag: icon stays put, text wraps cleanly on phones */
.class-weight-tag { align-items: flex-start; line-height: 1.4; max-width: 100%; }
.class-weight-icon { flex-shrink: 0; line-height: 1.4; }
.class-weight-tag > span:last-child { min-width: 0; white-space: normal; }
@media (max-width: 640px) {
  .class-card-top { gap: 0.9rem; }
  .class-weight-tag { display: flex; width: fit-content; max-width: 100%; border-radius: var(--radius-sm); padding: 0.4em 0.7em; font-size: 0.8125rem; box-sizing: border-box; }
}
.class-eyebrow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.3rem; }
.class-eyebrow-row .section-eyebrow { margin: 0; }
.class-eyebrow-row .class-featured-badge { align-self: center; }

/* Scroll reveal: only active when .js-reveal is set (JS running, motion allowed). Transform/opacity only, so no layout shift. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.is-revealed { opacity: 1; transform: none; transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal, .js-reveal .reveal.is-revealed { opacity: 1; transform: none; transition: none; }
}

/* Buttons with a trailing arrow: gentle bob, stronger nudge on hover. Motion-safe. */
.btn-arrow { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .btn-arrow { animation: arrow-bob 1.8s ease-in-out infinite; }
  .btn:hover .btn-arrow, a:hover > .btn-arrow { animation: none; transform: translateX(4px); transition: transform 0.15s ease-out; }
}
@keyframes arrow-bob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.page-header-desc strong { color: var(--text); font-weight: 700; }

.primary-nav .nav-dd-free.is-current { color: var(--orange); }

/* ============================================================
   Conversion partials (begincdl-conversion-spec.md)
   ============================================================ */
.conv-price-line { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--text-muted); }
.conv-price-line span { color: var(--ready); font-weight: 800; }
.conv-price-line--hero { color: rgba(255,255,255,0.75); justify-content: center; }

.conv-compare { border-radius: var(--radius-lg); }
.conv-compare--card { padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border-lt); border-left: 4px solid var(--orange); margin-bottom: 1.75rem; }
.conv-compare--hero { padding: 1rem 1.25rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); max-width: 46rem; margin: 0 auto 1.5rem; }
.conv-compare-head { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.conv-compare--hero .conv-compare-head { color: #fff; }
.conv-compare-body { margin: 0; font-size: 0.975rem; line-height: 1.65; color: var(--text-muted); }
.conv-compare--hero .conv-compare-body { color: rgba(255,255,255,0.82); }
.conv-compare-line { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
/* In the cart it sits inside the last item card, under its "days of access" line. */
.conv-compare-line.cart-items-note { margin: 0.3rem 0 0; font-size: 0.8rem; line-height: 1.4; }

.conv-cof { position: relative; padding: 1.9rem 1.9rem 1.8rem; margin: 0 0 2.25rem; background: color-mix(in srgb, var(--orange) 6%, #fff); border: 2px solid color-mix(in srgb, var(--orange) 55%, transparent); border-radius: var(--radius-lg); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--orange) 70%, transparent); text-align: center; }
.conv-cof::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--orange); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.conv-cof-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem; margin: 0 0 0.7rem; font-size: 1.75rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.015em; color: #000; }
.conv-cof-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--orange); color: #fff; font-size: 1.2rem; line-height: 1; }
.conv-cof-body { max-width: 88ch; margin: 0 auto; font-size: 1.125rem; line-height: 1.7; color: #000; text-align: left; }
@media (max-width: 560px) {
  .conv-cof { padding: 1.5rem 1.15rem 1.4rem; }
  .conv-cof-head { font-size: 1.35rem; gap: 0.5rem; }
  .conv-cof-icon { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
  .conv-cof-body { font-size: 1.0625rem; }
}
/* Compact inside the sticky buy panel */
.add-to-cart-panel .conv-cof { padding: 1.1rem 1.1rem 1rem; text-align: left; }
.add-to-cart-panel .conv-cof-head { justify-content: flex-start; font-size: 1.1rem; gap: 0.5rem; }
.add-to-cart-panel .conv-cof-icon { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; }
.add-to-cart-panel .conv-cof-body { font-size: 0.9375rem; text-align: left; }.conv-card { display: flex; flex-direction: column; position: relative; padding: 1.5rem 1.4rem 1.35rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.conv-card--featured { border-color: var(--orange); border-width: 2px; box-shadow: var(--shadow-lg); }
.conv-card-badge { position: absolute; top: -0.7rem; left: 1.25rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--navy-lt); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.conv-card-badge--featured { background: var(--orange); }
.conv-card-name { margin: 0.2rem 0 0.75rem; font-size: 1.15rem; line-height: 1.3; }
.conv-card-name a { color: var(--text); text-decoration: none; }
.conv-card-name a:hover { color: var(--orange); }
.conv-card-pricing { display: flex; align-items: baseline; gap: 0.6rem; }
.conv-card-was { font-size: 1rem; color: var(--text-muted); }
.conv-card-price { font-size: 2rem; font-weight: 900; color: var(--text); line-height: 1; }
.conv-card-save { margin: 0.35rem 0 0; font-size: 0.875rem; font-weight: 700; color: var(--ready); }
.conv-card-who { margin: 0.85rem 0 0; font-size: 0.925rem; line-height: 1.6; color: var(--text-muted); }
.conv-card-includes { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.conv-card-includes li { position: relative; padding-left: 1.15rem; margin-bottom: 0.3rem; font-size: 0.875rem; color: var(--text-muted); }
.conv-card-includes li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.conv-card-cta { margin-top: auto; padding-top: 1rem; }
.conv-card .conv-price-line { order: 99; }
.conv-card-btn { white-space: normal; line-height: 1.3; }@media (max-width: 640px) {
  .conv-card { padding: 1.25rem 1.1rem 1.1rem; }

}

/* Package cards: spec pricing treatment (begincdl-conversion-spec.md 4) */
.product-card--pop { border-top-width: 4px; box-shadow: var(--shadow-lg); }
.product-badge--pop { background: var(--orange); color: #fff; }
.product-footer--stack { display: block; }
.product-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.product-price-row .price { margin-right: 0; }
.product-was { font-size: 0.9375rem; color: var(--text-muted); }
.product-featured-was { margin-right: 0.5rem; font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,0.7); }
.product-footer--stack .conv-price-line { margin-top: 0.5rem; font-size: 0.75rem; }

/* State page: package card beside the free-test nudge (spec 6) */
.conv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.75rem; align-items: start; }
.conv-pair-side { padding-top: 0.5rem; }
.conv-pair-side h3 { margin: 0 0 0.6rem; font-size: 1.25rem; }
.conv-pair-side p { margin: 0 0 1.1rem; color: var(--text-muted); line-height: 1.7; }
@media (max-width: 820px) { .conv-pair { grid-template-columns: 1fr; gap: 1.35rem; } }

/* Package page price block */
.price-display-was { margin-right: 0.55rem; font-size: 1.1rem; font-weight: 600; color: var(--text-muted); }
.price-display-save { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--ready); }
.add-to-cart-panel .conv-cof { margin-top: 1rem; }
.section-compare { padding-top: 0; }

/* Post-test offer (begincdl-conversion-spec.md 5) */
.demo-cta-head { margin: 0.35rem 0 0.6rem; font-size: 1.15rem; font-weight: 800; line-height: 1.35; color: var(--text); }
.demo-cta-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--text-muted); }
.demo-cta-retry { margin: 0.6rem 0 0; }
.linklike { padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem; color: var(--orange); text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--navy); }

/* cta-card: long package names were pushing the grid wider than the phone viewport */
.cta-card > * { min-width: 0; }
.cta-card-actions .btn { white-space: normal; line-height: 1.3; }
@media (max-width: 560px) { .cta-card { padding: 1.35rem 1.1rem; } }

.conv-cof-cta { margin-top: 1.25rem; }
.conv-cof-btn { white-space: normal; line-height: 1.3; }
.add-to-cart-panel .conv-cof-cta { margin-top: 0.9rem; }
.add-to-cart-panel .conv-cof-btn { display: block; width: 100%; text-align: center; font-size: 0.9375rem; }
.conv-cof--headline .conv-cof-head { margin-bottom: 0; }

/* Package page: stick the whole right column, not just the buy panel.
   Sticking the panel alone let the upgrade offers below it scroll underneath. */
.product-detail-layout > div:last-child { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; }
.product-detail-layout > div:last-child .card-sticky { position: static; top: auto; }
@media (max-width: 900px) { .product-detail-layout > div:last-child { position: static; } }
.includes-label--tight { margin-bottom: 0.25rem; }
.add-to-cart-panel h2 + .includes-label--tight { margin-top: 0.5rem; }

/* Package overview items jump to their section in "Topics Covered" */
.topic-item[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
#topics { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.product-featured-details { align-self: center; font-size: 0.95rem; font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, #fff 55%, transparent); text-underline-offset: 3px; }
/* Scoped to beat .product-featured a:hover, which is a type selector heavier than a bare
   class and was overriding this to #fff: the link had no visible hover at all. */
.product-featured a.product-featured-details:hover { color: var(--orange); text-decoration-color: var(--orange); }

/* Program dashboard: upgrade packages use the same cards as the rest of the site */

/* Program dashboard: upgrade offers as full-width rows (top pick emphasized) */
.upgrade-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.75rem; align-items: center; padding: 1.35rem 1.5rem; margin-bottom: 0.9rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); }
.upgrade-row--top { padding: 1.9rem 1.75rem; border: 2px solid var(--orange); box-shadow: var(--shadow-lg); }
.upgrade-row-badge { display: inline-block; margin-bottom: 0.5rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.upgrade-row-name { margin: 0 0 0.4rem; font-size: 1.35rem; line-height: 1.25; }
.upgrade-row--top .upgrade-row-name { font-size: 1.6rem; }
.upgrade-row-name a { color: var(--text); text-decoration: none; }
.upgrade-row-name a:hover { color: var(--orange); }
.upgrade-row-adds { margin: 0; color: var(--text-muted); line-height: 1.6; }
.upgrade-row-cta { text-align: center; }
.upgrade-row-price { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 2rem; font-weight: 900; line-height: 1; }
.upgrade-row-was { font-size: 1rem; font-weight: 600; color: var(--text-muted); }.upgrade-row-details { display: inline-block; margin-top: 0.6rem; font-size: 0.875rem; font-weight: 700; color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) {
  .upgrade-row { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.25rem 1.1rem; }
  .upgrade-row-cta { text-align: left; }
  .upgrade-row-price { justify-content: flex-start; }
}

/* Program dashboard: buy more access time */
.program-access-more { margin-left: 0.6rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.program-access-more:hover { color: var(--orange-dk); }
.program-more-time { margin: 0 0 1.1rem; padding: 1.1rem 1.2rem; background: color-mix(in srgb, var(--orange) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); border-radius: var(--radius); }
.program-more-time-lead { margin: 0 0 0.85rem; font-size: 0.925rem; color: var(--text-muted); line-height: 1.6; }
.program-more-time-opts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.time-opt { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.7rem 1.1rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
.time-opt:hover { border-color: var(--orange); transform: translateY(-1px); }
.time-opt-days { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.time-opt-price { font-size: 0.875rem; font-weight: 700; color: var(--orange); }
.program-more-time-opts { align-items: stretch; }
.time-opt-go { align-self: center; }
.program-more-time-dates { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
.program-more-time-dates .time-arrow { color: var(--orange); font-weight: 800; }
.time-new { color: var(--ready); }.upgrade-deadline { margin: -0.25rem 0 1rem; padding: 0.6rem 0.9rem; background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border-left: 3px solid var(--orange); border-radius: var(--radius); font-size: 0.9rem; color: var(--text); }
.upgrade-deadline strong { color: var(--orange-dk); }
@media (max-width: 560px) {
  /* Access line + "Need more time?" sit tight together when they wrap onto their own rows */
  .program-overview-head { gap: 0.3rem 0.6rem; }
  .program-access { white-space: normal; }
  .program-access-more { margin-left: 0; }
}

/* Local sandbox checkout (localhost only) */
.sandbox-note { display: block; margin: 0 0 1.1rem; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border: 1px dashed var(--orange); border-radius: var(--radius); }
.sandbox-note strong { display: block; margin-bottom: 0.25rem; color: var(--orange); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sandbox-note span { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }
.sandbox-outcome { margin: 1rem 0; }
#sandbox-form input[readonly] { opacity: 0.75; cursor: not-allowed; }
.form-hint--strong { font-weight: 700; color: var(--text); }

/* Checkout: the cart's state does not match the state being checked out */
.checkout-state-notice { display: flex; gap: 0.85rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem; background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); border-left: 4px solid var(--orange); border-radius: var(--radius); }
.checkout-state-notice-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--orange); color: #fff; font-size: 0.95rem; }
.checkout-state-notice strong { display: block; margin-bottom: 0.3rem; }
.checkout-state-notice p { margin: 0 0 0.4rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); }
.checkout-state-notice-do { margin-bottom: 0 !important; }
.receipt-item-sub { margin-top: 0.2rem; font-size: 0.85rem; color: var(--text-muted); }

/* Declined card: what to check before trying again */
.pay-declined { margin: 0 0 1.1rem; padding: 1rem 1.1rem; background: color-mix(in srgb, var(--danger, #e5484d) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger, #e5484d) 45%, transparent); border-left: 4px solid var(--danger, #e5484d); border-radius: var(--radius); }
.pay-declined strong { display: block; margin-bottom: 0.4rem; }
.pay-declined p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.pay-declined ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.pay-declined li { margin-bottom: 0.3rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }
.pay-declined-do { margin-bottom: 0 !important; }

/* Inline "?" field help */
.field-help { width: 1.05rem; height: 1.05rem; padding: 0; margin-left: 0.3rem; border: 1px solid var(--border-lt); border-radius: 50%; background: none; color: var(--text-muted); font-size: 0.7rem; font-weight: 800; line-height: 1; cursor: pointer; vertical-align: middle; }
.field-help:hover, .field-help[aria-expanded="true"] { border-color: var(--orange); color: var(--orange); }
.field-help-pop { position: absolute; z-index: 20; max-width: 20rem; margin-top: 0.35rem; padding: 0.7rem 0.85rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 0.85rem; line-height: 1.55; color: var(--text); }
.pay-row > div { position: relative; }

/* Payment page: reassurance list under the submit button */
.checkout-trust-list { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--border-lt); }
.checkout-trust-list li { margin-bottom: 0.45rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
.checkout-trust-list li:last-child { margin-bottom: 0; }

/* Package page on phones: the buy panel sits right after the overview, not at the very bottom.
   display:contents lifts both columns' cards into one flex list so they can be ordered. */
@media (max-width: 900px) {
  .product-detail-layout { display: flex; flex-direction: column; gap: var(--gap); }
  .product-detail-layout > div { display: contents; }
  .product-detail-layout > div > * { order: 3; }
  .product-detail-layout > div:first-child > *:first-child { order: 1; }
  .product-detail-layout .add-to-cart-panel { order: 2; }
  .product-detail-layout .bundles-with { order: 4; }
}

/* Package overview: what the package covers, as chips that jump to that section */
.overview-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.overview-chips li { margin: 0; }
.overview-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; background: color-mix(in srgb, var(--orange) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent); border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--text); text-decoration: none; }
.overview-chip--link:hover { background: color-mix(in srgb, var(--orange) 16%, var(--surface)); border-color: var(--orange); color: var(--orange-dk); }
.overview-chip-go { font-size: 0.85rem; font-weight: 800; color: var(--orange); }

/* ============================================================
   CDL Blog
   ============================================================ */
.blog-layout { padding-top: 2rem; }
.blog-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.blog-cat { padding: 0.4rem 0.85rem; border: 1px solid var(--border-lt); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.blog-cat:hover { border-color: var(--orange); color: var(--orange-dk); text-decoration: none; }
.blog-cat.is-current:hover { background-color: var(--orange-dk); border-color: var(--orange-dk); color: #fff; }
.blog-cat.is-current { background: var(--orange); border-color: var(--orange); color: #fff; }
.blog-search { display: flex; gap: 0.4rem; margin-left: auto; }
.blog-search input { min-width: 12rem; padding: 0.4rem 0.7rem; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.blog-card--lead { grid-column: 1 / -1; flex-direction: row; }
.blog-card--lead .blog-card-shot { flex: 0 0 46%; }
.blog-card--lead .blog-card-title { font-size: 1.6rem; }
.blog-card-shot { display: block; background: var(--navy); }
.blog-card-shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.blog-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.35rem 1.4rem; }
.blog-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.blog-card-cat { font-weight: 800; color: var(--orange-dk); text-decoration: none; }
.blog-card-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover { color: var(--orange); }
.blog-card-excerpt { margin: 0; color: var(--text-muted); line-height: 1.6; }
.blog-card-more { margin-top: auto; font-size: 0.875rem; font-weight: 700; color: var(--orange); text-decoration: none; }
.blog-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.blog-pager-at { font-size: 0.875rem; color: var(--text-muted); }
.blog-empty { text-align: center; padding: 2.5rem 1.5rem; }
.blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 2.5rem; padding: 1.75rem; }
.blog-cta h2 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.blog-cta p { margin: 0; color: var(--text-muted); }
.blog-feed-link { margin-top: 1.25rem; font-size: 0.85rem; }

/* Post */
.blog-post-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; padding-top: 2rem; }
.blog-post-hero { margin: 0 0 1.5rem; }
.blog-post-hero img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.blog-post-standfirst { margin: 0 0 1.5rem; font-size: 1.15rem; line-height: 1.7; color: var(--text); border-left: 4px solid var(--orange); padding-left: 1rem; }
.blog-toc { margin: 0 0 1.75rem; padding: 1rem 1.2rem; background: color-mix(in srgb, var(--orange) 6%, var(--surface)); border: 1px solid var(--border-lt); border-radius: var(--radius); }
.blog-toc-label { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dk); }
.blog-toc ul { margin: 0; padding-left: 1.1rem; }
.blog-toc li { margin-bottom: 0.3rem; }
.blog-post-body { font-size: 1.05rem; line-height: 1.8; color: var(--text); }
.blog-post-body h2 { margin: 2.25rem 0 0.75rem; font-size: 1.55rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.blog-post-body h3 { margin: 1.75rem 0 0.6rem; font-size: 1.2rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.blog-post-body p { margin: 0 0 1.15rem; }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.blog-post-body li { margin-bottom: 0.45rem; }
.blog-post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.blog-post-body figure { margin: 1.75rem 0; }
.blog-post-body figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.blog-post-body blockquote { margin: 1.75rem 0; padding: 0.35rem 0 0.35rem 1.15rem; border-left: 4px solid var(--orange); color: var(--text-muted); font-style: italic; }
.blog-post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.blog-post-body th, .blog-post-body td { padding: 0.6rem 0.75rem; border: 1px solid var(--border-lt); text-align: left; }
.blog-post-body a { color: var(--orange-dk); text-underline-offset: 2px; }
.blog-post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 0; }
.blog-tag { padding: 0.3rem 0.7rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: 999px; font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
.blog-tag:hover { border-color: var(--orange-dk); color: var(--orange); text-decoration: none; }
.blog-post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-lt); }
.blog-post-byline { margin: 0; font-size: 0.875rem; color: var(--text-muted); max-width: 42ch; }
.blog-post-back { font-weight: 700; color: var(--orange-dk); text-decoration: none; }
.blog-post-side { position: sticky; top: calc(var(--nav-h) + 1rem); display: flex; flex-direction: column; gap: 1.25rem; }
.blog-side-cta h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.blog-side-cta p { margin: 0 0 1rem; font-size: 0.925rem; color: var(--text-muted); line-height: 1.6; }
.blog-side-eyebrow { margin: 0 0 0.4rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.blog-related { margin-top: 3rem; }
.admin-preview-banner { margin: 1rem 0; padding: 0.75rem 1rem; background: color-mix(in srgb, var(--orange) 12%, var(--surface)); border: 1px dashed var(--orange); border-radius: var(--radius); font-size: 0.9rem; }

@media (max-width: 1000px) {
  .blog-post-layout { grid-template-columns: 1fr; }
  .blog-post-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .blog-side-cta { flex: 1 1 18rem; }
}
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card--lead { flex-direction: column; }
  .blog-card--lead .blog-card-shot { flex: none; }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-search { margin-left: 0; width: 100%; }
  .blog-search input { flex: 1; min-width: 0; }
  .blog-cta { flex-direction: column; align-items: flex-start; }
}

/* Admin: blog list + editor */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-head-actions { display: flex; align-items: center; gap: 0.5rem; }
.admin-sub { margin: -0.25rem 0 1.25rem; color: var(--text-muted); font-size: 0.9rem; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.admin-tabs a { padding: 0.35rem 0.8rem; border: 1px solid var(--border-lt); border-radius: 999px; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; }
.admin-tabs a.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pill--published { background: color-mix(in srgb, var(--ready) 22%, transparent); color: var(--ready); }
.pill--draft     { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }
.pill--archived  { background: color-mix(in srgb, var(--text-muted) 20%, transparent); color: var(--text-muted); }
.seo-score { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 1.6rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; }
.seo-score--good { background: color-mix(in srgb, var(--ready) 22%, transparent); color: var(--ready); }
.seo-score--ok   { background: color-mix(in srgb, var(--orange) 22%, transparent); color: var(--orange); }
.seo-score--poor { background: color-mix(in srgb, #e5484d 22%, transparent); color: #e5484d; }

.blog-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.blog-editor-main { display: flex; flex-direction: column; gap: 1.25rem; }
.blog-editor-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; }
.blog-editor label { display: block; margin: 1rem 0 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.blog-editor label:first-child { margin-top: 0; }
.blog-editor input[type=text], .blog-editor textarea, .blog-editor select { width: 100%; }
.field-with-prefix { display: flex; align-items: center; gap: 0.35rem; }
.field-with-prefix span { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.blog-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.blog-status-actions { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-lt); }
.blog-meta-note { margin: 0.75rem 0 0; font-size: 0.8rem; }
.admin-danger { color: var(--danger); }
.admin-check { display: flex !important; align-items: flex-start; gap: 0.5rem; margin-top: 1rem !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 0.85rem !important; }
.hero-thumb { display: block; width: 100%; margin-top: 0.75rem; border-radius: var(--radius); }

/* WYSIWYG */
.wysiwyg { border: 1px solid var(--border-lt); border-radius: var(--radius); overflow: hidden; }
.wysiwyg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.5rem; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); border-bottom: 1px solid var(--border-lt); }
.wysiwyg-bar button { min-width: 2rem; padding: 0.3rem 0.55rem; background: var(--surface); border: 1px solid var(--border-lt); border-radius: 5px; font-size: 0.82rem; color: var(--text); cursor: pointer; }
.wysiwyg-bar button:hover { border-color: var(--orange); color: var(--orange); }
.wysiwyg-bar button.is-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.wysiwyg-sep { width: 1px; height: 1.2rem; margin: 0 0.25rem; background: var(--border-lt); }
.wysiwyg-right { margin-left: auto; }
.wysiwyg-area { min-height: 26rem; padding: 1.25rem 1.4rem; background: var(--surface); font-size: 1rem; line-height: 1.75; outline: none; }
.wysiwyg-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--orange) 35%, transparent); }
.wysiwyg-area h2 { font-size: 1.4rem; margin: 1.5rem 0 0.5rem; }
.wysiwyg-area h3 { font-size: 1.15rem; margin: 1.25rem 0 0.4rem; }
.wysiwyg-area blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--orange); color: var(--text-muted); }
.wysiwyg-area img { max-width: 100%; height: auto; }
.wysiwyg-source { width: 100%; min-height: 26rem; padding: 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; border: 0; }
.wysiwyg-stats { margin: 0; padding: 0.5rem 1rem; border-top: 1px solid var(--border-lt); font-size: 0.8rem; color: var(--text-muted); }

/* Search-result preview */
.serp-preview { padding: 0.9rem 1rem; margin-bottom: 0.5rem; background: #fff; border: 1px solid var(--border-lt); border-radius: var(--radius); }
.serp-url { font-size: 0.78rem; color: #3c7d3c; word-break: break-all; }
.serp-title { margin: 0.15rem 0; font-size: 1.05rem; color: #1a0dab; line-height: 1.3; }
.serp-desc { font-size: 0.85rem; color: #4d5156; line-height: 1.5; }

/* SEO checklist */
.seo-checks { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.seo-check { display: flex; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--border-lt); font-size: 0.85rem; line-height: 1.45; }
.seo-check:first-child { border-top: 0; }
.seo-check-dot { flex: none; width: 0.65rem; height: 0.65rem; margin-top: 0.35rem; border-radius: 50%; }
.seo-check--pass .seo-check-dot { background: var(--ready); }
.seo-check--warn .seo-check-dot { background: var(--orange); }
.seo-check--fail .seo-check-dot { background: #e5484d; }

@media (max-width: 1100px) {
  .blog-editor-grid { grid-template-columns: 1fr; }
  .blog-editor-side { position: static; }
}

/* Dark themes: the wordmark badge carries dark letters so it keeps its contrast */
:root[data-theme="dark"] .logo-mark, :root[data-theme="auto"] .logo-mark,
:root[data-theme="dark"] .product-badge, :root[data-theme="auto"] .product-badge,
:root[data-theme="dark"] .conv-card-badge, :root[data-theme="auto"] .conv-card-badge,
:root[data-theme="dark"] .upgrade-row-badge, :root[data-theme="auto"] .upgrade-row-badge,
:root[data-theme="dark"] .demo-banner-tag, :root[data-theme="auto"] .demo-banner-tag,
:root[data-theme="dark"] .blog-cat.is-current, :root[data-theme="auto"] .blog-cat.is-current { color: #14202f; }

/* Hover on the blue panels: go brighter, never darker */
.hero a:hover, .cta-band a:hover, .site-footer a:hover,
a.program-next:hover, a.program-next:hover .program-next-title, a.program-next:hover .program-next-sub,
.class-cta-band a:hover, .product-featured a:hover { color: #fff; }
/* `inherit` here resolved to the PAGE text colour, not the panel's: .hero and .cta-band never
   set a colour of their own (their white text comes from child rules), so a button label
   flipped from white to near-black on hover, 2.7:1 on the orange fill. It hit the homepage
   primary CTA. Every button inside these panels is .btn-primary or .btn-outline-invert and
   both are white-on-dark, so white is the correct value; there is no light-filled button here. */
.hero .btn:hover, .cta-band .btn:hover, .site-footer .btn:hover, .product-featured .btn:hover { color: #fff; }

/* The nav dropdown is a WHITE panel hanging off the navy bar, so the bar's own white hover
   must not reach into it: .primary-nav a:hover sets color:#fff, and any dropdown link that
   does not set its own hover colour went white on white and vanished (.nav-dd-all did).
   Same specificity as .primary-nav a:hover and declared later, so it wins; the per-link
   rules above (.nav-dd-link, .nav-dd-free, .nav-dd-complete) are one class heavier and
   still win over this, so their intended colours are untouched. Covers future links too. */
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { color: var(--orange-dk); }
/* The hover tint is white-on-white too: on this panel use the grey surface instead. */
.nav-dropdown a:hover { background-color: var(--surface-2); }

/* The mobile drawer is navy, so the global light-page `a:hover { color: var(--orange-dk) }`
   must not reach into it either: a drawer link with no hover colour of its own went dark
   orange on navy at 1.7:1. .mnav-link-split > a (the Study Material row) and .mnav-btn-outline
   (Create Account) both did. One class heavier than the global rule so it wins, and lighter
   than .mnav-sub-link:hover and .mnav-btn-primary:hover, which keep their own colours. */
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; }

/* Admin sidebar sits on the brand blue: its links hover to white, never to orange */
.admin-side a:hover, .admin-brand:hover, .admin-side-link:hover { color: #fff; }

/* Filled orange controls: the label stays white on hover */
.btn-primary:hover, .mnav-btn-primary:hover, .blog-cat.is-current:hover,
.admin-tabs a.is-active:hover, .admin-nav a.is-active:hover, .wysiwyg-bar button.is-on:hover,
a:hover .logo-mark, a:hover .cart-badge, a:hover .demo-banner-tag, a:hover .nav-dd-free-tag,
a:hover .bundle-offer-tag, a:hover .cart-upgrade-tag, a:hover .term-popular { color: #fff; }
.admin-tabs a:hover { color: var(--orange-dk); }
.admin-tabs a.is-active:hover, .blog-cat.is-current:hover, .admin-nav a.is-active:hover { background-color: var(--orange-dk); border-color: var(--orange-dk); }

/* Free practice test - about section (below the quiz) ------------------------ */
/* This block used to sit bare on the body grey with no panel behind it, which is not how any
   other long-form section on the site is presented and made it hard to read. It now takes the
   same surface, border, radius and padding as .card and .products-section--alt. */
.ft-about {
  /* No max-width of its own: it keeps the .container width so it lines up with the quiz block
     and everything else on the page rather than sitting narrower than them. */
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem 2.25rem;
  box-shadow: var(--shadow-sm);
}
.ft-about > :first-child { margin-top: 0; }   /* the panel's own padding is the top gap */
.ft-about > :last-child  { margin-bottom: 0; }
.ft-about h2 { margin: 2.25rem 0 0.75rem; font-size: 1.375rem; }
.ft-about h3 { margin: 1.75rem 0 0.5rem; font-size: 1.125rem; }
.ft-about p { line-height: 1.75; color: var(--text); }
.ft-about ul { margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.75; }
.ft-about li { margin-bottom: 0.35rem; }
.ft-about a { font-weight: 600; }
.ft-about-topics { columns: 2; column-gap: 2.5rem; }
.ft-about-topics li { break-inside: avoid; }
.ft-about-source { font-size: 0.875rem; color: var(--text-muted); }
/* Spoke-to-spoke links at the foot of each free test page. Two columns like .ft-about-topics,
   with the kind of test (endorsement, restriction removal, core test) as quiet trailing text so
   the list says what each one is without a second line per item. */
.ft-about-other { columns: 2; column-gap: 2.5rem; }
.ft-about-other li { break-inside: avoid; margin-bottom: 0.5rem; }
.ft-other-kind { display: block; font-size: 0.875rem; color: var(--text-muted); font-weight: 400; }
@media (max-width: 640px) {
  /* .ft-about IS the .container, so its padding was doubling as the page gutter and the panel
     ran edge to edge. width:auto lets the margin provide the gutter instead, so the card is
     inset like every other panel. width:100% plus a margin here would force a sideways scroll. */
  .ft-about {
    width: auto;
    margin-inline: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--radius);
  }
  .ft-about-topics { columns: 1; }
  .ft-about-other { columns: 1; }
}

/* CDL cost by state - reference table ---------------------------------------- */
.cost-summary { background: var(--surface-2, #f1f6fb); border-left: 3px solid var(--orange); padding: 1rem 1.25rem; border-radius: 6px; margin-bottom: 1.5rem; }
.cost-summary p { margin: 0 0 0.5rem; line-height: 1.6; }
.cost-summary p:last-child { margin-bottom: 0; }
.cost-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 2rem; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 60rem; }
.cost-table th, .cost-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.cost-table thead th { background: var(--surface); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1; }
.cost-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--navy) 3%, transparent); }
.cost-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.cost-sort:hover { color: var(--orange-dk); }
.cost-hint { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 400; line-height: 1.35; color: var(--text-muted); max-width: 14rem; }
.cost-amount { display: block; font-weight: 700; }
.cost-what { display: block; margin-top: 0.1rem; font-size: 0.75rem; line-height: 1.35; color: var(--text-muted); }
.cost-none, .cost-unverified { font-size: 0.8125rem; color: var(--text-muted); }
.cost-method { max-width: 46rem; }
.cost-method p { line-height: 1.7; }
@media (max-width: 640px) { .cost-table { font-size: 0.85rem; } .cost-hint { display: none; } }

/* Post-test offer: details link under the Add to Cart button --------------- */
.demo-cta-details { flex-basis: 100%; font-size: 0.9375rem; font-weight: 600; color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px; }
.demo-cta-details:hover { color: var(--orange); }

/* Nav dropdown: pinned Complete entry and inline badges ---------------------- */
.primary-nav .nav-dd-complete {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0 0 0.5rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  font-size: 0.875rem; font-weight: 700; color: var(--navy); text-decoration: none;
}
.primary-nav .nav-dd-complete:hover,
.primary-nav .nav-dd-complete:focus-visible { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-dk); text-decoration: underline; text-underline-offset: 2px; }
.nav-dd-badge {
  flex: none; margin-left: 0.45rem; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.5; white-space: nowrap; text-decoration: none;
}
.nav-dd-badge--value { background: var(--orange-dk); color: #fff; }
.nav-dd-badge--pop   { background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); }
.mnav-sub-complete { justify-content: space-between; font-weight: 700; color: #fff; }
.mnav-sub-complete .nav-dd-badge--value { background: var(--orange); }
/* The pop badge is navy-on-navy, which only reads on the white desktop panel. */
.mnav-sub-link .nav-dd-badge--pop { background: rgba(255,255,255,0.20); color: #fff; }

/* Study material listing - full width rows ----------------------------------
   The sections used to be grids of small tiles. Each product is now one wide
   row: text on the left, price and button held on the right. It echoes the
   featured Complete panel above it but stays quieter, so the featured one
   still reads as the primary choice. */
.product-rows { grid-template-columns: 1fr; gap: 0.75rem; }

.product-rows .product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.5rem;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0;
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--navy) 2%, var(--surface));
  border: 1px solid var(--border-lt);
  border-left: 4px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: var(--radius);
  box-shadow: none;
}
.product-rows .product-card:hover {
  transform: none;
  border-left-color: var(--orange);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.product-rows .product-card--bundle { border-top: 1px solid var(--border-lt); border-left-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.product-rows .product-card--pop    { border-left-color: var(--orange); background: color-mix(in srgb, var(--orange) 4%, var(--surface)); }

/* Everything except the price block stacks in the left column. */
.product-rows .product-card > *          { grid-column: 1; margin: 0; }
.product-rows .product-card > *:not(.product-footer) ~ *:not(.product-footer) { margin-top: 0.3rem; }
.product-rows .product-card > .product-footer {
  grid-column: 2; grid-row: 1 / span 20;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.4rem;
  padding-left: 1.25rem; border-left: 1px solid var(--border-lt);
}
/* The pay-once line is required at every price (spec), so it is kept and made to fit. */
.product-rows .product-card .conv-price-line { margin: 0; font-size: 0.6875rem; line-height: 1.35; text-align: center; }
.product-rows .product-card .btn { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; }
.product-rows .product-card .product-card-top { gap: 0.4rem; }
.product-rows .product-card h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.product-rows .product-card .product-overview,
.product-rows .product-card .product-who { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.product-rows .product-card .price-sm,
.product-rows .product-card .price { font-size: 1.25rem; font-weight: 800; color: var(--orange-dk); text-align: center; line-height: 1.2; }
.product-rows .product-card .btn { width: 100%; }
.product-rows .mod-card-icon { font-size: 1.25rem; }
.product-rows .product-includes-list { flex-direction: row; flex-wrap: wrap; gap: 0.15rem 1.1rem; font-size: 0.875rem; }

/* Narrow screens: the price block drops under the text instead of squeezing it. */
@media (max-width: 720px) {
  .product-rows .product-card { grid-template-columns: 1fr; row-gap: 0.75rem; padding: 1.15rem 1.25rem; }
  .product-rows .product-card > .product-footer {
    grid-column: 1; grid-row: auto;
    flex-direction: column; align-items: stretch;
    padding-left: 0; padding-top: 0.85rem; border-left: 0; border-top: 1px solid var(--border-lt);
  }
}

/* Study material listing - top of page --------------------------------------
   Four stacked blocks sat between the H1 and the first product. The intro now
   has a readable measure instead of running the full container width, and the
   reassurance blocks are pulled together so products start higher up. */
.page-header--products { padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
/* Study material and product pages: the intro runs the full container on desktop; the
   mobile rule further up keeps the line length readable on a phone. */
.page-header--products .page-header-desc,
.page-header--product .page-header-desc { max-width: none; }
.page-header--products .page-header-desc--sub { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--text-muted); }
.products-page .conv-compare   { margin-bottom: 1.25rem; }
.products-page .demo-banner    { margin-bottom: 1rem; }
.products-page .products-terms { margin-bottom: 2.25rem; }

/* Coming Soon: the buy slot on a product that is not on sale yet ------------- */
.btn-coming-soon,
.btn-coming-soon:hover {
  background: var(--border-lt);
  border-color: var(--border-lt);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.product-coming-soon-note { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }

/* Savings ribbon: sits directly under the Add to Cart button on the study material rows,
   squared off at the top so it reads as a tab wrapped under the button rather than a
   separate chip floating next to the price. */
/* The button sits in a wrapper div that exists only to carry the CTA tracking attributes.
   display:contents drops its box so the button becomes a direct flex child and the ribbon can
   sit flush against the button itself. The div and its data attributes stay in the DOM. */
.product-rows .product-card > .product-footer > div[data-cta-location] { display: contents; }
/* btn-block carries a bottom margin that would sit between the button and its ribbon. */
.product-rows .product-card > .product-footer .btn { margin-bottom: 0; }
/* The price sits over a full-width button, so centre it rather than leaving it hard left. */
.product-rows .product-card .product-price-row { justify-content: center; }
.product-savings-ribbon {
  display: block;
  margin: calc(-0.4rem - 1px) 0 0;   /* cancels the flex gap so it sits flush under the button */
  padding: 0.3rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--ready) 45%, transparent);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: color-mix(in srgb, var(--ready) 12%, var(--surface));
  color: var(--ready-dk, #0f5f2d);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ---- Next steps ----------------------------------------------------------
   Internal-link block on the state Classes and Endorsements pages, sitting
   just above the CTA band. Keeps the three state pages (classes, endorsements,
   free practice test) linked to each other.
   ------------------------------------------------------------------------ */
.next-steps { max-width: 52rem; margin: 2.5rem 0 0; }
.next-steps h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.next-steps ul { margin: 0; padding-left: 1.25rem; line-height: 1.8; }
.next-steps li { color: var(--text); }
.next-steps a { font-weight: 600; }

/* ---- Cost by state: six fee columns -------------------------------------
   The table grew from four fee columns to six (permit, knowledge, issuance,
   skills, endorsements, other), so it needs more room before it scrolls, and
   the Other fees column stacks several lines in one cell. Other fees is the
   least load-bearing column, so it is the one dropped on narrow screens.
   ----------------------------------------------------------------------- */
.cost-table { min-width: 74rem; }
/* Consecutive amount/label pairs in the Other fees cell need separating. */
.cost-col-other .cost-what + .cost-amount { margin-top: 0.45rem; }
.cost-admin-warning {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-left: 3px solid var(--orange);
  padding: 0.75rem 1rem; border-radius: 6px; margin: 0 0 1.5rem;
  font-size: 0.875rem; line-height: 1.6;
}
.cost-admin-warning code { font-size: 0.8125rem; }
@media (max-width: 900px) {
  .cost-table { min-width: 58rem; }
  .cost-table .cost-col-other { display: none; }
}

/* ---- Program: weak areas from the free test -----------------------------
   Shown on an empty dashboard when a free practice test was adopted at email
   verification, so a new account sees what to study instead of "nothing here".
   ----------------------------------------------------------------------- */
.program-weak-list { margin: 0.75rem 0 1rem; padding-left: 1.25rem; line-height: 1.8; }
.program-weak-list li { color: var(--text); }
.program-weak-count { font-size: 0.8125rem; color: var(--text-muted); }
.program-weak-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 560px) {
  .program-weak-actions { flex-direction: column; }
  .program-weak-actions .btn { width: 100%; }
}

/* ---- Free practice test: the other free tests ----------------------------
   Sits in the .ft-about panel under the quiz, so it inherits that panel's
   surface and measure. Two columns on desktop like .ft-about-topics, one on
   a phone. The question count is secondary, so it is muted and not a link.
   ------------------------------------------------------------------------ */
.ft-other-tests { columns: 2; column-gap: 2.5rem; margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.75; }
.ft-other-tests li { break-inside: avoid; margin-bottom: 0.35rem; }
.ft-other-tests a { font-weight: 600; }
.ft-other-count { color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; }
@media (max-width: 640px) { .ft-other-tests { columns: 1; } }

/* ---- Free practice test hub ----------------------------------------------
   The index of all eight free tests, shown only on /free-cdl-practice-test,
   above the General Knowledge quiz. Cards are whole-card links so the target
   is the size of the card, not just the text. Reuses .card and .grid-3.
   ------------------------------------------------------------------------ */
/* The hub sits INSIDE the white About panel, and the cards are white too, so with no surface of
   its own the whole block disappeared into the page: eight white cards on white, separated by a
   1px hairline. It now gets its own tinted band, which both sets the module apart and gives the
   white cards something to stand against. Pulled out to the panel's padding so it reads as a full
   band across the panel rather than a box floating inside it. */
.ft-hub {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1.75rem -2.25rem 0;
  padding: 1.5rem 2.25rem 1.75rem;
}
.ft-hub h3 {
  font-size: 1.3125rem;
  margin: 0 0 0.35rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--orange);
  line-height: 1.25;
}
/* 46rem is the site's intro measure, the same as .page-header-desc, so the two lead paragraphs
   stacked above each other end on the same line rather than one being visibly narrower. */
.ft-hub-lead { max-width: 46rem; color: var(--text); line-height: 1.7; margin: 0 0 1.35rem; }
/* .card + .card adds a 20px top margin for stacked cards. In a grid every card is a sibling, so
   each one after the first was pushed down 20px and shrunk by the same, leaving the first card in
   a row taller than the three beside it. The grid gap already does this job. */
.ft-hub-grid { align-items: stretch; }
/* .grid-3 jumps straight from one column to three at 768px, which leaves a tablet showing eight
   cards in a single stack. Two columns in that band keeps it sensible. */
@media (min-width: 560px) and (max-width: 767.98px) {
  .ft-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
.ft-hub-grid .card + .card { margin-top: 0; }

.ft-hub-card {
  /* White on the band is only about 1.09:1, so the fill alone cannot separate a card from it.
     The border and a slightly lifted shadow do the work instead, which is why both are set here
     rather than left to .card defaults. */
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(23, 34, 47, 0.05), 0 2px 8px rgba(23, 34, 47, 0.06);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.15rem 1rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.ft-hub-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
/* Three levels, each doing a different job: the test name in brand orange so the eye lands on it
   first, the free-question count in the success green the site already uses for positive state,
   and the description in body text so it is read rather than skimmed past as metadata. */
.ft-hub-card h4 { font-size: 1.0625rem; margin: 0 0 0.2rem; color: var(--orange-dk); }
a.ft-hub-card:hover h4 { color: var(--orange); }
/* Scoped to the card on purpose. The hub now sits inside the .ft-about panel, and
   ".ft-about p" (0,1,1) outranks a bare ".ft-hub-count" (0,1,0), which silently repainted the
   count in body text. Two classes put these back in front. */
.ft-hub-card .ft-hub-count { font-size: 0.8125rem; font-weight: 700; color: var(--success); margin: 0 0 0.45rem; }
.ft-hub-card .ft-hub-blurb { font-size: 0.875rem; line-height: 1.55; color: var(--text); margin: 0 0 0.9rem; }
/* Pushed to the bottom so the call to action lines up across cards of different heights. */
.ft-hub-link { margin-top: auto; font-size: 0.875rem; font-weight: 700; color: var(--orange-dk); }

/* The card for the test you are already on: not a link, visually settled. */
.ft-hub-card--here { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 5%, var(--surface)); }
.ft-hub-badge {
  position: absolute; top: 0.6rem; right: 0.7rem;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--orange-dk);
}
@media (max-width: 640px) {
  /* The band is pulled out to the About panel padding, which is 1.25rem on a phone, not 2.25rem.
     Without this the negative margin overhangs the panel and forces a sideways scroll. */
  .ft-hub { margin-inline: -1.25rem; padding: 1.25rem; border-radius: 0; border-left: 0; border-right: 0; }
  .ft-hub h3 { font-size: 1.1rem; }
  .ft-hub-card { padding: 1rem; }
}

/* ---- Free test: state examples -------------------------------------------
   Real rules quoted from verified cdl_state_licensing rows on each test page.
   The state name carries the weight; the quote is the agency's own wording.
   ------------------------------------------------------------------------ */
.ft-state-examples { margin: 0 0 0.85rem; padding-left: 1.25rem; line-height: 1.75; }
.ft-state-examples li { margin-bottom: 0.5rem; color: var(--text); }
.ft-state-examples strong { color: var(--navy); }

/* ---- Free test launcher: the pre-quiz copy -------------------------------
   Both paragraphs live inside #demo-launch, which the quiz engine hides on
   start, so they clear themselves when someone begins. The intro sets up the
   test, the closing line says what happens at the end.
   ------------------------------------------------------------------------ */
.demo-launch-intro { margin: 0 0 1rem; line-height: 1.65; color: var(--text); }
.demo-launch-after {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-lt);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}
/* The "where to study it" line closes the card, under the note about what happens at the end, so
   it reads as a next step rather than something in the way of starting. Links carry the weight;
   the prices stay quiet. Margin is on the top now that nothing follows it. */
.demo-launch-study { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.demo-launch-study a { font-weight: 600; }

/* ---- Product page: try the free test first ------------------------------
   Lives in the "who should get this" card, where someone is still deciding.
   Left aligned to match the prose it follows, not centred as it was when it
   sat in the narrow buy panel. A module links to its own test, a bundle to
   the hub. Quiet by design: a way in, not a rival call to action.
   ------------------------------------------------------------------------ */
.product-try-free {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-lt);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.product-try-free a { font-weight: 700; color: var(--orange-dk); }
.product-try-free span { display: block; margin-top: 0.2rem; color: var(--text-muted); font-size: 0.8125rem; }
/* ==== "What CDL do I need to drive a {vehicle}?" guides ==================================
   pages/vehicle-guide.php and pages/vehicle-guides.php. Mobile first: everything is one
   column until 860px. Colours come from the site tokens only, so dark mode follows for free. */

/* ---- Hero + answer. The answer is the point of the page, so it sits above the fold beside the
        photo, and the class colour runs down the edge of the card. ---- */
.vg-answer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin: 0 0 2rem;
}
.vg-hero { margin: 0; background: var(--surface-2); }
.vg-hero img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.vg-answer-body { position: relative; padding: 1.5rem 1.25rem 1.35rem; }
/* The class stripe, drawn on the body so it also works when a photo sits above it. */
.vg-answer-body::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--orange);
}
.vg-answer--none .vg-answer-body::before { background: var(--text-muted); }
.vg-answer--varies .vg-answer-body::before { background: var(--orange-lt); }

.vg-answer-badge {
  display: inline-block; margin-bottom: 0.6rem;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange-dk); background: var(--orange-bg);
  border-radius: 999px; padding: 0.3rem 0.7rem;
}
.vg-answer--none .vg-answer-badge { color: var(--text-muted); background: var(--surface-2); }
.vg-answer-text {
  margin: 0; color: var(--text); font-weight: 600;
  font-size: 1.125rem; line-height: 1.55; letter-spacing: -0.01em;
}
.vg-answer-ends {
  margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--border-lt);
  font-size: 0.9375rem; color: var(--text-muted);
}
.vg-end-letter {
  display: inline-block; min-width: 1.75rem; text-align: center;
  font-weight: 800; font-size: 0.875rem; line-height: 1.6;
  background: var(--orange); color: var(--text-invert);
  border-radius: var(--radius-sm); padding: 0.05rem 0.4rem; margin: 0 0.15rem;
}
.vg-answer-ends a { margin-left: 0.5rem; white-space: nowrap; }

/* ---- Body cards ---- */
.vg-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.vg-grid .card { margin: 0; border-radius: var(--radius-lg); }
.vg-grid .card h2 {
  font-size: 1.125rem; line-height: 1.35; margin-bottom: 0.85rem; letter-spacing: -0.01em;
}
.vg-grid .card p { color: var(--text-muted); margin-bottom: 0.8rem; line-height: 1.7; }
.vg-grid .card p:last-child { margin-bottom: 0; }
.vg-list { padding-left: 1.1rem; color: var(--text-muted); margin: 0; }
.vg-list li { margin-bottom: 0.6rem; line-height: 1.6; padding-left: 0.15rem; }
.vg-list li:last-child { margin-bottom: 0; }
.vg-list li::marker { color: var(--orange); }
.vg-note {
  font-size: 0.875rem; background: var(--surface-2);
  border-left: 3px solid var(--orange); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.7rem 0.9rem; margin: 0 !important;
}

/* The weight arithmetic. A definition list, not a table, so it reflows on a phone instead of
   scrolling sideways; each pair sits on one tinted band so the two halves stay joined. */
.vg-numbers { margin: 0; display: grid; gap: 0.5rem; }
.vg-numbers dt {
  font-weight: 700; color: var(--text); font-size: 0.9375rem; line-height: 1.45;
  background: var(--surface-2); padding: 0.7rem 0.85rem 0.35rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.vg-numbers dd {
  margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6;
  background: var(--surface-2); padding: 0 0.85rem 0.7rem;
  border-radius: 0 0 var(--radius) var(--radius);
}

.vg-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.vg-cta-row .btn { flex: 1 1 auto; justify-content: center; }
.vg-selector-card { grid-column: 1 / -1; }

/* ---- Sections ----
   Every section is a white panel with the same surface, border, radius, padding and shadow as
   .card, so a guide page reads as the stack of blocks the rest of the site is built from rather
   than as loose text on the page background. Values are taken from .card, not re-invented. */
.vg-section {
  margin-top: 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.vg-section > h2 {
  font-size: 1.375rem; margin-bottom: 1rem; letter-spacing: -0.015em; line-height: 1.3;
}
/* Tight under the heading only when a description follows it, which is the same pairing
   .products-section-header uses. */
.vg-section > h2:has(+ .vg-section-sub) { margin-bottom: 0.25rem; }
/* Section descriptions match .products-section-header p: the site's one wording for a line of
   explanation sitting under an h2. */
.vg-section-sub {
  color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6;
  margin: 0 0 1.5rem; max-width: 70ch;
}
.vg-products { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.vg-sub-line { margin-top: 1.1rem; }

/* ---- FAQs ---- */
.vg-faqs { display: grid; gap: 0.5rem; }
.vg-faq {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; transition: border-color 0.15s ease;
}
.vg-faq:hover { border-color: var(--orange); }
.vg-faq summary {
  cursor: pointer; padding: 0.9rem 2.5rem 0.9rem 1rem; position: relative;
  font-weight: 700; color: var(--text); line-height: 1.45; list-style: none;
}
.vg-faq summary::-webkit-details-marker { display: none; }
.vg-faq summary::after {
  content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; font-weight: 400; color: var(--orange); line-height: 1;
}
.vg-faq[open] summary::after { content: "\2212"; }
.vg-faq[open] summary { border-bottom: 1px solid var(--border-lt); }
.vg-faq p { margin: 0; padding: 0.9rem 1rem; color: var(--text-muted); line-height: 1.7; }

/* ---- Related vehicles ---- */
.vg-related { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.vg-related a {
  display: block; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; background: var(--surface); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vg-related a:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.vg-related strong { display: block; color: var(--text); font-size: 0.9375rem; }
.vg-related span { font-size: 0.8125rem; color: var(--text-muted); }
.vg-hub-link { margin-top: 1.1rem; }
.vg-disclaimer {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border-lt);
  font-size: 0.8125rem; color: var(--text-muted); line-height: 1.7;
}

/* ---- Hub ---- */
.vg-hub-intro { margin-bottom: 2.5rem; border-radius: var(--radius-lg); }
.vg-hub-intro p { color: var(--text-muted); line-height: 1.75; margin-bottom: 0.9rem; }
.vg-hub-intro strong { color: var(--text); }
.vg-hub-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

/* The card: photo, class tag, vehicle, verdict, action. Flex column so the action line sits on
   the bottom edge whatever length the verdict runs to, which keeps a row of cards even. */
.vg-hub-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.vg-hub-card:hover,
.vg-hub-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--orange);
}
.vg-hub-thumb { display: block; background: var(--surface-2); overflow: hidden; }
.vg-hub-thumb img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 0.35s ease;
}
.vg-hub-card:hover .vg-hub-thumb img { transform: scale(1.04); }
.vg-hub-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.15rem; }
/* The whole card is one anchor, so a hover underlines everything inside it. Only the action line
   should read as a link; the verdict is body copy that happens to sit in an anchor. */
.vg-hub-card:hover,
.vg-hub-card:focus-visible { text-decoration: none; }
.vg-hub-card p,
.vg-hub-card:hover p { text-decoration: none; }
.vg-hub-tag {
  display: inline-block; align-self: flex-start; margin-bottom: 0.55rem;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange-dk); background: var(--orange-bg);
  border-radius: 999px; padding: 0.25rem 0.6rem;
}
/* Same treatment as .ft-hub-card h4 on the free test hub: card headings across the site are
   1.0625rem in brand orange, which is what makes a grid of cards read as one component. */
.vg-hub-card h3 {
  margin: 0 0 0.45rem; font-size: 1.0625rem; line-height: 1.3;
  color: var(--orange-dk); letter-spacing: -0.01em;
}
.vg-hub-card:hover h3,
.vg-hub-card:focus-visible h3 { color: var(--orange); }
.vg-hub-card p {
  margin: 0 0 1rem; color: var(--text); font-size: 0.875rem; line-height: 1.55;
  /* Verdicts vary a lot in length; clamping stops a row of cards going ragged. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.vg-hub-more {
  margin-top: auto; font-weight: 700; font-size: 0.8125rem; color: var(--orange-dk);
}
.vg-hub-more::after {
  content: "\2192"; display: inline-block; margin-left: 0.35rem;
  transition: transform 0.18s ease;
}
.vg-hub-card:hover .vg-hub-more::after { transform: translateX(3px); }

/* ---- "Next steps" link block. Strong intra-site linking is a standing requirement, so this is a
        real multi-column index, not a footer dump. ---- */
/* No border-top here: .vg-section already gives this block its own panel. */
.vg-next-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.vg-next-col h3 {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 0.75rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-lt);
}
.vg-next-col ul { list-style: none; padding: 0; margin: 0; }
.vg-next-col li { margin-bottom: 0.5rem; line-height: 1.5; }
.vg-next-col a { font-size: 0.9375rem; }

@media (min-width: 861px) {
  /* Photo and answer side by side, the photo filling its half however tall the answer runs. */
  .vg-answer--img { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .vg-answer--img { border-left: 4px solid var(--orange); }
  .vg-answer--img.vg-answer--none { border-left-color: var(--text-muted); }
  .vg-answer--img.vg-answer--varies { border-left-color: var(--orange-lt); }
  .vg-answer--img .vg-answer-body::before { display: none; }
  .vg-hero { height: 100%; }
  .vg-hero img { height: 100%; aspect-ratio: auto; min-height: 17rem; }
  .vg-answer-body { padding: 2rem 1.9rem; display: flex; flex-direction: column; justify-content: center; }
  .vg-answer-text { font-size: 1.25rem; }

  .vg-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .vg-cta-row .btn { flex: 0 0 auto; }
  .vg-products { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .vg-related { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .vg-hub-grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
  .vg-next-grid { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 2rem; }
  .vg-section { padding: 1.75rem; margin-top: 1.75rem; }
}

/* Panel padding on a phone, matching the rest of the site's blocks at this width. */
@media (max-width: 560px) {
  .vg-section { padding: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-hub-card, .vg-hub-thumb img, .vg-hub-more::after, .vg-related a { transition: none; }
  .vg-hub-card:hover { transform: none; }
  .vg-hub-card:hover .vg-hub-thumb img { transform: none; }
  .vg-hub-card:hover .vg-hub-more::after { transform: none; }
}

/* The CDL Selector's "Already know the vehicle?" card. .sel-about-grid is a fixed 3 columns, so
   a fourth card would wrap onto a row of its own at a third of the width; it spans the full row
   instead, which also gives the vehicle list room to run in columns. */
.sel-about-card--vehicles { grid-column: 1 / -1; }
.sel-about-vehicles { margin-bottom: 1rem; }
.sel-about-vehicles li { margin-bottom: 0.4rem; break-inside: avoid; }
.sel-about-vehicles a { font-weight: 700; }
@media (min-width: 560px)  { .sel-about-vehicles { columns: 2; column-gap: 1.5rem; } }
@media (min-width: 900px)  { .sel-about-vehicles { columns: 3; } }