/* v21.0: October 2026 product + bilingual report refresh. Kept separate from original design system. */
:root{--u-accent:#21c5d5;--u-surface:#111e2b;--u-muted:#9fb2c2}
.ux-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.ux-card{display:block;padding:25px;border:1px solid rgba(94,144,167,.24);border-radius:18px;background:linear-gradient(150deg,rgba(32,52,67,.83),rgba(15,29,43,.94));color:#f4f8fc;text-decoration:none;min-height:180px;transition:transform .16s,border-color .16s}
.ux-card:hover{transform:translateY(-2px);border-color:rgba(33,197,213,.52)}.ux-card h3{font-size:19px;line-height:1.25;margin:11px 0 9px;color:#effaff}.ux-card p{color:#b9cbd8;font-size:14px;line-height:1.7;margin:0}.ux-card-icon{display:inline-flex;width:42px;height:42px;border-radius:12px;background:rgba(33,197,213,.1);align-items:center;justify-content:center;color:var(--u-accent);font-size:22px;font-weight:700}
.features-2026{background:#0b1825}.report-new-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.report-new-card{background:linear-gradient(165deg,#142232,#101b29);border-radius:18px;overflow:hidden;border:1px solid rgba(96,148,168,.24);display:flex;flex-direction:column;color:#eaf4fa}.report-new-card>img{width:100%;height:330px;object-fit:contain;object-position:top;background:#ebf1f5;padding:12px}.report-new-card>div{padding:20px;flex:1;display:flex;flex-direction:column}.report-new-card h3{font-size:18px;margin:0 0 6px;color:#f0f7fd}.report-new-card p{color:#afc3d2;line-height:1.55;margin:0 0 18px;font-size:14px}.lang-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}.lang-links a{color:#0ee2ee;border:1px solid rgba(26,207,218,.42);padding:9px 12px;line-height:1.3;border-radius:8px;font-weight:650;text-decoration:none;font-size:14px}.lang-links a:hover{background:rgba(18,204,222,.16)}.language-provider{margin:15px 0 25px}
.screens-2026-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.screens-2026-grid figure{margin:0;background:#13202b;padding:12px;border:1px solid rgba(91,137,158,.2);border-radius:20px}.screens-2026-grid img{display:block;width:100%;max-height:490px;object-fit:contain;object-position:top;border-radius:12px;background:#0b131c}.screens-2026-grid figcaption{text-align:center;color:#afc3d2;padding-top:11px;font-size:13px}.hero-current-shot img{width:100%;max-height:540px;object-fit:contain;border-radius:15px}.hero-current-shot{max-width:360px;margin:0 auto}.hero-current-shot button{background:transparent;border:0;width:100%;padding:0;cursor:zoom-in}.hero-current-shot figcaption{color:#bdcfda}.feature-screen{background:#13202b;border:1px solid rgba(84,136,156,.25);border-radius:18px;padding:14px;margin:0 auto;max-width:345px;color:#a3bbc8}.feature-screen img{display:block;width:100%;max-height:650px;object-fit:contain}.feature-screen figcaption{font-size:13px;line-height:1.5;margin:10px 0}
.ux-support-faq{background:#102233;padding:20px;border:1px solid rgba(82,154,175,.26);border-radius:20px}.ux-support-faq h3{margin:16px 0 7px;color:#ecfaff}.ux-support-faq p{margin:0 0 13px;color:#adc3d2}
@media(max-width:960px){.ux-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-new-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.screens-2026-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-current-shot{margin-top:20px}}
@media(max-width:600px){.ux-card-grid,.report-new-grid{grid-template-columns:1fr}.screens-2026-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.screens-2026-grid figure{padding:7px}.report-new-card>img{height:300px}.hero-current-shot{max-width:300px}.ux-card{min-height:auto}.ux-card h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.ux-card{transition:none}.ux-card:hover{transform:none}}
/* White text on the one deliberately dark feature section */
.features-2026 .sec-head h2{color:#f0f7fc}
.features-2026 .sec-head p{color:#bed0dd}
.features-2026 .sec-head .eyebrow{color:#36d2e3}
.features-2026 .ux-card{background:linear-gradient(150deg,#1a2a38,#13212e)}
/* Wider report cards retain original site's calm neutral typography */
.report-new-card a:focus-visible,.lang-links a:focus-visible,.ux-card:focus-visible{outline:3px solid #12bace;outline-offset:4px}
.navlinks{gap:12px}.navlinks a{font-size:12px}.navlinks .play-badge{width:108px}
@media (min-width:981px) and (max-width:1180px){
 .navlinks{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:none;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
 .navlinks.open{display:flex}
 .navlinks a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
 .navlinks .btn,.navlinks .play-badge-link{margin-top:14px;align-self:flex-start}
 .navtoggle{display:block}
}

/* v21.1 — readable report previews (top of page 1, linked to the PDF) */
.report-new-card>.report-thumb{position:relative;display:block;background:#fff;border-bottom:1px solid rgba(96,148,168,.24);overflow:hidden}
.report-new-card>.report-thumb img{display:block;width:100%;height:auto;transition:transform .25s ease}
.report-new-card>.report-thumb span{position:absolute;right:12px;bottom:12px;background:rgba(9,22,34,.86);color:#fff;font-size:13px;font-weight:600;line-height:1;padding:9px 13px;border-radius:999px}
.report-new-card>.report-thumb:hover img{transform:scale(1.02)}
.report-new-card>.report-thumb:focus-visible{outline:3px solid #12bace;outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.report-new-card>.report-thumb img{transition:none}.report-new-card>.report-thumb:hover img{transform:none}}

/* v21.1 — Speed Test: what's new in 3.38 */
.speed-new-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.speed-new-grid .ux-card h3{margin-top:0}
.speed-new-grid .ux-card .tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:#12bace;margin-bottom:8px}
@media(max-width:700px){.speed-new-grid{grid-template-columns:1fr}}