/* HQ Approved Visual System — public shell and discovery pages, Oct 2026. */
:root{--hq4-navy:#071b46;--hq4-blue:#126af2;--hq4-gold:#ffcb32;--hq4-ink:#132c59;--hq4-sky:#39bcf5;--hq4-line:#cbd9f1;--hq4-shadow:0 10px 29px rgba(7,27,70,.095)}
body.hq-approved-v4{background:linear-gradient(115deg,#e9f5ff 0%,#f7faff 49%,#fff7e4 100%);color:var(--hq4-ink)}
body.hq-approved-v4 .site-header{background:var(--hq4-navy);border-bottom:4px solid var(--hq4-gold);box-shadow:0 8px 22px #091d4d22}
body.hq-approved-v4 .site-header .nav{max-width:1320px;padding:11px 24px;gap:13px}
body.hq-approved-v4 .site-header .brand img{width:auto;height:45px;max-width:92px;filter:brightness(1.12)}
body.hq-approved-v4 .site-header .nav-links>a,body.hq-approved-v4 .site-header .nav-parent{color:#f4f8ff!important;font-size:13px!important;font-weight:800;letter-spacing:.005em;border-radius:12px!important;padding:13px 11px!important}
body.hq-approved-v4 .site-header .nav-links>a:hover,body.hq-approved-v4 .site-header .nav-parent:hover,body.hq-approved-v4 .site-header .nav-links>a.active,body.hq-approved-v4 .site-header .nav-parent.active{color:var(--hq4-gold)!important;background:#ffffff19!important}
body.hq-approved-v4 .site-header .menu-btn{color:var(--hq4-navy);background:#ffcf38;border-color:#ffd966;font-weight:900;min-width:46px;min-height:46px}
body.hq-approved-v4 .site-header .nav-dropdown-menu{background:#fff;box-shadow:0 25px 55px #09205040;border:1px solid #cddcf1;border-radius:19px}
body.hq-approved-v4 .site-header .nav-dropdown-menu a{color:#213a5b!important;text-align:left!important}
body.hq-approved-v4 .site-header .nav-dropdown-menu a:hover,body.hq-approved-v4 .site-header .nav-dropdown-menu a:focus-visible{background:#eaf2ff!important;color:#124caf!important;outline-offset:2px}
body.hq-approved-v4 .site-header .nav-dropdown-menu strong{font-size:13px;color:#113269}
body.hq-approved-v4 .site-header .nav-dropdown-menu a span{font-size:11px;color:#53708f}
/* Teacher mega-menu groups are injected only from verified live links. */
@media(min-width:901px){body.hq-approved-v4 .site-header .nav-dropdown:first-child{position:static}body.hq-approved-v4 .site-header .nav-dropdown:first-child .nav-dropdown-menu.hq4-teacher-mega{position:absolute;left:50%;top:calc(100% - 2px);width:min(970px,calc(100vw - 48px));transform:translate(-50%,9px);padding:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;max-height:min(74vh,600px);overflow:auto}body.hq-approved-v4 .site-header .nav-dropdown:first-child:hover .nav-dropdown-menu.hq4-teacher-mega,body.hq-approved-v4 .site-header .nav-dropdown:first-child:focus-within .nav-dropdown-menu.hq4-teacher-mega{transform:translate(-50%,0)}body.hq-approved-v4 .hq4-nav-group{min-width:0}body.hq-approved-v4 .hq4-nav-group-title{font-size:12px;text-transform:uppercase;letter-spacing:.09em;padding:7px 11px 6px;color:#2355af;font-weight:900;border-bottom:2px solid #cfe0fa;margin-bottom:6px}body.hq-approved-v4 .hq4-mobile-toggle{display:none!important}}
body.hq-approved-v4 .hq4-nav-group a{display:block!important;text-decoration:none!important}
body.hq-approved-v4 .hq4-menu-viewall{background:#eaf2ff!important;border:1px solid #bed3f3!important;margin-top:9px;font-weight:850;color:#1247a4!important}
/* Deliberately simple, separately expandable touch menu on phones and Chromebooks. */
@media(max-width:900px){body.hq-approved-v4 .site-header .nav.open .nav-links{background:#fff;border:1px solid #cad7ed;box-shadow:0 18px 34px #09215030;border-radius:16px;margin-top:9px;padding:9px;max-height:calc(100dvh - 100px);overflow:auto}body.hq-approved-v4 .site-header .nav.open .nav-links>a,body.hq-approved-v4 .site-header .nav.open .nav-parent{color:#15376f!important;background:#f4f8ff!important;min-height:46px!important;border-radius:9px!important;padding:11px 14px!important}body.hq-approved-v4 .site-header .nav.open .nav-links>a:hover,body.hq-approved-v4 .site-header .nav.open .nav-parent:hover{color:#07359e!important;background:#e0edff!important}body.hq-approved-v4 .site-header .nav-dropdown{display:grid!important;grid-template-columns:1fr 46px;align-items:start;margin-bottom:4px;gap:5px}body.hq-approved-v4 .site-header .nav-dropdown .nav-parent{grid-column:1}body.hq-approved-v4 .site-header .hq4-mobile-toggle{grid-column:2;grid-row:1;min-height:46px;min-width:46px;display:flex;align-items:center;justify-content:center;border:1px solid #d5e3f8;border-radius:9px;background:#e6efff;color:#153c7d;cursor:pointer;font-weight:900;font-size:19px}body.hq-approved-v4 .site-header .nav-dropdown-menu{grid-column:1/-1;display:none!important;position:static!important;width:100%!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:none!important;background:#fff!important;border:1px solid #dce6f5!important;box-shadow:none!important;margin:0!important;padding:8px!important}body.hq-approved-v4 .site-header .nav-dropdown.hq4-expanded>.nav-dropdown-menu{display:block!important}body.hq-approved-v4 .site-header .nav-dropdown .nav-dropdown-menu a{min-height:44px;padding:10px!important}body.hq-approved-v4 .site-header .hq4-nav-group-title{font-size:12px;font-weight:900;color:#315ba2;padding:9px 10px 5px}body.hq-approved-v4 .site-header .hq4-nav-group{border-bottom:1px solid #eff2f8}body.hq-approved-v4 .site-header .hq4-nav-group a span{display:none}}
/* Distinct and honest marketing design, does not modify underlying tools. */
body.hq-approved-v4.hq-v4-discovery .wrap{max-width:1300px;padding-top:28px}
body.hq-approved-v4.hq-v4-discovery h1,body.hq-approved-v4.hq-v4-discovery h2,body.hq-approved-v4.hq-v4-discovery h3{color:#0a2858}
body.hq-approved-v4.hq-v4-discovery h1{font-weight:950;letter-spacing:-.043em;line-height:1.1}
body.hq-approved-v4.hq-v4-discovery .eyebrow{font-weight:900;color:#125ecb;letter-spacing:.105em}
body.hq-approved-v4.hq-v4-discovery .hero,body.hq-approved-v4.hq-v4-discovery .page-hero{border:1px solid #b9d1ef;background:linear-gradient(115deg,#e7f4ff,#fff 67%,#fff1ce);box-shadow:var(--hq4-shadow)}
body.hq-approved-v4.hq-v4-discovery .hero .lead,body.hq-approved-v4.hq-v4-discovery .page-hero .lead{color:#385b7e;font-size:clamp(16px,1.45vw,19px)}
body.hq-approved-v4.hq-v4-discovery .hero .actions{display:flex;gap:12px;flex-wrap:wrap}
body.hq-approved-v4.hq-v4-discovery .hero .btn,body.hq-approved-v4.hq-v4-discovery .page-hero .btn{border-radius:13px;min-height:48px;font-weight:850;box-shadow:0 7px 15px #0b3a8d26}
body.hq-approved-v4.hq-v4-discovery .btn-primary{background:linear-gradient(125deg,#126af2,#0746b8);color:#fff;border:1px solid #1554bd}
body.hq-approved-v4.hq-v4-discovery .btn-secondary,body.hq-approved-v4.hq-v4-discovery .hq4-student-cta{background:var(--hq4-gold)!important;color:#0a2349!important;border:1px solid #dfaa15!important}
body.hq-approved-v4.hq-v4-discovery .hq4-featured-intro{margin:26px 0 12px}.hq4-featured-intro h2{font-size:clamp(23px,3vw,32px);margin:0 0 4px}.hq4-featured-intro p{color:#506886;margin:0}
body.hq-approved-v4.hq-v4-discovery .hq4-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:14px 0 30px}
body.hq-approved-v4.hq-v4-discovery .hq4-feature{--accent:#126af2;--pale:#edf5ff;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 34%,#dbe7f6);border-top:5px solid var(--accent);border-radius:17px;background:linear-gradient(160deg,#fff,var(--pale));box-shadow:var(--hq4-shadow);text-decoration:none;color:#19395f;transition:transform .15s,box-shadow .15s}
body.hq-approved-v4.hq-v4-discovery .hq4-feature:hover,body.hq-approved-v4.hq-v4-discovery .hq4-feature:focus-visible{transform:translateY(-2px);box-shadow:0 18px 35px #071b462a;outline-offset:3px}
body.hq-approved-v4.hq-v4-discovery .hq4-feature-copy{padding:15px 16px 8px}
body.hq-approved-v4.hq-v4-discovery .hq4-feature h3{font-size:17px;margin:0 0 7px;font-weight:900;line-height:1.25}
body.hq-approved-v4.hq-v4-discovery .hq4-feature p{font-size:13px;margin:0;color:#435875;line-height:1.5}
body.hq-approved-v4.hq-v4-discovery .hq4-feature img{width:100%;height:134px;object-fit:cover;object-position:top center;margin-top:auto;border-top:1px solid #d8e6f8}
body.hq-approved-v4.hq-v4-discovery .hq4-feature-icon{font-size:34px;line-height:1;padding:12px 16px 14px;background:var(--pale);margin-top:auto}
body.hq-approved-v4.hq-v4-discovery .hq4-feature-action{font-size:13px;color:#fff;background:var(--accent);font-weight:850;padding:11px 14px;text-align:center}
body.hq-approved-v4.hq-v4-discovery .hq4-feature[data-color="pink"]{--accent:#db347a;--pale:#fff0f8}
body.hq-approved-v4.hq-v4-discovery .hq4-feature[data-color="purple"]{--accent:#7446c9;--pale:#f3edff}
body.hq-approved-v4.hq-v4-discovery .hq4-feature[data-color="green"]{--accent:#138a57;--pale:#edfcf4}
body.hq-approved-v4.hq-v4-discovery .hq4-feature[data-color="gold"]{--accent:#c78311;--pale:#fff8e5}
body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card{border:1.5px solid #cbdaf0;border-top:5px solid #126af2;border-radius:17px;box-shadow:0 10px 27px #0c367414;background:#fff;display:flex;flex-direction:column;min-height:258px;transition:box-shadow .17s,transform .17s}
body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card:nth-child(3n+2){border-top-color:#8a55ec}
body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card:nth-child(3n){border-top-color:#16b964}
body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px #0b316322}
body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card h3{font-size:20px}
body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card .btn{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
body.hq-approved-v4.hq-v4-discovery .tool-hub-card{border:1.5px solid #cbdaf0;border-top:5px solid #126af2;border-radius:16px;box-shadow:0 10px 27px #0c367414}
body.hq-approved-v4.hq-v4-discovery .hq4-filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 23px}
body.hq-approved-v4.hq-v4-discovery .hq4-filter{border:1px solid #bbd0ed;border-radius:999px;background:#edf4ff;color:#12417c;padding:9px 14px;min-height:43px;font-size:13px;font-weight:850;cursor:pointer}
body.hq-approved-v4.hq-v4-discovery .hq4-filter[aria-pressed="true"]{background:#0d4cba;color:#fff;border-color:#0d4cba}
body.hq-approved-v4.hq-v4-discovery .hq4-filter:focus-visible{outline:3px solid #ffcb32;outline-offset:2px}
body.hq-approved-v4.hq-v4-discovery .tool-card.hq4-hidden,body.hq-approved-v4.hq-v4-discovery section.hq4-hidden{display:none!important}
body.hq-approved-v4.hq-v4-discovery .hq4-category-note{font-size:13px;color:#547198;margin:0 0 10px}
@media(max-width:1080px){body.hq-approved-v4.hq-v4-discovery .hq4-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){body.hq-approved-v4.hq-v4-discovery .wrap{padding:20px 13px 50px}body.hq-approved-v4.hq-v4-discovery .hero,body.hq-approved-v4.hq-v4-discovery .page-hero{padding:24px 19px!important}body.hq-approved-v4.hq-v4-discovery .hq4-feature-grid{grid-template-columns:1fr}body.hq-approved-v4.hq-v4-discovery .hq4-feature img{height:155px}body.hq-approved-v4.hq-v4-discovery .grid-3 .tool-card{min-height:unset}body.hq-approved-v4.hq-v4-discovery .hq4-filter{font-size:12px}body.hq-approved-v4 .site-header .nav{padding:9px 13px}}
@media(prefers-reduced-motion:reduce){body.hq-approved-v4 .hq4-feature,body.hq-approved-v4 .tool-card{transition:none!important;transform:none!important}}

body.hq-approved-v4.hq-v4-discovery .hero .btn-tertiary{background:#fff!important;color:#0e428c!important;border:1.5px solid #adcaf0!important;opacity:1!important;box-shadow:0 5px 12px #0b3a8d12!important}

/* Desktop disclosure state: Escape must override retained focus or hover. */
@media(min-width:901px){
  body.hq-approved-v4 .site-header .nav-dropdown[data-hq-menu-open="false"]>.nav-dropdown-menu{
    visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  }
  body.hq-approved-v4 .site-header .nav-dropdown[data-hq-menu-open="true"]>.nav-dropdown-menu{
    visibility:visible;opacity:1;pointer-events:auto;
  }
  body.hq-approved-v4 .site-header .nav-dropdown[data-hq-menu-open="false"]>.nav-parent .nav-chevron{transform:none}
  body.hq-approved-v4 .site-header .nav-dropdown[data-hq-menu-open="false"]::after{pointer-events:none!important}
}