html body section#ics-feature { overflow-x: clip !important; }

/* ---------- composition: desktop/iPad landscape >=992 (was >=1360) ---------- */
@media (min-width: 992px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    display: block !important; position: relative !important; flex-direction: row !important;
    grid-template-columns: none !important; gap: normal !important; row-gap: normal !important; column-gap: normal !important;
    width: 87.5% !important; max-width: 1440px !important; min-width: 0 !important; height: auto !important;
    aspect-ratio: 1440 / 1197 !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important;
  }
  html body section#ics-feature > #ics-feature-stage > #hf-band {
    position: absolute !important; left: calc(50% - 50vw) !important; right: auto !important; bottom: auto !important;
    top: 12.11% !important; width: 100vw !important; height: 78.11% !important; max-width: none !important;
    aspect-ratio: auto !important; margin: 0 !important; transform: none !important; object-fit: cover !important;
    order: 0 !important; grid-area: auto !important;
  }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head {
    position: absolute !important; left: 21.597% !important; top: 38.93% !important; right: auto !important; bottom: auto !important;
    width: 56.806% !important; max-width: none !important; margin: 0 !important; transform: none !important;
    order: 0 !important; grid-area: auto !important; z-index: 1 !important;
  }
  html body section#ics-feature > #ics-feature-stage > [id^='fc-'] {
    position: absolute !important; left: var(--fc-x) !important; top: var(--fc-y) !important; right: auto !important; bottom: auto !important;
    width: 21.111% !important; height: auto !important; max-width: none !important; min-width: 0 !important;
    aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; transform: none !important; rotate: none !important;
    display: flex !important; flex-direction: column !important; box-sizing: border-box !important;
    order: 0 !important; grid-area: auto !important; z-index: 1 !important; justify-self: auto !important;
  }
  html body section#ics-feature > #ics-feature-stage > #fc-3 { --fc-x: 17.778%; --fc-y: 9.19%; }
  html body section#ics-feature > #ics-feature-stage > #fc-2 { --fc-x: 75.208%; --fc-y: 12.78%; }
  html body section#ics-feature > #ics-feature-stage > #fc-1 { --fc-x: 3.681%; --fc-y: 58.81%; }
  html body section#ics-feature > #ics-feature-stage > #fc-4 { --fc-x: 67.083%; --fc-y: 65.83%; }
  html body section#ics-feature > #ics-feature-stage > [id^='fdec-'] {
    position: absolute !important; right: auto !important; bottom: auto !important; height: auto !important;
    max-width: none !important; margin: 0 !important; transform: none !important; display: block !important;
    order: 0 !important; grid-area: auto !important; z-index: 1 !important; align-self: auto !important;
  }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask1 { left: 60.208% !important; top: 21.80% !important; width: 11.806% !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask2 { left: 3.403% !important; top: 33.42% !important; width: 11.944% !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-clip1 { left: 35.100% !important; top: 29.60% !important; width: 6.667% !important; rotate: 80.7deg !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-illus { left: 64.583% !important; top: 62.82% !important; width: 4.167% !important; rotate: 14.8deg !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-art { left: 45.139% !important; top: 69.67% !important; width: 9.722% !important; }
  html body section#ics-feature > #ics-feature-stage > [id^='fc-'] > img {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: none !important; height: auto !important; flex: 0 0 75% !important; min-height: 0 !important;
    object-fit: cover !important; display: block !important; margin: 0 !important; transform: none !important;
  }
  html body section#ics-feature > #ics-feature-stage > [id^='fc-'] > [id^='cap-'] {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: none !important; height: auto !important; flex: 1 1 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 7.9% !important; box-sizing: border-box !important; display: flex !important;
    align-items: center !important; transform: none !important;
  }
}

/* ---------- tablet 600-991 and phone <=599: stacked grid, Figma reading order ---------- */
@media (max-width: 991px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    display: grid !important; position: relative !important; flex-direction: column !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important;
    gap: 24px var(--grid-gap, 1.5rem) !important; row-gap: 24px !important; column-gap: var(--grid-gap, 1.5rem) !important;
    align-items: start !important; justify-items: center !important;
    width: calc(100% - 32px) !important; max-width: none !important; min-width: 0 !important; height: auto !important;
    aspect-ratio: auto !important; margin: 0 auto !important; padding: 40px 0 !important; overflow: visible !important;
  }
  html body section#ics-feature > #ics-feature-stage > #hf-band {
    position: absolute !important; left: calc(50% - 50vw) !important; right: auto !important; top: 0 !important; bottom: auto !important;
    width: 100vw !important; height: 100% !important; aspect-ratio: auto !important; max-width: none !important;
    margin: 0 !important; transform: none !important; object-fit: fill !important; grid-area: auto !important; order: 0 !important;
  }
  html body section#ics-feature > #ics-feature-stage > [id^='fc-'] {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: min(100%, 21rem) !important; height: auto !important; max-width: 21rem !important; min-width: 0 !important;
    aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; transform: none !important; rotate: none !important;
    display: flex !important; flex-direction: column !important; box-sizing: border-box !important; z-index: 1 !important;
    order: 0 !important; justify-self: center !important; align-self: start !important;
  }
  html body section#ics-feature > #ics-feature-stage > #fc-3 { grid-area: 1 / 1 / 2 / 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-2 { grid-area: 1 / 2 / 2 / 3 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-1 { grid-area: 3 / 1 / 4 / 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-4 { grid-area: 3 / 2 / 4 / 3 !important; }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    grid-area: 2 / 1 / 3 / 3 !important; width: 72% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important;
    transform: none !important; justify-self: center !important; align-self: center !important; order: 0 !important; z-index: 1 !important;
  }
  html body section#ics-feature > #ics-feature-stage > [id^='fdec-'] {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    margin: 0 !important; transform: none !important; max-width: none !important; height: auto !important; order: 0 !important;
    z-index: 1 !important; align-self: center !important; display: block !important;
  }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask2 { grid-area: 2 / 1 / 3 / 2 !important; justify-self: start !important; width: clamp(72px, 14vw, 120px) !important; rotate: none !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask1 { grid-area: 2 / 2 / 3 / 3 !important; justify-self: end !important; width: clamp(80px, 15vw, 130px) !important; rotate: none !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-clip1 { display: none !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-illus { display: none !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-art { grid-area: 4 / 1 / 5 / 3 !important; justify-self: center !important; width: clamp(100px, 22vw, 140px) !important; }
  html body section#ics-feature > #ics-feature-stage > [id^='fc-'] > img {
    position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: none !important;
    height: auto !important; flex: 0 0 75% !important; min-height: 0 !important; object-fit: cover !important; display: block !important; margin: 0 !important; transform: none !important;
  }
  html body section#ics-feature > #ics-feature-stage > [id^='fc-'] > [id^='cap-'] {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: none !important; height: auto !important; flex: 1 1 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 7.9% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; transform: none !important;
  }
}

/* phone <=599: one column, order top pair -> heading -> bottom pair -> art */
@media (max-width: 599px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px !important; column-gap: 0 !important; gap: 24px 0 !important;
    justify-items: center !important; padding: 32px 0 !important;
  }
  html body section#ics-feature > #ics-feature-stage > #fc-3 { grid-area: 1 / 1 / 2 / 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-2 { grid-area: 2 / 1 / 3 / 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head { grid-area: 3 / 1 / 4 / 2 !important; width: 100% !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-1 { grid-area: 4 / 1 / 5 / 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-4 { grid-area: 5 / 1 / 6 / 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-art { grid-area: 6 / 1 / 7 / 2 !important; width: clamp(96px, 30vw, 120px) !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask1,
  html body section#ics-feature > #ics-feature-stage > #fdec-mask2 { display: none !important; }
}

/* P32b v2: heading box = Figma 818px (font 56px is not scaled with the stage), centred on stage */
@media (min-width: 992px) {
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head {
    left: 50% !important; width: min(818px, 92%) !important; transform: translateX(-50%) !important;
  }
}

/* owner 2026-11-05: at 992-1439 the heading font scales so 3 lines fit beside the corner cards (fluid, capped at 3.5rem). */
@media (min-width: 992px) and (max-width: 1439px) {
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head :is(h1, h2, h3) {
    font-size: clamp(2rem, 3.6vw, 3.5rem) !important;
  }
}

/* ---------- H44 home activities mobile order (<=991): heading -> CTA -> cards; >=992 untouched ---------- */
@media (max-width: 991px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    display: grid !important; width: var(--container-w, 87.5%) !important; max-width: var(--container-max, 1440px) !important;
    margin-inline: auto !important; padding-inline: 0 !important; padding-block: 40px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ics-grid-gap, clamp(1.5rem, 2.2vw, 2rem)) !important; justify-items: center !important;
  }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head {
    grid-area: auto !important; grid-column: 1 / -1 !important; order: 1 !important;
    width: 72% !important; margin: 0 0 var(--sp-xl, 2rem) !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    justify-self: center !important; align-self: auto !important; text-align: center !important;
  }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head > * { text-align: center !important; max-width: 100% !important; }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head > #feature-cta { align-self: center !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-3 { grid-area: auto !important; order: 2 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-2 { grid-area: auto !important; order: 3 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-1 { grid-area: auto !important; order: 4 !important; }
  html body section#ics-feature > #ics-feature-stage > #fc-4 { grid-area: auto !important; order: 5 !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask2 { grid-area: auto !important; order: 6 !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-mask1 { grid-area: auto !important; order: 7 !important; }
  html body section#ics-feature > #ics-feature-stage > #fdec-art { grid-area: auto !important; grid-column: 1 / -1 !important; order: 8 !important; justify-self: center !important; }
}
@media (max-width: 599px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    grid-template-columns: minmax(0, 1fr) !important; gap: var(--ics-grid-gap, clamp(1.5rem, 2.2vw, 2rem)) !important; padding-block: 32px !important;
  }
  html body section#ics-feature > #ics-feature-stage > #ics-feature-head { width: 100% !important; }
}

/* ---------- H46 home activities torn-edge clearance (<=991; >=992 untouched) ----------
   Torn top edge = artwork of #hf-band (s3-01-band-subtract.svg, viewBox 935 high, stretched to stage height).
   Deepest top-edge point y=50.29 => depth k=0.05378 x stage height. Head clears it by k*H + var(--sp-xl).
   Solved for current stage heights (measured 2026-11-05): 390px -> 142px; 834px -> 112px. */
@media (max-width: 991px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    padding-top: 112px !important;
  }
}
@media (max-width: 599px) {
  html body section#ics-feature > #ics-feature-stage#ics-feature-stage {
    padding-top: 142px !important;
  }
}

/* ---------- H78 feature band tear (>=992): #hf-band was object-fit:cover (line 14), which cropped the SVG torn top/bottom edges -> flat band. Restore fill (SVG preserveAspectRatio none); geometry unchanged (top 12.11%, height 78.11%). ---------- */
@media (min-width: 992px) {
  html body section#ics-feature > #ics-feature-stage > #hf-band {
    display: block !important; object-fit: fill !important; object-position: center center !important; z-index: 0 !important;
  }
}

/* H109 EN home feature head vs card 1 (1440 +-): EN heading line 3 starts at x=360 while card 1 right edge is 402 (606 px real overlap); nudge card 1 left by token for EN only. VI and other widths unchanged. Rollback: backups/h109-20261105-2208/ROLLBACK.md */
@media (min-width: 1380px) and (max-width: 1640px) {
  html body.page-id-2894 section#ics-feature > #ics-feature-stage > #fc-1 { --fc-x: -0.5%; }
}
/* END H109 */

/* H120 feedback 4 (Figma card 2177:42689): picture sits inside a white frame 7.402px on a 304px card (2.435%); frame = token --ics-card-frame (6.48px at the 266px card of 1440). Border-box keeps the image slot size, only the picture shrinks. */
html body section#ics-feature > #ics-feature-stage > [id^='fc-'] > img {
  box-sizing: border-box !important;
  border: var(--ics-card-frame) solid var(--yellow-0) !important;
}