/* Success Stories: phones and tablets (up to 860px) */

/* Message wall: when only two columns fit, the third column must not drop into a squeezed second row */
@media (min-width: 721px) and (max-width: 960px) {
  .msg-wall { grid-template-rows: 100% !important; }
  .msg-col:nth-child(3) { display: none !important; }
}

/* "Congratulations ... on your placement!" line: plain text with the red dot, same as the Placed Students page */
.hero-live { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font-family: var(--display, 'Plus Jakarta Sans', system-ui, sans-serif) !important; color: var(--ink-2) !important; font-size: clamp(.62rem, 2.8vw, .85rem); }
.hero-live .txt { font-weight: 500; }
.hero-live b { font-family: inherit !important; font-weight: 600 !important; color: #fff !important; }

/* Stats row of five (laptops): every number and label on one row, sized to its card */
@media (min-width: 861px) {
  .stat-strip .stat { container-type: inline-size; min-width: 0; }
  .stat-strip .stat .num { white-space: nowrap; font-size: min(2.4rem, calc(100cqi / 3.9)) !important; }
  .stat-strip .stat .lbl { white-space: nowrap; font-size: min(0.82rem, calc(100cqi / 12.2)) !important; }
}

/* Learner shorts heading: "Real Journeys" / "Remarkable Outcomes" (coral) on every screen */
.ss-reels-h .ss-row { display: block; white-space: nowrap; }
.ss-reels-h .ss-accent { color: var(--coral); }

@media (max-width: 860px) {
  .ss-reels-h { line-height: 1.12 !important; font-size: min(calc(30px + (100vw - 320px) * 0.04), calc((100vw - 32px) / 11.1)) !important; }
  /* Hero heading: two white lead rows, each on one line, then "Sir, ho gaya" in coral and in quotes, as on desktop */
  .hero-title .t-lead { font-size: min(calc(26px + (100vw - 320px) * 0.0276), calc((100vw - 32px) / 11.9)) !important; line-height: 1.18 !important; }
  .hero-title .t-lead span { white-space: nowrap; }
  .hero-title .t-punch {
    display: block !important;
    margin-top: calc(6px + (100vw - 320px) * 0.0103) !important;
    padding: 0 !important;
    color: var(--coral) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
    white-space: nowrap;
    font-size: min(calc(40px + (100vw - 320px) * 0.0414), calc((100vw - 32px) / 7.4), 60px) !important;
  }
  /* Stats: "500+ Learners Placed" featured on top, the other four as a 2 x 2 of separate cards, one-row labels */
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .stat-strip .stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(14px + (100vw - 320px) * 0.0138) 8px !important; border: 1px solid var(--line); border-radius: 14px; }
  .stat-strip .stat .num { font-size: calc(26px + (100vw - 320px) * 0.0345) !important; }
  .stat-strip .stat .lbl { margin-top: 6px !important; white-space: nowrap; font-family: var(--body, inherit); color: var(--ink-2); line-height: 1.3; font-size: min(calc(12.5px + (100vw - 320px) * 0.0121), calc((50vw - 36px) / 11)) !important; }
  .stat-strip .stat:last-child { grid-column: 1 / -1 !important; order: -1; padding-top: calc(16px + (100vw - 320px) * 0.0172) !important; padding-bottom: calc(16px + (100vw - 320px) * 0.0172) !important; border-color: var(--coral); background: linear-gradient(180deg, rgba(242, 86, 75, 0.14), rgba(242, 86, 75, 0.04)), var(--bg-2); }
  .stat-strip .stat:last-child .num { font-size: calc(42px + (100vw - 320px) * 0.0552) !important; }
  .stat-strip .stat:last-child .lbl { color: #fff; font-weight: 600; font-size: calc(15px + (100vw - 320px) * 0.0138) !important; }


  /* FAQ: heading on one row, sentence in no more than two rows (same method as the homepage) */
  .faq .fq-title { white-space: nowrap !important; text-wrap: nowrap; font-size: min(calc(24px + (100vw - 320px) * 0.0207), calc((100vw - 32px) / 13.6)) !important; }
  .faq .fq-sub { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; text-align: center; text-wrap: balance; line-height: 1.45 !important; letter-spacing: -0.1px; font-size: min(16px, calc((100vw - 8px) * 0.0355)) !important; }
}
/* Tablets: hero text and the phone chat side by side, so the hero fits about one screen */
@media (min-width: 700px) and (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; gap: 24px !important; align-items: center !important; }
  .hero-copy { container-type: inline-size; max-width: none !important; margin: 0 !important; }
  .hero-title .t-lead { font-size: min(34px, calc(100cqw / 11.9)) !important; }
  .hero-title .t-punch { font-size: min(52px, calc((100cqw - 8px) / 6.4)) !important; }
  .hero-sub { font-size: 15px !important; max-width: none !important; }
  .hero-actions { flex-wrap: nowrap !important; gap: 10px !important; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 12px !important; padding-right: 12px !important; font-size: min(15px, calc((100cqw - 60px) / 22)) !important; }
  .hero-live { font-size: min(0.8rem, calc(100cqw / 34)) !important; }
  .hero-phone-wrap { align-self: center; }

  /* Same look as desktop: left-aligned, "Sir, ho gaya" in quotes at the heading size, no typing cursor */
  .hero-copy { text-align: left !important; }
  .hero-copy .eyebrow { margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }
  .hero-sub { margin-left: 0 !important; margin-right: 0 !important; }
  .hero-actions, .faces { justify-content: flex-start !important; }
  .faces-text { text-align: left !important; }
  .hero-title .t-lead { line-height: 1.15 !important; }
  .hero-title .t-punch { display: block !important; position: static; margin-top: 0.22em !important; padding: 0 !important; color: var(--coral) !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; font-size: min(34px, calc(100cqw / 11.9)) !important; }
  .hero-title .t-punch::before, .hero-title .t-punch::after { content: none !important; display: none !important; }
  .hero-title .t-punch .ss-q { display: inline !important; }
  .phone { width: min(270px, 100%) !important; }
}

/* Tablets: section headings in one scale, sentences under them in at most two rows */
@media (min-width: 600px) and (max-width: 960px) {
  .msgs .section-head, .yt-sec .section-head, .greviews .section-head, .reels-sec .section-head { max-width: none !important; }
  section .section-head > p:not(.eyebrow) { max-width: 760px !important; text-wrap: balance; }
  .ss-reels-h { font-size: min(calc(30px + (100vw - 600px) * 0.0167), 36px) !important; }
}
@media (min-width: 700px) and (max-width: 860px) {
  .hero-sub { font-size: min(15px, calc(100cqw / 27)) !important; line-height: 1.5 !important; }
}

@keyframes ss-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-title .t-punch::after { animation: none; } }