/* The audience pages (/homeschool, /schools): the landing page's look, with a few pieces of their own. */
.hero.home.segment { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.hero-side { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 420px; }
.hero-side::before { content: ''; position: absolute; inset: 10% 6% 0; background: radial-gradient(circle at 50% 60%, #FFF4E0 0%, #F6F7FB 70%); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; z-index: 0; }
.hero-side .cast { position: relative; width: 300px; z-index: 1; }
.hero-side .pal { position: absolute; width: 140px; bottom: 6%; z-index: 1; }
.hero-side .pal.left { left: 2%; }
.hero-side .pal.right { right: 2%; }
.hero-side .bubble { position: absolute; top: 2%; right: 4%; margin: 0; max-width: 220px; z-index: 2; }
.hero-side .bubble::before { left: 24px; bottom: -14px; border: 10px solid transparent; border-bottom: 0; border-top-color: #fff; }
.segment .hero-copy .lead { text-align: left; margin-left: 0; }
.day { max-width: 900px; margin: 0 auto; border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; font-size: 17px; }
.day th, .day td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.day th { background: #F0F4FF; color: var(--indigo); font-weight: 800; }
.day tr:last-child td { border-bottom: 0; font-weight: 800; }
.day .min { white-space: nowrap; color: var(--indigo); font-weight: 800; }
.day-wrap { overflow-x: auto; margin: 0 auto 10px; max-width: 900px; }
.how .fine { margin: 14px auto 0; max-width: 700px; font-size: 15px; color: var(--muted); }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1160px; margin: 0 auto; text-align: left; }
.roles article { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 16px; }
.roles h3 { margin: 0 0 6px; color: var(--indigo); font-size: 19px; font-weight: 800; }
.roles .sees { margin: 0; color: #3d4152; font-size: 15.5px; }
.roles .never { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.roles .never b { color: var(--orange-deep); }
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; text-align: left; }
.docs a.docc { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.docs a.docc:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43,45,66,.1); }
.docs h3 { margin: 0 0 6px; color: var(--indigo); font-size: 19px; }
.docs p { margin: 0; color: var(--muted); font-size: 15.5px; }
.docs .pdfs { margin: 8px 0 0 18px; font-weight: 800; } .docs .pdfs a { color: var(--orange-deep); }
.quote { max-width: 760px; margin: 0 auto; padding: 22px 26px; background: var(--card); border-left: 5px solid var(--gold); border-radius: 14px; font-size: 19px; color: var(--ink); text-align: left; }
.quote small { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-side { min-height: 320px; }
  .hero-side .cast { width: 220px; }
  .hero-side .pal { width: 100px; }
}
@media (max-width: 640px) {
  .roles, .docs { grid-template-columns: 1fr; }
  .hero-side { display: none; }
}