:root {
  /* Raw Science Gila palette */
  --sg-black:#1a1a1a;
  --sg-peach:#fae6d4;
  --sg-blue:#c6dbe6;
  --sg-pink:#efccd2;
  --sg-cream:#fffaf6;
  --sg-grey:#555555;
  --sg-green:#ddeccb;
  --sg-yellow:#fff7d6;
  --sg-purple:#e6d7f5;

  /* Semantic light marketing tokens */
  --background:var(--sg-cream);
  --foreground:var(--sg-black);
  --surface:#ffffff;
  --surface-muted:color-mix(in oklch, var(--sg-cream) 82%, white);
  --surface-raised:#ffffff;
  --surface-hover:color-mix(in oklch, var(--sg-blue) 10%, white);
  --muted:color-mix(in oklch, var(--sg-cream) 72%, #e8e8e8);
  --muted-foreground:#6b6865;
  --primary:var(--sg-black);
  --primary-foreground:var(--sg-cream);
  --secondary:color-mix(in oklch, var(--sg-cream) 70%, white);
  --secondary-foreground:var(--foreground);
  --accent:color-mix(in oklch, var(--sg-blue) 45%, white);
  --accent-foreground:#375f73;
  --success:#6f8f58;
  --success-soft:color-mix(in oklch, var(--sg-green) 60%, white);
  --info:#6d9bb3;
  --info-soft:color-mix(in oklch, var(--sg-blue) 55%, white);
  --warning:#d96868;
  --warning-soft:color-mix(in oklch, var(--warning) 12%, transparent);
  --destructive:#dc4c5a;
  --border:color-mix(in oklch, var(--sg-black) 10%, transparent);
  --border-subtle:color-mix(in oklch, var(--sg-black) 7%, transparent);
  --border-strong:color-mix(in oklch, var(--sg-black) 18%, transparent);
  --ring:#7aa8c0;

  /* Accent semantics */
  --accent-blue:var(--sg-blue);
  --accent-pink:var(--sg-pink);
  --accent-purple:var(--sg-purple);
  --accent-green:var(--sg-green);
  --accent-yellow:var(--sg-yellow);
  --accent-peach:var(--sg-peach);

  /* Compatibility aliases for the existing static markup */
  --ink:var(--foreground);
  --ink-2:#302f2d;
  --muted-text:var(--muted-foreground);
  --line:var(--border-subtle);
  --surface-2:var(--surface-muted);
  --brand:var(--info);
  --brand-2:#8eb8cc;
  --brand-soft:var(--info-soft);
  --navy:var(--foreground);

  /* Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:9999px;
  --radius:var(--radius-lg);

  /* Spacing: 4px grid */
  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:40px;
  --space-3xl:48px;
  --space-4xl:64px;

  /* Page */
  --page-pad-sm:16px;
  --page-pad-md:24px;
  --page-pad-lg:32px;
  --page-pad-xl:40px;
  --content-max:96rem;
  --max:1200px;
  --max-narrow:840px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgb(26 26 26 / .05);
  --shadow-sm:0 1px 2px rgb(26 26 26 / .05),0 4px 12px rgb(26 26 26 / .04);
  --shadow-md:0 8px 24px rgb(26 26 26 / .08);

  /* Motion */
  --motion-fast:150ms;
  --motion-base:200ms;
  --motion-slow:280ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--background)}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--foreground);
  background:var(--background);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

.wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.wrap-narrow{width:min(calc(100% - 48px),var(--max-narrow));margin-inline:auto}

/* Top trust strip */
.topbar{
  background:var(--surface-muted);
  color:var(--muted-foreground);
  border-bottom:1px solid var(--border-subtle);
  font-size:.8125rem;
}
.topbar .wrap{
  min-height:36px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-xs) 0;
}
.topbar strong{color:var(--foreground);font-weight:700}

/* Public navigation — light by default, visually connected to canvas */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in oklch,var(--background) 94%,white);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-subtle);
}
.nav-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  text-decoration:none;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--foreground);
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  background:var(--accent-blue);
  display:grid;
  place-items:center;
  color:var(--foreground);
  font-weight:800;
  box-shadow:var(--shadow-xs);
}
.brand-sub{
  display:block;
  margin-top:-2px;
  color:var(--muted-foreground);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.08em;
}
.nav-links{display:flex;align-items:center;gap:var(--space-xs)}
.nav-links>a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 var(--space-sm);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:var(--muted-foreground);
  font-size:.875rem;
  font-weight:600;
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
}
.nav-links>a:hover{background:var(--surface-hover);color:var(--foreground)}
.nav-links>a[aria-current="page"]{background:var(--accent);color:var(--accent-foreground);font-weight:700}
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--foreground);
  font-size:1.25rem;
  cursor:pointer;
}
.nav-toggle:hover{background:var(--surface-hover)}

/* Buttons: tighter than cards, no stamped shadow, no pill by default */
.nav-cta,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  min-height:44px;
  padding:0 var(--space-md);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  text-decoration:none;
  font-weight:700;
  font-size:.875rem;
  cursor:pointer;
  transition:background var(--motion-base),border-color var(--motion-base),box-shadow var(--motion-base),transform var(--motion-base),color var(--motion-base);
}
.nav-cta,.btn-primary,.btn-dark{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-xs)}
.nav-cta:hover,.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-lg{min-height:48px;padding:0 var(--space-lg);font-size:.9375rem}
.btn-secondary{
  background:var(--surface-raised);
  color:var(--foreground);
  border-color:var(--border);
}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.btn-text{
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--accent-foreground);
  background:transparent;
}
.btn-text:hover{text-decoration:underline;text-underline-offset:4px}

/* Hero */
.hero{
  padding:var(--space-3xl) 0;
  background:var(--background);
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-2xl);align-items:center}
.eyebrow{
  margin-bottom:var(--space-sm);
  color:var(--accent-foreground);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero h1,.page-hero h1{
  margin:0 0 var(--space-lg);
  max-width:800px;
  color:var(--foreground);
  font-size:clamp(2.25rem,4vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
}
.hero h1 em,.page-hero h1 em,.section h2 em{font-style:normal;color:var(--accent-foreground)}
.hero-lede,.page-hero p,.section-lede{
  color:var(--muted-foreground);
  font-size:1rem;
  line-height:1.75;
}
.hero-lede{max-width:700px;margin:0 0 var(--space-lg)}
.hero-actions,.page-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.microproof{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm) var(--space-lg);
  margin-top:var(--space-lg);
  color:var(--muted-foreground);
  font-size:.8125rem;
  font-weight:600;
}
.microproof span:before{content:"✓";color:var(--success);margin-right:var(--space-xs);font-weight:800}

.hero-proof{
  position:relative;
  overflow:hidden;
  padding:var(--space-lg);
  border-radius:var(--radius-xl);
  background:var(--surface-raised);
  color:var(--foreground);
  box-shadow:var(--shadow-sm);
}
.hero-proof:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-72px;
  top:-72px;
  border-radius:50%;
  background:color-mix(in oklch,var(--sg-blue) 55%,transparent);
  pointer-events:none;
}
.hero-proof .kicker{
  position:relative;
  color:var(--accent-foreground);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-proof h3{position:relative;margin:var(--space-xs) 0 var(--space-lg);font-size:1.25rem;line-height:1.35}
.proof-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.proof-tile{
  min-height:104px;
  padding:var(--space-md);
  border-radius:var(--radius-lg);
  background:var(--surface-muted);
}
.proof-tile:nth-child(1){background:color-mix(in oklch,var(--sg-blue) 42%,white)}
.proof-tile:nth-child(2){background:color-mix(in oklch,var(--sg-pink) 42%,white)}
.proof-tile:nth-child(3){background:color-mix(in oklch,var(--sg-green) 46%,white)}
.proof-tile:nth-child(4){background:color-mix(in oklch,var(--sg-purple) 42%,white)}
.proof-num{font-size:1.75rem;font-weight:800;letter-spacing:-.04em}
.proof-label{margin-top:var(--space-2xs);color:var(--muted-foreground);font-size:.75rem}
.lesson-stack{position:relative;display:grid;gap:var(--space-xs);margin-top:var(--space-md)}
.lesson-row{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-sm);border-radius:var(--radius-md);background:var(--surface-muted);font-size:.8125rem}
.lesson-row b{display:block;color:var(--foreground)}
.lesson-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--accent-blue);display:grid;place-items:center;flex:0 0 auto;color:var(--foreground);font-weight:700}

/* Sections and typography */
.section{padding:var(--space-2xl) 0}
.section.alt{background:var(--surface-muted)}
.section.soft{background:color-mix(in oklch,var(--sg-peach) 34%,var(--background))}
.section.dark{background:color-mix(in oklch,var(--sg-purple) 34%,var(--background));color:var(--foreground)}
.section-head{display:flex;justify-content:space-between;gap:var(--space-lg);align-items:end;margin-bottom:var(--space-lg)}
.section-head.center{display:block;text-align:center}.section-head.center p{margin-inline:auto}.section-head.center h2,.section-head.center h3{margin-inline:auto;max-width:none}
.section h2,.cta h2{
  margin:0;
  color:var(--foreground);
  font-size:clamp(1.75rem,3vw,2rem);
  line-height:1.18;
  letter-spacing:-.03em;
  font-weight:800;
}
.section-lede{max-width:680px;margin:var(--space-sm) 0 0}
.dark .section-lede{color:var(--muted-foreground)}

/* Metrics */
.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border-radius:var(--radius-xl);
  background:var(--surface-raised);
  box-shadow:var(--shadow-xs);
}
.metric{padding:var(--space-md) var(--space-lg);border-right:1px solid var(--border-subtle)}
.metric:last-child{border-right:0}
.metric-num{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.metric-label{margin-top:var(--space-2xs);color:var(--muted-foreground);font-size:.8125rem;font-weight:600}
.metric-note{text-align:center;color:var(--muted-foreground);font-size:.75rem;margin-top:var(--space-sm)}

/* Card families */
.cards,.teacher-grid,.transform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.card,.transform,.teacher,.quote,.support-item,.result-card,.check{
  background:var(--surface-raised);
  border:0;
  box-shadow:var(--shadow-xs);
}
.card{
  padding:var(--space-md);
  border-radius:var(--radius-lg);
  transition:transform var(--motion-base),background var(--motion-base),box-shadow var(--motion-base);
}
.card:hover{transform:translateY(-2px);background:var(--surface-hover);box-shadow:var(--shadow-sm)}
.card-icon{
  width:44px;
  height:44px;
  margin-bottom:var(--space-md);
  border-radius:var(--radius-sm);
  background:var(--accent-blue);
  display:grid;
  place-items:center;
  color:var(--foreground);
  font-weight:700;
}
.card h3{margin:0 0 var(--space-xs);font-size:1.0625rem;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted-foreground);font-size:.875rem}
.tag,.status,.chip,.result-subject,.trust-pill{
  display:inline-flex;
  align-items:center;
  border-radius:var(--radius-pill);
  font-size:.75rem;
  font-weight:600;
}
.tag{padding:var(--space-2xs) var(--space-xs);background:var(--accent-pink);color:var(--foreground)}
.tag.success,.status{background:var(--success-soft);color:#587643}

.transform{position:relative;padding:var(--space-md);border-radius:var(--radius-lg)}
.transform .subject{color:var(--muted-foreground);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.transform .jump{margin:var(--space-xs) 0 var(--space-sm);font-size:1.625rem;font-weight:800;letter-spacing:-.035em}
.transform blockquote{margin:0 0 var(--space-md);color:var(--muted-foreground);font-size:.875rem}
.transform .person{font-size:.75rem;font-weight:700}
.transform.featured{background:color-mix(in oklch,var(--sg-pink) 48%,white);color:var(--foreground)}
.transform.featured blockquote,.transform.featured .subject{color:var(--muted-foreground)}

/* Score system */
.system{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md)}
.system-step{padding:var(--space-md);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-xs)}
.system-step:nth-child(2){background:color-mix(in oklch,var(--sg-blue) 20%,white)}
.system-step:nth-child(4){background:color-mix(in oklch,var(--sg-purple) 18%,white)}
.system-num{font-size:.6875rem;color:var(--accent-foreground);font-weight:700;letter-spacing:.12em}
.system-step h3{font-size:1.0625rem;margin:var(--space-xs) 0 var(--space-xs)}
.system-step p{font-size:.8125rem;color:var(--muted-foreground);margin:0}
.flow-arrow{display:none}

/* Product / material showcase */
.product-showcase{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-lg);align-items:stretch}
.artifact-board{padding:var(--space-md);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-sm)}
.artifact-tabs{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-md)}
.artifact-tab{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);font-size:.6875rem;font-weight:600;color:var(--muted-foreground);background:var(--surface-muted)}
.artifact-tab.active{background:var(--accent-blue);color:var(--foreground)}
.worksheet{padding:var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface)}
.worksheet-top{display:flex;justify-content:space-between;gap:var(--space-md);padding-bottom:var(--space-sm);margin-bottom:var(--space-md);border-bottom:1px solid var(--border-subtle)}
.worksheet-title{font-weight:700}.worksheet small{color:var(--muted-foreground)}
.question{padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle)}.question:last-child{border-bottom:0}
.answer-line{height:8px;border-bottom:1px solid var(--border);margin:var(--space-xs) 0}
.support-list{display:grid;gap:var(--space-sm)}
.support-item{padding:var(--space-md);border-radius:var(--radius-lg)}
.support-item strong{display:block;margin-bottom:var(--space-2xs)}
.support-item span{font-size:.8125rem;color:var(--muted-foreground)}

/* What students receive */
.get-stack{display:grid;gap:var(--space-lg)}
.get-group{display:grid;gap:var(--space-sm)}
.get-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md)}
.get-group-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--accent-foreground);text-transform:uppercase}
.get-group-note{font-size:.8125rem;color:var(--muted-foreground)}
.get-grid{display:grid;gap:var(--space-md)}
.get-grid.onboarding{grid-template-columns:repeat(2,minmax(0,1fr))}
.get-grid.ongoing{grid-template-columns:repeat(4,minmax(0,1fr))}
.get-card{position:relative;overflow:hidden;display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-lg);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform var(--motion-base),box-shadow var(--motion-base),background var(--motion-base)}
.get-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);background:var(--surface-hover)}
.get-card-icon{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;flex:0 0 auto;color:var(--foreground)}
.get-card-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.get-card:nth-child(1) .get-card-icon{background:var(--accent-peach)}
.get-card:nth-child(2) .get-card-icon{background:var(--accent-blue)}
.get-grid.ongoing .get-card:nth-child(1) .get-card-icon{background:var(--accent-blue)}
.get-grid.ongoing .get-card:nth-child(2) .get-card-icon{background:var(--accent-purple)}
.get-grid.ongoing .get-card:nth-child(3) .get-card-icon{background:var(--accent-yellow)}
.get-grid.ongoing .get-card:nth-child(4) .get-card-icon{background:var(--accent-green)}
.get-card h3{margin:0 0 var(--space-2xs);font-size:1rem}
.get-card p{margin:0;color:var(--muted-foreground);font-size:.8125rem;line-height:1.65}
.get-card .mini{display:block;margin-top:var(--space-xs);font-size:.75rem;font-weight:700;color:var(--accent-foreground)}
@media(max-width:980px){.get-grid.ongoing{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.get-grid.onboarding,.get-grid.ongoing{grid-template-columns:1fr}.get-group-head{display:block}.get-group-note{margin-top:var(--space-2xs)}}

/* Teacher cards */
.teacher{overflow:hidden;border-radius:var(--radius-lg)}
.teacher-visual{height:132px;background:var(--accent-blue);display:flex;align-items:end;padding:var(--space-md);color:var(--foreground)}
.teacher-visual.orange{background:var(--accent-pink)}
.teacher-visual.green{background:var(--accent-green)}
.teacher-initials{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.teacher-body{padding:var(--space-md)}
.teacher-name{font-size:1.125rem;font-weight:700}
.teacher-sub{color:var(--accent-foreground);font-weight:600;font-size:.8125rem;margin:var(--space-2xs) 0 var(--space-xs)}
.teacher-body p{color:var(--muted-foreground);font-size:.875rem;margin:0 0 var(--space-sm)}
.teacher-proof{font-size:.75rem;padding-top:var(--space-sm);border-top:1px solid var(--border-subtle);font-weight:600;color:var(--muted-foreground)}

/* Subjects */
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.subject-card{
  padding:var(--space-md);
  border-radius:var(--radius-lg);
  text-decoration:none;
  background:var(--surface-raised);
  display:flex;
  justify-content:space-between;
  gap:var(--space-md);
  align-items:center;
  box-shadow:var(--shadow-xs);
  transition:transform var(--motion-base),background var(--motion-base),box-shadow var(--motion-base);
}
.subject-card:hover{transform:translateY(-2px);background:var(--surface-hover);box-shadow:var(--shadow-sm)}
.subject-card{justify-content:flex-start}
.subject-card > div{flex:1;min-width:0}
.subject-card strong{display:block}
.subject-card > div > span{font-size:.75rem;color:var(--muted-foreground)}
.subject-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--accent-blue);display:grid;place-items:center;color:var(--foreground)!important;font-weight:700;flex:0 0 auto;order:-1}
.subject-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.subject-card:nth-child(2) .subject-icon{background:var(--accent-peach)}
.subject-card:nth-child(3) .subject-icon{background:var(--accent-green)}
.subject-card:nth-child(4) .subject-icon{background:var(--accent-purple)}
.subject-card:nth-child(5) .subject-icon{background:var(--accent-yellow)}
.subject-card:nth-child(6) .subject-icon{background:var(--accent-pink)}

/* Timeline */
.timeline{display:grid;gap:0}
.timeline-row{display:grid;grid-template-columns:120px 1fr;gap:var(--space-xl);padding:var(--space-lg) 0;border-top:1px solid var(--border-subtle)}
.timeline-row:last-child{border-bottom:1px solid var(--border-subtle)}
.timeline-year{font-weight:700;color:var(--accent-foreground);font-size:1rem}
.timeline-row h3{margin:0 0 var(--space-2xs);font-size:1.0625rem}.timeline-row p{margin:0;color:var(--muted-foreground);font-size:.875rem}

/* Quotes, trust checks */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.quote{padding:var(--space-lg);border-radius:var(--radius-lg)}
.quote p{margin:0 0 var(--space-sm);color:var(--muted-foreground);font-size:.875rem}.quote strong{font-size:.8125rem}
.quote-stars{color:#927b2f;letter-spacing:.08em;font-size:.75rem;margin-bottom:var(--space-xs)}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
.check{display:flex;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-lg)}
.check i{font-style:normal;width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--success-soft);color:#587643;font-weight:700;flex:0 0 auto}
.check b{display:block}.check span{font-size:.8125rem;color:var(--muted-foreground)}

/* Tables */
.table-wrap{overflow:auto;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-xs)}
.table{width:100%;border-collapse:collapse;min-width:720px}
.table th,.table td{padding:var(--space-md);border-bottom:1px solid var(--border-subtle);text-align:left}
.table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);background:color-mix(in oklch,var(--sg-blue) 14%,white)}
.table td{font-size:.875rem}.table tr:last-child td{border-bottom:0}.table tbody tr:hover{background:var(--surface-hover)}

/* Accordions */
.accordion{display:grid;gap:var(--space-xs)}
.accordion details{border:0;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-xs)}
.accordion summary{list-style:none;cursor:pointer;padding:var(--space-md) var(--space-lg);font-weight:700;display:flex;justify-content:space-between;gap:var(--space-md)}
.accordion summary::-webkit-details-marker{display:none}.accordion summary:after{content:"+";color:var(--accent-foreground);font-size:1.125rem}.accordion details[open] summary:after{content:"–"}
.accordion .answer{padding:0 var(--space-lg) var(--space-lg);color:var(--muted-foreground);font-size:.875rem}

/* Forms */
.form-grid{display:grid;gap:var(--space-sm)}.form-grid.two{grid-template-columns:1fr 1fr}
.field{width:100%;min-height:48px;padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--foreground)}
.field:focus{outline:2px solid color-mix(in oklch,var(--ring) 35%,transparent);outline-offset:1px;border-color:var(--ring)}

/* CTA */
.cta{padding:var(--space-2xl) 0;background:var(--background)}
.cta-box{border-radius:var(--radius-xl);background:color-mix(in oklch,var(--sg-blue) 50%,white);color:var(--foreground);padding:var(--space-lg);display:flex;justify-content:space-between;gap:var(--space-lg);align-items:center}
.cta h2{max-width:720px}.cta p{margin:var(--space-sm) 0 0;color:var(--muted-foreground);max-width:680px}
.cta .actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;flex:0 0 auto}
.cta .btn-secondary{background:color-mix(in oklch,white 78%,transparent);color:var(--foreground);border-color:var(--border)}

/* Footer stays in the light public experience */
.footer{background:var(--surface-muted);color:var(--foreground);padding:var(--space-2xl) 0 var(--space-md);border-top:1px solid var(--border-subtle)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--space-xl)}
.footer h4,.footer h5{margin:0 0 var(--space-sm)}
.footer p{color:var(--muted-foreground);font-size:.8125rem;max-width:320px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-xs)}
.footer a{text-decoration:none;color:var(--muted-foreground);font-size:.8125rem}.footer a:hover{color:var(--foreground)}
.footer-bottom{border-top:1px solid var(--border-subtle);margin-top:var(--space-xl);padding-top:var(--space-md);color:var(--muted-foreground);font-size:.75rem;display:flex;justify-content:space-between;gap:var(--space-lg)}
.footer-brand-wrap{display:flex;align-items:flex-start;gap:var(--space-md)}
.footer-mascot{width:76px;height:auto;flex:0 0 auto;filter:drop-shadow(0 10px 18px rgba(26,26,26,.06))}
.mascot-panel{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(160px,220px);gap:var(--space-xl);align-items:center;background:var(--surface-raised);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-xs);overflow:hidden}
.mascot-copy{min-width:0;max-width:680px}
.mascot-copy .eyebrow{margin-bottom:var(--space-xs)}
.mascot-copy h3{margin:0 0 var(--space-xs);font-size:1.25rem;line-height:1.35;word-break:keep-all;overflow-wrap:normal}
.mascot-copy p{margin:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.7;word-break:normal;overflow-wrap:anywhere}
.mascot-art{display:block;width:100%;max-width:220px;height:auto;justify-self:end;align-self:center;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(26,26,26,.08))}
.mascot-panel.soft{background:linear-gradient(180deg,color-mix(in oklch,var(--sg-pink) 18%,white),var(--surface-raised))}
.mascot-panel.blue{background:linear-gradient(180deg,color-mix(in oklch,var(--sg-blue) 18%,white),var(--surface-raised))}
.mascot-panel.yellow{background:linear-gradient(180deg,color-mix(in oklch,var(--sg-yellow) 22%,white),var(--surface-raised))}
.hero-visual-mascot{display:flex;align-items:end;justify-content:center;min-height:320px;padding:var(--space-md)}
.hero-visual-mascot img{width:min(320px,100%);height:auto;filter:drop-shadow(0 18px 34px rgba(26,26,26,.09))}
@media(max-width:900px){.mascot-panel{grid-template-columns:minmax(0,1fr) 180px;gap:var(--space-lg)}.mascot-art{max-width:180px}.footer-brand-wrap{display:block}.footer-mascot{margin-top:var(--space-sm)}}
@media(max-width:680px){.mascot-panel{grid-template-columns:1fr;padding:var(--space-md);text-align:left}.mascot-art{justify-self:center;max-width:170px;margin-top:var(--space-xs)}.mascot-copy h3{font-size:1.125rem}}

.wa-float{position:fixed;right:var(--space-md);bottom:var(--space-md);z-index:40;min-height:44px;background:#25D366;color:#ffffff;text-decoration:none;border-radius:var(--radius-md);padding:0 var(--space-md);display:flex;align-items:center;font-weight:700;font-size:.8125rem;box-shadow:0 10px 24px rgb(37 211 102 / .28);transition:transform var(--motion-base),box-shadow var(--motion-base),background var(--motion-base)}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgb(37 211 102 / .32);background:#22c55e}

/* Subpage hero */
.page-hero{padding:var(--space-2xl) 0;border-bottom:1px solid var(--border-subtle);background:color-mix(in oklch,var(--sg-blue) 16%,var(--background))}
.page-hero p{max-width:700px;margin:0}
.page-actions{margin-top:var(--space-lg)}
.breadcrumb{font-size:.75rem;color:var(--muted-foreground);margin-bottom:var(--space-md)}.breadcrumb a{text-decoration:none}.breadcrumb a:hover{text-decoration:underline}

/* Results */
.result-filter{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-lg)}
.chip{min-height:36px;padding:0 var(--space-sm);border:1px solid var(--border);background:var(--surface-raised);color:var(--foreground);cursor:pointer}
.chip.active{background:var(--accent-blue);color:var(--foreground);border-color:transparent}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.result-card{padding:var(--space-md);border-radius:var(--radius-lg)}
.result-name{font-weight:700}.result-subjects{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin:var(--space-xs) 0 var(--space-sm)}
.result-subject{padding:var(--space-2xs) var(--space-xs);background:var(--surface-muted);color:var(--muted-foreground)}
.result-quote{font-size:.8125rem;color:var(--muted-foreground);margin:0}

/* Notice uses red family per the design guide */
.notice{padding:var(--space-md);border-radius:var(--radius-md);background:var(--warning-soft);color:#7b3f45;font-size:.8125rem;border-left:3px solid var(--warning)}
.trust-strip{display:flex;gap:var(--space-xs);flex-wrap:wrap}.trust-pill{padding:var(--space-xs) var(--space-sm);background:var(--surface-muted);color:var(--foreground)}


/* Dense public-site rhythm — derived from the 4px spacing system */
.section + .section{border-top:1px solid color-mix(in oklch,var(--sg-black) 4%,transparent)}
.section.alt,.section.soft{border-top:0}
.section-head .eyebrow{margin-bottom:var(--space-xs)}
.section h2{max-width:760px}
.section-lede{line-height:1.65}
.compact-ribbon{margin-top:var(--space-md);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-xs)}
.ribbon-item{padding:var(--space-sm);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-xs);font-size:.75rem;color:var(--muted-foreground)}
.ribbon-item strong{display:block;color:var(--foreground);font-size:.8125rem;margin-bottom:2px}
.rich-tags{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-xs)}
.rich-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--space-xs);border-radius:var(--radius-pill);font-size:.6875rem;font-weight:600;background:var(--surface-muted);color:var(--muted-foreground)}
.teacher:nth-child(1) .rich-tag{background:color-mix(in oklch,var(--sg-blue) 35%,white)}
.teacher:nth-child(2) .rich-tag{background:color-mix(in oklch,var(--sg-pink) 35%,white)}
.teacher:nth-child(3) .rich-tag{background:color-mix(in oklch,var(--sg-green) 40%,white)}
.subject-card{min-height:84px}
.subject-card:nth-child(1) .subject-icon{background:color-mix(in oklch,var(--sg-blue) 60%,white)}
.subject-card:nth-child(2) .subject-icon{background:color-mix(in oklch,var(--sg-yellow) 70%,white)}
.subject-card:nth-child(3) .subject-icon{background:color-mix(in oklch,var(--sg-green) 60%,white)}
.subject-card:nth-child(4) .subject-icon{background:color-mix(in oklch,var(--sg-purple) 55%,white)}
.subject-card:nth-child(5) .subject-icon{background:color-mix(in oklch,var(--sg-peach) 65%,white)}
.subject-card:nth-child(6) .subject-icon{background:color-mix(in oklch,var(--sg-pink) 55%,white)}
.subject-meta{display:block;margin-top:2px;font-size:.6875rem;color:var(--muted-foreground)}
.mini-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xs);margin-top:var(--space-md)}
.mini-timeline>div{padding:var(--space-sm);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-xs)}
.mini-timeline strong{display:block;font-size:.875rem}
.mini-timeline span{font-size:.75rem;color:var(--muted-foreground)}
@media(max-width:980px){.compact-ribbon{grid-template-columns:repeat(3,1fr)}.mini-timeline{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:680px){.compact-ribbon{grid-template-columns:1fr 1fr}.mini-timeline{grid-template-columns:1fr}.subject-card{min-height:72px}}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

@media(max-width:980px){
  .nav-links{position:absolute;left:var(--space-lg);right:var(--space-lg);top:64px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-sm);display:none;flex-direction:column;align-items:stretch;box-shadow:var(--shadow-md)}
  .nav-links.open{display:flex}.nav-toggle{display:block}.nav-cta{display:none}
  .hero-grid,.product-showcase{grid-template-columns:1fr}.hero{padding-top:var(--space-2xl)}.hero-proof{max-width:760px}
  .metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--border-subtle)}
  .cards,.teacher-grid,.transform-grid,.subject-grid,.result-grid{grid-template-columns:1fr 1fr}
  .system{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:nth-child(n+4){margin-top:var(--space-xs)}
  .cta-box{display:block}.cta .actions{margin-top:var(--space-lg)}
}
@media(max-width:680px){
  .wrap,.wrap-narrow{width:min(calc(100% - 32px),var(--max))}.topbar .wrap{font-size:.75rem;text-align:center;flex-wrap:wrap;gap:var(--space-xs)}
  .hero{padding:var(--space-xl) 0}.hero h1,.page-hero h1{font-size:2rem}.hero-actions .btn,.page-actions .btn{width:100%}
  .proof-grid{grid-template-columns:1fr 1fr}.section{padding:var(--space-xl) 0}.section-head{display:block}.section-head .btn{margin-top:var(--space-sm)}
  .metrics{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid var(--border-subtle)!important}.metric:last-child{border-bottom:0!important}
  .cards,.teacher-grid,.transform-grid,.subject-grid,.quote-grid,.check-grid,.result-grid,.system{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}
  .timeline-row{grid-template-columns:1fr;gap:var(--space-xs)}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
  .footer-bottom{display:block}.footer-bottom div+div{margin-top:var(--space-xs)}.cta-box{padding:var(--space-lg)}.wa-float{right:var(--space-sm);bottom:var(--space-sm)}
  .page-hero{padding:var(--space-2xl) 0}.proof-tile{min-height:auto}
}


/* Single-file preview navigation */
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:92px;}

/* =========================================================
   V4 — Science Gila Motion & Micro-interaction System
   Calm by default; playful on interaction.
   ========================================================= */
html{scroll-behavior:smooth}

/* 1 · Cursor-aware surface lift + soft glow */
.sg-interactive{
  --glow-x:50%;
  --glow-y:50%;
  --glow-rgb:198,219,230;
  position:relative;
  isolation:isolate;
  transition:
    transform var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease;
}
.sg-interactive::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(
    240px circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-rgb),.22),
    rgba(var(--glow-rgb),.08) 34%,
    transparent 68%
  );
  transition:opacity var(--motion-base) ease;
}
.sg-interactive > *{position:relative;z-index:1}

@media (hover:hover) and (pointer:fine){
  .sg-interactive:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
  }
  .sg-interactive:hover::before{opacity:1}
}

/* 2 · Ambient pastel motion in hero areas */
.hero,.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --ambient-x:0px;
  --ambient-y:0px;
}
.hero::before,.page-hero::before,
.hero::after,.page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  border-radius:9999px;
  pointer-events:none;
  filter:blur(58px);
  opacity:.28;
  will-change:transform;
}
.hero::before,.page-hero::before{
  top:-185px;
  right:4%;
  background:color-mix(in oklch,var(--sg-blue) 64%,transparent);
  animation:sgAmbientA 24s ease-in-out infinite alternate;
}
.hero::after,.page-hero::after{
  left:-150px;
  bottom:-230px;
  background:color-mix(in oklch,var(--sg-pink) 54%,transparent);
  animation:sgAmbientB 29s ease-in-out infinite alternate;
}
.hero > .wrap,.page-hero > .wrap{position:relative;z-index:1}
@keyframes sgAmbientA{
  from{transform:translate3d(calc(var(--ambient-x) + 0px),calc(var(--ambient-y) + 0px),0) scale(.96)}
  to{transform:translate3d(calc(var(--ambient-x) + -22px),calc(var(--ambient-y) + 20px),0) scale(1.05)}
}
@keyframes sgAmbientB{
  from{transform:translate3d(calc(var(--ambient-x) + 0px),calc(var(--ambient-y) + 0px),0) scale(1.02)}
  to{transform:translate3d(calc(var(--ambient-x) + 26px),calc(var(--ambient-y) - 18px),0) scale(.95)}
}

/* 3 · Scroll reveal — Learning Lab-inspired, stronger section rhythm */
html.sg-motion-ready .sg-reveal{
  opacity:0;
  transform:translate3d(0,30px,0) scale(.985);
  filter:blur(5px);
  transition:
    opacity 680ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    transform 680ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    filter 560ms ease var(--reveal-delay,0ms);
  will-change:opacity,transform,filter;
}
html.sg-motion-ready .sg-reveal.sg-pop{transform:translate3d(0,34px,0) scale(.955)}
html.sg-motion-ready .sg-reveal.sg-left{transform:translate3d(-38px,10px,0) scale(.985)}
html.sg-motion-ready .sg-reveal.sg-right{transform:translate3d(38px,10px,0) scale(.985)}
html.sg-motion-ready .sg-reveal.sg-rise{transform:translate3d(0,42px,0) scale(.98)}
html.sg-motion-ready .sg-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.section,.cta{position:relative}
.section.sg-section-visible > .wrap,.cta.sg-section-visible > .wrap{animation:sgSectionWake 760ms cubic-bezier(.16,1,.3,1) both}
@keyframes sgSectionWake{from{transform:translateY(8px)}to{transform:translateY(0)}}
html.sg-motion-ready .sg-hero-enter{opacity:0;transform:translateY(26px) scale(.985);filter:blur(4px)}
html.sg-motion-ready .sg-hero-enter.is-visible{
  opacity:1;transform:none;filter:none;
  transition:opacity 760ms cubic-bezier(.16,1,.3,1) var(--hero-delay,0ms),transform 760ms cubic-bezier(.16,1,.3,1) var(--hero-delay,0ms),filter 600ms ease var(--hero-delay,0ms)
}
.mascot-art.sg-mascot-alive,.footer-mascot.sg-mascot-alive{animation:sgMascotFloat 5.8s ease-in-out infinite}
@keyframes sgMascotFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(.6deg)}}

/* 5 · Navigation underline / active state */
.nav-links a{
  position:relative;
  transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-fast) ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:2px;
  border-radius:9999px;
  background:color-mix(in oklch,var(--sg-blue) 72%,#6d9bb3);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--motion-base) cubic-bezier(.2,.75,.25,1);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after,
.nav-links a.sg-nav-active::after{transform:scaleX(1)}
.nav-links a.sg-nav-active{
  background:color-mix(in oklch,var(--sg-blue) 24%,transparent);
  color:var(--foreground);
}

/* 6 · CTA / button micro-motion */
.btn,.nav-cta{
  position:relative;
  overflow:hidden;
}
.btn::before,.nav-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);
  transform:translateX(-45%);
  transition:opacity var(--motion-fast) ease,transform 420ms ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:not(.btn-text):hover,.nav-cta:hover{transform:translateY(-2px)}
  .btn:not(.btn-text):hover::before,.nav-cta:hover::before{opacity:1;transform:translateX(45%)}
  .btn-text:hover{transform:translateX(3px)}
}

/* 7 · Teacher identity becomes more expressive only on hover */
.teacher{--glow-rgb:198,219,230;background:var(--surface-raised);box-shadow:var(--shadow-xs)}
.teacher:nth-child(2),.teacher:has(.teacher-visual.orange){--glow-rgb:239,204,210}
.teacher:nth-child(3),.teacher:has(.teacher-visual.green){--glow-rgb:221,236,203}
.teacher:nth-child(4){--glow-rgb:230,215,245}
.teacher:nth-child(5){--glow-rgb:255,247,214}
.teacher:nth-child(6){--glow-rgb:250,230,212}
.teacher-visual,.teacher-initials,.rich-tag{
  transition:transform var(--motion-base) cubic-bezier(.2,.75,.25,1),filter var(--motion-base) ease,background-color var(--motion-base) ease;
}
@media (hover:hover) and (pointer:fine){
  .teacher:hover .teacher-visual{transform:scale(1.012);filter:saturate(1.035)}
  .teacher:hover .teacher-initials{transform:translateY(-2px)}
  .teacher:hover .rich-tag{transform:translateY(-1px);background:color-mix(in oklch,var(--sg-blue) 18%,var(--surface-raised))}
  .teacher:nth-child(2):hover .rich-tag{background:color-mix(in oklch,var(--sg-pink) 26%,var(--surface-raised))}
  .teacher:nth-child(3):hover .rich-tag{background:color-mix(in oklch,var(--sg-green) 30%,var(--surface-raised))}
}

/* Contextual subject glows */
.subject-card:nth-child(1){--glow-rgb:198,219,230}
.subject-card:nth-child(2){--glow-rgb:250,230,212}
.subject-card:nth-child(3){--glow-rgb:221,236,203}
.subject-card:nth-child(4){--glow-rgb:230,215,245}
.subject-card:nth-child(5){--glow-rgb:255,247,214}
.subject-card:nth-child(6){--glow-rgb:239,204,210}

/* 8 · Student progress micro-motion */
.transform{background:var(--surface-raised);box-shadow:var(--shadow-xs)}
.transform .jump{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.motion-arrow{
  display:inline-block;
  color:var(--accent-foreground);
  transition:transform var(--motion-base) cubic-bezier(.2,.75,.25,1),color var(--motion-base) ease;
}
.result-end{
  display:inline-block;
  padding:0 4px;
  margin-left:-4px;
  border-radius:var(--radius-sm);
  background:transparent;
  transition:background-color var(--motion-base) ease,transform var(--motion-base) ease;
}
@media (hover:hover) and (pointer:fine){
  .transform:hover .motion-arrow{transform:translateX(4px);color:#587643}
  .transform:hover .result-end{background:color-mix(in oklch,var(--sg-green) 42%,transparent);transform:translateX(2px)}
  .result-card:hover .result-subject{background:color-mix(in oklch,var(--sg-blue) 28%,var(--surface-raised))}
}
.result-subject{transition:background-color var(--motion-base) ease,transform var(--motion-base) ease}

/* 9 · Animated 5-step learning system */
.system{
  position:relative;
  padding-top:20px;
}
.system-track{
  position:absolute;
  z-index:0;
  top:8px;
  left:9%;
  right:9%;
  height:2px;
  overflow:hidden;
  border-radius:9999px;
  background:repeating-linear-gradient(90deg,var(--border-strong) 0 5px,transparent 5px 10px);
  pointer-events:none;
}
.system-track-fill{
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#8fb8cc,#c8b1df,#a9c493);
  transition:transform 900ms cubic-bezier(.2,.75,.25,1);
}
.system.is-system-visible .system-track-fill{transform:scaleX(1)}
.system-step{position:relative;z-index:1;transition:transform var(--motion-base) ease,box-shadow var(--motion-base) ease,background-color var(--motion-base) ease}
.system-step::after{
  content:"";
  position:absolute;
  top:-16px;
  left:50%;
  width:9px;
  height:9px;
  border-radius:9999px;
  transform:translateX(-50%) scale(.72);
  background:var(--surface-raised);
  box-shadow:0 0 0 2px var(--border-strong);
  transition:transform 260ms ease,background-color 260ms ease,box-shadow 260ms ease;
}
.system.is-system-visible .system-step::after{
  transform:translateX(-50%) scale(1);
  background:var(--sg-blue);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--sg-blue) 24%,transparent);
}
.system.is-system-visible .system-step:nth-child(2)::after{transition-delay:150ms;background:var(--sg-pink)}
.system.is-system-visible .system-step:nth-child(3)::after{transition-delay:300ms;background:var(--sg-purple)}
.system.is-system-visible .system-step:nth-child(4)::after{transition-delay:450ms;background:var(--sg-peach)}
.system.is-system-visible .system-step:nth-child(5)::after{transition-delay:600ms;background:var(--sg-green)}
@media (hover:hover) and (pointer:fine){.system-step:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}}

/* Keep motion calm on smaller/touch layouts */
@media (max-width:900px){
  .system{padding-top:0}
  .system-track,.system-step::after{display:none}
  .hero::before,.page-hero::before,.hero::after,.page-hero::after{opacity:.18}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.sg-motion-ready .sg-reveal,html.sg-motion-ready .sg-hero-enter{opacity:1!important;transform:none!important;filter:none!important}.mascot-art,.footer-mascot{animation:none!important}
  .system-track-fill{transform:scaleX(1)!important}
}


/* V5 consistency pass */
.subject-card{justify-content:flex-start}
.subject-card>div{flex:1;min-width:0}
.subject-icon{order:-1}
.static-label{display:inline-flex;align-items:center;gap:8px;color:var(--muted-foreground);font-size:.8125rem;font-weight:600}
.static-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--context-accent,var(--sg-blue));flex:0 0 auto}