/* ============================================================
   Tiempo — /waitlist
   October cohort capture: hero form, the value bento, testimonials
   and the survey modal.
   ============================================================ */

/* Scoped, not on :root. This page runs a larger h2 and a smaller h3
   than the rest of the site, and chrome.css uses --fs-h2 for the mobile
   footer headings — leaving these global would have sized the footer
   here differently from every other page. --maxw / --pad-desk /
   --pad-mob are this page's own and used nowhere else. */
/* This page runs a dark document with cream ink at 1.6, where base.css
   sets a cream document with warm-brown ink at 1.85. Restated so linking
   base.css does not respace every line on the page. */

html, body {
  background-color: var(--media);
  color: var(--crema);
  line-height: var(--lh-relaxed);
}

/* overflow-x stays off html deliberately. base.css already sets it on
   body, which is all this page needs and what every other page does.
   Putting it on html too makes body the scroll container instead of the
   viewport, and two things break the moment it does: the nav stops
   sticking, because position: sticky then resolves against a scrollport
   as tall as the whole document, and the survey modal's
   body.style.overflow lock goes inert, because body is no longer what
   the page scrolls. */

/* base.css sets height: auto on media and -0.02em tracking with no
   heading line-height. This page was authored against tighter values;
   restated so nothing reflows. */
img, video { max-width: 100%; display: block; }

h1, h2, h3 {
  letter-spacing: -0.01em;
  line-height: 1.08;
}

body.page-waitlist {
  --fs-h2:    2.25rem;
  --fs-h3:    1.25rem;
  --maxw:     var(--w-page);
  --pad-desk: 48px;
  --pad-mob:  40px;
}

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

.wl-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.wl-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

/* ───────── 2. HERO ───────── */
.wl-hero {
  position: relative;
  background-color: var(--media);
  padding-top: 48px;
  padding-bottom: var(--pad-desk);
}

.wl-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.wl-hero h1 {
  font-size: clamp(2.25rem, 5.5vw, var(--fs-hero));
  color: var(--crema);
  margin-bottom: 20px;
}

.wl-hero-sub {
  font-size: 1.0625rem;
  color: rgba(var(--crema-rgb), 0.72);
  max-width: 30ch;
  margin-bottom: 30px;
}

/* Hero media — two sides: the human (video, large, behind)
   and the dashboard (static MacBook, smaller, in front) */
.wl-hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
}

.wl-hero-videowrap {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--media-deep);
  border: 2px solid var(--honey);
}

.wl-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wl-hero-videowrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--media-rgb), 0) 62%, rgba(var(--media-rgb), 0.45) 100%);
  pointer-events: none;
}

@media (min-width: 901px) {
  .hv-4 .wl-slots {max-width: none;}
}

/* ───────── FORM (shared) ───────── */
.wl-form { width: 100%; max-width: 460px; }

.wl-field {
  display: flex;
  gap: 10px;
  background-color: rgba(var(--crema-rgb), 0.06);
  border: 1px solid rgba(var(--crema-rgb), 0.22);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 8px;
  transition: border-color 0.2s;
}

.wl-field:focus-within { border-color: var(--honey); }

.wl-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--crema);
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 12px 8px 12px 12px;
}

.wl-input::placeholder { color: rgba(var(--crema-rgb), 0.4); }

.wl-btn {
  flex: 0 0 auto;
  background-color: var(--clockwork);
  color: var(--crema);
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.2s, opacity 0.2s;
}

.wl-btn:hover { transform: scale(1.03); }

.wl-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.wl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}

.wl-error {
  color: #F0A891;
  font-size: var(--fs-sm);
  min-height: 1.2em;
  margin-top: 10px;
  padding-left: 4px;
}

/* No reserved space when there's no message, so the trust line sits
   close under the input (it expands only when an error shows). */
.wl-error:empty { min-height: 0; margin-top: 0; }

.wl-trust {
  font-size: var(--fs-xs);
  color: rgba(var(--crema-rgb), 0.6);
  letter-spacing: 0.02em;
  margin-top: 14px;
  padding-left: 4px;
}

/* only the two links underline; the "or" between them stays plain */
.wl-trust a {
  color: rgba(var(--crema-rgb), 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Proof stat row under the hero form (real numbers from the profile) */
.wl-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px 0;
  margin: -8px 0 28px;
  font-size: var(--fs-sm);
  color: rgba(var(--crema-rgb), 0.68);
}
.wl-proof li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wl-proof li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 14px;
  color: rgba(var(--crema-rgb), 0.35);
}
.wl-proof b {
  font-weight: 600;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}

/* ───────── FAQ (page-scoped; this page does not load components.css) ───────── */
.wl-faq {
  background: var(--crema);
  color: var(--tierrita);
  padding: var(--band) var(--pad-x);
}
.wl-faq-inner { max-width: 760px; margin: 0 auto; }
.wl-faq h2 {
  text-align: center;
  color: var(--clockwork);
  font-size: clamp(1.75rem, 4vw, var(--fs-h2));
  margin-bottom: 30px;
}
.wl-faq-list { border-top: 1px solid rgba(var(--clockwork-rgb), 0.16); }
.wl-faq-item { border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.16); }
.wl-faq-item > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  color: var(--clockwork);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
}
.wl-faq-item > summary::-webkit-details-marker { display: none; }
.wl-faq-item > summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--clockwork);
  flex-shrink: 0;
}
.wl-faq-item[open] > summary::after { content: "\2212"; }
/* `open` stays set while an item animates shut, so the marker flips off
   `is-closing` instead and reads as closing the moment you click. Same
   specificity as the rule above, so it has to sit after it. */
.wl-faq-item.is-closing > summary::after { content: "+"; }
.wl-faq-item > div {
  padding: 0 4px 22px;
  color: var(--clockwork);
  line-height: 1.7;
  max-width: 64ch;
}
/* page-waitlist.js animates height and padding-bottom together. Both have to
   reach zero: the box is border-box, so a height of 0 on its own still leaves
   the 22px of padding standing and the answer collapses to a gap, not away. */

/* Avoid orphans (a lone word on the last line) across the body copy. */
.wl-hero-sub,
.wl-vp-lead,
.wl-how-lead,
.wl-card-lede,
.wl-proc-text,
.wl-final-sub,
.wl-faq-item > div { text-wrap: pretty; }

/* ───────── Countdown ───────── */
.wl-countdown {
  width: 100%;
  max-width: 460px;
  margin-top: 26px;
}
.hv-4 .wl-countdown { max-width: none; }

.wl-cd-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.5);
  margin-bottom: 10px;
  padding-left: 2px;
}

.wl-cd-clock {
  display: flex;
  gap: 8px;
}

.wl-cd-cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 10px 5px;
  border-radius: var(--r-md);
  background: var(--honey);
  border: 1px solid var(--honey);
}

.wl-cd-cell b {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.wl-cd-cell i {
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.8);
}

/* ───────── Slots progress bar ───────── */
.wl-slots {
  width: 100%;
  max-width: 460px;
  margin-top: 22px;
}

.wl-slots-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding: 0 2px;
}

.wl-slots-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.5);
}

.wl-slots-count {
  font-size: var(--fs-sm);
  color: rgba(var(--crema-rgb), 0.85);
  white-space: nowrap;
}

.wl-slots-count b { font-weight: 500; color: var(--crema); }

.wl-slots-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(var(--crema-rgb), 0.12);
  overflow: visible;
}

.wl-slots-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: #6CFAB8;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  animation: wl-slot-ping 2.6s ease-out 1.3s infinite;
}
@keyframes wl-slot-ping {
  0% { box-shadow: 0 0 0 0 rgba(108, 250, 184, 0.5); }
  100% { box-shadow: 0 0 0 7px rgba(108, 250, 184, 0); }
}

/* Success confirmation — the email pill turns into a solid honey pill. */
.wl-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 460px;
  min-height: 59px;
  background-color: var(--clockwork);
  border: 1px solid var(--clockwork);
  border-radius: var(--r-pill);
  padding: 12px 24px;
}

.wl-done-check {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--crema);
}

.wl-done-text { color: var(--crema); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }

/* ───────── shared brand icon (SVG mask, recolorable) ───────── */
.wl-ico {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.wl-ico-check {
  width: 14px; height: 14px;
  -webkit-mask-image: url('/icons/check.svg');
  mask-image: url('/icons/check.svg');
}

/* ───────── 3. HOW IT WORKS (core three-step chrome) ───────── */
.wl-how {
  position: relative;
  overflow: hidden;
  background-color: var(--crema);
  color: var(--tierrita);
  padding-top: var(--pad-desk);
  padding-bottom: var(--pad-desk);
}

.wl-how h2 {
  color: var(--clockwork);
  font-size: clamp(1.75rem, 4vw, var(--fs-h2));
  text-align: center;
  margin-bottom: 12px;
}

.wl-how-lead {
  text-align: center;
  color: var(--golden);
  max-width: 40ch;
  margin: 0 auto 48px;
  font-size: var(--fs-sm);
}

.wl-proc {
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}

.wl-proc::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw - 48px, var(--maxw) - 48px);
  top: 35px;
  height: 3px;
  background: linear-gradient(90deg, rgba(var(--clockwork-rgb), 0) 0%, var(--clockwork) 16%, var(--clockwork) 84%, rgba(var(--clockwork-rgb), 0) 100%);
  border-radius: 2px;
  z-index: 0;
}

.wl-proc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}

.wl-proc-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--clockwork);
  color: var(--crema);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wl-proc-circle .wl-ico, .wl-proc-circle .wl-proc-svg { width: 30px; height: 30px; }

.wl-proc-circle .wl-proc-svg { fill: currentColor; }

.wl-proc-label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--clockwork);
  margin-top: 20px;
}

.wl-proc-text {
  color: var(--golden);
  font-size: var(--fs-sm);
  margin-top: 6px;
  max-width: 22ch;
  line-height: 1.5;
}

/* Steps timeline: the connector draws in, then each circle rises in sequence.
   Armed by JS (.is-armed) so a no-JS render shows every step normally. */
.wl-proc.is-armed .wl-proc-col { opacity: 0; transform: translateY(14px); }
.wl-proc.is-armed .wl-proc-col.step-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wl-proc.is-armed::before { transform: translateX(-50%) scaleX(0); transform-origin: left center; }
.wl-proc.is-armed.in::before {
  transform: translateX(-50%) scaleX(1);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Each circle pops in with a little overshoot as its step arrives. */
.wl-proc.is-armed .wl-proc-col .wl-proc-circle { transform: scale(0.4); }
.wl-proc.is-armed .wl-proc-col.step-in .wl-proc-circle { transform: scale(1); }

/* Hover a step: the bubble turns honey, grows a touch, and the step's subtext
   is revealed, while a background image fades in behind the section. Images are
   temporary placeholders set via each column's data-bg. */
.wl-proc-col:hover .wl-proc-circle { background: var(--honey); }
.wl-proc.is-armed .wl-proc-col.step-in:hover .wl-proc-circle,
.wl-proc-col:hover .wl-proc-circle { transform: scale(1.09); }

/* Hide the subtext until hover, but only where a pointer can hover; touch
   devices (no hover) keep it visible so the descriptions are never lost. */
@media (hover: hover) {
  .wl-proc-text {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .wl-proc-col:hover .wl-proc-text { opacity: 1; transform: none; }
}

.wl-how-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.wl-how-bg.is-active { opacity: 1; }
/* Two layers so the image cross-fades between steps instead of hard-cutting. */
.wl-how-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.wl-how-bg-img.is-shown { opacity: 1; }
/* Dark scrim over the images so the section's copy stays readable on hover. */
.wl-how-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(var(--media-rgb), 0.58), rgba(var(--media-rgb), 0.74));
}
.wl-how > .wl-inner { position: relative; z-index: 1; }

/* With the section darkened under the image, its copy flips to cream. */
.wl-how h2,
.wl-how .wl-how-lead,
.wl-how .wl-proc-label,
.wl-how .wl-proc-text { transition: color 0.4s ease; }
.wl-how.is-hovering h2,
.wl-how.is-hovering .wl-how-lead,
.wl-how.is-hovering .wl-proc-label,
.wl-how.is-hovering .wl-proc-text { color: var(--crema); }

/* ───────── VALUE PROP — award-level bento (6 cards) ───────── */
.wl-vp {
  position: relative;
  background-color: var(--clockwork);
  color: var(--crema);
  padding-top: var(--band);
  padding-bottom: var(--band);
}

.wl-vp > .wl-inner { position: relative; z-index: 1; }

.wl-vp h2 {
  font-size: clamp(2rem, 5vw, 2.85rem);
  color: var(--crema);
  text-align: center;
  margin-bottom: 14px;
}

.wl-vp-lead {
  text-align: center;
  color: rgba(var(--crema-rgb), 0.68);
  max-width: 48ch;
  margin: 0 auto 46px;
  font-size: 1.0625rem;
}

.wl-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto;
}

.wl-card {
  position: relative;
  border-radius: 22px;
  padding: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  min-height: 300px;
}

.wl-card h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin-bottom: 10px;
  max-width: 22ch;
}

.wl-card .wl-card-lede {
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 44ch;
}

/* themes — only media / crema / honey backgrounds */
.is-media {
  background: var(--media);
  border: 1px solid rgba(var(--crema-rgb), 0.13);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.9);
}

.is-media h3 { color: var(--crema); }

.is-media .wl-card-lede { color: rgba(var(--crema-rgb), 0.66); }

.is-crema { background: var(--crema); }

.is-crema h3 { color: var(--clockwork); }

.is-crema .wl-card-lede { color: var(--golden); }

.is-honey { background: var(--honey); }

.is-honey h3 { color: var(--crema); }

.is-honey .wl-card-lede { color: rgba(var(--crema-rgb), 0.9); }

/* spans */

.c5 { grid-column: span 5; }

.c6 { grid-column: span 6; }

.c7 { grid-column: span 7; }

/* — Card 1 · Specialist team (client → assistant → team flow) — */
.wl-diagram { position: relative; flex: 1; min-height: 328px; margin-top: 18px; }

.wl-diagram-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.wl-diagram-line {
  fill: none; stroke: rgba(var(--crema-rgb), 0.5); stroke-width: 1.5;
  stroke-dasharray: 3 5; vector-effect: non-scaling-stroke;
  animation: wl-flow 1.1s linear infinite; animation-play-state: paused;
}

.wl-diagram-line.dl-main { stroke: rgba(var(--honey-rgb), 0.85); }

.wl-diagram.in .wl-diagram-line { animation-play-state: running; }

@keyframes wl-flow { to { stroke-dashoffset: -16; } }

.wl-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 88px; text-align: center; z-index: 1;
  opacity: 0; animation: wl-fade .55s ease forwards; animation-play-state: paused;
}

.wl-diagram.in .wl-node { animation-play-state: running; }

.wl-node img, .wl-node-ava { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }

.wl-node img { object-fit: cover; border: 1px solid rgba(var(--crema-rgb), 0.22); background: var(--media-warm); }

.wl-node-lab { font-size: 0.7rem; line-height: 1.2; color: rgba(var(--crema-rgb), 0.72); }

/* client node (top of the flow) */
.wl-node-ava { display: grid; place-items: center; background: var(--crema); color: var(--media); box-shadow: 0 0 0 4px rgba(var(--crema-rgb), 0.1); }

.wl-node-ava svg { width: 24px; height: 24px; }

.wl-node-you .wl-node-lab { color: var(--crema); font-weight: 500; }

/* assistant node (middle, honey pill) */
.wl-node-c {
  flex-direction: row; width: max-content; max-width: none; gap: 11px;
  background: var(--honey); border-radius: 44px; padding: 8px 18px 8px 8px; z-index: 2;
}

.wl-node-c::after {
  content: ""; position: absolute; inset: -6px; border-radius: 48px;
  border: 1.5px solid rgba(var(--honey-rgb), 0.65);
  animation: wl-ring 2.6s ease-out infinite; animation-play-state: paused;
}

.wl-diagram.in .wl-node-c::after { animation-play-state: running; }

.wl-node-c img { width: 52px; height: 52px; border-color: rgba(var(--crema-rgb), 0.5); }

.wl-node-c .wl-node-lab { font-size: 0.9rem; color: var(--crema); font-weight: 500; white-space: nowrap; flex-shrink: 0; }

@keyframes wl-fade { to { opacity: 1; } }

@keyframes wl-ring { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.55); opacity: 0; } }

/* — Card 2 · Top talent (vetting dots) — */
.wl-vet { margin-top: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }

.wl-vet-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; width: 100%; }

.wl-vet-dot {
  aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(var(--crema-rgb), 0.72); background: transparent;
  transition: transform .8s ease, background-color .8s ease, opacity .8s ease, border-color .8s ease;
}

.wl-vet-dot.is-pick { background: var(--crema); border-color: var(--crema); transform: scale(1.14); }

.wl-vet-dot.is-out { opacity: 0.55; transform: scale(0.62); }

.wl-vet-cap { font-size: 0.82rem; color: rgba(var(--crema-rgb), 0.85); }

.wl-vet-cap b { color: var(--crema); font-weight: 500; }

/* — Card 3 · AI workflows (running list) — */
.wl-flowlist { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; }

.wl-flowlist li {
  flex: 1;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(var(--media-rgb), 0.04); border: 1px solid rgba(var(--media-rgb), 0.09);
  opacity: 0.55; transform: translateX(-5px);
  transition: opacity .4s ease, transform .4s ease, background-color .4s ease, border-color .4s ease;
}

.wl-flowlist li.lit { opacity: 1; transform: none; background: rgba(var(--honey-rgb), 0.1); border-color: rgba(var(--honey-rgb), 0.4); }

.wl-flowicon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--media); color: var(--crema); transition: background-color .4s ease, color .4s ease; }

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

.wl-flowlist li.lit .wl-flowicon { background: var(--honey); color: var(--crema); }

.wl-flow-label { font-size: 0.95rem; color: var(--tierrita); font-weight: 500; }

.wl-flow-check { margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--honey); opacity: 0; transition: opacity .3s ease; }

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

.wl-flowlist li.lit .wl-flow-check { opacity: 1; }

/* — Card 4 · Rapid integration (productivity graph) — */
.wl-graph { margin-top: 22px; }

.wl-graph svg { width: 100%; height: auto; display: block; overflow: visible; }

.wl-graph .gaxis { stroke: rgba(var(--crema-rgb), 0.22); stroke-width: 1; }

.wl-graph .ggrid { stroke: rgba(var(--crema-rgb), 0.08); stroke-width: 1; }

.wl-graph .gfull { stroke: rgba(var(--crema-rgb), 0.32); stroke-width: 1; stroke-dasharray: 3 4; }

.wl-graph .garea { fill: rgba(var(--honey-rgb), 0.16); opacity: 0; }

.wl-graph.in .garea { animation: wl-area-loop 6.5s ease-out infinite; }

.wl-graph .gcurve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 660; stroke-dashoffset: 660; }

.wl-graph .gtiempo { stroke: var(--honey); }

.wl-graph .gtrad { stroke: rgba(var(--crema-rgb), 0.42); }

.wl-graph.in .gcurve { animation: wl-draw-curve 6.5s ease-out infinite; }

@keyframes wl-draw-curve {
  0% { stroke-dashoffset: 660; opacity: 0; }
  6% { opacity: 1; }
  50% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes wl-area-loop {
  0%, 12% { opacity: 0; }
  50% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

.wl-graph .glabel { fill: rgba(var(--crema-rgb), 0.5); font-size: 9px; font-family: var(--font-body); }

.wl-graph-legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }

.wl-graph-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: rgba(var(--crema-rgb), 0.7); }

.wl-graph-legend i { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }

.wl-graph-legend .lh { background: var(--honey); }

.wl-graph-legend .lt { background: rgba(var(--crema-rgb), 0.42); }

/* — Card 5 · Locally based (UAE + Gulf neighbours map, full-bleed) — */
/* Fills the card (so no empty gap when the row stretches to the taller
   neighbour), and `meet` + xMidYMid keeps the whole framed UAE, both city
   labels included, centred in view. It never crops the names and never sits
   low; any aspect mismatch shows as a small, symmetric, top-faded margin. */
.wl-map { position: relative; margin: 14px -30px -30px; overflow: hidden; flex: 1; min-height: 240px; }

.wl-map .wl-map-svg { width: 100%; height: 100%; display: block; }

.wl-map .mneighbors path { fill: var(--media); stroke: var(--honey); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }

.wl-map .mland { fill: rgba(var(--honey-rgb), 0.96); stroke: rgba(var(--crema-rgb), 0.42); stroke-width: 0.7; stroke-linejoin: round; }

.wl-map .mpin { fill: var(--crema); }

.wl-map .mring { fill: none; stroke: var(--crema); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; opacity: 0; animation: wl-pin 2.4s ease-out infinite; }

.wl-map .mring.d2 { animation-delay: 1.2s; }

@keyframes wl-pin { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.7); opacity: 0; } }

.wl-map .mlabel { fill: var(--crema); font-size: 9px; font-family: var(--font-body); opacity: 0.92; font-weight: 500; }

.wl-map-gmt { position: absolute; left: 20px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; background: rgba(var(--crema-rgb), 0.1); border: 1px solid rgba(var(--crema-rgb), 0.2); border-radius: 30px; padding: 5px 12px; font-size: 0.72rem; color: var(--crema); }

.wl-map-gmt b { font-weight: 500; }

.wl-map-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--honey); flex-shrink: 0; }

/* Locally-based card: bleed the map up behind the copy so it fills the width.
   `slice` makes it cover the frame at any aspect ratio (no letterbox gap that
   would drop the coast to the bottom on a tall, narrow card); the zoomed UAE
   viewBox stays centred, so cropping the surrounding Gulf is intended. */
.wl-card-map > h3, .wl-card-map > .wl-card-lede { position: relative; z-index: 1; }

.wl-card-map .wl-map {
  z-index: 0;
  /* Soft-fade the map's top edge so it dissolves into the card instead of
     ending on a hard line under the copy. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
}

/* — Card 6 · Embedded support (pros / cons comparison) — */
.wl-compare { margin-top: 20px; flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); column-gap: 18px; row-gap: 12px; align-content: center; }

/* Subgrid so each row (head + the four items) shares a height across both
   columns, keeping "what you get" and "what you skip" aligned even when the
   left column's lines wrap and the right column's do not. */
.wl-compare-col { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; row-gap: 12px; }

.wl-compare-col + .wl-compare-col { border-left: 1px solid rgba(var(--media-rgb), 0.12); padding-left: 18px; }

.wl-compare-head { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }

.wl-compare-head.pos { color: var(--clockwork); }

.wl-compare-head.neg { color: var(--golden); }

.wl-cmp-item { display: flex; align-items: flex-start; gap: 9px; font-size: 0.875rem; line-height: 1.35; color: var(--tierrita); opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }

.wl-cmp-item.show { opacity: 1; transform: none; }

.wl-cmp-ico { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; margin-top: 0; }

.wl-cmp-ico svg { width: 22px; height: 22px; }

.wl-cmp-item.pos .wl-cmp-ico { color: var(--honey); }

.wl-cmp-item.neg .wl-cmp-ico { color: var(--golden); }

.wl-cmp-item.neg .wl-cmp-txt { color: var(--golden); }

@media (prefers-reduced-motion: reduce) {
  .wl-diagram-line, .wl-node, .wl-node-c::after, .wl-map .mring {animation: none !important;}
  .wl-node {opacity: 1 !important;}
  .wl-graph .gcurve {stroke-dashoffset: 0 !important; animation: none !important;}
  .wl-graph .garea {opacity: 1 !important;}
  .wl-cmp-item {opacity: 1 !important; transform: none !important;}
  .wl-proc.is-armed .wl-proc-col {opacity: 1 !important; transform: none !important;}
  .wl-proc.is-armed::before, .wl-proc.is-armed.in::before {transform: translateX(-50%) scaleX(1) !important;}
  /* Kill the JS-driven transitions too, so nothing animates under reduced motion. */
  .wl-slots-fill, .wl-vet-dot, .wl-flowlist li, .wl-cmp-item, .wl-proc-col, .wl-proc-circle, .wl-proc::before {transition: none !important;}
  .wl-slots-fill {animation: none !important;}
  .wl-proc.is-armed .wl-proc-col .wl-proc-circle {transform: scale(1) !important;}
}

/* ───────── 5. TESTIMONIALS (1:1 copy of main site) ───────── */
.values-section {
  --fs-h1: 2.5rem;
  --fs-h3: 1.375rem;
  background-color: var(--red);
  padding: var(--band) var(--pad-x) var(--band);
}

.section-header {
  margin-bottom: 32px;
}

.section-header h2 {
  font-family: 'F37 Bobby', var(--font-body);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.section-header p {
  font-size: var(--fs-body);
  line-height: 1.5;
  font-family: var(--font-body);
  max-width: 480px;
}

.section-header--light h2 { color: var(--crema); }

.section-header--light p  { color: rgba(var(--crema-rgb), 0.7); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.values-card .card-media-wrap {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--cream-500);
}

.values-card .card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: var(--media-mid);
  transition: transform 0.5s var(--ease-out-expo);
}

.values-card video.card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out-expo);
}

.values-card .card-media-wrap:hover .card-media,
.values-card .card-media-wrap:hover video.card-media {
  transform: scale(1.05);
}

.watch-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid rgba(var(--crema-rgb), 0.35);
  border-radius: var(--r-pill);
  color: var(--white);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-top: 12px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  background: transparent;
}

.watch-cta:hover {
  background-color: rgba(var(--crema-rgb), 0.1);
  border-color: rgba(var(--crema-rgb), 0.55);
}

.watch-cta svg {
  width: 12px;
  height: 12px;
  fill: var(--white);
}

.values-card h3 {
  font-size: var(--fs-body);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 2px;
}

.values-card .card-role {
  font-size: var(--fs-xs);
  color: rgba(var(--crema-rgb), 0.6);
  font-family: var(--font-body);
  margin-bottom: 0;
}

.values-card p {
  font-size: var(--fs-body);
  color: var(--white);
  line-height: 1.5;
  font-family: var(--font-body);
  opacity: 0.82;
}

.values-card .card-quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.35;
  color: var(--white);
  opacity: 1;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
}

.card-bottom-row .watch-cta {
  margin-top: 0;
}

/* ───────── 7. FINAL CTA ───────── */
.wl-final {
  background-color: var(--media);
  color: var(--crema);
  padding-top: var(--pad-desk);
  padding-bottom: var(--pad-desk);
  text-align: center;
}

.wl-final h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--crema);
  margin-bottom: 14px;
}

.wl-final-sub {
  color: rgba(var(--crema-rgb), 0.7);
  font-size: 1.0625rem;
  margin-bottom: 30px;
}

.wl-final .wl-form,
.wl-final .wl-done { margin-left: auto; margin-right: auto; }

.wl-final .wl-trust { text-align: center; padding-left: 0; }

.wl-final .wl-error { text-align: center; padding-left: 0; }

a.footer-cta-btn { display: inline-block; background-color: var(--clockwork); color: var(--crema); padding: 10px 26px; border-radius: var(--r-pill); font-size: var(--fs-body); font-family: var(--font-body); text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; transition: transform 0.2s ease; }

/* ───────── Survey modal (opens after Join) ───────── */
.wl-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }

.wl-modal[hidden] { display: none; }

.wl-modal-overlay { position: absolute; inset: 0; background: rgba(18,2,0,0.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: wl-fade-in .25s ease; }

.wl-modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 540px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--clockwork); color: var(--crema);
  border-radius: 22px; padding: 34px 34px 28px;
  box-shadow: 0 30px 90px -24px rgba(0,0,0,0.65);
  animation: wl-modal-in .3s cubic-bezier(0.22,1,0.36,1);
}

@keyframes wl-fade-in { from { opacity: 0; } }

@keyframes wl-modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

.wl-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 28px; line-height: 1; color: rgba(var(--crema-rgb), 0.65); cursor: pointer; padding: 4px 8px; transition: color .2s; }

.wl-modal-close:hover { color: var(--crema); }

.wl-modal-title { font-size: clamp(1.5rem, 4vw, 1.9rem); color: var(--crema); margin-bottom: 8px; }

.wl-modal-sub { font-size: var(--fs-sm); color: rgba(var(--crema-rgb), 0.8); margin-bottom: 22px; max-width: 44ch; }

.wl-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wl-field-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--crema); font-weight: 500; min-width: 0; }

.wl-field-label[hidden] { display: none; }

.wl-req { color: var(--crema); font-weight: 600; margin-left: 1px; }

.wl-modal-full { grid-column: 1 / -1; }

.wl-field-label input, .wl-field-label select, .wl-field-label textarea {
  font-family: inherit; font-size: 0.95rem; color: var(--clockwork); font-weight: 400;
  background: var(--crema); border: 1px solid rgba(var(--crema-rgb), 0.28);
  border-radius: 10px; padding: 10px 12px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}

.wl-field-label input::placeholder, .wl-field-label textarea::placeholder { color: rgba(var(--media-rgb), 0.4); }

.wl-field-label input:focus, .wl-field-label select:focus, .wl-field-label textarea:focus { outline: none; border-color: var(--honey); box-shadow: 0 0 0 3px rgba(var(--honey-rgb), 0.35); }

.wl-field-label textarea { resize: vertical; min-height: 46px; }

/* Custom dropdown — replaces the native (Mac) select menu; crema box, clockwork chevron */
.wl-cselect { position: relative; min-width: 0; }

.wl-cselect-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font-family: inherit; font-size: 0.95rem;
  color: var(--clockwork); font-weight: 400;
  background: var(--crema); border: 1px solid rgba(var(--crema-rgb), 0.28);
  border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.wl-cselect-btn:hover { border-color: rgba(var(--honey-rgb), 0.55); }

.wl-cselect.is-open .wl-cselect-btn, .wl-cselect-btn:focus-visible { outline: none; border-color: var(--honey); box-shadow: 0 0 0 3px rgba(var(--honey-rgb), 0.35); }

.wl-cselect-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wl-cselect-label.is-placeholder { color: rgba(var(--media-rgb), 0.42); }

.wl-cselect-chevron { flex-shrink: 0; width: 15px; height: 15px; color: var(--clockwork); display: inline-flex; transition: transform .2s; }

.wl-cselect-chevron svg { width: 100%; height: 100%; display: block; }

.wl-cselect.is-open .wl-cselect-chevron { transform: rotate(180deg); }

.wl-cselect-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  background: var(--crema); border: 1px solid rgba(var(--media-rgb), 0.12);
  border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(0,0,0,0.55);
  max-height: 210px; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}

.wl-cselect-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

.wl-cselect.drop-up .wl-cselect-list { top: auto; bottom: calc(100% + 6px); }

.wl-cselect-opt {
  padding: 9px 11px; border-radius: 8px; font-size: 0.92rem; color: var(--tierrita);
  cursor: pointer; outline: none; transition: background-color .15s, color .15s;
}

.wl-cselect-opt.is-placeholder { color: rgba(var(--media-rgb), 0.45); }

.wl-cselect-opt:hover, .wl-cselect-opt.is-active, .wl-cselect-opt:focus { background: rgba(var(--clockwork-rgb), 0.4); }

.wl-cselect-opt[aria-selected="true"] { font-weight: 500; }

.wl-modal-actions { display: flex; align-items: center; gap: 18px; margin-top: 22px; }

.wl-modal-submit { background-color: var(--honey); color: var(--crema); }

/* Skipping is a real, visible choice: the signup is already saved by the
   time this modal opens, so the survey must never look mandatory. Quiet
   text button, not a second pill, so it never competes with Send. */
.wl-modal-skip {
  background: none;
  white-space: nowrap;
  border: none;
  padding: 6px 2px;
  font: inherit;
  font-size: var(--fs-sm);
  color: rgba(var(--crema-rgb), 0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s;
}

.wl-modal-skip:hover, .wl-modal-skip:focus-visible { color: var(--crema); }

.wl-modal-skip:disabled { opacity: 0.45; cursor: default; text-decoration: none; }

.wl-modal-error { text-align: left; padding-left: 2px; margin-top: 12px; color: #FBD3C6; }

@media (max-width: 560px) {
  .wl-modal-dialog {padding: 26px 22px 22px;}
  .wl-modal-grid {grid-template-columns: 1fr;}
  /* Side by side, the pill leaves the skip link a two-word column.
     Stack them: full-width Send, skip centred underneath. */
  .wl-modal-actions {flex-direction: column; align-items: stretch; gap: 10px;}
  .wl-modal-submit {width: 100%;}
  .wl-modal-skip {text-align: center;}
}

@media (max-width: 900px) {
  .wl-bento {gap: 14px;}
  .c7 {grid-column: 1 / -1;}
  .c5, .c6 {grid-column: span 6;}
}

@media (max-width: 1080px) {
  .wl-hero-grid,
  .hv-4 .wl-hero-grid {grid-template-columns: 1fr; gap: 40px;}
  .wl-hero-media {order: -1; width: 100%; aspect-ratio: auto; height: clamp(300px, 44vw, 460px);}
  .wl-hero-copy {text-align: center; display: flex; flex-direction: column; align-items: center;}
  .wl-hero h1 {max-width: 20ch;}
  .wl-hero-sub {max-width: 46ch; margin-left: auto; margin-right: auto;}
  .wl-form {margin-left: auto; margin-right: auto;}
  .wl-trust, .wl-error {padding-left: 0; text-align: center;}
  .wl-slots, .hv-4 .wl-slots {max-width: none; width: 100%; margin-left: auto; margin-right: auto;}
  .wl-proof {justify-content: center;}
}

@media (max-width: 680px) {
  /* --pad-desk drops here; it was a :root override in the original,
     which would now leak into the shared modules. */
  body.page-waitlist { --pad-desk: 40px; }
  .wl-inner {padding-left: 20px; padding-right: 20px;}
  .wl-hero {padding-top: 40px;}
  .wl-proc {max-width: 420px;}
  .wl-proc-circle {width: 60px; height: 60px;}
  .wl-proc-circle .wl-ico, .wl-proc-circle .wl-proc-svg {width: 26px; height: 26px;}
  .wl-proc::before {top: 29px; width: min(100vw - 40px, var(--maxw) - 40px);}
  .wl-proc-label {font-size: 1.2rem;}
  .wl-bento {grid-template-columns: 1fr;}
  .c5, .c6, .c7 {grid-column: 1 / -1;}
  .wl-card {padding: 26px 22px; min-height: 0;}
  .wl-diagram {min-height: 296px;}
  .wl-node {width: 56px; gap: 5px;}
  .wl-node img, .wl-node-ava {width: 40px; height: 40px;}
  .wl-node-lab {font-size: 0.58rem;}
  .wl-node-c {gap: 8px; padding: 6px 14px 6px 6px; width: max-content;}
  .wl-node-c img {width: 44px; height: 44px;}
  .wl-node-c .wl-node-lab {font-size: 0.8rem;}
  .wl-compare {gap: 14px;}
  .wl-compare-col + .wl-compare-col {padding-left: 14px;}
  .wl-field {flex-wrap: wrap; border-radius: 18px;}
  .wl-input {flex: 1 1 100%; text-align: left;}
  .wl-btn {flex: 1 1 100%; padding: 14px 24px;}
}

@media (min-width: 768px) and (max-width: 1024px) {
  .values-grid {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 767px) {
  .values-grid {grid-template-columns: 1fr; gap: 20px;}
}

@media (max-width: 430px) {
  .values-section {padding: var(--band-sm) var(--pad-x);}
}

@media (prefers-reduced-motion: reduce) {
  .wl-btn:hover {transform: none;}
}