/* eef2026 — page styles layered on finsi-bundle.css */
:root {
  --ss-navy: #182440;
  --ss-navy-deep: #0b1428;
  --ss-text: #1e2d4b;
  --ss-muted: #5a6577;
  --ss-orange: #ff7a00;
  --ss-orange-dark: #d85f00;
  --ss-orange-light: #ffb35c;
  --ss-blue: #106eea;
  --ss-blue-dark: #0959c7;
  --ss-bg-light: #f6f8fc;
  --ss-bg-blue: #e8f0fe;
  --ss-surface: #ffffff;
  --ss-border: #dfe5ef;
  --ss-green: #16a34a;
  --ss-red: #b42318;
  --ss-orange-tint: #fff7ed;
  --ss-pending: #fbbf24;
  --ss-running: #60a5fa;
  --ss-success-light: #4ade80;
  --ss-error-light: #f87171;
  --ss-neutral-dot: #cbd5e1;
  --ss-white: #ffffff;
  --ss-white-92: rgba(255, 255, 255, 0.92);
  --ss-white-76: rgba(255, 255, 255, 0.76);
  --ss-white-18: rgba(255, 255, 255, 0.18);
  --ss-white-10: rgba(255, 255, 255, 0.1);
  --ss-blue-ring: rgba(16, 110, 234, 0.22);
  --ss-orange-glow: rgba(255, 122, 0, 0.28);
  --ss-shadow-tint: rgba(22, 43, 86, 0.18);
  --ss-shadow-near: rgba(11, 20, 40, 0.1);
  --ss-shadow-soft: rgba(24, 36, 64, 0.06);
  --ss-hero-top: rgba(11, 20, 40, 0.46);
  --ss-hero-mid: rgba(11, 20, 40, 0.68);
  --ss-hero-bottom: rgba(11, 20, 40, 0.94);
  --ss-navy-50: rgba(24, 36, 64, 0.5);
  --ss-blue-border: rgba(16, 110, 234, 0.42);
  --ss-orange-border: rgba(255, 122, 0, 0.46);
  --ss-font: "Avenir Next", "Segoe UI Variable", "Helvetica Neue", sans-serif;
  --type-display: clamp(2.75rem, 5.4vw, 3.5rem);
  --type-h2: clamp(2rem, 3.5vw, 2.75rem);
  --type-h3: 1.125rem;
  --type-lede: clamp(1.05rem, 1.6vw, 1.25rem);
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-emphasis: 560ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
.index-page { background: var(--ss-bg-light); color: var(--ss-text); font-family: var(--ss-font); }
.index-page button, .index-page input { font-family: inherit; }
.skip-link {
  position: fixed;
  inset: var(--space-3) auto auto var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--ss-surface);
  color: var(--ss-navy);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--ss-blue); outline-offset: 2px; }

#hero {
  background-image: none !important;
  background: var(--ss-navy-deep) !important;
  color: var(--ss-white) !important;
  min-height: min(760px, 78dvh);
  padding: var(--space-28) var(--space-6) calc(var(--space-28) + var(--space-8)) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -65% 35%;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ss-orange-glow), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}
.hero-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.48;
  filter: saturate(0.9) contrast(1.04);
  transform: scale(1.02);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ss-hero-top) 0%, var(--ss-hero-mid) 48%, var(--ss-hero-bottom) 100%),
    linear-gradient(90deg, var(--ss-navy-50), transparent 70%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 1120px; }
#hero h1 {
  max-width: 900px;
  margin: 0 auto var(--space-6);
  color: var(--ss-white) !important;
  font-size: var(--type-display);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 3px 24px var(--ss-navy-deep);
}
#hero h1 span { color: var(--ss-orange-light); }
#hero .lede {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ss-white-92) !important;
  font-size: var(--type-lede);
  font-weight: 450;
  line-height: 1.65;
  text-wrap: pretty;
  text-shadow: 0 2px 16px var(--ss-navy-deep);
}
#hero .brand-pill {
  background: linear-gradient(135deg, var(--ss-white-18), var(--ss-white-10)) !important;
  border-color: var(--ss-white-18) !important;
  color: var(--ss-white) !important;
  box-shadow: inset 0 1px 0 var(--ss-white-18), 0 0 28px var(--ss-orange-glow);
  backdrop-filter: blur(12px) saturate(1.2);
}
.event-meta { margin-top: var(--space-5); color: var(--ss-white-76); font-size: var(--type-small); font-weight: 600; }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  color: var(--ss-white-92);
  font-size: var(--type-small);
  font-weight: 600;
}
.hero-proof span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-proof i { color: var(--ss-orange-light); }

.ss-inbox-promo {
  margin: 0 auto var(--space-5);
  max-width: 760px;
  padding: var(--space-4) var(--space-5);
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--radius-md);
  font-size: var(--type-small);
  color: var(--ss-text);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  box-shadow: 0 10px 28px -20px var(--ss-shadow-tint);
}
.ss-inbox-promo .badge {
  display: inline-block;
  background: var(--ss-navy);
  color: var(--ss-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--type-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.lego-promo { max-width: 720px; }
.index-page .lego-promo {
  position: relative;
  max-width: 760px;
  align-items: center;
  overflow: hidden;
  padding: var(--space-5) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(120deg, var(--ss-surface), var(--ss-orange-tint)) padding-box,
    linear-gradient(120deg, var(--ss-orange), var(--ss-orange-light) 46%, var(--ss-blue)) border-box;
  box-shadow: 0 18px 38px -26px var(--ss-orange-glow), 0 10px 24px -20px var(--ss-shadow-tint);
}
.index-page .lego-promo::after {
  content: "";
  position: absolute;
  inset: -80% auto auto 55%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ss-orange-glow);
  filter: blur(32px);
  pointer-events: none;
}
.lego-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--ss-orange-light), var(--ss-orange));
  box-shadow: inset 0 1px 0 var(--ss-white-76), 0 10px 20px -12px var(--ss-orange-dark);
}
.lego-icon svg { width: 36px; fill: var(--ss-white); }
.lego-copy { position: relative; z-index: 1; display: grid; gap: var(--space-1); }
.lego-copy .badge { justify-self: start; margin-bottom: var(--space-1); }
.lego-copy strong { color: var(--ss-navy); font-size: var(--type-h3); line-height: 1.25; }
.lego-copy > span:last-child { color: var(--ss-muted); line-height: 1.5; }
.results-page .lego-promo { max-width: 800px; }

.brand-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ss-blue-ring);
  border-radius: 999px;
  background: var(--ss-bg-blue);
  font-size: var(--type-caption);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
  color: var(--ss-blue);
  text-transform: uppercase;
  font-weight: 600;
}
.brand-pill .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-orange); margin-right: var(--space-2); box-shadow: 0 0 0 4px var(--ss-orange-glow); }
.lede { font-size: var(--type-lede); color: var(--ss-muted); margin: 0 auto; max-width: 640px; line-height: 1.55; }

.form-section { position: relative; z-index: 3; margin-top: calc(var(--space-16) * -1); padding: 0 var(--space-4) var(--space-24); }
.form-section .container { max-width: 1120px; }
.ss-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background:
    linear-gradient(var(--ss-surface), var(--ss-surface)) padding-box,
    linear-gradient(135deg, var(--ss-white), var(--ss-blue-border), var(--ss-orange-border)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: 0 34px 64px -34px var(--ss-shadow-tint), 0 18px 38px -28px var(--ss-shadow-near), inset 0 1px 0 var(--ss-white);
  transition: transform var(--motion-standard) var(--ease-out), box-shadow var(--motion-standard) ease;
}
.ss-card:hover, .ss-card:focus-within { box-shadow: 0 40px 72px -34px var(--ss-shadow-tint), 0 20px 40px -26px var(--ss-shadow-near), inset 0 1px 0 var(--ss-white); }
.form-heading { margin-bottom: var(--space-8); scroll-margin-top: var(--space-24); }
.form-eyebrow, .section-heading > span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ss-blue);
  font-size: var(--type-caption);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.form-heading h2 { margin: 0 0 var(--space-3); color: var(--ss-navy); font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.form-heading p { margin: 0; color: var(--ss-muted); font-size: var(--type-body); }
.ss-field { display: block; margin-bottom: var(--space-5); }
.ss-field > span:first-child { display: block; margin-bottom: var(--space-2); font-size: var(--type-small); font-weight: 700; color: var(--ss-text); }
.input-shell { position: relative; display: block; }
.input-shell > svg {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--ss-muted);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--motion-fast) ease;
}
.ss-field input[type="text"], .ss-field input[type="url"], .ss-field input[type="email"] {
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  background: var(--ss-bg-light);
  border: 1px solid var(--ss-border);
  border-radius: var(--radius-md);
  color: var(--ss-text);
  font-size: var(--type-body);
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.ss-field input::placeholder { color: var(--ss-muted); opacity: 0.72; }
.ss-field input:focus { outline: none; border-color: var(--ss-blue); background: var(--ss-surface); box-shadow: 0 0 0 4px var(--ss-blue-ring); }
.input-shell:focus-within > svg { color: var(--ss-blue); }
.cf-turnstile { margin: var(--space-2) 0 var(--space-5); min-height: 65px; }
.cf-turnstile:empty { min-height: 0; margin: 0; }
#submitBtn, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(135deg, var(--ss-orange-light) -25%, var(--ss-orange) 42%, var(--ss-orange-dark));
  color: var(--ss-white) !important;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--type-body);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 14px 28px -14px var(--ss-orange-glow), inset 0 1px 0 var(--ss-white-18);
  transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
#submitBtn i { transition: transform var(--motion-fast) var(--ease-out); }
#submitBtn:hover, .btn-primary:hover { filter: saturate(1.08) brightness(1.03); transform: translateY(-2px); box-shadow: 0 18px 34px -14px var(--ss-orange-glow), inset 0 1px 0 var(--ss-white-18); }
#submitBtn:hover i { transform: translateX(4px); }
#submitBtn:active, .btn-primary:active { transform: translateY(1px) scale(0.99); }
#submitBtn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 3px solid var(--ss-blue); outline-offset: 3px; }
#submitBtn:disabled { opacity: 0.68; cursor: wait; transform: none; filter: grayscale(0.1); }
#submitBtn:disabled i { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-secondary {
  display: inline-block;
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: var(--ss-surface);
  color: var(--ss-navy) !important;
  border: 1px solid var(--ss-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.error { color: var(--ss-red); margin-top: 0.75rem; font-size: 0.9rem; }
.fine { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--type-small); color: var(--ss-muted); line-height: 1.55; }
.fine i { flex: 0 0 auto; margin-top: 0.15em; color: var(--ss-blue); }

.whats-in { margin-top: var(--space-24); }
.section-heading { max-width: 700px; margin: 0 auto var(--space-12); text-align: center; }
.section-heading h2 { margin: 0 0 var(--space-4); color: var(--ss-navy); font-size: var(--type-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; }
.section-heading p { margin: 0; color: var(--ss-muted); font-size: var(--type-body); line-height: 1.65; text-wrap: pretty; }
.whats-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.whats-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ss-surface), var(--ss-bg-light));
  border: 1px solid var(--ss-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 16px 34px -30px var(--ss-shadow-tint);
  transition: transform var(--motion-standard) var(--ease-out), border-color var(--motion-standard) ease, box-shadow var(--motion-standard) ease;
}
.whats-card::after { content: ""; position: absolute; inset: auto -25% -55% 35%; aspect-ratio: 1; border-radius: 50%; background: var(--ss-bg-blue); opacity: 0.55; pointer-events: none; }
.feature-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: linear-gradient(145deg, var(--ss-bg-blue), var(--ss-surface)); color: var(--ss-blue); box-shadow: inset 0 0 0 1px var(--ss-blue-ring), 0 10px 22px -18px var(--ss-shadow-tint); }
.feature-icon i { font-size: 1.55rem; }
.feature-number { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--ss-border); font-size: 1.4rem; font-weight: 750; letter-spacing: -0.06em; }
.whats-card h3 { position: relative; z-index: 1; font-size: var(--type-h3); font-weight: 700; margin: var(--space-6) 0 var(--space-2); color: var(--ss-navy); }
.whats-card p { position: relative; z-index: 1; margin: 0; font-size: var(--type-small); line-height: 1.65; color: var(--ss-muted); }
@media (hover: hover) and (pointer: fine) {
  .whats-card.is-visible:hover { transform: translateY(-5px); border-color: var(--ss-blue-ring); box-shadow: 0 28px 52px -32px var(--ss-shadow-tint); }
}
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-emphasis) ease, transform var(--motion-emphasis) var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.whats-card:nth-child(2), .whats-card:nth-child(5) { transition-delay: 70ms; }
.whats-card:nth-child(3), .whats-card:nth-child(6) { transition-delay: 140ms; }

.results-hero { background: linear-gradient(180deg, var(--ss-navy), var(--ss-navy-deep)) !important; color: var(--ss-white) !important; padding: var(--space-20) var(--space-6) !important; }
.results-hero h1 { color: var(--ss-white) !important; }
.results-hero .lede { color: var(--ss-white-76) !important; }

@media (min-width: 640px) {
  .whats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .whats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #hero { min-height: auto; padding: var(--space-20) var(--space-4) calc(var(--space-24) + var(--space-8)) !important; }
  #hero h1 { font-size: clamp(2.5rem, 11vw, 3.1rem); }
  .hero-proof { gap: var(--space-3); }
  .hero-proof span { flex: 1 1 45%; justify-content: center; }
  .form-section { margin-top: calc(var(--space-12) * -1); padding-inline: var(--space-3); padding-bottom: var(--space-16); }
  .ss-card { padding: var(--space-6); border-radius: var(--radius-lg); }
  .index-page .lego-promo { padding: var(--space-4); }
  .whats-in { margin-top: var(--space-16); }
  .section-heading { margin-bottom: var(--space-8); }
}
@media (max-width: 479px) {
  #hero { padding-inline: var(--space-3) !important; }
  #hero h1 { font-size: 2.5rem; }
  .brand-pill { letter-spacing: 0.06em; }
  .hero-proof { display: grid; grid-template-columns: 1fr; }
  .hero-proof span { justify-content: flex-start; }
  .index-page .lego-promo { align-items: flex-start; }
  .lego-icon { flex-basis: 44px; height: 44px; }
  .lego-icon svg { width: 30px; }
  .ss-card { padding: var(--space-5); }
  .cf-turnstile { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

.overall {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--ss-white-10);
  border: 1px solid var(--ss-white-18);
  color: var(--ss-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.overall .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-pending); }
.overall.done .dot { background: var(--ss-success-light); }
.overall.failed .dot { background: var(--ss-error-light); }
.overall.running .dot { background: var(--ss-running); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.grid-section { padding: 2rem 0 4rem; }
.grid-section .container { max-width: 800px; }

.progress-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.75rem; }
.prog-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 10px;
}
.prog-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ss-neutral-dot); }
.prog-row.running .prog-dot { background: var(--ss-running); animation: pulse 1s infinite; }
.prog-row.done .prog-dot { background: var(--ss-green); }
.prog-row.failed .prog-dot { background: var(--ss-red); }
.prog-label { font-weight: 600; color: var(--ss-text); font-size: 0.95rem; }
.prog-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ss-muted); }

.lock-panel, .unlock-panel {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 10px 30px var(--ss-shadow-soft);
}
.lock-panel h2, .unlock-panel h2 { font-size: 1.25rem; color: var(--ss-navy); margin: 0 0 0.75rem; }
.teaser-headline { font-weight: 600; color: var(--ss-text); }
.teaser-bullets { margin: 0.75rem 0 1rem 1.1rem; color: var(--ss-text); }
.teaser-bullets li { margin: 0.35rem 0; }
.lock-actions { display: grid; gap: 0.65rem; margin-top: 1rem; }
@media (min-width: 560px) {
  .lock-actions { grid-template-columns: 1fr 1fr; }
  #submitBtn, .btn-primary, .btn-secondary { width: 100%; }
}

.calendly-embed {
  margin-top: 1.25rem;
  border-top: 1px solid var(--ss-border);
  padding-top: 1.25rem;
}
.calendly-embed-title {
  font-size: 0.95rem;
  color: var(--ss-navy);
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.calendly-widget-host .calendly-inline-widget {
  border-radius: 12px;
  overflow: hidden;
}

.unit-summaries { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.summary-card {
  border: 1px solid var(--ss-border);
  border-radius: 10px;
  padding: 1rem;
  background: var(--ss-bg-light);
}
.summary-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--ss-navy); }
.summary-card p { margin: 0; font-size: 0.9rem; color: var(--ss-muted); }

.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.quiz-modal[hidden] { display: none; }
.quiz-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 36, 64, 0.7);
  backdrop-filter: blur(4px);
}
.quiz-modal-content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(24, 36, 64, 0.3);
  z-index: 1;
}
.quiz-modal-content h2 {
  font-size: 1.5rem;
  color: var(--ss-navy);
  margin: 0 0 0.5rem;
}
.quiz-intro {
  font-size: 0.95rem;
  color: var(--ss-muted);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.quiz-field {
  margin-bottom: 1.25rem;
}
.quiz-field label {
  display: block;
  margin-bottom: 0.5rem;
}
.quiz-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ss-text);
  margin-bottom: 0.15rem;
}
.quiz-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--ss-muted);
}
.quiz-field select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--ss-bg-light);
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--ss-text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.quiz-field select:focus {
  outline: 2px solid rgba(16, 110, 234, 0.35);
  border-color: var(--ss-blue);
}
.quiz-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.quiz-actions button {
  flex: 1;
}
.quiz-fine {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ss-muted);
  text-align: center;
}
@media (max-width: 600px) {
  .quiz-modal-content { padding: 1.5rem; }
  .quiz-actions { flex-direction: column; }
}