/* Section Kit base: scoped reset and shared parts. Load after tokens.css and before any block CSS.
   Everything is scoped under .sk. The double class beats host rules such as h1{} or .content p{},
   and all:revert drops whatever the host set on these elements. SVG art is left out of the reset
   because its fill attributes must survive. Limit: a host rule using an #id or !important can still win. */
.sk.sk {
  all: revert;
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
  overflow: clip;
  container: sk / inline-size;
  background: var(--sk-ground);
  color: var(--sk-ink);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-md);
  font-weight: 400;
  font-style: normal;
  line-height: var(--sk-line-body);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  text-indent: 0;
  word-spacing: normal;
  white-space: normal;
  font-variant: normal;
  font-stretch: normal;
  cursor: auto;
  visibility: visible;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--sk-motion-base) linear, color var(--sk-motion-base) linear;
}
.sk.sk :where(:not(svg, svg *)) {
  all: revert;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  text-decoration: none;
  list-style: none;
  float: none;
  box-shadow: none;
  max-width: none;
  overflow-wrap: break-word;
}
.sk.sk svg {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  float: none;
}
.sk.sk [hidden] { display: none !important; }
/* The ring takes its colour from the background it sits on. Coloured fields set --sk-ring to their on- colour. */
.sk.sk :focus-visible { outline: 3px solid var(--sk-ring, var(--sk-focus)); outline-offset: 2px; }
.sk.sk :lang(zh) { --sk-track-display: 0em; --sk-line-display: 1.22; }
.sk.sk:lang(zh) { --sk-track-display: 0em; --sk-line-display: 1.22; --sk-line-body: 1.75; }
.sk.sk:lang(zh) .sk-quote, .sk.sk:lang(zh) .sk-lead { text-wrap: balance; }

/* Seams: how a block meets the host page around it. */
.sk.sk[data-sk-seam="rule"] { border-top: var(--sk-stroke) solid var(--sk-ink); }
.sk.sk[data-sk-seam="gap"] { margin-block: var(--sk-join-space); }
.sk.sk[data-sk-seam="card"] { width: min(100% - 32px, var(--sk-join-max)); margin: var(--sk-join-space) auto; border-radius: var(--sk-join-radius); }

/* Heroes fit the first screen: type and padding also answer to the height left under any host header. */
.sk.sk[data-sk-block^="hero-"] {
  --sk-fold: calc(100svh - var(--sk-host-header, 0px));
  --sk-text-display: clamp(32px, min(5.7cqi, calc(var(--sk-fold) * 0.094)), 76px);
  --sk-section-y: clamp(24px, min(8cqi, calc(var(--sk-fold) * 0.085)), 112px);
}
.sk.sk-site-header + .sk.sk[data-sk-block^="hero-"] { --sk-host-header: 76px; }

.sk.sk .sk-wrap { max-width: var(--sk-max); margin-inline: auto; padding-inline: var(--sk-gutter); }
.sk.sk .sk-eyebrow { display: block; font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sk.sk .sk-title {
  display: block;
  font-family: var(--sk-font-display);
  font-weight: var(--sk-weight-display);
  font-size: var(--sk-text-title);
  line-height: var(--sk-line-display);
  letter-spacing: var(--sk-track-display);
  text-wrap: balance;
}
.sk.sk .sk-display { font-size: var(--sk-text-display); }
.sk.sk .sk-lead { display: block; font-size: var(--sk-text-lg); line-height: 1.45; text-wrap: pretty; max-width: 62ch; }
.sk.sk .sk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.sk.sk .sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;
  padding: 10px 24px;
  border: var(--sk-stroke) solid var(--sk-btn-line, var(--sk-accent));
  border-radius: var(--sk-radius-sm);
  background: var(--sk-btn-bg, var(--sk-accent));
  color: var(--sk-btn-fg, var(--sk-on-accent));
  font-size: var(--sk-text-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--sk-motion-fast) var(--sk-ease), background-color var(--sk-motion-fast) linear, color var(--sk-motion-fast) linear;
}
.sk.sk .sk-btn:hover { transform: translateY(-2px); }
.sk.sk .sk-btn--ghost { --sk-btn-bg: transparent; --sk-btn-fg: currentColor; --sk-btn-line: currentColor; }
.sk.sk a.sk-btn--ghost { color: inherit; }

.sk.sk .sk-media { display: block; overflow: hidden; position: relative; }
.sk.sk .sk-media > svg, .sk.sk .sk-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk.sk .sk-face { display: block; flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; }
.sk.sk .sk-face > svg, .sk.sk .sk-face > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sk.sk .sk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sk.sk .sk-id { display: block; flex: 1 1 160px; min-width: 0; }
.sk.sk .sk-name { display: block; font-weight: 700; line-height: 1.25; }
.sk.sk .sk-role { display: block; font-size: var(--sk-text-sm); line-height: 1.3; color: var(--sk-soft, var(--sk-ink-soft)); }
.sk.sk .sk-band { display: block; height: clamp(28px, 5cqi, 60px); overflow: hidden; }
.sk.sk[data-sk-block^="hero-"] .sk-band { height: clamp(24px, min(5cqi, calc(var(--sk-fold) * 0.05)), 60px); }

/* The sample flag. It sits on every block until real copy goes in; the checker refuses it. */
.sk.sk .sk-flag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  padding: 3px 10px;
  background: var(--sk-ink);
  color: var(--sk-ground);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

@keyframes sk-rise { from { transform: translateY(26px); } to { transform: none; } }
@keyframes sk-tilt-in { from { transform: rotate(0deg) scale(0.96); } to { transform: rotate(var(--sk-tilt)) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sk.sk *, .sk.sk *::before, .sk.sk *::after { animation: none !important; transition: none !important; }
}