/* ===========================================================================
   Aimeee website — mobile + tablet (≤1023 px). Phase 3, decision D1: Ada-derived layout,
   assembled from the SAME DOM as the 1728 desktop stage. No Figma mobile frame
   exists (docs/FIGMA-FIDELITY.md ledger row 2), so every number below is a
   derivation, not a spec value.

   Method: the stage stops being a 1728 canvas and each <section class="sec">
   becomes a CSS grid whose named areas re-flow the absolutely-positioned Figma
   children into a single 390-px column. Nothing outside this media query is
   touched, so the desktop gates (spec-diff 128/128, strings 61/61) are unaffected.

   Overlays that must stay stacked (photo + ring + scrim, card art + card copy)
   are given the SAME grid area, which is why grid is used rather than flow.
   Page backgrounds live in s0 on desktop; here s0 is hidden and the gradients
   are re-attached to the sections they belong behind.
   =========================================================================== */

@media (max-width: 1023px) {
  #s1 .s1-h1 .m-br { display: inline; } /* ledger row 12: break after AI, not inside 家庭 */

  /* ---- stage: drop the 1728 canvas ------------------------------------- */
  html, body { overflow-x: hidden; }
  .stage-wrap { overflow: visible; height: auto !important; }
  .stage {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    overflow: hidden;
    --mx: 20px;                       /* page gutter */
  }
  .sec {
    width: 100%;
    height: auto !important;
    overflow: hidden;
    display: grid;
    align-content: start;
    justify-items: center;
    text-align: center;
  }
  /* every Figma child leaves absolute positioning and its 1728-canvas box */
  .sec > * {
    position: static;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
  }
  .sec > img { height: auto !important; }

  /* Figma tracking is canvas-scale; at mobile sizes it reads as a gap */
  .sec .t { letter-spacing: 0 !important; text-indent: 0 !important; }
  /* Every text box carries the height its copy occupied on the 1728 canvas. The
     reset above already frees .sec > *, but slide copy sits three levels down, so
     state it for every text node and text wrapper: re-wrapped copy has to be free
     to grow or one more line would collide with the block beneath it. */
  .sec [data-fig-text], .sec .t, #s3 .s3-art .t, #s3 .s3-tab .t {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Every line break here is a re-wrap of copy written for a 1728 canvas, so the
     last line is regularly a one-character orphan (全港首個…作業系統 breaks 12+2
     at 768). Balancing splits them evenly instead. */
  #s1 .s1-h1, #s1 .s1-sub, #s1 .s1-cta-note, #s1 .s1-cap,
  #s2 .s2-head, #s2 .s2-sub, #s2 .s2-cap, #s2 .s2-card-p,
  #s3 .s3-nowrap, #s4 .s4-head, #s4 .s4-closing,
  #s5 .s5-head { text-wrap: balance; }
  /* desktop pins these to one line; on a phone they must wrap */
  #s2 .s2-head, #s3 .s3-nowrap, #s5 .s5-head, #s5 .s5-lead,
  #s5 .s5-pill, #s5 .s5-cta, #s5 .s5-tagline, #s5 .s5-links { white-space: pre-wrap; }

  /* s0 is the page-background canvas: re-attached per section below */
  #s0 { display: none !important; }

  /* Any wrapper whose Figma children are absolute must keep a containing block:
     the reset above makes .sec > * static, which would otherwise let those
     children resolve against .sec and land at the section's top-left. */
  #s4 .s4-clip, #s4 .s4-art { position: relative; }

  /* shared: eyebrow pill drawn as artwork on desktop, as a border here */
  #s2 .s2-pill, #s3 [data-fig="1:65163"], #s4 .s4-eyebrow, #s5 .s5-pill {
    font-size: 15px !important;
    line-height: 1.2 !important;
    border-radius: 999px;
    padding: 8px 20px;
  }
  #s2 .s2-pill, #s3 [data-fig="1:65163"], #s4 .s4-eyebrow { border: 1px solid #2e2c2a; }
  #s5 .s5-pill { border: 1px solid #ffffff; }

  /* shared: section headline */
  #s2 .s2-head, #s3 .s3-nowrap, #s4 .s4-head, #s5 .s5-head {
    font-size: 25px !important;
    line-height: 1.35 !important;
  }

  /* =====================================================================
     s1 — nav + hero
     ===================================================================== */
  #s1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "logo logo eng  start"
      "h1   h1   h1   h1"
      "sub  sub  sub  sub"
      "cta  cta  cta  cta"
      "note note note note"
      "masc masc masc masc"
      "sp1  sp1  sp2  sp2"
      "cap1 cap1 cap2 cap2"
      "sp3  sp3  sp4  sp4"
      "cap3 cap3 cap4 cap4";
    align-items: center;
    padding: 18px var(--mx) 40px;
    column-gap: 8px;
    background:
      url(../assets/img/node-1-64841@2x.webp) center 14% / 210% auto no-repeat,
      url(../assets/img/46a5fa96df3cc1ad2eb09450ad9654021c9bcae7.webp) center top / cover no-repeat;
  }
  #s1 .s1-logo { grid-area: logo; justify-self: start; width: 118px !important; }
  #s1 .s1-logo img { width: 100% !important; height: auto !important; }
  #s1 .s1-eng-bg, #s1 .s1-eng-fix, #s1 .s1-start-bg, #s1 .s1-cta-bg { display: none !important; }

  #s1 .s1-eng, #s1 .s1-start {
    justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    font-size: 15px !important; line-height: 1.35 !important;
    border-radius: 999px;
    padding: 0 14px;
    white-space: nowrap;
  }
  #s1 .s1-eng   { grid-area: eng;   background: rgba(255,255,255,.26); }
  #s1 .s1-start { grid-area: start; background: #ff8036; }
  #s1 .s1-eng::before, #s1 .s1-start::before, #s1 .s1-cta::before { display: none; }

  #s1 .s1-h1 {
    grid-area: h1;
    font-size: 38px !important; line-height: 1.4 !important; /* 38 so 家庭決策作業系統 (8 chars) holds one line at 390 */
    margin-top: 30px;
  }
  #s1 .s1-sub { grid-area: sub; font-size: 20px !important; line-height: 1.45 !important; margin-top: 12px; }

  #s1 .s1-cta {
    grid-area: cta;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; min-width: 190px;
    margin-top: 24px;
    background: #ffffff; border-radius: 999px;
    font-size: 19px !important; line-height: 1.35 !important;
  }
  #s1 .s1-cta-note {
    grid-area: note;
    font-size: 15px !important; line-height: 1.55 !important;
    text-align: center !important;
    margin-top: 14px; max-width: 300px;
  }

  /* mascot: the desktop mask (inset 33.5 / 5.49 / 185.37 / 0 of 769.86×646.34)
     restated in per-cent so it survives the scale; negative margins take back
     the layout space the clip removes. */
  #s1 .s1-mascot {
    grid-area: masc;
    --s1-masc-w: 264px;
    width: var(--s1-masc-w) !important;
    clip-path: inset(5.183% 0.713% 28.680% 0);
    margin-top: calc(12px - 0.05183 * var(--s1-masc-w) * 0.8395);
    margin-bottom: calc(-0.28680 * var(--s1-masc-w) * 0.8395);
  }

  #s1 .s1-spark {
    width: 22px !important;
    margin-bottom: 6px;
  }
  #s1 [data-fig="1:64884"] { grid-area: sp1; }
  #s1 [data-fig="1:64885"] { grid-area: sp2; }
  #s1 [data-fig="1:64886"] { grid-area: sp3; }
  #s1 [data-fig="1:64887"] { grid-area: sp4; }
  #s1 .s1-cap {
    font-size: 15px !important; line-height: 1.55 !important;
    padding: 0 4px 20px;
    align-self: start;
  }
  #s1 [data-fig="1:65149"] { grid-area: cap1; }
  #s1 [data-fig="1:65169"] { grid-area: cap2; }
  #s1 [data-fig="1:65170"] { grid-area: cap3; }
  #s1 [data-fig="1:65171"] { grid-area: cap4; }

  /* =====================================================================
     s2 — 痛點共鳴 (sits on the light panel 1:64846)
     ===================================================================== */
  #s2 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pill  pill"
      "head  head"
      "sub   sub"
      "stat1 stat2"
      "cap1  cap2"
      "card1 card2"
      "card3 card4";
    column-gap: 10px;
    padding: 40px var(--mx) 36px;
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, #fff2ea 0%, #fffbf9 60%, #fffdfc 100%);
    z-index: 1;
  }
  #s2 .s2-pill-bg { display: none !important; }
  #s2 .s2-pill { grid-area: pill; }
  #s2 .s2-head  { grid-area: head; margin-top: 22px; }
  #s2 .s2-sub   { grid-area: sub;  font-size: 16px !important; line-height: 1.6 !important; margin-top: 12px; }

  #s2 .s2-stat {
    font-size: 62px !important; line-height: 1.2 !important;
    margin-top: 26px; align-self: end;
  }
  #s2 .s2-pct { font-size: 38px !important; }
  #s2 [data-fig="1:65194"] { grid-area: stat1; }
  #s2 [data-fig="1:65195"] { grid-area: stat2; }
  #s2 .s2-divider {
    grid-area: stat2; justify-self: start; align-self: center;
    width: 1px !important; height: 76px !important;
    margin: 26px 0 0 -6px;
  }
  #s2 .s2-cap { font-size: 15px !important; line-height: 1.5 !important; margin-top: 6px; align-self: start; }
  #s2 [data-fig="1:65178"] { grid-area: cap1; }
  #s2 [data-fig="1:65179"] { grid-area: cap2; }

  /* Cards. The Figma card group (1:65126 …) is one SVG: plate + orange disc + icon,
     342 × 337.5 with the disc centred on the plate's top edge. Drawn as that fixed-
     ratio image, a 175 px card kept ~100 px of empty plate above two lines of copy
     (Agnes, 2 Sep: "reduce cell top padding 比例"). Here the plate is CSS on the
     copy element so the card is content-height, and the disc + icon (cut from the
     same SVG by scripts/make-disc-svgs.py) sits on the top edge. Every proportion
     is the Figma's, as a percentage of the card width: disc 108/342 = 31.6 %,
     copy 116/342 = 34 % below the top edge, 43/342 = 12.5 % in, 35/342 = 10 %
     above the bottom. Margin % of a grid item also resolves against the area
     width, so the row gap clears the disc's overhang (15.8 %) at every width. */
  #s2 .s2-card { display: none !important; }
  #s2 .s2-card-p {
    position: relative;
    justify-self: stretch;
    align-self: stretch;
    box-sizing: border-box;
    /* type is 32/342 = 9.4 % of the card's width in the Figma; the card is ~45 % of
       the viewport here, so 4.3vw tracks that ratio (17 px at 390, 18.5 at 430) */
    font-size: clamp(15px, 4.1vw, 17px) !important; line-height: 1.45 !important;
    text-align: left !important;
    padding: 34% 9.5% 10%;             /* 12.5 % in the Figma; 9.5 keeps 8 CJK glyphs per line at 390 */
    border: 1.5px solid transparent;
    border-radius: 22px;
    background:
      linear-gradient(var(--s2-card-fill), var(--s2-card-fill)) padding-box,
      linear-gradient(90deg, #ff7f36 0%, #ff5760 50%, #9056bc 100%) border-box;
  }
  #s2 .s2-card-p::before {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    width: 31.6%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--s2-disc) center / contain no-repeat;
  }
  /* 1:65174 carries the Figma's own line breaks for a 299 px box; they fight the
     re-wrap at phone widths (滿滿 / 的WhatsApp / …). Content is unchanged. */
  #s2 .s2-card-p br { display: none; }
  #s2 [data-fig="1:65172"] { grid-area: card1; --s2-card-fill: #f8f4fe; --s2-disc: url(../assets/svg/1-65126-disc.svg); }
  #s2 [data-fig="1:65173"] { grid-area: card2; --s2-card-fill: #f4feff; --s2-disc: url(../assets/svg/1-65112-disc.svg); }
  #s2 [data-fig="1:65174"] { grid-area: card3; --s2-card-fill: #fff1e9; --s2-disc: url(../assets/svg/1-65081-disc.svg); }
  #s2 [data-fig="1:65175"] { grid-area: card4; --s2-card-fill: #f4fef7; --s2-disc: url(../assets/svg/1-65101-disc.svg); }
  #s2 [data-fig="1:65172"], #s2 [data-fig="1:65173"] { margin-top: calc(15.8% + 22px); }
  #s2 [data-fig="1:65174"], #s2 [data-fig="1:65175"] { margin-top: calc(15.8% + 14px); }

  /* =====================================================================
     s3 — 核心解決方案 carousel
     ===================================================================== */
  #s3 {
    grid-template-columns: 1fr;
    grid-template-areas: "pill" "head" "tabs" "car" "dots";
    padding: 34px 0 34px;
    background: linear-gradient(180deg, #fffbf9 0%, #ffffff 100%);
  }
  #s3 > [data-fig="1:64868"] { display: none !important; }
  #s3 [data-fig="1:65163"] { grid-area: pill; }
  #s3 .s3-nowrap { grid-area: head; margin-top: 20px; padding: 0 var(--mx); }

  /* tab strip: a full-bleed horizontal scroller */
  #s3 .s3-tabs {
    grid-area: tabs;
    display: flex; gap: 8px;
    width: 100% !important;
    margin-top: 20px;
    padding: 4px var(--mx) 10px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-self: stretch;
  }
  #s3 .s3-tabs::-webkit-scrollbar { display: none; }
  #s3 .s3-tab {
    position: relative;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px;
    border-radius: 999px;
    background: #f2f2f2;
    transition: background-color .25s ease, color .25s ease;
  }
  #s3 .s3-tab.is-active { background: #ff8036; }
  #s3 .s3-tab:hover:not(.is-active) { background: #e8e8e8; }
  #s3 .s3-pill { display: none !important; }
  #s3 .s3-tab .t {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    font-size: 15px !important; line-height: 1.35 !important;
    white-space: nowrap;
  }

  /* Carousel. Two tiers, both driven by --s3-zoom (js/mobile.js sets it to the
     card width / --s3-canvas-w) and both using `zoom` rather than transform,
     because js/s3-solutions.js owns the track's transform.
       768–1023: the slide keeps its 1351.33 px Figma layout — copy on the left,
       artwork on the right — shrunk whole; at these widths the 26 px body copy
       still lands ≥ 13.7 px, and a landscape phone must show the wide version,
       not a blank left half where the copy used to be (Agnes, 2 Sep).
       ≤ 767: the card is re-cut — the artwork band is cropped to the right 661
       canvas px where every slide's art sits, and the text nodes drop into a flow
       block under it (the ≤ 767 block at the end of this file).
     Slides are swapped by visibility on [aria-hidden] rather than by the track
     translate, because a content-height card cannot ride a fixed-pitch translate. */
  #s3 .s3-viewport {
    grid-area: car;
    position: relative;
    justify-self: stretch;
    width: auto !important;
    height: auto !important;
    margin: 8px calc(var(--mx) - 16px) 0;
    padding: 0 16px 36px;             /* room for the card shadow inside the clip */
    overflow: hidden;
    --s3-canvas-w: 1351.33;
  }
  #s3 .s3-track {
    position: relative;
    width: calc(var(--s3-canvas-w) * 1px); height: auto;
    transform: none !important;
    zoom: var(--s3-zoom, 0.259);
  }
  #s3 .s3-slide {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: calc(var(--s3-canvas-w) * 1px) !important; height: auto !important;
  }
  /* Inactive slides are taken out of flow rather than display:none'd — Chrome
     does not fetch images inside a display:none subtree, which left every slide
     but the first blank for a beat on its first tab press. visibility:hidden
     keeps them unpainted and unfocusable while their art still downloads, and
     .s3-viewport's overflow:hidden clips them. */
  #s3 .s3-slide[aria-hidden="true"] {
    position: absolute !important;
    visibility: hidden;
    pointer-events: none;
  }
  #s3 .s3-dots {
    grid-area: dots;
    position: static;
    display: flex; gap: 12px; justify-content: center;
    margin-top: 22px;
  }
  #s3 .s3-dot {
    position: relative;
    left: auto !important; top: auto !important;
    width: 10px !important; height: 10px !important;
    flex: 0 0 auto;
  }
  #s3 .s3-dot::after { content: ""; position: absolute; inset: -17px; }

  /* =====================================================================
     s4 — 賦能媽媽 / Aimeee Club (lilac panel 1:64848)
     ===================================================================== */
  #s4 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow" "head"
      "l1" "ph1" "b1"
      "l2" "ph2" "b2"
      "l3" "ph3" "b3"
      "closing";
    padding: 40px var(--mx) 40px;
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    background: #f8f4fe;
    z-index: 1;
    --s4-photo: 0.5556;               /* 270 → 150 px */
  }
  #s4 > [data-fig="1:64869"] { display: none !important; }
  #s4 .s4-pill { display: none !important; }
  #s4 .s4-eyebrow { grid-area: eyebrow; }
  #s4 .s4-head { grid-area: head; margin-top: 22px; }
  #s4 .s4-head-zh { font-size: 18px !important; line-height: 1.5 !important; }
  #s4 .s4-head-sp { display: none; }

  #s4 .s4-label {
    font-size: 20px !important; line-height: 1.2 !important;
    border: 1px solid #000; border-radius: 999px;
    padding: 11px 22px;
    margin-top: 34px;
    margin-bottom: 22px;
  }
  #s4 [data-fig="1:65187"] { grid-area: l1; }
  #s4 [data-fig="1:65188"] { grid-area: l2; }
  #s4 [data-fig="1:65193"] { grid-area: l3; }

  #s4 .s4-clip  { width: 270px !important; height: 270px !important; zoom: var(--s4-photo); }
  #s4 .s4-ring  { width: calc(272px * var(--s4-photo)) !important; }
  #s4 .s4-scrim { width: calc(270px * var(--s4-photo)) !important; height: calc(270px * var(--s4-photo)) !important; }
  #s4 [data-fig="1:65038"], #s4 [data-fig="1:65043"],
  #s4 [data-fig="1:65095"], #s4 [data-fig="1:65148"] { grid-area: ph1; align-self: center; }
  #s4 [data-fig="1:65046"], #s4 [data-fig="1:65050"] { grid-area: ph2; align-self: center; }
  #s4 [data-fig="1:65057"], #s4 [data-fig="1:65061"],
  #s4 [data-fig="1:65089"] { grid-area: ph3; align-self: center; }
  /* MOM CEO wordmark sits 59 canvas px below the circle centre; align-self:center
     halves the margin, hence the doubling. Not zoomed, so this is device px. */
  #s4 [data-fig="1:65148"] {
    width: calc(153px * var(--s4-photo)) !important;
    margin-top: calc(118px * var(--s4-photo));
  }
  /* 米星 badge sits 65.7 canvas px above the centre. It IS zoomed, so the doubled
     offset divided by the zoom is a constant. */
  #s4 [data-fig="1:65089"] {
    width: 97.23px !important; height: 92.69px !important;
    zoom: var(--s4-photo); margin-top: -131.4px;
  }

  #s4 .s4-body {
    font-size: 15px !important; line-height: 1.6 !important;
    margin-top: 18px;
  }
  #s4 [data-fig="1:65192"] { grid-area: b1; }
  #s4 [data-fig="1:65191"] { grid-area: b2; }
  #s4 [data-fig="1:65189"] { grid-area: b3; }
  #s4 .s4-closing {
    grid-area: closing;
    font-size: 17px !important; line-height: 1.55 !important;
    margin-top: 36px;
  }

  /* =====================================================================
     s5 — 會員方案 + footer (gradient band 1:64849 + ribbon 1:64850)
     ===================================================================== */
  #s5 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pill" "head" "lead" "sub" "cta" "rule" "tagline" "links" "logo";
    padding: 44px 16px 30px;          /* 16, not --mx: the copy fills the band (Agnes, 2 Sep) */
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    z-index: 1;
    --s5-masc: 0.33;
    --s5-masc-top: 26px;
    background:
      url(../assets/img/node-1-64850@2x.webp) center 78% / 230% auto no-repeat,
      url(../assets/img/0f3cd781fe8b56c915120433f365792ff44b97ed.webp) center / cover no-repeat;
  }
  #s5 .s5-pill-bg, #s5 .s5-cta-bg, #s5 .s5-shadow,
  #s5 .s5-foot-arrow, #s5 .s5-foot-pill { display: none !important; }

  #s5 .s5-pill { grid-area: pill; }
  #s5 .s5-head { grid-area: head; margin-top: 20px; }
  #s5 .s5-lead { grid-area: lead; font-size: 16px !important; line-height: 1.55 !important; margin-top: 14px; }
  #s5 .s5-sub  { grid-area: sub;  font-size: 16px !important; line-height: 1.55 !important; margin-top: 12px; }

  /* 快速註冊. The Figma draws ONE outlined pill (1:65030: a white-stroke capsule
     holding a white-filled capsule on its left) with the red label 1:65156 in the
     filled part and the two-line white hint 1:65157 in the outlined part. Rebuilt
     as that composition: the hint element IS the outline, the label is the white
     capsule overlaid in the same grid area — not a lone white pill with the hint
     floating under it (Agnes, 2 Sep). Both are centred on the same 360 px line:
     the label's margin-left is the same centring offset the hint gets from
     justify-self (a % margin on a grid item resolves against the grid area). */
  #s5 .s5-cta-cap {
    grid-area: cta;
    justify-self: center;
    box-sizing: border-box;
    width: min(100%, 360px) !important;
    max-width: none;
    min-height: 56px;
    display: flex; align-items: center;
    margin-top: 26px;
    padding: 8px 14px 8px 130px;
    border: 1.5px solid #ffffff; border-radius: 999px;
    font-size: 12px !important; line-height: 1.45 !important;
    text-align: left !important;
  }
  #s5 .s5-cta {
    grid-area: cta;
    position: relative; z-index: 1;
    justify-self: start; align-self: stretch;
    margin-top: 26px;
    margin-left: max(0px, calc((100% - 360px) / 2));
    width: 118px !important; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ffffff; border-radius: 999px;
    font-size: 18px !important; line-height: 1.35 !important;
  }
  #s5 .s5-cta::before { display: none; }

  /* Mascot 1:65097. As in the Figma it peeks in from the RIGHT EDGE beside the
     headline — head and raised paw, cut by the page edge (the mask polygon's
     straight right side) — instead of sitting fully on-screen in its own row at
     the bottom (Agnes, 2 Sep). Positioned against the section, not a grid row.
     `zoom` scales the 316.59 × 427.59 node box and its polygon together, so top is
     divided by the zoom to land at --s5-masc-top device px. z-index −1 keeps it
     under the copy inside #s5's own stacking context (z-index 1), above the band. */
  #s5 .s5-mascot-clip {
    position: absolute !important;
    grid-area: auto;
    left: auto !important; right: 0 !important;
    top: calc(var(--s5-masc-top) / var(--s5-masc)) !important;
    width: 316.59px !important; height: 427.59px !important;
    margin: 0;
    zoom: var(--s5-masc);
    z-index: -1;
    pointer-events: none;
  }
  #s5 .s5-rule {
    grid-area: rule;
    justify-self: stretch;
    width: auto !important; height: 1px !important;
    max-width: none;                  /* the reset's max-width:100% would cap the bleed */
    margin: 36px calc(-1 * var(--s5-bleed, 20px)) 0;   /* Figma: 78 px CTA → rule on an 816 band */
    opacity: .55;
  }
  #s5 .s5-tagline {
    grid-area: tagline;
    font-size: 15px !important; line-height: 1.2 !important;
    border: 1.5px solid rgba(255,255,255,.75); border-radius: 999px;
    padding: 9px 18px;
    margin-top: 18px;
    text-align: center !important;
  }
  /* one row, keeping the node's own "    |    " separators exactly as desktop
     draws them: measured 294 px at 15 px, inside the 320 px content box at 360 */
  #s5 .s5-links {
    grid-area: links;
    font-size: 15px !important; line-height: 1.2 !important;
    margin-top: 8px;
  }
  #s5 .s5-links a {
    display: inline-block;
    font-size: 15px !important; line-height: 1.2 !important;
    padding: 13px 0;                  /* ≥44 px tap target */
  }
  #s5 .s5-logomark { grid-area: logo; width: 58px !important; margin-top: 10px; }
}

/* ===========================================================================
   Tablet tier — 600 to 1023 px. Same flow layout, wider and larger: the content
   column is capped at 640 px and centred by --mx (backgrounds still bleed to the
   edges because they sit on the section, not on the column), and type steps up
   roughly 1.25×. Everything derived from a variable above scales from one number:
   --s4-photo for the club circles, --s5-masc for the footer cat, --s3-zoom for
   the carousel (js/mobile.js recomputes it from the card's measured width).
   =========================================================================== */
@media (min-width: 600px) and (max-width: 1023px) {

  .stage { --mx: max(28px, calc((100% - 640px) / 2)); }

  /* shared pills and headlines */
  #s2 .s2-pill, #s3 [data-fig="1:65163"], #s4 .s4-eyebrow, #s5 .s5-pill {
    font-size: 17px !important; padding: 10px 24px;
  }
  #s2 .s2-head, #s3 .s3-nowrap, #s4 .s4-head, #s5 .s5-head { font-size: 32px !important; }

  /* --- s1 --- */
  #s1 { padding: 26px var(--mx) 56px; }
  #s1 .s1-logo { width: 150px !important; }
  #s1 .s1-eng, #s1 .s1-start { font-size: 16px !important; line-height: 1.35 !important; padding: 0 18px; min-height: 46px; }
  #s1 .s1-h1  { font-size: 52px !important; margin-top: 40px; }
  #s1 .s1-sub { font-size: 24px !important; margin-top: 16px; }
  #s1 .s1-cta { font-size: 21px !important; line-height: 1.35 !important; min-height: 54px; min-width: 220px; margin-top: 30px; }
  #s1 .s1-cta-note { font-size: 17px !important; max-width: 380px; }
  #s1 .s1-mascot { --s1-masc-w: 340px; }
  #s1 .s1-spark { width: 26px !important; }
  #s1 .s1-cap { font-size: 17px !important; padding: 0 10px 24px; }

  /* --- s2 --- */
  #s2 { padding: 52px var(--mx) 48px; column-gap: 16px; }
  #s2 .s2-sub  { font-size: 19px !important; }
  #s2 .s2-stat { font-size: 84px !important; }
  #s2 .s2-pct  { font-size: 50px !important; }
  #s2 .s2-divider { height: 100px !important; margin-left: -9px; }
  #s2 .s2-cap  { font-size: 17px !important; }
  #s2 .s2-card-p { font-size: 17px !important; border-radius: 30px; }

  /* --- s3 --- */
  #s3 { padding: 46px 0 46px; }
  /* Agnes, 2 Sep (revision 2): 親子玩樂/比賽 must sit on the SAME row as the other
     five, not drop underneath. At 768–1023 the six pills fit on one centred row
     once the gutter, the pill padding and the type step down a notch:
     six labels ≈ 590 px + 5 gaps at 6 px inside a 736 px content box at 768. */
  #s3 .s3-tabs {
    flex-wrap: nowrap; justify-content: center; overflow-x: visible;
    gap: 6px; padding: 4px 16px 10px;
  }
  #s3 .s3-tab { padding: 0 12px; min-height: 42px; }
  #s3 .s3-tab .t { font-size: 15px !important; line-height: 1.35 !important; }

  /* --- s4 --- */
  /* three programmes in ONE row from 600 px up — a landscape phone is a wide
     screen and shows the wide version (Agnes, 2 Sep); column capped at 900 */
  #s4 {
    padding: 52px max(28px, calc((100% - 900px) / 2)) 52px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "eyebrow eyebrow eyebrow"
      "head    head    head"
      "l1      l2      l3"
      "ph1     ph2     ph3"
      "b1      b2      b3"
      "closing closing closing";
    column-gap: 14px;
    --s4-photo: 0.6;                  /* 270 → 162 px circles */
  }
  #s4 .s4-head-zh { font-size: 23px !important; }
  #s4 .s4-label   { font-size: 15px !important; padding: 9px 12px; margin-top: 40px; margin-bottom: 20px; white-space: nowrap; align-self: end; }
  #s4 .s4-body    { font-size: 15px !important; margin-top: 18px; align-self: start; }
  #s4 .s4-closing { font-size: 20px !important; margin-top: 44px; }

  /* --- s5 --- */
  #s5 { padding: 56px var(--mx) 38px; --s5-masc: 0.40; --s5-masc-top: 44px; }
  #s5 .s5-lead, #s5 .s5-sub { font-size: 18px !important; }
  #s5 .s5-cta-cap { width: min(100%, 440px) !important; min-height: 64px; padding: 10px 18px 10px 160px; font-size: 14px !important; }
  #s5 .s5-cta { width: 146px !important; margin-left: max(0px, calc((100% - 440px) / 2)); font-size: 21px !important; }
  #s5 .s5-tagline { font-size: 16px !important; padding: 10px 22px; }
  #s5 .s5-links, #s5 .s5-links a { font-size: 16px !important; }
  #s5 .s5-logomark { width: 68px !important; }
}

/* ===========================================================================
   Carousel ≤ 767 px — the re-cut card. Art band cropped to canvas x 690.33 →
   1351.33 (661 px): the cat + phone on 1:64847 start at 743, the advisor cards on
   1:65067 at 837, every phone at 753–795, the 米星 badge on 1:65292 at 705. The
   text nodes leave absolute positioning and stack under the band with sizes
   written as calc(<device px> / --s3-zoom) so they land at their intended
   physical size whatever the zoom. The body plate is opaque so artwork that
   overhangs the band (the phone on 1:64847 reaches 766.8) is cut the way the
   desktop card cuts it with overflow:hidden; it is tinted from the artwork's
   bottom edge into white and the card carries a shadow, because on the near-
   white page a pure-white plate read as page, not card (Agnes, 2 Sep: "content
   should be in the content holder").
   =========================================================================== */
@media (max-width: 767px) {
  #s3 { background: linear-gradient(180deg, #fff6f1 0%, #fff9f6 100%); }
  #s3 .s3-viewport { --s3-canvas-w: 661; }
  #s3 .s3-slide { box-shadow: 0 8px 28px rgba(144, 86, 188, .16); }
  #s3 .s3-art {
    position: relative;
    width: 661px !important;
    height: auto !important;
    padding: 589.29px 0 calc(22px / var(--s3-zoom, 0.53));
  }
  #s3 .s3-art > :not(.t) { margin-left: -690.33px; }
  #s3 .s3-art::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 589.29px; bottom: 0;
    background: linear-gradient(180deg, #fbeff0 0%, #ffffff 60%);
    z-index: 1;
  }
  #s3 .s3-art .t {
    position: relative !important;
    z-index: 2;
    left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    margin: 0 !important;
    padding: 0 calc(18px / var(--s3-zoom, 0.53));
    text-align: left !important;
    letter-spacing: 0 !important;
  }
  #s3 .s3-art h3.t {                       /* slide headline */
    font-size: calc(21px / var(--s3-zoom, 0.53)) !important;
    line-height: 1.3 !important;
    padding-top: calc(16px / var(--s3-zoom, 0.53));
    padding-bottom: calc(10px / var(--s3-zoom, 0.53));
  }
  #s3 .s3-art p.t {                        /* slide body copy */
    font-size: calc(15px / var(--s3-zoom, 0.53)) !important;
    line-height: 1.6 !important;
    padding-bottom: calc(9px / var(--s3-zoom, 0.53));
  }
  #s3 .s3-art .t:last-child { padding-bottom: 0; }
  #s3 .s3-art .t span { line-height: inherit !important; font-size: inherit !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
  #s3 .s3-art h3.t { font-size: calc(26px / var(--s3-zoom, 0.8)) !important; }
  #s3 .s3-art p.t  { font-size: calc(17px / var(--s3-zoom, 0.8)) !important; }
  #s3 .s3-art .t   { padding: 0 calc(26px / var(--s3-zoom, 0.8)); }
}

/* ===========================================================================
   Carousel 768–1023 px — the Figma slide, whole. Copy stays absolute inside the
   1351.33 × 589.29 card and the card is zoomed to the column (capped at 900 px,
   wider than the 640 px text column so the copy lands ≥ 13.7 px at 768 and
   ~16 px at 900). Nothing here is a mobile derivation: it is the desktop card.
   =========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  #s3 .s3-viewport { margin: 8px calc(max(28px, (100% - 900px) / 2) - 16px) 0; padding-bottom: 8px; }
  #s3 .s3-slide { height: 589.29px !important; }
  #s3 .s3-art { width: 1351.33px !important; height: 589.29px !important; }
  #s3 .s3-art .t { position: absolute !important; }
  #s4 { --s4-photo: 0.74; column-gap: 20px; }   /* 270 → 200 px circles */
  #s4 .s4-label { font-size: 19px !important; padding: 11px 18px; }
  #s4 .s4-body  { font-size: 16px !important; }
  #s5 { --s5-masc: 0.5; --s5-masc-top: 40px; }
}