/* =========================================================
   Where's My Toaster | marketing site
   Layout: cream ground, near-black type, one red accent per
   section. Condensed all-caps display over a humanist sans.
   Brand-locked: Cream #FFF2E6 · Near-black #231F20 · Red #BE1E2D
   Font: Avenir Next (licensed) with Nunito Sans / Barlow
   Condensed as Google Fonts fallbacks.
   ========================================================= */

/* Self-hosted fallbacks (OFL). If WMT has an Avenir Next web license, add its @font-face here; it is first in both stacks. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --wmt-cream: #FFF2E6;
  --wmt-paper: #F8E7D7;          /* one step deeper cream for alternating bands */
  --wmt-white: #FFFFFF;
  --wmt-ink: #231F20;
  --wmt-red: #BE1E2D;
  --wmt-red-dark: #9E1825;
  --wmt-gold: #D9BA6E;           /* Toast Bucks only */
  --wmt-muted: #5E5557;
  --wmt-muted-light: #CDBFB3;
  --wmt-line: rgba(35, 31, 32, 0.14);
  --wmt-line-light: rgba(255, 242, 230, 0.16);

  --wmt-font-display: "Avenir Next Condensed", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --wmt-font-body: "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --wmt-radius-sm: 14px;
  --wmt-radius: 24px;
  --wmt-radius-lg: 32px;
  --wmt-section-y: clamp(72px, 10vw, 128px);
  --wmt-ease: cubic-bezier(.2, .7, .2, 1);

  /* Bootstrap hooks */
  --bs-body-bg: var(--wmt-cream);
  --bs-body-color: var(--wmt-ink);
  --bs-body-font-family: var(--wmt-font-body);
  --bs-link-color-rgb: 35, 31, 32;
  --bs-link-hover-color-rgb: 190, 30, 45;
  --bs-border-color: var(--wmt-line);
  --bs-focus-ring-color: rgba(190, 30, 45, .35);
  color-scheme: light;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--wmt-cream);
  color: var(--wmt-ink);
  font-family: var(--wmt-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--wmt-red); outline-offset: 3px; }

.container-xl {
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

.wmt-skip { position: absolute; left: 16px; top: 8px; z-index: 2000; background: var(--wmt-ink); color: var(--wmt-cream); padding: 10px 16px; border-radius: 999px; }

/* ---------- Type ---------- */
.wmt-display {
  font-family: var(--wmt-font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.005em;
  text-wrap: balance;
  margin: 0;
}
.wmt-h2 { font-size: clamp(48px, 6.4vw, 88px); }
.wmt-h3 { font-size: clamp(36px, 4.2vw, 56px); }
.wmt-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wmt-muted);
}
.wmt-eyebrow--light { color: var(--wmt-cream); }
.wmt-eyebrow--gold { color: var(--wmt-gold); }
.wmt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wmt-red); }
.wmt-lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: #4A4244; max-width: 34em; margin: 24px 0 0; }
.wmt-body { font-size: 18px; line-height: 1.6; color: #4A4244; max-width: 34em; margin: 20px 0 0; }
.wmt-body--light { color: var(--wmt-muted-light); }
.wmt-fine { font-size: 14px; color: var(--wmt-muted); margin: 14px 0 0; }
.wmt-fine--light { color: var(--wmt-muted-light); }

/* ---------- Buttons ---------- */
.wmt-btn {
  --bs-btn-padding-x: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: 16px; letter-spacing: .01em;
  transition: background-color .2s, color .2s, transform .2s var(--wmt-ease);
  white-space: nowrap;
}
.wmt-btn:active { transform: translateY(1px); }
.wmt-btn--red { background: var(--wmt-red); color: var(--wmt-white); }
.wmt-btn--red:hover, .wmt-btn--red:focus-visible { background: var(--wmt-red-dark); color: var(--wmt-white); }
.wmt-btn--cream { background: var(--wmt-cream); color: var(--wmt-ink); }
.wmt-btn--cream:hover, .wmt-btn--cream:focus-visible { background: var(--wmt-white); color: var(--wmt-ink); }

/* ---------- Nav ---------- */
.wmt-nav {
  top: env(safe-area-inset-top, 0px);
  background: transparent;
  border-bottom: 1px solid transparent;
  padding-block: 14px;
  transition: border-color .25s, padding .25s;
}
/* blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed offcanvas inside it */
.wmt-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 242, 230, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 1030; background: var(--wmt-cream); }
.wmt-nav.is-scrolled { border-bottom-color: var(--wmt-line); padding-block: 8px; }
.wmt-nav__logo { width: clamp(170px, 18vw, 220px); height: auto; display: block; }
.wmt-nav .nav-link { font-weight: 800; font-size: 13.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--wmt-ink); padding-inline: 10px !important; }
.wmt-nav .nav-link:hover { color: var(--wmt-red); }
.wmt-nav__toggle { border: 0; width: 44px; height: 44px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; box-shadow: none !important; }
.wmt-nav__toggle span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--wmt-ink); }
.wmt-offcanvas { background: var(--wmt-cream); }
.wmt-offcanvas .offcanvas-body { align-items: center; }
@media (max-width: 991.98px) {
  .wmt-offcanvas .offcanvas-body { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .wmt-offcanvas .nav-link { font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: 1.1; }
}

/* HERO: see "HERO (Anjali)" block further down */

/* ---------- Signup ---------- */
.wmt-signup {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 540px; margin-top: 32px; padding: 7px;
  background: var(--wmt-white);
  border: 1.5px solid var(--wmt-line);
  border-radius: 999px;
  transition: border-color .2s;
}
.wmt-signup:focus-within { border-color: var(--wmt-ink); }
.wmt-signup .form-control { flex: 1 1 200px; min-width: 0; min-height: 52px; border: 0; background: transparent; padding: 0 18px; font-size: 16px; box-shadow: none; }
.wmt-signup .form-control::placeholder { color: #8A7F80; }
.wmt-signup__msg { position: absolute; left: 24px; top: calc(100% + 10px); margin: 0; font-size: 14px; font-weight: 700; }
.wmt-signup__msg.is-error { color: var(--wmt-red); }
.wmt-signup.is-done .form-control, .wmt-signup.is-done .btn { opacity: .5; pointer-events: none; }
.wmt-signup--center { margin-inline: auto; }
.wmt-signup--center .wmt-signup__msg { left: 0; right: 0; text-align: center; }
@media (max-width: 575.98px) {
  .wmt-signup { border-radius: 26px; }
  .wmt-signup .btn { flex: 1 1 100%; }
}

/* =========================================================
   PARALLAX CARD (shared by hero + Toast Bucks)
   Layer stack, back to front:
     photo  (bg plate)      moves with the tilt, far plane
     type   (headline)      floats forward, moves against it
     photo  (subject cut)   same plane as bg, so it sits IN FRONT of the type
     ui     (logo, label)   fixed to the card face
   JS writes --mx/--my (-1..1) and --rx/--ry (deg) on .wmt-card.
   ========================================================= */
.wmt-card {
  --mx: 0; --my: 0; --rx: 0deg; --ry: 0deg; --rot: 0deg; --lift: 0px;
  --sx: 50%; --sy: 30%; --sheen: 0;
  container-type: inline-size;
  margin: 0;
  transform: rotate(var(--rot)) translateY(var(--lift));
  transition: transform .5s var(--wmt-ease);
}
.wmt-card__inner {
  position: relative;
  aspect-ratio: 1600 / 1009;
  border-radius: 4.6cqw;
  overflow: hidden;
  background: #1a1516;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  box-shadow:
    0 2px 4px rgba(35, 31, 32, .10),
    calc(var(--ry) * -1.2) calc(26px + var(--rx) * 1.2) 60px rgba(35, 31, 32, .28);
  will-change: transform;
}
.wmt-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none; user-select: none;
}
.wmt-layer--photo { transform: translate3d(calc(var(--mx) * -1.7%), calc(var(--my) * -1.4%), 0) scale(1.07); }
.wmt-layer--type  { transform: translate3d(calc(var(--mx) * 1.3%),  calc(var(--my) * 1.1%), 0); }
.wmt-layer--ui    { transform: none; }

.wmt-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--sx) var(--sy), rgba(255, 246, 232, .55), rgba(255, 246, 232, 0) 46%);
  mix-blend-mode: soft-light;
  opacity: var(--sheen);
  transition: opacity .4s;
}

/* Live amount, drawn over the card face (amounts are dynamic) */
.wmt-amount {
  position: absolute; bottom: 4.4%;
  font-family: var(--wmt-font-display);
  font-weight: 800; line-height: .82;
  font-size: 9.4cqw;
  letter-spacing: -.01em;
  display: inline-flex; align-items: flex-start; gap: .04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.wmt-amount b { font-weight: 800; }
.wmt-amount i { font-style: normal; font-size: .48em; margin-top: .05em; }
.wmt-amount--right { right: 5.25%; }
.wmt-amount--left { left: 5.25%; }
.wmt-amount--ink { color: var(--wmt-ink); }
.wmt-amount--gold {
  background: linear-gradient(100deg, #FAEAB0 0%, #DEB45C 30%, #FCE8A0 50%, #BA8A36 72%, #E8C470 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.wmt-amount.is-big { font-size: 8cqw; }

/* ---------- Ticker ---------- */
.wmt-ticker { background: var(--wmt-ink); color: var(--wmt-cream); overflow: hidden; padding-block: 18px; }
.wmt-ticker__track { display: flex; width: max-content; animation: wmt-ticker 48s linear infinite; }
.wmt-ticker:hover .wmt-ticker__track { animation-play-state: paused; }
.wmt-ticker__list { display: flex; margin: 0; padding: 0; list-style: none; }
.wmt-ticker__list li {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding-inline: 28px;
  font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase;
  font-size: 26px; line-height: 1; white-space: nowrap;
}
.wmt-ticker__list li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wmt-red); margin-left: 28px; align-self: center; }
.wmt-ticker__list em {
  font-style: normal; font-family: var(--wmt-font-body); font-size: 12px; font-weight: 800; letter-spacing: .14em;
  padding: 5px 10px; border: 1.5px solid var(--wmt-line-light); border-radius: 999px; color: var(--wmt-muted-light);
  transform: translateY(-3px);
}
@keyframes wmt-ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.wmt-section { padding-block: var(--wmt-section-y); }
.wmt-section--paper { background: var(--wmt-paper); }
.wmt-section--ink { background: var(--wmt-ink); color: var(--wmt-cream); }
.wmt-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 760px; }
.wmt-head--split { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; }
.wmt-head--split > div { max-width: 720px; min-width: 0; }
.wmt-head__aside { margin: 0; max-width: 360px; font-size: 17px; color: #4A4244; }

/* How it works */
.wmt-steps { margin: 0; }
.wmt-step {
  height: 100%;
  background: var(--wmt-white);
  border-radius: var(--wmt-radius);
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.wmt-step__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.wmt-step__num { font-family: var(--wmt-font-display); font-weight: 800; font-size: 56px; line-height: .8; color: var(--wmt-line); -webkit-text-stroke: 1.5px var(--wmt-ink); color: transparent; }
.wmt-step h3, .wmt-feature h3 { font-size: 22px; font-weight: 800; margin: 0; }
.wmt-step p, .wmt-feature p { margin: 0; color: #4A4244; font-size: 16px; }

/* =========================================================
   PARALLAX SCENE (scroll-driven)
   bg plate and subject cut share one speed so they stay locked;
   the live headline moves at its own speed between them.
   ========================================================= */
.wmt-scene { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
.wmt-scene__frame {
  --p: 0; --mx: 0; --my: 0; --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 30%; --sheen: 0;
  position: relative;
  /* Pointer tilt, same engine as the crew cards, toned down for a full-width band */
  transform: perspective(1600px) rotateX(calc(var(--rx) * .35)) rotateY(calc(var(--ry) * .3));
  box-shadow: calc(var(--ry) * -1.5) calc(30px + var(--rx) * 1.5) 70px -30px rgba(35, 31, 32, .45);
  transition: box-shadow .3s;
  container-type: inline-size;
  height: clamp(540px, 58vw, 860px);
  border-radius: clamp(20px, 3vw, 40px);
  overflow: hidden;
  background: #2b2522;
  isolation: isolate;
}
.wmt-scene__layer {
  position: absolute; left: -3%; right: auto; top: -9%;
  width: 106%; height: 118%; max-width: none;
  object-fit: cover; object-position: 50% 40%;
  /* scroll drift (--p) + pointer drift (--mx/--my): photo and cutout move against the mouse */
  transform: translate3d(calc(var(--mx) * -1.6%), calc(var(--p) * var(--speed, .1) * -100px + var(--my) * -12px), 0);
  will-change: transform;
  user-select: none;
}
.wmt-scene__title {
  position: absolute; left: 3.6%; top: 7%;
  margin: 0;
  font-family: var(--wmt-font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: 21cqw; line-height: .8; letter-spacing: -.01em;
  color: var(--wmt-red);
  white-space: nowrap;
  /* the headline moves with the mouse, so it slides behind her as the photo moves the other way */
  transform: translate3d(calc(var(--mx) * 2.4%), calc(var(--p) * var(--speed, .3) * -100px + var(--my) * 16px), 0);
  will-change: transform;
}
.wmt-scene .wmt-sheen { z-index: 2; }
.wmt-scene__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 16, 0) 52%, rgba(20, 16, 16, .78) 100%); pointer-events: none; }
.wmt-scene__copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 6px), 0);
  padding: clamp(24px, 4vw, 56px);
  color: var(--wmt-cream);
  max-width: 640px;
}
.wmt-scene__text { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; margin: 0 0 24px; }
@media (max-width: 767.98px) {
  .wmt-scene__frame { height: 150vw; max-height: 760px; }
  .wmt-scene__layer { object-position: 58% 50%; }
  .wmt-scene__title { font-size: 30cqw; top: 6%; white-space: normal; width: 90%; }
}

/* Registry categories */
.wmt-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(64px, 8vw, 104px); }
.wmt-cats li {
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 20px;
  background: var(--wmt-white);
  border: 1.5px solid transparent;
  border-radius: 20px;
  font-weight: 800; font-size: 16px;
  transition: transform .3s var(--wmt-ease), border-color .3s;
}
.wmt-cats li:hover { transform: translateY(-4px); border-color: var(--wmt-ink); }
@media (max-width: 1199.98px) { .wmt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .wmt-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wmt-cats li { padding: 18px 14px; font-size: 14px; } }
@media (max-width: 359.98px)  { .wmt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wmt-ticks { margin: 28px 0 0; display: grid; gap: 14px; }
.wmt-ticks li { display: flex; align-items: center; gap: 14px; font-weight: 700; }

.wmt-fund {
  background: var(--wmt-white);
  border-radius: var(--wmt-radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 30px 60px -20px rgba(35, 31, 32, .22);
  display: grid; gap: 20px;
  max-width: 520px; margin-inline: auto;
}
.wmt-fund__head { display: flex; gap: 16px; align-items: center; }
.wmt-fund__label { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wmt-muted); display: flex; gap: 8px; align-items: center; }
.wmt-fund__name { margin: 2px 0 0; font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase; font-size: 34px; line-height: .95; }
.wmt-tag { font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border-radius: 999px; background: var(--wmt-cream); color: var(--wmt-muted); }
.wmt-fund__bar { height: 12px; border-radius: 999px; background: var(--wmt-cream); overflow: hidden; }
.wmt-fund__bar span { display: block; height: 100%; border-radius: inherit; background: var(--wmt-red); transform-origin: left; }
.wmt-fund__nums { display: flex; justify-content: space-between; font-size: 15px; color: var(--wmt-muted); font-variant-numeric: tabular-nums; }
.wmt-fund__nums b { color: var(--wmt-ink); font-size: 20px; }
.wmt-fund__feed { margin: 0; display: grid; gap: 10px; border-top: 1px dashed var(--wmt-line); padding-top: 18px; font-size: 15px; }
.wmt-fund__feed span { display: block; color: var(--wmt-muted); }

/* Toast Bucks */
.wmt-section--ink .wmt-h2 { color: var(--wmt-cream); }
.wmt-amounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.wmt-pill {
  min-height: 44px; padding: 0 15px; border-radius: 999px;
  background: transparent; color: var(--wmt-cream);
  border: 1.5px solid var(--wmt-line-light);
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s, border-color .2s;
}
.wmt-pill:hover { border-color: var(--wmt-cream); }
.wmt-pill[aria-pressed="true"] { background: var(--wmt-gold); border-color: var(--wmt-gold); color: var(--wmt-ink); }
/* FAQ */
.wmt-faq { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--wmt-line); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--wmt-ink); }
.wmt-faq .accordion-item { border-width: 0 0 1px; border-radius: 0 !important; }
.wmt-faq .accordion-item:first-child { border-top-width: 1px; }
.wmt-faq .accordion-button { padding: 24px 0; font-size: clamp(18px, 1.7vw, 21px); font-weight: 800; color: var(--wmt-ink); background: transparent; box-shadow: none; }
.wmt-faq .accordion-button:focus-visible { outline: 2px solid var(--wmt-red); outline-offset: 4px; }
.wmt-faq .accordion-button::after {
  background-image: none; content: "+"; width: auto; height: auto;
  font-family: var(--wmt-font-body); font-weight: 400; font-size: 32px; line-height: 1; color: var(--wmt-red);
  transition: transform .25s var(--wmt-ease);
}
.wmt-faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.wmt-faq .accordion-body { padding: 0 48px 26px 0; font-size: 17px; color: #4A4244; }

/* Close */
.wmt-close { padding-block: clamp(96px, 12vw, 160px); text-align: center; }
.wmt-close__title { font-size: clamp(64px, 11vw, 168px); max-width: 1100px; margin-inline: auto; }
.wmt-close .wmt-lede { margin-inline: auto; }

/* Footer */
.wmt-footer { background: var(--wmt-ink); color: var(--wmt-muted-light); padding-block: 72px 32px; font-size: 15px; }
.wmt-footer__logo { width: 210px; height: auto; display: block; }
.wmt-footer__tag { margin: 20px 0 0; max-width: 30em; }
.wmt-footer__h { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wmt-cream); }
.wmt-footer__links { margin: 0; display: grid; gap: 10px; }
.wmt-footer__links a { color: var(--wmt-muted-light); text-decoration: none; overflow-wrap: anywhere; }
.wmt-footer__links a:hover { color: var(--wmt-cream); }
.wmt-footer__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--wmt-line-light); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; }

/* Reveal on scroll (content is visible at rest; JS only adds the motion) */
.wmt-reveal { transition: opacity .8s var(--wmt-ease), transform .8s var(--wmt-ease); }
.wmt-reveal.is-pending { opacity: 0; transform: translateY(24px); }

/* =========================================================
   HERO (Anjali)
   Stack: bg photo -> live headline on the wall -> fg cutout
   (headboard, bed, Anjali). JS writes:
     --p   scroll progress (-1..1) for vertical drift
     --hx/--hy  pointer position (-1..1)
   Each layer reads its own --speed (scroll) and --depth (pointer px).
   ========================================================= */
.wmt-hero { position: relative; overflow: clip; background: var(--wmt-cream); }
/* Scroll: the photo drifts down at half speed (--pin) and dims (--shade)
   while the full-width cream sheet below slides up over it. */
.wmt-hero__frame { transform: translate3d(0, var(--pin, 0px), 0); z-index: 0; }
.wmt-hero__frame::after { content: ""; position: absolute; inset: 0; z-index: 4; background: var(--wmt-ink); opacity: var(--shade, 0); pointer-events: none; }
.wmt-hero__sheet {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(28px, 3vw, 44px));
  background: var(--wmt-cream);
  border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0;
  box-shadow: 0 -24px 60px -30px rgba(35, 31, 32, .45);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.wmt-hero + .wmt-ticker { position: relative; z-index: 2; }
.wmt-hero__frame {
  --p: 0; --hx: 0; --hy: 0;
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* never taller than the screen under the nav, so the pager and the voice
     cards always land above the fold (the photo crops instead) */
  max-height: calc(100vh - var(--wmt-nav-h, 81px));
  max-height: calc(100svh - var(--wmt-nav-h, 81px));
  max-width: 100%;
  overflow: hidden;
  background: #EFE2D4;
  isolation: isolate;
}
.wmt-hero__layer {
  position: absolute; inset: -3% -2%;
  width: 104%; height: 106%; max-width: none;
  object-fit: cover; object-position: 50% 40%;
  transform: translate3d(calc(var(--hx) * var(--depth, 0) * 1px), calc(var(--p) * var(--speed, 0) * -100px + var(--hy) * var(--depth, 0) * 1px), 0);
  will-change: transform;
  user-select: none; pointer-events: none;
}
.wmt-hero__type {
  position: absolute; left: 6.5%; right: 6%; top: 2.6%;
  z-index: 1;
  transform: translate3d(calc(var(--hx) * var(--depth, 0) * 1px), calc(var(--p) * var(--speed, 0) * -100px + var(--hy) * var(--depth, 0) * 1px), 0);
  will-change: transform;
}
.wmt-hero__eyebrow { margin-bottom: .8cqw; font-size: clamp(11px, .9cqw, 14px); }
.wmt-hero__title {
  margin: 0;
  font-family: var(--wmt-font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: 4.35cqw; line-height: .88; letter-spacing: -.005em;
  color: var(--wmt-ink);
}
.wmt-hero__title span { display: block; color: var(--wmt-red); }
.wmt-hero__layer--fg { z-index: 2; }
.wmt-voice--hero { position: absolute; right: 3%; bottom: calc(clamp(28px, 3vw, 44px) + 18px); z-index: 3; max-width: 360px; }
/* ---------- Hero slides ----------
   Stacked slides; the active one fades in, its headline rises in,
   then the creator's voice card. Each creator gets her own layout. */
.wmt-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.wmt-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }
.wmt-hero__slide .wmt-hero__eyebrow,
.wmt-hero__slide .wmt-hero__title,
.wmt-hero__slide .wmt-hero__title span,
.wmt-hero__slide .wmt-voice--hero { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .5s ease, transform .5s ease; }
.wmt-hero__slide.is-active .wmt-hero__eyebrow,
.wmt-hero__slide.is-active .wmt-hero__title,
.wmt-hero__slide.is-active .wmt-hero__title span,
.wmt-hero__slide.is-active .wmt-voice--hero { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.wmt-hero__slide.is-active .wmt-hero__eyebrow { transition-delay: .15s; }
.wmt-hero__slide.is-active .wmt-hero__title { transition-delay: .25s; }
.wmt-hero__slide.is-active .wmt-hero__title span { transition-delay: .45s; }
.wmt-hero__slide.is-active .wmt-voice--hero { transition-delay: .8s; }

/* One headline treatment on every slide: same size, same weight, solid red
   punchline. Only placement changes per photo so the type never covers the creator. */
.wmt-hero__slide .wmt-hero__title { font-size: 3.2cqw; }
.wmt-hero__slide .wmt-hero__title span { font-size: 1.55em; line-height: .86; margin-top: .06em; color: var(--wmt-red); -webkit-text-stroke: 0; }

/* Sunny: headline right-aligned on the empty wall */
.wmt-hero__slide--sunny .wmt-hero__type { left: 38%; right: 4.5%; top: 4%; text-align: right; }
.wmt-hero__slide--sunny .wmt-hero__eyebrow { justify-content: flex-end; }

/* Malik: headline right-aligned over the windows */
.wmt-hero__slide--malik .wmt-hero__type { left: 42%; right: 5%; top: 6%; text-align: right; }
.wmt-hero__slide--malik .wmt-hero__eyebrow { justify-content: flex-end; }

/* Real set: no cutouts, so a soft cream light sits behind the headline side */
.wmt-hero__slide--r .wmt-hero__type { left: 42%; right: 5%; top: 6%; text-align: right; }
.wmt-hero__slide--r .wmt-hero__eyebrow { justify-content: flex-end; }
.wmt-hero__slide--l .wmt-hero__type { left: 5.5%; right: 42%; top: 8%; }
.wmt-hero__slide--real::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 50% at 80% 18%, rgba(255, 242, 230, .85) 0%, rgba(255, 242, 230, .55) 45%, rgba(255, 242, 230, 0) 75%);
}
.wmt-hero__slide--real.wmt-hero__slide--l::before { background: radial-gradient(ellipse 58% 50% at 20% 20%, rgba(255, 242, 230, .85) 0%, rgba(255, 242, 230, .55) 45%, rgba(255, 242, 230, 0) 75%); }
.wmt-hero__slide--real .wmt-hero__type { z-index: 2; }

/* Simone: headline stacked on the open sky */
.wmt-hero__slide--simone .wmt-hero__type { left: 5.5%; right: 42%; top: 10%; }
.wmt-hero__slide--simone .wmt-voice--hero { right: auto; left: 5.5%; }

/* Grant: headline right-aligned on the open sky over the skyline */
.wmt-hero__slide--grant .wmt-hero__type { left: 42%; right: 5%; top: 6%; text-align: right; }
.wmt-hero__slide--grant .wmt-hero__eyebrow { justify-content: flex-end; }

/* Controls: the pager and the set toggle sit together, centered over the photo */
.wmt-hero__controls {
  position: absolute; z-index: 5;
  left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(28px, 3vw, 44px) + 18px);
  display: flex; align-items: center; gap: 10px;
}
.wmt-hero__sets {
  display: flex; padding: 4px; gap: 2px;
  background: rgba(255, 242, 230, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 12px 30px -16px rgba(35, 31, 32, .5);
}
.wmt-hero__set {
  border: 0; border-radius: 999px; padding: 7px 13px;
  background: transparent; color: var(--wmt-ink);
  font: 700 12px/1 var(--wmt-font-body, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .25s, color .25s;
}
.wmt-hero__set:hover { background: rgba(35, 31, 32, .08); }
.wmt-hero__set[aria-pressed="true"] { background: var(--wmt-ink); color: var(--wmt-cream); }
.wmt-hero__set:focus-visible { outline: 2px solid var(--wmt-red); outline-offset: 2px; }
/* Pager: one avatar per slide, progress fills under the active one */
.wmt-hero__pager {
  --interval: 7000ms;
  position: relative;
  display: flex; gap: 10px; padding: 6px;
  background: rgba(255, 242, 230, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 12px 30px -16px rgba(35, 31, 32, .5);
}
.wmt-hero__dot {
  position: relative; width: 40px; height: 40px; padding: 0;
  border: 2px solid transparent; border-radius: 50%;
  background: none; cursor: pointer; overflow: hidden;
  opacity: .55; transition: opacity .3s, border-color .3s, transform .3s;
}
.wmt-hero__dot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: block; }
.wmt-hero__dot:hover { opacity: .9; }
.wmt-hero__dot.is-active { opacity: 1; border-color: var(--wmt-red); transform: scale(1.08); }
/* Timer: a red wash rises inside the active avatar (masked to the circle,
   multiplied so her face still shows through). At 100% the slide changes
   and the wash on the old avatar fades out instead of snapping off. */
.wmt-hero__dot i {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(to top, rgba(190, 30, 45, .78), rgba(190, 30, 45, .55) 85%, rgba(190, 30, 45, .25));
  mix-blend-mode: multiply;
  transform: translate3d(0, 101%, 0);
  pointer-events: none;
}
.wmt-hero__dot.is-active.is-timing i { animation: wmt-hero-timer var(--interval) linear forwards; }
.wmt-hero__frame.is-paused .wmt-hero__dot i { animation-play-state: paused; }
.wmt-hero__dot i.is-leaving { animation: none !important; transition: opacity .7s ease; opacity: 0; }
@keyframes wmt-hero-timer { from { transform: translate3d(0, 101%, 0); } to { transform: translate3d(0, 0, 0); } }

.wmt-hero__below { padding-top: clamp(28px, 3.5vw, 44px); }
.wmt-hero__below .wmt-lede { margin: 0; font-size: clamp(20px, 1.9vw, 26px); color: var(--wmt-ink); font-weight: 600; max-width: 26em; }
.wmt-hero__below .wmt-signup { margin-top: 0; }
@media (max-width: 767.98px) {
  .wmt-hero__frame { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--wmt-cream); overflow: visible; }
  .wmt-hero__type { position: relative; left: auto; right: auto; top: auto; padding: 8px max(24px, env(safe-area-inset-left, 0px)) 22px; order: -1; }
  .wmt-hero__title { font-size: clamp(46px, 13.5vw, 64px); }
  .wmt-hero__eyebrow { font-size: 12px; margin-bottom: 14px; }
  .wmt-hero__layer { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3.6; object-position: 50% 62%; }
  .wmt-hero__layer--fg { display: none; }
  .wmt-voice--hero { position: relative; right: auto; bottom: auto; margin: -36px 16px 0; max-width: none; }
  .wmt-hero__frame { display: grid; }
  .wmt-hero__slide { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; }
  .wmt-hero__slide .wmt-hero__type { left: auto; right: auto; top: auto; text-align: left; }
  .wmt-hero__slide--sunny .wmt-hero__eyebrow, .wmt-hero__slide--malik .wmt-hero__eyebrow { justify-content: flex-start; }
  .wmt-hero__slide--malik .wmt-hero__layer { object-position: 25% 60%; }
  .wmt-hero__slide--sunny .wmt-hero__layer { object-position: 30% 62%; }
  .wmt-hero__slide--simone .wmt-hero__layer { object-position: 80% 62%; }
  .wmt-hero__slide--grant .wmt-hero__layer { object-position: 22% 55%; }
  .wmt-hero__slide--grant .wmt-hero__eyebrow { justify-content: flex-start; }
  .wmt-hero__slide .wmt-hero__title { font-size: clamp(46px, 13.5vw, 64px); }
  .wmt-hero__slide .wmt-hero__title span { font-size: 1em; line-height: .88; margin-top: 0; }
  .wmt-hero__slide .wmt-voice--hero { left: auto; right: auto; }
  .wmt-hero__controls { position: relative; grid-area: 2 / 1; justify-self: center; left: auto; bottom: auto; transform: none; margin: 18px 0 calc(clamp(28px, 3vw, 44px) + 4px); }
  .wmt-hero__pager, .wmt-hero__sets { box-shadow: none; background: rgba(35, 31, 32, .06); }
  .wmt-hero__slide--real::before { display: none; }
  .wmt-hero__slide--real .wmt-hero__layer { object-position: var(--mob-pos, 50% 62%); }
  .wmt-hero__slide--r .wmt-hero__eyebrow { justify-content: flex-start; }
}

/* ---------- Creator voice (speech card) ---------- */
.wmt-voice {
  margin: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start;
  padding: 16px 18px;
  background: var(--wmt-white);
  border-radius: 20px 20px 20px 6px;
  box-shadow: 0 18px 40px -18px rgba(35, 31, 32, .35);
  color: var(--wmt-ink);
}
.wmt-voice__avatar { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--wmt-red); }
.wmt-voice__line { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; }
.wmt-voice__line span { color: var(--wmt-red); font-weight: 800; }
.wmt-voice__who { font-size: 12px; color: var(--wmt-muted); letter-spacing: .02em; }
.wmt-voice__who b { color: var(--wmt-ink); font-weight: 800; }
.wmt-voice__who span::before { content: "·"; margin: 0 6px; }
.wmt-voice--hero { background: rgba(255, 242, 230, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wmt-voice--inline { max-width: 440px; }
.wmt-voice--lift { margin-top: 32px; }
.wmt-voice--dark { background: rgba(255, 242, 230, .07); color: var(--wmt-cream); box-shadow: none; border: 1px solid var(--wmt-line-light); margin-top: 28px; }
.wmt-voice--dark .wmt-voice__who, .wmt-voice--dark .wmt-voice__who b { color: var(--wmt-muted-light); }
.wmt-voice--dark .wmt-voice__line span { color: var(--wmt-gold); }
.wmt-voice--center { margin: 0 auto 36px; text-align: left; }

/* ---------- The crew ---------- */
.wmt-crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.wmt-member { min-width: 0; }
.wmt-member:nth-child(3n+2) { margin-top: 56px; }
.wmt-member__photo {
  --mx: 0; --my: 0; --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 30%; --sheen: 0; --lift: 0px; --rot: 0deg;
  transform: translateY(var(--lift));
  transition: transform .5s var(--wmt-ease),
              opacity .7s var(--wmt-ease) var(--reveal-delay, 0ms),
              translate 1s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}
/* row reveal (wmt.js 7b): cards rise in one by one, left to right */
.wmt-member.is-pending .wmt-member__photo { opacity: 0; translate: 0 96px; }
/* Card = portrait + gradient + type, all inside one tilting frame.
   Photo drifts against the pointer, type drifts with it, so the words float over the face. */
.wmt-member__inner {
  position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--wmt-ink);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: calc(var(--ry) * -1) calc(20px + var(--rx)) 44px -16px rgba(35, 31, 32, .4);
  isolation: isolate;
}
.wmt-member__inner > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15%; transform: translate3d(calc(var(--mx) * -2.4%), calc(var(--my) * -2%), 0) scale(1.1); }
.wmt-member__inner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(35, 31, 32, 0) 38%, rgba(35, 31, 32, .55) 62%, rgba(35, 31, 32, .92) 100%);
}
.wmt-member__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--wmt-cream);
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 5px), 0);
}
.wmt-member__lane { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--wmt-cream); display: inline-flex; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--wmt-red); }
.wmt-member__name { margin: 4px 0 0; font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 40px); line-height: .9; color: var(--wmt-cream); }
.wmt-member__line { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: rgba(255, 242, 230, .9); }
.wmt-member__line span { font-weight: 800; color: var(--wmt-cream); }
.wmt-member__ai { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wmt-black); background: rgba(255, 242, 230, .92); }
.wmt-member__handle { margin-top: 4px; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--wmt-cream); text-decoration-color: var(--wmt-red); text-underline-offset: 4px; position: relative; z-index: 3; }
.wmt-member__handle:hover { color: var(--wmt-white); }
.wmt-member .wmt-sheen { z-index: 3; }
.wmt-crew__note { margin-top: 40px; }
@media (max-width: 991.98px) {
  .wmt-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wmt-member:nth-child(3n+2) { margin-top: 0; }
  .wmt-member:nth-child(even) { margin-top: 48px; }
}
@media (max-width: 575.98px) {
  /* Phones: one card per row, a touch shorter so six cards don't run forever */
  .wmt-crew { grid-template-columns: 1fr; gap: 20px; }
  .wmt-member:nth-child(even), .wmt-member:nth-child(3n+2) { margin-top: 0; }
  .wmt-member__inner { aspect-ratio: 4 / 4.6; }
  .wmt-member__overlay { padding: 18px; }
  .wmt-member__name { font-size: 32px; }
}

/* ---------- App: list + chat mock ---------- */
.wmt-applist { margin: 32px 0 0; display: grid; gap: 18px; }
.wmt-applist li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.wmt-applist b { display: block; font-size: 17px; }
.wmt-applist span { display: block; color: #4A4244; font-size: 15px; }
.wmt-phone {
  width: min(380px, 100%); margin-inline: auto;
  border-radius: 48px; background: var(--wmt-ink); padding: 11px;
  box-shadow: 0 50px 90px -30px rgba(35, 31, 32, .45);
}
.wmt-phone__screen { border-radius: 38px; overflow: hidden; background: #FDF1E3; display: flex; flex-direction: column; min-height: 640px; }
.wmt-phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 26px 22px 14px; border-bottom: 1px solid var(--wmt-line); }
.wmt-phone__title { font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.wmt-chat { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; font-size: 14.5px; line-height: 1.45; }
.wmt-msg { margin: 0; }
.wmt-msg--me { align-self: flex-end; max-width: 78%; background: var(--wmt-ink); color: var(--wmt-cream); padding: 10px 14px; border-radius: 18px 18px 4px 18px; }
.wmt-msg--crew { display: grid; grid-template-columns: 32px 1fr; gap: 10px; max-width: 92%; }
.wmt-msg--crew > img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.wmt-msg--crew > div { background: var(--wmt-white); padding: 10px 14px 12px; border-radius: 18px 18px 18px 4px; }
.wmt-msg--crew b { font-size: 12px; color: var(--wmt-red); }
.wmt-msg--crew p { margin: 2px 0 0; }
.wmt-product { margin-top: 10px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: var(--wmt-cream); }
.wmt-product span { display: block; font-size: 13px; font-weight: 700; }
.wmt-product b { font-size: 12px; color: var(--wmt-muted); }
.wmt-product__added { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--wmt-red); }
.wmt-product__added::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--wmt-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.wmt-product__add { background: var(--wmt-red); color: var(--wmt-white); font-size: 12px !important; padding: 6px 12px; border-radius: 999px; }
.wmt-phone__input { margin: 0 14px 20px; padding: 13px 18px; border-radius: 999px; background: var(--wmt-white); color: #8A7F80; font-size: 14px; border: 1px solid var(--wmt-line); }

/* =========================================================
   TOAST BUCKS DECK (pinned scroll sequence)
   Without JS (or with reduced motion) the cards sit in a
   plain grid. JS adds .is-live: the section grows tall, the
   stage pins, and each card flies in as you scroll, then
   gets pushed back into the pile by the next one.
   ========================================================= */
.wmt-deck { background: var(--wmt-ink); color: var(--wmt-cream); position: relative; }
.wmt-deck__stage { padding-block: var(--wmt-section-y); }
.wmt-deck__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.wmt-deck .wmt-h2 { color: var(--wmt-cream); font-size: clamp(44px, 5.4vw, 80px); }
.wmt-deck__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wmt-deck__slot { margin: 0; }
.wmt-deck__meta { display: none; }

.wmt-deck.is-live { height: calc(100vh + var(--n, 8) * 62vh); }
.wmt-deck.is-live .wmt-deck__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding-block: calc(72px + env(safe-area-inset-top, 0px)) 32px;
  display: flex; align-items: center;
  overflow: hidden;
}
.wmt-deck.is-live .wmt-deck__grid { width: 100%; }
.wmt-deck.is-live .wmt-deck__cards { display: block; position: relative; aspect-ratio: 1600 / 1009; max-width: 100%; }
.wmt-deck.is-live .wmt-deck__slot { position: absolute; inset: 0; will-change: transform, filter; transform-origin: 50% 100%; }
.wmt-deck.is-live .wmt-deck__slot:not(.is-top) { pointer-events: none; }
.wmt-deck.is-live .wmt-deck__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 28px; }
.wmt-deck__count { font-family: var(--wmt-font-display); font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; color: var(--wmt-gold); }
.wmt-deck__name { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wmt-muted-light); }
.wmt-deck__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wmt-line-light); display: none; }
.wmt-deck__progress span { display: block; height: 100%; width: 100%; background: var(--wmt-gold); transform-origin: left; transform: scaleX(var(--deck-p, 0)); }
.wmt-deck.is-live .wmt-deck__progress { display: block; }
.wmt-amount--top { top: 5%; bottom: auto; }
.wmt-amount--cream { color: var(--wmt-cream); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
@media (max-width: 991.98px) {
  .wmt-deck__grid { grid-template-columns: 1fr; }
  .wmt-deck.is-live .wmt-deck__stage { align-items: flex-start; padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .wmt-deck.is-live .wmt-deck__copy .wmt-body,
  .wmt-deck.is-live .wmt-deck__copy .wmt-fine { display: none; }
  .wmt-deck.is-live .wmt-deck__copy .wmt-voice { margin-top: 16px; padding: 12px 14px; }
  .wmt-deck.is-live .wmt-deck__copy .wmt-amounts { margin-top: 16px; }
  .wmt-deck.is-live .wmt-deck__grid { gap: 28px; }
  .wmt-deck.is-live .wmt-deck__cards { width: min(560px, 100%); margin-inline: auto; }
}
@media (max-width: 767.98px) {
  .wmt-deck .wmt-h2 { font-size: clamp(38px, 11vw, 52px); }
  .wmt-deck.is-live .wmt-deck__copy .wmt-voice { display: none; }
}
@media (max-width: 575.98px) { .wmt-deck__cards { grid-template-columns: 1fr; } }

/* Generic scroll parallax: JS writes --py on [data-parallax] */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wmt-ticker__track { animation: none; }
  .wmt-card, .wmt-card__inner, .wmt-layer, .wmt-scene__layer, .wmt-scene__title, .wmt-reveal, .wmt-hero__layer, .wmt-hero__type, [data-parallax], .wmt-member__inner, .wmt-member__inner img, .wmt-scene__frame, .wmt-scene__copy, .wmt-hero__slide .wmt-hero__eyebrow, .wmt-hero__slide .wmt-hero__title, .wmt-hero__slide .wmt-hero__title span, .wmt-hero__slide .wmt-voice--hero { transition: none !important; transform: none !important; }
  .wmt-card { transform: rotate(var(--rot)) !important; }
  .wmt-reveal.is-pending { opacity: 1; }
  .wmt-member.is-pending .wmt-member__photo { opacity: 1; translate: none; }
}

@media (max-width: 767.98px) {
  .wmt-hero__sheet { margin-top: 8px; }
}

/* While the signup shows a status message, the fine print under it steps aside */
.wmt-signup + .wmt-fine { transition: opacity .2s; }
.wmt-signup.has-msg + .wmt-fine { visibility: hidden; opacity: 0; }

/* =========================================================
   BLOG   blog/index.html + blog/<slug>/index.html
   (generated by tools/build_blog.py)
   ========================================================= */
.wmt-nav .nav-link.active { color: var(--wmt-red); }

/* chips: who it's from */
.wmt-chip { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
  border: 1.5px solid var(--wmt-ink); color: var(--wmt-ink); background: transparent; }
.wmt-chip a { color: inherit; text-decoration: none; }
.wmt-chip--founder { border-color: var(--wmt-red); color: var(--wmt-red); }
.wmt-chip--wmt { background: var(--wmt-ink); color: var(--wmt-cream); }

/* blog home */
.wmt-blog__head { padding-block: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 48px); }
.wmt-blog__title { font-size: clamp(56px, 9vw, 136px); max-width: 12ch; }
.wmt-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.wmt-filter { border: 1.5px solid var(--wmt-line); background: transparent; color: var(--wmt-ink); border-radius: 999px;
  padding: 10px 18px; font-weight: 700; font-size: 15px; transition: background-color .2s, border-color .2s, color .2s; }
.wmt-filter:hover { border-color: var(--wmt-ink); }
.wmt-filter.is-active { background: var(--wmt-ink); border-color: var(--wmt-ink); color: var(--wmt-cream); }
.wmt-blog__list { padding-bottom: clamp(56px, 8vw, 104px); }
.wmt-blog__empty { margin: 8px 0 0; padding: 40px 28px; border: 1.5px dashed var(--wmt-line); border-radius: var(--wmt-radius);
  text-align: center; font-weight: 700; color: var(--wmt-muted); }

/* post cards */
.wmt-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.wmt-postgrid:empty { display: none; }
.wmt-postcard { display: flex; flex-direction: column; background: var(--wmt-white); border-radius: var(--wmt-radius); overflow: hidden;
  box-shadow: 0 1px 0 var(--wmt-line); transition: transform .35s var(--wmt-ease), box-shadow .35s var(--wmt-ease); }
.wmt-postcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(35, 31, 32, .35); }
.wmt-postcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wmt-paper); }
.wmt-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--wmt-ease); }
.wmt-postcard:hover .wmt-postcard__media img { transform: scale(1.04); }
.wmt-postcard__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.wmt-postcard__title { font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase; line-height: .95;
  font-size: clamp(26px, 2.2vw, 32px); margin: 0; text-wrap: balance; }
.wmt-postcard__title a { color: var(--wmt-ink); text-decoration: none; }
.wmt-postcard__title a::after { content: ""; position: absolute; inset: 0; }
.wmt-postcard { position: relative; }
.wmt-postcard__title a:hover { color: var(--wmt-red); }
.wmt-postcard__dek { margin: 12px 0 0; color: #4A4244; font-size: 16px; }
.wmt-postcard__meta { margin: auto 0 0; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--wmt-muted); }
.wmt-postcard__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--wmt-paper); }
.wmt-postcard--big { display: grid; grid-template-columns: 1.25fr 1fr; margin-bottom: clamp(20px, 2.4vw, 32px); }
.wmt-postcard--big .wmt-postcard__media { aspect-ratio: auto; min-height: 380px; }
.wmt-postcard--big .wmt-postcard__body { padding: clamp(28px, 3.4vw, 52px); justify-content: center; }
.wmt-postcard--big .wmt-postcard__title { font-size: clamp(38px, 4vw, 60px); }
.wmt-postcard--big .wmt-postcard__dek { font-size: 18px; }
.wmt-postcard--big .wmt-postcard__meta { margin-top: 0; padding-top: 24px; }
.wmt-postcard[hidden] { display: none; }
@media (max-width: 991.98px) {
  .wmt-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wmt-postcard--big { grid-template-columns: 1fr; }
  .wmt-postcard--big .wmt-postcard__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 575.98px) { .wmt-postgrid { grid-template-columns: 1fr; } }

/* post */
.wmt-post__head { padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.wmt-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 28px; font-size: 14px; color: var(--wmt-muted); }
.wmt-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.wmt-crumbs li[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.wmt-crumbs a { color: var(--wmt-ink); }
.wmt-post__title { font-size: clamp(44px, 6.4vw, 96px); max-width: 19ch; }
.wmt-postcard__body .wmt-chip { align-self: flex-start; }
.wmt-post__dek { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: #4A4244; max-width: 36em; margin: 24px 0 0; }
.wmt-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.wmt-byline p { margin: 0; }
.wmt-byline__avatar, .wmt-authorbox__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; object-position: top; background: var(--wmt-white); }
.wmt-byline__avatar--initial, .wmt-authorbox__avatar--initial { display: inline-grid; place-items: center; background: var(--wmt-ink); color: var(--wmt-cream);
  font-family: var(--wmt-font-display); font-weight: 800; font-size: 22px; }
.wmt-byline__name { font-weight: 800; }
.wmt-byline__meta { font-size: 14px; color: var(--wmt-muted); }
.wmt-post__cover { margin: 0 auto; }
.wmt-post__cover img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--wmt-radius-lg); }
.wmt-post__layout { display: grid; grid-template-columns: 240px minmax(0, 720px); justify-content: center; gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.wmt-post__toc { position: sticky; top: 104px; align-self: start; font-size: 15px; }
.wmt-post__toc > p { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wmt-muted); }
.wmt-post__toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--wmt-line); }
.wmt-post__toc li a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--wmt-ink); text-decoration: none; line-height: 1.35; }
.wmt-post__toc li a:hover { border-left-color: var(--wmt-ink); }
.wmt-post__toc li a.is-current { border-left-color: var(--wmt-red); color: var(--wmt-red); font-weight: 700; }
.wmt-post__answer { background: var(--wmt-white); border-radius: var(--wmt-radius); padding: clamp(24px, 3vw, 36px); margin-bottom: 40px; }
.wmt-post__answer-h { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wmt-red); }
.wmt-post__answer > p:not(.wmt-post__answer-h) { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.5; }
.wmt-post__answer ul { margin: 18px 0 0; padding-left: 20px; }
.wmt-post__answer li { margin-top: 6px; }
.wmt-post__ainote { margin: -16px 0 32px; font-size: 14px; color: var(--wmt-muted); }
.wmt-prose { font-size: 19px; line-height: 1.7; }
.wmt-prose > :first-child { margin-top: 0; }
.wmt-prose p, .wmt-prose ul, .wmt-prose ol { margin: 0 0 22px; }
.wmt-prose h2, .wmt-post__faq h2 { font-family: var(--wmt-font-display); font-weight: 800; text-transform: uppercase; line-height: .95;
  font-size: clamp(34px, 3.4vw, 48px); margin: 56px 0 18px; text-wrap: balance; scroll-margin-top: 100px; }
.wmt-prose h3 { font-size: 22px; font-weight: 800; margin: 36px 0 12px; }
.wmt-prose li { margin-bottom: 10px; }
.wmt-prose li::marker { color: var(--wmt-red); font-weight: 800; }
.wmt-prose a { color: var(--wmt-red); }
.wmt-prose blockquote { margin: 32px 0; padding-left: 22px; border-left: 3px solid var(--wmt-red); font-size: 22px; font-weight: 600; }
.wmt-post__faq { margin-top: 56px; }
.wmt-post__q { border-top: 1px solid var(--wmt-line); }
.wmt-post__q:last-child { border-bottom: 1px solid var(--wmt-line); }
.wmt-post__q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; }
.wmt-post__q summary::-webkit-details-marker { display: none; }
.wmt-post__q summary::after { content: "+"; font-size: 28px; font-weight: 400; line-height: 1; transition: transform .25s var(--wmt-ease); }
.wmt-post__q[open] summary::after { transform: rotate(45deg); }
.wmt-post__q h3 { font-size: 19px; font-weight: 800; margin: 0; }
.wmt-post__q p { margin: 0 0 22px; color: #4A4244; font-size: 18px; max-width: 40em; }
.wmt-authorbox { display: flex; gap: 20px; margin-top: 56px; padding: 28px; border-radius: var(--wmt-radius); background: var(--wmt-paper); }
.wmt-authorbox__avatar { width: 64px; height: 64px; font-size: 28px; }
.wmt-authorbox p { margin: 0; }
.wmt-authorbox__name { font-weight: 800; font-size: 18px; }
.wmt-authorbox__role { font-size: 14px; color: var(--wmt-muted); margin-bottom: 8px !important; }
.wmt-more__title { font-size: clamp(40px, 5vw, 72px); margin-bottom: clamp(28px, 3vw, 44px); }
.wmt-close--blog { background: var(--wmt-cream); }
@media (max-width: 991.98px) {
  .wmt-post__layout { grid-template-columns: minmax(0, 1fr); }
  .wmt-post__toc { position: static; }
  .wmt-post__cover img { aspect-ratio: 16 / 10; border-radius: var(--wmt-radius); }
}
@media (max-width: 575.98px) {
  .wmt-prose { font-size: 18px; }
  .wmt-crumbs li[aria-current] { display: none; }
  .wmt-crumbs li:nth-last-child(2)::after { content: ""; }
}
.wmt-pod { padding-bottom: clamp(72px, 10vw, 128px); }
.wmt-pod__soon { margin-top: 28px; border-color: var(--wmt-red); color: var(--wmt-red); }
/* WMT logo as an avatar: the MY mark, smaller, centered in a red circle */
.wmt-byline__avatar.is-logo, .wmt-authorbox__avatar.is-logo, .wmt-postcard__avatar.is-logo {
  background: var(--wmt-red); object-fit: contain; object-position: center; padding: 6px; }
.wmt-authorbox__avatar.is-logo { padding: 8px; }
.wmt-postcard__avatar.is-logo { padding: 3px; }
/* amount sitting just above the card's logo line (Fuck Him / Fuck Her cards) */
.wmt-amount--lifted { bottom: 12.5%; }
/* Toast Bucks coin beside the section eyebrow, like a logo lockup */
.wmt-tb-mark { gap: 12px; }
.wmt-tb-mark img { width: 44px; height: 44px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
/* The WiFi card: big amount on the empty wall, tucked behind him */
.wmt-amount--wifi { right: 35.6%; bottom: auto; top: 24%; font-size: 17cqw; }
/* crew: 4 across on wide screens, 3 across on small laptops */


/* =========================================================
   DEMO DAY: scroll-scrubbed swing + 3D debris   [data-demo]
   The section is tall; the frame pins while you scroll through it.
   Scroll drives the frame sequence (her swing), the impact, the
   debris flying at the camera, then the headline and copy.
   ========================================================= */
.wmt-demo { position: relative; height: 280vh; padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
.wmt-demo__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.wmt-demo__stage > .wmt-scene__frame { width: 100%; height: min(clamp(540px, 58vw, 860px), calc(100vh - 110px)); margin-top: 40px; }
.wmt-demo__seq, .wmt-demo__debris { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wmt-demo__seq { z-index: 0; }
.wmt-demo__debris { z-index: 4; pointer-events: none; }
.wmt-demo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: 0; }
.wmt-demo .wmt-scene__title {
  top: auto; bottom: clamp(190px, 40%, 330px); font-size: 15cqw;
  z-index: 1; transform: translate3d(calc(var(--mx) * 2.4%), calc(var(--my) * 16px), 0) scale(var(--ts, 1));
  transform-origin: 0 0; opacity: var(--to, 1);
}
.wmt-demo .wmt-scene__shade { z-index: 2; opacity: var(--co, 1); }
.wmt-demo .wmt-scene__copy { z-index: 5; opacity: var(--co, 1); translate: 0 calc((1 - var(--co, 1)) * 24px); }
.wmt-demo .wmt-sheen { z-index: 3; }
.wmt-demo.is-shaking .wmt-scene__frame { animation: wmt-shake .32s cubic-bezier(.36, .07, .19, .97); }
@keyframes wmt-shake {
  10%, 90% { translate: -2px 1px; } 20%, 80% { translate: 4px -2px; }
  30%, 50%, 70% { translate: -6px 3px; } 40%, 60% { translate: 6px -3px; }
}
@media (max-width: 767.98px) {
  .wmt-demo { height: 240vh; }
  .wmt-demo .wmt-scene__title { font-size: 21cqw; top: 4%; bottom: auto; white-space: nowrap; }
  .wmt-demo__stage > .wmt-scene__frame { height: min(125vw, calc(100vh - 100px)); margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .wmt-demo { height: auto; }
  .wmt-demo__stage { position: relative; height: auto; }
  .wmt-demo__debris { display: none; }
}

/* registry tiles: icons fill the tile on laptops like they do on phones */
.wmt-cats li img { width: clamp(44px, 46%, 92px); height: auto; aspect-ratio: 1; }
@media (max-width: 767.98px) { .wmt-cats li img { width: 52%; } }
/* Malik slide: soft cream light behind the headline so it reads over the brick and windows */
.wmt-hero__slide--malik::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 48% at 80% 20%, rgba(255, 242, 230, .9) 0%, rgba(255, 242, 230, .7) 45%, rgba(255, 242, 230, 0) 75%);
}
@media (max-width: 767.98px) { .wmt-hero__slide--malik::before { display: none; } }

/* ---------- Handoff additions: inner pages ---------- */
.wmt-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wmt-crumbs { display: flex; flex-wrap: wrap; gap: .5em; padding-top: 22px; padding-bottom: 0; font-size: .85rem; color: rgba(35, 31, 32, .65); }
.wmt-crumbs a { color: inherit; text-decoration: none; }
.wmt-crumbs a:hover { color: var(--wmt-red, #BE1E2D); text-decoration: underline; }
.wmt-crumbs [aria-current] { color: #231F20; font-weight: 700; }
.wmt-crumbs + .wmt-section, .wmt-crumbs + .wmt-deck { padding-top: clamp(28px, 4vw, 48px); }
.wmt-member__name a { color: inherit; text-decoration: none; }
.wmt-member__name a::after { content: ""; position: absolute; inset: 0; }
.wmt-profile__photo { border-radius: 24px; overflow: hidden; position: relative; }
.wmt-profile__photo img { width: 100%; height: auto; display: block; }
.wmt-profile__line { font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; margin: 1rem 0 1.5rem; color: #BE1E2D; }
.wmt-profile__others { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 1.5rem; }
.wmt-profile__others a { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 999px; background: #FFF2E6; color: #231F20; text-decoration: none; }
.wmt-profile__others a:hover { background: #fff; }
.wmt-profile__others img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.wmt-profile__others span { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.2; }
.wmt-profile__others b { font-size: 1rem; }