/* QUIZ-WORLD signed-out home. Dark, calm, one accent (mint green). Gold exists only inside the logo artwork. */
body.quizworld-home-page {
  --legacy-ink: var(--text);
  --legacy-ink-2: var(--text);
  --teal: var(--surface-hover);
  --teal-dark: var(--surface-hover);
  --gold: var(--surface-hover);
  --clay: var(--surface-hover);
  --brand-mint: var(--accent);
  --brand-mint-strong: var(--accent);
  --brand-on-mint: var(--accent);
}
body.quizworld-home-page .hero { padding-top: clamp(40px, 6vw, 88px); }

body.quizworld-home-page .eyebrow { color: var(--brand-mint); }
body.quizworld-home-page .button.primary {
  background: var(--brand-mint); color: var(--brand-on-mint); border-color: transparent;
  box-shadow: none;
}
body.quizworld-home-page .button.primary:hover { background: var(--brand-mint-strong); }
body.quizworld-home-page .button.primary svg { fill: currentColor; }
body.quizworld-home-page .button.secondary { border: 1.5px solid var(--border); background: transparent; color: var(--text); }
body.quizworld-home-page .button.secondary:hover { background: var(--surface-hover); }
body.quizworld-home-page .signin-button svg { fill: currentColor; }
body.quizworld-home-page .text-link { color: var(--brand-mint); }
body.quizworld-home-page .hero-mark img { object-fit: contain; }
body.quizworld-home-page .brand .brand-mark-img { width: 34px; height: 34px; object-fit: contain; }

/* Join with a code */
.join-inline { display: grid; gap: 8px; margin: 22px 0 0; max-width: 460px; }
.join-inline label { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight:600; }
.join-inline .join-row { display: flex; gap: 10px; }
.join-inline input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border-radius: var(--radius-input);
  border: 1px solid var(--line); background: var(--surface-hover); color: var(--text);
  font: inherit; font-weight:600; letter-spacing: .12em; text-transform: uppercase;
}
.join-inline input::placeholder { letter-spacing: .02em; text-transform: none; font-weight:600; color: var(--muted); }
.join-inline input:focus-visible { outline: 3px solid var(--brand-mint); outline-offset: 2px; }
.join-inline .button { height: 48px; }
.join-inline .resume-link { font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.join-inline .resume-link:hover { color: var(--text); }

body.quizworld-home-page .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { body.quizworld-home-page .path-grid { grid-template-columns: 1fr; } .join-inline { max-width: none; } }

.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 34px; }
.section-cta .fine { margin: 0; max-width: 520px; font-size: .9rem; color: var(--muted); }

/* Footer */
.site-footer-rich { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); gap: 32px; align-items: start; padding: 40px clamp(20px, 5vw, 64px) 52px; text-align: left; }
.site-footer-rich .footer-brand p { margin: 12px 0 0; max-width: 32ch; color: var(--muted); }
.site-footer-rich .footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.site-footer-rich .footer-links div { display: grid; gap: 8px; align-content: start; }
.site-footer-rich .footer-links b { color: var(--text); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer-rich .footer-links a { color: var(--muted); text-decoration: none; }
.site-footer-rich .footer-links a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 860px) { .site-footer-rich { grid-template-columns: 1fr; } .site-footer-rich .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quizworld-home-page .skip-link:not(:focus) { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Section surfaces: cool neutrals and green-tinted darks instead of warm beige. */
body.quizworld-home-page { background: var(--bg); }
body.quizworld-home-page .surface-light { color: var(--text); background: var(--surface); }
body.quizworld-home-page .flow-section { color: var(--text); background: var(--surface); }
body.quizworld-home-page .creator-section { color: var(--text); background: var(--surface); }
body.quizworld-home-page .faq-section { color: var(--text); background: var(--surface-hover); }
body.quizworld-home-page .feature-band { background: var(--surface); }
body.quizworld-home-page .proof-section { background: var(--surface); }
body.quizworld-home-page .final-cta { background: var(--surface); }
body.quizworld-home-page .site-footer { background: var(--bg); }
body.quizworld-home-page .path-panel { background: var(--bg); border-color: var(--border); box-shadow: none; }
body.quizworld-home-page .path-panel.accent { background: var(--surface); border-color: var(--border); color: var(--text); }
body.quizworld-home-page .path-panel.accent .text-link { color: var(--text-muted); }
body.quizworld-home-page .path-panel .text-link { color: var(--text); font-weight:600; }
body.quizworld-home-page .feature-card { background: var(--surface-hover); border-color: var(--border); }
body.quizworld-home-page .flow-step { background: var(--bg); border-color: var(--border); }
body.quizworld-home-page .flow-step span { background: var(--surface-hover); color: var(--text); }
body.quizworld-home-page .quote-card { background: var(--surface-hover); border-color: var(--border); }
body.quizworld-home-page .faq-item { background: var(--bg); border-color: var(--border); }
body.quizworld-home-page .creator-note { border-left-color: var(--border); }
body.quizworld-home-page .creator-media img { background: var(--surface-hover); }
body.quizworld-home-page .panel-icon { background: var(--surface-hover); color: var(--text); }
body.quizworld-home-page .path-panel.accent .panel-icon { background: var(--surface-hover); color: var(--text-muted); }