/* Uppa landing: the settled story-card style. Pen-and-wash clouds, day sky, Fredoka (semibold for headers). */
/* one face per weight (all from the same variable file), not one 300-700 range: Chrome only falls through to the
   Greek faces below for weights declared the same way, and otherwise draws Greek in a system font */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Greek letters: Fredoka has none, so they come from M PLUS Rounded 1c, a rounded face that sits well beside it
   (SIL OFL). It runs lighter than Fredoka, so the page's semibold (600) uses its bold (700), and 700 its 800 */
@font-face { font-family: "Fredoka"; src: url("fonts/mplus-rounded-greek-300.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Fredoka"; src: url("fonts/mplus-rounded-greek-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Fredoka"; src: url("fonts/mplus-rounded-greek-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Fredoka"; src: url("fonts/mplus-rounded-greek-700.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Fredoka"; src: url("fonts/mplus-rounded-greek-800.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }

:root {
  --sky-top: #e6eef6;
  --sky-bot: #f9e6e8;
  --ink: #2f2636;
  --line: #7d7396;
  --fill: #fbfaff;
  --pink: #9a6c82; /* the dusk pink the onboarding uses for its key words */
  --glass: rgba(255, 255, 255, .55);
  --glass-edge: rgba(255, 255, 255, .9);
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
/* no box flashing round what's tapped or clicked; the keyboard's outline (:focus-visible) stays */
:focus:not(:focus-visible) { outline: none; }

body {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--sky-bot);
  -webkit-font-smoothing: antialiased;
}
/* the day sky stays put behind everything, under an iPhone's notch and home bar too (index.html: viewport-fit=cover),
   and as tall as the screen with Safari's bars tucked away (lvh), so no white shows at either end */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100lvh;
  z-index: -1;
  background: linear-gradient(var(--sky-top), var(--sky-bot));
}

/* Safari on iPhone (iOS 26) paints the strips behind its status bar and floating toolbar in a colour it takes from a
   solid background pinned at that edge of the screen; the sky is a gradient and the header see-through, so without these
   it falls back to near white. They sit under Safari's bars, behind everything, and only on touch Safari, in the sky's
   own top and bottom colours, so each bar reads as the sky running on. (No background on html: the body's own colour
   would then paint over the fixed sky gradient, which sits below the body's background) */
.edge { display: none; }
@supports (-webkit-touch-callout: none) {
  .edge { display: block; position: fixed; left: 0; right: 0; height: 6px; z-index: -1; pointer-events: none; }
  .edge-top { top: 0; background-color: var(--sky-top); }
  .edge-bottom { bottom: 0; background-color: var(--sky-bot); }
}

a { color: inherit; }

.eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
}
.light { font-weight: 400; }
.bold { font-weight: 600; }
.pink { color: var(--pink); fill: var(--pink); }
.lede { font-size: clamp(17px, 1.6vw, 21px); opacity: .66; }

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  text-decoration: none;
  white-space: nowrap;
}
/* on a small phone the header's button is a little tighter, so a long label (the Greek one) still fits on one line */
@media (max-width: 420px) { .site-header .btn { padding: 12px 16px; } }
.head-end { display: flex; align-items: center; gap: 10px; }
/* the language picker, top right: a small glass pill (globe and language code) that opens a list of languages, each
   named in its own language (js/lang.js closes it) */
.lang { position: relative; }
.lang summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 15px/1 "Fredoka", system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(60, 45, 80, .16);
}
.lang li a { display: block; padding: 9px 14px; border-radius: 10px; font: 400 15px/1.2 "Fredoka", system-ui, sans-serif; color: var(--ink); text-decoration: none; }
.lang li a:hover, .lang li a:focus-visible { background: #f4eff6; outline: none; }
.lang li a[aria-current] { font-weight: 600; color: var(--pink); }

.btn:focus-visible, .logo:focus-visible, summary:focus-visible, .footer a:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }

/* ---------- header: logo top left, the one button top right, visible throughout ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* kept clear of the notch and the rounded corners (a phone turned sideways) */
  padding: max(20px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 20px max(var(--gutter), env(safe-area-inset-left));
}
.logo {
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 36px);
  text-decoration: none;
}
/* a slight gloss on the big wordmarks: a lighter band across the top of the letters with a soft edge, like the shine on
   a button. The middle logo also stands out a little in 3D, on a darker edge just below each letter (see index.html) */
.finale-mark text { fill: url(#gloss-ink); }
.finale-mark .pink { fill: url(#gloss-pink); }
.mark .mark-face { fill: url(#mark-gloss-ink); }
.mark .mark-face .pink { fill: url(#mark-gloss-pink); }
.mark .mark-edge { fill: #241c2a; }
.mark .mark-edge .pink { fill: #7d566a; }

/* gusts of wind: a short streak travelling along each line, faint, behind the logo */
.wind { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wind path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 140 1800;
  stroke-dashoffset: 1940;
  opacity: .55;
  animation: gust var(--wd) linear var(--wl) infinite;
}
@keyframes gust { to { stroke-dashoffset: 0; } }

/* ---------- Acts 1–3: the cloud bank parts, uppa is revealed, the traveller jumps and falls through the worries,
   and the glider tears out of a cloud to catch them ---------- */
/* lite: the opening plays once on load and takes one screen; the fall, the worries and the catch are left out */
.act-open { height: 100vh; height: 100svh; }
/* the rhythm path now starts right under the opening and its top clouds reach up into it, over the opening's own. The
   medicine strip is lifted out of the stage (main.js moves it to the section) and stacked above them both */
.act-open { position: relative; }
.act-open > .med-strip { z-index: 2; }
[data-clouds="far"], [data-clouds="near"], [data-layer="fly"], [data-layer="veil"], .diver { display: none; }
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* a 1440 × 900 design frame, scaled by main.js to cover the viewport */
.frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 900px;
  transform: translate(-50%, -50%) scale(var(--frame-scale, 1));
  pointer-events: none;
}
.frame img, .frame .cloud {
  position: absolute;
  display: block;
  max-width: none;
}
.bank-fill { position: absolute; inset: 0; background: var(--fill); }
/* a layer of clouds that scrolls inside its frame (the frame keeps its own cover transform) */
.layer { position: absolute; inset: 0; will-change: transform; }
.layer .far-cloud { opacity: .7; }

/* a worry on a cloud: faded, softer still on far clouds */
.worry {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  opacity: .5;
}
.worry.far { font-weight: 400; font-size: 27px; opacity: .35; }
/* the words stay in front of the neighbouring clouds, so a long phrase isn't hidden by the next cloud along; the torn
   nausea worry stays under its hole, so the tear cuts through it */
.worry:not(.rip-cloud) { z-index: 1; }

/* the falling traveller, sized from the design frame like the glider, so they're the same size as its pilot */
.diver {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(66px * var(--frame-scale, 1));
  opacity: 0;
  will-change: transform;
}
.diver-body { display: block; width: 100%; height: auto; overflow: visible; }

/* the glider, about 208 px wide in the design frame: three stacked sprites, one shown at a time */
.glider {
  position: absolute;
  left: 0;
  top: 0;
  width: 208px;
  height: 104px;
  opacity: 0;
  will-change: transform;
}
.glider svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-pilot { opacity: 0; }
.frame img.rip-hole { opacity: 0; will-change: auto; }
.line-alone {
  position: absolute;
  left: 250px; /* on two lines, left of the catch cloud, which sits right of centre */
  top: 600px;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.12;
  opacity: 0;
}

.reveal {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(8px, 2vh, 24px);
  padding: 0 16px;
  text-align: center;
}
/* lite: a bigger wordmark than the full site's 680 px (the traveller on it is a little smaller, main.js) */
.mark { width: min(900px, 92vw, 110vh); height: auto; overflow: visible; }
.mark text { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; fill: var(--ink); }
.tagline { font-weight: 600; font-size: clamp(24px, 3vw, 44px); line-height: 1.2; }

/* the medicines, in one row of soft white chips resting on the clouds at the bottom of the first screen. The row
   glides past on a loop: main.js puts a second copy after it, and the track moves left by exactly one copy, so the loop
   has no gap and no jump. It pauses while hovered or focused; with reduced motion it scrolls by hand instead */
.med-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3vh, 32px);
  overflow: hidden;
  text-align: left;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.med-track { display: flex; width: max-content; animation: meds var(--med-dur, 40s) linear infinite; }
.med-strip:hover .med-track, .med-strip:focus-within .med-track { animation-play-state: paused; }
@keyframes meds { to { transform: translateX(-50%); } }
.med-row { display: flex; margin: 0; padding: 6px 0 10px; list-style: none; }
/* the space after each chip is margin, not gap, so the two copies are exactly the same width and the loop meets itself */
.med-row li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-right: 12px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 4px 14px rgba(125, 115, 150, .12);
}
.med-row b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.med-row small { display: block; font-size: 11.5px; line-height: 1.3; opacity: .6; }
/* each medicine's pip: a raised button in its colour, like the rhythm path's, with a white shot or pill on it */
.med-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c);
  color: color-mix(in srgb, var(--c) 60%, #2f2636);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c) 72%, #2f2636), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.med-icon svg { width: 19px; height: 19px; margin-top: -1px; }
@media (prefers-reduced-motion: reduce) {
  .med-track { animation: none; }
  .med-strip { overflow-x: auto; scrollbar-width: none; }
  .med-row[aria-hidden] { display: none; }
}

/* ---------- Act 4: the rhythm path, a strip four screens tall that scrolls with the page. Its 1440 px design box is
   scaled like the frames above (--frame-scale) and centred; path.js sets --strip-h to the strip's height ---------- */
.act-path {
  position: relative;
  height: calc(var(--strip-h, 4600) * var(--frame-scale, 1) * 1px);
  overflow: hidden;
  overflow: clip visible; /* the bands of cloud spill over the top and bottom edges instead of being sliced off */
}
.path-box {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: calc(var(--strip-h, 4600) * 1px);
  transform: translateX(-50%) scale(var(--frame-scale, 1));
  transform-origin: 50% 0;
  pointer-events: none;
}
.path-layer { position: absolute; inset: 0; }
.path-layer img, .path-layer .cloud { position: absolute; display: block; max-width: none; }
.path-art { position: absolute; left: 0; top: 0; overflow: visible; }

/* a pip's description, laid out like a Day Sky section inside its cloud (sizes in design px) */
.section-copy {
  position: absolute;
  width: 600px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  text-align: center;
}
.section-copy .eyebrow { font-size: 18px; line-height: 1.2; letter-spacing: 0; text-transform: none; opacity: .7; }
.section-copy h2 { margin-top: 12px; font-size: 40px; line-height: 46px; font-weight: 600; white-space: nowrap; }
/* other languages run longer, so their headlines may wrap (lite: the English ones too, as they're longer) */
.section-copy h2 { white-space: normal; text-wrap: balance; }
.section-copy .lede { margin-top: 12px; max-width: 440px; font-size: 19px; line-height: 27px; }

/* the medicine names on their small clouds */


/* ---------- phones (and tablets upright): main.js shows the frames' middle 760 px across, so the design px below are
   about half size on screen; the copy is set larger to stay readable ---------- */
@media (max-aspect-ratio: 4/5) {
  .bank-fill { inset: -600px 0; }
  .line-alone { left: 720px; font-size: 52px; } /* main.js sets its top */
  /* lite: a little wider than the full site's 640, so the longer descriptions take fewer lines and stay in their cloud */
  .section-copy { width: 700px; transform: translate(-50%, -50%); }
  .section-copy .eyebrow { font-size: 28px; }
  /* narrower than the column, so a long one-line headline (the Danish fifth) wraps before it reaches the cloud's sides */
  .section-copy h2 { max-width: 620px; font-size: 58px; line-height: 64px; white-space: normal; text-wrap: balance; }
  .section-copy .lede { max-width: 640px; font-size: 30px; line-height: 40px; }
  .finale-sky { transform-origin: 50% 0; }
  /* a soft backdrop behind the header once the FAQ's words pass under it (main.js sets .over-copy) */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -18px;
    z-index: -1;
    background: linear-gradient(rgba(251, 250, 255, .94) 62%, rgba(251, 250, 255, 0));
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
  }
  .site-header.over-copy::before { opacity: 1; }
}

/* ---------- FAQ (S11): the path ends at the last pip and the clouds open around it, as at the reveal ---------- */
.faq {
  position: relative;
  min-height: 1100px;
  overflow: hidden;
  overflow: clip visible; /* the cloud under the FAQ spills over into the closing section instead of being sliced */
  padding: 205px var(--gutter) 260px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.faq > :not(.faq-sky) { position: relative; }
/* a 1440 × 1100 design box behind the FAQ, centred, cropped at the sides on narrow screens */
.faq-sky, .finale-sky {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  margin-left: -720px;
  pointer-events: none;
}
.faq-sky { height: 1100px; }
/* the art sits at the box's origin; each cloud image carries its own left and top */
.faq-sky > *, .finale-sky > * { position: absolute; left: 0; top: 0; max-width: none; }
.faq h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.15; }
.panel {
  width: min(720px, 100%);
  margin-top: 18px;
  text-align: left;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.panel details + details { border-top: 1px solid var(--glass-edge); }
.panel summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  list-style: none;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: "+"; font-weight: 300; font-size: 24px; line-height: 1; }
.panel details[open] summary::after { content: "–"; }
.panel details p { padding: 0 24px 20px; font-size: 15.5px; line-height: 1.5; opacity: .66; }

/* ---------- the bottom of the page (S12): the big wordmark resting in a floor of cloud that holds the footer ---------- */
.finale { position: relative; height: 1200px; overflow: hidden; }
.finale-sky { height: 1200px; }
/* the solid base runs well past the 1440 design box, so wide screens don't show sky at its ends */
.finale-floor { top: 960px !important; left: -1280px !important; width: 4000px; height: 240px; background: var(--fill); }
.thread-glider { margin: -20px 0 0 -35px; transform-origin: 35px 20px; will-change: transform; }
.finale-mark text { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; }
.finale-copy {
  position: relative;
  padding: 150px var(--gutter) 0;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.finale h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.15; }
.terms { font-size: 14px; opacity: .55; max-width: 560px; }
.terms a { color: inherit; }
/* the waitlist (js/waitlist.js): one glass pill holding the email field and the button, the answer underneath */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.waitlist { display: grid; justify-items: center; gap: 10px; width: min(100%, 480px); }
.wl-row {
  display: flex;
  width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(8px);
}
.wl-row:focus-within { outline: 3px solid var(--line); outline-offset: 3px; }
.wl-row input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  outline: none;
}
.wl-row input::placeholder { color: var(--ink); opacity: .4; }
.wl-row .btn { border: 0; cursor: pointer; font-family: inherit; }
/* on a phone the button goes under the field, so long labels (the Greek one) never push past the screen */
@media (max-width: 560px) {
  .wl-row { flex-direction: column; gap: 6px; border-radius: 28px; }
  .wl-row input { padding: 12px 18px; text-align: center; }
  .wl-row .btn { white-space: normal; }
}
.btn:disabled { opacity: .6; cursor: default; }
.wl-hp { position: absolute; left: -9999px; }
.wl-status { min-height: 1.4em; font-size: 15px; }
.waitlist[data-state="invalid"] .wl-status, .waitlist[data-state="error"] .wl-status { color: var(--pink); }
.wl-leave { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ink); background: none; color: var(--ink); font: inherit; cursor: pointer; }
/* the sign-up pop-up: a white card over the dimmed page, the email, the waitlist (always) and two unticked extras */
.wl-dialog {
  margin: auto; /* centred: the reset at the top takes the browser's own margin away */
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--fill);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(47, 38, 54, .25);
}
.wl-dialog::backdrop { background: rgba(47, 38, 54, .35); backdrop-filter: blur(4px); }
.wl-pop { position: relative; width: 100%; gap: 14px; padding: 36px 28px 24px; text-align: center; }
.wl-pop h2 { font-size: 28px; line-height: 1.2; font-weight: 600; }
.wl-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: 400 26px/1 "Fredoka", system-ui, sans-serif;
  cursor: pointer;
}
.wl-close:hover { background: rgba(47, 38, 54, .06); }
.wl-input {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(47, 38, 54, .18);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  text-align: center;
}
.wl-input::placeholder { color: var(--ink); opacity: .4; }
.wl-close:focus-visible, .wl-input:focus-visible, .wl-choices input:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }
.wl-choices { display: grid; gap: 12px; width: 100%; padding: 4px 4px 2px; list-style: none; text-align: left; }
.wl-choices label, .wl-fixed { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; }
.wl-choices label { cursor: pointer; }
.wl-choices input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pink); cursor: pointer; }
/* the waitlist itself is always included: a ticked mark, not a box to untick */
.wl-tick { position: relative; flex: none; width: 20px; height: 20px; border-radius: 4px; background: var(--pink); }
.wl-tick::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.wl-choices small { display: block; margin: 3px 0 0 32px; font-size: 14px; opacity: .6; }
/* the optional GLP-1 question: the answers as pills, the consent box under them once one is picked (js/waitlist.js) */
.wl-glp1 { width: 100%; min-width: 0; padding: 12px 4px 0; border: 0; border-top: 1px solid rgba(47, 38, 54, .1); text-align: left; }
.wl-glp1 legend { float: left; width: 100%; margin-bottom: 10px; font-size: 16px; }
.wl-opts { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.wl-opts label { position: relative; cursor: pointer; }
.wl-opts input { position: absolute; opacity: 0; }
.wl-opts span { display: block; padding: 7px 14px; border: 1px solid rgba(47, 38, 54, .2); border-radius: 999px; font-size: 14px; }
.wl-opts input:checked + span { border-color: var(--pink); background: var(--pink); color: #fff; }
.wl-opts input:focus-visible + span { outline: 3px solid var(--line); outline-offset: 2px; }
.wl-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.wl-consent[hidden] { display: none; }
.wl-consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pink); cursor: pointer; }
.wl-consent a { color: inherit; }
.wl-consent input:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }
.wl-pop .btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; white-space: normal; }
.wl-pop .wl-status:empty { display: none; }
.wl-pop .terms { font-size: 13px; }
.footer {
  position: absolute;
  left: 0;
  right: 0;
  top: 1105px;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-weight: 500; }
.footer nav a { text-decoration: none; opacity: .75; }
.footer p { font-size: 12.5px; opacity: .55; max-width: 900px; }

/* ---------- still version: reduced motion, or the motion library didn't load ---------- */
/* the wind: clouds in the still scenes sway a few px, each on its own slow period. The clouds that move with the scroll
   don't, which keeps the number of moving layers small */
/* the clouds breathe: they drift a little in the wind and swell and settle, a touch wider than tall. The torn nausea
   cloud and its hole stay still so the hole keeps its place */
@keyframes wind { from { translate: 0 0; scale: 1; } to { translate: var(--wx) var(--wy); scale: 1.055 1.04; } }
:is([data-clouds="parted"], [data-clouds="parted-front"], [data-clouds="bank"], [data-clouds="far"], [data-clouds="near"],
  [data-layer="veil"], [data-strip="bands"], [data-strip="words"], .faq-sky, .finale-sky) > :is(img, .cloud):not(.rip-cloud):not(.rip-hole) {
  animation: wind var(--wd) ease-in-out var(--wdl) infinite alternate;
}
/* not on a phone: every swaying cloud is a layer of its own, and a phone's memory is short (js/clouds.js) */
@media (max-aspect-ratio: 4/5) { .cloud { animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  img, .cloud, .wind path { animation: none !important; }
  .wind { display: none; }
  .act-open { height: 100vh; }
  .bank-fill, [data-clouds="bank"], [data-clouds="far"], [data-clouds="near"], [data-layer="fly"], [data-layer="veil"], .diver { display: none; }
}
.seen .bank-fill, .seen [data-clouds="bank"] { display: none; }
.still .act-open { height: 100vh; }
.still .bank-fill, .still [data-clouds="bank"], .still [data-clouds="far"], .still [data-clouds="near"],
.still [data-layer="fly"], .still [data-layer="veil"], .still .diver { display: none; }