/* S2 — 痛點共鳴. Type + fills from spec/section-pain-points.json; geometry is inline on each element. */

#s2 .s2-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;
  color: #54565b;
}

/* 1:65158 — Figtree 700 in the file; the string is Han, so it renders in Noto Sans HK (same as the
   Figma render). Gradient fill #fe884a → #ff6666 → #895ab7, handles (0,.5)→(1,.5) = 90deg. */
#s2 .s2-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: nowrap;
  background-image: linear-gradient(90deg, #fe884a 0%, #ff6666 50%, #895ab7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 1:65158 runs[1] asks for the fullwidth comma in Noto Sans HK 700. The font stack already resolves
   it there (Figtree has no U+FF0C), so no span: an inline box with its own family raises the line
   box ascent and drops the whole headline 6 px off the Figma render bounds. */

#s2 .s2-sub {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(38px * var(--ts, 1));
  line-height:calc(52px * var(--ts, 1));
  letter-spacing:calc(0.76px * var(--ts, 1));
  text-align: center;
  color: #54565b;
}

#s2 .s2-stat {
  font-family: "Figtree", "Noto Sans HK", sans-serif;
  font-weight: 300;
  font-size:calc(180px * var(--ts, 1));
  line-height:calc(216px * var(--ts, 1));
  text-align: center;
  color: #54565b;
}
/* Figma excludes trailing letter-spacing from a centred line; CSS does not. text-indent puts the
   half-track back so the glyphs land on the Figma render bounds. */
#s2 .s2-stat-a { letter-spacing:calc(7.2px * var(--ts, 1)); text-indent: 3.6px; }
#s2 .s2-stat-b { letter-spacing:calc(-3.6px * var(--ts, 1)); text-indent: -1.1px; }

/* 1:65195 runs[1] — the % is Figtree Regular 400 @ 110px, tracking -2.2. */
#s2 .s2-pct {
  font-family: "Figtree", "Noto Sans HK", sans-serif;
  font-weight: 400;
  font-size:calc(110px * var(--ts, 1));
  letter-spacing:calc(-2.2px * var(--ts, 1));
}

/* 1:65174 runs[0] — "WhatsApp " is Figtree SemiBold 600, tracking 0.64. */
#s2 .s2-latin {
  font-family: "Figtree", "Noto Sans HK", sans-serif;
  font-weight: 600;
  letter-spacing:calc(0.64px * var(--ts, 1));
}

/* 1:65144 — a 0-width VECTOR, i.e. a vertical rule. The section spec carries no paint; the stroke in
   source/figma/nodes-full.json is #606060, weight 1, align CENTER → renderBounds x 863.6, w 1. */
#s2 .s2-divider { background: #606060; }

#s2 .s2-cap {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 400;
  font-size:calc(35px * var(--ts, 1));
  line-height:calc(42px * var(--ts, 1));
  letter-spacing:calc(-0.7px * var(--ts, 1));
  text-align: center;
  color: #54565b;
}

#s2 .s2-card-p {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 500;
  font-size:calc(32px * var(--ts, 1));
  line-height:calc(44px * var(--ts, 1));
  letter-spacing: 0;
  text-align: left;
  color: #7586a0;
}