  :root{
    --navy: #3366B0;
    --navy-dark: #1B3460;
    --navy-deep: #132B52;
    --gold: #FFEC3D;
    --coral: #E4002B;
    --orange: #F7A823;
    --ice: #F3F8FD;
    --white: #FFFFFF;
    --ink: #0B1F3A;
    --muted: #5B6B87;
    --line: #E3EBF5;
    /* Chrysalis AI product accents */
    --hpc: #3366B0;
    --hpc-l: #5C8BD0;
    --score: #4A2873;
    --score-l: #6B3FA0;
    --voice: #921F74;
    --voice-l: #B8389A;
    --voice-p: #B8389A;
    --compass: #1F7FB8;
    --compass-l: #66AEDF;
    /* Thinkers accent */
    --thinkers: #2F8A26;
    --thinkers-l: #4DAE3E;
    --thinkers-coral: #E4002B;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: 'Inter', system-ui, sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family: 'Baloo 2', system-ui, sans-serif; font-weight:700; line-height:1.1; }
  a{ text-decoration:none; color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter', system-ui, sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--navy);
  }
  .eyebrow::before{
    content:''; width:22px; height:3px; border-radius:2px;
    background:linear-gradient(90deg, #E4002B, #F7A823, #FFEC3D, #4DAE3E, #66AEDF, #4A2873, #921F74);
  }
  .eyebrow.on-dark{ color:var(--gold); }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .navbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 32px; max-width:1160px; margin:0 auto; gap:18px; }
  .brand{ display:flex; align-items:center; gap:10px; flex:none; }
  .brand img{ height:32px; width:auto; }
  .brand-word{ font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:20px; color:var(--navy); white-space:nowrap; }

  .tabswitch{
    display:flex; gap:4px; background:var(--ice); border-radius:100px; padding:4px;
    border:1px solid var(--line);
  }
  .tabswitch button{
    font-family:'Inter', system-ui, sans-serif; font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:100px;
    border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .2s ease;
    white-space:nowrap;
  }
  .tabswitch button.active{
    background:var(--navy); color:white; box-shadow:0 6px 14px -4px rgba(51,102,176,.4);
  }
  .navbar nav{ display:none; gap:24px; }
  .navbar nav a{ font-size:14px; font-weight:600; color:var(--navy-dark); }
  .navbar nav a:hover{ color:var(--coral); }
  @media(min-width:1020px){ .navbar nav{ display:flex; } }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 26px; border-radius:100px; font-weight:700; font-size:15px;
    cursor:pointer; border:none; transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-primary{
    background:linear-gradient(100deg, var(--coral), var(--orange));
    color:white; box-shadow:0 10px 24px -8px rgba(228,0,43,.55);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(228,0,43,.65); }
  .btn-ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
  .btn-ghost:hover{ background:var(--navy); color:white; }
  .btn-sm{ padding:10px 20px; font-size:13.5px; }
  .nav-cta{ display:none; flex:none; }
  @media(min-width:760px){ .nav-cta{ display:inline-flex; } }

  /* ---------- Page/Panel switching ---------- */
  .panel{ display:none; }
  .panel.active{ display:block; animation:fadeIn .35s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- Hero (shared structure) ---------- */
  .hero{ position:relative; color:white; overflow:hidden; }
  .hero-tr{ background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #3366B0 100%); }
  .hero-ai{ background:linear-gradient(160deg, #1B1240 0%, #4A2873 55%, #6B3FA0 100%); }
  .hero-thinkers{ background:linear-gradient(160deg, #1A4A14 0%, #2F8A26 55%, #2F8A26 100%); }
  .hero-home{ background:linear-gradient(160deg, var(--navy-deep) 0%, #4A2873 60%, #3366B0 100%); padding-bottom:0; }
  .home-hero-image{
    max-width:1160px; margin:0 auto; padding:0 32px 56px; position:relative; z-index:2;
  }
  .home-hero-image .frame{
    border-radius:26px; overflow:hidden; box-shadow:0 34px 70px -24px rgba(19,43,82,.65);
    border:1px solid rgba(255,255,255,.15);
  }
  .home-hero-image img{ width:100%; display:block; }

  /* ---------- Home: product overview cards ---------- */
  .home-product-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
  @media(min-width:860px){ .home-product-grid{ grid-template-columns:repeat(3,1fr); } }
  .home-product-card{
    border-radius:22px; padding:32px 26px; border:1px solid var(--line); background:white;
    box-shadow:0 18px 40px -28px rgba(2,20,60,.3); display:flex; flex-direction:column;
    cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; text-align:left;
  }
  .home-product-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(2,20,60,.4); }
  .home-product-card .hp-tag{
    display:inline-block; padding:5px 13px; border-radius:100px; font-size:12px; font-weight:700; color:white;
    margin-bottom:18px; width:fit-content;
  }
  .home-product-card h3{ font-size:21px; color:var(--navy-dark); margin-bottom:10px; }
  .home-product-card p{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:20px; flex:1; }
  .home-product-card .hp-link{ font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
  .home-product-card .hp-link::after{ content:'\2192'; transition:transform .18s ease; }
  .home-product-card:hover .hp-link::after{ transform:translateX(4px); }

  /* ---------- Testimonials ---------- */
  .testimonial-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
  @media(min-width:700px){ .testimonial-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1050px){ .testimonial-grid{ grid-template-columns:repeat(3,1fr); } }
  .testimonial-card{
    background:white; border:1px solid var(--line); border-radius:20px; padding:26px 24px;
    box-shadow:0 16px 36px -26px rgba(2,20,60,.28); display:flex; flex-direction:column;
  }
  .testimonial-stars{ color:var(--gold); font-size:15px; letter-spacing:2px; margin-bottom:14px; }
  .testimonial-quote{ font-size:14.5px; color:var(--ink); line-height:1.65; font-style:italic; margin-bottom:20px; flex:1; }
  .testimonial-person{ display:flex; align-items:center; gap:12px; }
  .testimonial-avatar{
    width:44px; height:44px; border-radius:50%; flex:none;
    background:linear-gradient(135deg, var(--coral), var(--orange));
    display:flex; align-items:center; justify-content:center; color:white; font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:15px;
  }
  .testimonial-person b{ display:block; font-size:14px; color:var(--navy-dark); }
  .testimonial-person span{ font-size:12.5px; color:var(--muted); }
  .testimonial-placeholder-note{
    text-align:center; font-size:13px; color:var(--muted); background:var(--ice);
    border:1px dashed var(--line); border-radius:14px; padding:14px 20px; margin-bottom:36px;
  }
  .hero-grid{
    max-width:1160px; margin:0 auto; padding:70px 32px 0;
    display:grid; grid-template-columns:1fr; gap:20px; align-items:center; position:relative; z-index:2;
  }
  @media(min-width:920px){ .hero-grid{ grid-template-columns: 1.05fr .95fr; padding-top:86px; } }
  .hero-copy h1{ font-size:clamp(32px, 4.6vw, 50px); margin:16px 0 18px; }
  .hero-copy h1 .hl{
    background:linear-gradient(95deg, var(--coral), var(--orange), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-ai .hero-copy h1 .hl{
    background:linear-gradient(95deg, #4DAE3E, #66AEDF, var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-copy p{ font-size:17px; color:#CFE0F7; max-width:520px; line-height:1.65; margin-bottom:28px; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
  .hero-actions .btn-ghost{ border-color:rgba(255,255,255,.5); color:white; }
  .hero-actions .btn-ghost:hover{ background:white; color:var(--navy); }
  .hero-stats{ display:flex; gap:32px; flex-wrap:wrap; }
  .hero-stat b{ display:block; font-family:'Baloo 2', system-ui, sans-serif; font-size:25px; color:var(--gold); }
  .hero-stat span{ font-size:12px; color:#AEC6E8; text-transform:uppercase; letter-spacing:.05em; }
  .hero-photo-wrap{
    position:relative; border-radius:24px; overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(19,43,82,.6);
    justify-self:center;
  }
  .hero-photo-wrap img{ width:100%; height:100%; object-fit:cover; }
  .hero-badge{
    position:absolute; bottom:16px; left:16px; right:16px;
    background:rgba(1,30,72,.72); backdrop-filter:blur(6px);
    border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:10px;
  }
  .hero-ai .hero-badge{ background:rgba(27,18,64,.75); }
  .hero-badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; }
  .hero-badge span{ font-size:13px; color:#EAF2FC; font-weight:600; }
  .hero-wave{ display:block; width:100%; height:auto; margin-top:50px; }

  /* ---------- Section basics ---------- */
  section{ padding:76px 0; }
  .section-head{ max-width:640px; margin-bottom:42px; }
  .section-head h2{ font-size:clamp(27px,3.2vw,36px); margin-top:12px; color:var(--navy-dark); }
  .section-head p{ color:var(--muted); font-size:16px; margin-top:14px; line-height:1.65; }
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  /* ---------- Founder note ---------- */
  .founder{ background:var(--ice); }
  .founder-card{
    display:grid; grid-template-columns:1fr; gap:30px; align-items:center;
    background:white; border-radius:24px; padding:44px; border:1px solid var(--line);
    box-shadow:0 20px 50px -30px rgba(2,20,60,.25);
  }
  @media(min-width:800px){ .founder-card{ grid-template-columns:.7fr 2fr; padding:48px 54px; } }
  .founder-avatar{
    width:120px; height:120px; border-radius:50%; margin:0 auto; overflow:hidden;
    border:4px solid var(--ice); box-shadow:0 10px 26px -10px rgba(2,20,60,.35);
  }
  .founder-avatar img{ width:100%; height:100%; object-fit:cover; }
  .founder-name{ text-align:center; margin-top:14px; }
  .founder-name b{ display:block; font-family:'Baloo 2', system-ui, sans-serif; color:var(--navy-dark); font-size:16px; }
  .founder-name span{ font-size:12.5px; color:var(--muted); }
  .founder blockquote{ font-size:19px; line-height:1.7; color:var(--ink); font-style:italic; }
  .founder blockquote::before{ content:'\201C'; color:var(--coral); font-family:'Baloo 2', system-ui, sans-serif; font-size:40px; line-height:0; vertical-align:-8px; margin-right:2px; }

  /* ---------- Pillars ---------- */
  .pillars{ display:grid; gap:22px; grid-template-columns:1fr; }
  @media(min-width:860px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
  .pillar{
    border-radius:22px; padding:34px 28px; color:white; position:relative; overflow:hidden;
    min-height:260px; display:flex; flex-direction:column; justify-content:flex-end;
  }
  .pillar::before{
    content:''; position:absolute; top:-40px; right:-40px; width:150px; height:150px; border-radius:50%;
    background:rgba(255,255,255,.12);
  }
  .pillar.p1{ background:linear-gradient(150deg, #3366B0, #3366B0); }
  .pillar.p2{ background:linear-gradient(150deg, #244F8F, #3366B0); }
  .pillar.p3{ background:linear-gradient(150deg, #1B3D73, #3366B0); }
  .pillar .big{ font-family:'Baloo 2', system-ui, sans-serif; font-size:42px; color:var(--gold); margin-bottom:6px; }
  .pillar h3{ font-size:21px; margin-bottom:10px; }
  .pillar p{ font-size:14px; color:#D6E4F7; line-height:1.6; }

  /* ---------- Classroom photo band ---------- */
  .classband{ position:relative; height:400px; overflow:hidden; }
  .classband img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; }
  .classband-overlay{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(180deg, rgba(19,43,82,0) 0%, var(--navy-deep) 78%);
    padding-top:120px;
  }
  .classband-overlay .wrap{ padding-bottom:32px; }
  .classband-text{
    font-family:'Baloo 2', system-ui, sans-serif; font-weight:600; font-size:clamp(18px,2.5vw,26px); color:white;
    max-width:640px; line-height:1.35; margin-top:10px;
  }
  @media(max-width:640px){ .classband{ height:320px; } }

  /* ---------- Stats strip ---------- */
  .statstrip{ background:var(--navy-deep); color:white; }
  .statstrip.ai{ background:#1B1240; }
  .stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
  @media(min-width:760px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
  .stat-item{ text-align:center; padding:10px; }
  .stat-item b{ font-family:'Baloo 2', system-ui, sans-serif; font-size:36px; display:block;
    background:linear-gradient(95deg,var(--gold), var(--orange));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .stat-item span{ font-size:13px; color:#B9CBE6; }

  /* ---------- Grade deliverables (scroll cards) ---------- */
  .grade-scroll{ display:flex; gap:18px; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory; }
  .grade-card{
    flex:0 0 260px; scroll-snap-align:start;
    border:1px solid var(--line); border-radius:20px; padding:26px 24px;
    background:var(--ice);
  }
  .grade-card .tag{
    display:inline-block; padding:5px 12px; border-radius:100px; font-size:12px; font-weight:700;
    background:var(--navy); color:white; margin-bottom:14px;
  }
  .grade-card h4{ font-size:19px; color:var(--navy-dark); margin-bottom:10px; }
  .grade-card ul{ list-style:none; }
  .grade-card li{ font-size:13.5px; color:var(--muted); padding:6px 0; border-top:1px dashed var(--line); }
  .grade-card li:first-of-type{ border-top:none; }

  /* ---------- Benefits ---------- */
  .benefits{ background:var(--ice); }
  .benefit-grid-media{ display:grid; gap:28px; grid-template-columns:1fr; align-items:center; }
  @media(min-width:1050px){ .benefit-grid-media{ grid-template-columns:1.6fr 1fr; } }
  .benefit-photo{ border-radius:18px; overflow:hidden; }
  .benefit-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .benefit-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
  @media(min-width:700px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1050px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); } }
  .benefit{ background:white; border-radius:18px; padding:26px 20px; border:1px solid var(--line); text-align:left; }
  .benefit .num{ font-family:'Baloo 2', system-ui, sans-serif; font-size:15px; color:var(--coral); margin-bottom:10px; }
  .benefit h4{ font-size:15px; color:var(--navy-dark); margin-bottom:8px; line-height:1.35; }
  .benefit p{ font-size:13px; color:var(--muted); line-height:1.55; }

  /* ---------- Roadmap ---------- */
  .jsp-dashboard{ margin:0 0 34px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; }
  .jsp-dashboard-link{ display:block; }
  .jsp-dashboard img{ width:100%; height:auto; display:block; }
  .jsp-dashboard-caption{ margin:0; padding:14px 18px; font-size:.92rem; color:var(--muted); background:var(--ice); }
  .jsp-dashboard-caption a{ color:var(--navy); font-weight:600; text-decoration:none; }
  .road-track{ position:relative; padding-left:26px; border-left:3px solid var(--line); }
  .road-year{ position:relative; padding:0 0 42px 22px; }
  .road-year:last-child{ padding-bottom:0; }
  .road-year::before{
    content:''; position:absolute; left:-38px; top:2px; width:16px; height:16px; border-radius:50%;
    background:linear-gradient(135deg, var(--coral), var(--gold)); border:3px solid white; box-shadow:0 0 0 3px var(--navy);
  }
  .road-year .yr{ font-family:'Baloo 2', system-ui, sans-serif; font-size:14px; color:var(--coral); font-weight:700; letter-spacing:.03em; }
  .road-year h4{ font-size:20px; color:var(--navy-dark); margin:6px 0 12px; }
  .road-cols{ display:grid; gap:16px; grid-template-columns:1fr; }
  @media(min-width:700px){ .road-cols{ grid-template-columns:1fr 1fr; } }
  .road-col{ background:var(--ice); border-radius:14px; padding:16px 18px; }
  .road-col p.label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--navy); margin-bottom:8px; }
  .road-col ul{ list-style:none; }
  .road-col li{ font-size:13.5px; color:var(--muted); padding:4px 0; }
  .road-col li::before{ content:'\2014'; color:var(--orange); margin-right:6px; }

  /* ---------- Why us ---------- */
  .why{ background:linear-gradient(160deg, var(--navy-deep), var(--navy)); color:white; }
  .why-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
  @media(min-width:900px){ .why-grid{ grid-template-columns:.8fr 1.2fr; } }
  .why-big{ text-align:center; }
  .why-big b{
    font-family:'Baloo 2', system-ui, sans-serif; font-size:92px; display:block; line-height:1;
    background:linear-gradient(100deg, var(--gold), var(--orange));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .why-big span{ display:block; font-size:14px; color:#CFE0F7; margin-top:10px; max-width:260px; margin-inline:auto; }
  .why-list{ display:grid; gap:14px; grid-template-columns:1fr; }
  @media(min-width:600px){ .why-list{ grid-template-columns:1fr 1fr; } }
  .why-item{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .why-item .chip{ flex:none; width:8px; height:8px; border-radius:50%; margin-top:7px; background:var(--gold); }
  .why-item p{ font-size:14px; color:#E2EBF9; line-height:1.5; }

  /* ---------- CTA ---------- */
  .cta{ background:var(--ice); }
  .cta-card{
    border-radius:28px; padding:56px 40px; color:white; position:relative; overflow:hidden; text-align:center;
  }
  .cta-tr{ background:linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, #3366B0); }
  .cta-ai{ background:linear-gradient(120deg, #1B1240, var(--score) 60%, #6B3FA0); }
  .cta-card::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(249,218,68,.25), transparent 45%); }
  .cta-card h2{ position:relative; font-size:clamp(25px,3.4vw,34px); margin-bottom:14px; }
  .cta-card p{ position:relative; color:#D9E3F7; max-width:520px; margin:0 auto 30px; font-size:15.5px; }
  .cta-actions{ position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ---------- Footer ---------- */
  .foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center; }
  .foot-brand{ display:flex; align-items:center; gap:10px; background:white; padding:8px 16px; border-radius:12px; }
  .foot-brand img{ height:26px; width:auto; display:block; }
  .foot-brand span{ font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:16px; color:white; }

  /* ================= AI SOLUTIONS TAB SPECIFIC ================= */
  .product-band{ padding:74px 0; border-bottom:1px solid var(--line); }
  .product-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
  @media(min-width:900px){ .product-grid{ grid-template-columns:1fr 1fr; } }
  .product-grid.rev .p-media{ order:2; }
  @media(max-width:899px){ .product-grid.rev .p-media{ order:0; } }

  .p-kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; }
  .p-kicker img{ height:26px; width:auto; }
  .p-kicker b{ font-family:'Baloo 2', system-ui, sans-serif; font-size:22px; letter-spacing:.01em; }
  .p-stat-badge{
    display:inline-flex; flex-direction:column; padding:8px 16px; border-radius:14px; color:white;
    margin-bottom:18px;
  }
  .p-stat-badge b{ font-family:'Baloo 2', system-ui, sans-serif; font-size:22px; line-height:1; }
  .p-stat-badge span{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.9; }
  .product-band h3{ font-size:clamp(24px,2.8vw,30px); color:var(--navy-dark); margin-bottom:14px; }
  .product-band > .wrap > .product-grid p.lead{ color:var(--muted); font-size:15.5px; line-height:1.65; margin-bottom:22px; }
  .p-features{ list-style:none; display:grid; gap:10px; margin-bottom:26px; }
  .p-features li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
  .p-features li .tick{
    flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; color:white; margin-top:1px;
  }
  .p-media{
    border-radius:22px; overflow:hidden; position:relative;
    box-shadow:0 24px 50px -20px rgba(2,20,60,.35);
    aspect-ratio:4/3;
  }
  .p-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .p-media.contain{ background:#fff; padding:14px; border:1px solid var(--line); aspect-ratio:auto; }
  .p-media.contain img{ object-fit:contain; border-radius:12px; }
  .p-grades{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .p-grade-chip{
    font-size:12px; font-weight:700; padding:6px 12px; border-radius:100px; color:white;
  }

  /* AI deliverables comparison */
  .ai-compare{ background:var(--ice); }
  .compare-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
  @media(min-width:760px){ .compare-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1050px){ .compare-grid{ grid-template-columns:repeat(4,1fr); } }
  .compare-card{ background:white; border-radius:20px; padding:24px 22px; border:1px solid var(--line); }
  .compare-card .bar{ height:6px; border-radius:4px; margin-bottom:16px; }
  .compare-card h4{ font-family:'Baloo 2', system-ui, sans-serif; font-size:19px; color:var(--navy-dark); margin-bottom:6px; }
  .compare-card .range{ font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
  .compare-card ul{ list-style:none; }
  .compare-card li{ font-size:13px; color:var(--muted); padding:5px 0; border-top:1px dashed var(--line); }
  .compare-card li:first-of-type{ border-top:none; }

  /* ---------- Glimpses of student work (Thinkers) ---------- */
  .glimpse-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
  @media(min-width:760px){ .glimpse-grid{ grid-template-columns:repeat(2,1fr); } }
  .glimpse-card{
    border-radius:20px; overflow:hidden; border:1px solid var(--line); background:white;
    box-shadow:0 16px 36px -22px rgba(2,20,60,.3);
  }
  .glimpse-card .g-photo{ aspect-ratio:5/3; overflow:hidden; }
  .glimpse-card .g-photo img{ width:100%; height:100%; object-fit:cover; }
  .glimpse-card .g-body{ padding:22px 24px; }
  .glimpse-card .g-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .glimpse-card .g-head b{ font-family:'Baloo 2', system-ui, sans-serif; font-size:18px; color:var(--navy-dark); }
  .glimpse-card .g-head span{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:100px; color:white; }
  .glimpse-card ul{ list-style:none; margin-bottom:12px; }
  .glimpse-card li{ font-size:13.5px; color:var(--muted); padding:4px 0; }
  .glimpse-card li::before{ content:'\2713'; color:var(--thinkers); font-weight:700; margin-right:8px; }
  .glimpse-card .g-quote{
    font-family:'Baloo 2', system-ui, sans-serif; font-size:13.5px; font-style:italic; color:var(--navy-dark);
    background:var(--ice); border-radius:10px; padding:10px 14px; line-height:1.5;
  }

  /* ---------- Timeline (Thinkers) ---------- */
  .timeline-wrap{ border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 44px -26px rgba(2,20,60,.3); }
  .timeline-wrap img{ width:100%; display:block; }

  /* ================= MY SPACE TAB SPECIFIC ================= */
  .hero-myspace{ background:linear-gradient(135deg, #1B2130 0%, #2B3346 55%, #3A4358 100%); }
  .ms-section-alt{ background:var(--ice); }
  .ms-section-dark{ background:linear-gradient(160deg, #171C29, #232B3D); color:#fff; }
  .ms-section-dark .section-head h2, .ms-section-dark .section-head p{ color:#fff; }
  .ms-section-dark .section-head p{ opacity:.85; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; }
  .chip-obj{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--navy-dark); }
  .chip-obj.priority{ border-color:var(--orange); color:#C1580D; background:#FFF3E8; }

  .two-col-compare{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:22px; }
  @media(min-width:800px){ .two-col-compare{ grid-template-columns:1fr 1fr; } }
  .compare-col{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; }
  .compare-col h4{ margin:0 0 14px; font-family:'Baloo 2', system-ui, sans-serif; color:var(--navy-dark); }
  .compare-col ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--muted); }
  .compare-col.hl{ border:1px solid var(--orange); background:#FFF9F3; }

  .path-grid{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:22px; }
  @media(min-width:900px){ .path-grid{ grid-template-columns:repeat(3,1fr); } }
  .path-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
  .path-tag{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--orange); }
  .path-card h4{ margin:8px 0 8px; }
  .path-card p{ font-size:14px; color:var(--muted); margin:0; }

  .framework-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin-top:22px; }
  @media(min-width:900px){ .framework-grid{ grid-template-columns:repeat(4,1fr); } }
  .framework-step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; text-align:center; }
  .framework-step .num{ width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px; font-family:'Baloo 2', system-ui, sans-serif; }
  .framework-step h4{ margin:0 0 8px; font-size:15px; }
  .framework-step p{ font-size:13px; color:var(--muted); margin:0; }
  .framework-step .quote{ font-size:12.5px; font-style:italic; color:var(--navy-dark); margin-top:10px; }

  .battle-table-wrap{ overflow-x:auto; margin-top:22px; border-radius:16px; border:1px solid var(--line); }
  .battle-table{ width:100%; border-collapse:collapse; background:#fff; min-width:560px; }
  .battle-table th{ text-align:left; background:var(--ice); padding:12px 16px; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .battle-table td{ padding:14px 16px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:top; color:var(--muted); }
  .battle-table tr td:first-child{ font-weight:700; color:var(--navy-dark); }

  .timeline-compare{ display:grid; gap:14px; margin-top:22px; }
  .timeline-row{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
  .timeline-row .tl-label{ font-weight:700; font-size:13.5px; margin-bottom:10px; color:var(--navy-dark); }
  .timeline-row.wait{ border-left:4px solid #C94B4B; }
  .timeline-row.acts{ border-left:4px solid #4DAE3E; }
  .tl-steps{ display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:8px; }
  .tl-steps span{ background:var(--ice); border-radius:8px; padding:6px 10px; }
  .tl-result{ font-size:13.5px; color:var(--navy-dark); }

  .lesson-arc{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:22px; }
  @media(min-width:900px){ .lesson-arc{ grid-template-columns:repeat(5,1fr); } }
  .arc-step{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 14px; text-align:center; }
  .arc-step .arc-num{ font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; color:var(--orange); font-size:20px; display:block; margin-bottom:6px; }
  .arc-step h4{ margin:0 0 6px; font-size:14.5px; }
  .arc-step p{ margin:0; font-size:12.5px; color:var(--muted); }

  .playbook-chart{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; margin-top:18px; }
  .playbook-chart img{ width:100%; display:block; }

  .param-grid{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:22px; }
  @media(min-width:700px){ .param-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1100px){ .param-grid{ grid-template-columns:repeat(4,1fr); } }
  .param-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:18px; }
  .param-card .p-num{ font-family:'Baloo 2', system-ui, sans-serif; color:var(--gold); font-weight:800; font-size:13px; }
  .param-card h4{ margin:6px 0 6px; color:#fff; font-size:15px; }
  .param-card p{ margin:0; font-size:12.5px; color:rgba(255,255,255,.75); }

  .verdict-table-wrap{ overflow-x:auto; margin-top:22px; border-radius:16px; border:1px solid rgba(255,255,255,.15); }
  .verdict-table{ width:100%; border-collapse:collapse; min-width:560px; }
  .verdict-table th{ text-align:left; background:rgba(255,255,255,.08); padding:12px 16px; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:rgba(255,255,255,.7); }
  .verdict-table td{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.9); }
  .verdict-table tr td:first-child{ font-weight:700; color:#fff; white-space:nowrap; }

  /* ================= IN-TAB PILL NAV ================= */
  .in-tab-nav{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:72px; z-index:40; }
  .in-tab-nav .wrap{ display:flex; gap:6px; padding:10px 24px; overflow-x:auto; }
  .in-tab-nav a{ flex:none; padding:8px 16px; border-radius:999px; background:var(--ice); color:var(--navy-dark); font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; }
  .in-tab-nav a:hover{ background:var(--navy); color:#fff; }

  /* ================= SITE SEARCH (HOME) ================= */
  .site-search{ max-width:560px; margin:28px auto 0; position:relative; }
  .site-search-box{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.35); border-radius:999px; padding:12px 20px; backdrop-filter:blur(6px); }
  .site-search-box svg{ flex:none; opacity:.85; }
  .site-search-box input{ flex:1; background:none; border:none; outline:none; color:#fff; font-size:15px; font-family:'Inter', system-ui, sans-serif; }
  .site-search-box input::placeholder{ color:rgba(255,255,255,.7); }
  .site-search-hint{ margin-top:10px; font-size:12.5px; color:rgba(255,255,255,.65); text-align:center; }
  .site-search-results{ position:absolute; top:calc(100% + 10px); left:0; right:0; background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(2,10,30,.35); overflow:hidden; z-index:60; text-align:left; display:none; max-height:360px; overflow-y:auto; }
  .site-search-results.open{ display:block; }
  .site-search-item{ display:flex; flex-direction:column; gap:2px; padding:12px 18px; cursor:pointer; border-bottom:1px solid var(--line); }
  .site-search-item:last-child{ border-bottom:none; }
  .site-search-item:hover, .site-search-item.active{ background:var(--ice); }
  .site-search-item .ssi-label{ font-weight:700; color:var(--navy-dark); font-size:14px; }
  .site-search-item .ssi-tab{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .site-search-empty{ padding:16px 18px; color:var(--muted); font-size:13.5px; }
  section[id]{ scroll-margin-top: 128px; }

  /* ================= SUPPORT TAB SPECIFIC ================= */
  .hero-support{ background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #3366B0 100%); text-align:center; padding-bottom:0; }
  .support-hero-img{ width:100%; max-width:760px; border-radius:18px; margin:26px auto 0; display:block; box-shadow:0 24px 50px -28px rgba(0,0,0,.5); }
  .support-img-card{ max-width:760px; margin:0 auto; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 44px -26px rgba(2,20,60,.25); }
  .support-img-card img{ width:100%; display:block; }
  .support-headline-grid{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:26px; }
  @media(min-width:800px){ .support-headline-grid{ grid-template-columns:repeat(4,1fr); } }
  .support-headline-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center; }
  .support-headline-card .icon{ font-size:26px; margin-bottom:10px; }
  .support-headline-card h4{ font-size:15px; margin:0; color:var(--navy-dark); line-height:1.35; }
  .support-touchpoints{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:22px; }
  @media(min-width:700px){ .support-touchpoints{ grid-template-columns:repeat(3,1fr); } }
  .support-touch-item{ background:var(--ice); border-radius:14px; padding:16px 18px; font-size:13.5px; color:var(--navy-dark); font-weight:600; }
  .support-touch-item span{ display:block; font-weight:400; color:var(--muted); margin-top:4px; }
  .support-day-banner{ margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px; font-size:14px; color:var(--navy-dark); }

  .battle-tips{ margin-top:26px; background:#fff; border-radius:16px; padding:22px; border:1px solid var(--line); display:grid; gap:4px; grid-template-columns:1fr; }
  @media(min-width:800px){ .battle-tips{ grid-template-columns:1fr 1fr; } }
  .battle-tip-item{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; }
  .battle-tip-item .chip{ flex:none; width:8px; height:8px; border-radius:50%; margin-top:7px; background:var(--orange); }
  .battle-tip-item p{ font-size:14px; color:var(--navy-dark); line-height:1.5; margin:0; }

  ::selection{ background:var(--gold); color:var(--navy-deep); }

  @media(max-width:640px){
    .wrap{ padding:0 20px; }
    .navbar{ padding:12px 20px; flex-wrap:wrap; }
    section, .product-band{ padding:52px 0; }
    .founder-card, .cta-card{ padding:30px 22px; }
  }

  /* ---------- Multi-page nav (tabs are links now) ---------- */
  .tabswitch{ flex-wrap:wrap; justify-content:center; }
  .tabswitch a{
    font-family:'Inter', system-ui, sans-serif; font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:100px;
    background:transparent; color:var(--muted); text-decoration:none; transition:all .2s ease; white-space:nowrap;
  }
  .tabswitch a:hover{ color:var(--navy); }
  .tabswitch a.active{ background:var(--navy); color:white; box-shadow:0 6px 14px -4px rgba(51,102,176,.4); }
  .panel{ display:block; }
  .home-product-card{ cursor:pointer; }
  /* fit Home + 7 tabs on one line on laptop widths */
  .navbar{ max-width:1320px; padding-left:24px; padding-right:24px; }
  .tabswitch{ gap:2px; }
  .tabswitch a{ padding:9px 13px; font-size:13px; }
  @media(min-width:1200px){ .tabswitch{ flex-wrap:nowrap; } }


  /* ===== Match the main site's design system ===== */
  .wrap{ max-width:1200px; padding:0 24px; }
  .eyebrow{ letter-spacing:.1em; font-size:13px; color:#3366B0; }
  .eyebrow::before{ width:32px; }
  .section-head h2{ font-size:clamp(30px,3.6vw,46px); line-height:1.08; color:#132B52; }
  .btn{ border-radius:100px; font-weight:700; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
  .btn-primary{ background:#FFEC3D; color:#132B52; box-shadow:0 10px 24px -12px rgba(19,43,82,.5); }
  .btn-primary:hover{ background:#FFE11A; box-shadow:0 14px 28px -12px rgba(19,43,82,.6); }
  .btn-ghost:hover{ transform:translateY(-2px); }
  .home-product-card, .founder-card, .benefit, .compare-col, .cta-card{ border-radius:24px; }
  /* rainbow accents, as on the main pages */
  .stat-grid .stat-item{ border-top:3px solid #66AEDF; padding-top:16px; }
  .stat-grid .stat-item:nth-child(4n+1){ border-top-color:#E4002B; }
  .stat-grid .stat-item:nth-child(4n+2){ border-top-color:#F7A823; }
  .stat-grid .stat-item:nth-child(4n+3){ border-top-color:#4DAE3E; }
  .stat-grid .stat-item:nth-child(4n+4){ border-top-color:#66AEDF; }
  .benefit-grid .benefit:nth-child(7n+1) .num{ color:#E4002B; }
  .benefit-grid .benefit:nth-child(7n+2) .num{ color:#F7A823; }
  .benefit-grid .benefit:nth-child(7n+3) .num{ color:#4DAE3E; }
  .benefit-grid .benefit:nth-child(7n+4) .num{ color:#1F7FB8; }
  .benefit-grid .benefit:nth-child(7n+5) .num{ color:#4A2873; }
  .benefit-grid .benefit:nth-child(7n+6) .num{ color:#921F74; }
  .benefit-grid .benefit:nth-child(7n+7) .num{ color:#3366B0; }
  .why-item:nth-child(7n+1) .chip{ background:#E4002B; } .why-item:nth-child(7n+2) .chip{ background:#F7A823; }
  .why-item:nth-child(7n+3) .chip{ background:#FFEC3D; } .why-item:nth-child(7n+4) .chip{ background:#4DAE3E; }
  .why-item:nth-child(7n+5) .chip{ background:#66AEDF; } .why-item:nth-child(7n+6) .chip{ background:#B8389A; }
  .why-item:nth-child(7n+7) .chip{ background:#921F74; }
  /* heroes that end in a wave: no coloured band below the wave */
  .hero-tr, .hero-ai, .hero-thinkers, .hero-home, .hero-support, .hero-myspace{ padding-bottom:0; }
  /* readability: nothing smaller than 12px; comfortable tap targets */
  .p-stat-badge span, .road-col p.label, .glimpse-card .g-head span, .path-tag, .battle-table th, .verdict-table th{ font-size:12px; }
  .product-band a[target="_blank"]:not(.btn), .ms-section-alt a[target="_blank"]:not(.btn){ padding:8px 0; }
  a.home-product-card{ display:flex; flex-direction:column; color:inherit; }
  /* every Solutions hero ends in the same white wave as the main pages */
  .hero-home, .hero-support, .hero-myspace{ padding-bottom:0; }
  .hero-wave{ margin-bottom:-1px; height:clamp(36px,5vw,72px); }
  /* single centred hero column (AI Solutions) */
  .hero-grid--center, .hero-grid.hero-grid--center{ grid-template-columns:1fr; max-width:900px; text-align:center; padding-bottom:10px; }
  .hero-grid--center .eyebrow{ justify-content:center; }
  .hero-grid--center .hero-copy p{ margin-left:auto; margin-right:auto; max-width:640px; }
  .hero-grid--center .hero-actions, .hero-grid--center .hero-stats{ justify-content:center; }
  /* one type scale with the main pages */
  .hero-copy h1{ font-size:clamp(34px,4vw,52px); line-height:1.08; }
  .hero-copy p, .section-head p{ font-size:18px; }
  .btn{ font-size:16px; }
  .btn-sm{ font-size:14px; }
