/* A full viewport of live particles; color tokens are supplied by the theme. */
:root { --particle-header: 78px; }
body:has([data-page="home"]:not([hidden])) .site-header:not(.is-scrolled) {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.hero-particle-stage {
  height: 100svh;
  min-height: 0;
  margin-top: calc(-1 * var(--particle-header));
  background: radial-gradient(ellipse at 63% 40%, #eeebf780, transparent 65%), #fffefa;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hero-particle-stage .hero-display { inset: 0; z-index: 0; pointer-events: none; }
.hero-particle-stage canvas { width: 100%; height: 100%; }
.hero-particle-stage .hero {
  width: min(1440px, calc(100% - 96px));
  height: 100%;
  min-height: 0;
  padding: 0;
  pointer-events: none;
}
.hero-particle-stage .hero-copy {
  position: absolute;
  left: 0;
  bottom: 115px;
  max-width: 570px;
  padding: 0;
  z-index: 2;
}
.hero-particle-stage .hero-copy:before {
  content: '';
  position: absolute;
  inset: -65px -120px -55px -90px;
  background: radial-gradient(ellipse at 30% 65%, #fffefaf5 5%, #fffefaaf 48%, #fffefa00 73%);
  z-index: -1;
  pointer-events: none;
}
.hero-particle-stage .hero-copy .eyebrow {
  font-size: 9px;
  letter-spacing: .12em;
  color: #857a97;
}
.hero-particle-stage .hero-copy h1 {
  font-size: clamp(48px, 4.5vw, 72px);
  line-height: 1.19;
  letter-spacing: -.065em;
  margin: 23px 0 20px;
}
.hero-particle-stage .hero-description { font-size: 14px; line-height: 1.85; color: #797774; }
.hero-particle-stage .hero-copy .hero-buttons { margin-top: 24px; }
.hero-particle-stage .hero-actions .button { pointer-events: auto; min-height: 50px; padding-inline: 20px; font-size: 12px; gap: 13px; }
.hero-particle-stage .hero-copy .hero-meta { font-size: 9px; margin-top: 16px; }
@media (min-width: 1700px) {
  .hero-particle-stage .hero-copy { bottom: 140px; }
  .hero-particle-stage .hero-copy h1 { font-size: 76px; }
}
@media (max-height: 760px) and (min-width: 801px) {
  .hero-particle-stage .hero-copy { bottom: 90px; }
  .hero-particle-stage .hero-copy h1 { font-size: 49px; margin-block: 16px; }
  .hero-particle-stage .hero-description { font-size: 12px; }
  .hero-particle-stage .hero-copy .hero-buttons { margin-top: 19px; }
  .hero-particle-stage .hero-actions .button { min-height: 46px; }
}
@media (max-width: 1000px) and (min-width: 651px) {
  .hero-particle-stage .hero-copy { max-width: 460px; }
  .hero-particle-stage .hero-copy h1 { font-size: 51px; }
  .hero-particle-stage .hero-description { font-size: 12px; }
}
@media (max-width: 800px) {
  :root { --particle-header: 70px; }
  .hero-particle-stage .hero { width: calc(100% - 48px); }
}
@media (max-width: 650px) {
  .hero-particle-stage { background: radial-gradient(ellipse at 54% 30%, #eae3f488, transparent 57%), #fffefa; }
  .hero-particle-stage .hero-copy { bottom: 100px; max-width: 100%; }
  .hero-particle-stage .hero-copy:before { inset: -55px -50px -70px; background: linear-gradient(0deg, #fffefa 9%, #fffefae8 55%, #fffefa00 100%); }
  .hero-particle-stage .hero-copy h1 { font-size: clamp(35px, 9.2vw, 50px); margin: 19px 0 17px; line-height: 1.2; }
  .hero-particle-stage .hero-copy .eyebrow { font-size: 7px; gap: 8px; }
  .hero-particle-stage .hero-copy .hero-new { font-size: 6px; padding: 2px 4px; }
  .hero-particle-stage .hero-description { font-size: 12px; line-height: 1.85; }
  .hero-particle-stage .hero-copy .hero-buttons { margin-top: 21px; gap: 8px; }
  .hero-particle-stage .hero-actions .button { font-size: 10px; padding-inline: 12px; gap: 7px; min-height: 46px; }
  .hero-particle-stage .hero-copy .hero-meta { font-size: 8px; margin-top: 14px; }
}
@media (max-width: 560px) {
  :root { --particle-header: 66px; }
  .hero-particle-stage .hero { width: calc(100% - 36px); }
}
@media (max-width: 370px) {
  .hero-particle-stage .hero-copy .hero-new { display: none; }
  .hero-particle-stage .hero-copy h1 { font-size: 35px; }
}
@media (max-height: 650px) {
  .hero-particle-stage .hero-copy { bottom: 71px; }
  .hero-particle-stage .hero-copy h1 { font-size: clamp(32px, 4.3vw, 42px); margin-block: 13px; }
  .hero-particle-stage .hero-copy .hero-meta { display: none; }
  .hero-particle-stage .hero-copy .hero-buttons { margin-top: 16px; }
  .hero-particle-stage .hero-actions .button { min-height: 42px; }
}
@media (max-height: 500px) and (min-width: 651px) {
  .hero-particle-stage .hero-copy .eyebrow { display: none; }
  .hero-particle-stage .hero-copy { bottom: 65px; }
  .hero-particle-stage .hero-description { font-size: 11px; }
  .hero-particle-stage .hero-copy h1 { font-size: 36px; }
}
@media (hover: hover) and (pointer: fine) {
  .hero-particle-stage[data-field-reduced="false"] { cursor: grab; }
  .hero-particle-stage[data-field-interaction="drag"] { cursor: grabbing; }
}