/* Front door pages (/students /teachers /institutions /features). Tokens only; one orange button per page (the first .button.primary). */
.ff { max-width: 1040px; margin: 0 auto; padding: 0 16px 56px; }
.ff-hero { padding: clamp(56px, 9vw, 104px) 0 28px; }
.ff-kicker { margin: 0 0 8px; color: var(--accent-text, var(--accent)); font-weight: 700; letter-spacing: .12em; font-size: .8rem; }
.ff h1 { margin: 0 0 12px; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; max-width: 18ch; }
.ff-lead { margin: 0 0 22px; max-width: 56ch; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--text-muted); }
.ff-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-section { padding: 22px 0; }
.ff-section h2 { margin: 0 0 12px; font-size: 1.4rem; }
.ff-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ff-card { padding: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-card, 20px); background: var(--surface); border-top: 4px solid var(--tone, var(--accent)); }
.ff-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--tone-ink, var(--text)); }
.ff-card p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.ff-card[data-tone="orange"] { --tone: var(--tone-orange); } .ff-card[data-tone="teal"] { --tone: var(--tone-teal); }
.ff-card[data-tone="amber"] { --tone: var(--tone-amber); } .ff-card[data-tone="rose"] { --tone: var(--tone-rose); }
.ff-card[data-tone="violet"] { --tone: var(--tone-violet); } .ff-card[data-tone="lime"] { --tone: var(--tone-lime); }
.ff-faq { border: 1px solid var(--border-strong); border-radius: var(--radius-input, 14px); padding: 10px 14px; margin-bottom: 8px; background: var(--surface); }
.ff-faq summary { cursor: pointer; font-weight: 650; }
.ff-faq p { margin: 8px 0 0; color: var(--text-muted); }
.ff-links { display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--border); }
.ff-links a { color: var(--accent-text, var(--accent)); font-weight: 600; }
@media (max-width: 560px) { .ff-actions .button { flex: 1 1 100%; justify-content: center; } }

/* Landing: one live sample question and the most played quizzes (public/quiz-world/home.js) */
.fd-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 860px) { .fd-grid { grid-template-columns: 1.4fr 1fr; } }
.fd-sample, .fd-popular { padding: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-card, 20px); background: var(--surface); }
.fd-stem { margin: 0 0 12px; font-size: 1.1rem; font-weight: 600; line-height: 1.45; }
.fd-options { display: grid; gap: 8px; }
.fd-option:not(#qb) { justify-content: flex-start; text-align: left; min-height: 44px; height: auto; white-space: normal; }
.fd-option.fd-right:not(#qb) { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.fd-option.fd-wrong:not(#qb) { background: var(--bad-bg); color: var(--bad-text); border-color: var(--bad-border); }
.fd-result { margin: 12px 0; color: var(--text-muted); line-height: 1.5; }
.fd-popular h3 { margin: 0 0 8px; }
.fd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-quiz { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-input, 14px); background: var(--surface-hover); color: inherit; text-decoration: none; }
.fd-quiz small { color: var(--text-muted); }
.fd-audience { margin-top: 18px; color: var(--text-muted); }
.fd-audience a { color: var(--accent-text, var(--accent)); font-weight: 600; }