/* Loaded after vendor/hs.css and vendor/waitlist.css, the website build kit's stylesheets (Oct 28, 2026), unchanged but for texture paths.
   This file holds only what the live site needs on top: self-hosted fonts, the real app screens in the
   CSS phone frame, the form's working parts, and the small pages (confirm, 404, waitlist privacy). */

@font-face { font-family: "Gabarito"; src: url("/assets/fonts/Gabarito-VF.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/AtkinsonHyperlegibleNext-VF.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

html { background: var(--door-deep); }
body { margin: 0; }
/* Several kit classes set display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

/* The boards draw the app screens as live markup; the site shows the exported screens inside the same frame. */
/* The boards set margin 0 inline on every phone, which also cancels the pair's offset; the boards show the pair level. */
.web-phone, .wl-pair > .web-phone, .wl-pair.m > .web-phone { margin: 0; }
.web-phone > .scr > img { display: block; width: 100%; height: 100%; }
.web-phone > .p320 { width: 320px; height: 693px; }
.web-phone > .p280 { width: 280px; height: 606px; }
.web-phone > .p150 { width: 150px; height: 325px; }

/* The board sets these inline; the CSP allows no inline styles. */
.wl-faq summary svg { display: block; flex: none; }

/* The form's parts the boards don't draw */
.wl-hp { position: absolute; left: -10000px; top: auto; width: 0; height: 0; overflow: hidden; }
.wl-turnstile:empty { display: none; }
.wl-turnstile { margin-top: 16px; }
.wl-submit[aria-busy="true"] { cursor: progress; }
.wl-err a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.wl-thanks h2:focus { outline: none; }

/* Desktop hero (decision 27). The kit fixes the hero's height and sizes the video to it, so a two-line error
   cut off the role chips and, below about 1620 px, the first step sat under the form. Here the hero grows with
   the form while the video keeps its size, and the video is capped so its staircase, which starts 39.4% in
   from the video's left edge, begins at least 40 px right of the column. The video sits 2% past the right
   edge, which only crops the empty glow beside Dawn. */
@media (min-width: 1141px) {
  .wl-hero {
    --hero-h: clamp(700px, 54vw, 790px);
    --col-left: max(32px, 50% - 568px);
    --col-w: 456px;
    height: auto; min-height: var(--hero-h);
  }
  .wl-hero .wl-copy { width: calc(var(--col-left) + var(--col-w)); padding-bottom: 64px; }
  .wl-hero .wl-media {
    top: 0; bottom: auto; height: auto; transform: translateX(2%);
    width: min(calc(var(--hero-h) * 16 / 9), calc((100% - var(--col-left) - var(--col-w) - 40px) / 0.586));
    /* The left fade is the kit's; the bottom fade lets the floor run into the hero's own dark floor when the hero is taller than the video. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%), linear-gradient(180deg, #000 88%, transparent); /* taste-skill-ignore: video edge masks (HX1) */
    mask-image: linear-gradient(90deg, transparent, #000 9%), linear-gradient(180deg, #000 88%, transparent); /* taste-skill-ignore: video edge masks (HX1) */
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}

/* Small pages: confirm and 404 */
.wl-page { min-height: 100dvh; display: flex; flex-direction: column; }
.wl-page > main { flex: 1 0 auto; }
.wl-page .wl-head { position: relative; }
.wl-solo { padding: 48px 0 var(--sec); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 640px; }
.wl-solo .web-lead { color: var(--on-door-muted); }
.wl-solo h1:focus { outline: none; }
.wl-solo .web-h1 { font-size: clamp(40px, 6vw, 64px); }

/* Waitlist privacy: the kit's long reading page, text on the calm surface with the contents beside it */
.wl-intro { padding: 32px 0 var(--sec-intro); }
.wl-intro .web-wrap { display: flex; flex-direction: column; gap: 16px; }
.wl-intro .web-h1 { font-size: clamp(40px, 6vw, 64px); }
.web-band.paper .web-doc { align-items: flex-start; }
.web-doc a { color: var(--on-paper); text-underline-offset: 3px; }
.web-doc aside a { text-decoration: none; }
.web-doc aside a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .wl-solo { padding-top: 24px; }
  .web-doc aside { position: static; flex-basis: auto; }
}