/* how-it-works.css: /how-it-works/ only (body.page-how-it-works). Hero spacing, the four coloured step cards with
   their white sub-cards, photo card, banner card and "CTutor tip" rows, and the "Want to become a Tutor?" block.
   Mobile-first like main.css; numbers are the measured bboxes from reference/how-it-works (390 and 1440). */

/* The source never loads a Medium cut: every weight-500 Circular Std label (Step/tip pills, perk labels, buttons)
   renders with the Book face. "Circular Std No Medium" (main.css section 1) maps 500 to Book for the page content;
   the shared header and footer keep the default family. */
.page-how-it-works main { --font-sans: "Circular Std No Medium", "Helvetica Neue", Arial, sans-serif; font-family: var(--font-sans); }

/* ---- Hero: H1, 10px, intro (two forced lines) ---- */
.hiw-hero { padding: 48px 0 14px; }
.hiw-hero .section-title { margin-inline: calc(-1 * var(--gutter)); }
.hiw-hero .section-intro { max-width: none; padding-inline: 2px; }
/* The source's two-line headings measure whole pixels (58px on phones for two 28.8px lines, 130px on desktop for
   two 64.8px lines): keep those boxes so everything below lands on the same pixel rows. */
.hiw-hero .section-title, .cta-discover .section-title--hero, .step--1 .step__title { min-height: 58px; }
@media (min-width: 768px) {
  .hiw-hero { padding: 64px 0 24px; }
  .hiw-hero .section-title { margin-inline: auto; }
  .hiw-hero .section-title, .cta-discover .section-title--hero, .step--1 .step__title { min-height: 0; }
  .hiw-hero .section-intro { max-width: 563px; padding-inline: 0; }
}
@media (min-width: 1025px) {
  .hiw-hero { padding: 80px 0 30px; }
  .hiw-hero .section-title, .cta-discover .section-title--hero { min-height: 130px; }
}

/* ---- Steps: an ordered list of coloured cards (93% wide on phones, the full 1250px box on desktop) ---- */
.hiw-steps { padding: 32px 0 48px; }
.hiw-steps__list { display: grid; row-gap: 50px; padding-inline: 0; }
.step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 93%; margin-inline: auto; padding: 20px;
  background: var(--step-bg); border-radius: var(--r-20);
}
.step--1 { --step-bg: var(--c-step-1); }
.step--2 { --step-bg: var(--c-step-2); }
.step--3 { --step-bg: var(--c-step-3); }
.step--4 { --step-bg: var(--c-step-4); }
.step__title { font: 600 24px/28.8px var(--font-sans); color: var(--c-text-strong); }
.step__intro { font: 400 16px/30px var(--font-sans); color: var(--c-text-strong); }

/* Row of white sub-cards: stacked on phones (32px apart, measured card top to card top), two columns from 768px */
.step__row { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin: 14px 0 30px; }
.step--2 .step__row { margin-bottom: 31px; }
.step--3 .step__row { margin-bottom: 60px; }
.step--4 .step__row { margin-bottom: 60px; }

.step-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--c-white); border-radius: var(--r-10); padding: 20px 20px 34px;
}
.step-card__img { width: var(--w, 100%); margin-inline: auto; }
.step-card__media--end .step-card__img { margin-right: 0; }
/* The certified-teacher graphic sits in a fixed 208px box, pinned to the bottom (as measured) */
.step-card__img--fixed { height: 208px; object-fit: contain; object-position: bottom center; }
.step-card__title { margin-top: 20px; }
.step-card__text { margin-top: 20px; font: 400 16px/20px var(--font-sans); color: var(--c-text-strong); }
.step-card--flush-end { padding-right: 0; }

/* "Connect & Chat": photo background under a #313131 58% scrim, white text pinned to the bottom */
.step-card--photo {
  position: relative; isolation: isolate; overflow: hidden; padding-top: 10px;
  background: var(--c-white) var(--bg-image-sm, var(--bg-image)) left top / cover no-repeat;
}
.step-card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(49, 49, 49, .58); }
.step-card__badge { align-self: flex-start; margin-bottom: 164px; font-size: 16px; line-height: 16px; }
.step-card--photo .step-card__title { margin-top: auto; color: var(--c-white); }
.step-card--photo .step-card__text { color: var(--c-white); }

/* "Your Satisfaction Guaranteed": the phone mock-up is a background, above the text on phones, right on desktop */
.step-card--banner {
  justify-content: flex-end; min-height: 380px;
  background: var(--c-white) var(--bg-image-sm, var(--bg-image)) top center / contain no-repeat;
}
.step-card--banner .step-card__title { margin-top: 0; }
.step-card--banner .step-card__text { max-width: 599px; }

/* "CTutor tip": 1px divider, pill + question, then the answer (side by side from 768px) */
.step__tip { align-self: stretch; display: grid; row-gap: 15px; padding: 18px 0 15px; border-top: 1px solid var(--c-line-tip); }
.step__tip-text { font: 400 16px/20px var(--font-sans); color: var(--c-text-strong); }
.step__tip-question .step__tip-text { margin-top: 20px; }
/* The 148x42 (138x40 on phones) "CTutor tip" pill is main.css .eyebrow--tip */

@media (min-width: 768px) {
  .hiw-steps { padding: 64px 0; }
  .hiw-steps__list { padding-inline: var(--gutter); }
  .step { width: auto; margin-inline: 0; padding: 40px; }
  .step__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 41px; margin: 15px 0 30px; }
  .step--2 .step__row, .step--3 .step__row, .step--4 .step__row { margin-bottom: 30px; }
  .step__row--single { grid-template-columns: minmax(0, 1fr); }
  .step-card__text { max-width: 90%; }
  .step-card__badge { font-size: 13px; line-height: 13px; }
  .step__tip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; padding: 0 40px 0 0; }
  .step__tip-question { padding: 20px 20px 34px; }
  .step__tip-answer { padding: 20px; max-width: 485px; }
  .step__tip-question .step__tip-text { max-width: 445px; }
  /* Tablet: keep the mock-up above the text so it never overlaps it (the source overlapped at 768px) */
  .step-card--banner { min-height: 0; padding-top: 260px; background-size: auto 240px; }
}
@media (min-width: 1025px) {
  .hiw-steps { padding: 80px 0; }
  .step { padding: 50px; }
  .step__title { font-size: 54px; line-height: 60px; }
  .step__intro { max-width: 518px; }
  .step--4 .step__row { grid-template-columns: minmax(0, 549fr) minmax(0, 560fr); }
  .step-card--photo { background-image: var(--bg-image); }
  .step-card--banner {
    width: calc(100% - 40px); min-height: 405px; padding-top: 20px;
    background-image: var(--bg-image); background-position: right center; background-size: contain;
  }
}

/* ---- Tutor carousel arrows: the source's thin eicons chevrons, 16px on phones and 24px from 768px, drawn against
   the outer edge of their 30px hit area (glyph centres 8px / 12.5px in from the viewport edge, as measured) ---- */
.carousel--tutors .carousel__arrow .icon { width: 16px; height: 16px; }
/* Phone slides measure 160x215 on the source (a touch taller than the 317x424 desktop crop) */
.carousel--tutors .tutor-card img { aspect-ratio: 160 / 215; }
.carousel--tutors .carousel__arrow--prev { justify-items: start; }
.carousel--tutors .carousel__arrow--next { justify-items: end; }
@media (min-width: 768px) {
  .carousel--tutors .carousel__arrow .icon { width: 24px; height: 24px; }
  .carousel--tutors .tutor-card img { aspect-ratio: 317 / 424; }
}

/* ---- "Want to become a Tutor?": heading, intro, button, video, four perks ---- */
.hiw-join { padding: 32px 0 91px; }
.hiw-join .section-intro { margin-top: 1px; }
.hiw-join__cta { margin-top: 15px; }
.hiw-join .video-block { margin: 11px 16px 0; }
.hiw-join__perks { margin-top: 31px; padding-left: 26px; text-align: left; }
@media (min-width: 768px) {
  .hiw-join { padding: 32px 0 120px; }
  .hiw-join .video-block { margin: 31px auto 0; }
  .hiw-join__perks { margin-top: 21px; padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .hiw-join__perks .perk { padding: 0 20px; }
}
@media (min-width: 1025px) {
  .hiw-join { padding-bottom: 187px; }
  .hiw-join__perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
}