/* s1 — nav + hero. Type/colour from spec/section-nav-hero.json; geometry is inline on each node. */

/* ---- nav ---------------------------------------------------------------- */
.s1-logo { display: block; }
.s1-logo img { width: 100%; height: 100%; }

/* 1:64877 — fill #F3ECFE with Figma blendMode SOFT_LIGHT (spec `blend`), no opacity.
   Figma's SOFT_LIGHT is the Pegtop formula; CSS soft-light is the W3C one, which lands
   ~16/255 low on red and ~13 low on blue against this backdrop and exact on green. The
   second layer adds that constant back with plus-lighter. Both layers are pure background:
   the label above them is an independent element and can change language freely. */
.s1-eng-bg  { mix-blend-mode: soft-light; }
.s1-eng-fix {
  mix-blend-mode: plus-lighter; background: rgb(16, 0, 13);
  -webkit-mask: url(../assets/svg/1-64877.svg) center / 100% 100% no-repeat;
          mask: url(../assets/svg/1-64877.svg) center / 100% 100% no-repeat;
}

.s1-eng {
  font-family: var(--font-en); font-weight: 500; font-size:calc(22px * var(--ts, 1)); line-height:calc(26.4px * var(--ts, 1));
  color: #ffffff; text-align: center;
}
.s1-start {
  font-family: var(--font-zh); font-weight: 500; font-size:calc(22px * var(--ts, 1)); line-height:calc(26.4px * var(--ts, 1));
  color: #ffffff; text-align: center;
}
/* hit areas cover the drawn pills without changing the measured text box */
.s1-eng::before   { content: ""; position: absolute; left: 7.24px; top: -12.01px; width: 96.96px; height: 49.09px; border-radius: 24.55px; }
.s1-start::before { content: ""; position: absolute; left: -18.58px; top: -12.01px; width: 132.33px; height: 49.09px; border-radius: 24.55px; }

/* ---- hero copy ---------------------------------------------------------- */
/* text-indent cancels CSS's trailing letter-space so centred lines sit where Figma puts them */
.s1-h1 {
  font-family: var(--font-zh); font-weight: 700; font-size:calc(83px * var(--ts, 1)); line-height:calc(99.6px * var(--ts, 1));
  letter-spacing:calc(4.15px * var(--ts, 1)); text-indent: 4.15px; color: #ffffff; text-align: center;
}
.s1-sub {
  font-family: var(--font-zh); font-weight: 500; font-size:calc(38px * var(--ts, 1)); line-height:calc(45.6px * var(--ts, 1));
  color: #ffffff; text-align: center;
}

/* ---- download CTA ------------------------------------------------------- */
.s1-cta-bg img { position: absolute; }
.s1-cta {
  font-family: var(--font-zh); font-weight: 500; font-size:calc(36px * var(--ts, 1)); line-height:calc(43.2px * var(--ts, 1));
  letter-spacing:calc(.72px * var(--ts, 1)); text-indent: .72px; color: #ff5760; text-align: center;
}
.s1-cta::before { content: ""; position: absolute; left: -23.97px; top: -24.54px; width: 233.26px; height: 87.73px; border-radius: 43.87px; }
.s1-cta-note {
  font-family: var(--font-zh); font-weight: 500; font-size:calc(20px * var(--ts, 1)); line-height:calc(30px * var(--ts, 1));
  color: #ffffff; text-align: left;
}

/* ---- mascot (1:65019 clipped by mask 1:65016 = x 486.09–1272.36, y 625.93–1053.40) ---- */
.s1-mascot { clip-path: inset(33.5px 5.49px 185.37px 0px); }

/* ---- value captions ----------------------------------------------------- */
.s1-cap {
  font-family: var(--font-zh); font-weight: 500; font-size:calc(29px * var(--ts, 1)); line-height:calc(38px * var(--ts, 1));
  color: #ffffff; text-align: center;
}

/* ---- states (not drawn in Figma; ledger row 6) -------------------------- */
.s1-logo, .s1-eng, .s1-start, .s1-cta { transition: opacity .18s ease; }
.s1-logo:hover, .s1-eng:hover, .s1-start:hover, .s1-cta:hover { opacity: .9; }
.s1-eng:focus-visible, .s1-start:focus-visible, .s1-cta:focus-visible, .s1-logo:focus-visible {
  outline: 2px solid #ffffff; outline-offset: 6px; border-radius: 4px;
}

/* 1:65159 character run: the "AI" pair is Figtree 700 inside the Noto Sans HK 700 headline
   (spec runs[1]); size, line-height, colour and 4.15px tracking all inherit the element. */
.s1-h1-en { font-family: var(--font-en); font-weight: 700; }

/* Ledger row 7 (team request via Sam, 2026-09-07): hide the ENG toggle and the
   立即開始 nav button on every breakpoint. Markup + i18n runtime stay in place —
   delete this block to restore both. */
.s1-eng-bg, .s1-eng-fix, .s1-eng, .s1-start-bg, .s1-start { display: none !important; }

/* Ledger row 11 (team via Sam, 7 Sep 2026): hide the hero 立即下載 CTA + note + pill on every breakpoint. */
.s1-cta-bg, .s1-cta, .s1-cta-note { display: none !important; }
/* Ledger row 12: mobile-only line break in the H1 (全港首個AI / 家庭決策作業系統). Desktop keeps one line. */
.m-br { display: none; }