/* blog-a.css: five blog posts. The three Pune landing posts (cbse/icse/ib-tutors-in-pune, body class .pune-post),
   "Why Indian Tutors Online…" (.page-blog-why-indian-tutors-online-are-reshaping-global-learning-in-2025) and the
   hand-coded IB IA guide (.page-blog-how-to-choose-the-right-ib-ia-topic). Mobile-first like main.css: base rules
   are the 390px layout, then min-width 768px and 1025px. Numbers are the measured bboxes in reference/<slug>/.
   The source rendered weight 500 from a single Book cut (so it looks like 400); those texts use 400 here. */

/* ==========================================================================
   1. Pune posts: shared pieces
   ========================================================================== */
.pune-accent { color: var(--c-brand); }
.pune-accent--bold { font-weight: 600; }
.pune-heading { font: 400 21px/25.2px var(--font-sans); color: var(--c-text-strong); text-align: center; }
.pune-mark { display: block; font: 600 21px/27.3px var(--font-sans); letter-spacing: -.1em; color: var(--c-accent); text-align: center; }
/* Keeps a phrase on one line so the intro wraps where the source does */
.pune-nowrap { white-space: nowrap; }
.pune-mark--soft { color: rgba(255, 122, 30, .53); }
.pune-divider { display: block; height: 1px; border: 0; background: var(--c-line-divider); margin: 15px 0; }
.pune-divider--inset { margin-inline: 4px; }
@media (min-width: 1025px) {
  .pune-heading { font-size: 40px; line-height: 32px; }
  .pune-mark { font-size: 34px; line-height: 40.8px; }
  .pune-divider { max-width: 1117px; margin: 15px auto 47px; }
  .pune-divider--wide { max-width: 1300px; margin-bottom: 15px; }
}

/* ---- Hero: breadcrumb, title, tagline, meta, photo, two intro lines ---- */
.pune-hero { padding: 32px 0 20px; }
.pune-hero__inner { --gutter: 8px; text-align: center; }
.pune-hero .breadcrumb { padding-left: 19px; text-align: left; }
/* Phones: the source's stacked crumb renders at ~14px (measured ink width), not the 17px of desktop */
.pune-hero .breadcrumb ol { font-size: 14px; }
.pune-hero .breadcrumb li:first-child { line-height: 29px; }
.pune-hero__title { font: 400 23px/58px var(--font-sans); color: var(--c-text-strong); margin-top: 11px; }
.pune-hero__tagline { font: 600 21px/27.3px var(--font-sans); color: var(--c-text-strong); margin-top: 18px; }
.pune-hero__meta { font: 400 19px/30px var(--font-sans); color: var(--c-text-a58); margin-top: 17px; }
.pune-hero__meta strong { font-weight: 700; }
.pune-hero__meta strong + strong { margin-left: .5em; }
.pune-hero__media { margin: 14px 19px 0; }
.pune-hero__media img { width: 100%; height: 220px; object-fit: cover; object-position: top center; }
.pune-hero__intro { font: 400 16px/30.4px var(--font-sans); color: var(--c-text-a88); text-align: left; margin-top: 30px; }
.pune-hero__intro--sub { font-size: 14px; line-height: 26.6px; margin-top: 14px; }
.pune-hero__intro strong { font-weight: 600; color: var(--c-ink); }
@media (min-width: 1025px) {
  .pune-hero { padding-bottom: 30px; }
  .pune-hero__inner { --gutter: 20px; }
  .pune-hero .breadcrumb { padding-left: 20px; }
  .pune-hero .breadcrumb ol { font-size: 17px; }
  .pune-hero__title { font-size: 38px; margin-top: 80px; }
  .pune-hero__tagline { font-size: 34px; line-height: 40.8px; margin-top: 15px; }
  .pune-hero__meta { font-size: 30px; margin-top: 40px; }
  .pune-hero__meta strong + strong { margin-left: 1.05em; }
  .pune-hero__media { max-width: 1188px; margin: 34px auto 0; }
  .pune-hero__media img { height: 855px; }
  .pune-hero__intro { font-size: 20px; line-height: 43px; text-align: center; max-width: 1138px; margin: 60px auto 0; }
  .pune-hero__intro--sub { font-size: 24px; line-height: 43px; margin-top: 40px; }
}

/* CBSE hero tuning against the measured ink. Phones: the stacked crumb sits 4px higher, 29px line pitch (the title
   keeps its y). Desktop: the inline crumb reads ~16px with Font Awesome's small solid angle-right; the tagline and the
   meta line are a touch tighter than our Circular cut, with a 34px gap between "4 Min" and the date. */
.page-blog-cbse-tutors-in-pune .pune-hero { padding-top: 28px; }
.page-blog-cbse-tutors-in-pune .pune-hero .breadcrumb [aria-current] { line-height: 28px; }
.page-blog-cbse-tutors-in-pune .pune-hero__title { margin-top: 17px; }
@media (min-width: 1025px) {
  .page-blog-cbse-tutors-in-pune .pune-hero { padding-top: 32px; }
  .page-blog-cbse-tutors-in-pune .pune-hero .breadcrumb ol { font-size: 16px; }
  .page-blog-cbse-tutors-in-pune .pune-hero .breadcrumb [aria-current] { line-height: 30px; gap: 18px; }
  .page-blog-cbse-tutors-in-pune .pune-hero .breadcrumb { --crumb-angle-w: 6px; --crumb-angle-h: 9px; }
  .page-blog-cbse-tutors-in-pune .pune-hero__title { margin-top: 80px; }
  .page-blog-cbse-tutors-in-pune .pune-hero__tagline { letter-spacing: -.5px; }
  .page-blog-cbse-tutors-in-pune .pune-hero__meta { letter-spacing: -.3px; }
  .page-blog-cbse-tutors-in-pune .pune-hero__meta strong + strong { margin-left: .72em; }
}

/* ---- "What We Offer": five icon + caption columns on the dot-grid texture (CBSE) ---- */
/* The dot-grid tile fades out at its bottom edge; like the source it repeats at its natural size, so the texture
   comes back further down the tall stacked mobile list. */
.pune-offer { padding: 8px 0 25px; background: var(--bg-image) top left repeat; }
.pune-offer .container { --gutter: 16px; }
.pune-offer__title { font-size: 20px; line-height: 24px; margin-top: 29px; }
.pune-offer__list { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 50px; margin-top: 45px; }
.pune-offer__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pune-offer__icon, .pune-offer__item picture { width: var(--w); height: auto; }
.pune-offer__text { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); max-width: 282px; margin-top: 9px; }
.pune-offer__item--wide .pune-offer__text { max-width: 321px; }
@media (min-width: 768px) {
  .pune-offer__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; }
  .pune-offer__icon, .pune-offer__item picture { width: min(var(--w), 90%); }
}
@media (min-width: 1025px) {
  .pune-offer { padding: 8px 0 93px; }
  .pune-offer .container { --gutter: 0px; }
  .pune-offer__title { font-size: 40px; line-height: 32px; text-align: left; padding-left: 43px; margin-top: 35px; }
  .pune-offer__list { margin-top: 55px; }
  .pune-offer__icon, .pune-offer__item picture { width: var(--w); }
  .pune-offer__text { font-size: 18px; line-height: 23.4px; max-width: 198px; margin-top: 6px; }
  .pune-offer__item--wide .pune-offer__text { max-width: 198px; }
}

/* ---- Search banner: /// sentence /// on cream ---- */
.pune-banner { background: var(--c-bg-cream); padding: 40px 0 32px; }
.pune-banner__row { --gutter: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pune-banner__text { font: 400 19px/24.7px var(--font-sans); color: var(--c-ink); text-align: center; }
@media (min-width: 768px) {
  .pune-banner__row { flex-direction: row; justify-content: center; align-items: flex-start; gap: 20px; }
  .pune-banner__text { max-width: 798px; }
}
@media (min-width: 1025px) {
  .pune-banner { padding: 24px 0 16px; }
  .pune-banner__text { font-size: 26px; line-height: 31.2px; max-width: none; }
}

/* ---- "Why Ctutor": checklist with the parent/daughter photo in the corner (CBSE) ---- */
.pune-why .container { --gutter: 0px; }
.pune-why__box {
  position: relative; isolation: isolate; padding: 38px 10px 32px;
  background: linear-gradient(236deg, #FFFFFF 24%, var(--c-bg-cream) 100%);
}
.pune-why__box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .27;
  background: var(--bg-image-sm, var(--bg-image)) bottom right / 440px auto no-repeat;
}
.pune-why__title { font-size: 20px; line-height: 24px; }
.pune-why__list { display: grid; row-gap: 9.5px; margin-top: 65px; padding-left: 28px; }
.pune-why__item { display: flex; align-items: center; gap: 30px; font: 400 16px/19.2px var(--font-sans); color: var(--c-text-strong); }
.pune-why__icon, .pune-why__item picture { width: 30px; height: 30px; flex: none; }
@media (min-width: 768px) {
  .pune-why__box { width: 92%; margin-inline: auto; }
  .pune-why__box::before { opacity: 1; background-image: var(--bg-image); background-size: 49% auto; }
}
@media (min-width: 1025px) {
  .pune-why__box { padding: 15px 10px 35px; }
  /* The source's heading column is centred 10px left of the box (h2 [283,2110,854]) */
  .pune-why__title { font-size: 40px; line-height: 32px; padding-right: 20px; }
  .pune-why__list { row-gap: 9px; margin-top: 54px; padding-left: 60px; }
  .pune-why__item { gap: 50px; font-size: 18px; line-height: 32px; }
  .pune-why__icon, .pune-why__item picture { width: 43px; height: 43px; }
}

/* ---- Localities, callout card and the app screenshot ---- */
.pune-areas { padding: 30px 0 30px; }
.pune-areas__grid { --gutter: 30px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.pune-areas__lead { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); margin: 15px 0 0 5px; }
.pune-areas__list { display: grid; grid-template-columns: 149px minmax(0, 1fr); row-gap: 24px; margin-top: 20px; }
.pune-areas__list li { position: relative; padding-left: 48px; font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); }
.pune-areas__list li::before { content: ""; position: absolute; left: 6px; top: 5px; width: 16px; height: 16px; border-radius: var(--r-round); background: #F4900C; }
.pune-callout { background: var(--c-bg-cream); border-radius: var(--r-20); padding: 14px 16px; margin: 46px 0 0 2px; width: calc(100% - 3px); }
.pune-callout p { font: 400 14px/26.6px var(--font-sans); color: var(--c-text-a88); text-align: left; }
.pune-areas__media img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .pune-areas__grid { grid-template-columns: minmax(0, 633fr) minmax(0, 427fr); column-gap: 40px; align-items: start; }
}
@media (min-width: 1025px) {
  .pune-areas { padding: 0; }
  .pune-areas__grid { --gutter: 20px; --container: 1100px; }
  .pune-areas__text { padding: 30px 0 33px; }
  .page-blog-cbse-tutors-in-pune .pune-areas__text { padding-bottom: 30px; }
  .pune-areas__lead { font-size: 24px; line-height: 35px; margin: 40px 0 0; }
  .pune-areas__list { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: 307px 307px; column-gap: 20px; row-gap: 20px; margin-top: 34px; }
  .pune-areas__list li { padding-left: 48px; font-size: 18px; line-height: 23.4px; }
  .pune-areas__list li::before { left: 1px; top: 1px; width: 18px; height: 18px; }
  .pune-callout { width: 93%; padding: 18px 20px 17px 53px; margin: 37px 0 0; }
  .pune-callout p { font-size: 24px; line-height: 43px; }
  .pune-accent--lg { font-size: 30px; }
  .pune-areas__media { margin-top: -4px; }
}

/* ---- Booking CTA ---- */
.pune-cta { padding: 42px 0; text-align: center; }
.pune-cta .container { --gutter: 10px; }
.pune-cta__title { font: 600 21px/25.2px var(--font-sans); color: var(--c-text-strong); }
.pune-cta__text { font: 400 16px/30.4px var(--font-sans); color: var(--c-text-a88); margin-top: 21px; }
.pune-cta__btn { margin-top: 21px; }
.pune-cta .pune-cta__btn { font-size: 16px; line-height: 16px; }
/* The source's "500" here is the Book cut (measured 255px wide), so this button renders at 400 */
.page-blog-cbse-tutors-in-pune .pune-cta__btn { font-weight: 400; }
@media (min-width: 1025px) {
  .pune-cta { padding: 42px 0 58px; }
  .pune-cta__title { font-size: 38px; line-height: 32px; }
  /* The source h2 computes 38px but its inner span renders ~33px (ink 504px wide, 31px tall, box 33px) */
  .page-blog-cbse-tutors-in-pune .pune-cta__title { font-size: 33px; line-height: 33px; }
  .pune-cta__text { font-size: 24px; line-height: 31px; max-width: 1210px; margin: 41px auto 0; }
}

/* ==========================================================================
   2. ICSE post (.pune-post--icse): one-line crumb, lighter tagline, "What We Offer" graphic, photo band with pills
   ========================================================================== */
.pune-post--icse .pune-hero { padding-bottom: 10px; }
.pune-post--icse .pune-hero .breadcrumb { padding-left: 0; }
.pune-post--icse .pune-hero .breadcrumb ol { flex-direction: row; align-items: center; gap: 0 8px; }
.pune-post--icse .pune-hero__title { font-size: 21px; }
.pune-hero__tagline--light { font-weight: 400; }
.pune-hero__offer { margin: 50px 10px 0; }
.pune-hero__offer img { width: 100%; height: auto; }
@media (min-width: 1025px) {
  .pune-post--icse .pune-hero .breadcrumb { padding-left: 20px; }
  .pune-post--icse .pune-hero__title { font-size: 38px; }
  .pune-post--icse .pune-hero__tagline { font-size: 32px; line-height: 58px; margin-top: 9px; }
  .pune-post--icse .pune-hero__intro--sub { font-size: 23px; }
  .pune-hero__offer { margin-top: 60px; }
}

/* ---- "Why Ctutor": heading, then the student photo (853px, bottom centre) under the dot-grid, with five pills ---- */
.pune-pills { padding: 38px 0 0; }
.pune-pills__title { font-size: 20px; line-height: 24px; }
.pune-pills__band {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 453px; margin-top: 30px; padding: 10px 10px 24px;
  background: var(--bg-image-sm, var(--bg-image)) bottom center / auto 370px no-repeat;
}
.pune-pills__band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay) center / cover no-repeat; }
.pune-pills__list { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
.pune-pills__item {
  font: 400 16px/19.2px var(--font-sans); color: var(--c-text-strong); text-align: center;
  background: rgba(255, 255, 255, .8); border-radius: var(--r-30); padding: 16px 10px;
}
.pune-pills__item:nth-child(n+3) { margin-inline: 10px; }
@media (min-width: 768px) {
  .pune-pills__band { background-image: var(--bg-image); background-size: 853px auto; }
  .pune-pills__list { grid-template-columns: repeat(2, minmax(0, 368px)); justify-content: center; column-gap: 20px; row-gap: 22px; }
  .pune-pills__item:nth-child(n+3) { margin-inline: 0; }
  .pune-pills__item:last-child { grid-column: 1 / -1; justify-self: center; width: min(361px, 100%); }
}
@media (min-width: 1025px) {
  .pune-pills { padding-top: 45px; }
  .pune-pills__title { font-size: 40px; line-height: 32px; }
  .pune-pills__band { min-height: 557px; margin-top: 50px; padding-bottom: 21px; background-size: 1440px auto; background-position: center top -51px; }
  .pune-pills__item { font-size: 16px; line-height: 14px; padding: 18px 10px; }
}

/* ---- Localities (compact variant: narrower columns, orange-outlined callout) and the plain CTA ---- */
.pune-areas--compact .pune-areas__grid { row-gap: 14px; }
.pune-callout--outline { background: var(--c-white); border: 1px solid var(--c-brand); border-radius: 13px; padding: 19px 16px 19px; margin-top: 60px; }
.pune-callout--outline p { color: var(--c-text-a88); }
.pune-cta--plain .pune-cta__title { color: var(--c-text-strong); }
@media (min-width: 1025px) {
  .pune-areas--compact { margin-top: 40px; }
  .pune-areas--compact .pune-areas__text { padding-bottom: 50px; }
  .pune-areas--compact .pune-areas__lead { font-size: 18px; line-height: 23.4px; }
  .pune-areas--compact .pune-areas__list { grid-template-columns: 198px 198px; }
  .pune-callout--outline { padding: 20px 20px 20px 54px; margin-top: 35px; }
  .pune-callout--outline p + p { line-height: 31px; }
  .pune-cta--plain .pune-cta__text { line-height: 35px; }
  .pune-cta.pune-cta--plain .pune-cta__btn { font-size: 15px; line-height: 15px; }
}

/* ---- ICSE parity against the measured capture ---- */
/* The source's "500"/"600" weights on this page all render from its single Book cut, so the CTA heading and the CTA
   button use 400 here (Circular's Medium/Bold files read visibly heavier). */
.page-blog-icse-tutors-in-pune .pune-cta__title,
.page-blog-icse-tutors-in-pune .pune-cta__btn { font-weight: 400; }

/* Phones: the crumb sits 5px higher (ink top y=90) with the title staying at its y */
.page-blog-icse-tutors-in-pune .pune-hero { padding-top: 27px; }
.page-blog-icse-tutors-in-pune .pune-hero__title { margin-top: 16px; }
/* "Why Ctutor" photo: 853px wide and bottom-anchored on phones and tablets; at desktop it renders at its natural
   1440px, top-aligned in the 557px band (photo ink y=2411..2878), and the last pill sits 19px left of centre. */
.page-blog-icse-tutors-in-pune .pune-pills__band { background-size: 853px auto; }
@media (min-width: 1025px) {
  .page-blog-icse-tutors-in-pune .pune-hero { padding-top: 32px; }
  .page-blog-icse-tutors-in-pune .pune-hero__title { margin-top: 80px; }
  /* The source h2 computes 38px but its ink measures ~40px (703px wide, cap height 29px) */
  .page-blog-icse-tutors-in-pune .pune-cta__title { font-size: 40px; }
  /* Inline crumb reads ~16px with Font Awesome's black 14px solid angle-right, 16px either side of it */
  .page-blog-icse-tutors-in-pune .pune-hero .breadcrumb ol { font-size: 16px; gap: 0 16px; }
  .page-blog-icse-tutors-in-pune .pune-hero .breadcrumb [aria-current] { gap: 16px; }
  .page-blog-icse-tutors-in-pune .pune-hero .breadcrumb { --crumb-angle-w: 7px; --crumb-angle-h: 14px; }
  .page-blog-icse-tutors-in-pune .pune-pills__band { background-size: 1440px auto; background-position: center top; }
  .page-blog-icse-tutors-in-pune .pune-pills__item:last-child { justify-self: start; margin-left: 179px; }
}

/* ==========================================================================
   3. IB post (.pune-post--ib): bold title, "Find IB Teachers" pills, "Why Ctutor" rows on the arcs graphic
   ========================================================================== */
.pune-post--ib .pune-hero__title { font-size: 21px; font-weight: 600; line-height: 27.3px; }
/* Phones: the stacked crumb ink sits 4px higher than the shared hero (title keeps its y) */
.pune-post--ib .pune-hero { padding-top: 28px; }
.pune-post--ib .pune-hero__title { margin-top: 15px; }
.pune-post--ib .pune-hero__meta { color: var(--c-text); }
.pune-post--ib .pune-hero__media { margin-top: 15px; }
.pune-post--ib .pune-hero__intro--sub { font-size: 16px; line-height: 30.4px; text-align: center; margin-top: 39px; }
.pune-post--ib .pune-hero__intro--sub strong { font-weight: 400; }
/* The highlighted phrases wrap as units (inline-block in the original), which gives the measured line breaks */
.pune-post--ib .pune-hero__intro span, .pune-post--ib .pune-hero__intro strong { display: inline-block; }
/* Centred like the source at every width. Real Bold is wider than the original's faux bold, so a hair of tracking on
   the bold phrases keeps the measured 4-line wrap on phones; the source overflows "IB tutors in Pune" onto line 2 */
.pune-post--ib .pune-hero__intro { text-align: center; }
.pune-post--ib .pune-hero__intro .pune-accent--bold { letter-spacing: -.02em; }
.pune-post--ib .br-mobile { display: inline; }
@media (min-width: 768px) {
  .pune-post--ib .pune-hero__intro .pune-accent--bold { letter-spacing: normal; }
  .pune-post--ib .br-mobile { display: none; }
}
@media (min-width: 1025px) {
  .pune-post--ib .pune-hero { padding-top: 32px; padding-bottom: 20px; }
  .pune-post--ib .pune-hero__title { margin-top: 80px; }
  .pune-post--ib .pune-hero__title { font-size: 32px; line-height: 38.4px; }
  .pune-post--ib .pune-hero__tagline { margin-top: 28px; }
  .pune-post--ib .pune-hero__meta { font-size: 24px; }
  .pune-post--ib .pune-hero__media { margin-top: 34px; }
  /* Wide enough that line 1 ends "...Our IB teachers in Pune" as in the source */
  .pune-post--ib .pune-hero__intro { max-width: 1110px; }
  .pune-post--ib .pune-hero__intro--sub {
    font-size: 24px; line-height: 31px; text-align: left; max-width: 964px;
    margin: 40px 0 0 max(0px, calc(50% - 522px));
  }
}

.ib-heading { font: 600 20px/24px var(--font-sans); color: var(--c-text-strong); text-align: center; }
@media (min-width: 1025px) { .ib-heading { font-size: 25px; line-height: 32px; } }

/* ---- "Find IB Teachers Easily": the photo collage is the section background, the five pills sit around it ---- */
.ib-teachers {
  min-height: 606px; padding: 18px 10px 29px;
  background: var(--bg-image-sm, var(--bg-image)) left center / cover no-repeat;
}
.ib-teachers .container { --gutter: 0px; }
.ib-teachers__list { display: grid; row-gap: 24px; margin-top: 50px; }
.ib-pill {
  display: flex; align-items: center; min-height: 65px; padding: 15px 30px; border-radius: var(--r-10);
  background: var(--pill-bg, #F1FAFF);
}
.ib-pill__icon, .ib-pill picture { width: 24px; height: 24px; flex: none; }
.ib-pill__label { flex: 0 1 auto; margin-left: 20px; font: 400 19px/22.8px var(--font-sans); color: var(--c-ink); text-align: center; }
.ib-pill--2 { --pill-bg: #F4F4FE; }
.ib-pill--3 { --pill-bg: #FFF8F0; }
.ib-pill--4 { --pill-bg: #FDF3F4; }
.ib-pill--5 { --pill-bg: #EFF9F9; }
.ib-pill--2 .ib-pill__label, .ib-pill--4 .ib-pill__label { font-size: 18px; line-height: 21.6px; }
.ib-pill--1, .ib-pill--2 { margin-inline: 10px; }
.ib-pill--3, .ib-pill--4, .ib-pill--5 { margin-inline: 20px; }
@media (min-width: 768px) {
  .ib-teachers { min-height: 650px; padding: 115px 10px 87px; background-image: var(--bg-image); background-position: center; }
  .ib-teachers__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 60px; column-gap: 20px;
    width: min(1100px, 100%); margin: 58px auto 0;
  }
  .ib-pill { min-height: 62px; padding: 16px 30px; margin: 0; }
  .ib-pill--1 { justify-self: start; width: 296px; margin-left: 34px; }
  .ib-pill--2 { justify-self: end; width: 294px; margin-right: 36px; }
  .ib-pill--3 { justify-self: start; width: 316px; }
  .ib-pill--4 { justify-self: end; width: 322px; }
  .ib-pill--5 { grid-column: 1 / -1; justify-self: center; width: 380px; margin-top: 6px; }
  .ib-pill--1, .ib-pill--2 { align-self: start; }
}

/* ---- "Why Ctutor": five staggered rows beside the arcs graphic (the arcs are a ::before layer) ---- */
.ib-why {
  position: relative; isolation: isolate; min-height: 506px; padding: 28px 10px 0;
  background: var(--bg-image) center / cover no-repeat;
}
.ib-why::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--arcs) -85px 103px / 514px auto no-repeat; }
.ib-why .container { --gutter: 10px; }
.ib-why__list { margin: 51px -9px 0 0; }
.ib-why__item { margin-left: var(--x, 0px); }
.ib-why__item + .ib-why__item { margin-top: var(--gap, 20px); }
.ib-why__title { font: 400 16px/19.2px var(--font-sans); color: var(--c-ink); }
.ib-why__text { font: 400 13px/15.6px var(--font-sans); color: var(--c-text-help); margin-top: 1px; }
.ib-why__item:nth-child(1) { --x: 62px; }
.ib-why__item:nth-child(1) .ib-why__text { line-height: 16.9px; }
.ib-why__item:nth-child(2) { --x: 122px; --gap: 31px; }
.ib-why__item:nth-child(3) { --x: 145px; --gap: 14px; }
.ib-why__item:nth-child(4) { --x: 146px; --gap: 31px; }
.ib-why__item:nth-child(5) { --x: 110px; --gap: 17px; }
@media (min-width: 768px) {
  .ib-why { min-height: 618px; padding-top: 25px; }
  .ib-why::before { background-position: 199px 100px; background-size: 55% auto; }
  .ib-why .container { --gutter: 0px; }
  .ib-why__list { margin: 62px 0 0; }
  .ib-why__title { font-size: 20px; line-height: 24px; }
  .ib-why__text, .ib-why__item:nth-child(1) .ib-why__text { font-size: 16px; line-height: 30px; }
  .ib-why__item:nth-child(1) { --x: 359px; }
  .ib-why__item:nth-child(2) { --x: 443px; --gap: 42px; }
  .ib-why__item:nth-child(3) { --x: 461px; --gap: 52px; }
  .ib-why__item:nth-child(4) { --x: 463px; --gap: 42px; }
  .ib-why__item:nth-child(5) { --x: 411px; --gap: 39px; }
}

/* ---- Curved arrow, localities (cream + orange outline callout), CTA ---- */
.ib-arrow { display: flex; justify-content: center; height: 30px; }
.ib-arrow img { width: 70px; height: 43px; position: relative; z-index: 1; }
.pune-callout--cream { background: var(--c-bg-cream); }
.pune-accent--md { font-size: inherit; }
@media (min-width: 768px) {
  .ib-arrow { height: 73px; margin-top: 51px; }
  .ib-arrow img { width: 119px; height: 73px; }
}
@media (min-width: 1025px) {
  .pune-areas--ib { margin-top: 0; }
  .pune-areas--ib .pune-areas__text { padding-bottom: 64px; }
  .pune-areas--ib .pune-callout p { font-size: 19px; line-height: 31px; }
  .pune-areas--ib .pune-accent--md { font-size: 25px; }
  .pune-cta--ib .pune-cta__text { font-size: 19px; line-height: 31px; }
}

/* ==========================================================================
   4. "Why Indian Tutors Online..." (.wi-post). Desktop content column is x=150..1290 (container--narrow);
      most blocks are inset another 10px, matching the original 0 10px section padding.
   ========================================================================== */
.wi-accent { color: var(--c-brand); }
.wi-muted { color: var(--c-text-a58); }

/* ---- Hero ---- */
.wi-hero { padding: 48px 0 0; }
.wi-hero .container { --gutter: 10px; }
.wi-hero .breadcrumb { padding-left: 17px; }
.wi-hero .breadcrumb ol { font-size: 14px; line-height: 21px; }
.wi-hero .breadcrumb li:first-child { line-height: 25px; }
.wi-hero .breadcrumb [aria-current] { margin-top: 4px; }
.wi-hero__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-text-strong); text-align: center; margin: 70px calc(-1 * var(--gutter)) 0; letter-spacing: -.02em; }
.wi-hero__meta { font: 400 19px/30px var(--font-sans); color: var(--c-text); text-align: center; margin-top: 10px; }
.wi-hero__meta time { margin-left: .75em; }
.wi-hero__media { margin: 44px 9px 0; }
.wi-hero__media img { width: 100%; height: 220px; object-fit: cover; }
.wi-hero__subtitle { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); margin-top: 48px; letter-spacing: -.02em; }
.wi-hero__lead { font: 400 16px/27.2px var(--font-sans); color: var(--c-text-a58); margin-top: 20px; }
@media (min-width: 1025px) {
  .wi-hero { padding: 32px 0 0; }
  .wi-hero .container { --gutter: 20px; }
  .wi-hero .breadcrumb { padding-left: 0; }
  .wi-hero .breadcrumb ol, .wi-hero .breadcrumb li:first-child { font-size: 17px; line-height: 30px; }
  .wi-crumb-br { display: none; }
  .wi-hero .breadcrumb [aria-current] { margin-top: 0; }
  /* The source's separator is Font Awesome's solid angle-right (#000, ~6x10px), set 16px before the title */
  .wi-hero .breadcrumb ol { column-gap: 14px; }
  .wi-hero .breadcrumb { --crumb-angle-w: 8.5px; --crumb-angle-h: 13px; }
  .wi-hero__title { font-size: 34px; line-height: 40.8px; max-width: 1100px; margin: 80px auto 0; letter-spacing: normal; }
  .wi-hero__meta { font-size: 24px; }
  .wi-hero__media { max-width: 1188px; margin: 35px auto 0; }
  .wi-hero__media img { height: 630px; }
  .wi-hero__subtitle { font-size: 24px; line-height: 28.8px; text-align: center; max-width: 1000px; margin: 28px auto 0; letter-spacing: normal; }
  .wi-hero__lead { font-size: 18px; line-height: 34px; text-align: center; max-width: 1000px; margin: 19px auto 0; }
}
@media (min-width: 1281px) { .wi-hero .container { --gutter: 0px; } }

/* ---- Section heading row (icon + two-tone title + optional intro) ---- */
.wi-section { padding: 10px 0 20px; }
.wi-head { display: flex; flex-direction: column; align-items: flex-start; }
.wi-head__icon, .wi-head picture { width: 44px; height: auto; flex: none; }
.wi-head__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); margin-top: 18px; }
.wi-head__intro { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); margin-top: 20px; }
.wi-head__intro.wi-muted { color: var(--c-text-a58); }
.wi-head__title.wi-tight { letter-spacing: -.02em; }
@media (min-width: 768px) { .wi-head__title.wi-tight { letter-spacing: normal; } }
@media (min-width: 768px) {
  .wi-head { flex-direction: row; column-gap: var(--gap, 27px); }
  .wi-head__icon, .wi-head picture { width: var(--w, 44px); }
  .wi-head__text { padding-top: 8px; }
  .wi-head__title { margin-top: 0; }
}
@media (min-width: 1025px) {
  .wi-head__title { font-size: 25px; line-height: 30px; }
  .wi-head__intro { font-size: 18px; line-height: 30px; margin-top: 21px; }
}

/* ---- Stat cards ---- */
.wi-stats { padding: 40px 0; }
.wi-stats__list { margin-inline: 10px; gap: 20px; }
.wi-stats .stat-card { border-color: #B2B2B2; padding: 31px 20px 29px; }
.wi-stats .stat-card__icon { width: 52px; height: auto; margin: 0 auto -1px; }
.wi-stats .stat-card__value { font-size: 20px; font-weight: 600; }
.wi-stats .stat-card__label { margin-top: 20px; }
@media (min-width: 768px) {
  .wi-stats__list { max-width: 964px; margin-inline: auto; }
}
@media (min-width: 1025px) {
  .wi-stats { padding: 61px 0 40px; }
  .wi-stats .stat-card { padding: 30px 20px 31px; }
  .wi-stats .stat-card__icon { width: 48px; margin-bottom: 10px; }
  .wi-stats .stat-card__value { font-size: 23px; }
  .wi-stats .stat-card__label { margin-top: 10px; font-size: 19px; }
}

/* ---- "High Demand": photo + four peach pills ---- */
.wi-demand { padding-bottom: 21px; }
.wi-demand__grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: 10px; margin-top: 35px; }
.wi-demand__media img { width: 100%; height: 332px; object-fit: cover; border-radius: var(--r-20); }
.wi-demand__list { display: grid; row-gap: 22px; margin-top: 40px; }
.wi-demand__item {
  display: flex; flex-direction: column; align-items: center; gap: 23px; padding: 20px 20px 25px;
  background: #FEF6EC; border-radius: var(--r-10); text-align: center;
  font: 400 16px/24px var(--font-sans); color: var(--c-ink);
}
.wi-demand__item .icon { width: 32px; height: 26px; color: var(--c-ink); }  /* FA glyphs at the source's 26px font size (wide glyphs are 1.25em) */
@media (min-width: 768px) {
  .wi-demand__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: center; margin-top: 30px; }
  .wi-demand__list { margin-top: 0; }
  .wi-demand__item { flex-direction: row; gap: 12px; min-height: 56px; padding: 15px 20px 15px 27px; text-align: left; }
}
@media (min-width: 1025px) {
  .wi-demand { padding-bottom: 20px; }
  .wi-demand .wi-head__title { font-size: 24px; line-height: 28.8px; }
  .wi-demand__item { font-size: 18px; }
}

/* ---- Callout paragraph on peach ---- */
.wi-callout-wrap { padding-top: 10px; padding-bottom: 41px; }
.wi-callout {
  background: #FEF2E4; border-radius: var(--r-10); padding: 30px 30px 43px;
  font: 400 18px/30.6px var(--font-sans); color: var(--c-text-a58); text-align: center;
}
.wi-callout strong { color: var(--c-ink); }
@media (min-width: 1025px) {
  .wi-callout-wrap { padding-top: 20px; padding-bottom: 51px; }
  .wi-callout { margin-inline: 10px; padding: 30px max(20px, calc((100% - 848px) / 2)) 44px; font-size: 20px; line-height: 34px; }
}

/* ---- Subject cards (3 x 2) ---- */
.wi-subjects__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 25px; margin: 30px 10px 0; }
.wi-subject { border: 1px solid #B2B2B2; border-radius: var(--r-10); padding: 20px 20px 35px 21px; }
.wi-subject__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wi-subject__icon, .wi-subject picture { width: var(--w-m, var(--w)); height: auto; flex: none; }
.wi-subject__title { font: 600 21px/25.2px var(--font-sans); color: var(--c-ink); margin-top: var(--title-gap, 50px); }
.wi-subject__text { font: 400 16px/30px var(--font-sans); color: var(--c-text); margin-top: var(--text-gap, 38px); }
.wi-subject:nth-child(4) { margin-top: 16px; }
/* Phones: the source's icon-to-title and title-to-text gaps differ per card (measured in reference/.../mobile) */
.wi-subject:nth-child(1) { --text-gap: 35px; }
.wi-subject:nth-child(2) { --title-gap: 45px; }
.wi-subject:nth-child(4) { --title-gap: 54px; --text-gap: 42px; }
.wi-subject:nth-child(6) { --title-gap: 51px; }
@media (min-width: 768px) {
  .wi-subjects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 30px; }
  .wi-subject:nth-child(4) { margin-top: 0; }
  .wi-subjects__grid .wi-subject { --title-gap: 50px; --text-gap: 35px; }
}
@media (min-width: 1025px) {
  .wi-subjects { padding-bottom: 22px; }
  .wi-subject { padding: 21px 20px 34px 31px; }
  .wi-subject__head { flex-direction: row; gap: 33px; text-align: left; }
  .wi-subject__icon, .wi-subject picture { width: var(--w); }
  .wi-subject__title { font-size: 20px; line-height: 24px; margin-top: 0; }
  .wi-subject__text { font-size: 17px; margin-top: 37px; }
}

/* ---- Emphasis lines ---- */
.wi-emphasis.container { --container: 298px; padding-top: 26px; padding-bottom: 30px; }
.wi-emphasis { font: 400 21px/27.3px var(--font-sans); color: var(--c-ink); text-align: center; }
.wi-emphasis-wrap { padding-top: 20px; padding-bottom: 50px; }
.wi-emphasis--box { background: #FFF5E9; border-radius: var(--r-10); padding: 20px; margin-inline: 10px; }
@media (min-width: 1025px) {
  .wi-emphasis.container { --container: 1120px; padding-top: 6px; }
  .wi-emphasis { line-height: 32px; }
  .wi-emphasis-wrap { padding-top: 22px; }
  .wi-emphasis--box { margin-inline: 0; padding: 18px max(20px, calc((100% - 1044px) / 2)) 20px; line-height: 34px; }
}

/* ---- Tables (comparison and pricing) ---- */
.wi-vs { padding: 18px 0 10px; }
.wi-vs__title, .wi-cost__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); }
.wi-table { border-color: #B2B2B2; border-radius: 0; margin: 25px 0 0; overflow: visible; }
.wi-table table { min-width: 0; table-layout: fixed; }
.wi-table th, .wi-table td { border-color: #B2B2B2; }
/* The shared first-/last-row resets also hit the lone thead row and the first tbody row; restore the header rule */
.wi-post .wi-table thead th { border-bottom: 1px solid #B2B2B2; }
.wi-table th { font-size: 18px; line-height: 28px; padding: 11px 10px; }
.wi-table td { font-size: 16px; line-height: 25px; padding: 10.25px 10px; }
.wi-table--cost th:first-child { width: 56%; }
.wi-table--vs th:nth-child(1) { width: 34.4%; }
.wi-table--vs th:nth-child(2) { width: 32.3%; }
.wi-table--cost td { padding-block: 10px; }
@media (min-width: 1025px) {
  .wi-vs { padding-bottom: 10px; }
  .wi-vs__title { font-size: 25px; line-height: 30px; text-align: center; }
  .wi-table { margin: 26px auto 0; }
  .wi-table--vs { max-width: 1084px; }
  .wi-table--vs th:nth-child(1) { width: 26.6%; }
  .wi-table--vs th:nth-child(2) { width: 32.6%; }
  .wi-table th { font-size: 18px; line-height: 24px; padding: 12.5px 10px; }
  .wi-table--cost th { padding-block: 12px; }
  .wi-table td { font-size: 16px; line-height: 22px; padding: 11.5px 10px; }
}

/* ---- Benefits: photo + bullets ---- */
.wi-benefits__grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: 10px; margin-top: 35px; }
.wi-benefits__media img { width: 100%; height: 175px; object-fit: cover; border-radius: var(--r-10); }
.wi-bullets { gap: 15px; }
/* The source's icon-list text renders at 16px on phones and 18px on desktop (measured ink widths), with ~10px dots */
.wi-bullets li { padding-left: 18px; font-size: 16px; }
.wi-bullets li::before { left: 0; top: 10px; width: 10px; height: 10px; background: var(--c-ink); }
.wi-benefits .wi-bullets { margin-top: 40px; }
@media (min-width: 768px) {
  .wi-benefits__grid { grid-template-columns: 394px minmax(0, 1fr); column-gap: 40px; align-items: center; padding-inline: 20px; margin-top: 45px; }
  .wi-benefits .wi-bullets { margin-top: 0; }
}
@media (min-width: 1025px) {
  .wi-bullets { gap: 9px; }
  .wi-bullets li { padding-left: 18px; font-size: 18px; }
  .wi-benefits .wi-bullets li { padding-left: 19px; font-size: 17px; }
  .wi-benefits { padding-bottom: 30px; }
}

/* ---- Toolkit sticky notes (plain stacked list on phones) ---- */
.wi-teach { padding-bottom: 37px; }
.wi-notes { display: grid; row-gap: 37px; margin: 30px 10px 0; }
.wi-note { padding: 37px 10px 20px 40px; }
.wi-note__title { font: 600 17px/30px var(--font-sans); color: var(--c-ink); }
.wi-note__text { font: 400 17px/30px var(--font-sans); color: var(--c-text); margin-top: 1px; }
/* From 768px each note is a peach sheet with a peeled, slanted bottom edge (15px drop across the card) and a soft
   grey shadow under that edge only. Notes 1, 2 and 5 slope down to the right, 3 and 4 slope up to the right. */
@media (min-width: 768px) {
  .wi-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .wi-note { --drop: 15px; --skew: 2.44deg; position: relative; z-index: 0; min-height: 127px; }
  .wi-note::before, .wi-note::after { content: ""; position: absolute; z-index: -1; }
  .wi-note::before { inset: 0; background: var(--c-bg-peach); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--drop))); }
  .wi-note::after {
    left: 0; right: 0; top: calc(100% - var(--drop)); height: 7px; transform-origin: 0 0; transform: skewY(var(--skew));
    background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .2) 35%, rgba(0, 0, 0, .09) 70%, transparent);
  }
  .wi-note:nth-child(3)::before, .wi-note:nth-child(4)::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--drop)), 0 100%); }
  .wi-note:nth-child(3)::after, .wi-note:nth-child(4)::after { transform-origin: 100% 0; transform: skewY(calc(-1 * var(--skew))); }
}
@media (min-width: 1025px) {
  .wi-teach { padding-bottom: 34px; }
  .wi-notes { position: relative; display: block; height: 330px; margin: 40px 0 0; }
  .wi-note { position: absolute; width: 30.88%; left: var(--x); top: var(--y, 0px); }
  .wi-note:nth-child(1) { --x: 11.58%; }
  .wi-note:nth-child(2) { --x: 57.54%; }
  .wi-note:nth-child(3) { --x: 1.75%; --y: 160px; }
  .wi-note:nth-child(4) { --x: 34.39%; --y: 200px; padding-left: 41px; }
  .wi-note:nth-child(5) { --x: 67.19%; --y: 160px; padding-left: 41px; }
}

/* ---- Bullet sections (success, challenges, needs, tips) ---- */
.wi-list-section .wi-bullets { margin: 10px 10px 0; }
@media (min-width: 1025px) {
  .wi-list-section { padding-bottom: 30px; }
  .wi-list-section .wi-bullets { margin: 20px 0 0 79px; max-width: 983px; }
  .wi-list-section .wi-bullets--narrow { max-width: 853px; }
}

/* ---- Country pills and "Global Expansion" ---- */
.wi-countries { padding-bottom: 10px; }
.wi-countries__list { align-items: flex-start; margin-top: 40px; }
.wi-expansion { padding: 8px 0 36px; }
.wi-expansion__inner { margin-right: calc(-1 * var(--gutter)); }
.wi-expansion__title { font: 600 20px/24px var(--font-sans); color: var(--c-ink); }
.wi-expansion__text { font: 400 16px/27.2px var(--font-sans); color: var(--c-text-a58); margin-top: 5px; }
.wi-expansion .wi-expansion__rule { margin: 36px 0 0 calc(-1 * var(--gutter)); max-width: none; }
@media (min-width: 768px) {
  .wi-countries__list { flex-wrap: nowrap; justify-content: flex-start; gap: 41px; margin: 51px 0 0 61px; }
}
@media (min-width: 1025px) {
  .wi-countries { padding-bottom: 20px; }
  .wi-expansion__inner { max-width: 1003px; margin-inline: auto; }
  .wi-expansion__text { font-size: 20px; line-height: 30px; }
  .wi-expansion .wi-expansion__rule { margin: 35px 0 0; }
}

/* ---- Cost table section ---- */
.wi-cost { padding: 18px 0 10px; }
.wi-cost__title { font-weight: 400; }
.wi-cost__intro { font: 400 16px/27.2px var(--font-sans); color: var(--c-text-a58); margin-top: 5px; }
.wi-cost .wi-table { margin-top: 21px; }
.wi-cost__outro { font: 400 16px/27.2px var(--font-sans); color: var(--c-ink); margin-top: 20px; }
@media (min-width: 1025px) {
  .wi-cost__title { font-size: 25px; line-height: 30px; text-align: center; }
  .wi-cost__intro, .wi-cost__outro { font-size: 19px; line-height: 30px; text-align: center; }
  .wi-cost .wi-table { max-width: 1028px; margin-top: 19px; }
  .wi-cost__outro { margin-top: 22px; }
}

/* ---- Tutor strip (inset peach band) and FAQ ---- */
.wi-tutors.section { padding: 26px 0 42px; }
.wi-tutors .tutors__strip { max-width: none; margin: 22px 10px 0; padding: 69px 0 73px; }
@media (min-width: 1025px) {
  .wi-tutors.section { padding: 10px 0 89px; }
  .wi-tutors .tutors__strip { max-width: 1328px; margin: 22px auto 0; padding: 69px 0 72px; }
}
.wi-faq { padding-bottom: 73px; }
.wi-faq__title { font: 600 21px/27.3px var(--font-sans); color: var(--c-ink); text-align: center; margin-inline: calc(-1 * var(--gutter)); }
/* Phones: full-bleed rows, 20px questions; the text box stays 317.6px wide (the source's wraps), and the icon
   overlaps it by 2px so its centre lands at x=352.5 as measured */
.wi-faq .accordion { margin: 41px calc(-1 * var(--gutter)) 0; }
.wi-faq .accordion__trigger { gap: 0; padding: 15px 31.5px 15px 31px; }
.wi-faq .accordion__panel { padding: 31px 30px 30px; }
/* The source's icons are thin black glyphs: a wide chevron-down when closed and a stemmed up arrow when open
   (not the shared rotating chevron) */
.wi-faq .accordion__trigger .icon { display: none; }
.wi-faq .accordion__trigger::after {
  content: ""; flex: none; width: 12px; height: 6px; margin-left: -2.1px; background: var(--c-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Cpath d='M1.5 1l8.5 8.5L18.5 1' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wi-faq .accordion__trigger[aria-expanded="true"]::after {
  height: 12px; mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 21'%3E%3Cpath d='M7 2.5V21M1 8l6-6 6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
  .wi-faq__title { text-align: left; margin-inline: 0; }
  .wi-faq .accordion { margin: 39px 0 0; }
  .wi-faq .accordion__trigger { gap: 20px; padding: 18px 30px 18px 31px; }
  .wi-faq .accordion__trigger::after { width: 20px; height: 11px; margin: 0 1.5px 0 0; }
  .wi-faq .accordion__trigger[aria-expanded="true"]::after { height: 21px; }
}
@media (min-width: 1025px) {
  .wi-faq__title { font-size: 24px; line-height: 32px; }
  .wi-faq .accordion__trigger { padding: 14px 30px 14px 32px; }
  .wi-faq .accordion__panel { padding: 31px 85px 27px 65px; }
}
/* Desktop: the source footer's columns start ~74px below its top edge, 30px more than the shared footer's 44px;
   the extra space goes under the article so the footer columns land where the capture has them (y=7480) */
@media (min-width: 1025px) {
  .wi-article { padding-bottom: 25px; }
}
/* The masked CSS FAQ icons keep a system colour in Windows high-contrast mode */
@media (forced-colors: active) {
  .wi-faq .accordion__trigger::after { background: CanvasText; }
}

/* ==========================================================================
   5. IB IA guide (.ia-post): port of the post's own hand-coded wrapper CSS. Poppins body copy; the H1 and the
      orange section titles render in Open Sans 800 (the theme's heading face wins over the wrapper's Poppins in
      every capture). Mobile-first versions of the source's own 768px / 992px breakpoints.
   ========================================================================== */
.ia-page { padding-block: 10px; }
.blog-wrapper { padding: 20px 0 60px; font-family: var(--font-article); color: #333333; line-height: 1.75; background: var(--c-white); }
.blog-wrapper a { text-decoration: none; color: inherit; transition: color var(--t-fast) ease; }
.blog-wrapper :where(h1, h2, h3, h4) { font-weight: 700; line-height: 1.2; margin: 8px 0 16px; }

/* ---- Breadcrumbs, title, meta, hero ---- */
.blog-wrapper__crumbs { font: 500 13px/1.75 var(--font-article); color: #7A7A7A; margin-bottom: 20px; padding: 0 18px; }
.blog-wrapper__crumbs ol { display: inline; list-style: none; padding: 0; }
.blog-wrapper__crumbs li { display: inline; }
.blog-wrapper__crumbs li + li::before { content: ">"; color: #B0B0B0; margin: 0 8px; }
.blog-wrapper__crumbs a:hover { color: var(--c-post-orange); }
.blog-wrapper__crumbs strong { color: #2D2D2D; font-weight: 700; }
.blog-wrapper__header { padding: 10px 18px 16px; }
.blog-wrapper__title { font: 800 28px/1.25 var(--font-alt); color: #222222; max-width: 960px; margin: 8px 0 14px; }
.blog-wrapper__meta { display: flex; gap: 18px; align-items: center; color: #7C7C7C; font: 600 14px/1.75 var(--font-article); margin-bottom: 10px; }
.blog-wrapper__hero { margin: 0 18px 30px; border-radius: var(--r-8); overflow: hidden; background: #F4F4F4; box-shadow: 0 6px 24px rgba(0, 0, 0, .05); }
.blog-wrapper__hero img { width: 100%; height: auto; object-fit: cover; }

/* ---- Body copy ---- */
.blog-wrapper__content { padding: 0 18px 40px; }
.blog-wrapper__content p { font-size: 16px; line-height: 1.8; color: #4A4A4A; margin: 0 0 18px; }
.blog-wrapper__content .blog-wrapper__highlight {
  background: #FDF3E7; color: #2F2F2F; border-left: 5px solid var(--c-post-orange); padding: 16px 24px;
  font-size: 19px; font-weight: 700; line-height: 1.75; margin: 32px 0 36px; border-radius: 0 8px 8px 0;
}
.blog-wrapper__section { padding: 16px 0 32px; border-bottom: 1px solid #ECECEC; }
.blog-wrapper__section--faq { border-bottom: 0; margin-top: 20px; }
.blog-wrapper__section-title { font: 800 23px/1.3 var(--font-alt); color: var(--c-post-orange); margin-bottom: 18px; }
.blog-wrapper__sub-title { font-size: 20px; color: #222222; margin: 24px 0 14px; }
.blog-wrapper__list { list-style: disc; padding-left: 20px; margin: 16px 0 20px; }
.blog-wrapper__list li { margin-bottom: 10px; color: #444444; font-size: 15.5px; }
.blog-wrapper__list li strong { color: #222222; }
.blog-wrapper__orange { color: var(--c-post-orange); font-weight: 700; }

/* ---- "What makes a good topic" cards ---- */
.ia-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 26px; }
.ia-card { border: 1px solid #F2DAC0; background: var(--c-white); padding: 24px 18px; border-radius: var(--r-10); text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .03); }
.ia-card__icon {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: var(--r-round); background: #FFF3E6; color: var(--c-post-orange);
  /* The source's numerals render in the browser's serif fallback (Times-like bold), not Poppins: match the capture */
  font: 700 24px/1 "Times New Roman", Times, serif;
}
.ia-card h3 { font-size: 18px; color: #222222; margin-bottom: 8px; }
.blog-wrapper__content .ia-card p { font-size: 14.5px; color: #555555; margin-bottom: 0; }

/* ---- Question boxes ---- */
.ia-questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
.ia-question { background: #FDF6EE; border-left: 4px solid var(--c-post-orange); padding: 18px 20px; border-radius: 6px; }
.ia-question h3 { color: var(--c-post-orange); font-size: 17px; margin-bottom: 8px; }
.blog-wrapper__content .ia-question p { font-size: 14.5px; color: #4A4A4A; margin-bottom: 0; }

/* ---- Subject idea boxes ---- */
.ia-subjects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.ia-subject { background: var(--c-white); border: 1px solid #EBE0D3; border-radius: var(--r-10); padding: 22px; box-shadow: 0 4px 12px rgba(0, 0, 0, .02); }
.ia-subject h3 { color: var(--c-post-orange); font-size: 20px; font-weight: 800; margin-bottom: 12px; }
/* The source's .list has no top margin, so the heading's 12px is the whole gap to the first idea */
.ia-subject .blog-wrapper__list { margin-top: 0; }

/* ---- Mistakes panel ---- */
.ia-mistakes { background: #FAEDE0; padding: 34px 30px; margin: 34px 0; border-radius: var(--r-10); }
.ia-mistakes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 36px; margin-top: 18px; }
.ia-mistake h3 { color: var(--c-post-orange); font-size: 17px; margin-bottom: 6px; }
.blog-wrapper__content .ia-mistake p { font-size: 14.5px; color: #4B4B4B; margin-bottom: 0; }

/* ---- Pull quote, FAQ list, CTA ---- */
.blog-wrapper__quote { text-align: center; color: var(--c-post-orange); font-size: 19px; font-weight: 700; line-height: 1.6; max-width: 900px; margin: 40px auto; padding: 0 15px; }
.blog-wrapper__content .blog-wrapper__quote p { font: inherit; color: inherit; margin: 0; }
.ia-faq { border: 1px solid #EDEDED; padding: 18px 22px; border-radius: var(--r-8); margin-bottom: 14px; background: var(--c-white); }
.ia-faq h3 { color: #222222; font-size: 17px; margin-bottom: 6px; }
.blog-wrapper__content .ia-faq p { font-size: 15px; color: #555555; margin-bottom: 0; }
.blog-wrapper__cta { background: #FFF8F2; border: 1px solid #F4D4B3; border-radius: var(--r-12); padding: 36px 28px; text-align: center; margin-top: 36px; }
.blog-wrapper__cta h2 { font-size: 23px; font-weight: 800; color: #222222; margin-bottom: 12px; }
.blog-wrapper__content .blog-wrapper__cta p { max-width: 740px; margin: 0 auto 22px; font-size: 15.5px; color: #555555; }
.blog-wrapper .blog-wrapper__btn {
  display: inline-block; background: var(--c-post-orange); color: var(--c-white); padding: 12px 28px; border-radius: var(--r-8);
  font-size: 15px; font-weight: 700; border: 1px solid var(--c-post-orange);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.blog-wrapper .blog-wrapper__btn:hover { background: var(--c-post-orange-hover); border-color: var(--c-post-orange-hover); transform: translateY(-1px); }
.blog-wrapper .blog-wrapper__btn:focus-visible { outline-offset: 3px; }

@media (min-width: 769px) {
  .blog-wrapper__crumbs, .blog-wrapper__header, .blog-wrapper__content { padding-left: 30px; padding-right: 30px; }
  .blog-wrapper__hero { margin-left: 30px; margin-right: 30px; }
  .blog-wrapper__title { font-size: 34px; }
  .blog-wrapper__section-title { font-size: 28px; }
  .blog-wrapper__quote { font-size: 23px; }
  .blog-wrapper__cta h2 { font-size: 28px; }
}
@media (min-width: 993px) {
  .blog-wrapper__title { font-size: 42px; }
  .ia-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ia-questions, .ia-subjects, .ia-mistakes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktop: the source footer's columns start ~76px below its top edge, 31px more than the shared footer's 44px;
   the extra space goes under the article so the footer sits 398px below the CTA heading as in the capture */
@media (min-width: 1025px) {
  .ia-page { padding-bottom: 41px; }
}