/* The waitlist pages (production plan 3.10): the layout only. Every part is a library component or pattern (the
   public header, card, field, segmented choice and its tiles, button, badge, stat, chip, clip card, player, light
   trail, bottom bar); the rules here place them. Phone (6.0): the picture is a band at the top, cards in one column;
   each page's one full-width action (Join, Copy link) is fixed at the bottom. */

.wl { padding-bottom: var(--s-9); }

/* The hero's picture melts into the page to its left and below; the light trail crosses it. In a card (the joined
   page) the picture melts into the card's white to its left only. */
.wl-hero, .wl-me-hero { position: relative; isolation: isolate; }
.wl-pic { position: absolute; z-index: -2; top: 0; bottom: 0; right: calc(-1 * var(--gutter)); width: 66%;
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.25) 22%, rgb(0 0 0 / 0.7) 42%, #000 62%), linear-gradient(to bottom, #000 58%, transparent 98%);
  mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.25) 22%, rgb(0 0 0 / 0.7) 42%, #000 62%), linear-gradient(to bottom, #000 58%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.wl-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 92% 52%; }
.wl-trail { position: absolute; z-index: -1; isolation: isolate; top: 0; bottom: 92px; left: 24%; right: calc(-1 * var(--gutter)); pointer-events: none; }
.wl-pic.in-card { right: 0; left: 36%; width: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.2) 18%, rgb(0 0 0 / 0.6) 38%, #000 62%); mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.2) 18%, rgb(0 0 0 / 0.6) 38%, #000 62%); }
.wl-pic.in-card img { object-position: 92% 74%; }
.wl-trail.in-card { inset: 0; }

.wl-txt { position: relative; display: grid; gap: 18px; justify-items: start; max-width: 600px; }
.wl-me .wl-title { font-size: var(--t-56); line-height: 1.02; }

/* ---------- The home page (after waitlist-gpt-1.png) ---------- */
/* The concept's 1024 px layout, centred. Every length here is the concept's at 1024 px times --wl-k, a constant 1 that
   the light trail's files also read. The picture and the light trail run to the window's edges. */
body { --wl-k: 1; --wl-hdr: 100px; --wl-bleed: calc(var(--gutter) + max(0px, (100vw - var(--content)) / 2)); }

/* A centred hero, anchored from the top: the pill at the concept's place (30 under the header), the headline (the sans
   display) 17 under it, and the card's top 112 below the headline's last baseline (the concept's gap). The concept's
   headline has four lines and ours three, so the pill, the headline, the picture and the light trail all sit one line
   (--wl-lift) higher than the concept's, and the page is that much shorter.
   The picture is anchored to the 1024 px column the page is centred on (--wl-pic-left: its left edge at 329 of the
   column), at the concept's size and place against the headline (its big robot 178 tall, feet 88 below the headline's
   last baseline); it runs on to the window's right edge with its last column stretched (.wl-pic-ext); the mask melts
   its top, its left side and its foot into the page, so the header sits on the plain page. Below 1024 x k it keeps its
   right edge on the window's. The light trail's hero ribbon sweeps from the left edge under the headline and dips in
   front of the robots' feet. */
.wl-hero { display: grid; justify-items: center; align-content: start; padding: calc(30px * var(--wl-k)) 0 calc(101.3px * var(--wl-k)); text-align: center;
  --wl-lift: calc(54.6px * var(--wl-k)); --wl-pic-left: min(calc(50% - 183px * var(--wl-k)), calc(100% + var(--wl-bleed) - 695px * var(--wl-k))); }
.wl-hero > .wl-pic { top: calc(7px * var(--wl-k) - var(--wl-lift)); bottom: auto; left: var(--wl-pic-left); right: calc(-1 * var(--wl-bleed)); width: auto; height: calc(473px * var(--wl-k));
  --wl-mx: linear-gradient(to right, transparent calc(240px * var(--wl-k)), rgb(0 0 0 / 0.45) calc(360px * var(--wl-k)), rgb(0 0 0 / 0.9) calc(440px * var(--wl-k)), #000 calc(500px * var(--wl-k)));
  --wl-my: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.2) calc(45px * var(--wl-k)), rgb(0 0 0 / 0.6) calc(100px * var(--wl-k)), #000 calc(165px * var(--wl-k)), #000 calc(395px * var(--wl-k)), transparent calc(425px * var(--wl-k)));
  -webkit-mask-image: var(--wl-mx), var(--wl-my); mask-image: var(--wl-mx), var(--wl-my); }
.wl-hero > .wl-pic img { object-position: 0 0; }
.wl-pic-ext { display: none; }
@media (min-width: 900px) {
  /* the picture's right edge melts into a soft stretch of its wall and floor (a column 25% across the picture), which
     runs on to the window's edge behind it */
  .wl-hero > .wl-pic > img:not(.wl-pic-ext) { width: calc(695px * var(--wl-k)); right: auto;
    -webkit-mask-image: linear-gradient(to right, #000 calc(560px * var(--wl-k)), transparent calc(695px * var(--wl-k))); mask-image: linear-gradient(to right, #000 calc(560px * var(--wl-k)), transparent calc(695px * var(--wl-k))); }
  .wl-hero > .wl-pic .wl-pic-ext { display: block; left: calc(540px * var(--wl-k)); width: calc(100% - 540px * var(--wl-k)); z-index: -1; object-fit: fill; object-view-box: inset(0 74.2% 0 25%); filter: blur(calc(20px * var(--wl-k)));
    -webkit-mask-image: linear-gradient(to right, #000 calc(150px * var(--wl-k)), transparent calc(360px * var(--wl-k))); mask-image: linear-gradient(to right, #000 calc(150px * var(--wl-k)), transparent calc(360px * var(--wl-k))); }
  .wl-hero > .wl-trail { translate: 0 calc(-1 * var(--wl-lift)); }
}
/* The trail's box: its room (height less --lt-floor and --lt-head) is 276 / 1000 of the concept's width, so the
   ribbon keeps the concept's height at either scale while it spans the window; the floor lets its glow fade out inside
   the box, and the head is room above the ribbon for its left end, which rises as it eases out on a wide window */
.wl-hero > .wl-trail { top: calc(143px * var(--wl-k)); bottom: auto; height: calc(406px * var(--wl-k)); left: calc(-1 * var(--wl-bleed)); right: calc(-1 * var(--wl-bleed)); --lt-floor: calc(40px * var(--wl-k)); --lt-head: calc(90px * var(--wl-k)); }
.wl-hero .wl-txt { justify-items: center; gap: calc(17px * var(--wl-k)); max-width: none; }
.wl-t1, .wl-t2 { display: block; }
.wl-t1 { margin: 0 auto; }
.wl-t2 { color: var(--violet); }
.wl-title { font-size: clamp(28px, 8.6vw, 34px); }
@media (min-width: 900px) { .wl-title { font-size: calc(56px * var(--wl-k)); } .wl-hero .wl-title { margin-top: calc(4px * var(--wl-k)); } }

/* The join card, centred */
.wl-form { position: relative; z-index: 2; max-width: calc(622px * var(--wl-k)); margin: 0 auto; padding: calc(30px * var(--wl-k)) calc(48px * var(--wl-k)); }
.wl-form .wl-fill { display: grid; gap: calc(20px * var(--wl-k)); }
.wl-stack { display: grid; }
.wl-stack > * { grid-area: 1 / 1; min-width: 0; }
.wl-done { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 12px; text-align: center; visibility: hidden; opacity: 0; }
.wl-stack.is-done > .wl-fill { visibility: hidden; opacity: 0; }
.wl-stack.is-done > .wl-done { visibility: visible; opacity: 1; }
.wl-mark { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); }
.wl-mark .i { width: 26px; height: 26px; }
.wl-done-t { font-family: var(--font-heading); font-weight: 650; font-size: var(--t-20); line-height: 1.3; letter-spacing: -0.01em; max-width: 34ch; }
.wl-head { display: grid; gap: calc(6px * var(--wl-k)); margin-bottom: calc(6px * var(--wl-k)); text-align: center; }
.wl-head .t-title { font-size: calc(22px * var(--wl-k)); font-weight: 600; }
.wl-head p { font-size: calc(15px * var(--wl-k)); color: var(--muted); }
.wl-join { margin-top: calc(6px * var(--wl-k)); }
.wl-rate { justify-self: center; }
/* The count line: its figure in the deep violet */
.wl-count { justify-self: center; margin-top: calc(5px * var(--wl-k)); font-size: calc(13px * var(--wl-k)); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.wl-count b { font-size: calc(16px * var(--wl-k)); font-weight: 600; color: var(--violet-ink); }

/* The films row: three film cards, a row scrolling sideways on a phone */
.wl-films { display: grid; gap: calc(23px * var(--wl-k)); margin-top: calc(40px * var(--wl-k)); }
.wl-films-head { display: grid; gap: calc(8px * var(--wl-k)); text-align: center; }
.wl-films-head .t-title { font-size: calc(20px * var(--wl-k)); font-weight: 550; }
.wl-films-head p { font-size: calc(15px * var(--wl-k)); color: var(--ink-2); }
.wl-films-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16px * var(--wl-k)); width: 100%; max-width: calc(944px * var(--wl-k)); padding: 2px; margin: -2px auto; }

/* The one-line foot, then the legal row close under it */
.wl-tagline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 calc(9px * var(--wl-k)); margin-top: calc(18px * var(--wl-k)); font-size: calc(15px * var(--wl-k)); color: var(--ink); text-align: center; }
.wl-tagline > .i { width: calc(23px * var(--wl-k)); height: calc(23px * var(--wl-k)); color: var(--violet); }
.wl-tagline a { display: inline-flex; align-items: center; gap: calc(8px * var(--wl-k)); min-height: 44px; font-weight: 500; color: var(--violet-ink); text-decoration: none; }
.wl-tagline a .i { width: calc(19px * var(--wl-k)); height: calc(19px * var(--wl-k)); }
@media (hover: hover) { .wl-tagline a:hover { text-decoration: underline; } }
.wl-home { padding-bottom: 0; }

/* The fixed action belongs to the phone */
.wl-bar { display: none; }

/* ---------- The joined page ---------- */
.wl-me { display: grid; gap: var(--gap); padding-top: var(--gutter); }
.wl-me-hero { display: grid; align-content: center; min-height: 360px; overflow: hidden; padding: 44px 48px; }
.wl-me-hero .wl-txt { gap: 26px; }
.wl-place .l { font-size: var(--t-15); }
.wl-place .v { font-size: var(--t-72); letter-spacing: -0.025em; }
.wl-invited { display: flex; align-items: center; gap: 14px; font-size: var(--t-17); font-weight: 600; color: var(--ink); }
.wl-invited .wl-mark { width: 44px; height: 44px; background: var(--mint-soft); color: var(--mint-ink); }
.wl-invited .wl-mark .i { width: 22px; height: 22px; }

.wl-share { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.7fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: 28px 28px 28px 32px; }
.wl-share-a { display: grid; gap: 16px; }
.wl-share-t { font-size: var(--t-17); color: var(--ink-2); max-width: 52ch; }
.wl-link { display: flex; gap: 10px; min-width: 0; }
.wl-link-in { position: relative; flex: 1; min-width: 0; }
.wl-link-in .i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.wl-link-in input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 0; border-radius: var(--r-ctl); background: var(--wash); box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: var(--t-15); color: var(--ink); text-overflow: ellipsis; }
.wl-link-in input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--violet), 0 0 0 4px var(--violet-soft); }
.wl-copy { flex: none; min-height: 48px; min-width: 132px; }
.wl-friends { display: grid; gap: 10px; justify-items: start; }
.wl-friends .stat .v { font-size: var(--t-44); }
.wl-batches { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-card); background: var(--wash); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-2); }
.wl-leave-a { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: var(--t-13); color: var(--muted); }
@media (hover: hover) { .wl-leave-a:hover { color: var(--ink); } }

/* ---------- Leaving ---------- */
.wl-leave { padding-top: var(--s-10); }
.wl-leave-card { max-width: 520px; margin: 0 auto; padding: 40px 32px 32px; }
.wl-leave-card .wl-fill { display: grid; justify-items: center; gap: 24px; text-align: center; }
.wl-ask { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: var(--t-34); line-height: 1.1; letter-spacing: -0.02em; }
.wl-leave-go { min-height: 48px; padding: 0 24px; }

/* ---------- 600–1099 px ---------- */
@media (max-width: 1099px) {
  .wl-share { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wl-share-a { grid-column: 1 / -1; }
}

/* ---------- Under 900 px: the picture sits behind and above the headline's top right ---------- */
@media (max-width: 899px) {
  .wl-hero { min-height: 0; padding: 150px 0 40px; }
  .wl-hero > .wl-pic { top: calc(-1 * var(--wl-hdr) + 40px); left: auto; width: 82%; height: 360px;
    --wl-mx: linear-gradient(to right, transparent 4%, rgb(0 0 0 / 0.5) 34%, #000 62%); --wl-my: linear-gradient(to bottom, transparent, #000 28%, #000 62%, transparent 100%); }
  .wl-hero > .wl-pic img { object-position: 100% 30%; }
  .wl-hero > .wl-trail { top: 200px; height: 300px; --lt-floor: 40px; --lt-head: 0px; }
  .wl-form { padding: 36px 40px; }
}

/* ---------- Under 600 px (6.0) ---------- */
@media (max-width: 599px) {
  body { --wl-hdr: 60px; }
  /* The picture is a band under the header, its top melting into the page, its robots at the right above the pill;
     the trail runs in the clear band between them (40 px), dipping at the robots' feet */
  .wl-hero { padding: 244px 0 24px; }
  .wl-hero > .wl-pic { top: -10px; width: 320px; height: 262px;
    --wl-mx: linear-gradient(to right, transparent, rgb(0 0 0 / 0.5) 30%, #000 58%); --wl-my: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.5) 40px, #000 80px, #000 222px, transparent 262px); }
  .wl-hero > .wl-pic img { object-position: 100% 0; }
  .wl-hero > .wl-trail { top: 115px; height: 160px; }
  /* the ribbon passes in front of both robots' feet */
  .wl-hero ts-light-trail { --lt-band: 160px; --lt-floor: 10px; --lt-hx: 0.85; --lt-hy: 1.1; --lt-hdx: -10px; }
  .wl-hero .wl-txt { gap: 16px; }
  .wl-form { padding: 24px 20px 20px; }
  .wl-form .wl-fill { gap: 16px; }
  .wl-head { gap: 4px; margin-bottom: 4px; }
  .wl-head .t-title { font-size: var(--t-17); }
  .wl-head p { font-size: var(--t-15); }
  /* Join is the fixed bar's */
  .wl-join { display: none; }
  .wl-count { margin-top: 0; }
  .wl-films-head .t-title { font-size: var(--t-20); }
  .wl-films-head p { font-size: var(--t-15); }
  .wl-films { gap: 20px; margin-top: var(--s-9); }
  .wl-films-head { padding: 0 8px; }
  .wl-films-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; width: auto; max-width: none; margin: -2px calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; scroll-padding: 0 var(--gutter); }
  .wl-tagline { gap: 0 9px; margin-top: 33px; }
  .wl-tagline > .i { width: 18px; height: 18px; }
  .wl-tagline a .i { width: 16px; height: 16px; }
  /* The bar's slot follows the footer and is as tall as the fixed bar, so the footer clears it */
  .wl-bar { display: block; height: 96px; }
  .wl-bar ts-bottom-bar { transition: translate var(--d-slow) var(--ease-out), opacity var(--d-move) var(--ease-out); }
  .wl-bar.off ts-bottom-bar { translate: 0 110%; opacity: 0; visibility: hidden; transition: translate var(--d-slow) var(--ease-in), opacity var(--d-move) var(--ease-out), visibility 0s var(--d-slow); }

  .wl-me { padding-top: 12px; }
  .wl-me-hero { grid-template-rows: 150px auto; align-content: start; min-height: 0; padding: 0; }
  .wl-me-hero > .wl-pic { position: relative; inset: auto; grid-row: 1; width: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgb(0 0 0 / 0.6) 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 30%, rgb(0 0 0 / 0.6) 62%, transparent 96%); }
  .wl-me-hero > .wl-trail { --lt-band: 150px; --lt-floor: 40px; }
  .wl-me-hero .wl-txt { grid-row: 2; margin-top: -30px; padding: 0 18px 20px; gap: 14px; }
  .wl-place .v { font-size: var(--t-56); }
  .wl-share { grid-template-columns: minmax(0, 1fr) auto; gap: 18px 16px; padding: 18px; }
  .wl-share-t { font-size: var(--t-15); }
  .wl-copy { display: none; }
  .wl-friends .stat .v { font-size: var(--t-34); }
  .wl-batches { grid-column: 1 / -1; padding: 16px; }
  .wl-batches .wl-mark { width: 44px; height: 44px; }
  .wl-batches .wl-mark .i { width: 22px; height: 22px; }

  .wl-leave { padding-top: var(--s-7); }
  .wl-leave-card { padding: 28px 18px 20px; }
  .wl-ask { font-size: var(--t-28); }
  .wl-leave-go { width: 100%; }
}