/*
 * Home hero: fit the first screen (D-021). Loaded only on the home page (index.blade.php).
 * Desktop/laptop only (>= 992px wide); phones keep their own layout from style.css.
 *
 * Every vertical size scales with the viewport height (vh) between a floor and the original
 * Figma size, so the whole hero (badge, heading, #HarDoctorHogaInsured, product cards and the
 * illustration strip) fits under the 64px header on:
 *   - a 768px-tall viewport, and
 *   - a 1366x768 laptop, where the browser chrome leaves ~657px.
 * Taller screens grow back towards the original sizes. Widths are untouched.
 */
@media (min-width: 992px) {
  .homepage-figma-bg .doctor-ecosystem-banner {
    padding-top: clamp(12px, 2.6vh, 44px);
  }

  .homepage-figma-bg .eco-badge-wrapper {
    margin-top: 0;
    margin-bottom: clamp(10px, 2vh, 24px);
  }

  /* heading: both columns 24px (owner, 19 Oct; was 26-36px) */
  .homepage-figma-bg .hero-heading-row {
    margin-bottom: clamp(8px, 1.8vh, 21px);
    padding: 4px 0 6px;
    align-items: stretch;
  }
  .homepage-figma-bg .hero-heading-left h1 {
    font-size: var(--cy-fs-3xl); /* 24px on every desktop screen (owner, 19 Oct) */
    line-height: 1.3;
  }
  /* owner, 19 Oct: the right column ("One Stop Ecosystem / for Medical Professionals") is the same
     size as "India's #1* Doctor's Choice" (24px). The row is widened from 730px so it stays on two lines. */
  .homepage-figma-bg .hero-heading-row {
    max-width: 1000px;
  }
  .homepage-figma-bg .hero-heading-right .hero-line,
  .homepage-figma-bg .hero-heading-right .script-text {
    font-size: var(--cy-fs-3xl); /* 24px on every desktop screen (owner, 19 Oct) */
    line-height: 1.3;
  }
  .homepage-figma-bg .hero-heading-right .hero-line {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .homepage-figma-bg .hero-heading-right .hero-line + .hero-line {
    margin-top: clamp(2px, 0.6vh, 8px);
  }
  .homepage-figma-bg .hero-divider {
    height: auto;
    align-self: stretch;
    margin-top: 0;
  }

  /* #HarDoctorHogaInsured brush: was 176px tall at 951px wide */
  .homepage-figma-bg .brush-banner {
    width: auto;
    margin-bottom: clamp(8px, 1.8vh, 30px);
  }
  .homepage-figma-bg .brush-bg {
    width: auto;
    max-width: 100%;
    /* OLD (pre 2026-10-21): height: clamp(72px, 14vh, 176px);  Why: owner - bigger hashtag (D-034); the 4vh
       it gains comes off the illustration below, so the hero still fits a 768px-tall screen. */
    height: clamp(88px, 18vh, 210px);
  }

  /* product cards: 86px boxes (109px for the active/hovered one) at full size */
  .homepage-figma-bg .icon-row {
    --hero-box: clamp(60px, 10vh, 86px);
    --hero-box-active: calc(var(--hero-box) * 1.27);
    gap: clamp(48px, 7vw, 94px);
    /* owner, 17 Oct: illustrations a little further down from the cards */
    margin-bottom: clamp(18px, 3.2vh, 44px);
  }
  .homepage-figma-bg .icon-box {
    width: var(--hero-box);
    height: var(--hero-box);
    border-radius: calc(var(--hero-box) * 0.23);
  }
  .homepage-figma-bg .icon-box svg {
    max-width: calc(var(--hero-box) * 0.49);
    max-height: calc(var(--hero-box) * 0.49);
  }
  .homepage-figma-bg .feature-card.active .icon-box {
    width: var(--hero-box-active);
    height: var(--hero-box-active);
    border-radius: calc(var(--hero-box-active) * 0.23);
  }
  .homepage-figma-bg .feature-card.active .icon-box svg {
    max-width: calc(var(--hero-box-active) * 0.48);
    max-height: calc(var(--hero-box-active) * 0.48);
  }
  /* labels never get narrower than the longest word ("Establishment") needs */
  .homepage-figma-bg .card-label {
    width: max(var(--hero-box), 84px);
  }
  .homepage-figma-bg .feature-card.active .card-label {
    width: max(var(--hero-box-active), 104px);
  }
  /* the rays beside the active card follow the box size */
  .homepage-figma-bg .feature-card.active::before,
  .homepage-figma-bg .feature-card.active::after {
    height: calc(var(--hero-box-active) * 0.58);
  }

  /* illustration strip: full width, edge to edge (owner, 19 Oct). The SVG is 1440x228, so its
     natural height is ~15.8% of the width. Where the screen is too short for that, the strip keeps
     its full width and only the bottom (feet/floor) is trimmed: object-fit cover anchored to the top.
     50.5vh - 152px is the room left under the cards at 657-768px tall screens (measured). */
  .homepage-figma-bg .bottom-image {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .homepage-figma-bg .bottom-image img {
    display: block;
    width: 100% !important;
    max-width: none;
    /* OLD (pre 2026-10-21): height: clamp(110px, calc(46.5vh - 152px), 15.6vw); object-fit: cover; object-position: center top;
       Why: owner (D-035) - "do not crop the illustration, it's okay if it goes a little down". The strip now
       always shows in full at its own proportions (1440 x 228), so on short screens the hero runs past the fold. */
    height: auto;
  }
}

/* D-034 (owner): the home hero H1 "India's #1* Doctor's Choice" stays in its own case, not uppercase like the
   other H1s (typography.css). */
.homepage-figma-bg .hero-heading-left h1 { text-transform: none !important; }

/* HM-08 (2026-10-22): the tile labels were 11px white on #F05D49 (contrast 3.3:1). A deeper coral (#C2412E, 5.1:1 with
   white, WCAG AA) and 12px text keep the look while making them readable. */
.homepage-figma-bg .card-label { background: #c2412e; font-size: 12px; font-weight: 500; }
/* HM-15: the mid-page CTA's text was 11px on phones */
@media (max-width: 767px) {
  .homepage-figma-bg .ecosystem-cta-btn-primary, .homepage-figma-bg .ecosystem-cta-btn-secondary { font-size: 12px; line-height: 16px; }
}

/* D-111: the brief's subhead beside the H1 (replaces "One Stop Ecosystem for Medical Professionals") */
.homepage-figma-bg .hero-heading-right .hero-sub { margin: 0; max-width: 46ch; font: 400 17px/26px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-700, #4a423d); text-align: left; }
@media (max-width: 767px) { .homepage-figma-bg .hero-heading-right .hero-sub { font-size: 15px; line-height: 23px; text-align: center; margin: 0 auto; } }

/* D-217 (owner, 4 Nov): the hero heading "Insurance for Doctors in India" and its paragraph, centred under the badge.
   OLD (D-191): the two-column .hero-heading-row ("India's #1* Doctor's Choice" | "One Stop Ecosystem …") at 24px. */
.homepage-figma-bg .hero-intro { max-width: 860px; margin: 0 auto clamp(10px, 2vh, 22px); padding: 0 20px; text-align: center; }
.homepage-figma-bg .hero-intro h1 { margin: 0; font: 700 clamp(28px, 2.7vw, 42px)/1.12 var(--cy-font, Inter, sans-serif); letter-spacing: -.035em; color: #15110f; text-transform: none !important; text-wrap: balance; }
.homepage-figma-bg .hero-intro .gradient-num { background: linear-gradient(248.55deg, #f05d49 .89%, #89352a 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.homepage-figma-bg .hero-intro__sub { max-width: 66ch; margin: 12px auto 0; font: 400 16.5px/1.6 var(--cy-font, Inter, sans-serif); color: #4a423d; text-wrap: pretty; }
@media (max-width: 767px) {
  .homepage-figma-bg .hero-intro { padding: 0 4px; }
  .homepage-figma-bg .hero-intro__sub { font-size: 15px; line-height: 1.55; }
}
/* D-218 / D-219: the hero paragraph on a fixed 640px measure (OLD 66ch); at the 14px body size that is three lines */
.homepage-figma-bg .hero-intro__sub { max-width: 640px; }

/* D-230 (owner, 4 Nov: "decrease the brush stroke, and the products are in a straight line, we need them in a U shape, not a
   proper U, maybe curved"):
   - the #HarDoctorHogaInsured brush about 60% of its size: clamp(56px, 11vh, 124px) tall (OLD clamp(88px, 18vh, 210px));
   - the seven product tiles on a gentle smile curve from 768px up: Professional Indemnity (4th, the centre) lowest, each step
     out rising (0 / 14 / 44 / 84px) and tilting with the curve (0 / 2.5 / 5 / 7.5deg). Uses the translate / rotate
     properties, so the tiles' own transforms and hover effects are untouched. Phones keep the scrolling strip.
   OLD: one straight row. */
.homepage-figma-bg .brush-bg { height: clamp(56px, 11vh, 124px) !important; }
@media (max-width: 767px) { .homepage-figma-bg .brush-bg { height: auto !important; max-width: 64% !important; } }
@media (min-width: 768px) {
  .homepage-figma-bg .icon-row { padding-bottom: 6px; }
  .homepage-figma-bg .icon-row > .feature-card { transition: translate .4s ease, rotate .4s ease; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(1) { translate: 0 -84px; rotate: 7.5deg; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(2) { translate: 0 -44px; rotate: 5deg; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(3) { translate: 0 -14px; rotate: 2.5deg; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(5) { translate: 0 -14px; rotate: -2.5deg; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(6) { translate: 0 -44px; rotate: -5deg; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(7) { translate: 0 -84px; rotate: -7.5deg; }
  /* the row is lifted 84px at its ends, so it starts 84px lower to keep clear of the brush */
  .homepage-figma-bg .icon-row-scaler { margin-top: 84px; }
}
/* D-231 (owner, 4 Nov: "move the products up, the illustration is not on the same screen; use the negative space better"):
   the curve's raised ends sit left and right of the brush, so the row no longer needs the 84px drop; it starts just under
   the brush (the centre tiles clear it), the curve is a little flatter (0 / 12 / 36 / 68px), and the gaps around the brush
   are tighter. OLD (D-230): margin-top 84px; 0 / 14 / 44 / 84px. */
.homepage-figma-bg .hero-intro { margin-bottom: 6px !important; }
.homepage-figma-bg .brush-banner { margin-bottom: 0 !important; }
@media (min-width: 768px) {
  .homepage-figma-bg .icon-row-scaler { margin-top: -6px; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(1), .homepage-figma-bg .icon-row > .feature-card:nth-child(7) { translate: 0 -68px; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(2), .homepage-figma-bg .icon-row > .feature-card:nth-child(6) { translate: 0 -36px; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(3), .homepage-figma-bg .icon-row > .feature-card:nth-child(5) { translate: 0 -12px; }
}
@media (min-width: 768px) { .homepage-figma-bg .icon-row-scaler { margin-top: 14px; } } /* D-231: centre tiles 14px under the brush */

/* D-234 (owner, 5 Nov: "can we do steps instead of a curve for the products"; chose "steps down to PI"): the seven tiles stand
   upright on equal steps, 22px each, down from both ends to Professional Indemnity in the middle (0 / 22 / 44 / 66px).
   OLD (D-230 / D-231): a smile curve, 0 / 12 / 36 / 68px, each tile tilted 2.5 / 5 / 7.5deg with the curve. */
@media (min-width: 768px) {
  .homepage-figma-bg .icon-row > .feature-card { rotate: 0deg !important; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(1), .homepage-figma-bg .icon-row > .feature-card:nth-child(7) { translate: 0 -66px; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(2), .homepage-figma-bg .icon-row > .feature-card:nth-child(6) { translate: 0 -44px; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(3), .homepage-figma-bg .icon-row > .feature-card:nth-child(5) { translate: 0 -22px; }
  .homepage-figma-bg .icon-row > .feature-card:nth-child(4) { translate: 0 0; }
}

/* D-238 (owner, 5 Nov: "decrease the size of this a little"): the hero badge about 15% smaller - 14px text (OLD 16px), 6px 14px
   padding (OLD 8px 16px), 16px shield (OLD 19px), 20px sparkles (OLD 24px) */
.homepage-figma-bg .top-badge { font-size: 14px !important; padding: 6px 14px !important; gap: 8px; }
.homepage-figma-bg .top-badge .badge-icon { width: 16px !important; height: 16px !important; }
.homepage-figma-bg .eco-sparkle { width: 20px !important; height: 20px !important; }

/* D-261 (owner, 5 Nov: "increase the size of the H1 tag, and the para below should come in 2 lines, not 3; the padding of
   the para can be decreased"): a bigger H1, and a wider intro block so the paragraph sets in two lines on desktop.
   OLD: H1 clamp(28px, 2.7vw, 42px); intro block 860px with 20px side padding; paragraph capped at 640px (D-0xx above). */
.homepage-figma-bg .hero-intro { max-width: 1080px; padding: 0 8px; }
.homepage-figma-bg .hero-intro h1 { font-size: clamp(32px, 3.7vw, 58px); letter-spacing: -.04em; }
.homepage-figma-bg .hero-intro__sub { max-width: 1010px; }
@media (max-width: 767px) { .homepage-figma-bg .hero-intro { padding: 0 4px; } .homepage-figma-bg .hero-intro h1 { font-size: clamp(30px, 8.4vw, 38px); } }

/* D-315 (council UX-09): from 768 to 991px the seven tiles wrap into a 4-column grid (style.css), but the stepped offsets
   (up to -66px) still applied, so the second row rode up into the first. In that range the tiles sit level; the steps stay
   from 992px, where the row is one line. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .homepage-figma-bg .icon-row > .feature-card:nth-child(n) { translate: 0 0 !important; }
}

/* D-316 (responsive sweep, council UX-09 "clipped at 1024px"): the seven tiles keep a gap of 7vw (min 48px); between 992
   and about 1100px that made the row wider than the screen, so Health and Other Insurances were cut off at the edges. Up to
   1199px the gap is what is left after the tiles and margins ((100vw - 700px) / 6), which meets the old 7vw at 1200px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .homepage-figma-bg .icon-row { gap: clamp(24px, calc((100vw - 700px) / 6), 94px) !important; }
}

/* D-326 (owner, 8 Nov: "can we make the hovering smoother"): the hovered tile used to change its box width/height (a layout
   on every frame) and jump its icon size, label width, padding and font size with no transition. Now the whole tile (box,
   icon and label) grows as one piece with scale, on the graphics card, with a soft spring - to the same 1.27x as the
   highlighted tile - and nothing else in the row moves. The glow fades in with it. Pointer devices from 768px only (the phone
   strip scrolls). The highlighted (PI) tile keeps its size and glow. */
@media (min-width: 768px) and (hover: hover) {
  .homepage-figma-bg .icon-row > .feature-card { scale: 1; transform-origin: 50% 100%; transition: scale .5s cubic-bezier(.22, 1.25, .36, 1), translate .5s cubic-bezier(.22, 1, .36, 1); will-change: scale; }
  .homepage-figma-bg .icon-row > .feature-card:not(.active):hover, .homepage-figma-bg .icon-row > .feature-card:not(.active):focus-visible { scale: 1.27; }
  .homepage-figma-bg .icon-row > .feature-card .icon-box { transition: box-shadow .45s ease, filter .45s ease, width .35s ease, height .35s ease, border-radius .35s ease; }
  .homepage-figma-bg .icon-row > .feature-card.active:hover { scale: 1.04; }
}
@media (prefers-reduced-motion: reduce) { .homepage-figma-bg .icon-row > .feature-card { transition: none; } }