@charset "UTF-8";
/* ==========================================================================
   SchoolZee — global stylesheet (assets/css/schoolzee.css)
   Rebuilt from src/index.css + src/pages/site/SiteLayout.tsx of the Vite/React site.
   All class names are the FROZEN contract in wordpress-shortcodes/_conversion-spec.md §4.
   Cards are borderless by design. No shimmer animation. No Elementor classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS  (self-hosted, copied from src/assets/fonts/)
   Poppins = Latin, Anek Bangla = Bangla. The unicode-range makes the choice
   per-glyph, so one rule serves both language modes.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Anek Bangla — Bangla subset only. Declares the Bangla unicode-range so the browser
   renders Bangla glyphs in Anek Bangla and falls through to Poppins for Latin. */
@font-face {
  font-family: 'Anek Bangla';
  src: local('Anek Bangla'), url('../fonts/anekbangla.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}


/* --------------------------------------------------------------------------
   1b. Apply the stack to the WHOLE document, not just .sz-page.
   The header and footer live outside .sz-page (they come from header.php /
   footer.php), and Elementor renders its own widgets with its own typography
   variables, so both need an explicit rule. Icon fonts (Elementor eicons,
   Font Awesome) are excluded or they would render as tofu boxes.
   -------------------------------------------------------------------------- */
html body,
body {
  font-family: var(--sz-font);
}

body,
button, input, select, textarea, optgroup {
  font-family: var(--sz-font);
}

/* Elementor widget typography resolves through these variables. */
:root {
  --e-global-typography-primary-font-family: var(--sz-font);
  --e-global-typography-secondary-font-family: var(--sz-font);
  --e-global-typography-text-font-family: var(--sz-font);
  --e-global-typography-accent-font-family: var(--sz-font);
}

/* Keep icon fonts intact — everything except icons inherits the stack. */
body :not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.eicon):not([class*="eicon-"]):not([class*="fa-"]):not(svg):not(svg *):not(code):not(pre) {
  font-family: var(--sz-font);
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --sz-blue: #2563EB;          /* primary blue — links, active nav, bullets */
  --sz-blue-soft: #F0F7FF;     /* alt section background */
  --sz-ink: #0F172A;
  --sz-muted: #475569;
  --sz-faint: #64748B;
  --sz-line: #E2E8F0;
  --sz-line-soft: #F1F5F9;
  --sz-footer-bg: #F8FAFC;
  --sz-whatsapp: #25D366;
  --sz-emerald-bg: #D1FAE5;
  --sz-emerald-ink: #047857;
  --sz-emerald-mark: #10B981;
  --sz-danger: #DC2626;
  --sz-placeholder: #cccccc;

  /* Gradients */
  --sz-hero-gradient: radial-gradient(150% 150% at center, #0C637B 0%, #1A3277 50%, #121D42 100%);
  --sz-cta-gradient: radial-gradient(150% 150% at center, #0E7490 0%, #1E3A8A 50%, #172554 100%);
  --sz-btn-gradient: linear-gradient(90deg, #4F7DF3 0%, #5B8BF8 35%, #38BDF8 70%, #22D3EE 100%);
  --sz-tint-soft: rgba(255, 255, 255, 0.10);   /* hero blur blobs */
  --sz-tint-cyan: rgba(103, 232, 249, 0.20);   /* hero blur blobs */

  /* Radii */
  --sz-radius-card: 24px;      /* rounded-3xl */
  --sz-radius-btn: 16px;       /* rounded-2xl */
  --sz-radius-input: 12px;     /* rounded-xl */
  --sz-radius-pill: 9999px;    /* rounded-full */

  /* Layout */
  --sz-container: 1280px;   /* max-w-7xl — the header and section container in the React site */      /* spec container width */
  --sz-container-pad: 16px;    /* sm:24px  lg:32px */
  --sz-section-y: 56px;        /* mobile rhythm; 96px from 1024px */
  --sz-btn-min-h: 52px;

  /* Type */
  --sz-font: 'Poppins', 'Anek Bangla', system-ui, -apple-system, sans-serif;

  /* Shadows */
  --sz-shadow-blue: 0 10px 15px -3px rgb(59 130 246 / 0.25), 0 4px 6px -4px rgb(59 130 246 / 0.25);
  --sz-shadow-hover: 0 10px 15px -3px rgb(15 23 42 / 0.05), 0 4px 6px -4px rgb(15 23 42 / 0.05);
  --sz-shadow-panel: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.10);

  /* Breakpoints used by the project (documented, not declarable):
     640px = sm   768px = md   1024px = lg   1280px = xl                         */
}

/* --------------------------------------------------------------------------
   3. RESET / BASE  (scoped to .sz-page so Elementor and the theme are untouched)
   -------------------------------------------------------------------------- */
.sz-page,
.sz-page *,
.sz-page *::before,
.sz-page *::after { box-sizing: border-box; }

.sz-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #FFFFFF;
  color: var(--sz-ink);
  font-family: var(--sz-font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Theme wrapper breathing room — one override here instead of in every page. */
.sz-page > .sz-hero { margin-top: 0; }

/* Element defaults live in a CASCADE LAYER on purpose.
   The React project gets this ordering from Tailwind (@layer base < utilities).
   Reproduced here: every rule inside @layer sz-base loses to ANY unlayered rule,
   so component classes always win. Without the layer ".sz-page h1" (0,1,1) beat
   ".sz-hero__title" (0,1,0) and the hero heading rendered at 32px instead of 60px,
   and ".sz-page a" recoloured the primary button text blue on a blue gradient. */
@layer sz-base {

  /* Headings and paragraphs: reset the theme, then space explicitly below. */
  .sz-page h1, .sz-page h2, .sz-page h3,
  .sz-page h4, .sz-page h5, .sz-page h6,
  .sz-page p, .sz-page ul, .sz-page ol, .sz-page dl, .sz-page dd, .sz-page figure {
    margin: 0;
    padding: 0;
    font-family: inherit;
  }
  .sz-page ul, .sz-page ol { list-style: none; }
  .sz-page a { color: var(--sz-blue); text-decoration: none; }
  .sz-page a:hover { text-decoration: none; }
  .sz-page button { font-family: inherit; }
  .sz-page svg { display: block; flex-shrink: 0; }
  .sz-page img { max-width: 100%; height: auto; }
  .sz-page ::placeholder { color: var(--sz-placeholder); opacity: 1; }

  /* Typography scale — mirrored from src/index.css @layer base, including the
     640 / 1024 / 1400 breakpoints that were previously missing entirely. */
  .sz-page h1 { font-size: 2rem;     line-height: 1.2;   font-weight: 700; letter-spacing: -0.02em; }
  .sz-page h2 { font-size: 1.625rem; line-height: 1.25;  font-weight: 700; letter-spacing: -0.015em; }
  .sz-page h3 { font-size: 1.375rem; line-height: 1.3;   font-weight: 700; letter-spacing: -0.01em; }
  .sz-page h4 { font-size: 1.125rem; line-height: 1.35;  font-weight: 700; }
  .sz-page p  { font-size: 1rem;     line-height: 1.6;   font-weight: 400; }

  @media (min-width: 640px) {
    .sz-page h1 { font-size: 2.5rem; }      /* 40px */
    .sz-page h2 { font-size: 2rem; }        /* 32px */
    .sz-page h3 { font-size: 1.5rem; }      /* 24px */
    .sz-page h4 { font-size: 1.25rem; }     /* 20px */
    .sz-page p  { font-size: 1.125rem; }    /* 18px */
  }
  @media (min-width: 1024px) {
    .sz-page h1 { font-size: 3rem; }        /* 48px */
    .sz-page h2 { font-size: 2.25rem; }     /* 36px */
    .sz-page h3 { font-size: 1.75rem; }     /* 28px */
    .sz-page h4 { font-size: 1.375rem; }    /* 22px */
  }
  @media (min-width: 1400px) {
    .sz-page h1 { font-size: 3.5rem; }      /* 56px */
    .sz-page h2 { font-size: 2.5rem; }      /* 40px */
    .sz-page h3 { font-size: 2rem; }        /* 32px */
    .sz-page h4 { font-size: 1.5rem; }      /* 24px */
  }
}

/* Keyboard focus — visible everywhere, never a mouse-click outline. */
.sz-page :focus-visible {
  outline: 2px solid var(--sz-blue);
  outline-offset: 2px;
}
.sz-hero :focus-visible,
.sz-cta :focus-visible { outline-color: #FFFFFF; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.sz-container {
  width: 100%;
  max-width: var(--sz-container);
  margin-inline: auto;
  padding-inline: var(--sz-container-pad);
}
/* One place sets the responsive gutter, so every container (header inner,
   footer inner/bottom, search) follows automatically. */
@media (min-width: 640px)  { :root { --sz-container-pad: 24px; } }   /* sm:px-6 */
@media (min-width: 1024px) { :root { --sz-container-pad: 32px; --sz-section-y: 96px; } }   /* lg:px-8 + lg:py-24 */

.sz-section {
  padding-block: var(--sz-section-y);
  background: #FFFFFF;
}
.sz-section--alt { background: var(--sz-blue-soft); }
/* Narrow blocks keep their own measure without a new class. */
.sz-section > .sz-container { max-width: var(--sz-container); }

.sz-section__eyebrow {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;      /* tracking-wider */
  text-transform: uppercase;
  color: var(--sz-blue);
}

.sz-section__title {
  margin-top: 8px;
  text-align: center;
  font-size: 1.875rem;                             /* text-3xl — 30px */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.025em;    /* tracking-tight */
  color: var(--sz-ink);
}
@media (min-width: 640px)  { .sz-section__title { font-size: 2.25rem; } }   /* sm:text-4xl */
@media (min-width: 1024px) { .sz-section__title { font-size: 3rem; } }      /* lg:text-5xl */

.sz-section__intro {
  margin-top: 16px;
  margin-inline: auto;
  max-width: 768px;
  text-align: center;
  font-size: clamp(0.875rem, 0.775rem + 0.45vw, 1rem);   /* 14px → 16px */
  line-height: 1.625;          /* leading-relaxed */
  color: var(--sz-muted);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.sz-hero {
  position: relative;
  overflow: hidden;
  padding-block: 40px 56px;                     /* pt-10 pb-14 */
  background-image: var(--sz-hero-gradient);
  background-color: #121D42;
  color: #FFFFFF;
  text-align: center;
}
@media (min-width: 1024px) { .sz-hero { padding-block: 80px 112px; } }   /* lg:pt-20 lg:pb-28 */
/* The two blurred decorative circles from the React hero. */
.sz-hero::before,
.sz-hero::after {
  content: "";
  position: absolute;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  filter: blur(64px);          /* blur-3xl */
  pointer-events: none;
}
.sz-hero::before { top: -128px; left: -128px; background: var(--sz-tint-soft); }
.sz-hero::after  { top: 80px;  right: 0;     background: var(--sz-tint-cyan); }
.sz-hero > * { position: relative; z-index: 1; }

/* The React hero uses the same max-w-7xl container as every other section
   (1280px) — it is NOT a narrow measure. */
.sz-hero .sz-container { max-width: var(--sz-container); }

.sz-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(219, 234, 254, 0.80);            /* text-blue-100/80 */
}
.sz-breadcrumb a {
  color: inherit;
  transition: color 0.15s ease;
}
.sz-breadcrumb a:hover { color: #FFFFFF; }
.sz-breadcrumb [aria-current="page"],
.sz-breadcrumb .is-current {
  color: #FFFFFF;
  font-weight: 500;
}

.sz-hero__title {
  margin: 0;                                        /* the wrapper owns the spacing */
  font-size: 2.25rem;                               /* 36px — text-4xl */
  line-height: 1.3;                                 /* !leading-[1.3] */
  font-weight: 700;
  letter-spacing: -0.025em;                         /* tracking-tight */
  color: #FFFFFF;
  text-wrap: balance;
}
@media (min-width: 640px)  { .sz-hero__title { font-size: 3rem; } }      /* sm:text-5xl — 48px */
@media (min-width: 1024px) { .sz-hero__title { font-size: 3.75rem; } }   /* lg:text-6xl — 60px */

.sz-hero__subtitle {
  margin-top: 16px;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.125rem);   /* 16px → 18px */
  line-height: 1.625;
  color: #DBEAFE;                                       /* text-blue-100 */
}

.sz-hero__intro {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;                                            /* space-y-3 */
  text-align: left;
}
.sz-hero__intro p {
  margin: 0;
  font-size: clamp(0.875rem, 0.775rem + 0.45vw, 1rem);
  line-height: 1.625;
  color: #EFF6FF;                                       /* text-blue-50 */
}

.sz-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@media (min-width: 640px) {
  .sz-hero__intro { text-align: center; }
  .sz-hero__actions { flex-direction: row; }
}

/* ==========================================================================
   BUTTONS
   .sz-btn--primary is the FLAT gradient. No shimmer sweep, no hover transform.
   ========================================================================== */
.sz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: var(--sz-btn-min-h);
  border: 0;
  border-radius: var(--sz-radius-btn);
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sz-btn svg { width: 20px; height: 20px; }

.sz-btn--primary {
  background-image: var(--sz-btn-gradient);
  color: #FFFFFF;
  box-shadow: var(--sz-shadow-blue);
}
.sz-btn--primary:hover,
.sz-btn--primary:focus,
.sz-btn--primary:active {
  /* static CTA state — same visual on hover-capable and touch devices */
  background-image: var(--sz-btn-gradient);
  color: #FFFFFF;
}

.sz-btn--outline {
  background: #FFFFFF;
  color: var(--sz-blue);
  box-shadow: inset 0 0 0 1px var(--sz-line);          /* ring-1 ring-slate-200 */
}
.sz-btn--outline:hover { box-shadow: inset 0 0 0 1px var(--sz-blue); }

.sz-btn--ghost {
  background: rgba(255, 255, 255, 0.10);               /* bg-white/10 */
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.40);
}
.sz-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); }

.sz-btn--block { width: 100%; }

/* ==========================================================================
   GRIDS AND CARDS   — cards are BORDERLESS (no border / ring / shadow)
   ========================================================================== */
.sz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;                                           /* gap-5 */
}
@media (min-width: 640px) {
  .sz-grid--2, .sz-grid--3, .sz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* cases: lg:grid-cols-2 */
  .sz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sz-grid + .sz-grid { margin-top: 20px; }

.sz-card {
  border: 0;
  border-radius: var(--sz-radius-card);
  background: #FFFFFF;
  padding: 24px 20px;                                  /* py-6 px-5 */
  box-shadow: none;
  color: var(--sz-ink);
}
@media (min-width: 640px) { .sz-card { padding: 32px 24px; } }   /* sm:py-8 sm:px-6 */

/* Soft-blue card — the project's own tinted card (steps, products, free tools).
   Always a flat 24px padding (p-6), never the 32/24 rhythm above. */
.sz-card--tinted {
  background: var(--sz-blue-soft);
  padding: 24px;                                       /* p-6 */
}

/* Link card: hover = lift via shadow + white surface + blue title. */
.sz-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.sz-card--link:hover,
.sz-card--link:focus-visible {
  background: #FFFFFF;
  box-shadow: var(--sz-shadow-hover);
}
.sz-card--link .sz-card__title,
.sz-card--link .sz-card__more { transition: color 0.2s ease; }
.sz-card--link:hover .sz-card__title,
.sz-card--link:hover .sz-card__more { color: var(--sz-blue); }

/* Icon tile (48px, rounded-2xl) — the 8 tints rotate exactly like ICON_POOL. */
.sz-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;                                         /* h-12 w-12 */
  height: 48px;
  border-radius: var(--sz-radius-btn);
  background-image: linear-gradient(to bottom right, #3B82F6, #06B6D4);  /* blue-500 → cyan-500 */
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
}
.sz-card__icon svg { width: 24px; height: 24px; }
/* Tint rotation: blue, emerald, violet, amber, sky, rose, cyan, indigo. */
.sz-grid > .sz-card:nth-child(8n+1) .sz-card__icon { background-image: linear-gradient(to bottom right, #3B82F6, #06B6D4); }
.sz-grid > .sz-card:nth-child(8n+2) .sz-card__icon { background-image: linear-gradient(to bottom right, #10B981, #22C55E); }
.sz-grid > .sz-card:nth-child(8n+3) .sz-card__icon { background-image: linear-gradient(to bottom right, #8B5CF6, #6366F1); }
.sz-grid > .sz-card:nth-child(8n+4) .sz-card__icon { background-image: linear-gradient(to bottom right, #F59E0B, #F97316); }
.sz-grid > .sz-card:nth-child(8n+5) .sz-card__icon { background-image: linear-gradient(to bottom right, #0EA5E9, #2563EB); }
.sz-grid > .sz-card:nth-child(8n+6) .sz-card__icon { background-image: linear-gradient(to bottom right, #F43F5E, #EC4899); }
.sz-grid > .sz-card:nth-child(8n+7) .sz-card__icon { background-image: linear-gradient(to bottom right, #06B6D4, #0EA5E9); }
.sz-grid > .sz-card:nth-child(8n+8) .sz-card__icon { background-image: linear-gradient(to bottom right, #6366F1, #9333EA); }

.sz-card__badge,
.sz-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--sz-radius-pill);
  background: var(--sz-emerald-bg);                    /* bg-emerald-100 */
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sz-emerald-ink);                        /* text-emerald-700 */
}
.sz-badge { margin-bottom: 0; }

.sz-card__title {
  margin-top: 12px;
  font-size: 1.125rem;                                 /* text-lg */
  line-height: 1.3;
  font-weight: 600;
  color: var(--sz-ink);
}
.sz-card__icon + .sz-card__title { margin-top: 20px; } /* mt-5 after the icon tile */
.sz-card__badge + .sz-card__title,
.sz-badge + .sz-card__title { margin-top: 12px; }

.sz-card__text {
  margin-top: 8px;
  font-size: 0.875rem;                                 /* text-sm */
  line-height: 1.625;
  color: var(--sz-muted);
}

.sz-card__list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;                                            /* space-y-1.5 */
}
.sz-card__list li {
  display: flex;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-card__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;                                          /* h-1.5 w-1.5 */
  height: 6px;
  margin-top: 8px;                                     /* mt-1.5-ish optical */
  border-radius: 50%;
  background: var(--sz-blue);
}

.sz-card__more {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sz-blue);
}

/* ==========================================================================
   STEPS
   ========================================================================== */
.sz-steps {
  margin-top: 40px;                                    /* mt-10 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 640px)  { .sz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sz-step {
  border-radius: var(--sz-radius-card);
  background: var(--sz-blue-soft);
  padding: 24px;                                       /* p-6 */
}
.sz-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;                                         /* h-10 w-10 */
  height: 40px;
  border-radius: 50%;
  background: var(--sz-blue);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.sz-step__title {
  margin-top: 16px;
  font-size: 1rem;                                     /* text-base */
  line-height: 1.3;
  font-weight: 600;
  color: var(--sz-ink);
}
.sz-step__text {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-muted);
}

/* ==========================================================================
   PLANS
   ========================================================================== */
.sz-plans {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 640px)  { .sz-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sz-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sz-plan {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--sz-radius-card);
  background: #FFFFFF;
  padding: 24px;                                       /* p-6 */
  box-shadow: none;
}
/* Featured plan: the ONE 2px blue inset ring the project really used. */
.sz-plan--featured { box-shadow: inset 0 0 0 2px var(--sz-blue); }

.sz-plan__badge {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 12px;                                 /* mb-3 */
  border-radius: var(--sz-radius-pill);
  background: var(--sz-blue);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #FFFFFF;
}
.sz-plan__name {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sz-ink);
}
.sz-plan__amount {
  display: inline-block;
  margin-top: 12px;
  font-size: 1.875rem;                                 /* text-3xl */
  font-weight: 700;
  line-height: 1.2;
  color: var(--sz-ink);
}
.sz-plan__period {
  display: inline-block;
  padding-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--sz-faint);
}
.sz-plan__amount + .sz-plan__period { margin-left: 4px; }

.sz-plan__features {
  flex: 1;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;                                            /* space-y-2 */
}
.sz-plan__features li {
  display: flex;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-plan__features li::before {
  content: "✓";                                        /* ShieldCheck equivalent */
  flex-shrink: 0;
  width: 16px;
  margin-top: 1px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sz-emerald-mark);
}

.sz-plan__cta { margin-top: 24px; }                    /* mt-6 */
.sz-plans__note {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.625;
  color: var(--sz-faint);
}

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.sz-cases {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 1024px) { .sz-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sz-case {
  border: 0;
  border-radius: var(--sz-radius-card);
  background: #FFFFFF;
  padding: 24px;
  box-shadow: none;
}
.sz-case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sz-faint);
}
.sz-case__tag {
  border-radius: var(--sz-radius-pill);
  background: var(--sz-blue-soft);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sz-blue);
}
.sz-case__place { color: var(--sz-faint); }
.sz-case__title {
  margin-top: 12px;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sz-ink);
}
.sz-case__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;                                           /* space-y-3 */
  font-size: 0.875rem;
  line-height: 1.625;
}
.sz-case__list > div { display: block; }
.sz-case__label {                                   /* dt */
  display: block;
  font-weight: 600;
  color: var(--sz-ink);
}
.sz-case__text {                                    /* dd */
  display: block;
  margin: 0;
  color: var(--sz-muted);
}
.sz-cases__note {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.625;
  color: var(--sz-faint);
}

/* ==========================================================================
   ARTICLES
   ========================================================================== */
.sz-cats {
  margin-top: 24px;                                    /* mt-6 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sz-cat {
  display: inline-flex;
  align-items: center;
  border-radius: var(--sz-radius-pill);
  background: #FFFFFF;
  padding: 8px 14px;                                   /* px-3.5 py-2 */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #334155;                                      /* text-slate-700 */
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sz-cat:hover { color: var(--sz-blue); }

.sz-articles {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 640px)  { .sz-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sz-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sz-article {
  display: block;
  border: 0;
  border-radius: var(--sz-radius-card);
  background: #FFFFFF;
  padding: 24px;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.sz-article:hover,
.sz-article:focus-visible { box-shadow: var(--sz-shadow-hover); }
.sz-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sz-faint);
}
.sz-article__cat {
  border-radius: var(--sz-radius-pill);
  background: var(--sz-blue-soft);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sz-blue);
}
.sz-article__date { color: var(--sz-faint); }
.sz-article__title {
  margin-top: 12px;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sz-ink);
  transition: color 0.2s ease;
}
.sz-article:hover .sz-article__title { color: var(--sz-blue); }
.sz-article__excerpt {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-muted);
}

/* ==========================================================================
   PROSE  (guides / help / policy long-form)
   ========================================================================== */
.sz-prose {
  max-width: 768px;                                    /* max-w-3xl */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;                                           /* space-y-10 */
}
.sz-prose__block { display: block; }
.sz-prose__title {
  font-size: clamp(1.25rem, 1.04rem + 0.9vw, 1.5rem);   /* 20px → 24px */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sz-ink);
}
.sz-prose__p {
  margin-top: 12px;
  font-size: clamp(0.875rem, 0.775rem + 0.45vw, 1rem);
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-prose__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sz-prose__list li {
  display: flex;
  gap: 8px;
  font-size: clamp(0.875rem, 0.775rem + 0.45vw, 1rem);
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-prose__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--sz-blue);
}

/* ==========================================================================
   FAQ  — native <details>/<summary>, works with JavaScript disabled.
   The white card with a 1px ring is the project's own FAQ container.
   ========================================================================== */
.sz-faq {
  max-width: 768px;
  margin-inline: auto;
  border-radius: var(--sz-radius-card);
  background: #FFFFFF;
  padding: 16px 20px;                                  /* py-4 px-5 */
  box-shadow: inset 0 0 0 1px var(--sz-line);           /* ring-1 ring-slate-200 */
}
@media (min-width: 640px) { .sz-faq { padding: 24px 32px; } }   /* sm:py-6 sm:px-8 */

/* The FAQ section fades white → soft blue (from-white to-[#F0F7FF]). */
.sz-section:has(> .sz-container > .sz-faq) {
  background-image: linear-gradient(to bottom, #FFFFFF, var(--sz-blue-soft));
}
.sz-section:has(> .sz-container > .sz-faq) > .sz-container { max-width: 768px; }

.sz-faq__item {
  border-bottom: 1px solid var(--sz-line-soft);         /* border-b border-slate-100 */
}
.sz-faq__item:last-child { border-bottom: 0; }

.sz-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px;                                 /* py-5 */
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.125rem);    /* 16px → 18px */
  font-weight: 600;
  line-height: 1.375;                                  /* leading-snug */
  color: #1E293B;                                      /* text-slate-800 */
  cursor: pointer;
  list-style: none;                                    /* marker removal */
}
.sz-faq__q::-webkit-details-marker { display: none; }
.sz-faq__q::marker { content: ""; }
.sz-faq__q:hover { color: var(--sz-blue); }

.sz-faq__icon {
  flex-shrink: 0;
  width: 20px;                                         /* h-5 w-5 */
  height: 20px;
  color: var(--sz-faint);
  transition: transform 0.2s ease;
}
.sz-faq__item[open] .sz-faq__icon { transform: rotate(180deg); }
.sz-faq__item[open] > .sz-faq__q { color: var(--sz-blue); }

.sz-faq__a {
  padding-bottom: 20px;                                /* pb-5 */
  font-size: clamp(0.875rem, 0.775rem + 0.45vw, 1rem);
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-faq__a p + p { margin-top: 12px; }

/* ==========================================================================
   RELATED  (chips row — py-10, not full section rhythm)
   ========================================================================== */
.sz-related {
  padding-block: 40px;                                 /* py-10 */
  background: #FFFFFF;
}
.sz-related__title {
  margin-bottom: 12px;                                 /* mb-3 */
  font-size: 0.875rem;                                 /* text-sm */
  font-weight: 600;
  line-height: 1.4;
  color: var(--sz-ink);
}
.sz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sz-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sz-line);                     /* border-slate-200 */
  border-radius: var(--sz-radius-pill);
  background: #FFFFFF;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #334155;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sz-chip:hover { border-color: var(--sz-blue); color: var(--sz-blue); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.sz-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--sz-section-y);
  background-image: var(--sz-cta-gradient);
  background-color: #172554;
  color: #FFFFFF;
  text-align: center;
}
.sz-cta .sz-container { max-width: 672px; }             /* max-w-2xl */
.sz-cta__title {
  font-size: clamp(1.5rem, 0.98rem + 2.2vw, 2.25rem);   /* 24px → 30px → 36px */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.sz-cta__text {
  margin-top: 16px;
  margin-inline: auto;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.625;
  color: #DBEAFE;
}
.sz-cta__actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@media (min-width: 640px) { .sz-cta__actions { flex-direction: row; } }

/* ==========================================================================
   FORMS
   ========================================================================== */
.sz-form { width: 100%; }
.sz-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;                                           /* gap-4 */
}
@media (min-width: 640px) { .sz-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sz-form__field { min-width: 0; }
/* Full-width row inside the 2-column grid (the project's sm:col-span-2).
   Applied via the data attribute — no extra class, no inline style. */
.sz-form__field[data-sz-full] { grid-column: 1 / -1; }
.sz-form__grid { margin-top: 20px; }                   /* mt-5 above the fields */
.sz-form__grid:first-child { margin-top: 0; }

.sz-form__label {
  display: block;
  margin-left: 4px;                                    /* ml-1 */
  font-size: 12px;                                     /* text-xs */
  font-weight: 600;
  line-height: 1.5;
  color: var(--sz-muted);
}

.sz-form__input,
.sz-form__select,
.sz-form__textarea {
  display: block;
  width: 100%;
  margin-top: 6px;                                     /* mt-1.5 */
  border: 0;
  border-radius: var(--sz-radius-input);               /* rounded-xl = 12px */
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.875rem;                                 /* text-sm */
  color: var(--sz-ink);
  box-shadow: inset 0 0 0 1px var(--sz-line);          /* ring-1 ring-slate-200 */
  outline: none;
  transition: box-shadow 0.2s ease;
}
.sz-form__input,
.sz-form__select {
  height: 46px;                                        /* h-[46px] */
  padding: 0 14px;                                     /* px-3.5 */
  line-height: 46px;
}
.sz-form__select {
  padding-right: 34px;
  cursor: pointer;
}
.sz-form__textarea {
  min-height: 6rem;                                    /* rows="3"–"4" */
  padding: 12px 14px;                                  /* py-3 px-3.5 */
  line-height: 1.6;
  resize: vertical;
}
.sz-form__input:focus,
.sz-form__select:focus,
.sz-form__textarea:focus {
  box-shadow: inset 0 0 0 2px var(--sz-blue);          /* focus:ring-2 focus:ring-[#2563EB] */
}
.sz-form__input:disabled,
.sz-form__select:disabled,
.sz-form__textarea:disabled { background: var(--sz-footer-bg); cursor: not-allowed; }

.sz-form__error {
  margin-top: 4px;                                     /* mt-1 */
  margin-left: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sz-danger);                             /* text-red-600 */
}
.sz-form__input[aria-invalid="true"],
.sz-form__textarea[aria-invalid="true"],
.sz-form__select[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--sz-danger); }

.sz-form__consent {
  margin-top: 20px;                                    /* mt-5 */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.625;
  color: var(--sz-muted);
  cursor: pointer;
}
.sz-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;                                         /* h-4 w-4 */
  height: 16px;
  margin: 2px 0 0;
  border: 1px solid #CBD5E1;                           /* border-slate-300 */
  border-radius: 4px;
  accent-color: var(--sz-blue);
  cursor: pointer;
}

.sz-form__actions {
  margin-top: 24px;                                    /* mt-6 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) { .sz-form__actions { flex-direction: row; } }
.sz-form__actions .sz-btn { flex: 1; }
.sz-form__actions .sz-btn--outline { flex: 0 0 auto; }

.sz-form__note {
  margin-top: 12px;                                    /* mt-3 */
  font-size: 12px;
  line-height: 1.625;
  color: var(--sz-faint);
}

/* Success state (contact + demo, matching the React success panel) */
.sz-form__success {
  text-align: center;
  padding-block: 8px;
}
.sz-form__success > svg,
.sz-form__success > .sz-form__successIcon {
  width: 48px;                                         /* h-12 w-12 */
  height: 48px;
  margin-inline: auto;
  color: var(--sz-emerald-mark);
}
.sz-form__success h2 {
  margin-top: 16px;
  font-size: 1.25rem;                                  /* text-xl */
  line-height: 1.3;
  font-weight: 700;
  color: var(--sz-ink);
}
.sz-form__success p {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-form__success .sz-form__actions {
  align-items: center;
  justify-content: center;
}
.sz-form__success a.sz-btn { flex: 0 0 auto; }
.sz-form__success .sz-form__note a { text-decoration: underline; color: var(--sz-faint); }

/* Contact-type / institution-type pills
   FROZEN CONTRACT (see _conversion-spec.md §7): every pill is a real
   <label class="sz-pill"> wrapping a visually hidden
   <input type="radio" name="…" value="…">, so the selected state is carried by
   the radio itself — no JS, no aria-pressed. `.sz-pill--active` is kept as a
   server-rendered default for the first option before any input is focused. */
.sz-pills {
  margin-top: 8px;                                     /* mt-2 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sz-pill {
  display: inline-flex;
  align-items: center;
  position: relative;
  border: 0;
  border-radius: var(--sz-radius-pill);
  background: var(--sz-blue-soft);
  padding: 8px 14px;                                   /* px-3.5 py-2 */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #334155;                                      /* text-slate-700 */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sz-pill input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;                                /* clipped, not display:none — keeps the radio focusable/announced */
}
.sz-pill:hover { background: #E4F0FF; }
.sz-pill--active,
.sz-pill:has(input:checked),
.sz-pill:has(input[type="radio"]:checked) {
  background: var(--sz-blue);
  color: #FFFFFF;
}
.sz-pill:focus-within {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--sz-blue);
}
@media (prefers-reduced-motion: reduce) {
  .sz-pill { transition: none; }
}

/* ── Header attribute hooks ───────────────────────────────────────────────
   The mobile nav panel uses a few hook-only elements that have no class of
   their own, so they are styled by attribute selector and no new class enters
   the frozen contract. (Documented in header.md; these rules live here.) */
[data-sz-mobile-row] { display: flex; align-items: center; justify-content: space-between; }
[data-sz-mobile-row] .sz-nav__link { flex: 1; padding: 12px 0; }
[data-sz-mobile-panel] { list-style: none; margin: 0; padding: 0 0 12px 4px; }
[data-sz-mobile-panel] .sz-nav__panelLink { display: block; padding: 8px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 400; color: #475569; }
[data-sz-mobile-panel] .sz-nav__panelLink:hover { background: #F0F7FF; }
.sz-mobileNav__group { border-bottom: 1px solid #F1F5F9; }
.sz-mobileNav__group:last-of-type { border-bottom: 0; }
[data-sz-mobile-actions] { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sz-mobileNav__group[data-sz-open="false"] [data-sz-mobile-panel] { display: none; }

/* Burger icon swap — zero JS */
.sz-burger [data-sz-burger-icon="close"] { display: none; }
.sz-burger[aria-expanded="true"] [data-sz-burger-icon="open"] { display: none; }
.sz-burger[aria-expanded="true"] [data-sz-burger-icon="close"] { display: block; }

/* Desktop dropdown: hover/focus-within already opens the panel; this rule is
   only for the touch tap path driven by JS. */
.sz-nav__item[data-sz-open="true"] > .sz-nav__panel { display: block; }

/* ── Page-scope modifiers ─────────────────────────────────────────────────
   Every page's <main> carries `sz-page` plus `sz-page--<slug>`. The modifiers
   have NO default styling on purpose: they are hooks so a single page can be
   adjusted later without touching the shared rules above. Never rely on them
   for base layout — always pair with `.sz-page` / `.sz-section`. */
.sz-page--home,
.sz-page--app,
.sz-page--app-features,
.sz-page--pricing,
.sz-page--products,
.sz-page--solutions,
.sz-page--about,
.sz-page--mission-vision,
.sz-page--why-schoolzee,
.sz-page--company-team,
.sz-page--customers,
.sz-page--partner,
.sz-page--blog,
.sz-page--blog-single,
.sz-page--guides,
.sz-page--help,
.sz-page--faq,
.sz-page--contact,
.sz-page--request-demo,
.sz-page--search,
.sz-page--legal,
.sz-page--privacy-policy,
.sz-page--terms,
.sz-page--subscription-policy,
.sz-page--data-security,
.sz-page--authority {
  /* intentionally empty — page-scope hook only */
}

/* ── 404 template ─────────────────────────────────────────────────────────
   The only error template on the site. Reuses `.sz-hero` for the dark
   gradient band and `.sz-search` / `.sz-chips` / `.sz-btn` for the recovery
   UI, so only the block itself and the oversized code need rules. */
.sz-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding-block: 64px;
  text-align: center;
}
.sz-404__code {
  font-size: clamp(56px, 14vw, 112px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #FFFFFF 0%, #A5F3FC 55%, #22D3EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.sz-404__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.sz-404__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.sz-404__chips .sz-chip {
  color: #EFF6FF;                                    /* blue-50 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  background: transparent;
}
.sz-404__chips .sz-chip:hover { background: rgba(255, 255, 255, 0.1); }
@media (min-width: 640px) {
  .sz-404__actions { flex-direction: row; justify-content: center; }
}

/* WhatsApp-brand button (contact + demo success states) */
.sz-form__actions .sz-btn--whatsapp,
.sz-btn--whatsapp {
  background: var(--sz-whatsapp);
  color: #FFFFFF;
}

/* ==========================================================================
   SEARCH  (/search — WordPress core search, ?s=)
   ========================================================================== */
.sz-search {
  flex: 1;
  padding-block: 48px;                                 /* py-12 */
  background: var(--sz-blue-soft);
}
@media (min-width: 1024px) { .sz-search { padding-block: 64px; } }   /* lg:py-16 */
.sz-search .sz-container { max-width: 768px; }         /* max-w-3xl */
.sz-search h1 {
  font-size: clamp(1.875rem, 1.55rem + 1.3vw, 2.25rem); /* text-3xl → sm:text-4xl */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sz-ink);
}
.sz-search__form {
  margin-top: 24px;                                    /* mt-6 */
  display: flex;
  gap: 8px;
}
.sz-search__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  border-radius: var(--sz-radius-input);
  background: #FFFFFF;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--sz-ink);
  box-shadow: inset 0 0 0 1px var(--sz-line);
  outline: none;
  transition: box-shadow 0.2s ease;
}
.sz-search__input:focus { box-shadow: inset 0 0 0 2px var(--sz-blue); }
.sz-search__form .sz-btn {
  min-height: 46px;
  border-radius: var(--sz-radius-input);
  padding: 0 20px;
  font-size: 0.875rem;
}
.sz-search__count {
  margin-top: 20px;                                    /* mt-5 */
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sz-muted);
}
.sz-search__results {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;                                           /* space-y-3 */
}
.sz-search__results > a {
  display: block;
  border-radius: var(--sz-radius-card);
  background: #FFFFFF;
  padding: 20px;                                       /* p-5 */
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.sz-search__results > a:hover { box-shadow: var(--sz-shadow-hover); }
.sz-search__results h2 {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sz-ink);
}
.sz-search__results p {
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-muted);
}
.sz-search__results a > span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #94A3B8;                                      /* text-slate-400 */
}
.sz-search dl, .sz-search dt, .sz-search dd { margin: 0; }

/* ==========================================================================
   HEADER  (theme template part — see header.md)
   ========================================================================== */
.sz-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.90);               /* bg-white/90 */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);                         /* backdrop-blur-lg */
  border-bottom: 1px solid var(--sz-line-soft);         /* border-slate-100 */
}
.sz-header__inner {
  max-width: 1280px;                                   /* max-w-7xl */
  margin-inline: auto;
  padding-inline: var(--sz-container-pad);
  height: 64px;                                        /* h-16 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sz-brand {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
}
.sz-brand img { height: 47px; width: auto; flex-shrink: 0; }   /* h-[47px] */
.sz-brand__text {
  font-family: 'Poppins', 'Anek Bangla', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--sz-ink);
  white-space: nowrap;
}

.sz-nav { display: none; }
@media (min-width: 1024px) {
  .sz-nav { display: flex; align-items: center; gap: 4px; }
}
.sz-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sz-nav__item { position: relative; }
.sz-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--sz-radius-input);               /* rounded-xl */
  padding: 8px 12px;                                   /* px-3 py-2 */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #334155;                                      /* text-slate-700 */
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.sz-nav__link:hover { color: var(--sz-blue); }
.sz-nav__link[aria-current="page"],
.sz-nav__link.sz-is-active { color: var(--sz-blue); }
.sz-nav__link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.sz-nav__item:hover > .sz-nav__link > svg,
.sz-nav__link[aria-expanded="true"] > svg { transform: rotate(180deg); }

.sz-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;                                     /* pt-2 wrapper */
  width: 288px;                                        /* w-72 */
  padding: 8px;                                        /* p-2 */
  border-radius: var(--sz-radius-btn);
  background: #FFFFFF;
  box-shadow: var(--sz-shadow-panel), inset 0 0 0 1px var(--sz-line-soft);
}
.sz-nav__item:hover > .sz-nav__panel,
.sz-nav__item:focus-within > .sz-nav__panel { display: block; }
.sz-nav__panelLink {
  display: block;
  border-radius: var(--sz-radius-input);               /* rounded-xl */
  padding: 10px 12px;                                  /* px-3 py-2.5 */
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.sz-nav__panelLink:hover,
.sz-nav__panelLink[aria-current="page"] { background: var(--sz-blue-soft); }
.sz-nav__panelTitle {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1E293B;                                      /* text-slate-800 */
}
.sz-nav__panelDesc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.625;
  color: var(--sz-faint);
}

.sz-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 640px) { .sz-header__actions { gap: 12px; } }
.sz-header__actions .sz-btn {
  min-height: 0;
  padding: 8px 16px;                                   /* px-4 py-2 */
  font-size: 0.875rem;
  box-shadow: none;
}
.sz-header__actions .sz-btn--primary { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }  /* shadow-sm */
.sz-header__actions .sz-btn svg { width: 16px; height: 16px; }
.sz-header__actions > .sz-btn--outline { box-shadow: inset 0 0 0 1px var(--sz-line); }

.sz-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;                                         /* h-10 w-10 */
  height: 40px;
  border: 0;
  border-radius: var(--sz-radius-input);
  background: transparent;
  color: #334155;
  box-shadow: inset 0 0 0 1px var(--sz-line);
  cursor: pointer;
}
.sz-burger svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .sz-burger { display: none; } }

.sz-mobileNav {
  display: none;
  border-top: 1px solid var(--sz-line-soft);
  background: #FFFFFF;
  max-height: 80vh;                                    /* max-h-[80vh] */
  overflow-y: auto;
}
/* Shown only below lg, and only when the JS/theme marks it open. */
@media (max-width: 1023px) {
  .sz-mobileNav[data-sz-open="true"],
  .sz-mobileNav[aria-hidden="false"] { display: block; }
}
.sz-mobileNav > .sz-container { padding-block: 16px 0; }
.sz-mobileNav__group {
  border-bottom: 1px solid var(--sz-line-soft);
  padding-block: 4px;
}
.sz-mobileNav__group:last-of-type { border-bottom: 0; }
.sz-mobileNav .sz-nav__link {
  flex: 1;
  padding: 12px 0;                                     /* py-3 */
  font-size: 0.875rem;
  font-weight: 600;
  color: #1E293B;
  border-radius: 0;
}
.sz-mobileNav .sz-nav__panelLink {
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--sz-muted);
}
.sz-mobileNav__group ul { padding-bottom: 12px; padding-left: 4px; }
.sz-mobileNav .sz-form__actions,
.sz-mobileNav .sz-mobileNav__cta { margin-top: 16px; }

/* ==========================================================================
   FOOTER  (theme template part — see footer.md)
   ========================================================================== */
.sz-footer {
  padding-block: 48px;                                 /* py-12 */
  background: var(--sz-footer-bg);                     /* bg-slate-50 / #F8FAFC */
  border-top: 1px solid var(--sz-line-soft);
  color: var(--sz-ink);
  text-align: left;
}
.sz-footer__inner {
  max-width: 1280px;                                   /* max-w-7xl */
  margin-inline: auto;
  padding-inline: var(--sz-container-pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;                                           /* gap-8 */
}
@media (min-width: 768px)  { .sz-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sz-footer__inner { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.sz-footer__brand {
  grid-column: span 2;                                 /* col-span-2 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 1024px) { .sz-footer__brand { grid-column: span 1; } }
.sz-footer__brand a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.sz-footer__brand img { height: 52px; width: auto; }   /* h-[52px] */
.sz-footer__brand span:not(.sz-brand__text) {
  font-size: 18px;
  font-weight: 700;
  color: #334155;
}
.sz-footer__about {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--sz-faint);
}
.sz-footer__brand .sz-btn {
  margin-top: 16px;
  min-height: 0;
  padding: 8px 16px;
  font-size: 0.875rem;
}
.sz-footer__col { min-width: 0; }
.sz-footer__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sz-ink);
}
.sz-footer__links {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--sz-faint);
}
.sz-footer__links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sz-footer__links a:hover { color: #2563EB; }

.sz-footer__bottom {
  max-width: 1280px;
  margin: 32px auto 0;                                 /* mt-8 */
  padding: 24px var(--sz-container-pad) 0;             /* pt-6 */
  border-top: 1px solid var(--sz-line);                 /* border-slate-200 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sz-faint);
}
@media (min-width: 640px) {
  .sz-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.sz-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;                                    /* gap-x-4 */
  row-gap: 8px;                                        /* gap-y-2 */
}
.sz-footer__contact a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sz-footer__contact a:hover { color: #2563EB; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.sz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sz-u-center { text-align: center; }

/* Hide-below-breakpoint utilities — the Tailwind `hidden sm:inline-flex` pattern the
   header CTAs use. .sz-u-hideSm = hidden below 640px; .sz-u-hideLg = hidden below 1024px.
   (The desktop nav and burger already handle themselves: .sz-nav / .sz-burger /
   .sz-mobileNav each carry their own breakpoint rule above.) */
.sz-u-hideSm { display: none; }
.sz-u-hideLg { display: none; }
.sz-u-hideXl { display: none; }
@media (min-width: 640px)  { .sz-u-hideSm { display: inline-flex; } }
@media (min-width: 1024px) { .sz-u-hideLg { display: inline-flex; } }
@media (min-width: 1280px) { .sz-u-hideXl { display: inline-flex; } }

/* --------------------------------------------------------------------------
   PRINT: nothing. The project's print stylesheet belonged to the app's
   question-paper view (data-print-area), which does not exist on schoolzee.net.
   No @media print rules are carried over, and nothing here depends on colour
   alone for meaning (badges/labels carry text too).
   -------------------------------------------------------------------------- */


/* / | homepage — table-to-card on mobile. Page-specific, NOT global. */
.sz-home__compareCards { display: block; }
.sz-home__compareTable { display: none; }
@media (min-width: 640px) {
  .sz-home__compareCards { display: none; }
  .sz-home__compareTable { display: block; overflow-x: auto;
    border-radius: var(--sz-radius-card); background: #fff;
    box-shadow: inset 0 0 0 1px var(--sz-line); }
}
.sz-home__compareTable table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.sz-home__compareTable thead { background-image: linear-gradient(to right, #F8FAFC, rgba(239,246,255,.5)); }
.sz-home__compareTable th { padding: 16px 20px; font-weight: 600; line-height: 1.375; color: #334155; }
.sz-home__compareTable th:nth-child(2),
.sz-home__compareTable th:nth-child(3) { text-align: center; font-weight: 700; }
.sz-home__compareTable th:nth-child(3) { color: #1D4ED8; }
.sz-home__compareTable td { padding: 14px 20px; font-size: 1rem; line-height: 1.5; }
.sz-home__compareTable tbody tr:nth-child(odd) { background: #fff; }
.sz-home__compareTable tbody tr:nth-child(even) { background: rgba(248,250,252,.5); }
.sz-home__compareTable td:nth-child(2) { text-align: center; color: var(--sz-muted); }
.sz-home__compareTable td:nth-child(3) { text-align: center; color: #1D4ED8; font-weight: 600; }
/* Card list (below 640px only) */
.sz-home__compareCards { border-radius: var(--sz-radius-card); background: #fff;
  box-shadow: inset 0 0 0 1px var(--sz-line); overflow: hidden; }
.sz-home__compareRow { padding: 20px 16px; border-bottom: 1px solid var(--sz-line-soft); }
.sz-home__compareRow:last-child { border-bottom: 0; }
.sz-home__compareRow dt { font-size: 1rem; font-weight: 500; color: #334155; }
.sz-home__compareRow dd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 10px 0 0; text-align: center; font-size: .875rem; }
.sz-home__compareRow dd .sz-home__generic { color: var(--sz-muted); }
.sz-home__compareRow dd .sz-home__schoolzee { color: #1D4ED8; font-weight: 600; }


/* ==========================================================================
   PAGE-SPECIFIC CSS
   These rules are owned by one page doc each (its "## CSS" section) and are
   deliberately NOT in the global contract. They were missing from the first
   build, which is why the homepage hero rendered as a stacked column with no
   grid, no avatar stack styling, no gold seal and no gradient section bands.
   Each block is prefixed with the page doc it came from so it stays traceable.
   ========================================================================== */

/* ==== HOMEPAGE (sz_home) ==== */
/* / — homepage. Page-specific ONLY; every shared block comes from global-css.md. */
.sz-page--home .sz-home__gradientText {
  background-image: linear-gradient(90deg, #2563EB, #3B82F6, #06B6D4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sz-page--home .sz-home__goldText { color: #FACC15; }

/* hero composition (page-specific grid areas, see global-css.md §7) */
/* Hero heading: full width above the grid, centred (React uses a
   w-full text-center wrapper before the grid, not a grid cell). */
.sz-home__heroTitleWrap { width: 100%; text-align: center; }

/* mt-8 lg:mt-10 gap-8 lg:gap-12, mobile areas image→desc→cta→badge */
.sz-home__heroGrid {
  display: grid; gap: 32px; margin-top: 32px;
  grid-template-areas: "image" "desc" "cta" "badge";
}
@media (min-width: 1024px) {
  .sz-home__heroGrid { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
    margin-top: 40px;
    grid-template-areas: "badge image" "desc image" "cta image"; }
  .sz-home__heroBadge { grid-area: badge; }
  .sz-home__heroPhone { grid-area: image; }
  .sz-home__heroDesc  { grid-area: desc; }
  .sz-home__heroCta   { grid-area: cta; }
}
.sz-home__avatarStack { display: flex; }
.sz-home__avatarStack img { width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; object-position: center 25%; box-shadow: 0 0 0 2px rgba(255,255,255,.8); margin-left: -8px; }
.sz-home__avatarStack img:first-child { margin-left: 0; }
.sz-home__heroPhone { position: relative; margin-inline: auto; max-width: 28rem; }
.sz-home__heroPhone > img { width: 100%; height: auto; }
.golden-shimmer-text {
  background-image: linear-gradient(90deg, #FDE68A, #F59E0B, #FDE68A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-gold-seal {
  position: absolute; top: -71px; right: 0; z-index: 10;
  display: flex; height: 115px; width: 115px; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: #451A03; border-radius: 50%;
  background-image: linear-gradient(135deg, #FDE68A, #F59E0B);
}
@media (min-width: 640px) { .hero-gold-seal { height: 130px; width: 130px; } }

/* full-bleed gradient bands (sections 8 and 13) */
.sz-home__band {
  position: relative; overflow: hidden; color: #FFFFFF;
  padding-block: var(--sz-section-y);
  background-image: var(--sz-cta-gradient); background-color: #172554;
}
.sz-home__band .sz-section__title,
.sz-home__band .sz-section__intro { color: #DBEAFE; }

/* single-copy rails (testimonials, showcase) */
.sz-home__rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 16px 8px; margin-top: 28px; scrollbar-width: none; }
.sz-home__rail::-webkit-scrollbar { display: none; }
.sz-home__rail > li { flex: 0 0 85%; scroll-snap-align: start; }
@media (min-width: 640px) { .sz-home__rail > li { flex-basis: 60%; } }
@media (min-width: 1024px) { .sz-home__rail { display: grid; grid-template-columns: repeat(4, 1fr);
  overflow: visible; padding-inline: 0; } .sz-home__rail > li { flex-basis: auto; } }
.sz-home__testimonial { border-radius: var(--sz-radius-card); background: #FFFFFF; padding: 24px 20px; }
.sz-home__stars { color: #FBBF24; letter-spacing: 2px; }
.sz-home__quoteText { margin-top: 16px; color: #334155; line-height: 1.625; }
.sz-home__person { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.sz-home__person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.sz-home__name { display: block; font-weight: 600; font-size: .875rem; }
.sz-home__role { display: block; font-size: .75rem; color: var(--sz-faint); }
.sz-home__rail > li > img { width: 100%; height: auto; display: block; }

/* quotes / lists / small type */
.sz-home__quote { margin-top: 32px; border-radius: var(--sz-radius-card);
  background: #FFFFFF; padding: 24px; font-weight: 600; color: #1E293B; }
.sz-section--alt .sz-home__quote { background: #FFFFFF; }
.sz-home__outro { margin-top: 24px; text-align: center; color: var(--sz-muted); }
.sz-home__checkList { margin-top: 16px; display: grid; gap: 12px; list-style: none; }
.sz-home__checkList li { display: flex; gap: 10px; border-radius: 16px; background: #F0F7FF;
  padding: 12px 16px; color: #334155; }
.sz-home__roleRows { margin-top: 40px; display: grid; gap: 12px; list-style: none;
  max-width: 768px; margin-inline: auto; }
@media (min-width: 640px) { .sz-home__roleRows { grid-template-columns: 1fr 1fr; } }
.sz-home__roleRows li { border-radius: 16px; background: #F0F7FF; padding: 12px 16px; color: #334155; }
.sz-home__subheading { margin-top: 12px; font-size: 1.125rem; font-weight: 600; color: #334155; }
.sz-home__subTitle { margin: 64px auto 24px; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem); font-weight: 700; }
.sz-home__note { margin-top: 20px; font-size: .8125rem; color: var(--sz-faint); }
.sz-home__askNot { margin-top: 4px; font-style: italic; color: var(--sz-muted); }
.sz-home__desktopOnly { display: none; }
@media (min-width: 1024px) { .sz-home__desktopOnly { display: block; } }
.sz-home__featureThumb { width: 100%; max-width: 24rem; margin: 24px auto 0; border-radius: var(--sz-radius-card); }
.sz-home__collage { display: grid; gap: 16px; }
.sz-home__collage img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 4px #fff; }
.sz-home__philosophyThumb { display: block; width: 100%; max-width: 20rem; margin: 32px auto 0;
  border-radius: var(--sz-radius-card); }
.sz-home__philosophy { margin-top: 32px; border-radius: var(--sz-radius-card); background: #FFFFFF;
  padding: 24px; box-shadow: inset 0 0 0 1px var(--sz-line-soft); }
.sz-home__eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sz-blue); }
.sz-home__formula { margin-top: 8px; font-weight: 700; color: #1E293B; line-height: 1.4; }

/* stats band */
.sz-home__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; text-align: center; list-style: none; }
@media (min-width: 1024px) { .sz-home__stats { grid-template-columns: repeat(4, 1fr); } }
.sz-home__statValue { display: block; font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); font-weight: 700;
  line-height: 1.1; background-image: linear-gradient(90deg, #2563EB, #06B6D4);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sz-home__statLabel { display: block; margin-top: 8px; font-size: .875rem; font-weight: 500; color: var(--sz-faint); }

/* advantage band cards */
.sz-home__advantage { border-radius: 16px; background: rgba(255,255,255,.10); padding: 20px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.sz-home__advantageIcon { display: block; font-size: 37px; line-height: 1; }
.sz-home__advantage .sz-card__title { color: #FFFFFF; }
.sz-home__advantage .sz-card__text { color: #DBEAFE; }

/* plan chooser */
.sz-home__chooser { border-radius: var(--sz-radius-card); background: #FFFFFF; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--sz-line); }
.sz-home__chooserItem { padding: 16px 20px; border-bottom: 1px solid var(--sz-line-soft); }
.sz-home__chooserItem:last-child { border-bottom: 0; }
.sz-home__chooserItem dt { font-weight: 500; color: #334155; }
.sz-home__chooserItem dd { margin: 4px 0 0; font-weight: 600; color: var(--sz-ink); }

/* final CTA store button + tagline ribbon (JS-free, single copy) */
.sz-home__store { background-image: none; background-color: #0F172A; color: #FFFFFF; gap: 12px;
  border-radius: 16px; padding: 12px 20px; min-height: 56px; }
.sz-home__store span { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.sz-home__store small { font-size: 10px; opacity: .8; }
.sz-home__store strong { font-size: 1rem; font-weight: 600; }
.sz-home__ribbon { margin-top: 56px; background: #FACC15; padding: 12px 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.sz-home__tagline { font-size: .875rem; font-weight: 700; color: #0F172A; }
@media (min-width: 640px) { .sz-home__tagline { font-size: 1rem; } }

/* ==== 404 TEMPLATE ([sz_404]) ==== */
/* 404 — error template. Page-specific only; the band comes from .sz-cta. */
.sz-404 { display: flex; align-items: center; min-height: 60vh; }
@media (min-width: 1024px) { .sz-404 { min-height: 70vh; padding-block: 80px; } }
.sz-404 .sz-container { max-width: 768px; }              /* max-w-3xl, per NotFound.tsx */

.sz-404__icon {
  display: flex; margin: 0 auto 24px; height: 64px; width: 64px;
  align-items: center; justify-content: center; border-radius: 16px;
  background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}
.sz-404__icon::before { content: "⌕"; font-size: 32px; line-height: 1; color: #A5F3FC; }

.sz-404__code {
  font-size: clamp(3.75rem, 2.6rem + 4.8vw, 6rem);       /* text-6xl → lg:text-8xl */
  line-height: 1.3; font-weight: 700; letter-spacing: -.025em;
  background-image: linear-gradient(90deg, #FFFFFF, #A5F3FC, #22D3EE);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sz-404__title { margin-top: 24px; font-size: clamp(1.5rem, 1.3rem + .9vw, 1.875rem);
  line-height: 1.3; font-weight: 700; color: #FFFFFF; }
.sz-404__text { margin: 12px auto 0; max-width: 36rem; font-size: 17px; line-height: 1.625; color: #DBEAFE; }

.sz-404__formWrap { margin: 28px auto 0; max-width: 28rem; }
.sz-404__formWrap .sz-search__form { margin-top: 0; }
.sz-404__formWrap .sz-search__input { box-shadow: inset 0 0 0 1px rgba(255,255,255,.30); }
.sz-404__formWrap .sz-search__input:focus { box-shadow: inset 0 0 0 2px #A5F3FC; }

.sz-404__actions { justify-content: center; }
.sz-404__chips { margin: 32px 0 0; justify-content: center; }
.sz-404__chips .sz-chip { background: transparent; color: #EFF6FF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30); }
.sz-404__chips .sz-chip:hover { background: rgba(255,255,255,.10); color: #FFFFFF; }

/* ==== SEARCH ([sz_search]) ==== */
/* /search/ — page-specific: only the pagination and the empty state are not in global-css.md. */
.sz-search__empty { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.sz-search__empty .sz-chips { margin: 0; }

.sz-search__pagination { margin-top: 32px; }
.sz-search__pagination ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sz-search__pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 12px;
  border-radius: var(--sz-radius-input); background: #FFFFFF; color: var(--sz-ink);
  box-shadow: inset 0 0 0 1px var(--sz-line); text-decoration: none; font-weight: 600;
}
.sz-search__pagination .page-numbers.current,
.sz-search__pagination .page-numbers[aria-current="page"] {
  background: var(--sz-blue); color: #FFFFFF; box-shadow: none;
}
.sz-search__pagination .page-numbers:hover { box-shadow: inset 0 0 0 2px var(--sz-blue); }
.sz-search__pagination .dots { background: transparent; box-shadow: none; }


/* ==========================================================================
   GLOBAL CHROME — list markers
   The header and footer render OUTSIDE .sz-page (they come from header.php /
   footer.php), so they never received the list reset that lives in
   @layer sz-base and kept the browser's default bullets on every menu item.
   The React project has no markers anywhere because Tailwind's preflight
   removes them globally; this does the same for the global chrome.
   ========================================================================== */
.sz-header ul, .sz-header ol,
.sz-footer ul, .sz-footer ol,
[data-sz-mobile-nav] ul, [data-sz-mobile-panel] ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.sz-nav__list,
.sz-footer__links { list-style: none; margin-block: 0; padding-left: 0; }
.sz-nav__item::marker,
.sz-footer__links li::marker { content: none; }


/* ============================================================================
   v1.0.5 parity — pain-point collage, showcase marquee, square shot, section
   container widths + padding exceptions (mirrors the React/Vercel reference)
   ============================================================================ */

/* "why built" pain-point collage: two 68%-wide images overlapping in a square */
.sz-home__collage { display: block; position: relative; width: 100%; max-width: 28rem; margin-inline: auto; }
.sz-home__collage img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 4px #fff; }
.sz-home__collage img:last-child { display: none; }
@media (min-width: 640px) {
  .sz-home__collage { aspect-ratio: 1 / 1; }
  .sz-home__collage img { position: absolute; width: 68%; }
  .sz-home__collage img:first-child { left: 0; top: 0; }
  .sz-home__collage img:last-child { display: block; right: 0; bottom: 0; }
}

/* mobile-first square shot: w-full aspect-square rounded-3xl sm:max-w-sm */
.sz-home__squareShot { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24px; }
@media (min-width: 640px) { .sz-home__squareShot { max-width: 24rem; margin-inline: auto; } }

/* showcase: horizontal auto-scrolling marquee of 220px phone shots (w-[220px]) */
.sz-home__band { overflow: hidden; }
.sz-home__rail--showcase { display: flex; width: max-content; align-items: center; gap: 24px;
  margin-top: 16px; padding: 24px 0; overflow: hidden; animation: szMarquee 20s linear infinite; }
.sz-home__rail--showcase > li { flex: 0 0 220px; scroll-snap-align: none; }
.sz-home__rail--showcase > li > img { width: 220px; height: auto; display: block; }
.sz-home__rail--showcase:hover { animation-play-state: running; }
@keyframes szMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* section container width modifiers (mirrors Tailwind max-w-3xl/4xl/5xl/6xl) */
[class*="--w768"]  .sz-container { max-width: 768px; }
[class*="--w896"]  .sz-container { max-width: 896px; }
[class*="--w1024"] .sz-container { max-width: 1024px; }
[class*="--w1152"] .sz-container { max-width: 1152px; }

/* band padding: py-14 lg:py-28 (56 → 112px) */
.sz-home__band { padding-block: 56px; }
@media (min-width: 1024px) { .sz-home__band { padding-block: 112px; } }

/* section padding exceptions */
.sz-section--padSm { padding-block: 64px; }                                  /* py-16 */
@media (min-width: 1024px) { .sz-section--padSm { padding-block: 80px; } }   /* lg:py-20 */
.sz-section--padLg { padding-block: 56px; }                                  /* py-14 */
@media (min-width: 1024px) { .sz-section--padLg { padding-block: 112px; } }  /* lg:py-28 */
.sz-section--padTestimonial { padding-block: 40px 56px; }                    /* pt-10 pb-14 */
@media (min-width: 1024px) { .sz-section--padTestimonial { padding-block: 40px 112px; } } /* lg:pt-10 lg:pb-28 */

/* Language switcher — a real link to the other language's URL (/bn/... or root),
   so the language is part of every cache key and nothing can serve the wrong one. */
.sz-langSwitch { display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sz-radius-input); line-height: 0; }
.sz-langSwitch img { display: block; width: 42px; height: 30px; object-fit: cover;
  border-radius: 6px; }
.sz-langSwitch:hover, .sz-langSwitch:focus-visible { outline: 2px solid var(--sz-blue);
  outline-offset: 2px; }

/* Homepage content-plan helpers (schoolzee-seo-geo-content-master.md §1) */
.sz-home__checkList--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .sz-home__checkList--2 { grid-template-columns: 1fr 1fr; } }
.sz-link { color: var(--sz-blue); font-weight: 600; }
.sz-link:hover { text-decoration: underline; }
.sz-section__title--spaced { margin-top: 64px; }
.sz-home__actionsCenter { justify-content: center; }
.sz-section__eyebrow + .sz-section__title { margin-top: 6px; }
.sz-step .sz-home__eyebrow { font-size: 1.5rem; }
.sz-cta--w1152 .sz-container { max-width: 1152px; }

/* The 404 headline is an <h1> (content plan §21), so it needs to outrank the
   generic .sz-page h1 sizing above. */
.sz-page .sz-404__title { font-size: clamp(1.5rem, 1.3rem + .9vw, 1.875rem); margin-top: 24px; }
.sz-page .sz-404__chipsTitle { margin-top: 40px; font-size: 1rem; font-weight: 600;
  color: rgba(255, 255, 255, .8); }
.sz-page .sz-404__code { margin: 0; }