/* Kidzu adaptation. Geometry is extracted from the licensed template CSS.
   Photography and product previews belong to the existing ClaseleMele site. */
:root {
  --ink: #385469;
  --muted: #5c707e;
  --paper: #fffbfb;
  --green: #385469;
  --purple: #385469;
  --pink: #b96327;
  --orange: #f39f5f;
  --cream: #fef4de;
  --sky: #c9dde2;
  --pale-blue: #eef5f8;
  --hairline: #38546926;
  --sage: #e6e8fc;
  --blue: #e1f6fe;
  --peach: #ffeaeb;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--ink);
  background: var(--paper);
}
html { scroll-padding-top: 125px; }
body { font-family: 'Source Sans 3', sans-serif; font-size: 18px; line-height: 1.56; background: var(--paper); }
h1,h2,h3,h4 { font-family: Quicksand, sans-serif; font-weight: 700; color: var(--ink); letter-spacing: -.035em; }
h1 { font-size: 70px; line-height: 1.14; letter-spacing: -2px; }
h2 { font-size: 50px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.42; letter-spacing: -.025em; }
h1 em,h2 em { font: inherit; color: inherit; letter-spacing: inherit; }
p { font-size: 18px; line-height: 1.65; color: var(--muted); }
.wrap { width: min(1380px, calc(100% - 50px)); }
.section { padding-block: 120px; }
.eyebrow { font: 700 18px/1.5 Kalam, cursive; color: #ad5925; letter-spacing: 0; text-transform: none; padding: 0; background: none; margin-bottom: 14px; }
.eyebrow > svg { display: none; }
.reveal { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; animation: none; }
a,button { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid #b96327; outline-offset: 5px; }
.skip { z-index: 100; }

/* Full-width blue header with the template's original scallop geometry. */
.site-header-shell { position: sticky; top: 0; z-index: 30; background: linear-gradient(var(--sky) 0 60px,transparent 60px); }
.site-header-shell::after { content: ''; position: absolute; top: calc(100% - 57px); inset-inline: 0; height: 90px; background: var(--sky); mask: url('/site/kidzu/scallop.svg') center / 150% 100% no-repeat; transform: rotate(180deg); pointer-events: none; z-index: -1; }
.site-header.wrap { width: min(1720px, calc(100% - 30px)); height: 76px; gap: 25px; background: transparent; box-shadow: none; border: 0; }
.site-header .wordmark { font: 700 32px/1 Quicksand, sans-serif; letter-spacing: -1.7px; gap: 8px; }
.site-header .wordmark img { width: 46px; height: 46px; }
.wordmark > span > span { color: var(--ink); }
.site-header .desktop-nav { font: 700 16px/1.4 Quicksand, sans-serif; gap: 30px; margin-inline: auto; }
.desktop-nav > a,.audience-nav > button { border-radius: 0; padding: 14px 8px; font-weight: 700; min-height: 50px; }
.desktop-nav > a[aria-current],.audience-nav > button.is-current { color: var(--ink); background: transparent; }
.desktop-nav > a:hover,.audience-nav > button:hover,.audience-nav > button[aria-expanded=true] { color: var(--orange); background: transparent; }
[aria-expanded=true] > .nav-chevron { transform: none; }
.audience-links { top: 100%; width: 270px; padding: 10px 0; border: 0; border-top: 4px solid var(--orange); border-radius: 10px; box-shadow: 0 7px 29px #64646f33; }
.audience-links a { font: 700 16px/38px Quicksand,sans-serif; padding: 0 22px 0 32px; border-radius: 0; }
.audience-links a + a { border-top: 0; }
.audience-links a > svg { display: none; }
.audience-links a:hover,.audience-links a[aria-current] { color: var(--orange); background: transparent; }
.audience-icon { display: none; }
.site-header .login-link { margin-left: 0; padding: 0; width: 59px; height: 59px; min-height: 59px; flex: none; border: 1px solid #38546933; border-radius: 50%; font: 700 16px/1.4 Quicksand,sans-serif; }
.site-header .login-link:hover { background: transparent; color: #9d4a17; }
.site-header .login-link svg { display: block; width: 22px; height: 22px; }
.site-header .header-signup { min-height: 59px; padding: 16px 24px; font: 700 16px/1.4 Quicksand,sans-serif; border-radius: 0; position: relative; isolation: isolate; background: transparent; color: white; }
.site-header .header-signup::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--orange); mask: url('/site/kidzu/button.svg') center / 100% 100% no-repeat; transition: background .25s ease; }
.site-header .header-signup:hover { color: white; }
.site-header .header-signup:hover::before { background: var(--ink); }
.site-header .header-signup > svg { width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 50%; padding: 1px; }
.site-header-shell.is-scrolled { background: white; box-shadow: 0 4px 22px #3854690d; }
.site-header-shell.is-scrolled::after { display: none; }
.site-header-shell.is-scrolled .site-header.wrap { height: 84px; }

/* Original Kidzu button silhouette with legible product labels. */
.pill { position: relative; isolation: isolate; border-radius: 0; padding: 18px 28px; min-height: 59px; gap: 14px; font: 700 16px/1.45 Quicksand,sans-serif; letter-spacing: 0; text-transform: none; background: transparent; box-shadow: none; }
.pill::before { content: ''; position: absolute; inset: 0; z-index: -1; mask: url('/site/kidzu/button.svg') center / 100% 100% no-repeat; background: var(--orange); transition: background .25s ease; }
.pill.dark,.pill.dark:hover { color: var(--ink); background: transparent; }
.pill.dark:hover { color: #fff; }
.pill.dark:hover::before { background: var(--ink); }
.pill > span { width: 20px; height: 20px; background: none; border: 1px solid currentColor; border-radius: 50%; }
.pill > span svg { width: 15px; height: 15px; }
.pill.outline,.pill.light { color: white; box-shadow: none; background: transparent; }
.pill.outline:hover,.pill.light:hover { color: white; background: transparent; box-shadow: none; }
.pill.outline::before,.pill.light::before { background: var(--ink); }
.pill.outline > span,.pill.light > span { background: transparent; }
.pill.outline:hover > span,.pill.light:hover > span { color: white; background: transparent; }
.pill.outline:hover::before,.pill.light:hover::before { background: #476a83; }
.text-link { color: var(--ink); font: 700 16px/1.5 Quicksand,sans-serif; text-decoration-color: #f39f5f; }
.quiet-link { font-size: 17px; margin-top: 20px; }

/* Home 01: large cream hero, text left and existing transparent photo right. */
.playful-hero { background: var(--cream); border-radius: 0; overflow: hidden; position: relative; }
.playful-hero-grid { grid-template-columns: 1.12fr 1fr; gap: 0; min-height: 790px; align-items: center; }
.playful-hero-copy { padding: 95px 0 165px; max-width: 780px; position: relative; z-index: 2; }
.playful-hero h1 { font-size: clamp(55px,4.85vw,70px); line-height: 1.14; color: var(--ink); }
.playful-hero h1 em { color: var(--ink); }
.playful-hero .eyebrow { font-size: 18px; margin-bottom: 18px; color: #ab5722; text-transform: uppercase; }
.playful-hero-copy > p { max-width: 592px; margin-top: 30px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.playful-hero .hero-actions { gap: 20px; margin-top: 38px; flex-wrap: wrap; }
.playful-hero .pill { min-height: 59px; font-size: 16px; }
.playful-hero .hero-actions > .text-link { text-decoration: none; position: relative; isolation: isolate; background: transparent; padding: 18px 28px; color: white; min-height: 59px; font-size: 16px; }
.playful-hero .hero-actions > .text-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); mask: url('/site/kidzu/button.svg') center / 100% 100% no-repeat; }
.playful-hero .hero-actions > .text-link:hover::before { background: #476a83; }
.hero-actions > .text-link > span { background: none; color: inherit; }
.hero-trust,.hero-blob,.hero-photo-note { display: none; }
.playful-hero-art { width: 100%; height: 760px; align-self: end; position: relative; }
.playful-hero-art > img { height: 100%; width: 112%; max-width: none; object-fit: contain; object-position: bottom right; position: absolute; bottom: 0; right: -10px; }
.hero-star { left: -45px; top: 70%; width: 50px; color: var(--orange); stroke: var(--orange); }
.hero-cloud { left: -45px; top: 60px; width: 115px; height: 70px; color: #edaf73; stroke: #edaf73; }
.hero-rays { right: 3%; top: 80px; color: var(--orange); stroke: var(--orange); }
.hero-wave { height: 46px; bottom: -2px; }
.hero-wave path { fill: var(--paper); }
.home-features-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: 0; }
.hero-feature-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding-block: 115px 100px; margin-block: 0; max-width: none; }
.hero-feature,.hero-feature:nth-child(n) { position: relative; isolation: isolate; padding: 30px 20px 45px; min-height: 275px; border: 0; outline: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fedfef; mask: url('/site/kidzu/feature-mask.svg') center / 100% 100% no-repeat; }
.hero-feature:nth-child(2)::before { background: #e6e8fc; }
.hero-feature:nth-child(3)::before { background: #e1f6fe; }
.hero-feature:nth-child(4)::before { background: #ffeaeb; }
.hero-feature > div { display: flex; justify-content: flex-end; margin-bottom: 26px; padding-right: 24px; }
.hero-feature .feature-round { width: 100px; height: 100px; border-radius: 50%; background: #fff !important; color: #df77a7; box-shadow: none; }
.feature-round svg { width: 43px; height: 43px; }
.hero-feature:nth-child(2) .feature-round { color: #8174d4; background: #fff; }
.hero-feature:nth-child(3) .feature-round { color: #35a9c5; background: #fff; }
.hero-feature:nth-child(4) .feature-round { color: #db8993; background: #fff; }
.hero-feature .feature-number,.hero-feature p { display: none; }
.hero-feature h2 { font-size: 23px; line-height: 1.35; margin: 0; }
.hero-feature:hover { transform: translateY(-5px); box-shadow: none; }
.home-product-section { width: min(1440px,calc(100% - 50px)); margin: 0 auto 100px; padding: 70px 40px; background: var(--pale-blue); border-radius: 40px; }
.home-product-grid { width: 100%; grid-template-columns: 1fr 1fr; gap: 60px; }
.home-product-grid > div:first-child { order: 2; }
.home-product-grid > div:last-child { order: 1; }
.home-product-grid h2 { font-size: 50px; }
.home-product-grid h2 em { color: var(--ink); }
.home-product-grid p { font-size: 18px; }
.home-product-grid .check-list { font-size: 18px; gap: 13px; }
.home-product-grid .pill { font-size: 16px; margin-top: 30px; }
.home-product-grid .preview-frame { border: 1px solid #d7e4e8; border-radius: 25px; box-shadow: 0 16px 40px #3854690b; }
.school-about { gap: 75px; padding-top: 20px; padding-bottom: 120px; }
.school-about h2 { font-size: 50px; }
.school-about h2 em { color: inherit; }
.school-about-copy > p { font-size: 18px; }
.school-collage { height: 590px; gap: 22px; }
.collage-family { height: 440px; border-radius: 140px 140px 35px 35px; }
.collage-class { height: 340px; margin-top: 205px; border-radius: 100px 100px 30px 30px; }
.collage-stamp { background: var(--cream); color: var(--ink); border-radius: 22px; font-size: 18px; box-shadow: none; }
.collage-stamp svg { color: #bf6728; }
.collage-dots { border-color: #f0b789; }
.about-benefits { gap: 24px; margin-block: 28px; }
.about-benefits article > span { background: var(--cream); color: #ad5925; box-shadow: none; }
.about-benefits h3 { font-size: 22px; }
.about-benefits p { font-size: 17px; }
.community-band { background: var(--cream); padding: 65px 0; }
.community-band .reveal > span { background: white; color: var(--ink); border: 1px dashed #ddbc9a; box-shadow: none; width: 75px; height: 75px; }
.community-band h2 { font-size: 27px; }
.community-band p { font-size: 17px; }
.audiences-section { margin-top: 115px; padding: 75px 40px; border-radius: 45px; background: #f4f3ff; }
.center-heading { max-width: 790px; margin-inline: auto; }
.center-heading h2 { font-size: 50px; }
.center-heading p { font-size: 18px; max-width: 640px; margin: 20px auto 0; }
.education-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.education-audience { padding: 22px; border: 1px dashed #ead6c6; border-radius: 130px 130px 30px 30px; background: var(--paper); box-shadow: none; }
.education-audience:hover { box-shadow: none; transform: translateY(-4px); }
.audience-photo { border-radius: 110px 110px 35px 35px; height: 290px; }
.audience-photo > span { background: var(--cream); color: var(--ink); border-radius: 10px; font-size: 14px; padding: 8px 15px; }
.audience-body { padding: 26px 8px 6px; }
.audience-kicker { color: #9c5426; font: 700 15px/1.5 Kalam,cursive; }
.audience-body h3 { font-size: 25px; line-height: 1.35; }
.audience-body > p { font-size: 17px; }
.audience-body .card-link { color: var(--ink); border-color: #dfd5cf; font: 700 15px/1.5 Quicksand,sans-serif; }
.audience-body .card-link i { color: var(--ink); background: var(--orange); width: 40px; height: 40px; }
.admin-photo { background: var(--sky); }
.admin-miniature { background: #fff; box-shadow: none; }
.admin-miniature > div,.admin-miniature svg { color: var(--ink); }
.home-get-started { text-align: center; }
.education-steps { gap: 25px; text-align: left; margin: 50px 0 40px; }
.education-steps li { background: var(--cream); border-radius: 25px; padding: 35px; min-height: 250px; }
.education-steps li:nth-child(2) { background: #e1f6fe; }
.education-steps li:nth-child(3) { background: #e6e8fc; }
.education-steps li > span { width: 55px; height: 55px; font: 700 23px/1 Quicksand,sans-serif; background: var(--orange); color: var(--ink); margin-bottom: 24px; }
.education-steps li:nth-child(2) > span,.education-steps li:nth-child(3) > span { background: var(--ink); color: #fff; }
.education-steps h3 { font-size: 23px; }
.education-steps p { font-size: 18px; }
.home-get-started > .pill { font-size: 16px; }

/* Inner pages share Kidzu's centered cream banner and spacious content rhythm. */
.kidzu-page-banner { position: relative; background: var(--cream); padding: 135px 25px 145px; text-align: center; }
.kidzu-page-banner::after { content: ''; position: absolute; inset: auto 0 -1px; height: 24px; background: var(--paper); mask: url('/site/kidzu/scallop.svg') center top / 1800px 65px repeat-x; }
.kidzu-page-banner h1 { font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; }
.site-breadcrumb { display: flex; justify-content: center; gap: 12px; margin: 22px auto 0; padding: 0; width: auto; font-size: 18px; color: #a7511d; }
.site-breadcrumb a { color: var(--ink); }
.role-hero { padding-top: 115px; padding-bottom: 100px; gap: 65px; align-items: center; }
.role-hero .page-lead-title,.page-lead-title { font-size: 50px; line-height: 1.2; }
.role-hero > div > p { font-size: 18px; margin-top: 25px; max-width: 600px; }
.role-hero .pill { margin-top: 30px; }
.role-hero .small-note { font-size: 16px; }
.role-stage { background: var(--pale-blue); border-radius: 35px; padding: 25px; }
.blue-stage { background: #e1f6fe; }
.sand-stage { background: var(--cream); }
.role-stage .preview-frame { border-radius: 24px; box-shadow: none; border: 1px solid #38546918; }
.editorial-grid { gap: 75px; }
.editorial-grid p,.feature-lines p,.registry-list p { font-size: 18px; }
.feature-lines article { padding: 25px 0; gap: 20px; border-color: #38546925; }
.feature-lines article > span { font: 700 25px/1.5 Quicksand,sans-serif; color: #b86228; }
.feature-lines article > svg { color: #b86228; width: 30px; height: 30px; }
.feature-lines h3 { font-size: 24px; }
.family-band,.teacher-process,.registry-section { background: var(--pale-blue); border-radius: 0; padding-block: 95px; }
.family-grid,.registry-grid { gap: 80px; }
.family-adults > span { background: var(--cream); box-shadow: 0 0 0 7px white; }
.family-adults > span:nth-child(2) { background: #ffeaeb; }
.family-children > span { background: #fff; box-shadow: 0 0 0 5px #c9dde2; }
.family-illustration > p { color: var(--ink); font-family: Quicksand,sans-serif; }
.family-connector { border-color: #a9c4cd; }
.family-connector::before { background: #a9c4cd; }
.teacher-process { background: var(--cream); }
.horizontal-steps { gap: 35px; }
.horizontal-steps li > span { background: white; color: #b86228; width: 60px; height: 60px; font-size: 25px; }
.horizontal-steps h3 { font-size: 24px; }
.horizontal-steps p { font-size: 18px; }
.registry-list article > span { color: #b86228; }
.split-note { gap: 75px; }
.split-note p { font-size: 18px; }
.page-intro { background: none; border-radius: 0; padding: 100px 25px 65px; overflow: visible; }
.page-intro::before { display: none; }
.page-intro h2 em { color: var(--ink); }
.page-intro > p { max-width: 760px; font-size: 18px; margin: 25px auto 0; color: var(--muted); }
.page-intro .intro-links { gap: 20px; margin-top: 30px; }
.page-intro .pill { font-size: 16px; }
.page-intro .pill.outline { color: white; box-shadow: none; }
.page-intro .pill.outline > span { color: white; background: transparent; }
.feature-index { background: var(--pale-blue); border: 0; border-radius: 18px; padding: 18px 24px; gap: 20px; font: 700 16px/1.5 Quicksand,sans-serif; color: var(--ink); }
.feature-index a { padding: 10px 5px; }
.feature-index a:hover { color: #a7511d; }
.feature-section { gap: 80px; padding-block: 100px; }
.feature-section h2 em,.paired-features h2 em { color: var(--ink); }
.feature-section p,.check-list { font-size: 18px; }
.check-list { color: var(--muted); }
.check-list li::before { color: #ac5a26; }
.feature-visual { padding: 45px 30px; border-radius: 30px; min-height: 390px; }
.peach-surface { background: #ffeaeb; }
.sage-surface { background: #e6e8fc; }
.blue-surface { background: #e1f6fe; }
.sand-surface { background: var(--cream); }
.visual-caption { font-size: 15px; color: var(--muted); }
.feature-aside { border-color: var(--orange); }
.feature-symbol { box-shadow: none; background: var(--cream); color: #a7511d; }
.paired-features article:nth-child(2) .feature-symbol { box-shadow: none; background: #e1f6fe; color: var(--ink); }
.onboarding-section { gap: 85px; }
.onboarding-title > p,.onboarding-steps p { font-size: 18px; }
.onboarding-steps li { padding: 28px 30px 28px 100px; margin-bottom: 18px; border-radius: 22px; background: var(--pale-blue); }
.onboarding-steps li::before { display: none; }
.onboarding-steps li > span { left: 26px; top: 28px; background: var(--orange); color: var(--ink); width: 48px; height: 48px; font: 700 23px/1 Quicksand,sans-serif; }
.onboarding-steps h3 { font-size: 24px; }
.start-callout { background: var(--cream); border-radius: 24px; padding: 35px; }
.start-callout > svg { color: #ac5a26; }
.start-callout p { font-size: 18px; }
.faq-layout { gap: 65px; padding: 20px 0 110px; grid-template-columns: 320px minmax(0,1fr); }
.faq-index { top: 120px; align-self: start; background: var(--cream); border-radius: 25px; padding: 30px; gap: 0; }
.faq-index a { font: 700 18px/1.5 Quicksand,sans-serif; padding-block: 16px; color: var(--ink); }
.faq-index a + a { border-top: 1px solid #3854691a; }
.faq-content { padding: 30px; background: var(--pale-blue); border-radius: 30px; }
.faq-content section + section { margin-top: 55px; }
.faq-content h2 { font-size: 32px; margin-bottom: 25px; }
.faq-content details { border: 1px solid transparent; border-radius: 22px; background: white; margin-bottom: 15px; padding: 0 25px; }
.faq-content details[open] { border-color: #ddb88e; background: #fff; }
.faq-content summary { font: 700 21px/1.4 Quicksand,sans-serif; padding: 24px 35px 24px 0; }
.faq-content summary::after { color: var(--ink); right: 0; }
.faq-content details[open] summary { color: #a7511d; }
.faq-content details p { font-size: 18px; line-height: 1.7; padding: 0 0 25px; }

/* Product previews retain their original interactive controls. */
.preview-frame { font-family: 'Source Sans 3',sans-serif; }
.preview-sidebar > span.preview-nav-active { color: var(--ink); background: #e1f0f3; }
.preview-tabs button[aria-selected=true] { color: #9d4a17; border-bottom-color: var(--orange); }
.preview-tabs button { font-family: Quicksand,sans-serif; }
.poll-example button[aria-pressed=true] { background: #fff4de; border-color: #b96327; }
.poll-example button[aria-pressed=true] .radio-mark { border-color: #b96327; background: #b96327; }
.calendar-grid .selected-day { background: var(--ink); }
.demo-tag { background: #e7f0ea; color: #315c49; }

/* Conversion panel and cream footer. No fictional contact details or testimonials. */
.closing { background: #e6e8fc; border: 0; border-radius: 35px; padding: 65px 70px; margin-bottom: 120px; color: var(--ink); gap: 65px; }
.closing h2 { font-size: 50px; }
.closing h2 em,.closing p,.closing .quiet-link { color: var(--ink); }
.closing .eyebrow { color: #ad5925; }
.closing p { font-size: 18px; }
.closing .pill.dark,.closing .pill.dark:hover { background: transparent; }
.closing .pill.dark > span { background: transparent; }
.closing .pill { font-size: 16px; margin-top: 25px; }
.site-footer { position: relative; background: var(--cream); padding: 100px 0 0; border: 0; color: var(--ink); }
.site-footer::before { content: ''; position: absolute; inset: -25px 0 auto; height: 26px; background: var(--cream); mask: url('/site/kidzu/scallop.svg') center top / 1800px 70px repeat-x; }
.footer-top { width: min(1380px,calc(100% - 50px)); gap: 80px; padding-bottom: 80px; }
.site-footer .wordmark { font: 700 34px/1 Quicksand,sans-serif; letter-spacing: -1.5px; color: var(--ink); }
.site-footer .wordmark > span > span { color: var(--ink); }
.site-footer .wordmark img { width: 48px; height: 48px; }
.footer-top > div > p { color: var(--muted); font-size: 18px; max-width: 350px; margin-top: 25px; }
.footer-links { flex: 1; justify-content: space-between; gap: 50px; }
.footer-links > div { font-size: 18px; color: var(--muted); gap: 17px; }
.footer-links > div > span { position: relative; color: var(--ink); font: 700 22px/1.4 Quicksand,sans-serif; text-transform: none; padding-bottom: 18px; margin-bottom: 12px; }
.footer-links > div > span::after { content: ''; position: absolute; bottom: 0; left: 0; width: 70px; border-bottom: 2px solid var(--orange); }
.footer-links a:hover { color: #9d4a17; }
.footer-bottom { width: 100%; padding: 30px max(25px,calc((100% - 1380px)/2)); border: 0; background: var(--sky); font-size: 16px; color: var(--ink); }
.footer-bottom a { color: var(--ink); }

@media (max-width: 1399px) {
  h1 { font-size: 60px; }
  h2,.home-product-grid h2,.school-about h2,.center-heading h2,.role-hero .page-lead-title,.page-lead-title,.closing h2 { font-size: 44px; }
  .site-header .desktop-nav { gap: 8px; font-size: 16px; }
  .site-header.wrap { gap: 16px; }
  .site-header .wordmark { font-size: 29px; }
  .site-header .wordmark img { width: 42px; height: 42px; }
  .playful-hero-grid { min-height: 730px; }
  .playful-hero-art { height: 700px; }
  .playful-hero h1 { font-size: 60px; }
  .hero-feature h2 { font-size: 21px; }
  .school-collage { height: 520px; }
  .collage-family { height: 380px; }
  .collage-class { height: 280px; margin-top: 205px; }
  .home-product-grid,.editorial-grid,.family-grid,.registry-grid,.feature-section { gap: 45px; }
}
@media (min-width: 1221px) {
  .site-header .desktop-nav { display: flex; }
  .site-header .menu-toggle { display: none; }
}
@media (max-width: 1220px) {
  .site-header .desktop-nav { display: none; }
  .site-header .login-link { margin-left: auto; }
  .site-header .menu-toggle { display: flex; background: transparent; width: 48px; height: 48px; border-radius: 0; border: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: none; }
  .menu-toggle span { width: 25px; height: 2px; background: var(--ink); }
  .site-header-shell::after { display: none; }
  .site-header-shell { background: var(--cream); }
  .site-header.wrap { height: 88px; }
  body.menu-open::after { content: ''; position: fixed; inset: 0; z-index: 40; background: #38546966; backdrop-filter: blur(3px); }
  .menu-open .site-header-shell { z-index: 60; background: transparent; box-shadow: none; }
  .menu-open .site-header.wrap { width: 100%; height: 88px; background: transparent; position: relative; inset: auto; padding: 0; pointer-events: none; }
  .menu-open .site-header > a { visibility: hidden; }
  .menu-open .site-header .menu-toggle { position: fixed; top: 26px; right: 24px; z-index: 61; pointer-events: auto; background: none; }
  .menu-open .menu-toggle span { background: white; }
  .mobile-navigation { display: flex; flex-direction: column; z-index: 50; position: fixed; inset: 15px 15px 15px auto; width: min(400px,calc(100% - 30px)); padding: 95px 25px 30px; border-radius: 14px; background: var(--ink); box-shadow: 0 3px 25px #38546933; color: white; gap: 0; overflow-y: auto; backdrop-filter: none; }
  .mobile-navigation > a.mobile-brand:not(.pill) { display: flex; position: absolute; top: 25px; left: 25px; gap: 7px; padding: 0; min-height: 40px; font: 700 25px/1 Quicksand,sans-serif; letter-spacing: -1px; border: 0; animation: none; }
  .mobile-brand img { width: 36px; height: 36px; }
  .mobile-brand > span > span { color: white; }
  .mobile-navigation > a:not(.mobile-brand) { color: white; min-height: 53px; padding: 16px 0; font: 700 16px/1.4 Quicksand,sans-serif; border-bottom: 1px solid #ffffff16; border-radius: 0; animation: none; }
  .mobile-navigation > a:hover,.mobile-navigation > a[aria-current] { color: #ffbd89; background: transparent; }
  .mobile-account-actions { flex-direction: column; gap: 13px; border-top: 0; padding: 0; margin-top: 28px; }
  .mobile-account-actions .login-link { margin: 0; border-color: #ffffff50; color: white; background: transparent; border-radius: 12px; font: 700 16px/1.4 Quicksand,sans-serif; }
  .mobile-account-actions .header-signup { color: var(--ink); background: var(--orange); border-radius: 12px; font: 700 16px/1.4 Quicksand,sans-serif; padding: 16px; }
  .hero-feature::before { mask: none; border-radius: 20px; }
  .hero-feature { padding: 30px 15px; min-height: 240px; }
  .hero-feature > div { justify-content: center; padding: 0; }
  .hero-feature-grid { gap: 20px; padding-block: 90px; }
  .hero-feature h2 { font-size: 20px; }
  .hero-cloud { width: 80px; left: 0; }
  .hero-star { display: none; }
  .footer-top { gap: 40px; }
  .footer-links { gap: 25px; }
}
@media (max-width: 991px) {
  .wrap { width: min(720px,calc(100% - 40px)); }
  .section { padding-block: 80px; }
  h2,.home-product-grid h2,.school-about h2,.center-heading h2,.role-hero .page-lead-title,.page-lead-title,.closing h2 { font-size: 38px; }
  .playful-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .playful-hero-copy { padding: 75px 0 0; text-align: center; max-width: 780px; }
  .playful-hero h1 { font-size: 54px; line-height: 1.3; }
  .playful-hero h1 br { display: initial; }
  .playful-hero h1 em { display: inline; margin: 0; }
  .playful-hero-copy > p { margin: 25px auto 0; }
  .playful-hero .hero-actions { justify-content: center; margin-top: 30px; }
  .playful-hero-art { height: 610px; width: min(570px,100%); margin: 35px auto 0; }
  .playful-hero-art > img { width: 100%; right: 0; object-position: bottom center; }
  .hero-rays { right: 0; top: 30px; }
  .hero-cloud { left: 0; top: 120px; }
  .hero-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
  .home-product-section { width: calc(100% - 40px); padding: 50px 30px; margin-bottom: 80px; }
  .home-product-grid { grid-template-columns: 1fr; gap: 45px; max-width: 660px; }
  .home-product-grid > div:first-child { order: 1; max-width: none; }
  .home-product-grid > div:last-child { order: 2; max-width: none; }
  .school-about,.role-hero,.editorial-grid,.family-grid,.registry-grid,.split-note,.feature-section,.onboarding-section { grid-template-columns: 1fr; gap: 45px; }
  .school-about { padding-top: 0; }
  .school-collage { max-width: 600px; width: 100%; height: 550px; }
  .collage-family { height: 430px; }
  .collage-class { height: 340px; margin-top: 170px; }
  .community-band > .wrap { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
  .audiences-section { margin-top: 80px; padding: 55px 30px; }
  .education-audiences { grid-template-columns: 1fr; gap: 30px; }
  .education-audience { width: min(480px,100%); max-width: none; margin-inline: auto; }
  .audience-photo { height: 330px; }
  .education-steps { grid-template-columns: 1fr; max-width: 650px; margin: 40px auto; gap: 20px; }
  .education-steps li { min-height: 0; padding: 30px 30px 30px 110px; position: relative; }
  .education-steps li > span { position: absolute; left: 28px; top: 30px; }
  .kidzu-page-banner { padding: 85px 20px 105px; }
  .kidzu-page-banner h1 { font-size: 44px; }
  .role-hero { padding-block: 80px; }
  .role-stage { max-width: 700px; }
  .editorial-grid { padding-top: 0; }
  .family-grid,.registry-grid { gap: 60px; }
  .family-band,.teacher-process,.registry-section { padding-block: 75px; }
  .horizontal-steps { grid-template-columns: 1fr; gap: 30px; }
  .page-intro { padding: 75px 0 45px; }
  .feature-index { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; font-size: 15px; text-align: center; }
  .feature-section { padding-block: 70px; }
  .feature-section.reverse > div:first-child { order: 0; }
  .feature-visual { min-height: 390px; }
  .paired-features { gap: 40px; }
  .paired-features h2 { font-size: 32px; }
  .start-callout { display: flex; flex-wrap: wrap; gap: 22px; }
  .start-callout > div { flex: 1; min-width: 200px; }
  .faq-layout { grid-template-columns: 1fr; gap: 35px; padding-bottom: 80px; }
  .faq-index { position: static; display: grid; grid-template-columns: 1fr 1fr; padding: 15px 25px; column-gap: 25px; }
  .faq-index a { font-size: 16px; }
  .faq-index a + a { border: 0; }
  .closing { width: min(720px,calc(100% - 40px)); grid-template-columns: 1fr; padding: 45px; gap: 30px; margin-bottom: 95px; }
  .footer-top { width: min(720px,calc(100% - 40px)); grid-template-columns: 1fr; gap: 45px; padding-bottom: 60px; }
  .footer-top > div > p { max-width: 480px; }
  .footer-links { justify-content: space-between; }
  .footer-bottom { gap: 20px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  body,p { font-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  .site-header.wrap { width: calc(100% - 30px); height: 76px; }
  .site-header-shell.is-scrolled .site-header.wrap { height: 76px; }
  .site-header .wordmark { font-size: 27px; gap: 6px; letter-spacing: -1.5px; }
  .site-header .wordmark img { width: 38px; height: 38px; }
  .site-header > .login-link,.site-header > .header-signup { display: none; }
  .site-header .menu-toggle { margin-left: auto; width: 42px; }
  h2,.home-product-grid h2,.school-about h2,.center-heading h2,.role-hero .page-lead-title,.page-lead-title,.closing h2 { font-size: 34px; }
  h3 { font-size: 22px; }
  .eyebrow { font-size: 17px; }
  .section { padding-block: 65px; }
  .playful-hero-copy { padding-top: 70px; }
  .playful-hero .eyebrow { font-size: 16px; margin-bottom: 16px; }
  .playful-hero h1 { font-size: 36px; line-height: 1.3; letter-spacing: -1px; }
  .playful-hero-copy > p { margin-top: 25px; font-size: 16px; line-height: 1.7; }
  .playful-hero .hero-actions { gap: 12px; flex-wrap: nowrap; margin-top: 26px; }
  .playful-hero .pill,.playful-hero .hero-actions > .text-link { font-size: 13px; padding: 16px 12px; min-height: 56px; gap: 7px; white-space: nowrap; }
  .playful-hero .hero-actions svg { width: 16px; }
  .playful-hero-art { height: 440px; margin-top: 32px; }
  .hero-cloud { width: 55px; height: 45px; left: 0; top: 85px; }
  .hero-rays { width: 45px; right: 3px; top: 20px; }
  .hero-wave { height: 25px; }
  .hero-feature-grid { padding-block: 65px; gap: 16px; }
  .hero-feature { min-height: 205px; padding: 22px 10px; }
  .hero-feature > div { margin-bottom: 20px; }
  .hero-feature .feature-round { width: 75px; height: 75px; }
  .feature-round svg { width: 34px; height: 34px; }
  .hero-feature h2 { font-size: 18px; }
  .home-product-section { width: calc(100% - 24px); border-radius: 26px; padding: 40px 20px; margin-bottom: 65px; }
  .home-product-grid { width: 100%; gap: 30px; }
  .home-product-grid p,.home-product-grid .check-list,.school-about-copy > p { font-size: 17px; }
  .home-product-grid .pill { font-size: 14px; padding-inline: 18px; }
  .school-about { padding-top: 0; gap: 35px; }
  .school-collage { height: 360px; gap: 15px; }
  .collage-family { height: 280px; border-radius: 90px 90px 25px 25px; }
  .collage-class { height: 215px; margin-top: 120px; border-radius: 70px 70px 25px 25px; }
  .collage-stamp { font-size: 14px; padding: 15px; border-radius: 18px; }
  .collage-stamp svg { width: 28px; height: 28px; }
  .about-benefits h3 { font-size: 21px; }
  .community-band { padding-block: 50px; }
  .community-band > .wrap { gap: 35px 20px; }
  .community-band h2 { font-size: 22px; }
  .community-band p { font-size: 16px; }
  .community-band .reveal > span { width: 60px; height: 60px; }
  .audiences-section { width: calc(100% - 24px); margin-top: 65px; padding: 45px 20px; border-radius: 26px; }
  .center-heading p { font-size: 17px; }
  .education-audiences { margin-top: 35px; }
  .education-audience { padding: 18px; border-radius: 95px 95px 25px 25px; }
  .audience-photo { height: 250px; border-radius: 80px 80px 25px 25px; }
  .audience-body { padding: 22px 4px 5px; }
  .audience-body h3 { font-size: 24px; }
  .audience-body .card-link { font-size: 14px; }
  .education-steps li { padding: 27px 22px 27px 83px; border-radius: 22px; }
  .education-steps li > span { width: 42px; height: 42px; left: 22px; top: 27px; font-size: 20px; }
  .education-steps h3 { font-size: 21px; }
  .education-steps p { font-size: 17px; }
  .kidzu-page-banner { padding: 80px 0 90px; }
  .kidzu-page-banner h1 { font-size: 38px; letter-spacing: -1px; }
  .site-breadcrumb { font-size: 16px; gap: 10px; margin-top: 18px; }
  .role-hero { padding-block: 65px; gap: 35px; }
  .role-hero > div > p { font-size: 17px; }
  .role-stage { padding: 13px; border-radius: 25px; }
  .editorial-grid { padding-top: 0; }
  .editorial-grid p,.feature-lines p,.registry-list p { font-size: 17px; }
  .feature-lines article { gap: 15px; }
  .feature-lines article > span { font-size: 21px; }
  .feature-lines h3 { font-size: 22px; }
  .family-band,.teacher-process,.registry-section { padding-block: 65px; }
  .family-grid,.registry-grid { gap: 40px; }
  .split-note { gap: 25px; }
  .split-note p { font-size: 17px; }
  .page-intro { padding: 65px 0 35px; }
  .page-intro > p { font-size: 17px; }
  .page-intro .intro-links { gap: 12px; }
  .page-intro .pill { font-size: 14px; padding-inline: 18px; }
  .feature-index { grid-template-columns: 1fr 1fr; gap: 5px; padding: 16px; font-size: 15px; }
  .feature-section { padding-block: 60px; gap: 32px; }
  .feature-section p,.check-list { font-size: 17px; }
  .feature-visual { min-height: 330px; padding: 30px 16px; border-radius: 25px; }
  .paired-features { grid-template-columns: 1fr; gap: 45px; }
  .paired-features h2 { font-size: 32px; }
  .onboarding-section { gap: 35px; }
  .onboarding-title > p,.onboarding-steps p { font-size: 17px; }
  .onboarding-steps li { padding: 25px 20px 25px 80px; }
  .onboarding-steps li > span { width: 40px; height: 40px; left: 20px; top: 25px; font-size: 20px; }
  .onboarding-steps h3 { font-size: 21px; }
  .start-callout { padding: 25px; }
  .start-callout p { font-size: 17px; }
  .faq-layout { padding-bottom: 65px; }
  .faq-index { grid-template-columns: 1fr; padding: 16px 25px; }
  .faq-index a + a { border-top: 1px solid #3854691a; }
  .faq-content { padding: 22px 15px; border-radius: 24px; }
  .faq-content h2 { font-size: 28px; padding-inline: 5px; }
  .faq-content details { padding-inline: 18px; border-radius: 18px; }
  .faq-content summary { font-size: 18px; padding-block: 21px; }
  .faq-content details p { font-size: 16px; }
  .closing { padding: 35px 25px; border-radius: 26px; gap: 25px; margin-bottom: 80px; }
  .closing p { font-size: 17px; }
  .closing .pill { font-size: 14px; padding-inline: 22px; }
  .site-footer { padding-top: 60px; }
  .footer-top { padding-bottom: 50px; gap: 40px; }
  .site-footer .wordmark { font-size: 30px; }
  .footer-top > div > p { font-size: 17px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 20px; }
  .footer-links > div { font-size: 16px; gap: 14px; }
  .footer-links > div > span { font-size: 21px; }
  .footer-bottom { font-size: 14px; padding: 25px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 360px) {
  .site-header .wordmark { font-size: 24px; }
  .playful-hero h1 { font-size: 33px; }
  .playful-hero .hero-actions { flex-wrap: wrap; }
  .playful-hero-art { height: 370px; }
  .mobile-navigation { padding-inline: 20px; }
  .mobile-navigation .mobile-brand { font-size: 22px; left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}