/* HQ K-12 Visual Preview v3. Applies only to homepage and four directory pages.
   Generated classroom illustration is illustrative; device screenshots show actual HQ HTML. */
.hq-visual-v3{--v3-navy:#122b53;--v3-bright:#fff;--v3-cyan:#46d8fa;--v3-yellow:#ffd15f;--v3-ink:#183356;background:#eaf0fa}
.hq-visual-v3 .hero{background:linear-gradient(112deg,rgba(12,38,79,.98),rgba(19,47,92,.96) 68%,rgba(51,40,118,.91));padding:48px 45px 43px}
.hq-visual-v3 .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:34px;align-items:center}
.hq-visual-v3 .hero h1{font-size:clamp(42px,4vw,65px);line-height:1.09;max-width:720px;letter-spacing:-.05em}
.hq-visual-v3 .hero .lead{font-size:clamp(17px,1.45vw,22px);line-height:1.55;max-width:650px}
.hq-visual-v3 .hero .eyebrow{font-size:12px}
.hq-visual-v3 .hero .trust{margin-top:28px;flex-wrap:wrap}
.hq-v3-showcase{isolation:isolate;position:relative;min-width:0;padding:27px 10px 22px 22px;background:radial-gradient(circle at 50% 45%,rgba(90,170,252,.24),transparent 62%);z-index:1}
.hq-v3-showcase:before{content:"";position:absolute;inset:1% -2% -3% 25%;z-index:-1;border-radius:30px;background:linear-gradient(0deg,rgba(13,39,73,.60),rgba(0,39,75,.12)),url('/assets/hq-classroom-illustration-v3.webp') center/cover;transform:rotate(-3deg);box-shadow:0 15px 30px rgba(0,0,0,.17);opacity:.70}
.hq-v3-device-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(240,250,255,.95);color:#244e78;font-size:10px;letter-spacing:.12em;font-weight:900;padding:9px 12px;border-radius:8px 8px 0 0;white-space:nowrap}
.hq-v3-live-dot{height:8px;width:8px;border-radius:50%;background:#05a37c;box-shadow:0 0 0 3px rgba(5,163,124,.16)}
.hq-v3-laptop{border:8px solid #121c2c;border-bottom-width:13px;background:#101a2b;box-shadow:0 23px 33px rgba(5,10,40,.4);border-radius:13px 13px 5px 5px;overflow:hidden}
.hq-v3-laptop-top{display:flex;gap:4px;padding:6px;background:#0d1528}.hq-v3-laptop-top span{width:4px;height:4px;border-radius:50%;background:#747e97}
.hq-v3-laptop>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;background:white}
.hq-v3-laptop-foot{width:108%;margin-left:-4%;height:11px;border-radius:1px 1px 16px 16px;background:linear-gradient(#f0f4fa 0%,#b1b8c7 80%,#707889 100%)}
.hq-v3-showcase-caption{color:#ebf5ff;text-align:center;font-weight:720;font-size:12px;margin-top:13px;text-shadow:0 2px 4px #0b234a}
.hq-v3-quick-strip{margin:16px 0 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.hq-v3-quick-strip>.panel-kicker,.hq-v3-quick-strip>h2,.hq-v3-quick-strip>.quick-access-intro{display:none!important}
.hq-v3-quick-strip>a{min-width:0;background:#fff!important;border:1px solid #bbc8e9!important;box-shadow:0 5px 12px rgba(15,35,76,.07);padding:11px!important;border-radius:12px!important}
.hq-v3-quick-strip .feature-icon{font-size:20px}.hq-v3-quick-strip p{font-size:11px;line-height:1.35}.hq-v3-quick-strip strong{font-size:13px}.hq-v3-quick-strip .feature-arrow{color:#4b48c2}
.hq-v3-tool-gallery{padding:40px 32px 38px;margin:25px 0 30px;border-radius:26px;background:linear-gradient(155deg,#dbe8ff,#f0eaff 62%,#d9f4f1);border:1px solid #c0cff0;box-shadow:0 15px 28px rgba(24,47,90,.10)}
.hq-v3-overline{font-size:12px;letter-spacing:.14em;font-weight:900;color:#5455b5}
.hq-v3-tools-heading{max-width:780px;margin-bottom:24px}.hq-v3-tools-heading h2{margin:7px 0 7px;color:#162d53;font-size:clamp(28px,3vw,38px);line-height:1.14}.hq-v3-tools-heading p{color:#3d5578;margin:0;line-height:1.55}
.hq-v3-device-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.hq-v3-tool-card{border-radius:18px;overflow:hidden;min-width:0;box-shadow:0 11px 22px rgba(20,43,85,.11);border:1px solid rgba(255,255,255,.9);transition:transform .2s ease,box-shadow .2s ease}
.hq-v3-tool-card:hover,.hq-v3-tool-card:focus-within{transform:translateY(-3px);box-shadow:0 18px 27px rgba(20,43,85,.17)}
.hq-v3-sky{background:#bce8ff}.hq-v3-lavender{background:#dcd1ff}.hq-v3-mint{background:#baf3dc}.hq-v3-gold{background:#ffe3a8}.hq-v3-coral{background:#ffd0cc}
.hq-v3-card-link{display:flex;flex-direction:column;height:100%;color:#193150;text-decoration:none!important;outline-offset:4px}
.hq-v3-card-media{height:159px;display:grid;place-items:center;padding:15px 12px 0;overflow:hidden;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.75),transparent 67%)}
.hq-v3-laptop-frame,.hq-v3-tablet-frame,.hq-v3-phone-frame{background:#10182c;border:5px solid #15223c;border-radius:10px;box-shadow:0 8px 16px rgba(6,22,46,.26);overflow:hidden;transform:rotate(-1.5deg);width:100%;max-width:215px;height:115px;position:relative}
.hq-v3-laptop-frame:after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:5px;background:linear-gradient(90deg,#d6deea,#6c778d,#d6deea)}
.hq-v3-tablet-frame{border-width:7px;border-radius:14px;transform:rotate(2deg);width:90%;max-width:198px;height:130px}
.hq-v3-phone-frame{border-width:7px;border-radius:18px;transform:rotate(5deg);width:73px;height:143px}
.hq-v3-card-media img,.hq-v3-directory-device img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;background:#fff}
.hq-v3-phone-frame img{object-fit:cover;object-position:left top}
.hq-v3-card-copy{display:flex;flex:1;flex-direction:column;padding:14px 15px 17px;gap:7px}
.hq-v3-card-copy h3{font-size:19px;line-height:1.1;color:#102c4d;margin:0;letter-spacing:-.025em}
.hq-v3-card-copy p{font-size:13px;line-height:1.46;margin:0 0 12px;color:#233c58;flex:1}
.hq-v3-card-action{display:block;background:#143866;color:#fff;font-weight:850;font-size:12px;border-radius:10px;padding:12px;text-align:center;margin-top:auto}
.hq-v3-lavender .hq-v3-card-action{background:#532a98}.hq-v3-mint .hq-v3-card-action{background:#026c55}.hq-v3-gold .hq-v3-card-action{background:#8b4b02}.hq-v3-coral .hq-v3-card-action{background:#9e302b}
.hq-v3-card-link:hover .hq-v3-card-action,.hq-v3-card-link:focus-visible .hq-v3-card-action{filter:brightness(1.15)}
.hq-v3-classroom-context{display:grid;grid-template-columns:1fr 1fr;min-height:340px;margin:20px 0 28px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 16px 35px rgba(18,52,95,.12)}
.hq-v3-context-photo{position:relative;min-height:350px;background:#83b1ba;overflow:hidden}.hq-v3-context-photo img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.hq-v3-caption-flag{position:absolute;bottom:20px;left:20px;background:#fff6d9;color:#3e3e30;font-weight:800;font-size:13px;border-radius:9px;padding:11px 13px;box-shadow:0 10px 20px #28465a55;transform:rotate(-2deg)}
.hq-v3-context-copy{padding:32px 36px 26px;background:linear-gradient(120deg,#fdfdff,#d7e8ff)}
.hq-v3-context-copy h2{font-size:clamp(29px,3vw,39px);line-height:1.08;letter-spacing:-.035em;color:#163353;margin:8px 0 14px}
.hq-v3-context-copy h2 em{font-style:normal;color:#3f75ce;text-decoration:underline;text-decoration-color:#f4bb42;text-underline-offset:5px}
.hq-v3-context-copy>p{color:#3f5272;font-size:15px;line-height:1.55}
.hq-v3-benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.hq-v3-benefits div{border-left:4px solid #5c77d6;padding-left:12px}.hq-v3-benefits div+div{border-color:#13a28c}
.hq-v3-benefits b{display:block;color:#19375d;font-size:14px}.hq-v3-benefits small{display:block;color:#4c637d;font-size:12px;line-height:1.45;margin-top:6px}
.hq-v3-quote{margin:0;background:#e3eafa;border-radius:12px;padding:15px 19px;border-left:4px solid #e6a73a}
.hq-v3-quote p{margin:0;color:#173a65;font-size:16px;font-style:italic;font-weight:760}
.hq-v3-quote footer{margin-top:8px;font-size:11px;color:#506b8d;font-weight:750}
.hq-visual-v3 .hq-v3-directory-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:center;position:relative;padding-right:35%}
.hq-v3-directory-device{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:32%;margin:0}
.hq-v3-directory-device .hq-v3-tablet-frame{max-width:360px;height:170px;width:100%;margin:0 auto;transform:rotate(1deg)}
.hq-v3-directory-device figcaption{font-size:11px;color:#496184;text-align:center;margin-top:9px}
.hq-visual-v3 .hq-experience-teacher-hero{overflow:hidden}
.hq-visual-v3 .hq-experience-teacher-hero figure{margin-right:0}
@media(max-width:1250px){.hq-v3-device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hq-v3-card-media{height:176px}.hq-v3-laptop-frame,.hq-v3-tablet-frame{max-width:275px}}
@media(max-width:950px){.hq-visual-v3 .hero-grid{grid-template-columns:1fr}.hq-v3-showcase{max-width:660px;width:100%;margin:0 auto}.hq-v3-quick-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.hq-v3-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hq-v3-classroom-context{grid-template-columns:1fr}.hq-v3-context-photo{min-height:260px}.hq-v3-context-copy{padding:27px}.hq-visual-v3 .hq-v3-directory-head{padding-right:30%;grid-template-columns:1fr}.hq-v3-directory-device{width:29%}}
@media(max-width:650px){.hq-visual-v3 .hero{padding:31px 18px}.hq-visual-v3 .hero h1{font-size:clamp(36px,9vw,48px)}.hq-v3-showcase{padding:24px 5px 12px}.hq-v3-showcase:before{left:14%}.hq-v3-quick-strip{gap:8px}.hq-v3-quick-strip>a{padding:10px!important}.hq-v3-quick-strip .feature-icon{display:none}.hq-v3-quick-strip p{display:none}.hq-v3-tool-gallery{padding:24px 14px;border-radius:17px}.hq-v3-device-grid{grid-template-columns:1fr}.hq-v3-tool-card{max-width:530px;width:100%;margin:0 auto}.hq-v3-card-media{height:180px}.hq-v3-laptop-frame,.hq-v3-tablet-frame{max-width:330px}.hq-v3-card-copy{padding:13px 19px 16px}.hq-v3-card-copy p{font-size:14px}.hq-v3-context-copy{padding:24px 19px}.hq-v3-context-photo{min-height:190px}.hq-v3-benefits{grid-template-columns:1fr;gap:12px}.hq-visual-v3 .hq-v3-directory-head{padding-right:20px;display:block;padding-bottom:25px}.hq-v3-directory-device{position:static;transform:none;width:100%;margin:20px auto 0}.hq-v3-directory-device .hq-v3-tablet-frame{max-width:430px;height:180px}}
@media(prefers-reduced-motion:reduce){.hq-v3-tool-card{transition:none}}

/* v3.1: Honest, genuinely mobile Writing Feedback capture—no cropped desktop UI. */
.hq-visual-v3 .hq-v3-phone-frame{width:92px;height:174px;transform:rotate(3deg)}
.hq-visual-v3 .hq-v3-phone-frame img{object-fit:cover;object-position:center top}
.hq-visual-v3 .hq-v3-phone-frame:before{content:"";position:absolute;z-index:2;width:18px;height:3px;border-radius:6px;background:#344458;top:1px;left:50%;transform:translateX(-50%)}
.hq-visual-v3 .hq-v3-phone-frame{box-shadow:0 12px 20px rgba(6,22,46,.30)}
.hq-visual-v3 .hq-v3-gold .hq-v3-card-media{height:190px}