/* blog-b.css: five WordPress-era blog posts (how-parents, why-choose, future-of-education, struggling, 7-features).
   Everything is scoped under body.blog-b (shared post chrome) and a per-post class (.post-how-parents, …).
   Mobile-first like main.css: base rules are the 390px layout, then 768px and 1025px. Numbers are the measured
   bboxes in reference/blog__<slug>/{desktop,mobile}.styles.json. */

/* ==========================================================================
   Shared post chrome
   ========================================================================== */
.blog-b { --bb-ink-58: rgba(0, 0, 0, .58); --bb-accent: var(--c-accent); --bb-navy: #11578D; }
.blog-b .accent { color: var(--c-brand); }

/* Header, breadcrumb, meta, hero, rule rows and the inset tutor strip are main.css section 9.15 */
@media (min-width: 1025px) {
  .post-why-choose .breadcrumb { padding-left: 30px; }
}

/* Numbered tip heading: badge image + h2 on one row */
.blog-b .tip__head { display: flex; align-items: center; gap: 13px; }
.blog-b .tip__badge { width: 52px; height: 52px; flex: none; }
.blog-b .tip__title { font-size: 20px; line-height: 26px; }
@media (min-width: 1025px) {
  .blog-b .tip__head { gap: 24px; }
  .blog-b .tip__badge { width: 53px; height: 53px; }
  .blog-b .tip__title { font-size: 25px; line-height: 30px; }
}

/* Tutor section padding (the inset 1330px strip itself is main.css .tutors--post) */
.blog-b .tutors { padding: 26px 0 58px; }
.blog-b .tutors .section-title { margin-inline: 0; }
@media (min-width: 768px) { .blog-b .tutors { padding: 60px 0 80px; } }
@media (min-width: 1025px) { .blog-b .tutors { padding: 74px 0 89px; } }

/* Tutor strip prev/next chevrons: main.css's shared 18px icon renders its ~85%-tall glyph at only ~9x15px, and the
   arrows sit 42px outside the strip; the source's glyph is ~10x18px and sits 9px further in. Desktop only. */
@media (min-width: 1025px) {
  .blog-b .carousel--tutors-post .icon { width: 21px; height: 21px; }
  .blog-b .carousel--tutors-post .carousel__arrow--prev { left: -33px; }
  .blog-b .carousel--tutors-post .carousel__arrow--next { right: -33px; }
}

/* ==========================================================================
   How parents can support their child's online learning (.post-how-parents)
   ========================================================================== */
/* Body copy: the source computes 500, but with only the Book face loaded it renders Book (no synthetic bold
   below 600), so the rebuild stays on 400 to match the screenshots */
.post-how-parents .hp-intro { font: 400 16px/27.2px var(--font-sans); color: rgba(0, 0, 0, .49); margin: 50px 0 0; padding: 0 8px 0 7px; }
/* The real Bold cut is a hair wider than the source's synthetic bold; -.3px keeps the phone line break after “Child’s” */
.post-how-parents .post__title { margin-inline: -2px; text-wrap: wrap; letter-spacing: -.3px; }
.post-how-parents .breadcrumb { padding-right: 17px; }

/* Tip rows: badge and heading top-aligned, the heading nudged down by the measured offset */
.post-how-parents .tip__head { align-items: flex-start; }
.post-how-parents .hp-tip--2 .tip__title { margin-top: 7px; }
.post-how-parents .hp-tip--4 .tip__title { margin-top: 8px; }
.post-how-parents .hp-intro b { color: rgba(0, 0, 0, .66); }
.post-how-parents .hp-guide { font: 400 16px/27.2px var(--font-sans); color: rgba(0, 0, 0, .95); margin-top: 20px; margin-inline: -2px; }
.post-how-parents .hp-text { font: 400 16px/27.2px var(--font-sans); color: var(--bb-ink-58); }
.post-how-parents .hp-text b { color: rgba(0, 0, 0, .7); }

.post-how-parents .hp-tip--1 { padding: 32px 0 42px; }
.post-how-parents .hp-tip--1 .tip__head { padding-left: 3px; }
.post-how-parents .hp-split { display: grid; gap: 17px; margin-top: 30px; }
.post-how-parents .hp-split__img, .post-how-parents .hp-split picture { width: 100%; }
.post-how-parents .hp-split img { width: 100%; height: 238px; object-fit: cover; }

.post-how-parents .hp-tip--2 { padding: 32px 0 40px; background-size: 480px auto; background-repeat: repeat; }
.post-how-parents .hp-tip--2 .container { padding-inline: 16px; }
.post-how-parents .hp-tip--2 .tip__head { gap: 3px; }
.post-how-parents .hp-tip--2 .tip__badge { width: 35px; height: 35px; }
.post-how-parents .hp-routine-title { color: var(--c-text-strong); line-height: 24px; }
/* The orange run is the Medium cut on the source, lighter and narrower than “Establish a”. The source's Circular
   sets about 3% tighter than the self-hosted cut, so the headings below take a small negative tracking to match */
.post-how-parents .hp-routine-title { letter-spacing: -.25px; }
.post-how-parents .hp-routine-title .accent { font-weight: 500; }
.post-how-parents .tutors--post .section-title { letter-spacing: -.45px; }
.post-how-parents .benefits { display: grid; gap: 36px; margin-top: 50px; }
.post-how-parents .benefits__row { display: grid; gap: 36px; }
.post-how-parents .benefit {
  position: relative; margin: 0 9px 0 11px; padding: 0 20px 30px 9px; min-height: 90px;
  background: var(--c-white); border: solid #E3E3E3; border-width: 1px 1px 2px 5px; border-top-color: #E1E1E1;
  border-radius: var(--r-10); box-shadow: 3px 4px 5px rgba(0, 0, 0, .16);
}
/* The first card carries a coral edge instead of the grey one */
.post-how-parents .benefits__row--1 .benefit:first-child { border-color: #E1E1E1 #FEBEBE #FEBEBE; }
.post-how-parents .benefit__icon { display: block; width: 45px; height: 45px; margin-top: -24px; }
.post-how-parents .benefit__icon--tall { width: 54px; height: 62px; }
.post-how-parents .benefit picture { display: block; }
.post-how-parents .benefit__label { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); margin: 10px 0 0 5px; }

.post-how-parents .hp-tip--3 { padding: 15px 16px 20px; }
.post-how-parents .hp-tip__rule { max-width: 351px; margin: 0 auto 35px; }
.post-how-parents .hp-tip--3 .container, .post-how-parents .hp-tip--4 .container, .post-how-parents .hp-conclusion .container { padding-inline: 0; }
.post-how-parents .hp-tip--3 .tip__head, .post-how-parents .hp-tip--4 .tip__head { padding-left: 12px; gap: 10px; }
.post-how-parents .hp-tip--3 .tip__badge, .post-how-parents .hp-tip--4 .tip__badge { width: 48px; height: 48px; }
.post-how-parents .hp-text--partner { line-height: 30.4px; margin: 20px 0 0 10px; }
.post-how-parents .hp-tip--4 { background: #FFFAF4; padding: 32px 16px 31px; }
.post-how-parents .hp-text--screens { margin: 14px 0 0 10px; }
.post-how-parents .hp-conclusion { padding: 32px 16px 52px; }
.post-how-parents .hp-text--conclusion { line-height: 30.4px; }

@media (min-width: 768px) {
  .post-how-parents .post__title { letter-spacing: normal; }
  .post-how-parents .hp-tip--2 { background-size: 100% auto; background-repeat: no-repeat; }
  .post-how-parents .hp-split { grid-template-columns: 341px minmax(0, 1fr); column-gap: 40px; }
  .post-how-parents .hp-split img { height: auto; }
  .post-how-parents .benefits__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 24px; }
  .post-how-parents .benefit { width: 220px; margin: 0; }
  .post-how-parents .hp-tip__rule { max-width: 1117px; }
}
@media (min-width: 1025px) {
  .post-how-parents .post__header { padding-bottom: 49px; }
  .post-how-parents .breadcrumb { padding-left: 20px; }
  .post-how-parents .hp-intro { font-size: 20px; line-height: 30px; text-align: center; margin: 70px auto 0; padding: 0; max-width: 1188px; }
  .post-how-parents .hp-guide { font-size: 23px; line-height: 30px; margin: 20px 0 0 30px; max-width: 1220px; }
  .post-how-parents .hp-guide { margin-left: 30px; }
  .post-how-parents .hp-text { font-size: 20px; line-height: 30px; }

  .post-how-parents .hp-tip--1 { padding: 32px 0 68px; }
  .post-how-parents .hp-tip--1 .tip__head { padding-left: 0; }
  .post-how-parents .tip__title, .post-how-parents .hp-tip--4 .tip__title { margin-top: 8px; }
  .post-how-parents .hp-split { grid-template-columns: 341px 698px; column-gap: 61px; margin: 44px 0 0 20px; }
  .post-how-parents .hp-split img { width: 341px; height: 220px; }

  .post-how-parents .hp-tip--2 { padding: 64px 0 84px; }
  .post-how-parents .hp-tip--2 .container { padding-inline: 0; }
  .post-how-parents .hp-tip--2 .tip__head { gap: 15px; }
  .post-how-parents .hp-tip--2 .tip__title { margin-top: 15px; }
  .post-how-parents .hp-tip--2 .tip__badge { width: 53px; height: 53px; }
  .post-how-parents .post__title { letter-spacing: -.6px; }
  .post-how-parents .hp-routine-title { font-size: 25px; line-height: 32px; letter-spacing: -.3px; }
  .post-how-parents .benefits { gap: 59px; margin-top: 52px; }
  .post-how-parents .benefits__row { gap: 39px; column-gap: 39px; flex-wrap: nowrap; }
  .post-how-parents .benefits__row--2 { transform: translateX(60px); }
  .post-how-parents .benefit { width: 246px; padding: 0 20px 24px 10px; min-height: 104px; border-width: 1px 3px 1px 0; }
  .post-how-parents .benefit__icon { width: 49px; height: 49px; margin-top: -22px; }
  .post-how-parents .benefit__icon--tall { width: 59px; height: 68px; }
  .post-how-parents .benefit__label { font-size: 18px; line-height: 23.4px; margin: 5px 0 0 50px; max-width: 142px; }
  .post-how-parents .benefit__label--narrow { max-width: 112px; }

  .post-how-parents .hp-tip--3 { padding: 15px 0 52px; }
  .post-how-parents .hp-tip__rule { margin-bottom: 35px; }
  .post-how-parents .hp-tip--3 .tip__head, .post-how-parents .hp-tip--4 .tip__head { padding-left: 0; gap: 24px; }
  .post-how-parents .hp-tip--3 .tip__badge, .post-how-parents .hp-tip--4 .tip__badge { width: 53px; height: 53px; }
  .post-how-parents .hp-text--partner { font-size: 20px; line-height: 31px; margin: 14px 0 0 73px; max-width: 1005px; }
  .post-how-parents .hp-tip--4 { padding: 48px 0; }
  .post-how-parents .hp-text--screens { margin: 14px 0 0 78px; max-width: 993px; letter-spacing: -.1px; }
  .post-how-parents .hp-conclusion { padding: 64px 0 84px; }
  .post-how-parents .hp-text--conclusion { font-size: 19px; line-height: 31px; max-width: 1060px; margin-left: 40px; }
  .post-how-parents .tutors--post .section-title { letter-spacing: -.8px; }
}

/* ==========================================================================
   Why choose CTutor? (.post-why-choose)
   ========================================================================== */
/* The source loads a single Circular file (Book, declared weight 100) for this post, so 500 renders as Book and
   600/700 as the browser's synthetic bold of Book, which sets narrower and lighter than the real Bold cut. The
   "Circular Std Book Only" face (main.css section 1) and this --font-sans override reproduce that on this post. */
.post-why-choose { --font-sans: "Circular Std Book Only", "Helvetica Neue", Arial, sans-serif; }
.post-why-choose .post__header { padding-bottom: 49px; }
/* The source wraps both parts in <strong>, i.e. the synthetic bold of Book */
.post-why-choose .post__meta { font-weight: 700; margin-bottom: 44px; }
.post-why-choose .post__meta time { margin-left: 34px; }
.post-why-choose .post__title { margin-inline: -2px; text-wrap: wrap; }
/* Breadcrumb separator: the source's bold black fa-angle-right (the template writes the markup with icon('angle-right')) */
.post-why-choose .breadcrumb [aria-current] .icon { width: 8px; height: 16px; color: #000; }
.post-why-choose .wc-welcome__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); margin: 38px 19px 0; }
.post-why-choose .wc-welcome__text { font: 400 16px/27.2px var(--font-sans); color: var(--bb-ink-58); margin: 22px 19px 0; }

/* Icon + heading row shared by the three feature sections */
.post-why-choose .wc-head { display: flex; align-items: center; gap: 13px; }
.post-why-choose .wc-head picture, .post-why-choose .wc-student-card picture { flex: none; }
.post-why-choose .wc-head__icon { width: 37px; height: auto; }
.post-why-choose .wc-head__title { font: 600 20px/24px var(--font-sans); color: var(--c-text-strong); }

/* Why Students: washed-out classroom photo (#F1F1F1 at 81% over it), four white cards */
.post-why-choose .wc-students {
  padding: 42px 0 17px;
  background: linear-gradient(rgba(241, 241, 241, .81), rgba(241, 241, 241, .81)), var(--bg-image-sm, var(--bg-image)) center / cover no-repeat;
}
.post-why-choose .wc-students .container { --gutter: 8px; }
.post-why-choose .wc-student-cards { display: grid; gap: 21px; margin: 42px -8px 0; }
.post-why-choose .wc-student-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 15px 35px 34px;
  background: var(--c-white); border-radius: var(--r-10); box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.post-why-choose .wc-student-card__icon { width: 59px; height: 59px; flex: none; }
.post-why-choose .wc-student-card__text { font: 600 20px/24px var(--font-sans); color: var(--c-text-strong); text-align: center; }
/* The source's label span is an atomic inline box: a label that wraps ("Get Knowledge Anywhere, Anytime :") pushes
   the description to its own line, a short one keeps it on the same line. */
.post-why-choose .wc-student-card__text .accent { display: inline-block; }

/* Why Teachers: cream cards whose icon overhangs the top edge, and a chalkboard photo */
.post-why-choose .wc-teachers { padding: 42px 0 44px; }
.post-why-choose .wc-head--teachers { margin-left: 8px; }
.post-why-choose .wc-teachers__intro { font: 600 18px/21px var(--font-sans); color: var(--bb-ink-58); margin-top: 15px; }
.post-why-choose .wc-teach-row { display: grid; gap: 42px; }
.post-why-choose .wc-teach-row--1 { margin-top: 30px; }
.post-why-choose .wc-teach-row--2 { margin-top: 40px; gap: 41px; }
.post-why-choose .wc-teach-card { display: flex; flex-direction: column; align-items: center; padding: 0 10px 9px; background: #FAF6F1; border-radius: var(--r-10); }
.post-why-choose .wc-teach-card__icon { width: 140px; height: 140px; margin-top: -50px; }
.post-why-choose .wc-teach-card__title { font: 600 21px/27.3px var(--font-sans); color: #020202; text-align: center; margin-bottom: 15px; }
.post-why-choose .wc-teach-card__rule { width: 19%; height: 2px; border: 0; background: var(--c-accent); margin: 17px 0 0; }
.post-why-choose .wc-teach-card__text { font: 400 18px/21px var(--font-sans); color: var(--bb-ink-58); max-width: 330px; width: 100%; margin: 15px 0 0 20px; }
/* Hassle-Free Payments' one-line caption is centred in its box at every width */
.post-why-choose .wc-teach-row--2 .wc-teach-card:first-child .wc-teach-card__text { text-align: center; }
.post-why-choose .wc-teach-photo { position: relative; height: 180px; }
.post-why-choose .wc-teach-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-10); }

/* What Makes CTutor Different: the peach diagonal PNG shows at its natural 1512px width from the top left */
.post-why-choose .wc-different { padding: 35px 0 30px; background: var(--bg-image) top left / 1512px auto no-repeat; }
.post-why-choose .wc-different .container { --gutter: 16px; }
.post-why-choose .wc-head--different { gap: 7px; }
.post-why-choose .wc-head--different .wc-head__icon { width: 22px; }
.post-why-choose .wc-different__intro { font: 400 18px/24px var(--font-sans); color: var(--c-ink); margin-top: 10px; }
.post-why-choose .wc-different__row { display: grid; justify-items: center; gap: 40px; margin-top: 30px; }
.post-why-choose .wc-different__art { width: 237px; height: 237px; }
.post-why-choose .wc-checklist { display: grid; gap: 19px; justify-self: stretch; padding-left: 10px; margin-right: 10px; }
.post-why-choose .wc-checklist li { display: flex; align-items: flex-start; gap: 16px; font: 400 16px/21px var(--font-sans); color: #11578D; }
.post-why-choose .wc-checklist .icon { width: 17px; height: 17px; margin-top: 3px; }

.post-why-choose .wc-rule-row { padding-inline: 10px; }

/* Our Promise: one peach rounded card */
.post-why-choose .wc-promise { padding: 6px 0 48px; }
.post-why-choose .wc-promise .container { --gutter: 20px; }
.post-why-choose .wc-promise__card { background: var(--c-bg-peach); border-radius: var(--r-20); padding: 19px 20px 33px; }
.post-why-choose .wc-promise__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); }
.post-why-choose .wc-promise__text { font: 400 17px/28.9px var(--font-sans); color: var(--c-ink); margin-top: 22px; }

.post-why-choose .tutors { padding-top: 0; }
.post-why-choose .tutors--post .section-title__accent { font-family: inherit; }

@media (min-width: 768px) {
  .post-why-choose .wc-welcome__title, .post-why-choose .wc-welcome__text { margin-inline: 0; }

  .post-why-choose .wc-student-cards { display: block; margin: 42px 0 0; }
  .post-why-choose .wc-student-card { flex-direction: row; width: 40.96%; padding: 15px 15px 34px; gap: 10px; }
  .post-why-choose .wc-student-card + .wc-student-card { margin-top: 40px; }
  .post-why-choose .wc-student-card:nth-child(odd) { margin-left: 9.84%; }
  .post-why-choose .wc-student-card:nth-child(even) { margin-left: 49.2%; }
  .post-why-choose .wc-student-card__icon { width: 43px; height: 43px; }
  .post-why-choose .wc-student-card__text { font-size: 18px; line-height: 32px; text-align: left; }

  .post-why-choose .wc-teach-row { gap: 20px; }
  .post-why-choose .wc-teach-row--1 { width: 85.6%; margin: 59px 0 0 5.2%; grid-template-columns: 370fr 370fr 290fr; }
  .post-why-choose .wc-teach-row--2 { width: 60.64%; margin: 70px 0 0 18.48%; grid-template-columns: 1fr 1fr; gap: 18px; }
  .post-why-choose .wc-teach-card { padding-bottom: 10px; }
  .post-why-choose .wc-teach-card__icon { width: 112px; height: 112px; margin-top: -59px; }
  .post-why-choose .wc-teach-card__title { font-size: 20px; line-height: 30px; margin-bottom: 14px; }
  .post-why-choose .wc-teachers__intro { font-size: 19px; }
  .post-why-choose .wc-teach-card__text { font-size: 17px; margin-top: 16px; }
  .post-why-choose .wc-different__intro { font-size: 17px; }
  .post-why-choose .wc-teach-photo { height: auto; }

  .post-why-choose .wc-different__row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 31px; }
  .post-why-choose .wc-checklist { gap: 10px; padding-left: 0; margin-right: 0; }
  .post-why-choose .wc-checklist li:not(:last-child) { padding-bottom: 10px; }
  .post-why-choose .wc-checklist li { gap: 20px; font-size: 17px; line-height: 30px; }
  .post-why-choose .wc-checklist .icon { width: 15px; height: 15px; margin-top: 8px; }

}
@media (min-width: 1025px) {
  .post-why-choose .post__meta { margin-bottom: 35px; }
  .post-why-choose .post__meta time { margin-left: 42px; }
  .post-why-choose .wc-welcome__title { font-size: 25px; line-height: 30px; text-align: center; max-width: 1113px; margin: 70px auto 0; }
  .post-why-choose .wc-welcome__text { font-size: 19px; line-height: 30px; text-align: center; max-width: 1113px; margin: 22px auto 0; }

  .post-why-choose .wc-head { align-items: flex-start; gap: 20px; }
  .post-why-choose .wc-head__icon { width: 43px; }
  .post-why-choose .wc-head__title { font-size: 30px; line-height: 32px; }

  .post-why-choose .wc-students { padding: 42px 0 59px; background-image: linear-gradient(rgba(241, 241, 241, .81), rgba(241, 241, 241, .81)), var(--bg-image); }
  .post-why-choose .wc-students .container { --gutter: 20px; }
  .post-why-choose .wc-student-card + .wc-student-card { margin-top: 41px; }

  .post-why-choose .wc-teachers { padding: 74px 0 74px; }
  .post-why-choose .wc-head--teachers { margin-left: 65px; }
  .post-why-choose .wc-head--teachers .wc-head__icon { width: 50px; }
  .post-why-choose .wc-teachers__intro { margin: 12px 0 0 141px; }
  .post-why-choose .wc-teach-row--1 { margin-top: 59px; }
  /* Row 2 is staggered in the source: the card boxes line up, but Hassle-Free Payments' icon, title and (centred)
     line sit 10px below Professional Development's */
  .post-why-choose .wc-teach-row--2 { margin-top: 70px; }
  .post-why-choose .wc-teach-row--2 .wc-teach-card:first-child { padding-top: 10px; }
  .post-why-choose .wc-teach-row--2 .wc-teach-card:last-child .wc-teach-card__text { margin-top: 15px; }

  .post-why-choose .wc-different { padding: 64px 0 80px; }
  .post-why-choose .wc-different .container { --gutter: 20px; }
  .post-why-choose .wc-head--different { gap: 25px; }
  .post-why-choose .wc-head--different .wc-head__icon { width: 43px; }
  .post-why-choose .wc-different__intro { margin: 29px 0 0 91px; max-width: 958px; }
  .post-why-choose .wc-different__row { margin: 60px 0 0 81px; }
  .post-why-choose .wc-different__art { width: 333px; height: 333px; }
  .post-why-choose .wc-checklist li { font-size: 20px; }

  .post-why-choose .wc-rule-row { padding-inline: 0; }

  .post-why-choose .wc-promise { padding: 60px 0 101px; }
  .post-why-choose .wc-promise__card { padding: 20px 20px 33px; }
  .post-why-choose .wc-promise__title { font-size: 25px; line-height: 32px; margin-left: 30px; }
  .post-why-choose .wc-promise__text { font-size: 18px; line-height: 30.6px; text-align: center; margin: 40px 0 0 30px; }

  .post-why-choose .tutors { padding-bottom: 92px; }

  .post-why-choose .breadcrumb ol { font-size: 16px; }
  /* The orange label run is 20px/600 on desktop while the rest of the sentence stays 18px (the source's span rule) */
  .post-why-choose .wc-student-card__text .accent { font-size: 20px; line-height: 32px; }

}

/* ==========================================================================
   The future of education (.post-future)
   ========================================================================== */
.post-future { --fe-orange: var(--c-accent); --fe-yellow: #FFD21F; }
.post-future .post__header { padding-bottom: 15px; }
.post-future .post__title { margin: 70px -2px 0; text-wrap: wrap; }
.post-future .post__meta { margin-bottom: 44px; }
.post-future .fe-intro { font: 400 16px/27.2px var(--font-sans); color: var(--c-text); text-align: center; margin-top: 50px; }

/* Shared block heading + lead */
.post-future .fe-block { padding-top: 18px; }
.post-future .fe-title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); }
.post-future .fe-lead { font: 400 16px/27.2px var(--font-sans); color: var(--bb-ink-58); margin-top: 22px; }
.post-future .fe-card { border: 1px solid var(--fe-yellow); border-radius: var(--r-10); background: var(--c-white); }
.post-future .fe-card__title { font: 400 21px/25.2px var(--font-sans); color: var(--c-ink); }
.post-future .fe-card__text { font: 400 16px/30px var(--font-sans); color: var(--c-text); margin-top: 21px; }
.post-future .fe-callout { font: 600 21px/27.3px var(--font-sans); color: var(--fe-orange); text-align: center; padding: 26px 10px 30px; margin: 0 auto; }

/* Round bullet list (black, or the purple "transformation" variant) */
.post-future .fe-dots { display: grid; gap: 4px; }
.post-future .fe-dots li { position: relative; padding-left: 20px; font: 400 17px/30px var(--font-sans); color: var(--c-ink); }
.post-future .fe-dots li:not(:last-child) { padding-bottom: 5px; }
.post-future .fe-dots li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: var(--r-round); background: currentColor; }
.post-future .fe-dots--purple { gap: 5px; }
.post-future .fe-dots--purple li { color: #630070; line-height: 21px; }
.post-future .fe-dots--purple li:not(:last-child) { padding-bottom: 4px; }
.post-future .fe-dots--purple li::before { top: 5px; }

/* Stat cards */
.post-future .fe-stats { padding: 30px 0 42px; }
.post-future .fe-stats__list { display: grid; gap: 20px; margin: 0 20px; }
.post-future .fe-stat {
  display: grid; row-gap: 10px; padding: 30px; text-align: center; background: var(--c-white);
  border: solid rgba(0, 0, 0, .3); border-width: 1px 1px 4px; border-radius: var(--r-10); box-shadow: -3px 7px 10px rgba(246, 246, 246, .5);
}
.post-future .fe-stat__value { font: 600 24px/30px var(--font-sans); color: var(--fe-orange); }
.post-future .fe-stat__label { font: 400 18px/30px var(--font-sans); color: var(--bb-ink-58); }

/* Digital shift: Key Drivers box */
.post-future .fe-shift { padding-bottom: 10px; }
.post-future .fe-drivers { margin-top: 20px; padding: 30px; background: #FEF2E4; border-radius: var(--r-10); }
.post-future .fe-drivers__title { font: 400 16px/30px var(--font-sans); color: var(--c-ink); }
.post-future .fe-drivers__list { list-style: disc; padding-left: 40px; margin-top: 14px; }
.post-future .fe-drivers__list li { font: 400 17px/30px var(--font-sans); color: var(--c-ink); }

/* Transformation: bordered list card + illustration and quote */
.post-future .fe-transform { padding: 10px 0 34px; }
.post-future .fe-transform__grid { display: grid; gap: 30px; }
.post-future .fe-transform__card { border: 1px solid var(--c-line-card); border-radius: var(--r-10); padding: 20px; }
.post-future .fe-transform__title { font: 600 21px/27.3px var(--font-sans); color: #020202; margin-bottom: 35px; }
.post-future .fe-transform__aside { display: grid; justify-items: center; text-align: center; }
.post-future .fe-transform__art { width: 290px; height: auto; }
.post-future .fe-transform__quote { margin: 20px 0 0; max-width: 301px; font: 400 21px/30px var(--font-sans); color: var(--fe-orange); }

/* Why platforms are here to stay: five yellow-bordered cards + closing note */
.post-future .fe-stay { padding-bottom: 44px; }
.post-future .fe-stay__grid { margin: 30px 10px 0; }
.post-future .fe-stay__cards { display: grid; gap: 27px; }
.post-future .fe-advantage { padding: 20px 20px 34px; }
.post-future .fe-advantage__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.post-future .fe-advantage__icon { width: var(--w-m); height: auto; }
.post-future .fe-stay__note { font: 400 17px/28.9px var(--font-sans); color: var(--c-text); margin-top: 26px; padding-inline: 10px; }

/* Tech: purple gradient cards around a photo */
.post-future .fe-tech { padding-bottom: 30px; }
.post-future .fe-tech__grid { display: flex; flex-direction: column; gap: 20px; margin-top: 49px; }
.post-future .fe-tech__col { display: grid; gap: 20px; margin-inline: 10px; }
.post-future .fe-tech__photo { width: 308px; height: auto; margin: -9px auto 0; }
.post-future .fe-tech-card { display: flex; flex-direction: column; padding: 5px; border-radius: var(--r-10); background: linear-gradient(78deg, #7E40E2 0%, #7B0C63 100%); color: var(--c-white); }
.post-future .fe-tech-card__icon { width: 40px; height: auto; }
.post-future .fe-tech-card__title { font: 400 20px/24px var(--font-sans); margin-top: 18px; }
.post-future .fe-tech-card__text { font: 400 14px/20px var(--font-sans); margin-top: 16px; }

/* Personalised learning: list + speech bubble */
.post-future .fe-personal { padding-bottom: 14px; }
.post-future .fe-personal__grid { display: grid; margin-top: 30px; }
.post-future .fe-personal .fe-dots { margin-left: 10px; }
.post-future .fe-bubble {
  margin-top: 30px; padding: 10px 10px 26px; text-align: center;
  font: 600 21px/27.3px var(--font-sans); color: var(--fe-orange);
  background: var(--bg-image) center / 100% 100% no-repeat;
}

/* Educators: orange tags + watermark quote */
.post-future .fe-educators { padding-bottom: 4px; }
.post-future .fe-educators__list { display: grid; gap: 20px; margin-top: 20px; }
.post-future .fe-educator { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.post-future .fe-educator__tag {
  display: grid; place-items: center; width: 85px; height: 52px; border-radius: var(--r-10);
  background: var(--c-brand); color: var(--c-white); font: 500 16px/16px var(--font-sans); box-shadow: var(--shadow-card);
}
.post-future .fe-educator__text { font: 400 17px/30px var(--font-sans); color: var(--c-ink); }
.post-future .fe-educators__aside {
  display: grid; place-items: center; margin-top: 30px; padding: 20px 10px 30px;
  background:
    linear-gradient(rgba(255, 255, 255, .73), rgba(255, 255, 255, .73)),
    var(--arc) center / cover no-repeat;
}
.post-future .fe-educators__quote { font: 600 18px/30px var(--font-sans); color: var(--fe-orange); text-align: center; max-width: 350px; }
.post-future .fe-educators__quote strong { font-weight: 600; }

/* Rural India: orange-edged cards */
.post-future .fe-rural { padding-bottom: 19px; }
.post-future .fe-rural__grid { display: grid; gap: 39px; margin: 29px 10px 0; }
.post-future .fe-rural__card {
  display: flex; align-items: center; min-height: 98px; padding: 10px;
  border: solid var(--c-brand); border-width: 0 1px 0 5px; border-radius: var(--r-10); box-shadow: -2px 0 4px var(--c-brand);
}
.post-future .fe-rural__card:nth-child(3) { margin-top: -20px; }
.post-future .fe-rural__card p { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); margin: 0 0 14px 5px; }

/* Government band */
.post-future .fe-gov { margin-top: 50px; padding: 28px 0 20px; background: var(--c-bg-cream-3); }
.post-future .fe-gov__text { font: 400 16px/27.2px var(--font-sans); color: rgba(0, 0, 0, .74); margin-top: 12px; }

/* Lifelong learning: three yellow-bordered cards */
.post-future .fe-skills { margin-top: 20px; }
.post-future .fe-skills__grid { display: grid; gap: 26px; margin: 31px 10px 0; }
.post-future .fe-skill { padding: 11px 20px 24px; text-align: center; }
.post-future .fe-skill__head { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.post-future .fe-skill__icon { width: var(--w-m); height: auto; }
.post-future .fe-callout--skills { padding-top: 47px; }

/* Hybrid future: four columns split by orange rules */
.post-future .fe-hybrid { margin-top: 20px; padding-bottom: 10px; }
.post-future .fe-hybrid__grid { margin: 21px 0 0; }
.post-future .fe-hybrid__item { padding: 20px 20px 34px; }
.post-future .fe-hybrid__item + .fe-hybrid__item { margin-top: 20px; }
.post-future .fe-hybrid__item:not(:last-child) { border-bottom: 1px solid var(--fe-orange); }
.post-future .fe-hybrid__icon { width: 39px; height: auto; }
.post-future .fe-hybrid__title { font: 400 21px/27.3px var(--font-sans); color: var(--c-ink); margin-top: 18px; }
.post-future .fe-hybrid__text { font: 400 16px/30px var(--font-sans); color: var(--c-text); margin-top: 21px; }

/* The Future is Here */
.post-future .fe-here { padding: 5px 0 21px; }
.post-future .fe-here .container { --gutter: 20px; }
.post-future .fe-here__card { background: var(--c-bg-peach); border-radius: var(--r-20); padding: 30px 30px 43px; }
.post-future .fe-here__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); text-align: center; }
.post-future .fe-here__text { font: 400 17px/28.9px var(--font-sans); color: var(--fe-orange); margin-top: 21px; }

/* FAQ */
.post-future .fe-faq { padding-bottom: 70px; }
.post-future .fe-faq__title { font: 400 19px/22.8px var(--font-sans); color: var(--c-ink); text-align: center; margin-inline: -10px; }
.post-future .fe-faq .accordion { margin: 38px -10px 0; }
.post-future .fe-faq .accordion__trigger { padding: 16px 30px 16px 31px; }
.post-future .fe-faq .accordion__panel { padding: 29px 30px 30px; }
/* Open question: the source swaps the chevron for a thin dark up-arrow instead of rotating it orange */
.post-future .fe-faq .accordion__trigger[aria-expanded="true"] .icon { display: none; }
.post-future .fe-faq .accordion__trigger[aria-expanded="true"]::after {
  content: ""; flex: none; width: 12px; height: 18px; background: var(--c-text-strong);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 17.5V1.2M.8 6.4 6 1.2l5.2 5.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 768px) {
  .post-future .fe-stats__list { grid-template-columns: repeat(3, minmax(0, 338px)); justify-content: center; gap: 20px; margin: 0; }
  .post-future .fe-transform__grid { grid-template-columns: minmax(0, 499px) minmax(0, 1fr); gap: 21px; align-items: start; }
  .post-future .fe-stay__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .post-future .fe-stay__grid { position: relative; }
  .post-future .fe-stay__note { position: absolute; top: calc(50% + 41px); left: calc((100% - 80px) / 3 * 2 + 96px); right: 0; margin: 0; padding: 0; }
  .post-future .fe-tech__grid { display: grid; grid-template-columns: minmax(0, 364fr) minmax(0, 350fr) minmax(0, 344fr); align-items: center; gap: 26px; margin: 49px 10px 0; }
  .post-future .fe-tech__col { margin: 0; }
  .post-future .fe-tech__photo { width: 100%; margin: 0; }
  .post-future .fe-personal__grid { grid-template-columns: minmax(0, 1fr) 343px; align-items: end; gap: 30px; margin-top: 30px; }
  .post-future .fe-bubble { margin: 0; }
  .post-future .fe-educators__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 570px); align-items: center; gap: 20px; }
  .post-future .fe-rural__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; margin-top: 26px; }
  .post-future .fe-rural__card:nth-child(3) { margin-top: 0; }
  .post-future .fe-rural__card:nth-child(odd) { border-width: 1px 0 1px 3px; }
  .post-future .fe-rural__card:nth-child(even) { border-width: 1px 7px 1px 0; }
  .post-future .fe-skills__grid { grid-template-columns: repeat(3, minmax(0, 326px)); justify-content: center; gap: 42px; }
  .post-future .fe-hybrid__grid { display: grid; grid-template-columns: 26fr 29fr 29fr 29fr; margin: 20px 10px 0; }
  .post-future .fe-hybrid__item { padding: 20px 20px 34px 40px; }
  .post-future .fe-hybrid__item:first-child { padding-left: 10px; }
  .post-future .fe-hybrid__item + .fe-hybrid__item { margin-top: 0; }
  .post-future .fe-hybrid__item:not(:last-child) { border-bottom: 0; border-right: 1px solid var(--fe-orange); }
  .post-future .fe-faq__title { text-align: left; margin-inline: 0; }
  .post-future .fe-faq .accordion { margin-inline: 0; }
  .post-future .fe-educators__aside {
    background:
      linear-gradient(rgba(255, 255, 255, .73), rgba(255, 255, 255, .73)),
      var(--wordmark) top center / contain no-repeat,
      var(--arc) center / cover no-repeat;
  }

}
@media (min-width: 1025px) {
  .post-future .post__header { padding-bottom: 14px; }
  .post-future .post__title { margin: 80px 0 0 40px; max-width: 1210px; text-align: left; text-wrap: wrap; }
  .post-future .post__meta { margin-bottom: 34px; }
  .post-future .fe-intro { font-size: 19px; line-height: 30px; color: var(--c-text); text-align: left; max-width: 1188px; margin-top: 40px; }

  .post-future .fe-title { font-size: 25px; line-height: 30px; }
  .post-future .fe-lead { font-size: 19px; line-height: 30px; }
  .post-future .fe-card__title { font-size: 25px; line-height: 30px; }
  .post-future .fe-card__text { font-size: 18px; }
  .post-future .fe-callout { font-size: 22px; line-height: 38px; max-width: 824px; padding: 10px 0 30px; }

  .post-future .fe-stats { padding: 60px 0 40px; }
  .post-future .fe-stat__value { font-size: 26px; }
  .post-future .fe-stat__label { font-size: 21px; }

  .post-future .fe-shift { padding-bottom: 21px; }
  .post-future .fe-drivers { margin: 30px 10px 0; }
  .post-future .fe-drivers__title { font-size: 22px; }
  .post-future .fe-drivers__list li { font-size: 16px; }

  .post-future .fe-transform { padding: 20px 0; }
  .post-future .fe-transform__grid { padding-inline: 30px; }
  .post-future .fe-transform__card { display: flex; flex-direction: column; justify-content: center; min-height: 399px; padding: 0 60px; margin-left: -20px; }
  .post-future .fe-transform__title { font-size: 24px; line-height: 30px; }
  .post-future .fe-dots--purple { gap: 4px; }
  .post-future .fe-dots--purple li { line-height: 30px; }
  .post-future .fe-dots--purple li:not(:last-child) { padding-bottom: 5px; }
  .post-future .fe-dots--purple li::before { top: 9px; }
  .post-future .fe-transform__aside { padding-top: 10px; }
  .post-future .fe-transform__art { width: 319px; }
  .post-future .fe-transform__quote { font-size: 22px; max-width: 429px; }

  .post-future .fe-stay { padding-bottom: 19px; }
  .post-future .fe-stay__grid { margin-top: 28px; }
  .post-future .fe-advantage { padding: 22px 30px 34px; }
  .post-future .fe-advantage__head { flex-direction: row; align-items: center; gap: 13px; }
  .post-future .fe-advantage__icon { width: var(--w); }
  .post-future .fe-advantage .fe-card__text { margin-top: 19px; max-width: 250px; }
  .post-future .fe-stay__note { font-size: 19px; line-height: 30px; max-width: 301px; }

  .post-future .fe-tech { padding-bottom: 20px; }
  .post-future .fe-tech-card { flex-direction: row; align-items: center; gap: 27px; padding: 9px 20px 9px 5px; }
  .post-future .fe-tech-card__icon { flex: none; }
  .post-future .fe-tech-card picture { flex: none; }
  .post-future .fe-tech-card__title { font-size: 18px; line-height: 21.6px; margin-top: 0; }
  /* Source offsets: text sits 4px low in every card, the right column 9px higher, per-card icon indents */
  .post-future .fe-tech-card__body { position: relative; top: 4px; }
  .post-future .fe-tech-card__text { margin-top: 17px; }
  .post-future .fe-tech__col:first-child .fe-tech-card:nth-child(2) { padding-left: 15px; gap: 23px; }
  .post-future .fe-tech__col:last-child { position: relative; top: -9px; }
  .post-future .fe-tech__col:last-child .fe-tech-card:first-child { padding-left: 27px; gap: 14px; }
  .post-future .fe-tech__col:last-child .fe-tech-card:last-child { padding-left: 3px; gap: 18px; }
  .post-future .fe-tech__photo { position: relative; top: -9px; left: -8px; width: 350px; }

  .post-future .fe-personal { padding-bottom: 30px; }
  .post-future .fe-personal .fe-dots { margin-left: 20px; }
  .post-future .fe-personal__grid { margin-right: 114px; }
  .post-future .fe-bubble { padding: 26px 15px 34px; font-size: 19px; line-height: 32px; }

  .post-future .fe-educators { padding-bottom: 20px; }
  .post-future .fe-educators__list { margin: 30px 0 0 10px; }
  .post-future .fe-educator { flex-direction: row; align-items: center; }
  .post-future .fe-educator__tag { width: 125px; height: 54px; font-size: 18px; line-height: 18px; }
  .post-future .fe-educators__aside { min-height: 270px; margin: 0; padding: 0; }
  .post-future .fe-educators__quote { font-size: 21px; max-width: 348px; }

  .post-future .fe-rural { padding-bottom: 21px; }
  .post-future .fe-rural__grid { grid-template-columns: 540px 544px; }
  .post-future .fe-rural__card p { font-size: 18px; line-height: 30px; margin-left: 30px; }

  .post-future .fe-gov { padding: 28px 0 30px; }
  .post-future .fe-gov__text { font-size: 19px; line-height: 30px; margin-top: 11px; }

  .post-future .fe-skills { margin-top: 30px; }
  .post-future .fe-skills__grid { margin-top: 30px; }
  .post-future .fe-skill { padding: 22px 20px 34px; }
  .post-future .fe-skill__head { flex-direction: row; justify-content: center; gap: 22px; min-height: 51px; }
  .post-future .fe-skill__icon { width: var(--w); }
  .post-future .fe-skill .fe-card__text { margin: 7px auto 0; max-width: 226px; }
  .post-future .fe-callout--skills { font-size: 23px; line-height: 32px; max-width: none; padding: 31px 0 30px; }

  .post-future .fe-hybrid__icon { width: 62px; }
  .post-future .fe-hybrid__title { font-size: 22px; line-height: 26.4px; margin-top: 19px; }
  .post-future .fe-hybrid__text { max-width: 229px; }

  .post-future .fe-here { padding: 60px 0 21px; }
  .post-future .fe-here__card { padding: 30px 30px 44px; }
  .post-future .fe-here__title { font-size: 25px; line-height: 32px; }
  .post-future .fe-here__text { font-size: 22px; line-height: 37.4px; text-align: center; max-width: 785px; margin: 40px auto 0; }

  .post-future .tutors { padding-top: 50px; padding-bottom: 91px; }

  .post-future .fe-faq__title { font-size: 25px; line-height: 32px; }
  .post-future .fe-faq .accordion { margin-top: 40px; }
  .post-future .fe-faq .accordion__trigger { padding: 14px 30px 14px 32px; }
  .post-future .fe-faq .accordion__panel { padding: 30px 30px 30px 65px; }

}

/* ==========================================================================
   Struggling to find a tutor? 10 tips (.post-struggling); its shared-chrome overrides also cover .post-seven
   ========================================================================== */
/* The source loads only its own Circular Book file (a TrueType build, declared weight 100), so 500 renders as Book
   and 600/700 as the browser's synthetic bold of Book, lighter and narrower than the real Bold cut. "Circular Std
   Source Book" (main.css section 1) is that file as a single face; the CFF CircularStd-Book.woff2 renders visibly
   darker on Windows at body sizes. */
.post-struggling { --font-sans: "Circular Std Source Book", "Helvetica Neue", Arial, sans-serif; --st-line: rgba(0, 0, 0, .3); --st-peach: #FFF5E9; }
.post-struggling .post__header { padding: 48px 0 10px; }
.post-struggling .breadcrumb li + li { margin-top: 0; }
.post-struggling .post__title { margin: 70px -2px 0; text-wrap: wrap; }
.post-struggling .post__meta { margin-bottom: 24px; }
.post-struggling .st-intro { font: 400 16px/27.2px var(--font-sans); color: var(--c-text); text-align: center; margin-bottom: 45px; }
.post-struggling .st-glyph { display: block; flex: none; color: var(--c-ink); fill: currentColor; }

/* Stat cards */
.post-struggling .st-stats { padding: 60px 0 41px; }
.post-struggling .st-stats__list { display: grid; gap: 26px; margin: 0 20px; }
.post-struggling .st-stat { display: flex; flex-direction: column; align-items: center; padding: 21px 20px 18px; border: 1px solid var(--st-line); border-radius: var(--r-10); text-align: center; }
.post-struggling .st-stat__icon { width: 55px; height: auto; }
.post-struggling .st-stat__label { font: 600 21px/30px var(--font-sans); color: var(--c-ink); margin-top: -4px; }
.post-struggling .st-stat__sub { font: 400 17px/30px var(--font-sans); color: var(--c-text); margin-top: 20px; }

/* Tip head: badge, title, optional description */
.post-struggling .st-tip { padding: 10px 0 20px; }
.post-struggling .tutors--post .tutors__strip { margin-top: 21px; }
.post-struggling .st-head__badge { display: block; width: var(--w-m); height: var(--w-m); }
.post-struggling .st-head__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); margin-top: 18px; letter-spacing: -.3px; }
.post-struggling .st-head__desc { font: 400 16px/27.2px var(--font-sans); color: var(--bb-ink-58); margin-top: 22px; }

/* One-line takeaways (plain, orange or on a peach pill) */
.post-struggling .st-recap { padding: 26px 0 30px; }
.post-struggling .st-recap .container { --gutter: 10px; }
.post-struggling .st-recap__text { font: 400 21px/27.3px var(--font-sans); color: var(--c-ink); text-align: center; max-width: 1120px; margin: 0 auto; }
.post-struggling .st-recap--orange .st-recap__text, .post-struggling .st-recap--orange-wide .st-recap__text { color: var(--c-accent); }
.post-struggling .st-recap--pill { padding: 20px 0 21px; }
.post-struggling .st-recap--pill .container { --gutter: 20px; }
.post-struggling .st-recap--pill .st-recap__text { max-width: none; padding: 20px; background: var(--st-peach); border-radius: var(--r-10); }

/* Split rows (list + photo) */
.post-struggling .st-split { display: grid; }
.post-struggling .st-photo { display: block; object-fit: cover; border-radius: var(--r-10); }
.post-struggling .st-split__text { margin-top: 40px; padding-inline: 10px; }
.post-struggling .st-split__lead { font: 400 17px/28.9px var(--font-sans); color: var(--c-text); }
.post-struggling .st-bullets { list-style: disc; padding-left: 40px; margin-top: 12px; }
.post-struggling .st-bullets li { font: 400 17px/29px var(--font-sans); color: var(--c-ink); }
/* Icon-list text: the dump names the li's 17px, but the text span renders 16px on phones and 19px above 1024 */
.post-struggling .st-checks { display: grid; gap: 2px; margin-top: 14px; }
.post-struggling .st-checks li { display: flex; align-items: flex-start; gap: 15px; min-height: 33px; font: 400 16px/30px var(--font-sans); color: var(--c-text); }
.post-struggling .st-checks .st-glyph { width: 20px; height: 20px; margin-top: 5px; color: var(--c-ink); }

/* Tip 1: goal rows + photo */
.post-struggling .st-split--goals { margin-top: 30px; }
.post-struggling .st-goals { display: grid; gap: 21px; margin: 0 10px; }
.post-struggling .st-goal { display: flex; align-items: flex-start; gap: 16px; padding: 18px 10px 16px 10px; background: var(--st-peach); border-radius: var(--r-8); }
.post-struggling .st-goal__icon { width: 40px; height: 40px; margin-top: -8px; }
.post-struggling .st-goal__text { font: 400 16px/24px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-photo--goals { width: calc(100% - 20px); height: 241px; margin: 41px 10px 0; }

/* Tip 2: two question cards */
/* Both cards share one height (204px on phones, 147px above 1024) with the content centred; the titles keep the
   source's different line boxes (35px / 26.4px), which set where each answer starts. */
.post-struggling .st-asks { display: grid; grid-auto-rows: 1fr; gap: 26px; margin: 30px 10px 0; }
.post-struggling .st-ask { display: flex; flex-direction: column; justify-content: center; padding: 10px 10px 13px; text-align: center; border: 1px solid var(--st-line); border-radius: var(--r-8); box-shadow: 0 4px 8px rgba(0, 0, 0, .2); }
.post-struggling .st-ask__head { display: flex; flex-direction: column; align-items: center; gap: 23px; }
.post-struggling .st-ask__title { font: 400 22px/35px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-ask + .st-ask .st-ask__title { line-height: 26.4px; }
.post-struggling .st-ask__text { font: 400 16px/30px var(--font-sans); color: var(--c-text); margin-top: 27px; }
.post-struggling .st-ask + .st-ask .st-ask__text { margin-top: 26.6px; }

/* Tip 3: online vs in-person columns */
.post-struggling .st-tip--3 { padding-bottom: 14px; }
.post-struggling .st-modes { margin-top: 20px; }
.post-struggling .st-mode { padding: 11px 0 9px 10px; }
.post-struggling .st-mode:first-child { border-right: 1px solid var(--c-accent); }
.post-struggling .st-mode + .st-mode { margin-top: 21px; }
.post-struggling .st-mode__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.post-struggling .st-mode__icon { width: 50px; height: 50px; }
.post-struggling .st-mode__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-mode__list { list-style: disc; padding-left: 0; }
.post-struggling .st-mode__list li { font: 400 17px/30px var(--font-sans); color: var(--c-ink); }

/* Tip 4 */
.post-struggling .st-tip--4 { padding-bottom: 40px; }
.post-struggling .st-split--style { margin-top: 51px; }
.post-struggling .st-photo--style { width: 308px; height: 178px; margin: 0 auto; }

/* Tip 5: rates table + perk cards */
.post-struggling .st-tip--5 { padding-bottom: 26px; }
.post-struggling .st-rates { max-width: none; margin: 4px 0 0; border-color: var(--st-line); border-radius: var(--r-8); overflow: hidden; }
.post-struggling .st-rates table { min-width: 0; }
.post-struggling .st-rates th, .post-struggling .st-rates td { border-color: var(--st-line); padding: 11px 10px; }
.post-struggling .st-rates th { font: 600 18px/28px var(--font-sans); }
.post-struggling .st-rates td { font: 400 15px/21px var(--font-sans); }
.post-struggling .st-rates th:first-child { width: 58%; }
.post-struggling .st-rates thead th { border-bottom: 1px solid var(--st-line); }
.post-struggling .st-perks { display: grid; gap: 26px; margin: 40px 10px 0; }
.post-struggling .st-perk { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 31px 20px 28px; border: 1px solid var(--st-line); border-radius: var(--r-8); font: 400 16px/18px var(--font-sans); color: var(--c-text); }
.post-struggling .st-perk__icon { width: 52px; height: auto; }

/* Tips 6 and 10: three bordered cards */
.post-struggling .st-cards { display: grid; gap: 25px; margin: 30px 10px 0; }
.post-struggling .st-card { text-align: center; border: 1px solid #FFD21F; border-radius: var(--r-10); padding: 20px 20px 24px; }
.post-struggling .st-card--grey { border-color: var(--st-line); border-radius: var(--r-8); }
.post-struggling .st-card__head { display: flex; flex-direction: column; align-items: center; gap: 23px; }
.post-struggling .st-card__title { font: 400 21px/25.2px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-card__text { font: 400 16px/27.2px var(--font-sans); color: var(--c-text); margin-top: 31px; }

/* Tip 7 */
.post-struggling .st-split--reviews { margin-top: 51px; }
.post-struggling .st-photo--reviews { width: 308px; height: 240px; margin: 0 auto; }
.post-struggling .st-split--reviews .st-split__lead { font-size: 20px; line-height: 30px; }

/* Tip 8: orange-edged question cards */
.post-struggling .st-questions { display: grid; gap: 22px; margin: 48px 15px 0 20px; }
.post-struggling .st-question { padding: 20px 20px 25px 25px; border-left: 5px solid var(--c-brand); border-radius: var(--r-10); box-shadow: -3px 3px 6px rgba(255, 92, 0, .8); }
.post-struggling .st-question__title { font: 400 21px/25.2px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-question__text { font: 400 16px/30px var(--font-sans); color: var(--c-text); margin-top: 22px; }

/* Tip 9: bordered checklist card + target */
.post-struggling .st-tip--9 { padding-bottom: 35px; }
.post-struggling .st-trial { margin-top: 40px; }
.post-struggling .st-trial__card { padding: 21px 21px 22px; border: 1px solid var(--c-ink); border-radius: var(--r-8); }
.post-struggling .st-trial__lead, .post-struggling .st-trial__intro { font: 400 18px/32.4px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-trial__lead strong { font-weight: 700; letter-spacing: -.4px; }
.post-struggling .st-trial__intro { color: var(--c-text); margin-top: 15px; }
.post-struggling .st-checks--trial { margin-top: 15px; gap: 0; }
.post-struggling .st-checks--trial li { gap: 10px; min-height: 0; line-height: 27px; }
.post-struggling .st-checks--trial .st-glyph { width: 13px; height: 13px; margin-top: 7px; }
.post-struggling .st-trial__aside { margin-top: 30px; text-align: center; }
.post-struggling .st-trial__target { display: block; margin: 0 auto; }
.post-struggling .st-trial__title { font: 400 21px/27.3px var(--font-sans); color: var(--c-ink); margin-top: 34px; }
.post-struggling .st-trial__text { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); margin-top: 15px; }

/* Tip 10 */
.post-struggling .st-progress { gap: 27px; margin-top: 51px; }
.post-struggling .st-progress__item { padding: 21px 20px 32px; }
.post-struggling .st-progress__icon { display: flex; align-items: center; justify-content: center; height: 50px; }
.post-struggling .st-progress__label { font: 400 21px/27.3px var(--font-sans); color: var(--c-ink); margin-top: 10px; }
.post-struggling .st-progress__sub { font: 400 16px/30px var(--font-sans); color: var(--bb-ink-58); margin-top: 24px; }

/* Closing CTA band */
.post-struggling .st-cta { padding: 48px 0 64px; background: var(--c-bg-cream-2); text-align: center; }
.post-struggling .st-cta .container { --gutter: 8px; }
.post-struggling .st-cta__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); }
.post-struggling .st-cta__text { font: 400 16px/27.2px var(--font-sans); color: var(--c-text); margin: 25px auto 20px; max-width: 844px; }

/* FAQ */
.post-struggling .st-faq { padding: 70px 0 73px; }
.post-struggling .st-faq__title { font: 600 22px/26.4px var(--font-sans); color: var(--c-ink); text-align: center; margin-inline: -10px; }
.post-struggling .st-faq .accordion { margin: 41px -10px 0; }
.post-struggling .st-faq .accordion__trigger { gap: 2px; padding: 15px 31px 15px 31px; }
.post-struggling .st-faq .accordion__panel { padding: 30px 30px 29px; }
/* The source's thin ElementsKit glyphs in black (12px on phones, 20px from 768): a down chevron on closed questions,
   an up arrow on the open one */
.post-struggling .st-faq .accordion__trigger .icon { display: none; }
.post-struggling .st-faq .accordion__trigger::after {
  content: ""; flex: none; width: var(--st-faq-icon, 12px); height: var(--st-faq-icon, 12px); background: var(--c-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 1024 1024'%3E%3Cpath transform='scale(1 -1)' d='M1011 688Q997 703 976.5 703.5Q956 704 942 690L512 283L82 690Q68 704 47.5 703.5Q27 703 13 688Q-1 673 0 653Q1 633 15 619L478 180Q485 174 494 170.5Q503 167 512 167Q521 167 529.5 170.5Q538 174 546 180L1009 619Q1023 633 1024 653Q1025 673 1011 688Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.post-struggling .st-faq .accordion__trigger[aria-expanded="true"]::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 1024 1024'%3E%3Cpath transform='scale(1 -1)' d='M861 613Q872 602 872 587Q872 572 861 561Q851 551 836 551Q821 551 810 561L548 823V-41Q548 -56 537.5 -66.5Q527 -77 512 -77Q497 -77 486.5 -66.5Q476 -56 476 -41V823L214 561Q204 551 188.5 551Q173 551 163 561Q152 572 152 587Q152 602 163 613L486 937Q497 947 512 947Q527 947 538 937L861 613Z'/%3E%3C/svg%3E");
}

/* The carousel heading's accent keeps Circular; the breadcrumb separator is the source's bold black angle */
:is(.post-struggling, .post-seven) .tutors--post .section-title__accent { font-family: inherit; }
:is(.post-struggling, .post-seven) .breadcrumb [aria-current] .icon { width: 8px; height: 16px; color: #000; }

@media (min-width: 768px) {
  .post-struggling .st-stats__list { grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: center; gap: 20px; margin: 0; }
  .post-struggling .st-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .post-struggling .st-head__badge { grid-row: 1 / span 2; }
  .post-struggling .st-head__title { margin-top: 8px; }
  .post-struggling .st-head__desc { grid-column: 2; }
  .post-struggling .st-split { align-items: center; }
  .post-struggling .st-split__text { margin-top: 0; padding: 0; }
  .post-struggling .st-split--goals { grid-template-columns: minmax(0, 564fr) minmax(0, 450fr); column-gap: 40px; align-items: start; }
  .post-struggling .st-goals { margin: 0; }
  .post-struggling .st-photo--goals { width: 100%; margin: 0; }
  .post-struggling .st-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 42px; margin-inline: 0; }
  .post-struggling .st-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-struggling .st-mode + .st-mode { margin-top: 0; padding-left: 30px; }
  .post-struggling .st-split--style { grid-template-columns: minmax(0, 466fr) minmax(0, 451fr); column-gap: 40px; }
  .post-struggling .st-photo--style { width: 100%; }
  .post-struggling .st-perks { grid-template-columns: repeat(4, minmax(0, 186px)); justify-content: center; gap: 20px; margin-inline: 0; }
  .post-struggling .st-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-inline: 0; }
  .post-struggling .st-split--reviews { grid-template-columns: minmax(0, 385fr) minmax(0, 438fr); column-gap: 40px; }
  .post-struggling .st-photo--reviews { width: 100%; }
  .post-struggling .st-questions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-inline: 5px 0; }
  .post-struggling .st-trial { display: grid; grid-template-columns: minmax(0, 578fr) minmax(0, 347fr); column-gap: 60px; align-items: center; }
  .post-struggling .st-trial__aside { margin-top: 0; }
  .post-struggling .st-faq__title { text-align: left; margin-inline: 0; }
  .post-struggling .st-faq .accordion { margin-inline: 0; --st-faq-icon: 20px; }
  .post-struggling .st-faq .accordion__trigger { gap: 20px; padding-right: 30px; }

}
@media (min-width: 1025px) {
  .post-struggling .post__header { padding: 32px 0 0; }
  .post-struggling .post__title { margin: 80px auto 0; font-size: 38px; line-height: 45.6px; }
  .post-struggling .post__meta { margin-bottom: 34px; }
  .post-struggling .st-intro { font-size: 19px; line-height: 30px; max-width: 925px; margin: 0 auto 35px; }

  .post-struggling .st-stats { padding: 60px 0 74px; }
  .post-struggling .st-stats__list { gap: 54px; }
  .post-struggling .st-stat { padding: 31px 20px 29px; }
  .post-struggling .st-stat__icon { width: 41px; }
  .post-struggling .st-stat__label { font-size: 22px; margin-top: 10px; }
  .post-struggling .st-stat__sub { margin-top: 10px; }

  .post-struggling .st-head__badge { width: var(--w); height: var(--w); }
  .post-struggling .st-head__title { font-size: 25px; line-height: 30px; letter-spacing: 0; }
  .post-struggling .st-head__desc { font-size: 19px; line-height: 30px; }

  .post-struggling .st-recap { padding: 10px 0 30px; }
  .post-struggling .st-recap__text { line-height: 32px; }
  .post-struggling .st-recap--orange-wide .st-recap__text { max-width: 885px; line-height: 35px; }
  .post-struggling .st-recap--pill { padding: 19px 0 22px; }
  .post-struggling .st-recap--pill .st-recap__text { line-height: 21px; padding: 20px 20px 19px; }

  .post-struggling .st-tip--1 { padding-bottom: 30px; }
  .post-struggling .st-split--goals { grid-template-columns: 564px 450px; margin: 40px 0 0 66px; }
  .post-struggling .st-goals { gap: 22px; }
  .post-struggling .st-goal { padding: 18px 20px 16px 30px; }
  .post-struggling .st-goal__icon { width: 26px; height: 26px; margin-top: -8px; }
  .post-struggling .st-goal__text { font-size: 18px; }
  .post-struggling .st-photo--goals { width: 450px; }

  .post-struggling .st-tip--2 { padding-bottom: 29px; }
  .post-struggling .st-asks { grid-template-columns: 484px 474px; margin: 39px 0 0 70px; }
  .post-struggling .st-asks { margin-top: 40px; }
  .post-struggling .st-ask { padding: 10px 20px 14px; }
  /* Icon beside the title, 8px above it and out of the line box, so the answer hangs 27px under the title */
  .post-struggling .st-ask__head { flex-direction: row; justify-content: center; align-items: flex-start; gap: 15px; }
  .post-struggling .st-ask__head .st-glyph { margin-bottom: -20px; }
  .post-struggling .st-ask__title { margin-top: 8px; }
  .post-struggling .st-ask + .st-ask .st-ask__text { margin-top: 27px; }
  .post-struggling .st-ask__text { font-size: 18px; max-width: 402px; margin-inline: auto; }

  .post-struggling .st-tip--3 { padding-bottom: 25px; }
  .post-struggling .st-modes { grid-template-columns: 447px 477px; margin: 25px 0 0 113px; }
  .post-struggling .st-mode { padding: 8px 0 25px; }
  .post-struggling .st-mode__head { flex-direction: row; align-items: center; gap: 20px; }
  .post-struggling .st-mode__title { font-size: 24px; line-height: 28.8px; }
  .post-struggling .st-mode__list { padding-left: 70px; margin-top: 5px; }
  .post-struggling .st-mode__list li { font-size: 17px; }

  .post-struggling .st-tip--4 { padding-bottom: 30px; }
  .post-struggling .st-split--style { grid-template-columns: 466px 451px; column-gap: 72px; margin: 60px 0 0 52px; }
  .post-struggling .st-split__lead { font-size: 19px; line-height: 30px; }
  .post-struggling .st-bullets { margin-top: 13px; }
  .post-struggling .st-bullets li { font-size: 16px; line-height: 30px; }

  .post-struggling .st-tip--5 { padding-bottom: 40px; }
  .post-struggling .st-rates { max-width: 774px; margin: 19px 0 0 182px; }
  .post-struggling .st-rates th { font-size: 18px; line-height: 30px; padding: 9px 20px 9px; }
  .post-struggling .st-rates td { font-size: 15px; line-height: 30px; padding: 6px 20px; }
  .post-struggling .st-perks { grid-template-columns: repeat(4, 186px); gap: 30px; margin-top: 41px; }
  .post-struggling .st-perk { gap: 6px; padding: 34px 31px 29px; }
  .post-struggling .st-perk__icon { width: 36px; }

  .post-struggling .st-tip--6 { padding-bottom: 32px; }
  .post-struggling .st-cards { grid-template-columns: repeat(3, 338px); gap: 42px; margin: 39px 0 0 20px; }
  .post-struggling .st-source { padding: 25px 20px 23px; }
  /* The title hangs 5px under the icon's top edge instead of centring on it */
  .post-struggling .st-card__head { flex-direction: row; justify-content: center; align-items: flex-start; gap: 15px; }
  .post-struggling .st-card__title { margin-top: 5px; }
  .post-struggling .st-card__text { font-size: 18px; line-height: 30px; margin: 19px auto 0; max-width: 270px; }

  .post-struggling .st-tip--7 { padding-bottom: 30px; }
  .post-struggling .st-split--reviews { grid-template-columns: 385px 438px; column-gap: 66px; margin: 69px 0 0 139px; }
  .post-struggling .st-split--reviews .st-split__lead { font-size: 19px; }
  .post-struggling .st-checks { margin-top: 35px; }
  .post-struggling .st-checks li { gap: 16px; font-size: 19px; }

  .post-struggling .st-tip--8 { padding-bottom: 29px; }
  .post-struggling .st-questions { grid-template-columns: repeat(3, 344px); gap: 36px; margin: 66px 0 0 14px; }
  .post-struggling .st-question { padding: 21px 20px 25px 38px; }
  .post-struggling .st-question__title { font-size: 22px; line-height: 26.4px; }
  .post-struggling .st-question__text { font-size: 18px; }

  .post-struggling .st-tip--9 { padding-bottom: 22px; }
  .post-struggling .st-trial { grid-template-columns: 578px 347px; column-gap: 108px; margin: 51px 0 0 10px; }
  .post-struggling .st-trial__card { padding: 38px 60px 33px; }
  .post-struggling .st-trial__aside { align-self: start; margin-top: 11px; }
  .post-struggling .st-trial__lead, .post-struggling .st-trial__intro { font-size: 21px; line-height: 37.8px; }
  .post-struggling .st-trial__lead strong { letter-spacing: 0; }
  .post-struggling .st-checks--trial { margin-top: 34px; }
  .post-struggling .st-checks--trial li { gap: 10px; line-height: 30px; }
  .post-struggling .st-checks--trial .st-glyph { margin-top: 9px; }
  .post-struggling .st-trial__title { font-size: 22px; line-height: 30px; margin-top: 35px; }
  .post-struggling .st-trial__text { font-size: 20px; line-height: 30px; margin-top: 34px; }

  .post-struggling .st-tip--10 { padding-bottom: 31px; }
  .post-struggling .st-progress { margin-top: 65px; }
  .post-struggling .st-progress__item { padding: 21px 20px 34px; }
  .post-struggling .st-progress__label { font-size: 22px; line-height: 30px; margin-top: 20px; }
  .post-struggling .st-progress__sub { font-size: 18px; margin-top: 35px; }

  /* The source's arrows sit 10px closer to the cards than the shared strip's */
  .post-struggling .carousel--tutors .carousel__arrow--prev { left: -32px; }
  .post-struggling .carousel--tutors .carousel__arrow--next { right: -32px; }

  .post-struggling .st-cta { padding: 48px 0 63px; }
  .post-struggling .st-cta__title { font-size: 24px; line-height: 32px; }
  .post-struggling .st-cta__text { font-size: 19px; line-height: 30px; }

  .post-struggling .st-faq { padding: 70px 0 71px; }
  .post-struggling .st-faq__title { font-size: 24px; line-height: 32px; }
  .post-struggling .st-faq .accordion__item + .accordion__item { margin-top: 10px; }
  .post-struggling .st-faq .accordion__trigger { padding: 14px 30px 14px 32px; }
  .post-struggling .st-faq .accordion__panel { padding: 30px 30px 29px 65px; }

  /* The source's inline breadcrumb sets at 16px (Blog 32px wide, the title 462px) despite the 17px in the dump */
  :is(.post-struggling, .post-seven) .breadcrumb ol { font-size: 16px; }

}

/* ==========================================================================
   Online teaching platforms in India: 7 features (.post-seven)
   ========================================================================== */
/* Like .post-struggling, the source loads only its Book file, so 600 is the synthetic bold of Book (same face) */
.post-seven { --font-sans: "Circular Std Source Book", "Helvetica Neue", Arial, sans-serif; --sf-amber: var(--c-amber); --sf-navy: #11578D; }
.post-seven .post__header { padding: 48px 0 32px; }
.post-seven .post__title { margin: 70px -10px 0; text-wrap: wrap; }
.post-seven .post__meta { margin-bottom: 44px; font-weight: 400; } /* the source's 500 has no Medium face: it renders as Book */
.post-seven .post__meta time { margin-left: 15px; }
.post-seven .post__hero { max-width: 352px; }
.post-seven .sf-intro { font: 400 16px/27.2px var(--font-sans); color: var(--c-text); text-align: center; margin-top: 30px; }
.post-seven .sf-intro + .sf-intro { margin-top: 15px; }
.post-seven .sf-intro strong { color: var(--c-ink); }

.post-seven .sf-band { padding: 20px 0; background: var(--c-bg-peach); }
.post-seven .sf-band .container { --gutter: 20px; }
.post-seven .sf-band__text { font: 400 21px/27.3px var(--font-sans); color: var(--c-ink); }

/* Feature blocks: amber eyebrow + lead */
.post-seven .sf-feature { padding: 40px 0 24px; }
.post-seven .sf-eyebrow { font: 600 21px/27.3px var(--font-sans); color: var(--sf-amber); text-align: center; max-width: 303px; margin: 0 auto; }
.post-seven .sf-lead { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); text-align: center; margin: 15px auto 0; }
.post-seven .sf-rule { padding-inline: 0; }

/* Feature 1: live classes */
.post-seven .sf-live { display: grid; margin-top: 35px; }
.post-seven .sf-live__art { width: 350px; height: 200px; margin: 0 auto; object-fit: cover; border-radius: var(--r-10); }
.post-seven .sf-checks { margin: 20px 10px 0; }
.post-seven .sf-checks--b { margin-top: 8px; padding-left: 9px; }
/* The source's item text is the synthetic bold of Book at 16px (phones) / 18px (desktop), not the dump's 17px */
.post-seven .sf-checks li { display: flex; align-items: flex-start; gap: 15px; font: 600 16px/30px var(--font-sans); color: var(--sf-navy); }
.post-seven .sf-checks li:first-child { padding-bottom: 1px; }
.post-seven .sf-checks .icon { margin-top: 8px; }
.post-seven .sf-close { font: 400 16px/27.2px var(--font-sans); color: var(--c-text); text-align: center; margin-top: 31px; }
.post-seven .sf-close strong { color: var(--c-ink); }

/* Feature 2: sticky notes around the illustration. The notes are the source's own peach PNGs (shadow included),
   covered like its container backgrounds: the left column's bottom edge rises to the right, the right column's
   falls (--note-bg is set per list in the template). */
.post-seven .sf-feature--mobile { padding-bottom: 20px; }
.post-seven .sf-feature--mobile .sf-lead { max-width: 298px; }
.post-seven .sf-mobile { display: grid; margin-top: 26px; }
.post-seven .sf-notes { display: grid; gap: 20px; margin: 0 10px; }
.post-seven .sf-note {
  min-height: 114px; padding: 30px; font: 400 17px/30px var(--font-sans); color: var(--bb-ink-58);
  background: var(--note-bg) center / cover no-repeat;
}
.post-seven .sf-mobile__art { width: 350px; height: 377px; margin: -20px auto 20px; object-fit: cover; }

/* Feature 3: LMS icon cards */
.post-seven .sf-feature--lms { padding-bottom: 40.5px; }
.post-seven .sf-feature--lms .sf-lead { max-width: 246px; }
.post-seven .sf-lms { display: grid; gap: 19px; margin: 36px 10px 0; } /* phone pitch 285.5px, as the source's */
.post-seven .sf-lms__card { padding: 31px 20px 29.5px; text-align: center; border: 1px solid #FFD21F; border-radius: var(--r-10); }
.post-seven .sf-lms__icon { width: 124px; height: 124px; margin: 0 auto; border-radius: var(--r-10); }
/* Captions measure 18px of ink (161px for "Share notes, PDFs &") at both widths */
.post-seven .sf-lms__card p { font: 400 18px/30px var(--font-sans); color: var(--c-ink); margin-top: 20px; }

/* Features 4-7 on peach */
.post-seven .sf-more { padding: 67px 0 50px; background: var(--c-bg-peach); }
.post-seven .sf-more .container { --gutter: 20px; }
.post-seven .sf-more__grid { display: grid; }
/* Phone stacking: the source's box-to-box spacing differs per box (icon tops at 3981/4312/4611/4926) */
.post-seven .sf-box:nth-child(2) { margin-top: 68px; }
.post-seven .sf-box:nth-child(3) { margin-top: 67px; }
.post-seven .sf-box:nth-child(4) { margin-top: 52px; }
.post-seven .sf-box__icon { width: 104px; height: 84px; }
.post-seven .sf-box__title { font: 600 21px/27.3px var(--font-sans); color: var(--sf-amber); margin-top: 18px; }
.post-seven .sf-box__lead { font: 600 16px/27.2px var(--font-sans); color: var(--c-ink); margin-top: 16px; }
.post-seven .sf-box__list { list-style: disc; padding-left: 0; }
.post-seven .sf-box__list li { font: 400 17px/30px var(--font-sans); color: var(--c-ink); }

/* Closing statement + tutor strip */
.post-seven .sf-closing { font: 600 21px/27.3px var(--font-sans); color: var(--c-accent); text-align: center; max-width: 862px; margin: 0 auto; padding: 42px 10px 30px; }
.post-seven .tutors { padding: 42px 0 59px; }
.post-seven .tutors--post .section-title { font-size: 23px; line-height: 29.9px; }
.post-seven .tutors--post .tutors__strip { margin-top: 20px; }

@media (min-width: 768px) {
  .post-seven .post__hero { max-width: 1188px; }
  .post-seven .sf-live { grid-template-columns: minmax(0, 298fr) minmax(0, 374fr) minmax(0, 370fr); column-gap: 20px; align-items: center; }
  .post-seven .sf-live__art { width: 100%; margin: 0; }
  .post-seven .sf-checks, .post-seven .sf-checks--b { margin: 0; padding: 0; }
  .post-seven .sf-mobile { grid-template-columns: minmax(0, 407fr) minmax(0, 320fr) minmax(0, 407fr); column-gap: 20px; align-items: start; }
  .post-seven .sf-notes { margin: 0; }
  .post-seven .sf-mobile__art { width: 100%; margin: -40px 0 0; }
  .post-seven .sf-lms { grid-template-columns: repeat(3, minmax(0, 306px)); justify-content: center; gap: 22px; margin-inline: 0; }
  .post-seven .sf-more__grid { grid-template-columns: repeat(2, minmax(0, 520px)); grid-auto-flow: dense; justify-content: center; gap: 55px 60px; }
  .post-seven .sf-box { display: flex; align-items: flex-start; gap: 28px; }
  .post-seven .sf-box--right { grid-column: 2; }
  .post-seven .sf-box--left { grid-column: 1; }
  .post-seven .sf-box:first-child { margin-top: 7px; }
  .post-seven .sf-box:nth-child(2) { margin-top: -10px; }
  .post-seven .sf-box:nth-child(3), .post-seven .sf-box:nth-child(4) { margin-top: 0; }
  .post-seven .sf-box picture { flex: none; }
  .post-seven .sf-box__body { flex: 1; }
  .post-seven .sf-box__title { margin-top: 8px; }

}
@media (min-width: 1025px) {
  .post-seven .post__header { padding: 32px 0 38px; }
  .post-seven .post__title { margin: 80px auto 0; font-size: 38px; line-height: 45.6px; }
  .post-seven .post__meta { margin-bottom: 34px; }
  .post-seven .post__meta time { margin-left: 18px; }
  .post-seven .sf-intro { font-size: 19px; line-height: 30px; text-align: left; margin-top: 20px; }
  .post-seven .sf-intro + .sf-intro { margin-top: 15px; }

  .post-seven .sf-band__text { font-size: 22px; line-height: 22px; }

  .post-seven .sf-feature { padding: 40px 0; }
  .post-seven .sf-eyebrow { font-size: 25px; line-height: 20px; text-align: left; max-width: none; }
  .post-seven .sf-lead { font-size: 20px; line-height: 30px; text-align: left; margin: 25px 0 0 30px; max-width: 1200px; }
  .post-seven .sf-live { grid-template-columns: 298px 374px 370px; column-gap: 20px 22px; margin: 36px 0 0 72px; }
  .post-seven .sf-live .sf-checks--b { margin-left: 2px; align-self: start; margin-top: 56px; }
  .post-seven .sf-checks li { font-size: 18px; }
  .post-seven .sf-checks li:first-child { padding-bottom: 2.5px; }
  .post-seven .sf-checks li + li { margin-top: 2.5px; }
  .post-seven .sf-live__art { height: 200px; }
  .post-seven .sf-close { font-size: 19px; line-height: 30px; text-align: left; margin: 31px 0 0 30px; max-width: 1200px; }

  .post-seven .sf-feature--mobile { padding-bottom: 20px; }
  .post-seven .sf-feature--mobile .sf-lead { margin-top: 35px; max-width: 1200px; }
  .post-seven .sf-mobile { grid-template-columns: 407px 320px 407px; margin: 26px 0 0 28px; }
  .post-seven .sf-note { font-size: 19px; }
  .post-seven .sf-mobile__art { height: 377px; }

  .post-seven .sf-feature--lms { padding-bottom: 72px; }
  .post-seven .sf-feature--lms .sf-lead { margin-top: 15px; max-width: 1200px; }
  .post-seven .sf-lms { margin-top: 35px; }
  .post-seven .sf-lms__card { padding: 32px 20px 29px; }
  .post-seven .sf-lms__icon { width: 106px; height: 106px; }
  .post-seven .sf-lms__card p { margin-top: 19px; }

  .post-seven .sf-more { padding: 100px 0 114px; }
  .post-seven .sf-box__title { font-size: 30px; line-height: 36px; white-space: nowrap; }
  .post-seven .sf-box__lead { font-size: 20px; line-height: 30px; }
  .post-seven .sf-box__list li { font-size: 17px; }

  .post-seven .sf-closing { font-size: 24px; line-height: 33.6px; padding: 58px 0 142px; }
  .post-seven .tutors { padding: 10px 0 95px; }
  .post-seven .tutors--post .tutors__strip { margin-top: 18px; }
  .post-seven .tutors--post .section-title { font-size: 38px; line-height: 32px; letter-spacing: 0; }

}