/* S5 — 會員方案 + footer. Type + fills from spec/section-membership-footer.json;
   geometry is inline on each element. Everything sits on the s0 gradient band, so all text is white
   except the CTA label. */

/* --- mascot (1:65097 mask + 1:65100 image) ------------------------------------------------ */
/* clip polygon = mask child 1:65098 "M316.896 345.463 L250.007 386.227 L0 428 V0 H316.896 Z",
   scaled by 316.593/316.896 (= 427.590/428) back onto the node box. */
#s5 .s5-mascot-clip {
  clip-path: polygon(0 0, 316.59px 0, 316.59px 345.13px, 249.77px 385.86px, 0 427.59px);
}
#s5 .s5-mascot {
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-53.62deg);
}

#s5 .s5-shadow > img { position: absolute; }

/* --- 會員方案 pill ------------------------------------------------------------------------- */
#s5 .s5-pill {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(26px * var(--ts, 1));
  line-height:calc(31.2px * var(--ts, 1));
  letter-spacing:calc(0.52px * var(--ts, 1));
  text-align: center;
  white-space: pre;
  color: #ffffff;
}

/* 1:65161 — Figtree 700 in the file; the string is Han, so it renders in Noto Sans HK, exactly as
   the Figma render does. */
#s5 .s5-head {
  font-family: "Figtree", "Noto Sans HK", sans-serif;
  font-weight: 700;
  font-size:calc(66px * var(--ts, 1));
  line-height:calc(79.2px * var(--ts, 1));
  letter-spacing: 0;
  text-align: center;
  white-space: pre;
  color: #ffffff;
}

/* 1:65185 — Figtree 500 in the file (the Latin runs "Aimeee", "VIP", "SVIP", "SSVIP" pick it up,
   the Han runs fall back to Noto Sans HK). */
#s5 .s5-lead {
  font-family: "Figtree", "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(38px * var(--ts, 1));
  line-height:calc(45.6px * var(--ts, 1));
  letter-spacing: 0;
  text-align: center;
  white-space: pre;
  color: #ffffff;
}

#s5 .s5-sub {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(34px * var(--ts, 1));
  line-height:calc(44px * var(--ts, 1));
  letter-spacing: 0;
  text-align: center;
  color: #ffffff;
}

/* --- 快速註冊 CTA -------------------------------------------------------------------------- */
#s5 .s5-cta {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(36px * var(--ts, 1));
  line-height:calc(43.2px * var(--ts, 1));
  letter-spacing:calc(0.72px * var(--ts, 1));
  text-align: center;
  white-space: pre;
  color: #ff5760;
}
/* Hit area = the white pill drawn by 1:65030 (555.4→787.8 × 4842.5→4930.2 on the page).
   Ledger row 6: hover/focus are not in the Figma; kept minimal. */
#s5 .s5-cta::before {
  content: "";
  position: absolute;
  left: -19.6px;
  top: -22.5px;
  width: 232.4px;
  height: 87.7px;
  border-radius: 44px;
}
#s5 .s5-cta:hover { opacity: 0.9; }
#s5 .s5-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 6px; border-radius: 4px; }

#s5 .s5-cta-cap {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(20px * var(--ts, 1));
  line-height:calc(30px * var(--ts, 1));
  letter-spacing: 0;
  text-align: left;
  color: #ffffff;
}

/* --- footer -------------------------------------------------------------------------------- */
#s5 .s5-rule { background: #ffffff; }

/* 1:65027 — the file's single Inter 400 node (the ledger's "raised" row names 1:65185; 1:65185 is
   Figtree 500, this is the Inter one). Built as Noto Sans HK 400 per that row, Inter kept as the
   declared fallback; it is not in the page's font link, so Noto Sans HK is what paints. */
#s5 .s5-tagline {
  font-family: "Noto Sans HK", "Inter", sans-serif;
  font-weight: 400;
  font-size:calc(23.65px * var(--ts, 1));
  line-height:calc(28.62px * var(--ts, 1));
  letter-spacing: 0;
  text-align: left;
  white-space: pre;
  color: #ffffff;
}

/* 1:65184 — one text node in the Figma; built as one box whose three labels are real links
   (ledger row 4). The four-space runs and pipes stay as text so the string check passes. */
#s5 .s5-links {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(22px * var(--ts, 1));
  line-height:calc(26.4924px * var(--ts, 1));
  letter-spacing:calc(0.88px * var(--ts, 1));
  text-align: center;
  white-space: pre;
  color: #ffffff;
}
#s5 .s5-links a { text-decoration: none; }
#s5 .s5-links a:hover { opacity: 0.9; text-decoration: underline; }
#s5 .s5-links a:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 3px; }

/* --- character runs (spec `runs`, no data-fig on spans) ------------------------------------
   1:65185 base Figtree 500: "Aimeee ", "VIP", "SVIP", "SSVIP " are Figtree 600 and the 、 。
   are Noto Sans HK 500. 1:65186 base Noto Sans HK 500: "Aimeee" is Figtree 500.
   1:65027 base Inter 400 (built Noto Sans HK 400): "AI 私人助理" is Figtree 400 — the Han part of
   that run has no Figtree glyphs and falls back to Noto Sans HK, exactly as the Figma render does. */
#s5 .r-fig600, #s5 .r-fig500, #s5 .r-fig400, #s5 .r-noto500 {
  /* A run that changes font-family raises the line box ascent and drops the whole line. Measured on
     1:65185: the Figtree 600 runs pushed the ink down 4 px against absoluteRenderBounds. Pinning the
     inline box to the glyph and aligning on the baseline removes the shift and keeps the run widths. */
  line-height: 1;
  vertical-align: baseline;
}
#s5 .r-fig600 { font-family: "Figtree", "Noto Sans HK", sans-serif; font-weight: 600; }
#s5 .r-fig500 { font-family: "Figtree", "Noto Sans HK", sans-serif; font-weight: 500; }
#s5 .r-fig400 { font-family: "Figtree", "Noto Sans HK", sans-serif; font-weight: 400; }
#s5 .r-noto500 { font-family: "Noto Sans HK", sans-serif; font-weight: 500; letter-spacing: 0; }

/* Ledger row 8 (team request via Sam, 2026-09-07): hide the 快速註冊 CTA, its
   caption and pill background on every breakpoint. Markup kept — delete this
   block to restore. */
#s5 .s5-cta-bg, #s5 .s5-cta, #s5 .s5-cta-cap { display: none !important; }