/* HQ Site Experience Preview v1: page-specific refinements. No shared tool scripts or global site stylesheet are modified. */
:root{--hq-ink:#132b49;--hq-navy:#1b3556;--hq-purple:#5e35c9;--hq-soft:#edf3fb;--hq-border:#cbd9ed}
.hq-experience-spotlight{margin:32px 0 22px;padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(22px,4vw,48px);align-items:center;border-radius:28px;background:linear-gradient(130deg,#172b4c 0%,#213e64 70%,#30316c 100%);color:#f9fbff;box-shadow:0 22px 46px rgba(23,43,76,.16);isolation:isolate}
.hq-experience-overline{display:inline-block;font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:850;color:#8ce6d9;margin-bottom:10px}
.hq-experience-copy h2{color:#fff;font-size:clamp(24px,2.7vw,37px);line-height:1.15;letter-spacing:-.035em;margin:0 0 14px;max-width:600px}
.hq-experience-copy p{color:#e4ecf7;line-height:1.62;font-size:16px;max-width:560px;margin:0 0 18px}
.hq-experience-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.hq-experience-tags span{border:1px solid rgba(209,233,255,.3);background:rgba(255,255,255,.10);border-radius:999px;color:#eef8ff;padding:7px 11px;font-size:12px;font-weight:750}
.hq-experience-action{display:inline-flex;align-items:center;gap:14px;min-height:46px;background:linear-gradient(110deg,#f7b13d,#8062f0);color:#15183a;text-decoration:none;padding:11px 17px;border-radius:13px;font-size:14px;font-weight:850;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.hq-experience-action:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hq-experience-action:focus-visible{outline:3px solid #fbeaa6;outline-offset:3px}
.hq-experience-figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(220,235,255,.38);background:#f4f7fb;box-shadow:0 18px 32px rgba(0,0,0,.2)}
.hq-experience-figure img{display:block;width:100%;height:auto;aspect-ratio:575/372;object-fit:cover}
.hq-experience-figure figcaption{font-size:12px;color:#253e5e;padding:9px 13px;background:#f4f7fb}
/* Tool cards are actions, not lookalike status boxes. Keep existing buttons. */
body:has(.hq-experience-teacher-hero) main .tool-card{border-color:#d7e1f0;transition:border-color .16s ease, box-shadow .16s ease,transform .16s ease}
body:has(.hq-experience-teacher-hero) main .tool-card:hover{border-color:#adbef0;box-shadow:0 18px 36px rgba(19,42,80,.12);transform:translateY(-2px)}
body:has(.hq-experience-teacher-hero) main .tool-card a.btn{min-height:43px;display:inline-flex;align-items:center;justify-content:center;line-height:1.25;text-align:center;white-space:normal}
body:has(.hq-experience-teacher-hero) main .tool-card a.btn:focus-visible{outline:3px solid #6854d8;outline-offset:3px}
.hq-experience-teacher-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);align-items:center;gap:clamp(18px,3vw,42px)}
.hq-experience-hero-copy{min-width:0}
.hq-experience-hero-image{margin:0;border-radius:18px;overflow:hidden;background:#eaf1f9;border:1px solid #cdd9ed;box-shadow:0 16px 30px rgba(25,47,81,.10)}
.hq-experience-hero-image img{display:block;width:100%;height:auto;aspect-ratio:575/372;object-fit:cover}
.hq-experience-hero-image figcaption{font-size:11px;color:#314d70;font-weight:750;padding:8px 12px;background:#edf3fb}
/* Explanatory FAQs are intentionally below the Classroom Screen tool, not above it. */
.hq-experience-guide{max-width:1240px;margin:12px auto 44px;padding:24px clamp(16px,3vw,26px);border-radius:24px;background:linear-gradient(120deg,#e9f1fb,#f3f0ff);border:1px solid #d5def2;color:var(--hq-ink)}
.hq-experience-guide-head h2{font-size:clamp(22px,2vw,29px);line-height:1.2;letter-spacing:-.024em;margin:0 0 8px;color:#1d3454}
.hq-experience-guide-head p{color:#415774;max-width:850px;margin:0 0 16px;line-height:1.55}
.hq-experience-guide .hq-experience-overline{color:#5637af}
.hq-experience-questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hq-experience-questions details{border:1px solid #c8d6ed;border-radius:14px;padding:14px 15px;background:#fff;min-width:0}
.hq-experience-questions summary{cursor:pointer;color:#1b3556;font-size:14px;font-weight:800;line-height:1.4}
.hq-experience-questions details p{line-height:1.55;font-size:13px;color:#405773;margin:11px 0 0}
.hq-experience-questions summary:focus-visible{outline:3px solid #654cce;outline-offset:4px;border-radius:4px}
html.hq-student-view .hq-experience-guide{display:none!important}
@media(max-width:960px){.hq-experience-teacher-hero{grid-template-columns:1fr}.hq-experience-hero-image{max-width:580px}.hq-experience-spotlight{grid-template-columns:1fr;gap:22px}.hq-experience-figure{max-width:700px}.hq-experience-questions{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hq-experience-spotlight{padding:22px 18px;margin:24px 0 12px;border-radius:20px}.hq-experience-copy h2{font-size:26px}.hq-experience-copy p{font-size:14px}.hq-experience-tags span{font-size:11px}.hq-experience-questions{grid-template-columns:1fr}.hq-experience-guide{margin:12px 12px 26px;padding:18px 16px}}
@media(prefers-reduced-motion:reduce){.hq-experience-action,body:has(.hq-experience-teacher-hero) main .tool-card{transition:none!important}}