/* Root home page (sparxsolver.com/). Ported from Najm's landing page (web-main/sparxmaths/index.html + style.css):
   self-hosted Inter, no third-party URLs, no inline scripts. Strict root CSP: font-src/img-src 'self'. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --ink:#1f2937; --body:#374151; --muted:#4b5563; --line:#e5e7eb; --green:#047857; --green-hover:#065f46; --star:#b45309; color-scheme:light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.home { margin:0; background:#fff; color:var(--body); font:400 1rem/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.home a { color:var(--green); }
.home a:focus-visible, .home .install-btn:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
.skip { position:absolute; left:-9999px; top:0; background:#fff; padding:.5rem 1rem; z-index:10; }
.skip:focus { left:1rem; }
.wrap { max-width:60rem; margin:0 auto; padding-left:max(1.25rem, env(safe-area-inset-left)); padding-right:max(1.25rem, env(safe-area-inset-right)); }
.site-header .wrap { display:flex; align-items:center; gap:.75rem; min-height:4.5rem; padding-top:env(safe-area-inset-top); }
.brand { display:flex; align-items:center; gap:.6rem; min-height:44px; flex:0 1 auto; min-width:0; text-decoration:none; color:var(--ink) !important; font-weight:700; font-size:1.15rem; }
.brand img { display:block; }
.site-header nav { margin-left:auto; display:flex; gap:.5rem; flex:0 0 auto; }
.site-header nav a { color:var(--muted); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 .5rem; border-radius:8px; }
.site-header nav a:hover { color:var(--ink); }
.hero { text-align:center; padding-top:2rem; padding-bottom:1rem; }
.badge { display:inline-block; background:#ecfdf5; color:#065f46; padding:.5rem 1rem; border-radius:50px; font-size:.95rem; font-weight:600; margin-bottom:1.25rem; border:1px solid #86efac; }
.hero h1 { font-size:clamp(1.75rem,6vw,3rem); line-height:1.15; margin:1rem 0; color:var(--ink); letter-spacing:-.01em; text-wrap:balance; overflow-wrap:break-word; }
.lede { font-size:clamp(1.1rem,2.6vw,1.375rem); max-width:37.5rem; margin:0 auto .6rem; line-height:1.6; }
.ticks { font-size:1.1rem; text-align:left; color:var(--muted); max-width:36rem; margin:1.25rem auto; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.25rem; }
.ticks li::before { content:"✓ "; color:var(--green); font-weight:700; }
.install-btn { display:inline-block; width:23.75rem; max-width:100%; min-height:44px; margin:1.5rem auto .5rem; padding:1.2rem 1.8rem; font-size:1.4rem; font-weight:700;
  text-align:center; background:var(--green); color:#fff !important; border-radius:14px; text-decoration:none; box-shadow:0 10px 30px rgba(4,120,87,.3); transition:background .2s, transform .2s; }
.install-btn:hover { background:var(--green-hover); transform:translateY(-2px); }
.secondary { display:flex; align-items:center; justify-content:center; width:fit-content; max-width:100%; min-height:44px; padding:0 .5rem; margin:.25rem auto 0; font-weight:600; }
.note { color:var(--muted); font-size:.95rem; margin-top:1rem; }
.hero-image { display:block; max-width:100%; height:auto; margin:2.5rem auto; border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,.12); border:6px solid #fff; }
.how { max-width:36rem; margin:0 auto; text-align:left; }
.how h2, .reviews h2 { color:var(--ink); font-size:1.6rem; text-align:center; margin:0 0 1rem; }
.how ol { padding-left:1.4rem; line-height:1.8; }
.responsible { font-size:.95rem; color:var(--muted); }
.reviews { padding-top:3rem; padding-bottom:1rem; }
.rating-summary { text-align:center; margin:0 auto 1.5rem; max-width:40rem; }
.rating-summary .big { font-size:2.25rem; font-weight:700; color:var(--ink); line-height:1.1; }
.rating-summary .stars { color:var(--star); font-size:1.5rem; letter-spacing:2px; }
.rating-summary p { margin:.35rem 0; }
.review-list { list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr)); }
.review-card { background:#f9fafb; border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin:0; display:flex; flex-direction:column; }
.review-card .stars { color:var(--star); font-size:1.05rem; letter-spacing:1px; margin:0 0 .35rem; }
.review-card blockquote { margin:0 0 .75rem; font-size:.97rem; color:var(--body); overflow-wrap:anywhere; flex:1; }
.review-card blockquote p { margin:0; }
.review-meta { font-size:.85rem; color:var(--muted); margin:0; }
.all-reviews { text-align:center; margin:1.5rem 0 0; font-weight:600; }
.all-reviews a { display:inline-flex; align-items:center; min-height:44px; padding:0 .5rem; }
.selection-note { text-align:center; font-size:.85rem; color:var(--muted); max-width:40rem; margin:.75rem auto 0; }
.site-footer { border-top:1px solid var(--line); margin-top:3rem; padding-top:1.5rem; padding-bottom:calc(2.5rem + env(safe-area-inset-bottom)); font-size:.9rem; color:var(--muted); text-align:center; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:0 .5rem; margin-bottom:.75rem; }
.site-footer nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 .5rem; }
.site-footer p { margin:.4rem auto; max-width:40rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:40rem) {
  .site-header .wrap { min-height:3.75rem; }
  .site-header nav { gap:.25rem; } .brand span { font-size:1rem; } .brand img { width:36px; height:36px; }
  .hero { padding-top:1rem; } .hero h1 br { display:none; }
  .badge { font-size:.875rem; padding:.45rem .85rem; }
  .lede { font-size:1.0625rem; }
  .ticks { font-size:1rem; flex-direction:column; align-items:flex-start; width:fit-content; max-width:100%; }
  .install-btn { display:block; width:100%; font-size:1.15rem; padding:1rem 1.2rem; border-radius:12px; box-shadow:0 6px 18px rgba(4,120,87,.25); }
  .hero-image { margin:1.75rem auto; border-radius:14px; border-width:4px; }
  .how h2, .reviews h2 { font-size:1.4rem; }
  .reviews { padding-top:2rem; }
  .rating-summary .big { font-size:2rem; }
  .review-card { padding:.9rem 1rem; }
}
@media (max-width:22.5rem) { .brand span { font-size:.95rem; } .site-header nav a { padding:0 .35rem; } }
@media (prefers-reduced-motion:reduce) { .install-btn { transition:none; } .install-btn:hover { transform:none; } }