/* Soothify Africa — landing page
   Built from Figma "Web/ Landing page | English" (node 193:9930, 1440x3858)
   and "mobile/ landing page | English" (node 193:10160, 390x3679). */

/* ---------- design tokens ---------- */
:root {
  --c-ink: #160F0A;
  /* body copy */
  --c-ink-900: #000000;
  /* "Life moves fast" heading */
  --c-white: #FEFEFE;
  /* page bg + light text */
  --c-pure: #FFFFFF;
  --c-primary: #2F6FED;
  /* filled CTA */
  --c-accent: #EB5017;
  /* brand accent (unused since the Login link was removed) */
  --c-btn-label: #263238;
  /* label on white nav button */
  --c-surface: #F8F8F8;
  /* open FAQ row */
  --c-surface-alt: #F9F9F9;
  /* language menu row */
  --c-ring: #F09D39;
  /* logo mark ring */
  --c-lang-idle: #1B1F26;
  --c-hairline: rgba(0, 0, 0, .10);
  /* closed FAQ rows, language menu edge */
  --c-card-blue: #619BCA;
  /* centre collage card ground */

  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --page: 1440px;
  --gutter: 48px;
  --content: 1344px;
  --radius: 8px;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 16px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--light {
  background: var(--c-white);
  color: var(--c-btn-label);
}

.btn--light:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}


/* the large filled CTA — Figma: 20px/16px padding, 18px label */
.btn--primary {
  background: var(--c-primary);
  color: var(--c-pure);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 12px;
  padding: 20px 16px;
}

.btn--primary:hover {
  background: #255FD6;
  box-shadow: 0 10px 24px rgba(47, 111, 237, .32);
}

/* A quick pop every 1.5s -- a swell to 1.14, a dip and a settle, with a ring
   spreading out of the edge -- strong enough to read over the hero label's
   own continuous pulse. Hovering drops it so the button's own hover lift takes over;
   reduced-motion users never see it (see the prefers-reduced-motion block at
   the end of this file). */
.btn--pop {
  position: relative;
  animation: btn-pop 1.5s ease-out infinite;
}

.btn--pop::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: btn-pop-ring 1.5s ease-out infinite;
  pointer-events: none;
}

.btn--pop:hover,
.btn--pop:focus-visible {
  animation: none;
}

.btn--pop:hover::after,
.btn--pop:focus-visible::after {
  animation: none;
}

@keyframes btn-pop {

  0%,
  72%,
  100% {
    transform: scale(1);
  }

  16% {
    transform: scale(1.14);
  }

  36% {
    transform: scale(.95);
  }

  54% {
    transform: scale(1.05);
  }
}

@keyframes btn-pop-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 111, 237, .75);
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(47, 111, 237, 0);
  }
}

/* The hero's call to action keeps its label gently breathing -- a continuous
   scale up and back -- so the eye is drawn to it without the button itself
   moving and shifting the layout. Reduced-motion users never see it (see the
   prefers-reduced-motion block at the end of this file). */
.btn__label {
  display: inline-block;
  will-change: transform;
}

.btn--pulse .btn__label {
  animation: btn-label-pulse 1.8s ease-in-out infinite;
}

@keyframes btn-label-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}


/* ---------- display headings ---------- */
/* Figma stores these in sentence case and applies Title Case as a text-case
   style, in both the English and Pidgin frames. Doing the same here keeps the
   translation strings as plain sentences. */
/* The footer headline used to be Title Case; the updated design sets it in
   sentence case, so it is no longer in this list. */
.hero__title,
.section__title,
.cta__title,
.plate h3 {
  text-transform: capitalize;
}

/* ---------- brand smile ---------- */
/* The logo draws a small smile under the "oo" of Soothify, and the design
   repeats it wherever the name is written in text (the brandmark template
   filter wraps the "oo"). Measured from the Figma text: ~0.6em wide, its ends
   ~0.2em below the baseline, a stroke of ~0.07em. Drawn as an SVG mask over
   currentColor so it matches the text it sits in, light or dark. */
.brand-oo {
  position: relative;
}

.brand-oo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.16em;
  /* Nunito Sans baseline is 1.011em down */
  width: .64em;
  height: .22em;
  transform: translateX(-50%);
  /* the logo's arc: a round-capped curve, filled with the text colour */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M2.2 2.2Q13 9.6 23.8 2.2' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M2.2 2.2Q13 9.6 23.8 2.2' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 853px;
  display: flex;
  flex-direction: column;
  color: var(--c-white);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the clip is portrait 1080x1920 in a landscape band, so cover crops hard
     top and bottom - bias the visible slice upward toward the subject */
  object-position: 50% 70%;
  background: #2b2b2b;
  /* shows for the instant before the poster paints */
}

.hero::before {
  /* keeps nav + headline legible over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .10) 100%);
}

.nav {
  padding-top: 24px;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 23px;
}

.brand__mark {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 1px solid var(--c-ring);
  object-fit: cover;
  flex: none;
}

.brand__word {
  width: 117px;
  height: 47px;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__burger {
  display: none;
  width: 36px;
  height: 36px;
  padding: 4px;
  color: var(--c-white);
  flex: none;
}

.nav__burger svg {
  width: 100%;
  height: 100%;
}

.nav__burger-close {
  display: none;
}

.nav[data-open="true"] .nav__burger-open {
  display: none;
}

.nav[data-open="true"] .nav__burger-close {
  display: block;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* language switcher */
.lang {
  position: relative;
}

.lang__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--c-white);
}

.lang__chev {
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform .2s ease;
}

.lang[data-open="true"] .lang__chev {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 17px);
  right: 0;
  width: 239px;
  padding: 25px 16px;
  background: var(--c-pure);
  border-radius: var(--radius);
  border: 1px solid var(--c-hairline);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, .10);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 20;
}

/* author `display` outranks the UA rule for [hidden], so restate it */
.lang__menu[hidden] {
  display: none;
}

/* each option is its own form (it posts that language's address), so the form
   itself must not take part in the menu's layout */
.lang__menu form {
  display: contents;
}

.lang__opt {
  width: 100%;
  height: 48px;
  border-radius: 4px;
  background: var(--c-surface-alt);
  color: var(--c-lang-idle);
  opacity: .72;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang__opt[aria-current="true"] {
  color: var(--c-primary);
  opacity: 1;
  border-color: var(--c-primary);
}

.lang__opt:hover {
  background: #EFEFEF;
}

/* headline + intro card */
.hero__body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-top: 151px;
}

.hero__title {
  font-weight: 600;
  font-size: 56px;
  line-height: 67px;
  color: var(--c-white);
  max-width: 546px;
  text-wrap: balance;
}

.hero__aside {
  width: 320px;
  margin-left: auto;
  margin-top: 247px;
  flex: none;
}

.hero__aside p {
  font-size: 16px;
  line-height: 23px;
  margin-bottom: 32px;
}

/* ---------- section shell ---------- */
.section {
  padding-block: 48px 0;
}

/* .why owns the gap below */
.section__head {
  text-align: center;
  max-width: 500px;
  margin-inline: auto;
}

/* "Life moves fast": 600px of text lets the lede break after "...at home."
   (589px at 20px), so it sets on two lines instead of three */
.section__head--wide {
  max-width: calc(600px + 2 * var(--gutter));
}

.section__title {
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  color: var(--c-ink);
}

.section__lede {
  font-size: 20px;
  line-height: 24px;
  margin-top: 24px;
  /* font-weight: 400px; */
  opacity: .72;
  /* color */
}

/* ---------- the card fan ---------- */
/* Cards sit on a circle of radius --R whose centre is --R below the top of the
   band, so only the shallow top arc is on screen. A card's angle sets BOTH its
   position on the circle and its tilt (rotate then translate along the rotated
   axis), which is where the design's fanned ±12° look comes from for free. */
.wheel {
  --R: 1920px;
  /* big radius = shallow, elegant arc across the band */
  /* Neighbouring cards sit R*sin(12deg) apart, so the radius and the card size
     have to move together or they collide. --card-scale keeps that in step. */
  --card-scale: 1.3;
  --hub-y: 240px;
  /* how far down the band the centre card's middle sits */
  --fade-from: 76%;
  /* where the bottom fade-out starts */
  position: relative;
  /* just clears the lowest visible card: taller left dead space under the fan */
  height: 555px;
  margin-top: 40px;
  overflow: hidden;
  /* clips everything but the top of the circle */
  cursor: default;
  /* Cards low on the arc would otherwise meet the band edge as a hard horizontal
     slice. Fading the last fifth lets them dissolve into the page instead. */
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-from), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 var(--fade-from), rgba(0, 0, 0, 0) 100%);
}

/* The band no longer pauses under the pointer, so it carries the ordinary
   arrow rather than the old pause badge. It can be dragged by hand (see the
   script in landing.html): a drag in progress shows the closed hand, and
   touch-action leaves vertical swipes to the page so phones still scroll. */
.wheel {
  cursor: default;
  touch-action: pan-y;
}

.wheel.is-dragging,
.wheel.is-dragging .wheel__card {
  cursor: grabbing;
}

.wheel__hub {
  position: absolute;
  left: 50%;
  top: calc(var(--R) + var(--hub-y));
  /* circle centre, far below the visible band */
  width: 0;
  height: 0;
}

/* Entrance: every card starts collapsed to a point at the top of the circle
   (angle 0, tiny) and fans out to its own slot as the band scrolls into view.
   Cards nearer the top go first (--spread-delay grows with |angle|), so the fan
   opens outward from the centre.

   The trailing rotate() is applied AFTER the card has been pushed out to the
   rim, so it turns the card about its own centre rather than moving it round
   the arc: each one spins out of the point and unwinds to rest. --turn is set
   per card and mirrors either side of centre, so the two halves counter-turn.
   Once open, the cards stay put -- nothing rotates after the entrance. */
.js .wheel[data-reveal="spread"]:not(.is-visible) .wheel__card {
  opacity: 0;
}

.js .wheel[data-reveal="spread"].is-visible .wheel__card {
  animation: wheel-spread 1.5s cubic-bezier(.2, .8, .2, 1) var(--spread-delay, 0ms) both;
}

/* Carousel: once every card has finished its entrance, the page script adds
   .is-settled and starts stepping each card's --a by one slot. Dropping the
   entrance animation hands transform back to normal styles, so the change to
   --a eases the card round the arc. Its final keyframe equals the resting
   transform, so nothing jumps at the handover. */
.js .wheel[data-reveal="spread"].is-visible.is-settled .wheel__card {
  animation: none;
  transition: transform 1.2s cubic-bezier(.65, 0, .35, 1);
}

/* the card moving from the far left end to the spare right-hand slot is out
   of sight at both, so it jumps instead of sweeping across behind the others */
.js .wheel[data-reveal="spread"].is-visible.is-settled .wheel__card.is-wrapping {
  transition: none;
}

@keyframes wheel-spread {
  from {
    opacity: 0;
    transform: rotate(0deg) translateY(calc(-1 * var(--R))) scale(.08) rotate(var(--turn, 0deg));
  }

  25% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--R))) scale(var(--card-scale)) rotate(0deg);
  }
}

.wheel__card {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 332px;
  margin: -166px 0 0 -125px;
  /* centre the card on the hub origin */
  cursor: default;
  /* read right-to-left: push out to the rim, then swing round to this card's angle */
  /* rightmost first: size the card, push it to the rim, then swing it round */
  transform: rotate(var(--a)) translateY(calc(-1 * var(--R))) scale(var(--card-scale));
}

.tile {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-card-blue);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the therapy card is a blue panel with the photo inset, not a full-bleed image */
.wheel__card--therapy .tile img {
  position: absolute;
  left: -33.573%;
  top: 22.355%;
  width: 154.839%;
  height: 77.711%;
  max-width: none;
  /* the global img reset would clamp this back to the card width */
}

/* frosted caption plates - Figma effect type GLASS */
.plate {
  /* Anchored to the bottom, not the top: the captions run to different lengths,
     and from the top the longer ones (One-on-One Therapy, Virtual Pilates) grew
     past the bottom edge of the card. This keeps the same gap under every one. */
  position: absolute;
  left: 24px;
  bottom: 20px;
  width: 201px;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: center;
  color: var(--c-white);
  background: rgba(255, 255, 255, .035);
  /* less frosting + almost no brightness knock = more of the photo reads through */
  backdrop-filter: blur(17px) saturate(190%) brightness(.99);
  -webkit-backdrop-filter: blur(17px) saturate(190%) brightness(.99);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 10px 30px rgba(0, 0, 0, .14);
  /* the glass carries less of the contrast now, so the type leans on its shadow */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72), 0 0 16px rgba(0, 0, 0, .52);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plate {
    background: rgba(120, 110, 100, .24);
  }
}

.plate h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
}

.plate p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}

/* ---------- scroll reveal ---------- */
/* Gated on .js so the page is fully visible when JavaScript is off.
   Each element picks a variant via data-reveal="..."; the easing overshoots
   slightly on the transform so things settle rather than just stop. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
  filter: blur(6px);
  transition:
    opacity .70s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .95s cubic-bezier(.16, 1.08, .30, 1) var(--reveal-delay, 0ms),
    filter .70s ease-out var(--reveal-delay, 0ms),
    clip-path .95s cubic-bezier(.16, 1.08, .30, 1) var(--reveal-delay, 0ms);
}

/* directional variants */
.js [data-reveal="left"] {
  transform: translate3d(-58px, 0, 0);
}

.js [data-reveal="right"] {
  transform: translate3d(58px, 0, 0);
}

.js [data-reveal="up"] {
  transform: translate3d(0, 46px, 0);
}

/* headings wipe upward out of nothing */
.js [data-reveal="mask"] {
  transform: translate3d(0, 30px, 0);
  clip-path: inset(0 0 100% 0);
  filter: none;
  /* the wipe reads better without the blur */
}

/* the wheel band stays put; its cards carry the entrance (see .wheel__card) */
.js [data-reveal="spread"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Only the heading wipe needs a clip, and only for its own animation. Left on
   every revealed block, inset(0) crops anything drawn past the block's edge --
   it was cutting the waitlist buttons' pop and ring off at the hero text's
   bottom-left corner. */
.js [data-reveal="mask"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---------- why join ---------- */
/* the card band's lower arc already leaves air under the cards, so this only
   needs a little space of its own */
.why {
  padding-block: 8px 40px;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin-top: 40px;
  max-width: 1092px;
  margin-inline: auto;
}

.why__item h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  margin-bottom: 16px;
}

.why__item p {
  font-size: 16px;
  line-height: 23px;
}

/* ---------- community CTA ---------- */
.cta {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 453px;
  display: flex;
}

.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
}

.cta__body {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 56px;
  max-width: 597px;
  color: var(--c-pure);
}

.cta__title {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}

.cta__body p {
  font-size: 20px;
  line-height: 25px;
  margin-top: 16px;
  max-width: 388px;
}

.cta__body .btn {
  margin-top: 32px;
}

/* ---------- FAQ ---------- */
.faq {
  padding-block: 72px 80px;
}

.faq__list {
  max-width: 982px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__item {
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--c-hairline);
  transition: background-color .2s ease, border-color .2s ease;
}

.faq__item[open] {
  background: var(--c-surface);
  border-color: transparent;
}

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 17px 18px 36px;
  min-height: 64px;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  color: var(--c-ink);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--c-ink);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .2s ease;
}

.faq__icon::before {
  width: 12px;
  height: 2px;
}

/* the minus bar */
.faq__icon::after {
  width: 2px;
  height: 12px;
}

/* the vertical, hidden when open */
.faq__item[open] .faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__icon {
  border: 1.5px solid var(--c-ink);
  border-radius: 50%;
}

.faq__a {
  padding: 0 36px 36px;
  font-size: 18px;
  line-height: 25px;
  color: var(--c-ink);
  opacity: .72;
}

/* ---------- policy pages ---------- */
/* No hero photo to sit on, so the nav gets its own dark band; the wordmark and
   nav type are white, and every nav rule below carries over unchanged. */
.page-head {
  background: var(--c-ink);
  color: var(--c-white);
}

.legal {
  padding-block: 72px 120px;
}

.legal__head {
  max-width: 780px;
}

.legal__stamp {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.legal__title {
  /* the design's page-title token, as on the waitlist form */
  font-weight: 700;
  font-size: 64px;
  line-height: 77px;
  color: var(--c-ink);
  margin-top: 16px;
}

.legal__lede {
  font-size: 20px;
  line-height: 30px;
  color: var(--c-ink);
  opacity: .72;
  margin-top: 24px;
}

/* the rule doubles as the gap between the intro and the clauses */
.legal__body {
  max-width: 780px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--c-hairline);
}

.legal__section+.legal__section {
  margin-top: 40px;
}

.legal__section h2 {
  /* the design's section-heading token, as on the success screen */
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--c-ink);
}

.legal__section p {
  font-size: 18px;
  line-height: 28px;
  color: var(--c-ink);
  opacity: .82;
  margin-top: 12px;
}

.legal__list {
  margin: 12px 0 0;
  padding-left: 22px;
}

.legal__list li {
  font-size: 18px;
  line-height: 29px;
  color: var(--c-ink);
  opacity: .82;
  padding-left: 6px;
}

.legal__list li+li {
  margin-top: 8px;
}

.legal__list::marker,
.legal__list li::marker {
  color: var(--c-primary);
}

.legal__deflist {
  margin: 16px 0 0;
}

.legal__deflist dt {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--c-ink);
}

.legal__deflist dd {
  margin: 8px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--c-primary);
  font-size: 18px;
  line-height: 29px;
  color: var(--c-ink);
  opacity: .82;
}

.legal__deflist dd+dt {
  margin-top: 24px;
}

.legal__back {
  margin-top: 56px;
}

.legal__back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-primary);
}

.legal__back a::before {
  content: "\2190";
}

.legal__back a:hover {
  text-decoration: underline;
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  min-height: 721px;
  display: flex;
  flex-direction: column;
  color: var(--c-white);
  isolation: isolate;
}

.footer__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer::after {
  /* Figma: linear gradient, transparent -> 72% black over the lower 191px */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 191px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, .72) 97%);
}

.footer__main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-top: 125px;
}

.footer__cta {
  width: 404px;
  margin-left: auto;
  flex: none;
}

.footer__title {
  font-weight: 600;
  font-size: 48px;
  line-height: 58px;
}

.footer__cta p {
  font-size: 20px;
  line-height: 24px;
  margin-top: 24px;
}

.footer__cta .btn {
  margin-top: 48px;
}

/* Sits at the bottom of the band, just above the legal links, rather than a
   fixed distance from the top -- so it stays put whether or not the footer
   carries the waitlist line and button. */
.social {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: flex-end;
  margin-bottom: 48px;
}

.social__label {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.social__icons {
  display: flex;
  gap: 8px;
}

/* Figma draws these as a flat #121212 @ 8% disc behind a white glyph. Baked into the
   SVG that disc is invisible over the bright sky, so the circle is a real element here
   and gets the same liquid-glass treatment as the collage plates. */
.social__icons a {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, .18) 100%);
  backdrop-filter: blur(10px) saturate(185%) brightness(.72);
  -webkit-backdrop-filter: blur(10px) saturate(185%) brightness(.72);
  border: 0;
  /* a solid border lights the whole ring */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .20);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Directional rim: a 1px ring whose brightness runs along a 135deg axis, so it
   catches light at the top-left and bottom-right only and fades out on the other
   two quadrants. The two masks cut the centre out, leaving just the ring. */
.social__icons a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, .92) 0%,
      rgba(255, 255, 255, .20) 34%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, .22) 66%,
      rgba(255, 255, 255, .72) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity .15s ease;
}

.social__icons a img {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.social__icons a:hover {
  transform: translateY(-2px);
  backdrop-filter: blur(10px) saturate(190%) brightness(.60);
  -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(.60);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .26);
}

.social__icons a:hover::after {
  opacity: .85;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .social__icons a {
    background: rgba(18, 18, 18, .42);
  }
}

.footer__bar {
  padding-bottom: 24px;
}

.footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer__legal {
  display: flex;
  gap: 96px;
}

.footer__bar a,
.footer__copy {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
}

.footer__bar a:hover {
  text-decoration: underline;
}

/* ---------- waitlist pages ---------- */
/* Figma "Web/join wait list form" (237:725), its success screen (237:1012)
   and the mobile frames (237:1248, 237:1118). */
:root {
  --wl-ink: #263238;
  --wl-line: rgba(38, 50, 56, .30);
  --wl-muted: rgba(0, 0, 0, .64);
  --wl-danger: #D92D20;
  --wl-foot: #F7F9FC;
  --wl-rule: #E4E7EC;
  --wl-legal: #344054;
}

/* light header: white bar, dark wordmark, filled blue button */
.page-head--light {
  background: var(--c-pure);
  color: var(--wl-ink);
}

.page-head--light .nav {
  padding-block: 24px;
}

.page-head--light .lang__toggle,
.page-head--light .nav__burger {
  color: var(--wl-ink);
}

.page-head--light .nav__actions .btn--light {
  background: var(--c-primary);
  color: var(--c-pure);
}

.page-head--light .nav__actions .btn--light:hover {
  background: #255FD6;
}

/* close button on the waitlist pages, where "Join Waitlist" would lead to itself */
.nav__close {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--wl-ink);
  transition: background-color .15s ease;
}

.nav__close svg {
  width: 24px;
  height: 24px;
}

.nav__close:hover {
  background: rgba(38, 50, 56, .08);
}

.nav--closeable .nav__right {
  margin-left: auto;
}

/* keep the language menu beside the close */

.wl {
  background: #FEFEFE;
  padding: 25px 0 120px;
}

.wl__col {
  width: min(511px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.wl__title {
  font-weight: 700;
  font-size: 64px;
  line-height: 77px;
  color: #000;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 64px;
}

/* text fields */
.wl-fields {
  display: grid;
  /* the updated design spaces the fields 58px apart (140px label-to-label) */
  gap: 58px;
}

.wl-field__label {
  display: block;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--wl-ink);
  margin-bottom: 8px;
}

.wl-field__opt {
  font-weight: 400;
  font-size: 16px;
  color: var(--wl-muted);
}

.wl-field input[type="text"],
.wl-field input[type="email"] {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--wl-line);
  border-radius: 8px;
  background: var(--c-pure);
  font: 500 18px/1.2 var(--font-body);
  color: var(--wl-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wl-field input::placeholder {
  color: rgba(38, 50, 56, .38);
}

.wl-field input:focus,
.wl-select select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .18);
}

.wl-field.is-invalid input {
  border-color: var(--wl-danger);
}

.wl-field__error,
.wl-error {
  color: var(--wl-danger);
  font-size: 14px;
  line-height: 20px;
  margin-top: 6px;
}

.wl-error {
  margin: 0 0 24px;
}

/* "check all that apply" groups and the dropdown */
.wl-groups {
  display: grid;
  gap: 72px;
  margin-top: 56px;
}

.wl-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.wl-group__q,
.wl-field__label--q {
  padding: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: var(--wl-ink);
  margin-bottom: 0;
}

.wl-group__hint {
  font-weight: 400;
}

/* "(Check all that apply)" and "(please specify)" sit back from the text they follow */
.wl-group__hint,
.wl-check__hint {
  opacity: .56;
}

.wl-field__label--q {
  margin-bottom: 16px;
}

.wl-group__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 23px;
}

.wl-check__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  line-height: 22px;
  color: var(--wl-ink);
  cursor: pointer;
}

/* the real checkbox stays in place for keyboards and screen readers, invisible */
.wl-check__label input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 23px;
  height: 23px;
  margin: -11.5px 0 0;
  opacity: 0;
  cursor: pointer;
}

.wl-check__box {
  position: relative;
  flex: none;
  width: 23px;
  height: 23px;
  border: .8px solid #000;
  border-radius: 4px;
  background: var(--c-pure);
  transition: background-color .15s ease, border-color .15s ease;
}

.wl-check__box::after {
  /* the tick */
  content: "";
  position: absolute;
  left: 7.5px;
  top: 3.5px;
  width: 6px;
  height: 11px;
  border: solid var(--c-pure);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .15s ease;
}

.wl-check__label input:checked+.wl-check__box {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.wl-check__label input:checked+.wl-check__box::after {
  opacity: 1;
}

.wl-check__label input:focus-visible+.wl-check__box {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* "Other (please specify)": the checkbox, then an underline to write on */
.wl-check--other {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.wl-check--other .wl-check__label {
  flex: none;
}

.wl-check--other input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--wl-line);
  border-radius: 0;
  background: transparent;
  font: 400 16px/1.2 var(--font-body);
  color: var(--wl-ink);
}

.wl-check--other input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--c-primary);
}

.wl-select select {
  width: 100%;
  height: 50px;
  padding: 0 56px 0 16px;
  border: 1px solid var(--wl-line);
  border-radius: 4px;
  background-color: #FDFDFD;
  font: 500 18px/1.2 var(--font-body);
  color: var(--wl-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.3 8.3a1 1 0 0 1 1.4 0L12 13.6l5.3-5.3a1 1 0 1 1 1.4 1.4l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4z' fill='%233D4754'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px;
}

.wl-select select:has(option[value=""]:checked) {
  color: rgba(38, 50, 56, .45);
}

/* Our own dropdown (see waitlist.html): it always opens downward, where a
   browser's own menu flips upward near the bottom of the window. The real
   <select> stays in the form, hidden, so the value still submits. */
.wl-field.is-open {
  position: relative;
  z-index: 40;
}

.wl-select--custom {
  position: relative;
}

.wl-select--custom select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wl-drop {
  position: relative;
}

.wl-drop__btn {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--wl-line);
  border-radius: 4px;
  background: #FDFDFD;
  font: 500 18px/1.2 var(--font-body);
  color: var(--wl-ink);
  text-align: left;
}

.wl-drop__btn.is-placeholder .wl-drop__value {
  color: rgba(38, 50, 56, .45);
}

.wl-drop__btn svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: #3D4754;
  transition: transform .15s ease;
}

.wl-drop__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.wl-drop__btn:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .18);
}

.wl-drop__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--c-pure);
  border: 1px solid var(--wl-line);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}

.wl-drop__menu--up {
  top: auto;
  bottom: calc(100% + 8px);
}

/* no room below: open above, as a browser's own menu does */
.wl-drop__menu[hidden] {
  display: none;
}

.wl-drop__opt {
  padding: 6px 16px;
  font-size: 16px;
  line-height: 19px;
  color: var(--wl-ink);
  cursor: pointer;
}

.wl-drop__opt.is-active {
  background: #D4EDFF;
}

/* Figma highlights the row under the pointer */
.wl-drop__opt[aria-selected="true"] {
  font-weight: 600;
  background: rgba(47, 111, 237, .08);
}

.wl-drop__opt[aria-selected="true"].is-active {
  background: #D4EDFF;
}

/* opt-in + submit */
.wl-submit {
  display: grid;
  justify-items: start;
  gap: 24px;
  margin-top: 64px;
}

.wl-optin {
  align-items: flex-start;
  font-size: 16px;
  line-height: 19px;
  color: var(--wl-muted);
}

.wl-optin .wl-check__box {
  border-color: var(--wl-muted);
}

.wl-optin input {
  top: 0;
  margin-top: 0;
}

.wl-submit .wl-submit__btn {
  height: 52px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 22px;
}

/* success screen */
.wl--done {
  padding: 0;
}

.wl-done {
  max-width: 579px;
  margin-inline: auto;
  padding: 142px var(--gutter) 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wl-done__check {
  width: 153px;
  height: 153px;
  color: var(--c-primary);
  animation: wl-check-pop .6s cubic-bezier(.34, 1.56, .64, 1) both;
  /* overshoots, then settles */
}

@keyframes wl-check-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.wl-done__intro {
  margin-top: 63px;
}

.wl-done__title {
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  color: #000;
  text-transform: capitalize;
}

.wl-done__intro p {
  max-width: 461px;
  margin: 17px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--wl-ink);
}

.wl-done__spot {
  margin-top: 65px;
}

.wl-done__trophy {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  mix-blend-mode: multiply;
}

.wl-done__h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #000;
  text-transform: capitalize;
}

.wl-done__rank {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #000;
  margin-top: 8px;
}

.wl-done__share {
  margin-top: 57px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wl-done__share>p {
  max-width: 418px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--wl-ink);
}

.wl-link {
  width: min(381px, 100%);
  margin-top: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: .7px solid var(--wl-ink);
  border-radius: 8px;
  color: var(--wl-ink);
}

.wl-link__icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.wl-link__url {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: 400 14px/20px var(--font-body);
  color: var(--wl-ink);
  text-overflow: ellipsis;
}

.wl-link__url:focus {
  outline: none;
}

.wl-link__copy {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--wl-ink);
}

.wl-link__copy svg {
  width: 20px;
  height: 20px;
}

.wl-link__copy:hover {
  color: var(--c-primary);
}

.wl-share {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.wl-share__btn {
  width: 79px;
  height: 48px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #000;
  transition: transform .15s ease, opacity .15s ease;
}

.wl-share__btn--gmail {
  background: #F44336;
}

.wl-share__btn img,
.wl-share__btn svg {
  width: 24px;
  height: 24px;
}

/* the X glyph sits inside padding in its 24px file; scale it to match the others */
.wl-share__btn--x img {
  width: 40px;
  height: 40px;
}

.wl-share__btn:hover {
  transform: translateY(-2px);
  opacity: .9;
}

/* light footer */
.foot {
  background: var(--wl-foot);
  color: var(--wl-legal);
  padding: 56px 0;
}

.foot__top {
  border-top: 1px solid var(--wl-rule);
  padding: 31px 40px 0;
  display: flex;
  justify-content: flex-end;
}

.foot .social {
  margin-top: 0;
}

.social--dark .social__label {
  color: var(--wl-legal);
}

.social--dark .social__icons a,
.social--dark .social__icons a:hover {
  background: #121212;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.social--dark .social__icons a::after {
  display: none;
}

.foot__bottom {
  padding: 64px 40px 0;
  display: flex;
  align-items: baseline;
  gap: 64px;
  flex-wrap: wrap;
}

.foot__legal {
  display: flex;
  gap: 96px;
}

.foot__legal a,
.foot__copy {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--wl-legal);
}

.foot__legal a:hover {
  text-decoration: underline;
}

.foot__copy {
  margin-left: auto;
  font-weight: 400;
}

@media (max-width: 760px) {
  .wl {
    padding: 38px 0 80px;
  }

  .wl__title {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 40px;
  }

  .wl-fields {
    gap: 24px;
  }

  .wl-field__label {
    font-size: 16px;
    line-height: 20px;
  }

  .wl-field input[type="text"],
  .wl-field input[type="email"],
  .wl-select select {
    height: 48px;
    font-size: 16px;
  }

  .wl-drop__btn {
    height: 48px;
    font-size: 16px;
  }

  .wl-groups {
    /* 3x the 16px between options, so each question reads as its own block */
    gap: 48px;
    margin-top: 40px;
  }

  .wl-group__q,
  .wl-field__label--q {
    font-size: 16px;
    line-height: 20px;
  }

  .wl-group__list {
    margin-top: 20px;
  }

  .wl-check__label {
    font-size: 16px;
    line-height: 20px;
  }

  .wl-submit {
    margin-top: 40px;
    justify-items: stretch;
  }

  .wl-optin {
    font-size: 14px;
    line-height: 17px;
  }

  .wl-submit .wl-submit__btn {
    width: 100%;
    font-weight: 500;
  }

  .wl-done {
    padding: 60px var(--gutter) 90px;
  }

  .wl-done__check {
    width: 108px;
    height: 108px;
  }

  .wl-done__intro {
    margin-top: 40px;
  }

  .wl-done__title {
    font-size: 24px;
    line-height: 30px;
  }

  .wl-done__spot {
    margin-top: 44px;
  }

  .wl-done__trophy {
    width: 60px;
    height: 60px;
  }

  .wl-done__h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .wl-done__share {
    margin-top: 44px;
  }

  .wl-done__share>p {
    font-size: 14px;
    line-height: 20px;
  }

  .wl-link {
    width: 100%;
  }

  .foot {
    padding: 32px 0 40px;
  }

  .foot__top {
    border-top: 0;
    padding: 0 var(--gutter);
    justify-content: center;
  }

  .foot .social {
    justify-content: center;
  }

  .foot__legal {
    gap: 24px;
  }

  .foot__bottom {
    padding: 24px var(--gutter) 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .foot__copy {
    margin-left: 0;
    max-width: 284px;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root {
    --gutter: 32px;
  }

  .hero__body {
    flex-direction: column;
    padding-top: 110px;
  }

  .hero__title {
    font-size: 44px;
    line-height: 54px;
  }

  .hero__aside {
    margin: 32px 0 0;
    width: min(420px, 100%);
  }

  .why__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* the wider radius flattens the arc, so the band needs less height to hold it */
  .wheel {
    --R: 1670px;
    --card-scale: 1.06;
    --hub-y: 210px;
    height: 490px;
  }

  /* the footer is a two-column band on desktop; stack it once it cannot fit */
  .footer__main {
    flex-direction: column;
    padding-top: 88px;
  }

  .footer__cta {
    margin-left: 0;
    width: min(480px, 100%);
  }

  .social {
    align-self: auto;
    margin-top: 48px;
    margin-bottom: 0;
    order: 2;
  }

  .footer__title {
    font-size: 38px;
    line-height: 46px;
  }
}

/* Phones — Figma "mobile/ landing page" (390 wide, 24px gutter). Everything
   centres and stacks; the language switcher and CTA live behind a hamburger. */
@media (max-width: 760px) {
  :root {
    --gutter: 24px;
  }

  /* header: small brand left, hamburger right */
  .nav {
    padding-top: 8px;
  }

  .nav__inner {
    min-height: 66px;
    gap: 16px;
  }

  .brand {
    gap: 14px;
  }

  .brand__mark {
    width: 31px;
    height: 31px;
  }

  .brand__word {
    width: 71px;
    height: 28px;
  }

  .nav__burger {
    display: block;
  }

  .nav--closeable .nav__burger {
    margin-left: auto;
  }

  .nav__close {
    margin-left: 4px;
  }

  .nav__right {
    display: none;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--c-pure);
    border: 1px solid var(--c-hairline);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, .10);
    z-index: 20;
  }

  .nav[data-open="true"] .nav__right {
    display: flex;
  }

  .nav__inner {
    position: relative;
  }

  /* inside the panel the language list is always open, so the toggle becomes a heading */
  .lang__toggle {
    pointer-events: none;
    color: var(--c-ink);
  }

  .lang__chev {
    display: none;
  }

  .lang__menu,
  .lang__menu[hidden] {
    display: flex;
    position: static;
    width: auto;
    padding: 0;
    margin-top: 12px;
    border: 0;
    box-shadow: none;
  }

  .nav__actions .btn--light {
    width: 100%;
    background: var(--c-primary);
    color: var(--c-pure);
  }

  /* hero: a centred column */
  .hero {
    min-height: 846px;
  }

  .hero::before {
    background: rgba(0, 0, 0, .56);
  }

  .hero__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 240px;
  }

  .hero__title {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    max-width: 330px;
  }

  .hero__aside {
    width: min(330px, 100%);
    margin: 16px 0 0;
  }

  .hero__aside p {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 32px;
  }

  .btn--primary {
    font-size: 16px;
    padding: 18px 16px;
  }

  /* sections */
  .section {
    padding-block: 40px 0;
  }

  .section__title,
  .cta__title {
    font-size: 24px;
    line-height: 29px;
  }

  .section__lede {
    font-size: 16px;
    line-height: 21px;
    margin-top: 16px;
    opacity: .72;
  }

  /* The band hugs the centre card: ~36px under the intro, ~40px above the
     next heading. The fade starts late so it only touches the side cards. */
  .wheel {
    --R: 1470px;
    --card-scale: 1.04;
    --hub-y: 185px;
    --fade-from: 90%;
    height: 398px;
    margin-top: 24px;
  }

  .why {
    padding-block: 0 40px;
  }

  .why__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
    max-width: 300px;
    text-align: center;
  }

  .why__item h3 {
    margin-bottom: 8px;
  }

  .cta {
    min-height: 429px;
  }

  .cta::after {
    background: rgba(0, 0, 0, .56);
  }

  .cta__body {
    margin-inline: auto;
    padding: 32px 24px;
    max-width: 314px;
    text-align: center;
  }

  .cta__title {
    font-size: 20px;
    line-height: 24px;
  }

  .cta__body p {
    font-size: 16px;
    line-height: 22px;
    margin-top: 16px;
  }

  .faq {
    padding-block: 48px;
  }

  .faq__list {
    margin-top: 24px;
    gap: 8px;
  }

  .faq__q {
    font-size: 16px;
    line-height: 22px;
    padding: 21px 10px 21px 10px;
    gap: 16px;
  }

  .faq__item[open] .faq__q {
    padding: 22px 10px 8px;
  }

  .faq__a {
    padding: 0 10px 22px;
    font-size: 16px;
    line-height: 22px;
  }

  /* A horizontal reveal offset is wider than the margin a phone has to spare:
     until the element reveals it sticks out past the viewport edge, which widens
     the layout viewport and zooms the whole page out. Slide these up instead. */
  .js [data-reveal="left"],
  .js [data-reveal="right"] {
    transform: translate3d(0, 46px, 0);
  }

  /* policy pages */
  .legal {
    padding-block: 48px 72px;
  }

  .legal__title {
    font-size: 28px;
    line-height: 34px;
  }

  .legal__lede {
    font-size: 16px;
    line-height: 24px;
  }

  .legal__body {
    margin-top: 32px;
    padding-top: 32px;
  }

  .legal__section h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .legal__section p,
  .legal__list li,
  .legal__deflist dd {
    font-size: 16px;
    line-height: 26px;
  }

  /* footer: one centred column, social + legal centred underneath */
  .footer {
    min-height: 621px;
  }

  .footer::after {
    height: 100%;
    background: rgba(0, 0, 0, .40);
  }

  .footer__main {
    padding-top: 56px;
    align-items: center;
    text-align: center;
  }

  .footer__cta {
    width: min(324px, 100%);
  }

  .footer__title {
    font-size: 32px;
    line-height: 38px;
  }

  .footer__cta p {
    font-size: 16px;
    line-height: 19px;
    margin-top: 16px;
  }

  .footer__cta .btn {
    margin-top: 32px;
  }

  .social {
    margin-top: 0;
    justify-content: center;
  }

  /* The waitlist footer has no CTA line or button, so the row is measured from
     the bottom instead: pushed down the photo by the spare space, it ends up
     77px above the Privacy / Terms line (24px of that is the bar's own top
     padding, so 53px is left here). */
  .footer--nocta .social {
    margin-top: auto;
    margin-bottom: 53px;
  }

  .footer__bar {
    padding-top: 24px;
  }

  .footer__bar-inner {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .footer__legal {
    gap: 24px;
  }

  .footer__copy {
    max-width: 284px;
  }
}

@media (max-width: 400px) {
  .wheel {
    --card-scale: .96;
    --hub-y: 171px;
    height: 370px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .wheel[data-reveal="spread"] .wheel__card {
    animation: none !important;
    opacity: 1 !important;
  }

  .btn:hover,
  .social__icons a:hover {
    transform: none;
  }
}
/* The quiet way into the practitioner application, under the footer's CTA. */
.footer__practise {
  margin: 20px 0 0;
}

.footer__practise a {
  font: 400 15px/1.5 var(--font-body);
  color: inherit;
  opacity: .72;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__practise a:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Become an Expert — the application, as the app draws it.

   Figma `259:59132` (intro), `259:59145`, `259:59179`, `259:59198` (the
   three steps) and `259:59229` (submitted). The app is a 390-wide phone
   frame; here the same column is centred on whatever the screen is, with
   the measurements kept: 48-tall controls on an 8 radius, a #F9F9F9 fill
   inside a hairline, 8 between a question and its control and 16 between
   one control and the next question.

   Named xp-* rather than reusing the waitlist's wl-*: this is the app's
   look, not the website's form, and the two should be free to move apart.
   --------------------------------------------------------------------------- */

.xp {
  --xp-blue: #2F6FED;
  --xp-ink: #263238;
  --xp-field: #F9F9F9;
  --xp-rim: rgba(0, 0, 0, .08);
  --xp-track: #ECF1F4;
  --xp-muted: rgba(38, 50, 56, .62);
  --xp-danger: #D64545;

  padding: 24px 0 64px;
  background: var(--c-pure, #FFF);
}

.xp__col {
  width: min(390px, 100% - 48px);
  margin-inline: auto;
}

/* The steps start at the progress bar, so the page's own top padding comes
   off: the app leaves 22 above that row and nothing else, measured from the
   safe area. Keeping both gave 46 here -- a gap with nothing in it, read as
   the form starting late. */
.xp--steps {
  padding-top: 0;
}

/* intro ------------------------------------------------------------------ */

.xp__col--intro {
  text-align: center;
}

.xp-intro__title {
  /* 71 above the title in the app's own screen, which has no header over
     it; neither does this page now. */
  margin: 47px 0 16px;
  font: 700 28px/1.17 var(--font-body);
  /* The frame runs #2F6FED to #274889 — steeper than the site's own title
     gradient, so it is written out here. */
  background: linear-gradient(90deg, #2F6FED 0%, #274889 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xp-intro__body {
  margin: 0 auto 24px;
  max-width: 34ch;
  font: 400 16px/1.36 var(--font-body);
  color: var(--xp-muted);
}

.xp-intro__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  /* 48 between the artwork and Start Application, as the frame has it. */
  margin-bottom: 48px;
}

/* the step's chrome ------------------------------------------------------ */

.xp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 0 0;
}

.xp-back {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--xp-ink);
  flex: none;
}

.xp-back svg {
  width: 16px;
  height: 16px;
}

/* Three segments, 3.58 tall with 10.74 between them, as measured. */
.xp-steps {
  display: flex;
  gap: 10.74px;
  flex: 1;
  /* The frame leaves 65 to the right of the bar, so it stops short of the
     edge rather than running the width of the screen. */
  margin-right: 65px;
  padding: 0;
  list-style: none;
}

.xp-steps__seg {
  flex: 1;
  height: 3.58px;
  border-radius: 4px;
  background: var(--xp-track);
}

.xp-steps__seg.is-done {
  background: var(--xp-blue);
}

/* questions and their controls ------------------------------------------- */

.xp-form {
  padding-top: 22px;
}

.xp-label {
  display: block;
  margin-bottom: 8px;
  font: 500 14px/1.36 var(--font-body);
  color: var(--xp-ink);
}

.xp-field {
  margin-bottom: 16px;
}

.xp-field input[type="text"],
.xp-field input[type="email"],
.xp-field input[type="tel"],
.xp-field input[type="url"],
.xp-field input[type="number"],
.xp-field input[type="file"],
.xp-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px;
  border: 1px solid var(--xp-rim);
  border-radius: 8px;
  background: var(--xp-field);
  font: 400 14px/1.36 var(--font-body);
  color: var(--xp-ink);
}

.xp-field textarea {
  min-height: 163px;     /* "Tell us briefly about yourself?" */
  resize: vertical;
}

.xp-field input:focus,
.xp-field textarea:focus {
  outline: none;
  border-color: var(--xp-blue);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .16);
}

.xp-field.is-invalid input,
.xp-field.is-invalid textarea {
  border-color: var(--xp-danger);
}

/* An upload is a file input styled as the app's "Add file" chip. */
.xp-upload input[type="file"] {
  padding: 10px 13px;
  border-style: dashed;
  border-color: var(--xp-blue);
  cursor: pointer;
}

.xp-upload input[type="file"]::file-selector-button {
  margin-right: 11px;
  padding: 7px 11px;
  border: 1px solid var(--xp-blue);
  border-radius: 8px;
  background: var(--xp-field);
  font: 500 13px/1 var(--font-body);
  color: var(--xp-blue);
  cursor: pointer;
}

.xp-hint {
  margin: 6px 0 0;
  font: 400 12px/1.4 var(--font-body);
  color: var(--xp-muted);
}

/* choices ---------------------------------------------------------------- */

.xp-group {
  border: 0;
  padding: 0;
  margin: 0 0 45px;
  min-width: 0;
}

.xp-options {
  display: grid;
  gap: 16px;
}

/* Outlined when chosen, never filled: the solid blue belongs to the button
   at the foot of the form. */
.xp-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--xp-rim);
  border-radius: 8px;
  background: var(--c-pure, #FFF);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.xp-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.xp-option__label {
  flex: 1;
  font: 400 14px/1.36 var(--font-body);
  color: var(--xp-ink);
}

.xp-option__tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--xp-blue);
  color: #FFF;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease;
}

.xp-option__tick svg {
  width: 12px;
  height: 12px;
}

.xp-option:has(input:checked) {
  border-color: var(--xp-blue);
  border-width: 1.5px;
}

.xp-option:has(input:checked) .xp-option__tick {
  opacity: 1;
  transform: none;
}

.xp-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .16);
}

/* The chosen state is drawn with :has(), which a browser from before 2023
   does not understand -- and there the hidden checkbox would leave no way
   to see what is selected. So in those, the checkbox itself comes back. */
@supports not selector(:has(*)) {
  .xp-option input {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--xp-blue);
  }

  .xp-option__tick {
    display: none;
  }
}

/* the declaration the website adds ---------------------------------------- */

.xp-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0 0;
  font: 400 13px/1.45 var(--font-body);
  color: var(--xp-muted);
  cursor: pointer;
}

.xp-agree input {
  margin-top: 2px;
  accent-color: var(--xp-blue);
  width: 16px;
  height: 16px;
  flex: none;
}

.xp-error {
  margin: 6px 0 0;
  font: 400 12px/1.4 var(--font-body);
  color: var(--xp-danger);
}

/* actions ----------------------------------------------------------------- */

.xp-btn {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--xp-blue);
  font: 600 16px/1.2 var(--font-body);
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
}

.xp-btn:hover {
  filter: brightness(1.05);
}

.xp-btn--ghost {
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--xp-blue);
  color: var(--xp-blue);
}

/* The frames leave 45 between the last control and the button. */
.xp-form__next {
  margin-top: 45px;
}

/* submitted --------------------------------------------------------------- */

.xp__col--done {
  padding-top: 60px;
}

.xp-done {
  display: grid;
  justify-items: center;
  padding: 72px 33px 48px;
  border: 1px solid #999;
  border-radius: 16px;
  background: var(--c-pure, #FFF);
  text-align: center;
}

.xp-done__tick {
  display: grid;
  place-items: center;
  width: 91.5px;
  height: 91.5px;
  border-radius: 50%;
  background: #2BB673;
  color: #FFF;
}

.xp-done__tick svg {
  width: 54px;
  height: 54px;
}

.xp-done__title {
  margin: 32px 0 16px;
  font: 700 22px/1.3 var(--font-body);
  color: var(--xp-ink);
}

.xp-done__body {
  margin: 0;
  max-width: 277px;
  font: 400 14px/1.5 var(--font-body);
  color: var(--xp-muted);
}

.xp-done__at {
  margin: 24px 0 16px;
  text-align: center;
  font: 400 13px/1.5 var(--font-body);
  color: var(--xp-muted);
}

/* The honeypot. Off-screen rather than display:none, which some submitters
   check for, and never reachable by keyboard or screen reader. */
.xp-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- desktop
   The app is a 390 phone frame and this flow was built from it, which left
   a laptop showing a phone-wide ribbon down the middle of an empty page.

   What widens is the layout only. Every measurement the frames specify --
   48-tall controls, the 8 radius, 8 under a question, 16 between controls,
   45 before the button -- is the same at every width; a desktop reading of
   a mobile design is not a licence to redraw it.
   --------------------------------------------------------------------- */

/* A tablet is not a phone: the column grows before the form splits. */
@media (min-width: 600px) {
  .xp__col {
    width: min(560px, 100% - 64px);
  }

  /* The bar can run the width of the column now; 65 of right margin was
     the phone frame's own inset. */
  .xp-steps {
    margin-right: 0;
  }
}

@media (min-width: 900px) {
  .xp {
    padding-bottom: 96px;
  }

  .xp__col {
    width: min(880px, 100% - 96px);
  }

  /* Two questions abreast. Anything that cannot share a line says so
     below rather than being squeezed into half of one. */
  .xp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }

  .xp-group,
  .xp-agree,
  .xp-form__next,
  .xp-form > .xp-error {
    grid-column: 1 / -1;
  }

  /* "Tell us briefly about yourself?" is 163 tall; half a line beside a
     48 input would leave a hole next to it. */
  .xp-field:has(textarea) {
    grid-column: 1 / -1;
  }

  /* Before :has(), the textarea's own field cannot be singled out, so the
     whole form stays one column rather than putting a 163-tall box beside
     a 48-tall one. */
  @supports not selector(:has(*)) {
    .xp-form {
      grid-template-columns: 1fr;
    }
  }

  /* The three disciplines and the two languages read as a row of cards
     rather than a stack a laptop has to scroll. */
  .xp-options {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* A button the width of 880 is a banner, not a control. The frame's
     52 height stays; only the width is held in. */
  .xp-form__next {
    width: min(320px, 100%);
  }

  /* The intro becomes what the artwork always wanted: the words on one
     side, the picture on the other.
     
     Centred in the window rather than sitting at the top: with no header
     over it and nothing below, a short page anchored to the top leaves
     two thirds of a laptop screen empty under it. */
  .xp--intro {
    display: grid;
    align-content: center;
    /* Fills the window and centres in it. With no header above and no
       footer below, a short page pinned to the top leaves most of a
       laptop screen blank under it. */
    min-height: 100vh;
    padding-block: 48px;
  }

  .xp__col--intro {
    display: grid;
    /* The words over the actions in one column, the artwork beside both. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-areas:
      'words art'
      'actions art';
    grid-template-rows: max-content max-content;
    column-gap: 56px;
    align-content: center;
    text-align: left;
  }

  .xp-intro__words {
    grid-area: words;
  }

  .xp-intro__actions {
    grid-area: actions;
    /* Held to the top of its row so the buttons keep the frame's 52 rather
       than stretching to whatever the artwork beside them comes to. */
    align-self: start;
    width: min(320px, 100%);
  }

  .xp-intro__art {
    grid-area: art;
    align-self: center;
    justify-self: end;
    /* Held to about what the words and the two buttons come to. A square
       at its full 346 is taller than the column beside it, and grid hands
       the difference to the rows it spans -- which opens a gap between the
       blurb and the first button rather than making the picture bigger. */
    max-height: 300px;
    width: auto;
    aspect-ratio: 1;
  }

  .xp-intro__title {
    margin-top: 0;
    font-size: 40px;
    line-height: 1.1;
  }

  .xp-intro__body {
    /* The frame leaves 24 under the blurb; with the artwork beside it
       rather than below, that 24 is what separates it from the button. */
    margin: 0 0 24px;
    max-width: 40ch;
  }

  /* The acknowledgement is one card; it is given room, not a column. */
  .xp__col--done {
    width: min(560px, 100% - 96px);
    padding-top: 80px;
  }
}

@media (max-width: 420px) {
  .xp__col {
    width: min(390px, 100% - 32px);
  }

  .xp-intro__title {
    font-size: 24px;
  }
}

/* ===========================================================================
   Error pages.

   One layout for every status: the number, a line in the site's own voice,
   two or three lines of explanation, and one way out. Measured from the 508
   frame (desktop and mobile) -- everything else reuses it, so a visitor who
   meets two of these in a week meets the same page twice.

   The nav and the footer are the site's own. An error page is the one page
   nobody designed a journey to, so the most useful thing it can do is look
   like somewhere they have already been and carry the usual links.
   --------------------------------------------------------------------------- */

.oops {
  --oops-ink: #0D0D0D;
  --oops-muted: #4F5B62;
  --oops-blue: #2F6FED;

  /* The frame leaves a deep white field above and below. clamp() rather than
     a breakpoint: the gap closes smoothly between the two drawn widths. */
  padding: clamp(96px, 17vw, 260px) 24px clamp(110px, 16vw, 230px);
  background: var(--c-pure, #FFF);
  text-align: center;
}

.oops__code {
  margin: 0;
  font: 700 clamp(56px, 7.6vw, 110px)/1 var(--font-body);
  letter-spacing: -.01em;
  /* Flat black, not the site's title gradient: the number is information,
     and a gradient would read as decoration on a page that is apologising. */
  color: var(--oops-ink);
}

.oops__title {
  margin: clamp(26px, 3.4vw, 48px) auto 0;
  /* One line on a desktop, as the frame has it; the phone rule below pulls
     it in to two. */
  max-width: 620px;
  font: 700 clamp(17px, 1.3vw, 18px)/1.35 var(--font-body);
  color: var(--oops-ink);
}

.oops__body {
  margin: clamp(30px, 3.6vw, 52px) auto 0;
  /* Narrow enough that the frame's own line breaks come out: three lines on
     a desktop, four on a phone. Wider and the last line is left an orphan. */
  max-width: 500px;
  font: 400 clamp(15px, 1.15vw, 16px)/1.55 var(--font-body);
  color: var(--oops-muted);
}

/* One action, sized to its label rather than to the column: a full-width
   button on an empty page reads as a form, and there is nothing to submit. */
.oops__home {
  display: inline-grid;
  place-items: center;
  margin-top: clamp(34px, 3.4vw, 48px);
  min-height: 52px;
  padding: 10px 28px;
  border-radius: 8px;
  background: var(--oops-blue);
  font: 600 16px/1.2 var(--font-body);
  color: #FFF;
  text-decoration: none;
}

.oops__home:hover {
  filter: brightness(1.05);
}

@media (max-width: 480px) {
  .oops__title {
    max-width: 20ch;
  }

  .oops__home {
    /* The phone frame runs it nearly the width of the text column. */
    min-width: 212px;
  }
}