/* ============================================================
   Study Dog — Master Stylesheet
   Covers: design tokens, reset, shared components, all templates
   ============================================================ */

/* ── Design tokens ── */
:root {
  --purple:        #833BA6;
  --purple-dark:   #6B2D8E;
  --purple-deeper: #4A1D6A;
  --purple-light:  #F3EBF8;
  --purple-mid:    #E0CBF0;
  --text:          #111827;
  --text-muted:    #6B7280;
  --text-light:    #9CA3AF;
  --white:         #FFFFFF;
  --bg:            #FAFAFA;
  --border:        #E5E7EB;
  --green:         #10B981;
  --radius:        14px;
  --radius-sm:     8px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:        0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-lg:     0 16px 48px rgba(131,59,166,.15), 0 4px 12px rgba(0,0,0,.08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── Layout ── */
.container       { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container--blog { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--wide { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.section         { padding: 96px 0; }
.section--sm     { padding: 64px 0; }
.section--grey   { background: var(--bg); }
.section--dark   { background: var(--purple-deeper); color: var(--white); }
.section--purple { background: var(--purple-light); }

/* ── Typography ── */
.eyebrow       { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); margin-bottom: 12px; display: block; }
.eyebrow--white { color: rgba(255,255,255,.7); }
h1  { font-size: clamp(36px, 5vw, 60px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
h2  { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h3  { font-size: 20px; font-weight: 700; }
p   { color: var(--text-muted); line-height: 1.75; }
.lead { font-size: 18px; color: var(--text-muted); max-width: 600px; }
.section-head        { max-width: 640px; }
.section-head--center { max-width: 640px; margin: 0 auto; text-align: center; }

/* ── Buttons ── */
.btn           { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 700; transition: all .2s ease; white-space: nowrap; font-family: 'Inter', sans-serif; }
.btn--sm       { padding: 9px 18px; font-size: 13px; }
.btn--primary  { background: var(--purple); color: var(--white); box-shadow: 0 4px 14px rgba(131,59,166,.4); }
.btn--primary:hover  { background: var(--purple-dark); box-shadow: 0 6px 20px rgba(131,59,166,.5); transform: translateY(-1px); }
.btn--outline  { background: transparent; color: var(--purple); border: 2px solid var(--purple); }
.btn--outline:hover  { background: var(--purple-light); }
.btn--white    { background: var(--white); color: var(--purple); box-shadow: var(--shadow-sm); }
.btn--white:hover    { box-shadow: var(--shadow); transform: translateY(-1px); }
.btn--ghost    { background: rgba(255,255,255,.12); color: var(--white); border: 1.5px solid rgba(255,255,255,.3); }
.btn--ghost:hover    { background: rgba(255,255,255,.2); }

/* ── Announcement bar ── */
.announcement        { background: var(--purple-deeper); color: var(--white); text-align: center; padding: 10px 24px; font-size: 13px; font-weight: 500; }
.announcement a      { color: #E2B8FF; font-weight: 700; border-bottom: 1px solid rgba(226,184,255,.4); }
.announcement a:hover { border-color: #E2B8FF; }

/* ── Navbar ── */
.nav           { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav__inner    { display: flex; align-items: center; height: 68px; gap: 8px; }
.nav__logo     { display: flex; align-items: center; gap: 10px; height: 40px; flex-shrink: 0; text-decoration: none; }
.nav__logo img, .nav__logo .custom-logo { height: 36px; width: auto; max-height: 36px; display: block; }
.nav__logo-text { font-size: 18px; font-weight: 800; color: var(--purple); letter-spacing: -.02em; }
.nav__links    { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav__link     { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text); transition: background .15s; }
.nav__link:hover, .nav__link--active, .nav__link.current-menu-item { background: var(--purple-light); color: var(--purple); }
/* Override WP nav menu default styles */
.nav__links ul { display: flex; align-items: center; gap: 4px; }
.nav__links li { list-style: none; }
.nav__links li a { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text); transition: background .15s; display: block; }
.nav__links li a:hover, .nav__links li.current-menu-item > a { background: var(--purple-light); color: var(--purple); }
.nav__ctas     { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__login    { font-size: 14px; font-weight: 600; color: var(--text-muted); padding: 8px 12px; border-radius: var(--radius-sm); }
.nav__login:hover { color: var(--purple); background: var(--purple-light); }
.nav__join     { background: var(--purple); color: var(--white); border-radius: 50px; padding: 9px 20px; font-size: 14px; font-weight: 700; transition: all .2s; }
.nav__join:hover { background: var(--purple-dark); transform: translateY(-1px); }

/* ── Hero (Homepage) ── */
.hero          { background: linear-gradient(135deg, #1A0B2E 0%, #4A1D6A 50%, #6B2D8E 100%); color: var(--white); padding: 100px 0 80px; position: relative; overflow: hidden; }
.hero::before  { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(131,59,166,.3) 0%, transparent 60%); pointer-events: none; }
.hero::after   { content: ''; position: absolute; top: -100px; right: -100px; width: 600px; height: 600px; border-radius: 50%; background: rgba(131,59,166,.15); pointer-events: none; }
.hero__inner   { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero__badge   { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 6px 16px; font-size: 13px; font-weight: 600; margin-bottom: 24px; }
.hero__badge-dot { width: 8px; height: 8px; background: #4ADE80; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.2)} }
.hero h1       { color: var(--white); margin-bottom: 20px; }
.hero h1 span  { background: linear-gradient(135deg, #E2B8FF, #C084FC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero__lead    { font-size: 18px; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 36px; max-width: 520px; }
.hero__ctas    { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.hero__stats   { display: flex; gap: 32px; }
.hero__stat-value { font-size: 24px; font-weight: 800; color: var(--white); }
.hero__stat-label { font-size: 13px; color: rgba(255,255,255,.6); }
.hero__visual  { position: relative; display: flex; align-items: center; justify-content: center; }
.hero__card-stack { position: relative; width: 380px; }
.hero__card    { background: rgba(255,255,255,.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 20px; position: relative; }
.hero__card + .hero__card { margin-top: 12px; }
.hero__card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 20px; }
.hero__card-icon--purple { background: rgba(192,132,252,.2); }
.hero__card-icon--green  { background: rgba(74,222,128,.2); }
.hero__card-icon--blue   { background: rgba(96,165,250,.2); }
.hero__card h4 { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.hero__card p  { font-size: 13px; color: rgba(255,255,255,.6); }
.hero__card-progress { height: 6px; background: rgba(255,255,255,.15); border-radius: 50px; margin-top: 12px; overflow: hidden; }
.hero__card-progress-bar { height: 100%; border-radius: 50px; background: linear-gradient(90deg, #C084FC, #A855F7); }

/* ── Trusted by ── */
.trusted       { padding: 24px 0 48px; }
.trusted__inner { display: flex; align-items: center; gap: 24px; }
.trusted__avatars { display: flex; }
.trusted__avatar  { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--white); margin-left: -10px; background: var(--purple-mid); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--purple-dark); overflow: hidden; }
.trusted__avatar:first-child { margin-left: 0; }
.trusted__stars { display: flex; gap: 2px; color: #F59E0B; font-size: 16px; }
.trusted__text  { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.trusted__text strong { color: var(--text); }

/* ── Subject cards (Homepage grid) ── */
.subjects__grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.subject-card    { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; transition: all .2s ease; cursor: pointer; position: relative; overflow: hidden; display: block; }
.subject-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--purple-light), transparent); opacity: 0; transition: opacity .2s; }
.subject-card:hover { border-color: var(--purple); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.subject-card:hover::before { opacity: 1; }
.subject-card__icon   { font-size: 32px; margin-bottom: 16px; }
.subject-card__name   { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.subject-card__boards { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.subject-card__board  { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 50px; background: var(--purple-light); color: var(--purple-dark); }
.subject-card__topics { font-size: 13px; color: var(--text-muted); }
.subject-card__arrow  { position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; border-radius: 50%; background: var(--purple-light); display: flex; align-items: center; justify-content: center; color: var(--purple); font-size: 14px; transition: all .2s; }
.subject-card:hover .subject-card__arrow { background: var(--purple); color: var(--white); }
.subject-card--coming { opacity: .7; cursor: default; }
.subject-card--coming:hover { border-color: var(--border); box-shadow: none; transform: none; }
.coming-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--text); color: var(--white); border-radius: 50px; padding: 2px 8px; margin-left: 8px; }

/* ── Features tabs ── */
.features__tabs  { display: flex; gap: 8px; margin-top: 40px; margin-bottom: 40px; flex-wrap: wrap; }
.features__tab   { padding: 9px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; border: 1.5px solid var(--border); color: var(--text-muted); transition: all .2s; cursor: pointer; background: var(--white); }
.features__tab:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
.features__tab.active { background: var(--purple); color: var(--white); border-color: var(--purple); }
.features__panel { display: none; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.features__panel.active { display: grid; }
.features__list  { display: grid; gap: 16px; }
.feature-item    { display: flex; gap: 16px; align-items: flex-start; }
.feature-item__icon  { width: 44px; height: 44px; border-radius: 12px; background: var(--purple-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.feature-item__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.feature-item__desc  { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.features__preview   { background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple-mid) 100%); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.feature-mock        { background: var(--white); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.feature-mock__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: 8px; }
.feature-mock__bar   { height: 8px; border-radius: 50px; background: var(--border); overflow: hidden; margin-bottom: 6px; }
.feature-mock__fill  { height: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--purple), #C084FC); }

/* ── Testimonials ── */
.testimonials__grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.testimonial         { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; }
.testimonial__stars  { color: #F59E0B; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial__quote  { font-size: 15px; line-height: 1.7; color: var(--text); font-style: italic; margin-bottom: 20px; }
.testimonial__quote::before { content: '\201C'; }
.testimonial__quote::after  { content: '\201D'; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--purple-mid); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--purple-dark); }
.testimonial__name   { font-size: 14px; font-weight: 700; }
.testimonial__role   { font-size: 12px; color: var(--text-muted); }

/* ── Pricing cards ── */
.pricing__grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.pricing-card       { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 32px; position: relative; }
.pricing-card--featured { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(131,59,166,.08), var(--shadow-lg); }
.pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--purple); color: var(--white); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 16px; border-radius: 50px; white-space: nowrap; }
.pricing-card__name  { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.pricing-card__desc  { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.pricing-card__amount { font-size: 44px; font-weight: 900; letter-spacing: -.03em; }
.pricing-card__period { font-size: 14px; color: var(--text-muted); }
.pricing-card__cta   { width: 100%; text-align: center; display: block; padding: 14px; border-radius: 50px; font-size: 15px; font-weight: 700; margin: 28px 0 24px; transition: all .2s; }
.pricing-card--featured .pricing-card__cta { background: var(--purple); color: var(--white); box-shadow: 0 4px 14px rgba(131,59,166,.4); }
.pricing-card--featured .pricing-card__cta:hover { background: var(--purple-dark); transform: translateY(-1px); }
.pricing-card:not(.pricing-card--featured) .pricing-card__cta { background: var(--purple-light); color: var(--purple); }
.pricing-card:not(.pricing-card--featured) .pricing-card__cta:hover { background: var(--purple-mid); }
.pricing-card__features { display: flex; flex-direction: column; gap: 10px; }
.pricing-card__feature  { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.pricing-card__feature::before { content: '\2713'; width: 18px; height: 18px; background: #4ADE80; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.pricing__note { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-muted); }

/* ── Schools section ── */
.schools__inner     { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.schools__features  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.schools__feature   { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); padding: 20px; }
.schools__feature-icon  { font-size: 24px; margin-bottom: 10px; }
.schools__feature-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.schools__feature-desc  { font-size: 13px; color: rgba(255,255,255,.6); }
.schools__visual    { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 28px; }
.schools__stat-row  { display: flex; gap: 16px; margin-bottom: 16px; }
.schools__stat-box  { flex: 1; background: rgba(255,255,255,.1); border-radius: 12px; padding: 16px; text-align: center; }
.schools__stat-box-value { font-size: 28px; font-weight: 900; color: var(--white); }
.schools__stat-box-label { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.schools__bar-label { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 6px; display: flex; justify-content: space-between; }
.schools__bar       { height: 8px; background: rgba(255,255,255,.15); border-radius: 50px; overflow: hidden; margin-bottom: 14px; }
.schools__bar-fill  { height: 100%; background: linear-gradient(90deg, #C084FC, #E879F9); border-radius: 50px; }

/* ── Blog card ── */
.blog__grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.blog-card    { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .2s; display: block; }
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--purple); }
.blog-card__image  { height: 180px; background: linear-gradient(135deg, var(--purple-light), var(--purple-mid)); display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body   { padding: 20px; }
.blog-card__subject { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--purple); margin-bottom: 8px; }
.blog-card__title   { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: var(--text); }
.blog-card__date    { font-size: 12px; color: var(--text-light); }

/* ── CTA strip ── */
.cta-strip        { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%); padding: 80px 0; text-align: center; }
.cta-strip h2     { color: var(--white); }
.cta-strip p      { color: rgba(255,255,255,.75); margin: 16px auto 32px; max-width: 500px; font-size: 17px; }
.cta-strip__buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── Subject hero ── */
.subject-hero { background: linear-gradient(135deg, #064E3B 0%, #065F46 40%, #047857 100%); color: var(--white); padding: 72px 0 60px; position: relative; overflow: hidden; }
.subject-hero[data-color="politics"]  { background: linear-gradient(135deg, #1E3A5F 0%, #1D4ED8 100%); }
.subject-hero[data-color="geography"] { background: linear-gradient(135deg, #14532D 0%, #15803D 100%); }
.subject-hero[data-color="sociology"] { background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%); }
.subject-hero[data-color="pe"]        { background: linear-gradient(135deg, #7C2D12 0%, #EA580C 100%); }
.subject-hero[data-color="economics"] { background: linear-gradient(135deg, #064E3B 0%, #047857 100%); }
.subject-hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.subject-hero__inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; position: relative; }
.subject-hero__boards { display: flex; gap: 8px; margin-bottom: 20px; }
.subject-hero__board  { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 50px; padding: 5px 14px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }
.subject-hero h1  { color: var(--white); margin-bottom: 16px; }
.subject-hero__lead { font-size: 17px; color: rgba(255,255,255,.75); line-height: 1.7; max-width: 540px; margin-bottom: 32px; }
.subject-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.subject-hero__stats { display: flex; gap: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); }
.subject-hero__stat-value { font-size: 22px; font-weight: 800; color: var(--white); }
.subject-hero__stat-label { font-size: 12px; color: rgba(255,255,255,.6); }
.subject-hero__icon { width: 140px; height: 140px; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.2); border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 72px; }

/* ── Topics grid (Subject page) ── */
.topics__grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.topic-card    { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; gap: 20px; align-items: flex-start; transition: all .2s; position: relative; overflow: hidden; }
.topic-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 2px 2px 0; opacity: 0; transition: opacity .2s; }
.topic-card[data-color="economics"]::after { background: #10B981; }
.topic-card[data-color="geography"]::after { background: #22C55E; }
.topic-card[data-color="politics"]::after  { background: #3B82F6; }
.topic-card[data-color="sociology"]::after { background: #8B5CF6; }
.topic-card[data-color="pe"]::after        { background: #F97316; }
.topic-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.topic-card:hover::after { opacity: 1; }
.topic-card__num      { width: 48px; height: 48px; border-radius: 12px; background: var(--purple-light); color: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.topic-card__name     { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.topic-card__desc     { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.topic-card__resources { display: flex; gap: 8px; flex-wrap: wrap; }
.topic-card__resource  { background: var(--purple-light); color: var(--purple); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px; }

/* ── Resource cards ── */
.resources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.resource-card   { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; transition: all .2s; }
.resource-card:hover { border-color: var(--purple); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.resource-card__icon { font-size: 36px; margin-bottom: 14px; }
.resource-card__name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.resource-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.resource-card__badge { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--purple); background: var(--purple-light); border-radius: 50px; padding: 3px 10px; }

/* ── Why cards ── */
.why__grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.why-card   { padding: 28px; border-radius: var(--radius); background: var(--bg); border: 1.5px solid var(--border); }
.why-card__icon  { font-size: 32px; margin-bottom: 14px; }
.why-card__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.why-card__desc  { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ── Inline pricing (Subject page) ── */
.inline-pricing        { background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple-mid) 100%); border-radius: 24px; padding: 56px; }
.inline-pricing__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tier-pill             { border: 2px solid var(--border); border-radius: 14px; padding: 16px 20px; flex: 1; min-width: 120px; cursor: pointer; transition: all .2s; background: var(--white); text-align: center; }
.tier-pill.active      { border-color: var(--purple); background: var(--purple); color: var(--white); }
.tier-pill.active .tier-pill__price { color: var(--white); }
.tier-pill.active .tier-pill__label { color: rgba(255,255,255,.8); }
.tier-pill.active .tier-pill__saving { background: rgba(255,255,255,.2); color: var(--white); }
.tier-pill:hover:not(.active) { border-color: var(--purple); }
.tier-pill__subjects { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tier-pill__price    { font-size: 22px; font-weight: 900; color: var(--text); }
.tier-pill__label    { font-size: 11px; color: var(--text-muted); }
.tier-pill__saving   { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; background: #DCFCE7; color: #16A34A; padding: 2px 8px; border-radius: 50px; margin-top: 4px; }
.inline-pricing__tiers    { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.inline-pricing__features { display: flex; flex-direction: column; gap: 10px; }
.inline-pricing__feature  { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.inline-pricing__feature::before { content: '\2713'; width: 20px; height: 20px; background: var(--green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.inline-pricing__note { font-size: 13px; color: var(--text-muted); }

/* ── Pricing page subject selector ── */
.selector-section { padding: 64px 0; }
.selector-wrap    { max-width: 760px; margin: 0 auto; }
.selector-label   { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-bottom: 20px; text-align: center; }
.subjects-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.subject-toggle    { border: 2px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: all .2s; background: var(--white); text-align: left; position: relative; user-select: none; }
.subject-toggle:hover { border-color: var(--purple); }
.subject-toggle.selected { border-color: var(--purple); background: var(--purple-light); }
.subject-toggle__check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.subject-toggle.selected .subject-toggle__check { background: var(--purple); border-color: var(--purple); color: var(--white); font-size: 12px; font-weight: 800; }
.subject-toggle__emoji  { font-size: 22px; margin-bottom: 6px; }
.subject-toggle__name   { font-size: 14px; font-weight: 700; }
.subject-toggle__boards { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.subject-toggle--disabled { opacity: .5; cursor: not-allowed; }
.subject-toggle--disabled:hover { border-color: var(--border); }
.price-display          { background: var(--purple-light); border: 2px solid var(--purple-mid); border-radius: 20px; padding: 32px; text-align: center; margin-bottom: 20px; }
.price-display__subjects { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; min-height: 20px; }
.price-display__amount   { font-size: 60px; font-weight: 900; letter-spacing: -.04em; color: var(--purple); line-height: 1; }
.price-display__period   { font-size: 17px; color: var(--text-muted); margin-top: 4px; }
.price-display__saving   { display: inline-block; background: #DCFCE7; color: #16A34A; font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 50px; margin-top: 12px; }
.price-display__cta      { display: block; background: var(--purple); color: var(--white); border-radius: 50px; padding: 16px 40px; font-size: 16px; font-weight: 700; margin: 20px auto 0; width: fit-content; box-shadow: 0 4px 14px rgba(131,59,166,.4); transition: all .2s; }
.price-display__cta:hover { background: var(--purple-dark); transform: translateY(-1px); }
.price-display__note     { font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.included                { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.included-group__title   { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.included-item           { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 0; }
.included-item::before   { content: '\2713'; width: 18px; height: 18px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; }

/* ── Comparison table ── */
.comparison-table         { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.comparison-table th      { background: var(--purple-deeper); color: var(--white); padding: 18px 20px; font-size: 14px; font-weight: 700; text-align: left; }
.comparison-table th:not(:first-child) { text-align: center; }
.comparison-table th.featured { background: var(--purple); }
.comparison-table td      { padding: 14px 20px; font-size: 14px; border-bottom: 1px solid var(--border); background: var(--white); }
.comparison-table td:not(:first-child) { text-align: center; }
.comparison-table td.featured { background: var(--purple-light); }
.comparison-table tr:last-child td { border-bottom: none; }
.tick  { color: var(--green); font-size: 16px; font-weight: 800; }
.cross { color: var(--text-light); font-size: 16px; }

/* ── FAQ ── */
.faq__list    { margin-top: 40px; display: grid; gap: 12px; max-width: 720px; margin-left: auto; margin-right: auto; }
.faq-item     { border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.faq-item__q  { width: 100%; padding: 20px 24px; text-align: left; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text); }
.faq-item__q:hover  { background: var(--bg); }
.faq-item__arrow    { font-size: 18px; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.faq-item.open .faq-item__arrow { transform: rotate(90deg); }
.faq-item__a        { display: none; padding: 0 24px 20px; font-size: 14px; color: var(--text-muted); line-height: 1.75; border-top: 1px solid var(--border); padding-top: 16px; }
.faq-item.open .faq-item__a { display: block; }

/* ── Parent / tell a parent form ── */
.parent-section       { background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple-mid) 100%); border-radius: 24px; padding: 48px; margin-top: 64px; }
.parent-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.parent-form          { display: flex; flex-direction: column; gap: 12px; }
.parent-form input    { width: 100%; padding: 12px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: 14px; font-family: inherit; background: var(--white); transition: border-color .15s; }
.parent-form input:focus { outline: none; border-color: var(--purple); }
.parent-form__submit  { background: var(--purple); color: var(--white); border-radius: 50px; padding: 13px 28px; font-size: 15px; font-weight: 700; transition: all .2s; cursor: pointer; border: none; font-family: inherit; }
.parent-form__submit:hover { background: var(--purple-dark); transform: translateY(-1px); }
.parent-form__note    { font-size: 12px; color: var(--text-muted); }

/* ── Schools CTA block (pricing page) ── */
.schools-cta   { background: var(--purple-deeper); color: var(--white); border-radius: 24px; padding: 48px; margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.schools-cta h3 { color: var(--white); font-size: 22px; margin-bottom: 8px; }
.schools-cta p  { color: rgba(255,255,255,.65); font-size: 14px; }

/* ── Breadcrumb ── */
.breadcrumb    { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 24px; flex-wrap: wrap; }
.breadcrumb a  { color: var(--text-muted); transition: color .15s; }
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb__sep     { color: var(--text-light); }
.breadcrumb__current { color: var(--text); font-weight: 600; }

/* ── Blog / Article hero ── */
.article-hero        { padding: 52px 0 0; border-bottom: 1px solid var(--border); background: var(--white); }
.article-hero__inner { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.article-hero__cats  { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.article-hero__cat   { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--purple); background: var(--purple-light); padding: 4px 12px; border-radius: 50px; }
.article-hero h1     { font-size: clamp(28px, 4vw, 46px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--text); margin-bottom: 18px; }
.article-hero__meta  { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--text-muted); margin-bottom: 36px; flex-wrap: wrap; }
.article-hero__author { display: flex; align-items: center; gap: 10px; }
.article-hero__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--purple-mid); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--purple-dark); flex-shrink: 0; }
.article-hero__author-name { font-weight: 600; color: var(--text); }
.article-hero__sep   { color: var(--border); }
.article-hero__cover { width: 100%; height: 420px; object-fit: cover; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, var(--purple-light), var(--purple-mid)); display: flex; align-items: center; justify-content: center; font-size: 80px; overflow: hidden; }
.article-hero__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px 20px 0 0; }

/* ── Blog layout ── */
.blog-layout        { padding: 56px 0 80px; }
.blog-layout__inner { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: flex-start; }

/* ── Article takeaways ── */
.takeaways          { background: var(--purple-light); border: 1.5px solid var(--purple-mid); border-left: 4px solid var(--purple); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 40px; }
.takeaways__label   { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--purple); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.takeaways__list    { display: flex; flex-direction: column; gap: 8px; }
.takeaways__item    { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.5; }
.takeaways__item::before { content: '\2713'; width: 18px; height: 18px; background: var(--purple); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }

/* ── Article prose ── */
.prose              { font-family: 'Lora', Georgia, serif; font-size: 17px; line-height: 1.8; color: #1F2937; }
.prose p            { margin-bottom: 24px; }
.prose p:last-child { margin-bottom: 0; }
.prose h2           { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 48px 0 16px; line-height: 1.2; }
.prose h3           { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: var(--text); margin: 36px 0 12px; line-height: 1.3; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a            { color: var(--purple); text-decoration: underline; text-decoration-color: rgba(131,59,166,.3); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.prose a:hover      { text-decoration-color: var(--purple); }
.prose strong       { font-weight: 700; color: var(--text); }
.prose ul           { list-style: disc; padding-left: 24px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.prose ol           { list-style: decimal; padding-left: 24px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.prose li           { line-height: 1.7; }

/* Pull stat */
.pull-stat          { background: linear-gradient(135deg, var(--purple-deeper), var(--purple-dark)); color: var(--white); border-radius: var(--radius); padding: 32px; margin: 36px 0; display: flex; align-items: center; gap: 24px; }
.pull-stat__numbers { display: flex; gap: 24px; flex-shrink: 0; }
.pull-stat__value   { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; font-family: 'Inter', sans-serif; }
.pull-stat__value--green { color: #4ADE80; }
.pull-stat__value--red   { color: #F87171; }
.pull-stat__label   { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 4px; font-family: 'Inter', sans-serif; }
.pull-stat__divider { width: 1px; background: rgba(255,255,255,.2); align-self: stretch; flex-shrink: 0; }
.pull-stat__text    { font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.6; font-family: 'Inter', sans-serif; }
.pull-stat__source  { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 6px; font-family: 'Inter', sans-serif; }

/* Pull quote */
.pull-quote             { border-left: 4px solid var(--purple); padding: 4px 0 4px 28px; margin: 36px 0; }
.pull-quote__text       { font-size: 20px; font-style: italic; line-height: 1.6; color: var(--text); }
.pull-quote__attribution { font-size: 13px; color: var(--text-muted); margin-top: 8px; font-family: 'Inter', sans-serif; font-style: normal; }

/* Feature callout in prose */
.feature-callout        { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 32px 0; display: flex; gap: 16px; align-items: flex-start; }
.feature-callout__icon  { font-size: 32px; flex-shrink: 0; }
.feature-callout__title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.feature-callout__desc  { font-size: 14px; color: var(--text-muted); line-height: 1.6; font-family: 'Inter', sans-serif; }
.feature-callout__link  { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--purple); margin-top: 10px; font-family: 'Inter', sans-serif; }
.feature-callout__link:hover { text-decoration: underline; }
.article-divider        { height: 1px; background: var(--border); margin: 48px 0; }

/* Share bar */
.share-bar         { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 48px 0 0; flex-wrap: wrap; }
.share-bar__label  { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.share-bar__btn    { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 50px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); background: var(--white); color: var(--text); transition: all .15s; cursor: pointer; }
.share-bar__btn:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
.share-bar__spacer { flex: 1; }
.share-bar__tags   { display: flex; gap: 6px; flex-wrap: wrap; }
.share-bar__tag    { font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: 3px 10px; color: var(--text-muted); }

/* Author card */
.author-card         { display: flex; gap: 20px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 40px; }
.author-card__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--purple-mid); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: var(--purple-dark); flex-shrink: 0; overflow: hidden; }
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card__label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.author-card__name   { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.author-card__bio    { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.author-card__links  { display: flex; gap: 10px; margin-top: 10px; }
.author-card__link   { font-size: 13px; font-weight: 600; color: var(--purple); }
.author-card__link:hover { text-decoration: underline; }

/* ── Sidebar ── */
.sidebar            { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 20px; }
.toc                { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.toc__label         { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 14px; }
.toc__list          { display: flex; flex-direction: column; gap: 2px; }
.toc__link          { font-size: 14px; font-weight: 500; color: var(--text-muted); padding: 5px 8px; border-radius: var(--radius-sm); width: 100%; transition: all .15s; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; }
.toc__link:hover, .toc__link.active { color: var(--purple); background: var(--purple-light); }
.toc__link::before  { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; margin-top: 8px; }
.toc__link--h3      { padding-left: 20px; font-size: 13px; }
.toc__link--h3::before { display: none; }
.toc__progress      { height: 3px; background: var(--border); border-radius: 50px; margin-top: 14px; overflow: hidden; }
.toc__progress-bar  { height: 100%; border-radius: 50px; background: var(--purple); transition: width .3s ease; }
.sidebar-cta        { background: linear-gradient(135deg, var(--purple-deeper) 0%, var(--purple-dark) 100%); border-radius: var(--radius); padding: 24px; color: var(--white); text-align: center; }
.sidebar-cta__icon  { font-size: 36px; margin-bottom: 12px; }
.sidebar-cta__title { font-size: 16px; font-weight: 800; color: var(--white); margin-bottom: 8px; line-height: 1.3; }
.sidebar-cta__desc  { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; margin-bottom: 18px; }
.sidebar-cta__btn   { display: block; background: var(--white); color: var(--purple); border-radius: 50px; padding: 12px 20px; font-size: 14px; font-weight: 800; transition: all .2s; }
.sidebar-cta__btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.2); transform: translateY(-1px); }
.sidebar-cta__note  { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 10px; }
.sidebar-cta__features { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; text-align: left; }
.sidebar-cta__feature  { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.8); }
.sidebar-cta__feature::before { content: '\2713'; width: 16px; height: 16px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; }
.sidebar-related         { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.sidebar-related__label  { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 14px; }
.sidebar-related__item   { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.sidebar-related__item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-related__thumb  { width: 52px; height: 52px; border-radius: 8px; background: linear-gradient(135deg, var(--purple-light), var(--purple-mid)); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; overflow: hidden; }
.sidebar-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-related__title  { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); }
.sidebar-related__title:hover { color: var(--purple); }
.sidebar-related__date   { font-size: 11px; color: var(--text-light); margin-top: 3px; }
.sidebar-subjects        { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.sidebar-subjects__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 14px; }
.sidebar-subjects__grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-subject         { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); transition: all .15s; }
.sidebar-subject:hover   { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }

/* ── Reading progress ── */
.reading-progress     { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; }
.reading-progress__bar { height: 100%; background: linear-gradient(90deg, var(--purple), #C084FC); width: 0%; transition: width .1s linear; }

/* ── Post CTA ── */
.post-cta      { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%); padding: 72px 0; text-align: center; }
.post-cta h2   { font-size: clamp(24px, 3vw, 36px); font-weight: 900; color: var(--white); margin-bottom: 12px; }
.post-cta p    { color: rgba(255,255,255,.75); font-size: 16px; max-width: 480px; margin: 0 auto 28px; }
.post-cta__btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── Related posts grid ── */
.related           { padding: 72px 0; background: var(--bg); }
.related__head     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.related__title    { font-size: 26px; font-weight: 800; }
.related__grid     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card      { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .2s; display: block; }
.related-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--purple); }
.related-card__thumb { height: 160px; background: linear-gradient(135deg, var(--purple-light), var(--purple-mid)); display: flex; align-items: center; justify-content: center; font-size: 44px; overflow: hidden; }
.related-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-card__body  { padding: 18px 20px; }
.related-card__cat   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--purple); margin-bottom: 6px; }
.related-card__title { font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: var(--text); }
.related-card:hover .related-card__title { color: var(--purple); }
.related-card__date  { font-size: 12px; color: var(--text-light); }

/* ── Pricing hero ── */
.pricing-hero     { background: linear-gradient(135deg, #1A0B2E 0%, #4A1D6A 100%); color: var(--white); padding: 72px 0 80px; text-align: center; }
.pricing-hero h1  { color: var(--white); margin-bottom: 16px; }
.pricing-hero p   { color: rgba(255,255,255,.7); font-size: 18px; max-width: 540px; margin: 0 auto 12px; }
.pricing-hero__trust      { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.pricing-hero__trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.65); font-weight: 500; }
.pricing-hero__trust-item::before { content: '\2713'; width: 18px; height: 18px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }

/* ── Footer ── */
.footer              { background: var(--text); color: rgba(255,255,255,.7); padding: 64px 0 32px; }
.footer__inner       { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer__logo        { height: 32px; filter: brightness(0) invert(1); margin-bottom: 4px; }
.footer__brand-desc  { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.5); margin: 16px 0 24px; }
.footer__socials     { display: flex; gap: 12px; }
.footer__social      { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .2s; color: rgba(255,255,255,.7); }
.footer__social:hover { background: var(--purple); color: var(--white); }
.footer__col-title   { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--white); margin-bottom: 16px; }
.footer__link        { display: block; font-size: 14px; color: rgba(255,255,255,.55); padding: 3px 0; transition: color .15s; }
.footer__link:hover  { color: rgba(255,255,255,.9); }
.footer__bottom      { border-top: 1px solid rgba(255,255,255,.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer__copy        { font-size: 13px; color: rgba(255,255,255,.4); }
.footer__bottom-links { display: flex; gap: 24px; }
.footer__bottom-link  { font-size: 13px; color: rgba(255,255,255,.4); }
.footer__bottom-link:hover { color: rgba(255,255,255,.7); }
.divider { height: 1px; background: var(--border); }

/* ── Hamburger & Mobile Nav ── */
.nav__hamburger         { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: var(--radius-sm); flex-shrink: 0; }
.nav__hamburger-bar     { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer — hidden by default */
.mobile-nav             { display: none; position: fixed; inset: 0; top: 69px; background: var(--white); z-index: 99; padding: 24px; overflow-y: auto; flex-direction: column; gap: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.mobile-nav.mobile-nav--open { display: flex; }
.mobile-nav__links      { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__links li a { display: block; padding: 14px 16px; font-size: 16px; font-weight: 600; color: var(--text); border-radius: var(--radius-sm); transition: background .15s; }
.mobile-nav__links li a:hover,
.mobile-nav__links li.current-menu-item > a { background: var(--purple-light); color: var(--purple); }
.mobile-nav__cta        { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 12px; }
.btn--full              { width: 100%; }

/* ── Customizer CSS variable bridges ──
   The CSS uses shorthand token names (--purple etc.). These bridges let the
   Customizer's :root overrides (--color-primary etc.) take effect everywhere. */
:root {
  --color-primary:      var(--purple, #833BA6);
  --color-primary-dark: var(--purple-dark, #6B2D8E);
  --color-primary-light:var(--purple-light, #F3EBF8);
  --color-text:         var(--text, #111827);
  --color-text-muted:   var(--text-muted, #6B7280);
  --color-bg:           var(--bg, #FAFAFA);
  --color-surface:      var(--purple-light, #F3EBF8);
  --color-border:       var(--border, #E5E7EB);
  /* hero */
  --hero-gradient:      linear-gradient(135deg, #1A0B2E, #4A1D6A, #6B2D8E);
  --hero-text:          #FFFFFF;
  --hero-sub-text:      rgba(255,255,255,.75);
  /* buttons */
  --btn-primary-bg:     var(--purple, #833BA6);
  --btn-primary-hover:  var(--purple-dark, #6B2D8E);
  --btn-primary-text:   #FFFFFF;
  --btn-ghost-border:   var(--purple, #833BA6);
  --btn-ghost-text:     var(--purple, #833BA6);
  /* nav */
  --nav-bg:             rgba(255,255,255,.95);
  --nav-text:           #374151;
  --nav-text-active:    var(--purple, #833BA6);
  --nav-border:         var(--border, #E5E7EB);
  /* announcement */
  --ann-bg:             var(--purple-deeper, #4A1D6A);
  --ann-text:           #E2B8FF;
  --ann-badge-bg:       var(--purple, #833BA6);
  /* footer */
  --footer-bg:          #0F0720;
  --footer-text:        #A78BCA;
  --footer-heading:     #FFFFFF;
  --footer-link:        #C4A4E0;
  --footer-bottom-bg:   #080412;
  /* subjects */
  --subject-economics:  #10B981;
  --subject-history:    #F59E0B;
  --subject-psychology: #8B5CF6;
  --subject-business:   #3B82F6;
  --subject-sociology:  #EC4899;
  --subject-politics:   #EF4444;
}

/* Apply Customizer tokens to actual properties */
.nav              { background: var(--nav-bg); border-bottom-color: var(--nav-border); }
.nav__links li a  { color: var(--nav-text); }
.nav__links li a:hover,
.nav__links li.current-menu-item > a { color: var(--nav-text-active); }
.btn--primary     { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover { background: var(--btn-primary-hover); }
.btn--outline     { color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); }
.hero             { background: var(--hero-gradient); }
.announcement     { background: var(--ann-bg); }
.announcement a   { color: var(--ann-text); }
.site-footer      { background: var(--footer-bg); }
.footer__col-title { color: var(--footer-heading); }
.footer__links a  { color: var(--footer-link); }
.footer__bottom   { background: var(--footer-bottom-bg); }

/* subject hero data-color overrides via Customizer tokens */
.subject-hero[data-color="economics"]  { background: linear-gradient(135deg, #0d2b1e, var(--subject-economics, #10B981)); }
.subject-hero[data-color="history"]    { background: linear-gradient(135deg, #2b1e0d, var(--subject-history, #F59E0B)); }
.subject-hero[data-color="psychology"] { background: linear-gradient(135deg, #1e0d2b, var(--subject-psychology, #8B5CF6)); }
.subject-hero[data-color="business"]   { background: linear-gradient(135deg, #0d1a2b, var(--subject-business, #3B82F6)); }
.subject-hero[data-color="sociology"]  { background: linear-gradient(135deg, #2b0d1a, var(--subject-sociology, #EC4899)); }
.subject-hero[data-color="politics"]   { background: linear-gradient(135deg, #2b0d0d, var(--subject-politics, #EF4444)); }

/* btn additional variants */
.btn--ghost-light { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.25); }
.btn--lg  { padding: 16px 32px; font-size: 16px; }
.btn--sm  { padding: 9px 18px; font-size: 13px; }

/* section-label utility (used in PHP templates) */
.section-label    { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--btn-primary-bg, #833BA6); margin-bottom: 12px; }
.section-title    { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text, #111827); margin-bottom: 16px; }
.section-sub      { font-size: 18px; color: var(--text-muted, #6B7280); max-width: 600px; margin-bottom: 48px; }

/* sr-only utility */
.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; }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .blog-layout__inner     { grid-template-columns: 1fr; }
  .sidebar                { position: static; }
  .article-hero__cover    { height: 300px; }
}
@media (max-width: 900px) {
  .hero__inner            { grid-template-columns: 1fr; }
  .hero__visual           { display: none; }
  .subjects__grid         { grid-template-columns: repeat(2, 1fr); }
  .features__panel.active { grid-template-columns: 1fr; }
  .testimonials__grid     { grid-template-columns: 1fr; }
  .pricing__grid          { grid-template-columns: 1fr; }
  .schools__inner         { grid-template-columns: 1fr; }
  .blog__grid             { grid-template-columns: 1fr; }
  .footer__inner          { grid-template-columns: 1fr 1fr; }
  .nav__links             { display: none; }
  .nav__ctas              { display: none; }
  .nav__hamburger         { display: flex; }
  .subject-hero__inner    { grid-template-columns: 1fr; }
  .topics__grid           { grid-template-columns: 1fr; }
  .why__grid              { grid-template-columns: 1fr; }
  .resources__grid        { grid-template-columns: repeat(2, 1fr); }
  .inline-pricing__inner  { grid-template-columns: 1fr; }
  .inline-pricing         { padding: 36px 28px; }
  .subjects-selector      { grid-template-columns: repeat(2, 1fr); }
  .included               { grid-template-columns: 1fr; }
  .parent-section__inner  { grid-template-columns: 1fr; }
  .schools-cta            { flex-direction: column; text-align: center; }
}
@media (max-width: 740px) {
  .related__grid          { grid-template-columns: 1fr; }
  .pull-stat              { flex-direction: column; gap: 16px; }
  .pull-stat__divider     { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PHP TEMPLATE BRIDGE
   Maps the class names used in PHP templates to the rules above.
   The PHP templates use a slightly different BEM convention to
   the original HTML prototypes — these rules unify them.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero sub-classes ── */
.hero__headline     { color: var(--white); margin-bottom: 20px; font-size: clamp(36px,5vw,64px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.hero__sub          { font-size: 18px; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 36px; max-width: 520px; }
.hero__actions      { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.hero__social-proof { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 12px; }
.hero__badge-pulse  { width: 8px; height: 8px; background: #4ADE80; border-radius: 50%; display: inline-block; animation: pulse 2s infinite; flex-shrink: 0; }
.hero__stat         { display: flex; flex-direction: column; gap: 2px; }
.hero__stat-value   { font-size: 24px; font-weight: 800; color: var(--white); }
.hero__stat-label   { font-size: 13px; color: rgba(255,255,255,.6); }
.hero__content      { display: flex; flex-direction: column; justify-content: center; }
.hero__stats        { display: flex; gap: 40px; flex-wrap: wrap; padding: 40px 0 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; }

/* Feature card mock-UI inside hero */
.card-header        { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.card-progress      { height: 6px; background: rgba(255,255,255,.15); border-radius: 50px; overflow: hidden; }
.progress-bar       { height: 100%; border-radius: 50px; background: linear-gradient(90deg,#C084FC,#A855F7); }
.card-badge         { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); }
.card-label         { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-bottom: 12px; }
.card-question      { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 8px; line-height: 1.4; }
.card-hint          { font-size: 13px; color: rgba(255,255,255,.5); }
.hero__card--back   { margin-bottom: -12px; transform: rotate(-2deg) translateY(8px); opacity: .85; }
.hero__card--front  { position: relative; }

/* ── Features tabs — BEM modifier aliases ── */
.features__tab--active,
.features__tab[aria-selected="true"] { background: var(--purple); color: var(--white); border-color: var(--purple); }
.features__panel--active             { display: grid; }
.features__panel-text                { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.features__panel-text h3             { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.features__panel-text p              { font-size: 16px; color: var(--text-muted); line-height: 1.7; }
.features__panel-visual              { display: flex; align-items: center; justify-content: center; }
.features__list                      { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.features__list li                   { font-size: 15px; color: var(--text-muted); }

/* Feature card visuals */
.feature-card               { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); max-width: 380px; width: 100%; }
.feature-card__label        { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--purple); margin-bottom: 14px; display: block; }
.feature-card__q            { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; line-height: 1.4; }
.feature-card__divider      { height: 1px; background: var(--border); margin: 16px 0; }
.feature-card__a            { font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.feature-card__meta         { display: flex; gap: 8px; font-size: 13px; color: var(--text-muted); }
.feature-card__options      { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.feature-card__option       { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg); font-size: 14px; color: var(--text-muted); }
.feature-card__option--correct { background: #D1FAE5; color: #065F46; font-weight: 700; }

/* ── Subjects grid ── */
.subjects-section           { padding: 96px 0; }
.subjects-grid              { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.subject-card__title        { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.subject-card__desc         { font-size: 13px; color: var(--text-muted); }

/* ── Testimonials ── */
.testimonials               { padding: 96px 0; background: var(--bg); }
.testimonials__grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.testimonial-card           { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.testimonial-card__stars    { font-size: 16px; color: #F59E0B; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card__text     { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; flex: 1; }
.testimonial-card__author   { margin-top: auto; }
.testimonial-card__author strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.testimonial-card__author span   { font-size: 13px; color: var(--text-light); }

/* ── Schools section ── */
.schools-section            { background: linear-gradient(135deg,#1A0B2E 0%,#4A1D6A 50%,#6B2D8E 100%); padding: 96px 0; color: var(--white); }
.schools-section .section-label  { color: rgba(255,255,255,.6); }
.schools-section .section-title  { color: var(--white); }
.schools-section p          { color: rgba(255,255,255,.7); }
.schools-section__inner     { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.schools-section__stats     { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 40px; }
.schools-stat__value        { font-size: 40px; font-weight: 900; color: var(--white); display: block; line-height: 1.1; margin-bottom: 4px; }
.schools-stat__label        { font-size: 14px; color: rgba(255,255,255,.6); }

/* ── Pricing preview ── */
.pricing-preview            { padding: 96px 0; }
.pricing-cards              { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.pricing-card__tier         { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 16px; }
.pricing-card__price        { display: flex; align-items: baseline; gap: 2px; margin-bottom: 24px; }
.pricing-card__amount       { font-size: 44px; font-weight: 900; color: var(--text); line-height: 1; }
.pricing-card__period       { font-size: 15px; color: var(--text-muted); }
.pricing-card__features     { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.pricing-card__features li  { font-size: 14px; color: var(--text-muted); }
.pricing-card--featured .pricing-card__amount { color: var(--purple); }

/* ── Blog preview ── */
.blog-preview               { padding: 96px 0; background: var(--bg); }
.blog-preview__header       { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.blog-preview__header > div { }
.blog-grid                  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card__image-link      { display: block; }
.blog-card__body            { padding: 20px; }
.blog-card__cat             { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--purple); margin-bottom: 10px; display: block; }
.blog-card__title a         { color: var(--text); transition: color .15s; }
.blog-card__title a:hover   { color: var(--purple); }
.blog-card__excerpt         { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; }
.blog-card__meta            { display: flex; gap: 12px; font-size: 12px; color: var(--text-light); }

/* ── CTA strip ── */
.cta-strip__inner           { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.cta-strip__title           { font-size: clamp(28px,4vw,44px); font-weight: 900; color: var(--white); }
.cta-strip__sub             { font-size: 18px; color: rgba(255,255,255,.75); }
.cta-strip__actions         { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ── Site footer ── */
.site-footer                { background: #0F0720; color: #A78BCA; }
.site-footer__inner         { display: grid; grid-template-columns: 1.5fr 3fr; gap: 64px; padding: 80px 0 48px; }
.footer__brand              { }
/* Override the old .footer__logo rule that inverts the SVG */
.footer__logo               { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; text-decoration: none; height: auto; filter: none; }
.footer__logo svg           { flex-shrink: 0; }
.footer__logo-text          { font-size: 18px; font-weight: 800; color: #FFFFFF; }
.footer__tagline            { font-size: 14px; color: #A78BCA; line-height: 1.6; margin-bottom: 24px; max-width: 260px; }
.footer__social             { display: flex; gap: 12px; }
.footer__social-link        { color: #A78BCA; transition: color .2s; display: flex; align-items: center; width: auto; height: auto; background: none; border-radius: 0; }
.footer__social-link:hover  { color: #FFFFFF; background: none; }
.footer__nav                { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer__col                { }
.footer__col-title          { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #FFFFFF; margin-bottom: 16px; display: block; }
.footer__links              { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__links a            { font-size: 14px; color: #C4A4E0; transition: color .2s; }
.footer__links a:hover      { color: #FFFFFF; }
.footer__bottom             { border-top: 1px solid rgba(255,255,255,.08); padding: 28px 0; }
.footer__bottom-inner       { display: flex; justify-content: space-between; align-items: center; }
.footer__copy               { font-size: 13px; color: rgba(255,255,255,.4); margin: 0; }
.footer__made               { font-size: 13px; color: rgba(255,255,255,.4); margin: 0; }

/* ── Responsive for new classes ── */
@media (max-width: 900px) {
  .subjects-grid            { grid-template-columns: repeat(2,1fr); }
  .testimonials__grid       { grid-template-columns: 1fr; }
  .pricing-cards            { grid-template-columns: 1fr; }
  .blog-grid                { grid-template-columns: 1fr; }
  .schools-section__inner   { grid-template-columns: 1fr; }
  .site-footer__inner       { grid-template-columns: 1fr; gap: 32px; }
  .footer__nav              { grid-template-columns: repeat(2,1fr); }
  .features__panel--active  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .subjects-grid            { grid-template-columns: 1fr; }
  .footer__nav              { grid-template-columns: 1fr; }
  .blog-preview__header     { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__stats              { gap: 24px; }
}
@media (max-width: 600px) {
  .subjects__grid         { grid-template-columns: 1fr; }
  .schools__features      { grid-template-columns: 1fr; }
  .footer__inner          { grid-template-columns: 1fr; }
  .hero__stats            { flex-wrap: wrap; gap: 20px; }
  .resources__grid        { grid-template-columns: 1fr; }
  .sidebar-subjects__grid { grid-template-columns: 1fr; }
  .parent-section         { padding: 32px 24px; }
}