/*
  Math Playground subscription-page redesign
  Loaded after main-v2.css and subscription-v2.css so all changes are isolated here.
*/

:root {
  --mp-blue: #1746c8;
  --mp-deep-blue: #12358f;
  --mp-ink: #17255a;
  --mp-purple: #6f2dbd;
  --mp-teal: #0799a5;
  --mp-orange: #f36b16;
  --mp-yellow: #ffc928;
  --mp-green: #268f48;
  --mp-soft-blue: #f4f8ff;
  --mp-border: #d8e2f3;
  --mp-shadow: 0 12px 30px rgba(18, 53, 143, 0.10);
}
/*
body {
  margin: 0;
  color: var(--mp-ink);
  background: #fff;
}

.container {
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}



#siteHeader {
  min-height: 76px;
  padding: 0 30px;
  background: linear-gradient(90deg, #1539a7 0%, #0753d8 100%);
  box-sizing: border-box;
}

.logo-header-new { max-width: 310px; }

.subscription-button {
  border-radius: 7px;
  min-width: 94px;
  min-height: 42px;
  font-size: 17px;
  font-weight: 700;
}


#theSubscribeButton {
  color: #14235b;
  background: var(--mp-yellow);
}
*/

.container {
    padding-inline: clamp(20px, 3vw, 36px);
    box-sizing: border-box;
}
/* Audience tabs */
.subscription-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(680px, 100%);
  margin: 28px auto 20px;
  box-sizing: border-box;

  border: 2px solid #9cb3e7;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.buttonS {
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 14px 20px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-right: 1px solid #9cb3e7;
  border-radius: 0;

  background: #fff;
  color: var(--mp-ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;

  transition: background .2s ease, color .2s ease;
}

.buttonS:last-child {
  border-right: 0;
}

.buttonS.is-active {
  color: #fff;
  background: var(--mp-blue);
}

.buttonS:hover:not(.is-active) {
  color: var(--mp-blue);
  background: #f2f5fc;
}

.buttonS:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid #f3a126;
  outline-offset: -4px;
}

.buttonS:last-child.is-active {
  width: calc(100% + 2px);
  margin-right: -2px;
}
/* Hero */
.subscription-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr);
  gap: 48px;
  align-items: center;
  padding: 26px 10px 20px;
}

.hero-copy {
  transform: translateX(30px);
}

.hero-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(46px, 5.2vw, 70px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -2px;
  color: var(--mp-ink);
}
.hero-copy h1 span { display: inline-block; }
.hero-copy h1 .explore { color: var(--mp-purple); }
.hero-copy h1 .model { color: var(--mp-teal); }
.hero-copy h1 .practice { color: #1760d7; }
.hero-copy h1 .solve { color: var(--mp-orange); }

.hero-intro {
  max-width: 610px;
  margin: 0 0 22px;
  font-size: 23px;
  line-height: 1.45;
  font-weight: 600;
}

.hero-benefits {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  line-height: 1.35;
}
.hero-benefits li { position: relative; padding-left: 31px; }
.hero-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #43a94f;
  font-size: 13px;
  font-weight: 900;
}

.hero-trust {
  margin: 25px 0 0;
  color: var(--mp-deep-blue);
  font-size: 17px;
  font-weight:700;
}

/* CSS laptop placeholder. Replace .activity-preview with a real screenshot later. */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
	transform: translateX(-30px);
}

.hero-laptop {
    width: 100%;
    max-width: 680px;
    height: auto;
    display: block;
}
.activity-preview {
  min-height: 330px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(#f7fbff, #e7f1fb);
}
.activity-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 15px;
  color: #fff;
  background: var(--mp-blue);
  font-weight: 800;
}
.activity-stage {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 275px;
}
.activity-sidebar {
  padding: 18px;
  color: var(--mp-ink);
  background: #f3f6fb;
  border-right: 1px solid #d2dced;
}
.activity-sidebar strong { display: block; margin-bottom: 8px; }
.activity-sidebar .mini-value { font-size: 29px; font-weight: 900; }
.activity-main {
  display: grid;
  place-items: center;
  padding: 20px;
}
.balance-demo { width: 92%; max-width: 380px; text-align: center; }
.balance-beam { height: 9px; border-radius: 8px; background: #44506c; }
.balance-post { width: 14px; height: 74px; margin: 0 auto; background: #44506c; }
.balance-base { width: 130px; height: 12px; margin: 0 auto; border-radius: 10px; background: #44506c; }
.math-tiles { display: flex; justify-content: space-between; margin-bottom: -2px; padding: 0 30px; }
.tile-group { display: flex; gap: 6px; align-items: end; }
.math-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 54px;
  border: 2px solid #164aa8;
  border-radius: 6px;
  color: #082765;
  background: #3a8cf1;
  font-size: 22px;
  font-weight: 900;
}
.math-tile.green { background: #65ad45; border-color: #357522; }
.math-tile.weight { background: #dce1e9; border-color: #8c96a6; }
.laptop-base {
  width: 112%;
  height: 22px;
  margin-left: -6%;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(#b9bcc1, #74777c);
  box-shadow: 0 12px 20px rgba(0,0,0,.15);
}

/* Shared section headings */
.section-title {
  margin: 0 0 20px;
  text-align: center;
  color: var(--mp-deep-blue);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
}



/* Pricing */
.pricing-section { padding: 10px 0 24px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 445px;
  padding: 28px 26px 24px;
  border: 2px solid var(--card-color);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 53, 143, .06);
  box-sizing: border-box;
}
.price-card.monthly { --card-color: #7136c6; }
.price-card.annual { --card-color: #0499a4; }
.price-card.plus { --card-color: #f05a12; }
.price-card h3 {
  margin: 0 0 8px;
  color: var(--card-color);
  text-align: center;
  font-size: 26px;
}
.price-kicker { min-height: 26px; margin: 0; text-align: center; font-size: 19px; }
.price {
  margin: 6px 0 0;
  color: var(--card-color);
  text-align: center;
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
}
.price small { font-size: 22px; vertical-align: 24px; }
.price-period { margin: 3px 0 15px; text-align: center; }
.savings-pill {
  align-self: center;
  margin: 0 0 12px;
  padding: 7px 20px;
  border-radius: 99px;
  color: #087d86;
  background: #d4f2f1;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.price-card hr { width: 100%; border: 0; border-top: 1px solid color-mix(in srgb, var(--card-color) 32%, white); }
.price-card ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.3;
}
.price-card li { position: relative; padding-left: 26px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--card-color); font-weight: 900; }
.plan-action {
  width: 100%;
  margin-top: auto;
  padding: 13px 16px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--card-color);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.plus-banner {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);

  width: fit-content;
  max-width: calc(100% - 36px);
  padding: 6px 28px;
  box-sizing: border-box;
  white-space: nowrap;

  border-radius: 9px;
  color: #fff;
  background: var(--mp-orange);
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Feature cards */
.features-section { padding: 14px 0 30px; }
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.feature-card {
  min-height: 235px;
  padding: 16px 14px 18px;
  border: 1px solid #e2e7f0;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(#fff, #f7f9fd);
  box-shadow: 0 6px 16px rgba(18,53,143,.05);
}
.feature-visual {
  display: grid;
  place-items: center;
  height: 94px;
  margin-bottom: 12px;
  border-radius: 9px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, white);
  font-size: 44px;
  font-weight: 900;
}

.feature-visual i {
    font-size: 40px;
    line-height: 1;
}


.feature-card h3 {color: #173f98; font-weight: 700; margin: 0 0 8px; font-size: 19px;}
.feature-card p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.feature-card.adfree { --accent: #c92f32; }
.feature-card.thinkagons { --accent: #6f2dbd; }
.feature-card.reflectagons { --accent: #2363c7; }
.feature-card.bonus { --accent: #ef6c00; }
.feature-card.login { --accent: #008a97; }

/* FAQ */
.faq-section { padding: 8px 0 35px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.faq-grid details { border: 1px solid #d9dfeb; border-radius: 8px; background: #fff;}
.faq-grid summary { padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 17px; color: #173f98; }
.faq-grid p { margin: 0; padding: 0 16px 16px; line-height: 1.5; }

/* Family and school panels */
.plan-panel { display: none; }
.plan-panel.is-visible { display: block; }
.simple-panel-header { max-width: 820px; margin: 32px auto 24px; text-align: center; }
.simple-panel-header h1 { margin-bottom: 10px; color: var(--mp-deep-blue); font-size: 42px; }
.simple-panel-header p { font-size: 20px; line-height: 1.5; }
.family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.school-quote {
  max-width: 780px;
  margin: 24px auto 40px;
  padding: 30px;
  border: 2px solid var(--mp-blue);
  border-radius: 14px;
  background: var(--mp-soft-blue);
  font-size: 18px;
  line-height: 1.6;
}
.school-quote h2 { margin-top: 0; color: var(--mp-deep-blue); }

.site-footer-links { margin-top: 20px; }

@media (max-width: 980px) {
  .subscription-hero { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { text-align: center; }
  .hero-benefits { width: min(620px, 100%); margin-inline: auto; text-align: left; }
  .pricing-grid, .family-grid { grid-template-columns: 1fr; width: min(560px, 100%); margin: 0 auto; }
  .price-card { min-height: 0; }
  .feature-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  #siteHeader { padding: 0 12px; }
  .logo-header-new { max-width: 220px; }
  .subscription-tabs { margin-top: 18px; }
  .buttonS { padding: 12px 6px; font-size: 14px; }
  .subscription-hero { padding-top: 14px; }
  .hero-copy h1 { font-size: 43px; letter-spacing: -1px; }
  .hero-intro { font-size: 19px; }
  .hero-device { display: none; }
  .feature-card-grid, .faq-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
}

/* ---------- Revision 2: alignment and pricing refinements ---------- */

/* Keep all hero copy and benefit text firmly left aligned. */
.hero-copy,
.hero-intro,
.hero-benefits,
.hero-trust {
  text-align: left;
}

.hero-benefits {
  margin-left: 0;
  margin-right: 0;
}

/* Keep every plan's divider at the same vertical position. */
.price-card {
  padding-top: 32px;
}

.price-card h3 {
  min-height: 30px;
}

.price-kicker {
  min-height: 44px;
}

.price-card .price-period {
  margin-bottom: 15px;
}

.annual-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 91px;
}

.annual-price-row .price,
.annual-price-row .price-period {
  margin-left: 0;
  margin-right: 0;
}

.savings-pill {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 13px;
  border-radius: 7px;
  line-height: 1.15;
  text-align: center;
}

.price-card hr {
  margin-top: 0;
}

/* Center the PLUS banner accurately over the card without overhanging. 
.plus-banner {
  top: -16px;
  left: 18px;
  right: 18px;
  width: auto;
  min-width: 0;
  transform: none;
  box-sizing: border-box;
}
*/
/* Plan details are easier to scan when aligned from one common edge. */
.price-card ul {
  text-align: left;
}

/* Feature descriptions and FAQ questions should also be left aligned. */
.feature-card {
  text-align: left;
}

.feature-card h3,
.feature-card p {
  text-align: left;
}

.faq-grid details,
.faq-grid summary,
.faq-grid p {
  text-align: left;
}

@media (max-width: 820px) {
  .hero-copy {
    text-align: left;
  }

  .hero-benefits {
    margin-inline: 0;
  }
}


/* ---------- Revision 3: full Family layout ---------- */
.family-activity-preview {
  background: linear-gradient(#cdeeff 0 48%, #76b45a 48% 100%);
}
.family-preview-stage {
  position: relative;
  min-height: 275px;
  overflow: hidden;
}
.forest-sky {
  position: absolute; inset: 0 0 48%;
  background: radial-gradient(circle at 22% 34%, #fff 0 12px, transparent 13px),
              radial-gradient(circle at 70% 24%, #fff 0 16px, transparent 17px);
}
.forest-ground {
  position: absolute; inset: 48% 0 0;
  background: linear-gradient(#78b95b, #477d35);
}
.fraction-path {
  position: absolute; left: 10%; right: 10%; top: 105px;
  display: flex; justify-content: space-between; align-items: center;
}
.fraction-path::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 50%;
  height: 10px; border-radius: 10px; background: #d9b56d; transform: translateY(-50%);
}
.fraction-path span {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 62px; height: 62px; border: 4px solid #fff; border-radius: 50%;
  color: #163a87; background: #ffd548; box-shadow: 0 5px 10px rgba(0,0,0,.18);
  font-size: 20px; font-weight: 900;
}
.preview-prompt {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 76%; padding: 10px 14px; border-radius: 8px;
  color: #fff; background: rgba(20,51,130,.9); text-align: center; font-weight: 800;
}
.family-focused { --card-color: #d52d63; }
.family-focused .plus-banner { background: var(--mp-orange); }
.focused-savings { color: #b92152; background: #f9dce7; }
.focused-explainer {
  margin: 10px 0 30px; padding: 24px 28px; border: 2px solid #0799a5;
  border-radius: 12px; background: #f6fcfc;
}
.focused-explainer h2 { margin: 0 0 10px; color: var(--mp-deep-blue); font-size: 25px; }
.focused-explainer p { margin: 0; font-size: 17px; line-height: 1.6; }
.family-plan-note {
  max-width: 820px; margin: -6px auto 36px; text-align: center;
  font-size: 18px; line-height: 1.55; font-style: italic; color: #12358f;
}


/* ---------- Revision 4: focused-plan parity ---------- */
.plus-savings {
  color: #c64d00;
  background: #fff0e4;
}

.plus-explainer {
  border-color: var(--mp-orange);
  background: #fffaf5;
}


/* School and district redesign */
.school-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr);
  gap: 48px;
  align-items: center;
  padding: 26px 10px 42px;
}

.school-hero-copy h1 {
  margin: 0 0 18px;                    /* was 16px */
  color: var(--mp-ink);                /* optional if you want exact match */
  font-size: clamp(46px, 5.2vw, 70px); /* match Classroom */
  font-weight: 500;                    /* add */
  line-height: .98;                    /* match */
  letter-spacing: -2px;                /* match */
}

.school-hero-tagline {
  margin: 0 0 16px;
  color: var(--mp-orange);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
}
.school-hero-intro {
  max-width: 610px;    /* was 530px */
  margin: 0 0 20px;    /* was 0 */
  font-size: 22px;     /* was 19px */
  line-height: 1.45;   /* was 1.7 */
  font-weight: 500;    /* add */
}
.school-hero-copy {
  transform: translateX(30px);
}

.school-device {
  padding-bottom: 0;               /* remove the extra 8px */
  transform: translateX(-30px);
}




.school-options-section { padding: 0 14px 26px; }
.school-options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.school-option-card { position:relative; min-height:315px; padding:28px 34px 24px; border:2px solid; border-radius:15px; background:#fff; box-sizing:border-box; }
.standard-school { border-color:#2c61d1; } .plus-school { border-color:var(--mp-orange); }
.school-option-heading { display:flex; gap:20px; align-items:center; margin-bottom:23px; }
.school-icon { display:grid; place-items:center; flex:0 0 72px; width:72px; height:72px; border-radius:50%; color:#fff; background:#1550c4; font-size:34px; }
.plus-school .school-icon { background:var(--mp-orange); }
.plus-school .school-icon svg, .plus-school .school-icon i { color:#fff !important; fill:#fff !important; }
.school-option-heading h2 { margin:0 0 4px; color:var(--mp-deep-blue); font-size:30px; }
.plus-school .school-option-heading h2 { color:var(--mp-orange); }
.school-option-heading p { margin:0; color:var(--mp-deep-blue); font-size:17px; font-weight:600; }
.plus-school .school-option-heading p { color:var(--mp-orange); }
.school-option-card ul { display:grid; gap:14px; margin:0; padding:0; list-style:none; font-size:17px; line-height:1.35; }
.school-option-card li { position:relative; padding-left:34px; }
.school-option-card li::before { content:"✓"; position:absolute; left:0; top:0; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#fff; background:#1550c4; font-size:13px; font-weight:900; }
.plus-school li::before { background:var(--mp-orange); }
.school-edition-banner { position:absolute; left:50%; top:-22px; transform:translateX(-50%); width:max-content; padding:6px 28px; border-radius:9px 9px 0 0; color:#fff; background:var(--mp-orange); font-size:17px; font-weight:700; letter-spacing:.3px; }

.quote-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  color: #fff;
  background: var(--mp-teal);
  font-size: 34px;
  font-weight: 700;
}

.quote-icon i {
  font-size: 34px;
  line-height: 1;
}

.school-quote-panel { display:grid; grid-template-columns:1.08fr 1fr .8fr; gap:26px; align-items:center; margin:0 14px 30px; padding:25px 28px; border:1.5px solid #2aa5a9; border-radius:14px; background:linear-gradient(90deg,#f3ffff,#f8fcff); }
.quote-intro { display:flex; gap:20px; align-items:flex-start; padding-right:22px;padding-left: 4px; border-right:1px solid #4aa9ad; }

.quote-intro h2 { margin:7px 0 7px; color:#118587; font-size:28px; }
.quote-intro p { margin:0; font-size:15px; line-height:1.65; font-weight:500; }
.quote-details h3 { margin:0 0 8px; color:#118587; font-size:16px; }
.quote-details ol { margin:0; padding-left:25px; font-size:15px; line-height:1.6; }
.quote-details ol>li::marker { color:#118587; font-weight:900; }
.quote-details ul { margin:5px 0 0; padding-left:20px; }
.quote-action-wrap { text-align:center; }
.school-quote-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:0 20px; border-radius:7px; color:#fff !important; background:linear-gradient(90deg,#1746c8,#0f3aac); box-shadow:0 8px 18px rgba(23,70,200,.18); font-size:20px; font-weight:700; text-decoration:none !important; }
/*.quote-action-wrap p { margin:12px 0 0; color:#2f4e9b; font-size:14px; line-height:1.45; }*/
.quote-action-wrap p {
  max-width: 240px;   /* adjust to match the button width */
  margin: 12px 0 0;
  color: #2f4e9b;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.school-includes-section { margin:0 14px 26px; padding:0 24px 18px; border:1px solid #c9d6ee; border-radius:12px; }
.school-includes-section h2 { width:max-content; margin:-16px auto 12px; padding:0 15px; color:var(--mp-deep-blue); background:#fff; font-size:23px; }
.school-includes-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.school-includes-grid>div { display:flex; justify-content:center; align-items:center; gap:13px; min-height:70px; padding:0 13px; border-right:1px solid #c9d6ee; color:var(--mp-deep-blue); font-size:14px; font-weight:700; }
.school-includes-grid>div:last-child { border-right:0; }
.school-includes-grid i,.school-includes-grid svg { color:#2ea64d; font-size:34px; }
.school-includes-grid>div:nth-child(2) i,.school-includes-grid>div:nth-child(2) svg { color:#6d36bd; }
.school-includes-grid>div:nth-child(3) i,.school-includes-grid>div:nth-child(3) svg { color:#2a65cc; }
.school-includes-grid>div:nth-child(4) i,.school-includes-grid>div:nth-child(4) svg { color:var(--mp-orange); }
.school-includes-grid>div:nth-child(5) i,.school-includes-grid>div:nth-child(5) svg { color:#169ca5; }

.school-includes-grid i {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 27px;
  line-height: 1;
  background: color-mix(in srgb, currentColor 10%, white);
}

.school-includes-grid > div:first-child i,
.school-includes-grid > div:first-child svg {
  color: #D05E88;
}

.school-plus-explainer { display:grid; grid-template-columns:1fr 190px; gap:30px; align-items:center; margin:0 14px 28px; padding:20px 24px; border:1px solid #f0c8b4; border-radius:12px; background:#fffaf7; }
.school-plus-explainer h2 { margin:0 0 7px; color:var(--mp-orange); font-size:25px; }
.school-plus-explainer p { margin:0; font-size:17px; line-height:1.65; }
.focused-device-icon { position:relative; justify-self:center; color: var(--mp-orange); font-size:80px; line-height:1; }
.focused-device-icon span { position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); display:grid; place-items:center; width:53px; height:53px; border:7px solid var(--mp-orange); border-radius:50%; color:#6b38b6; background:#fff; font-size:24px; }
.focused-device-icon span::after { content:""; position:absolute; width:68px; height:7px; transform:rotate(-45deg); background:var(--mp-orange); border-radius:6px; }
.school-faq-section { padding-top:0; }

@media (max-width: 900px) {
  .school-hero { grid-template-columns:1fr; gap:22px; }
  .school-options-grid { grid-template-columns:1fr; }
  .school-quote-panel { grid-template-columns:1fr; }
  .quote-intro { border-right:0; border-bottom:1px solid #4aa9ad; padding:0 0 20px; }
  .school-includes-grid { grid-template-columns:repeat(2,1fr); }
  .school-includes-grid>div { border-right:0; border-bottom:1px solid #c9d6ee; }
  .school-plus-explainer { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .school-hero-copy h1 { font-size:43px; }
  .school-option-card { padding:32px 22px 22px; }
  .school-option-heading { align-items:flex-start; }
  .school-icon { flex-basis:58px; width:58px; height:58px; font-size:27px; }
  .school-option-heading h2 { font-size:24px; }
  .school-edition-banner { font-size:12px; padding:8px 15px; }
  .school-includes-grid { grid-template-columns:1fr; }
  .school-includes-grid>div { justify-content:flex-start; }
}

/* ---------- Revision 6: School page left alignment ---------- */
#schoolPlan,
#schoolPlan section,
#schoolPlan article,
#schoolPlan div,
#schoolPlan h1,
#schoolPlan h2,
#schoolPlan h3,
#schoolPlan p,
#schoolPlan ul,
#schoolPlan ol,
#schoolPlan li,
#schoolPlan summary {
  text-align: left;
}

.school-option-card,
.school-option-heading,
.school-option-heading > div,
.quote-intro,
.quote-details,
.quote-action-wrap,
.school-plus-explainer,
.school-faq-section,
.school-faq-section details,
.school-faq-section summary {
  text-align: left;
}

.quote-action-wrap {
  justify-self: end;
  margin-right: 40px;
}



.school-quote-button {
  width: fit-content;
  min-width: 245px;
}

.school-includes-section h2 {
  margin-left: 0;
  margin-right: 0;
}

.school-includes-grid > div {
  justify-content: flex-start;
  text-align: left;
}

.school-faq-section .section-title {
  text-align: left;
}

/* ============================================================
   V7 readability and spacing refinements
   Applied consistently to Family, Classroom, and School panels.
   ============================================================ */

/* Slightly larger small/body text throughout */
.subscription-button { font-size: 18px; }
.buttonS { font-size: 19px; }
.hero-benefits { font-size: 19px; }
.hero-benefits li::before { font-size: 15px; }
.hero-trust { font-size: 19px; }
.price-kicker { font-size: 19px; }
.price-period { font-size: 17px; }
.price-card ul { font-size: 18px; }
.plan-action { font-size: 19px; }
.plus-banner { font-size: 17px; }
.feature-card p { font-size: 16.5px; line-height: 1.55; }
.focused-explainer p { font-size: 20px; }
.shared-login-note { font-size: 17px; }
.faq-grid summary { font-size: 18px; }
.faq-grid p { font-size: 18px; }

/* Narrower hero copy and more breathing room */
.hero-intro { max-width: 550px; }
.subscription-hero { padding-bottom: 20px; }
.pricing-section { padding: 18px 0 20px; }
.features-section { padding: 22px 0 50px; }
.focused-explainer { margin-top: 2px; margin-bottom: 32px; padding: 28px 32px; }
.faq-section { padding: 12px 0 52px; }


/* Consistent icon geometry in the feature row */
.feature-visual {
  width: 70px;
  height: 70px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 42px;
  line-height: 1;
}

/* More comfortable FAQ rows */
.faq-grid summary { padding: 18px 18px; line-height: 1.35; }
.faq-grid p { padding: 0 18px 18px; line-height: 1.6; }

/* School page: maintain full left alignment and match body sizing */
.school-hero { padding-bottom: 56px; }
.school-hero-intro { max-width: 560px; font-size: 21px; line-height: 1.6; }
.school-options-section { padding-bottom: 46px; }
.school-option-heading p { font-size: 19px; }
.school-option-card ul { font-size: 19px; }
.school-option-card li::before { font-size: 15px; }
.school-edition-banner {
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 8px 28px;
  border-radius: 9px;
  font-size: 16px;
  white-space: nowrap;
}
.school-quote-panel { margin-bottom: 46px; padding: 30px 32px; }
.quote-intro p { font-size: 17px; }
.quote-details h3 { font-size: 18px; }
.quote-details ol { font-size: 16px; }
.quote-action-wrap p { font-size: 15px; }
.school-includes-section { margin-bottom: 44px; padding-bottom: 22px; }
.school-includes-section h2 { margin-left: 0; margin-right: 0; }
.school-includes-grid > div { justify-content: flex-start; font-size: 16px; }
.school-plus-explainer { margin-bottom: 44px; padding: 26px 28px; }
.school-plus-explainer p { font-size: 17px; }
#schoolPlan .section-title { text-align: left; }
#schoolPlan .faq-grid summary,
#schoolPlan .faq-grid p { text-align: left; }

/* Footer readability without overpowering the page */
.footer-links,
.site-footer,
#footer { font-size: 14px; }

@media (max-width: 760px) {
  .buttonS { font-size: 16px; }
  .hero-intro { font-size: 20px; }
  .hero-benefits { font-size: 18px; }
  .price-card ul { font-size: 17px; }
  .feature-card p { font-size: 16px; }
  .school-hero-intro { font-size: 19px; }
  .school-option-card ul { font-size: 18px; }
  .school-edition-banner,
  .plus-banner { padding: 8px 16px; font-size: 13px; white-space: nowrap; text-align: center; }
  .hero-copy {
    transform: none;
  }

  .hero-image {
    transform: none;
  }
	
  .school-hero-copy {
    transform: none;
  }

  .school-hero {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Short desktop screens, including many Chromebooks */
@media (min-width: 981px) and (max-height: 820px) {

  .subscription-hero {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    gap: 32px;
  }

  .hero-copy h1 {
    font-size: 56px;
	margin-bottom: 12px;
  }

  .hero-intro {
    font-size: 19px;
    line-height: 1.35;
	margin-bottom: 14px;
  }

  .hero-benefits {
    font-size: 16px;
    gap: 8px;
  }

  .hero-trust {
    font-size: 16px;
	margin-top: 14px;
  }

  .hero-laptop {
    max-width: 560px;
  }

}