/* ============================================================
   SG Maths Exam — homepage (route "/") design system
   Implements the "Kids Math Site Clean Playbook":
     - low-glare surfaces, 60-30-10 semantic colour tokens
     - Lexend + tabular lining figures
     - 3D tactile push-down button physics (4px depth plate)
     - Tier 3 (ages 10-12) ergonomics: >=44px targets, >=12px spacing

   Layout + components only. Colour tokens (light AND dark) live in
   theme.css, which every page loads; this sheet just consumes them.
   The homepage does NOT load landing.css — that sheet belongs to the
   retired persona pages. Loaded after theme.css and app.css.
   ============================================================ */

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-ui);
  font-size:18px;                     /* body-default */
  line-height:1.55;
  color:var(--text-primary);
  background:var(--surface-canvas);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums;   /* digits stay aligned */
}
img{max-width:100%;display:block;}
a{color:var(--brand-text);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Typography scale (playbook) */
h1,h2,h3{margin:0 0 .4em;color:var(--text-primary);letter-spacing:-.01em;line-height:1.2;}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3rem);line-height:1.15;font-weight:700;letter-spacing:.005em;}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,1.75rem);font-weight:600;}
h3{font-size:1.25rem;font-weight:600;}
p{margin:0 0 1rem;}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--text-secondary);line-height:1.55;}
.caption{font-size:.875rem;line-height:1.3;font-weight:500;color:var(--text-secondary);}
.text-muted{color:var(--text-secondary);}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}

/* Keyboard + assistive affordances */
:focus-visible{outline:3px solid var(--brand-text);outline-offset:3px;border-radius:6px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--surface-card);
  color:var(--text-primary);padding:14px 20px;border-radius:0 0 var(--radius) 0;font-weight:700;}
.skip-link:focus{left:0;}
.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;}

/* ---------------------------------------------------------------
   3. BUTTONS — 3D push-down mechanical plate
   Default rests on a 4px solid depth border; pressing translates the
   plate down 4px and collapses the shadow. 60ms, per playbook.
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;
  border:2px solid transparent;border-radius:var(--radius-lg);
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.04em;
  line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;
  transition:background var(--press),box-shadow var(--press),transform var(--press);
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(4px);box-shadow:none;}
.btn-lg{min-height:60px;padding:16px 32px;font-size:1.05rem;}
.btn-block{width:100%;}

.btn-primary{background:var(--brand-primary);color:var(--text-onbrand);
  box-shadow:0 4px 0 0 var(--brand-primary-shadow);}
.btn-primary:hover{background:var(--brand-primary-hover);color:var(--text-onbrand);}

.btn-secondary{background:var(--surface-card);color:var(--text-primary);
  border-color:var(--accent-border);box-shadow:0 4px 0 0 var(--border-depth);}
.btn-secondary:hover{background:var(--surface-canvas);color:var(--text-primary);
  border-color:var(--border-depth);}

@media (min-width:768px){.btn-lg{min-width:220px;}}

/* ---------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.section{padding:72px 0;}
.section-cream{background:var(--surface-cream);border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);}
.section-head{max-width:660px;margin:0 auto 44px;text-align:center;}
.section-head p{color:var(--text-secondary);margin:0;}
.eyebrow{display:inline-block;margin-bottom:14px;font-size:.875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);}

/* ---------------------------------------------------------------
   5. HERO — one focal point, one primary action
   --------------------------------------------------------------- */
.hero{background:var(--surface-canvas);padding:64px 0 56px;}
.hero-copy{max-width:640px;margin:0 auto;text-align:center;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  padding:8px 14px;border-radius:999px;background:var(--brand-surface);
  border:1px solid var(--brand-surface-border);color:var(--brand-text);
  font-size:.875rem;font-weight:700;letter-spacing:.01em;}
.hero h1{margin-bottom:18px;}
.hero h1 .hl{color:var(--brand-text);white-space:nowrap;}
.hero .lead{margin-bottom:28px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;}
.hero-reassure{margin:18px 0 0;font-size:.9375rem;color:var(--text-secondary);}

/* Stats band — quiet, tabular, never competes with the CTA */
.stats-band{background:var(--surface-card);border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);padding:26px 0;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;}
.stat-num{font-size:1.75rem;font-weight:700;line-height:1.1;color:var(--text-primary);}
.stat-label{font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-top:4px;}
@media (max-width:640px){.stats-row{grid-template-columns:repeat(2,1fr);gap:22px 16px;}}

/* ---------------------------------------------------------------
   7. CARD GRIDS
   --------------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-card);}
.card h3{margin-bottom:8px;}
.card p{margin:0;color:var(--text-secondary);font-size:1rem;}
.card-icon{width:48px;height:48px;border-radius:var(--radius);display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:16px;background:var(--brand-surface);}
.card-icon.is-success{background:var(--feedback-success-surface);}
.card-icon.is-caution{background:var(--feedback-caution-surface);}
@media (max-width:860px){.card-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------
   8. PRICING — the adult zone
   --------------------------------------------------------------- */
.adult-note{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:8px 14px;
  border-radius:999px;background:var(--surface-subtle);border:1px solid var(--accent-border);
  color:var(--text-secondary);font-size:.875rem;font-weight:600;}
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:820px;margin:0 auto;}
.price-card{display:flex;flex-direction:column;background:var(--surface-card);
  border:2px solid var(--border-subtle);border-radius:var(--radius-xl);padding:30px;}
.price-card.is-featured{border-color:var(--brand-primary);}
.price-amount{font-size:2.25rem;font-weight:700;line-height:1;}
.price-period{color:var(--text-secondary);font-size:1rem;}
.price-features{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:10px;}
.price-features li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;
  color:var(--text-secondary);}
.price-features .check{color:var(--success-text);font-weight:700;flex:0 0 auto;}
.price-card .btn{margin-top:auto;}
@media (max-width:768px){.pricing-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------
   9. FAQ — 48px tap rows, no marker glyph shift
   --------------------------------------------------------------- */
.faq{max-width:720px;margin:0 auto;display:grid;gap:12px;}
.faq details{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:4px 20px;}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:48px;padding:8px 0;font-size:1.0625rem;font-weight:600;color:var(--text-primary);
  cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';flex:0 0 auto;width:28px;height:28px;display:grid;
  place-items:center;border-radius:8px;background:var(--surface-subtle);
  color:var(--brand-text);font-weight:700;font-size:1.25rem;line-height:1;}
.faq details[open] summary::after{content:'\2212';}
.faq details p{margin:0 0 16px;color:var(--text-secondary);font-size:1rem;}

/* ---------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------- */
.site-footer{background:var(--surface-footer);border-top:1px solid var(--border-subtle);
  padding:48px 0 36px;text-align:center;color:var(--text-secondary);}
.footer-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.125rem;
  color:var(--text-primary);margin-bottom:10px;}
.footer-brand img{width:32px;height:32px;}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:18px 0 0;}
.footer-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:10px 14px;
  border-radius:10px;color:var(--text-secondary);font-weight:600;font-size:.9375rem;}
.footer-links a:hover{background:var(--surface-card);color:var(--text-primary);text-decoration:none;}
.footer-fine{max-width:640px;margin:20px auto 0;font-size:.8125rem;line-height:1.5;
  color:var(--text-secondary);}  /* 7.6:1 on --surface-subtle */

/* ---------------------------------------------------------------
   11. RESPONSIVE + MOTION
   --------------------------------------------------------------- */
@media (max-width:560px){
  .container{padding:0 16px;}
  .hero{padding:40px 0 40px;}
  .section{padding:52px 0;}
  .hero-cta .btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;
    animation-iteration-count:1 !important;}
  .btn:active{transform:none;}
}

/* ---------------------------------------------------------------
   12. NAV HARMONISATION (homepage only)
   home.css loads after app.css and only on "/", so these overrides
   re-tone the shared .appnav to the playbook palette without
   touching any other page. The nav log-in must read as secondary:
   the hero CTA is the single focal action.
   --------------------------------------------------------------- */
.appnav{background:var(--surface-canvas);border-bottom-color:var(--border-subtle);}
.appnav-logout,.appnav-me{color:var(--text-secondary);}
.appnav-brand{min-height:var(--tap);}
/* app.css hard-codes the wordmark to #0f172a, which disappears on the dark nav */
.appnav-name{color:var(--text-primary);}
.appnav-name-em{color:var(--brand-text);}
.appnav-link{font-weight:600;font-size:1rem;color:var(--text-secondary);}
.appnav-link:hover{background:var(--surface-subtle);color:var(--text-primary);}
.appnav .btn{border-radius:var(--radius);font-weight:700;letter-spacing:.04em;
  min-height:var(--tap);transition:background var(--press),box-shadow var(--press),
  transform var(--press);}
.appnav .btn:hover{transform:none;}
.appnav .btn:active{transform:translateY(3px);box-shadow:none;}
.appnav .btn-accent{background:var(--surface-card);color:var(--text-primary);
  border:2px solid var(--accent-border);box-shadow:0 3px 0 0 var(--border-depth);}
.appnav .btn-accent:hover{background:var(--surface-canvas);color:var(--text-primary);
  border-color:var(--border-depth);}

/* Landscape preview: the real Ai Tong Q1 beside its worked solution. */
.hero{padding-top:40px;background:radial-gradient(ellipse at 15% 55%,var(--brand-surface),transparent 60%),var(--surface-canvas);}
.hero .hero-copy{max-width:1000px;}
.hero-copy>h1{max-width:880px;margin-left:auto;margin-right:auto;}
.hero-copy>.lead{max-width:780px;margin-left:auto;margin-right:auto;}
.hero h1 .hl{white-space:normal;}
.product-preview{margin:28px 0;text-align:left;border:1px solid var(--brand-surface-border);border-radius:24px;background:var(--surface-card);box-shadow:0 20px 50px -24px #1d4ed850;overflow:hidden;}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:var(--brand-surface);border-bottom:1px solid var(--brand-surface-border);}
.preview-title{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:var(--brand-text);}
.preview-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--text-onbrand);background:var(--brand-primary);font-size:1.1rem;}
.preview-source{font-size:.78rem;color:var(--text-secondary);}
.preview-spread{display:grid;grid-template-columns:1.15fr 1fr;}
.preview-question{padding:24px 28px 28px;}
.preview-label{display:flex;align-items:center;gap:10px;font-size:.76rem;font-weight:500;color:var(--text-secondary);}
.preview-number{font-size:.9rem;font-weight:700;color:var(--brand-text);}
.preview-marks{margin-left:auto;padding:3px 9px;border-radius:6px;background:var(--feedback-caution-surface);color:var(--on-accent);font-size:.7rem;}
.preview-question h2{margin:16px 0 22px;font-size:1.13rem;line-height:1.55;font-weight:600;}
.preview-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;margin:0;list-style:none;}
.preview-options li{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:11px;font-size:.94rem;font-weight:500;}
.preview-option-number{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:7px;background:var(--surface-subtle);font-size:.8rem;color:var(--text-secondary);}
.preview-options .is-answer{border-color:var(--feedback-success);background:var(--success-light);color:var(--on-success);}
.is-answer .preview-option-number{background:var(--success-btn);color:#fff;}
.preview-tick{margin-left:auto;font-size:1.1rem;font-weight:700;}
.preview-solution{padding:24px 28px;border-left:1px solid var(--border-subtle);background:linear-gradient(135deg,var(--success-light),var(--surface-card));}
.preview-solution-heading{display:flex;align-items:center;gap:12px;}
.preview-solution-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid var(--feedback-success);border-radius:12px;background:var(--success-light);color:var(--on-success);font-size:1.2rem;}
.preview-kicker{display:block;margin-bottom:4px;font-size:.69rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-success);}
.preview-solution h3{margin:0;font-size:1.1rem;}
.preview-steps{padding:0;margin:22px 0;list-style:none;counter-reset:solution-step;}
.preview-steps li{position:relative;padding-left:30px;margin-top:16px;counter-increment:solution-step;}
.preview-steps li::before{content:counter(solution-step);position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--accent-border);border-radius:50%;font-size:.65rem;color:var(--text-secondary);}
.preview-steps span{display:block;margin-bottom:4px;font-size:.82rem;color:var(--text-secondary);}
.preview-steps strong{display:block;font-size:1.05rem;letter-spacing:.01em;color:var(--text-primary);}
.preview-answer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--feedback-success);border-radius:12px;background:var(--surface-card);color:var(--on-success);}
.preview-answer>span{font-size:.76rem;font-weight:600;}
.preview-answer small{display:block;margin-top:2px;font-size:.7rem;font-weight:400;color:var(--text-secondary);}
.preview-answer strong{font-size:1.5rem;letter-spacing:.02em;}
.preview-footnote{padding:12px 24px;border-top:1px solid var(--border-subtle);font-size:.75rem;color:var(--text-secondary);}
.preview-footnote span{margin-right:8px;color:var(--brand-text);}
@media(max-width:760px){
  .hero h1{font-size:2.2rem;}
  .preview-toolbar{flex-wrap:wrap;gap:8px;padding:14px 18px;}
  .preview-title{font-size:.82rem;}
  .preview-source{margin-left:38px;}
  .preview-question,.preview-solution{padding:20px;}
  .hero-cta{position:fixed;bottom:12px;left:16px;right:16px;z-index:70;}
  .hero-cta .btn{box-shadow:0 6px 24px #0003;}
  .landing-page{padding-bottom:88px;}
  .landing-page .wa-fab{bottom:92px;}
}
@media(max-width:600px){
  .preview-spread{grid-template-columns:1fr;}
  .preview-solution{border-left:0;border-top:1px solid var(--border-subtle);}
  .preview-question h2{font-size:1.02rem;}
  .preview-options li{padding:9px;gap:8px;font-size:.86rem;}
  .preview-footnote{padding:12px 20px;font-size:.7rem;}
}