/* MadhavAI audience + footer experience layer.
   Inspired by strong role clarity and discovery patterns common to modern learning products,
   while keeping MadhavAI wording, structure and visual identity original. */

.mv-role-switcher {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  max-width: 42rem;
}
.mv-role-switcher__label {
  grid-column: 1 / -1;
  margin-bottom: .1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}
.mv-role-switcher a {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .78rem .9rem;
  border: 1px solid #dbeafe;
  border-radius: 1rem;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  text-decoration: none;
}
.mv-role-switcher__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: .75rem;
  background: linear-gradient(135deg,#dbeafe,#cffafe);
  color: #1d4ed8;
  font-size: 1rem;
}
.mv-role-switcher strong { display:block; font-size:.84rem; line-height:1.1; }
.mv-role-switcher small { display:block; margin-top:.2rem; color:#64748b; font-size:.68rem; line-height:1.25; }

#parents.mv-role-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 260px at 8% 10%, rgba(59,130,246,.10), transparent 70%),
    radial-gradient(520px 260px at 92% 80%, rgba(34,211,238,.10), transparent 70%),
    #f8fafc !important;
}
.mv-role-section-heading {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  text-align: center;
}
.mv-role-section-heading .eyebrow {
  display:inline-flex;
  padding:.35rem .7rem;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mv-role-section-heading h2 {
  margin-top:.8rem;
  color:#0f172a;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.035em;
}
.mv-role-section-heading p {
  margin:.8rem auto 0;
  max-width:42rem;
  color:#64748b;
  line-height:1.7;
}
#parents.mv-role-section > .mx-auto.grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
#parents.mv-role-section article,
.mv-teacher-card {
  border:1px solid #dbeafe !important;
  background:linear-gradient(160deg,#ffffff 0%,#f8fbff 70%,#ecfeff 100%) !important;
  box-shadow:0 16px 42px rgba(37,99,235,.07) !important;
}
.mv-teacher-card {
  height:100%;
  padding:1.5rem;
  border-radius:1.5rem;
}
.mv-teacher-card__tag {
  display:flex;
  align-items:center;
  gap:.45rem;
  color:#2563eb;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mv-teacher-card h2 {
  margin-top:.75rem;
  color:#0f172a;
  font-size:1.35rem;
  line-height:1.25;
  font-weight:900;
}
.mv-teacher-card ul { margin-top:1.25rem; display:grid; gap:.72rem; }
.mv-teacher-card li { display:flex; gap:.65rem; align-items:flex-start; color:#334155; font-size:.875rem; line-height:1.55; }
.mv-teacher-card li::before {
  content:"✓";
  display:grid;
  place-items:center;
  width:1.1rem;
  height:1.1rem;
  margin-top:.15rem;
  flex:0 0 auto;
  border-radius:999px;
  background:#ecfeff;
  color:#0891b2;
  font-size:.72rem;
  font-weight:900;
}
.mv-teacher-card a {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:1.4rem;
  padding:.72rem 1rem;
  border-radius:.8rem;
  background:#2563eb;
  color:#fff;
  font-size:.86rem;
  font-weight:750;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
}

.mv-footer-role-strip {
  max-width:80rem;
  margin:1.9rem auto 0;
  padding:1rem 0 0;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.mv-footer-role-strip__copy { color:#94a3b8; font-size:.78rem; }
.mv-footer-role-strip__roles { display:flex; flex-wrap:wrap; gap:.5rem; }
.mv-footer-role-strip__roles a {
  padding:.48rem .7rem;
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#e2e8f0;
  font-size:.75rem;
  text-decoration:none;
}

body:has(header a[href="#subjects"]):has(main #faq) footer {
  position:relative;
  overflow:hidden;
  padding-top:3rem !important;
  background:
    radial-gradient(620px 300px at 8% 0%, rgba(37,99,235,.18), transparent 70%),
    radial-gradient(520px 280px at 92% 100%, rgba(8,145,178,.14), transparent 70%),
    #040818 !important;
}
body:has(header a[href="#subjects"]):has(main #faq) footer::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,#3b82f6,#22d3ee,transparent);
  opacity:.8;
}
body:has(header a[href="#subjects"]):has(main #faq) footer > .mx-auto.grid {
  gap:2.4rem !important;
}
body:has(header a[href="#subjects"]):has(main #faq) footer > .mx-auto.grid > div:first-child {
  padding-right:1rem;
}
body:has(header a[href="#subjects"]):has(main #faq) footer > .mx-auto.grid > div:nth-child(2),
body:has(header a[href="#subjects"]):has(main #faq) footer > .mx-auto.grid > div:nth-child(3) {
  padding:1rem;
  border:1px solid rgba(148,163,184,.10);
  border-radius:1rem;
  background:rgba(255,255,255,.025);
}
body:has(header a[href="#subjects"]):has(main #faq) footer a { text-underline-offset:3px; }
body:has(header a[href="#subjects"]):has(main #faq) footer a:hover { color:#fff !important; }

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .mv-role-switcher a,
  .mv-teacher-card,
  .mv-footer-role-strip__roles a {
    transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease,background-color 180ms ease;
  }
  .mv-role-switcher a:hover { transform:translate3d(0,-2px,0); border-color:#93c5fd; box-shadow:0 14px 32px rgba(37,99,235,.10); }
  .mv-teacher-card:hover { transform:translate3d(0,-3px,0); box-shadow:0 20px 48px rgba(37,99,235,.11) !important; }
  .mv-footer-role-strip__roles a:hover { transform:translate3d(0,-1px,0); background:rgba(255,255,255,.08); border-color:rgba(34,211,238,.3); }
}

@media (max-width:1023px) {
  #parents.mv-role-section > .mx-auto.grid { grid-template-columns:1fr !important; max-width:44rem; }
}
@media (max-width:639px) {
  .mv-role-switcher { grid-template-columns:1fr; }
  .mv-role-switcher__label { margin-bottom:0; }
  .mv-role-switcher a { padding:.72rem .78rem; }
  .mv-role-section-heading { margin-bottom:1.4rem; }
  .mv-footer-role-strip { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .mv-role-switcher a,.mv-teacher-card,.mv-footer-role-strip__roles a { transition:none !important; transform:none !important; }
}

/* Hero cleanup: remove the heavy black blocks from the first impression. */
body:has(header a[href="#subjects"]):has(main #faq) header a[href="/"] img[src="/madhavai-mark.webp"] {
  background: linear-gradient(145deg,#f8fbff,#e0f2fe) !important;
  border: 1px solid #bfdbfe;
  box-shadow: 0 6px 18px rgba(37,99,235,.10) !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div {
  background: linear-gradient(150deg,#ffffff 0%,#f8fbff 58%,#eff6ff 100%) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 24px 64px rgba(37,99,235,.14) !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div > div:first-child {
  border-color: #dbeafe !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div > div:first-child .font-semibold.text-white {
  color: #0f172a !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div > div:first-child .text-amber-200 {
  color: #b45309 !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div > div:first-child > span:last-child {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #dbeafe;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) {
  background: #ffffff !important;
  border-color: #dbeafe !important;
  color: #334155 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.045);
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) strong {
  color: #0891b2 !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) .grid > span {
  background: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #dbeafe;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div > div:last-child {
  border-color: #dbeafe !important;
  color: #475569 !important;
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div > div:last-child > span {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
}

@media (max-width:767px) {
  body:has(header a[href="#subjects"]):has(main #faq)
  main > section:first-of-type > div > div:nth-child(2) > div {
    box-shadow: 0 18px 44px rgba(37,99,235,.11) !important;
  }
}