/* HelioStep waitlist page (Oct 28, 2026). Load after hs.css: it uses the tokens (--door, --paper, --amber, --font-display ...)
   and the web-, hs- and ui- classes from hs.css. Section markup: see the exported board html/waitlist/WL5-waitlist.html. */

.wl { --wl-panel: #24464C; --wl-line: rgba(242,238,230,.16); scroll-behavior: smooth; }
.wl .web-head .web-wrap { min-height: 96px; }
.wl-logo { display: inline-flex; align-items: center; min-height: 44px; }
.wl-logo img { display: block; width: 132px; height: 60px; }
.wl-headbtn { min-height: 44px; padding: 0 18px; border-radius: 22px; display: inline-flex; align-items: center; font: 700 16px/1 var(--font-body);
  color: var(--on-door); text-decoration: none; box-shadow: inset 0 0 0 2px var(--on-door-muted); }
.wl a:focus-visible, .wl button:focus-visible, .wl input:focus-visible, .wl summary:focus-visible { outline: 3px solid #F5B841; outline-offset: 3px; }

/* the form */
.wl-join { width: 100%; }
.wl-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.wl-label { font: 700 17px/1.3 var(--font-body); }
.wl-row { display: flex; gap: 10px; }
.wl-input { flex: 1 1 auto; min-width: 0; height: 56px; border: 0; border-radius: 28px; padding: 0 22px; font: 400 18px/1 var(--font-body);
  background: #FFFFFF; color: #1C2226; box-shadow: inset 0 0 0 1.5px #6E7A80; }
.wl-input::placeholder { color: #6A7377; }
.wl-input.err { box-shadow: inset 0 0 0 2.5px #1C2226; }
.wl-submit { flex: none; min-height: 56px; padding: 0 26px; font-size: 18px; cursor: pointer; }
.wl-err { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 16px; line-height: 1.45; font-weight: 600; background: #FBF7EE; color: #1C2226; }
.wl-roles { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.wl-roles legend { padding: 0; margin: 0 0 10px; font: 700 17px/1.3 var(--font-body); }
.wl-roles legend span { font-weight: 400; opacity: .8; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chip { appearance: none; border: 0; min-height: 44px; padding: 0 18px; border-radius: 22px; cursor: pointer; font: 600 16px/1 var(--font-body);
  background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.wl-chip.on { background: var(--paper-bright); color: #1C2226; box-shadow: inset 0 0 0 2.5px var(--amber); font-weight: 700; }
.wl-fine { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.wl-thanks { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wl-thanks h2 { margin: 0; font: 800 30px/1.15 var(--font-display); letter-spacing: -.01em; }
.wl-thanks p { margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.wl-link { appearance: none; border: 0; background: none; padding: 0; min-height: 44px; font: 700 16px/1 var(--font-body); color: inherit;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* the video */
.wl-media > img, .wl-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-media > video { opacity: 0; transition: opacity .35s ease-out; }
.is-seen .wl-media > video, .wl-media.is-seen > video { opacity: 1; }
.wl-play { position: absolute; right: 20px; bottom: 20px; z-index: 3; appearance: none; border: 0; min-height: 44px; padding: 0 18px; border-radius: 22px;
  display: none; align-items: center; background: rgba(16,30,32,.78); color: #F2EEE6; font: 700 15px/1 var(--font-body); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.is-playing .wl-play, .is-paused .wl-play, .is-ended .wl-play { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .wl-media > video, .wl-play { display: none !important; } .wl { scroll-behavior: auto; } }

/* sections */
.wl .web-h1, .wl .web-h2, .wl-sheet h2, .wl-letter h2 { text-wrap: balance; }
.wl .web-kicker { margin: 0; }
.wl-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.wl-points li { padding: 18px 0; box-shadow: inset 0 1px 0 var(--wl-pt-line, rgba(28,34,38,.14)); }
.wl-points h3 { margin: 0 0 4px; font: 800 21px/1.3 var(--font-display); }
.wl-points p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--wl-pt-muted, var(--on-paper-muted)); }
.wl-faq { display: flex; flex-direction: column; }
.wl-faq details { box-shadow: inset 0 -1px 0 var(--wl-faq-line, rgba(28,34,38,.16)); }
.wl-faq summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
  font: 700 20px/1.35 var(--font-body); cursor: pointer; list-style: none; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary svg { transition: transform .2s ease-out; }
.wl-faq details[open] summary svg { transform: rotate(180deg); }
.wl-faq p { margin: 0 0 22px; max-width: 40em; font-size: 18px; line-height: 1.6; color: var(--wl-faq-muted, var(--on-paper-muted)); }
.wl-foot { padding: 40px 0 48px; }
.wl-foot nav { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.wl-foot a { min-height: 44px; display: inline-flex; align-items: center; font: 600 16px/1 var(--font-body); color: inherit; text-decoration: none; }
.wl-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .wl .web-head .web-wrap { min-height: 72px; }
  .wl-logo img { width: 110px; height: 50px; }
  .wl-headbtn { display: none; }
  .wl-row { flex-direction: column; }
  .wl-submit { width: 100%; }
  .wl-points h3 { font-size: 19px; }
  .wl-faq summary { font-size: 18px; }
  .wl-faq p { font-size: 17px; }
}

/* A · Night door */
.wl-a .wl-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; background: none; }
.wl-hero { position: relative; overflow: hidden; height: clamp(700px, 54vw, 790px); color: var(--on-door);
  background: linear-gradient(180deg, #1E2E2D 0%, #172A29 18%, #132726 37%, #112527 55%, #102427 74%, #0E2022 88%, #0F2323 100%); }
.wl-hero .wl-media { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 16 / 9; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(90deg, transparent, #000 9%); }
.wl-hero .wl-copy { position: relative; z-index: 2; box-sizing: border-box; width: calc(max(32px, calc(50% - 568px)) + 492px);
  padding: 176px 0 0 max(32px, calc(50% - 568px)); display: flex; flex-direction: column; gap: 22px; }
.wl-hero .web-h1 { font-size: 64px; line-height: 1.04; }
.wl-hero .web-lead { font-size: 19px; color: var(--on-door-muted); }
.wl-hero .wl-join { margin-top: 10px; }
.wl-hero .wl-fine { color: var(--on-door-muted); }
.wl-a .wl-chip { color: var(--on-door); box-shadow: inset 0 0 0 1.5px rgba(242,238,230,.5); }
.wl-a .wl-chip.on { color: #1C2226; box-shadow: inset 0 0 0 2.5px var(--amber); }

/* the founders' note: a sheet on the door */
.wl-a .wl-noteband { padding: 112px 0; }
.wl-sheet { max-width: 760px; margin: 0 auto; padding: 60px 72px 56px; }
.wl-sheet h2 { margin: 0 0 22px; font: 800 38px/1.12 var(--font-display); letter-spacing: -.015em; }
.wl-sheet p { margin: 0 0 16px; font-size: 20px; line-height: 1.65; }
.wl-sheet .sig { margin: 26px 0 0; font: 700 19px/1.3 var(--font-display); }
.wl-sheet .web-btn { margin-top: 24px; }

.wl-a .wl-teach { --wl-pt-line: var(--wl-line); --wl-pt-muted: var(--on-door-muted); }
.wl-a .wl-teach .web-lead { color: var(--on-door-muted); }
@media (min-width: 761px) { .wl-a .wl-phone-l { order: -1; } }

/* privacy: four plain promises */
.wl-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin: 8px 0 0; padding: 0; list-style: none; }
.wl-promises li { padding: 24px 0 26px; box-shadow: inset 0 1px 0 rgba(28,34,38,.16); }
.wl-promises h3 { margin: 0 0 6px; font: 800 24px/1.25 var(--font-display); letter-spacing: -.01em; }
.wl-promises p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-paper-muted); }
.wl-a .wl-privhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.wl-a .wl-privhead a { color: var(--on-paper); font: 700 17px/1 var(--font-body); min-height: 44px; display: inline-flex; align-items: center;
  text-underline-offset: 4px; }

.wl-a .wl-faqband { --wl-faq-line: var(--wl-line); --wl-faq-muted: var(--on-door-muted); }
.wl-faqgrid { display: grid; grid-template-columns: 4fr 7fr; gap: 32px 64px; align-items: start; }
.wl-faqgrid .web-lead { font-size: 18px; margin-top: 14px; }
.wl-a .wl-foot { background: var(--door-deep); color: #F2EEE6; }

@media (max-width: 1140px) {
  .wl-a .wl-head { position: relative; background: #1E2E2D; }
  .wl-hero { height: auto; display: flex; flex-direction: column; }
  .wl-hero .wl-media { position: relative; order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
  .wl-hero .wl-media > img, .wl-hero .wl-media > video { object-position: 90% 50%; }
  .wl-hero .wl-copy { width: auto; padding: 28px 16px 56px; gap: 18px; }
  .wl-hero .web-h1 { font-size: 42px; }
  .wl-hero .web-lead { font-size: 18px; }
  .wl-play { right: 12px; bottom: 12px; }
}
@media (max-width: 760px) {
  .wl-a .wl-noteband { padding: 64px 0; }
  .wl-sheet { padding: 36px 24px 32px; }
  .wl-sheet h2 { font-size: 30px; }
  .wl-sheet p { font-size: 18px; }
  .wl-promises { grid-template-columns: 1fr; }
  .wl-promises h3 { font-size: 21px; }
  .wl-promises p { font-size: 17px; }
  .wl-faqgrid { grid-template-columns: 1fr; gap: 16px; }
  .wl .web-split .art { justify-content: center; }
}

/* Final · A with three pieces from B */
.wl-f .wl-sheet.letter { max-width: none; display: grid; grid-template-columns: 4fr 7fr; gap: 32px 64px; align-items: start; padding: 72px 72px 64px; }
.wl-f .wl-sheet.letter h2 { margin: 0; font-size: 48px; line-height: 1.06; letter-spacing: -.02em; }
.wl-f .letter .body { max-width: 640px; }
.wl-f .letter .body p { margin: 0 0 18px; font-size: 22px; line-height: 1.6; }
.wl-f .letter .body p:first-child { font: 700 28px/1.4 var(--font-display); letter-spacing: -.01em; margin-bottom: 22px; }
.wl-f .letter .body p.sig { margin: 28px 0 0; font: 700 20px/1.3 var(--font-display); }

.wl-pair { display: flex; gap: 22px; align-items: flex-start; }
.wl-pair > :last-child { margin-top: 72px; }
.wl-pair.m { display: none; }

.wl-f .wl-priv .web-kicker { color: var(--on-paper-muted); }
.wl .wl-statement { max-width: 980px; margin: 16px 0 0; font: 800 40px/1.2 var(--font-display); letter-spacing: -.015em; color: var(--on-paper); text-wrap: balance; }
.wl-f .wl-statement span { color: var(--on-paper-muted); }
.wl-f .wl-plain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 48px; margin: 44px 0 0; padding: 0; list-style: none; }
.wl-f .wl-plain li { padding-top: 18px; box-shadow: inset 0 1px 0 rgba(28,34,38,.16); font-size: 18px; line-height: 1.55; color: var(--on-paper-muted); }
.wl-f .wl-plain strong { display: block; margin-bottom: 4px; color: var(--on-paper); font: 800 21px/1.3 var(--font-display); }
.wl-f .wl-plain a { color: var(--on-paper); font-weight: 700; text-underline-offset: 4px; }

@media (max-width: 1140px) {
  .wl-f .wl-hero .wl-media { order: 2; aspect-ratio: 16 / 9; }
  .wl-f .wl-hero .wl-media > img, .wl-f .wl-hero .wl-media > video { object-position: 50% 50%; }
  .wl-f .wl-hero .wl-copy { padding: 24px 16px 36px; }
}
@media (max-width: 760px) {
  .wl-f .wl-sheet.letter { grid-template-columns: 1fr; gap: 20px; padding: 36px 24px 32px; }
  .wl-f .wl-sheet.letter h2 { font-size: 32px; }
  .wl-f .letter .body p { font-size: 18px; }
  .wl-f .letter .body p:first-child { font-size: 21px; }
  .wl-f .letter .body p.sig { font-size: 19px; }
  .wl-pair.d { display: none; }
  .wl-pair.m { display: flex; gap: 12px; justify-content: center; }
  .wl-pair.m > :last-child { margin-top: 40px; }
  .wl .wl-statement { font-size: 28px; }
  .wl-f .wl-plain { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
}