/* V13 / Twin threads. The material is an alpha WebP, not a flattened hero banner. */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(120deg, #f8fbff 0%, #fcfdff 46%, #edf5ff 100%);
  border-bottom: 1px solid #edf2f9;
}
.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  column-gap: 22px;
  padding-top: 98px;
  padding-bottom: 12px;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: #687991; font-size: 9px; font-weight: 550; letter-spacing: .27em; line-height: 1.7; }
.eyebrow > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #2874ff; }
.hero h1 { font-size: clamp(40px, 3.7vw, 56px); font-weight: 750; line-height: 1.34; letter-spacing: -.05em; color: #0a101c; }
.hero h1 > span { display: block; white-space: nowrap; }
.hero-description { margin-top: 18px; color: #657181; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 24px; }
.hero-button { min-width: 166px; }
.hero-about { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #526681; font-size: 13px; }
.hero-about:hover { color: var(--blue); }
.hero-about span { font-size: 16px; }
.hero-visual { position: relative; min-width: 0; align-self: stretch; display: flex; align-items: center; }
.thread-stage { position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% + 80px); aspect-ratio: 3 / 2; margin-left: -38px; pointer-events: none; user-select: none; }
.thread-aura { position: absolute; inset: 12% 0 2%; background: radial-gradient(ellipse at 60% 62%, #dcecffbb 0%, #e4f0ff77 40%, #eaf4ff00 69%); }
.thread-pointer { position: absolute; inset: 0; }
.thread-float { width: 100%; height: 100%; }
.thread-float picture { display: block; width: 100%; height: 100%; }
.thread-art { display: block; width: 100%; height: auto; }
.thread-bead { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 27%, #fff 0%, #e1f0ff 20%, #8bbcff 63%, #679ee9 80%, #c6e4ff 100%); box-shadow: inset 0 0 0 1px #fff9; }
.bead-one { width: 17px; height: 17px; top: 13%; left: 61%; }
.bead-two { width: 10px; height: 10px; top: 73%; left: 8%; opacity: .8; }
.hero-visual-caption { position: absolute; bottom: -25px; left: 13%; right: 3%; display: flex; align-items: center; gap: 13px; color: #7b91ac; font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
.visual-index { font-size: 9px; letter-spacing: .16em; color: #9aacbf; }
.caption-rule { width: 47px; height: 1px; margin-left: 5px; background: #c4d5ea; }
.hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; margin-top: 12px; }
.hero-values { display: flex; align-items: center; gap: 12px; color: #8494a9; font-size: 8px; letter-spacing: .21em; line-height: 1.6; }
.hero-values i { width: 3px; height: 3px; background: #b2c5df; border-radius: 50%; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 100px; height: 38px; padding: 0 13px; background: #ffffff80; border: 1px solid #dfe8f3; border-radius: 999px; color: #70829b; font-size: 10px; }
.motion-toggle:hover { background: #fff; color: #2c6cca; }
.motion-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .play-symbol { display: none; }
.motion-toggle[aria-pressed="true"] .play-symbol { display: block; }
.motion-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.motion-toggle:disabled { cursor: default; opacity: .75; }
@media (min-width: 1600px) {
 .hero-layout { padding-top: 102px; }
 .hero-description { font-size: 16px; }
}
@media (max-width: 1199px) and (min-width: 768px) {
 .hero-layout { grid-template-columns: 1.15fr .85fr; column-gap: 0; padding-top: 104px; }
 .hero h1 { font-size: clamp(32px, 3.65vw, 43px); }
 .hero-description { font-size: 14px; }
 .eyebrow { font-size: 8px; letter-spacing: .22em; margin-bottom: 22px; }
 .hero-actions { gap: 20px; margin-top: 24px; }
 .thread-stage { width: calc(100% + 86px); margin-left: -25px; }
 .hero-visual-caption { left: 5%; right: 0; bottom: 0; font-size: 9px; gap: 8px; }
 .caption-rule { display: none; }
 .hero-bottom { margin-top: 26px; }
}
@media (max-width: 900px) and (min-width: 768px) {
 .hero-actions { gap: 17px; }
 .hero-button { min-width: 142px; }
 .hero-about { font-size: 12px; }
 .hero-visual-caption { font-size: 8px; }
}
@media (max-width: 767px) {
 .hero { background: linear-gradient(145deg, #f8fbff 0%, #fcfdff 46%, #edf5ff 100%); }
 .hero-layout { display: block; padding-top: 101px; padding-bottom: 13px; }
 .hero-copy { padding: 0; }
 .eyebrow { font-size: 7.5px; letter-spacing: .2em; gap: 9px; margin-bottom: 21px; }
 .eyebrow > span { width: 6px; height: 6px; flex-basis: 6px; }
 .hero h1 { font-size: clamp(26px, 7.65vw, 44px); line-height: 1.42; letter-spacing: -.045em; }
 .hero-description { max-width: 490px; font-size: 13px; line-height: 1.9; margin-top: 17px; }
 .hero-actions { gap: 22px; margin-top: 23px; }
 .hero-button { min-height: 45px; min-width: 150px; padding-inline: 23px; font-size: 13px; }
 .hero-about { font-size: 12px; }
 .hero-visual { margin-top: 3px; }
 .thread-stage { position: relative; top: auto; transform: none; width: 106%; flex-shrink: 0; margin: -1% auto -1%; aspect-ratio: 3 / 2; left: -3%; }
 .hero-visual-caption { bottom: -2px; left: 0; right: 0; justify-content: center; font-size: 9px; gap: 10px; }
 .caption-rule { width: 22px; margin-left: 0; }
 .bead-two { display: none; }
 .bead-one { width: 12px; height: 12px; }
 .hero-bottom { margin-top: 15px; gap: 8px; }
 .hero-values { font-size: 6.5px; letter-spacing: .09em; gap: 8px; }
 .hero-values i { width: 2px; height: 2px; }
 .motion-toggle { min-width: 86px; min-height: 40px; height: 40px; font-size: 9px; padding-inline: 9px; }
}
@media (min-width: 480px) and (max-width: 767px) {
 .thread-stage { width: min(96%, 510px); left: 0; margin-block: 0; }
 .hero-visual { margin-top: 12px; }
 .hero h1 { font-size: clamp(36px, 6.9vw, 45px); }
 .hero-description { font-size: 14px; }
}
@media (max-width: 374px) {
 .hero-layout { padding-top: 96px; }
 .hero h1 { font-size: clamp(22px, 7.8vw, 28px); }
 .hero-description { font-size: 12px; }
 .hero-actions { gap: 15px; }
 .hero-button { min-width: 135px; padding-inline: 18px; }
 .hero-about { font-size: 11px; }
 .hero-values { font-size: 6px; gap: 5px; }
 .eyebrow { font-size: 6.6px; letter-spacing: .16em; }
}