/* hero-poster. Scoped to its root class. Colours come only from tokens.css. */
.sk.sk-hero-poster { background: var(--sk-third); color: var(--sk-on-third); --sk-ring: var(--sk-on-third); }
.sk.sk-hero-poster .sk-inner { display: flex; flex-direction: column; gap: clamp(12px, min(3cqi, calc(var(--sk-fold) * 0.03)), 36px); padding-block: clamp(20px, min(5cqi, calc(var(--sk-fold) * 0.05)), 72px) var(--sk-section-y); }
.sk.sk-hero-poster .sk-poster { font-size: clamp(37px, min(10.6cqi, calc(var(--sk-fold) * 0.128)), 150px); line-height: 0.98; animation: sk-rise var(--sk-motion-slow) var(--sk-ease) both; }
.sk.sk-hero-poster:lang(zh) .sk-poster { line-height: 1.16; }
.sk.sk-hero-poster .sk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px clamp(24px, 5cqi, 72px); padding-top: clamp(12px, min(2.4cqi, calc(var(--sk-fold) * 0.025)), 28px); border-top: var(--sk-stroke-bold) solid currentColor; }
.sk.sk-hero-poster .sk-lead { flex: 1 1 340px; }
.sk.sk-hero-poster .sk-btn { --sk-btn-bg: var(--sk-ink); --sk-btn-fg: var(--sk-ground); --sk-btn-line: var(--sk-ink); }
.sk.sk-hero-poster .sk-btn--ghost { --sk-btn-bg: transparent; --sk-btn-fg: var(--sk-on-third); --sk-btn-line: var(--sk-on-third); }