/* How it works — Signal V2.1. Scroll-scrubbed signal after the hero. pin36 */

/* overflow-x: hidden on body makes a scroll container and kills GSAP pin
   and position:sticky on Safari (and some Chrome). clip hides horizontal
   spill without that containing block. */
html:has(body.landing),
body.landing {
  overflow-x: clip !important;
}

/* Continue the hero shader behind this section instead of a second fill. */
body.landing .hero-shell {
  --hero-pad-bottom: 0;
  padding-top: 0 !important;
  /* Stay under later paper sections. z-index 4 let the sticky mesh paint over pricing. */
  z-index: 0 !important;
}

body.landing .hero-shell .landing-shader {
  position: sticky;
  inset: auto;
  top: 0;
  width: 100%;
  height: 100dvh;
  margin-bottom: -100dvh;
}

body.landing section.how.how-signal {
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 132px 0 !important;
  gap: 18px !important;
  overflow: visible !important;
  isolation: isolate;
  position: relative;
  z-index: 2;
  background: #f3efe5 !important;
  background-image: none !important;
  color: #022c22;
}

/* Skip-before-load: keep page length stable before ScrollTrigger wraps the
   pin. Matches JS end += 2.5 * innerHeight plus the ~832px pin box.
   Do not use 100vh sticky as the pin — GSAP owns sticking.
   Desktop only: the same 2.5dvh reservation on compact (#116) stretched
   the phone timeline into empty travel. Compact keeps GSAP pin-spacer. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body.landing section.how.how-signal {
    min-height: calc(2.5 * 100dvh + 52rem) !important;
  }
}

body.landing section.how.how-signal::before,
body.landing section.how.how-signal::after {
  content: none !important;
  display: none !important;
}

/* Opaque paper + a stacking context above the hero-shell mesh. */
body.landing section.pricing.pricing-figma#pricing,
body.landing section.faq.faq-figma#faq,
body.landing section.how.how-signal {
  position: relative;
  z-index: 2;
  overflow: visible;
  background: #f3efe5 !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.how-signal-drop {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 12px 0 72px;
}

.how-signal-drop-track {
  --drop-h: 96px;
  position: relative;
  display: block;
  width: 1px;
  height: var(--drop-h);
  overflow: hidden;
  background: #bef2642e;
}

.how-signal-drop-pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 32px;
  background: linear-gradient(
    180deg,
    rgb(190 242 100 / 0%) 0%,
    #bef264 72%,
    rgb(190 242 100 / 0%) 100%
  );
  animation: how-signal-drop-pulse 2.2s cubic-bezier(0.45, 0, 0.15, 1) infinite;
}

@keyframes how-signal-drop-pulse {
  0% {
    transform: translateY(-32px);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    transform: translateY(var(--drop-h));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-signal-drop-pulse {
    animation: none;
    opacity: 0;
  }
}

.how-signal-pin {
  width: min(1232px, calc(100% - 208px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.how-signal-head {
  width: 100%;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how-signal-eyebrow-slot {
  position: relative;
  width: 100%;
  min-height: 12px;
  margin: 0 0 8px;
}

.how-signal-eyebrow {
  margin: 0;
  color: #65a30d;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.how-signal-eyebrow-scene {
  display: none;
}

.how-signal-head-slot {
  position: relative;
  width: 100%;
}

.how-signal-intro h2 {
  margin: 0 0 12px;
  color: #022c22;
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.028em;
  text-wrap: unset;
}

@media (min-width: 901px) {
  .how-signal-intro h2 {
    white-space: nowrap;
  }
}

.how-signal-intro > p {
  width: min(560px, 100%);
  margin: 0 auto;
  color: #404040;
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
  text-wrap: balance;
}

.how-signal-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .how-signal-stage {
    display: grid;
    gap: 0;
  }

  .how-signal-scene {
    grid-area: 1 / 1;
  }

  .how-signal-scene + .how-signal-scene {
    opacity: 0;
  }
}

.how-signal-scene {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  background: none;
}

.how-signal-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1232 / 480;
  overflow: hidden;
  container-type: inline-size;
  container-name: signal-scene;
}

.how-signal-art-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1232px;
  height: 540px;
  /* Center with margins, not translate(-50%,-50%). Mixing that percent
     translate with scale() — inline or via --signal-scale / a container
     query unit — parks the 1232 frame’s top-left at the art center
     (rings fly bottom-right) the moment the pin goes fixed. */
  margin-left: -616px;
  margin-top: -270px;
  --signal-scale: 1;
  --signal-shift-x: 0px;
  --signal-shift-y: 0px;
  transform: scale(var(--signal-scale)) translate(var(--signal-shift-x), var(--signal-shift-y));
  transform-origin: center center;
}

@media (min-width: 901px) {
  /* youBox {440,0,352,380} at art 1232×480: scale = 480/380, shiftY = 80. */
  .how-signal-scene[data-how-signal-scene="1"] .how-signal-art-frame {
    --signal-scale: 1.26316;
    --signal-shift-x: 0px;
    --signal-shift-y: 80px;
  }

  /* growBox {136,-33,960,606}: height-limited scale 480/606. */
  .how-signal-scene[data-how-signal-scene="4"] .how-signal-art-frame {
    --signal-scale: 0.79208;
  }
}

.how-signal-svg {
  position: absolute;
  left: 0;
  top: 0;
}

.how-signal-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.how-signal-copy-slot {
  display: none;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .how-signal-copy-inline {
    display: none;
  }
}

.how-signal-copy-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-wrap: pretty;
}

.how-signal-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 8px 12px;
  border-radius: 55px;
  background: rgba(4, 120, 87, 0.08);
  color: #047857;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.how-signal-copy h3 {
  width: 100%;
  max-width: 18ch;
  margin: 0;
  padding: 0;
  color: #022c22;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  text-wrap: balance;
}

.how-signal-copy-text > p {
  width: min(560px, 100%);
  margin: 0;
  color: #404040;
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
  text-wrap: balance;
}

.how-signal-you-cluster {
  position: absolute;
  left: 0;
  top: 0;
  width: 1232px;
  height: 540px;
  transform-origin: 616px 190px;
  pointer-events: none;
}

.how-signal-halo {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 999px;
}

body.landing .how-signal-halo > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  max-width: none;
  background: none;
  transform-origin: 50% 50%;
  animation: how-signal-ring-pulse 2.6s ease-in-out infinite;
}

.how-signal-halo-md > img {
  animation-delay: 0.45s;
}

.how-signal-halo-lg > img {
  animation-delay: 0.9s;
}

@keyframes how-signal-ring-pulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.045);
    opacity: 1;
  }
}

.how-signal-halo-lg {
  left: 450px;
  top: 24px;
  width: 332px;
  height: 332px;
}

.how-signal-halo-md {
  left: 482px;
  top: 56px;
  width: 268px;
  height: 268px;
}

.how-signal-halo-sm {
  left: 514px;
  top: 88px;
  width: 204px;
  height: 204px;
}

.how-signal-beam {
  position: absolute;
  left: 790px;
  top: 190px;
  width: 300px;
  height: 2px;
  overflow: visible;
  transform-origin: left center;
  background: linear-gradient(90deg, rgb(4 120 87 / 80%) 0%, rgb(4 120 87 / 0%) 100%);
}

.how-signal-pulse {
  position: absolute;
  top: 50%;
  left: 10px;
  border-radius: 999px;
  background: #047857;
}

.how-signal-pulse-a {
  width: 10px;
  height: 10px;
  margin-top: -5px;
  box-shadow: #0478571f 0 0 0 7px;
}

.how-signal-pulse-b {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #047857b8;
}

.how-signal-pulse-c {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: #04785773;
}

.how-signal-you-node {
  position: absolute;
  left: 546px;
  top: 120px;
  box-sizing: border-box;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  border-radius: 555px;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

.how-signal-you-mark {
  position: relative;
  display: block;
  width: 124px;
  height: 124px;
  overflow: hidden;
  border-radius: 159.84px;
  background-color: #d6d3c9;
  background-image: url("/marketing/how-signal/you-portrait.jpg");
  background-size: cover;
  background-position: 32% 18%;
}

body.landing .how-signal-you-mark img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 32% 18% !important;
}

.how-signal-you-caption {
  position: absolute;
  left: 500px;
  top: 276px;
  z-index: 2;
  box-sizing: border-box;
  width: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

body.landing .how-signal-you-caption-blur {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  display: block;
  width: 232px;
  height: 144px;
  max-width: none;
  pointer-events: none;
  transform: translateY(-50%);
}

.how-signal-you-name {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #022c22;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.how-signal-you-label {
  position: relative;
  z-index: 1;
  width: auto;
  margin: 0;
  color: #4a4a45;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

/* Frame 02 — Invite */
.how-signal-you-dim {
  position: absolute;
  left: 340px;
  top: 162px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #022c2259;
  border-radius: 999px;
  background: #ffffff;
  color: #022c22;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 34px;
}

.how-signal-you-dim-label {
  position: absolute;
  left: 278px;
  top: 252px;
  width: 200px;
  margin: 0;
  color: #404040;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.how-signal-person {
  position: absolute;
  left: 855px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.how-signal-mom {
  top: 24px;
  z-index: 4;
}

.how-signal-mom .how-signal-avatar {
  position: relative;
  z-index: 2;
}

.how-signal-more {
  top: 294px;
}

.how-signal-avatar {
  box-sizing: border-box;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 555px;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

.how-signal-avatar-photo {
  position: relative;
  display: block;
  width: 124px;
  height: 124px;
  overflow: hidden;
  border-radius: 999px;
}

body.landing .how-signal-avatar-photo img {
  display: block;
  width: 124px;
  height: 124px;
  max-width: none;
  object-fit: cover;
}

.how-signal-more-disc {
  box-sizing: border-box;
  width: 124px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 159.84px;
  background: #f3efe5;
}

body.landing .how-signal-more-disc img {
  display: block;
  width: 52px;
  height: 52px;
  max-width: none;
}

.how-signal-person-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.how-signal-person-name {
  margin: 0;
  color: #022c22;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.how-signal-person-role {
  margin: 0;
  color: #4a4a45;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.how-signal-chip-ride {
  position: absolute;
  left: 351px;
  top: 88px;
  z-index: 1;
  width: 680px;
  height: 160px;
  overflow: visible;
  pointer-events: none;
}

.how-signal-chip {
  position: absolute;
  left: 568px;
  top: 130px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 10px;
  border: 1px solid #022c22;
  border-radius: 999px;
  background: #022c22;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.how-signal-chip img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Frame 03 — Talk */
.how-signal-talk-rings {
  position: absolute;
  top: 10px;
  width: 332px;
  height: 332px;
  pointer-events: none;
}

.how-signal-talk-rings-mom {
  left: 793px;
}

.how-signal-talk-rings-held {
  left: 107px;
}

.how-signal-talk-rings .how-signal-halo-lg {
  left: 0;
  top: 0;
}

.how-signal-talk-rings .how-signal-halo-md {
  left: 32px;
  top: 32px;
}

.how-signal-talk-rings .how-signal-halo-sm {
  left: 64px;
  top: 64px;
}

.how-signal-scene[data-how-signal-scene="3"] .how-signal-svg {
  z-index: 3;
  pointer-events: none;
}

.how-signal-talk-mom,
.how-signal-talk-held {
  position: absolute;
  top: 106px;
  z-index: 4;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.how-signal-talk-mom {
  left: 859px;
}

.how-signal-talk-held {
  left: 173px;
}

.how-signal-talk-blur {
  position: absolute;
  top: -51px;
  z-index: 1;
  pointer-events: none;
}

body.landing .how-signal-talk-blur {
  display: block;
  width: 350px;
  height: 454px;
  max-width: none;
}

.how-signal-talk-blur-held {
  left: 153px;
}

.how-signal-talk-blur-mom {
  left: 729px;
}

.how-signal-talk-mid {
  position: absolute;
  left: 50%;
  top: 126px;
  z-index: 3;
  box-sizing: border-box;
  width: 341px;
  height: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.how-signal-talk-line {
  margin: 0;
  width: 100%;
  min-width: 0;
  color: #022c22;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
}

/* Desktop keeps the Talk line as one flowing string. Compact (1059:5343)
   shows the same two sentences as stacked lines under the avatars. */
.how-signal-talk-br {
  display: none;
}

.how-signal-talk-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.how-signal-talk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  border-radius: 8px;
  background: rgba(6, 95, 70, 0.09);
  color: #064e3b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

body.landing .how-signal-talk-chip img {
  display: block;
  width: 16px;
  height: 16px;
  max-width: none;
}

/* Frame 04 — June timeline example */
.how-signal-grow-window {
  position: absolute;
  left: 136px;
  top: -33px;
  box-sizing: border-box;
  width: 960px;
  height: 606px;
  padding: 8px;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

.how-signal-grow-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #f3efe5;
  pointer-events: none;
}

.how-signal-grow-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1000px;
  border: 0;
  background: #f3efe5;
  transform: scale(0.59);
  transform-origin: top left;
  pointer-events: none;
}

/* body.landing img { display:block } is more specific than a single class,
   so the shell has to be hidden from here or it paints over the desktop frame. */
body.landing .how-signal-phone-shell,
.how-signal-phone-chrome {
  display: none;
}

.how-signal-grow-open {
  position: absolute;
  inset: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(2, 44, 34, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.how-signal-grow-window:hover .how-signal-grow-open,
.how-signal-grow-window:focus-within .how-signal-grow-open {
  opacity: 1;
}

.how-signal-grow-open:focus-visible {
  opacity: 1;
  outline: none;
}

body.landing .how-signal-grow-open .button.button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 20px 32px !important;
  border: 0 !important;
  border-radius: 555px !important;
  background: linear-gradient(#d9f99d, #bef264) !important;
  color: #0a0a0a !important;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25) !important;
  font-family: Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  pointer-events: none;
  transform: scale(1.26263);
  transform-origin: center center;
}

.how-signal-grow-open:hover .button.button-primary,
.how-signal-grow-open:focus-visible .button.button-primary {
  background: linear-gradient(#d9f99d, #bef264) !important;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25) !important;
}

/* Desktop: iframe hover overlay only. Compact (≤900px) shows this CTA. */
.how-signal-grow-below {
  display: none;
}

.how-signal.is-enhanced .how-signal-grow-window {
  opacity: 0;
  visibility: hidden;
}



/* Legacy Grow rail (riff 1 / unused in live How) */
.how-signal-story {
  position: absolute;
  top: 84px;
  width: 212px;
  height: 156px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

.how-signal-story-1 { left: 68px; }
.how-signal-story-2 { left: 298px; }
.how-signal-story-3 { left: 528px; }
.how-signal-story-4 { left: 758px; }

.how-signal-box-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #ebe5d8;
}

.how-signal-box-frame img,
.how-signal-box-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-signal-box-caption {
  flex: none;
  margin: 0;
  padding: 6px 10px 8px;
  color: #064e3b;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.how-signal-box-extract {
  padding: 12px 12px 8px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.how-signal-box-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.how-signal-box-label {
  margin: 0;
  color: #65a30d;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.how-signal-box-display {
  margin: 0;
  color: #022c22;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
}

.how-signal-box-oil {
  display: block;
  width: auto;
  height: 52px;
  object-fit: contain;
}

.how-signal-box-thumbs {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 2px 2px 0;
}

.how-signal-box-thumbs img {
  border-radius: 8px;
  background: #ebe5d8;
}

.how-signal-story-4.is-forming {
  border: 1.2px dashed #04785773;
  background: #f3efe5;
  box-shadow: none;
  padding: 3px;
}

.how-signal-story-4.is-forming .how-signal-box-frame {
  background: #efe8d8;
}

.how-signal-year,
.how-signal-onward {
  position: absolute;
  margin: 0;
  font-weight: 600;
}

.how-signal-year {
  top: 274px;
  width: 100px;
  color: #404040;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-align: center;
}

.how-signal-year-1 { left: 126px; }
.how-signal-year-2 { left: 350px; }
.how-signal-year-3 { left: 574px; }
.how-signal-year-4 { left: 798px; }

.how-signal-onward {
  left: 1000px;
  top: 250px;
  color: #047857;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.how-signal-halo,
.how-signal-you-node,
.how-signal-held-mark {
  transform-origin: center;
}

.how-signal-svg [data-signal="path-flow"] {
  fill: none;
  opacity: 0;
}

/* Enhanced: one pinned stage; art evolves as the user scrolls */

.how-signal.is-enhanced .how-signal-you-caption,
.how-signal.is-enhanced .how-signal-mom {
  will-change: transform, opacity;
}

.how-signal.is-enhanced .how-signal-you-dim,
.how-signal.is-enhanced .how-signal-you-dim-label {
  visibility: hidden;
}

.how-signal.is-enhanced .how-signal-chip {
  left: 0;
  top: 0;
  opacity: 0;
}

.how-signal.is-enhanced .how-signal-talk-mid,
.how-signal.is-enhanced .how-signal-talk-mom,
.how-signal.is-enhanced .how-signal-talk-blur-mom,
.how-signal.is-enhanced .how-signal-talk-rings-mom,
.how-signal.is-enhanced [data-how-signal-scene="3"] [data-signal="path-ask"],
.how-signal.is-enhanced [data-how-signal-scene="3"] [data-signal="path-ask-ghost"],
.how-signal.is-enhanced [data-how-signal-scene="3"] [data-signal="path-live"],
.how-signal.is-enhanced [data-how-signal-scene="3"] [data-signal="path-live-ghost"],
.how-signal.is-enhanced [data-how-signal-scene="3"] [data-signal="arrow"] {
  opacity: 0;
}

.how-signal.is-enhanced .how-signal-head {
  padding-bottom: 24px;
}

.how-signal.is-enhanced .how-signal-eyebrow-slot .how-signal-eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
}

.how-signal.is-enhanced .how-signal-eyebrow-scene {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.how-signal.is-enhanced .how-signal-head-slot {
  min-height: 13rem;
}

.how-signal.is-enhanced .how-signal-copy-slot h3 {
  max-width: 18ch;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.028em;
  text-wrap: pretty;
  text-wrap: balance;
}

.how-signal.is-enhanced .how-signal-intro,
.how-signal.is-enhanced .how-signal-copy-slot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.how-signal.is-enhanced .how-signal-copy-slot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.how-signal.is-enhanced .how-signal-copy-inline {
  display: none;
}

@media (max-height: 860px) {
  .how-signal.is-enhanced .how-signal-head {
    padding-bottom: 8px;
  }

  .how-signal.is-enhanced .how-signal-head-slot {
    min-height: 12.5rem;
  }

  .how-signal.is-enhanced .how-signal-intro h2,
  .how-signal.is-enhanced .how-signal-copy h3 {
    font-size: 48px;
    line-height: 50px;
  }
}

.how-signal.is-enhanced .how-signal-stage {
  display: grid;
  height: auto;
  gap: 0;
}

.how-signal.is-enhanced .how-signal-scene {
  grid-area: 1 / 1;
  overflow: visible;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="1"] {
  z-index: 5;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="1"] .how-signal-art {
  overflow: hidden;
}

.how-signal.is-enhanced .how-signal-you-node {
  z-index: 3;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="2"] {
  z-index: 2;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="2"] .how-signal-art {
  overflow: hidden;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="3"] .how-signal-art {
  overflow: hidden;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="3"] {
  z-index: 3;
}

.how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="4"] {
  z-index: 4;
}

@media (max-width: 1050px) {
  body.landing section.how.how-signal {
    padding: 132px 0 !important;
  }

  .how-signal-drop {
    padding: 8px 0 56px;
  }

  .how-signal-drop-track {
    --drop-h: 80px;
  }

  .how-signal-pin {
    width: min(100% - 56px, 1232px);
  }

  .how-signal-head {
    padding-bottom: 48px;
  }

  .how-signal-intro h2 {
    font-size: 52px;
    line-height: 54px;
  }
}

.how-signal-invite-mobile,
.how-signal-invite-phone,
.how-signal-talk-mobile {
  display: none;
}

.how-signal-talk-ask,
.how-signal-talk-however {
  display: none;
}

.how-signal-talk-ask {
  position: absolute;
  left: 505px;
  top: 6px;
  z-index: 3;
  margin: 0;
  width: 210px;
  color: #022c22;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  pointer-events: none;
}

.how-signal-talk-however {
  margin: 0;
  width: 287px;
  color: #022c22;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

@media (max-width: 900px) {
  .how-signal-scene-grow .how-signal-art {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 606;
  }

  .how-signal-grow-open {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .how-signal-grow-below {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
    text-decoration: none;
  }

  /* Talk/You/Invite must never see this pill. GSAP adds .is-grow-live
     at the start of playGrowEnter, with the phone, not after it. */
  .how-signal.is-enhanced [data-how-signal-scene="4"]:not(.is-grow-live) .how-signal-grow-below {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.landing .how-signal-grow-below .button.button-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 20px 32px !important;
    border: 0 !important;
    border-radius: 555px !important;
    background: linear-gradient(#d9f99d, #bef264) !important;
    color: #0a0a0a !important;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25) !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 900px) {
  body.landing section.how.how-signal {
    padding: 72px 0 !important;
  }

  /* Approved compact camera (#111 Figma Talk): CSS owns percent-center +
     scale/shift vars. Desktop (≥901px) keeps pin19 margin -616/-270. */
  .how-signal-art-frame {
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, -50%) scale(var(--signal-scale))
      translate(var(--signal-shift-x), var(--signal-shift-y));
  }

  .how-signal-pin {
    width: calc(100% - 48px);
  }

  .how-signal-intro h2,
  .how-signal.is-enhanced .how-signal-copy-slot h3 {
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.028em;
  }

  .how-signal-intro > p,
  .how-signal.is-enhanced .how-signal-copy-slot .how-signal-copy-text > p {
    font-size: calc(16px * 15 / 14);
    line-height: calc(24px * 16 / 14);
  }

  .how-signal-scene {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding-bottom: 28px;
  }

  .how-signal-art {
    order: 1;
    height: min(42vw, 280px);
    aspect-ratio: auto;
    overflow: hidden;
  }

  .how-signal-copy-inline {
    order: 2;
    padding: 8px 24px 0;
    gap: 20px;
  }

  .how-signal-copy h3 {
    max-width: none;
    font-size: 32px;
    line-height: 1.05;
  }

  .how-signal-copy-text > p {
    width: auto;
  }

  /* Compact pin fills the viewport so the four scene arts can sit in
     the middle. GSAP still owns sticking — this is NOT position:sticky
     and not a 100vh sticky pin. Desktop ≥901px unchanged. */
  .how-signal.is-enhanced .how-signal-pin {
    position: relative;
    min-height: 100dvh;
  }

  .how-signal.is-enhanced .how-signal-head {
    position: relative;
    z-index: 6;
    flex: none;
  }

  .how-signal.is-enhanced .how-signal-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    height: auto;
    pointer-events: none;
  }

  /* Pinned How: same overlay as desktop, scaled for a phone.
     Each scene fills the pin and centers its art (Grow: iframe + pill). */
  .how-signal.is-enhanced .how-signal-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    pointer-events: none;
  }

  .how-signal.is-enhanced .how-signal-art,
  .how-signal.is-enhanced .how-signal-grow-below {
    pointer-events: auto;
  }

  .how-signal.is-enhanced .how-signal-art {
    order: unset;
    height: min(48dvh, 420px);
    aspect-ratio: auto;
  }

  /* Invite composition is 354×540 (Figma inner frame). You+Invite share this
     art box so the live camera can width-fill instead of letterboxing.
     Same specificity as the global enhanced overflow:hidden (pin19 desktop
     clip) so Talk caption + chips are not cropped on compact. */
  .how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="1"] .how-signal-art,
  .how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="2"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="1"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-art {
    width: min(100%, calc(70dvh * 354 / 558));
    height: auto;
    aspect-ratio: 354 / 558;
    max-height: 70dvh;
    overflow: visible;
  }

  /* youBoxMobile {433,0,354,360}. JS applyCam overwrites with live art size. */
  .how-signal-scene[data-how-signal-scene="1"] .how-signal-art-frame {
    --signal-scale: 0.9661;
    --signal-shift-x: 6px;
    --signal-shift-y: 90px;
  }

  /* talkBoxMobile {433,36,354,524}. Same Figma internals as pin27, 24px
     more cream above the dotted arc. shiftY = 270 - (36 + 262) = -28.
     Desktop ≥901px unchanged. */
  .how-signal-scene[data-how-signal-scene="3"] .how-signal-art-frame {
    --signal-shift-x: 6px;
    --signal-shift-y: -28px;
  }

  .how-signal.is-enhanced .how-signal-scene-grow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .how-signal.is-enhanced .how-signal-scene-grow .how-signal-art {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 606;
  }

  .how-signal.is-enhanced .how-signal-head-slot {
    min-height: 10rem;
  }

  .how-signal.is-enhanced .how-signal-copy-slot h3,
  .how-signal.is-enhanced .how-signal-intro h2 {
    max-width: none;
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.028em;
  }

  .how-signal.is-enhanced .how-signal-intro > p,
  .how-signal.is-enhanced .how-signal-copy-slot .how-signal-copy-text > p {
    width: min(560px, 100%);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: normal;
  }

  /* Scene art: closer to desktop sizes so the phone crop has air around it. */
  .how-signal.is-enhanced .how-signal-you-node {
    width: 140px;
    height: 140px;
    left: 546px;
    top: 120px;
    padding: 8px;
  }

  .how-signal.is-enhanced .how-signal-you-mark {
    width: 124px;
    height: 124px;
  }

  .how-signal.is-enhanced .how-signal-you-caption {
    left: 500px;
    top: 276px;
    width: 232px;
  }

  .how-signal.is-enhanced .how-signal-you-caption-blur {
    width: 232px;
  }

  .how-signal.is-enhanced .how-signal-you-name,
  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-person-name {
    font-size: 24px;
    line-height: 1;
  }

  .how-signal.is-enhanced .how-signal-you-label {
    font-size: 14px;
    line-height: 1.15;
  }

  .how-signal.is-enhanced .how-signal-avatar {
    width: 176px;
    height: 176px;
    padding: 10px;
  }

  .how-signal.is-enhanced .how-signal-avatar-photo,
  .how-signal.is-enhanced .how-signal-avatar-photo img,
  .how-signal.is-enhanced .how-signal-more-disc {
    width: 156px;
    height: 156px;
  }

  /* Compact Heldearly mark: fill the photo hole like Mom (no camera-scale
     upsample). clip-path on the SVG itself — parent overflow+radius does
     not clip inline SVG overflow on iOS. Desktop ≥901px keeps intrinsic 124. */
  .how-signal.is-enhanced .how-signal-talk-held .how-signal-avatar-photo {
    overflow: hidden;
  }

  .how-signal.is-enhanced .how-signal-talk-held .how-signal-talk-logo {
    display: block;
    width: 156px;
    height: 156px;
    max-width: none;
    overflow: hidden;
    border-radius: 999px;
    clip-path: circle(50%);
  }

  .how-signal.is-enhanced .how-signal-person-name {
    font-size: 32px;
    line-height: 1;
  }

  .how-signal.is-enhanced .how-signal-person-role {
    font-size: 16px;
    line-height: 1.15;
  }

  .how-signal.is-enhanced .how-signal-you-dim {
    left: 308px;
    top: 138px;
    width: 128px;
    height: 128px;
    font-size: 44px;
    line-height: 1;
    border-width: 2.5px;
  }

  .how-signal.is-enhanced .how-signal-you-dim-label {
    left: 272px;
    top: 278px;
    width: 200px;
    font-size: 16px;
    line-height: 1.2;
  }

  .how-signal.is-enhanced .how-signal-person {
    width: 260px;
  }

  .how-signal.is-enhanced .how-signal-invite-desktop {
    display: none;
  }

  .how-signal.is-enhanced .how-signal-invite-mobile {
    display: block;
  }

  .how-signal.is-enhanced .how-signal-mom {
    left: 447px;
    top: 348px;
    width: 112px;
  }

  .how-signal.is-enhanced .how-signal-more {
    display: flex;
    left: 661px;
    top: 348px;
    width: 112px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-avatar {
    width: 112px;
    height: 112px;
    padding: 6px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-avatar-photo,
  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-avatar-photo img,
  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-more-disc {
    width: 100px;
    height: 100px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-person-name {
    font-size: 24px;
    line-height: 1;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-person-role {
    font-size: 12px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-more-disc img {
    width: 44px;
    height: 44px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-chip-ride {
    left: 0;
    top: 0;
    width: 1232px;
    height: 540px;
  }

  /* Compact Invite “Send invite” pill: ~15% smaller than the 14px desktop
     chip so it matches the 112px Mom/+ nodes. Desktop ≥901px stays 14px. */
  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-chip {
    left: 0;
    top: 0;
    gap: 6px;
    padding: 7px 12px 7px 8px;
    font-size: 12px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-chip img {
    width: 16px;
    height: 16px;
  }

  .how-signal.is-enhanced .how-signal-invite-mobile path {
    stroke-width: 1.5px;
  }

  .how-signal.is-enhanced .how-signal-invite-mobile [data-signal="path-ghost-mobile"] {
    opacity: 0.4;
  }

  .how-signal.is-enhanced .how-signal-chip {
    gap: 6px;
    padding: 7px 12px 7px 8px;
    font-size: 12px;
  }

  .how-signal.is-enhanced .how-signal-chip img {
    width: 16px;
    height: 16px;
  }

  .how-signal.is-enhanced .how-signal-svg path {
    stroke-width: 1.5px;
  }

  .how-signal.is-enhanced .how-signal-talk-desktop {
    display: none;
  }

  .how-signal.is-enhanced .how-signal-talk-mobile {
    display: block;
  }

  /* Figma 1059:5343 internals unchanged. Camera is 354×524 so Talk sits
     a bit lower than pin27. Same width cap as You/Invite. Desktop ≥901px unchanged. */
  .how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="3"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-art {
    width: min(100%, calc(70dvh * 354 / 558));
    height: auto;
    aspect-ratio: 354 / 524;
    max-height: 70dvh;
    overflow: visible;
  }

  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-talk-rings,
  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-talk-blur {
    display: none;
  }

  /* Figma 1059:5343 — one combined caption under the avatars, not the
     1011:3681 ask-above / however-below split. Desktop ≥901px unchanged. */
  .how-signal.is-enhanced .how-signal-talk-ask {
    display: none;
  }

  .how-signal.is-enhanced .how-signal-talk-mom,
  .how-signal.is-enhanced .how-signal-talk-held {
    width: 140px;
    gap: 16px;
    top: 180px; /* 20px below top-arc endpoints (y:160); names sit 20px above bottom-arc endpoints (y:380) */
  }

  .how-signal.is-enhanced .how-signal-talk-mom {
    left: 433px;
  }

  .how-signal.is-enhanced .how-signal-talk-held {
    left: 647px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-avatar {
    width: 140px;
    height: 140px;
    padding: 8px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-avatar-photo,
  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-avatar-photo img {
    width: 124px;
    height: 124px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-talk-held .how-signal-talk-logo {
    display: block;
    width: 124px;
    height: 124px;
    max-width: none;
    overflow: hidden;
    border-radius: 999px;
    clip-path: circle(50%);
  }

  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-person-name {
    font-size: 24px;
    line-height: 1;
  }

  .how-signal.is-enhanced .how-signal-talk-mid {
    left: 433px;
    top: 470px;
    width: 354px;
    height: auto;
    gap: 16px;
    transform: none;
  }

  .how-signal.is-enhanced .how-signal-talk-line {
    display: block;
    width: 287px;
    font-size: 28px;
    line-height: 28px;
  }

  .how-signal.is-enhanced .how-signal-talk-br {
    display: block;
  }

  .how-signal.is-enhanced .how-signal-talk-however {
    display: none;
  }

  .how-signal.is-enhanced .how-signal-talk-chip {
    gap: 6px;
    padding: 5px 8px 5px 6px;
    font-size: 12px;
  }

  body.landing .how-signal.is-enhanced .how-signal-talk-chip img {
    width: 16px;
    height: 16px;
  }

  .how-signal.is-enhanced .how-signal-more-disc img {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 680px) {
  body.landing section.how.how-signal {
    padding: 56px 0 !important;
  }

  /* Phone sticky How: keep GET STARTED / INVITE off the viewport edge.
     Pad the head only — tablet 681–900 and ≥901 desktop stay flush. */
  .how-signal.is-enhanced .how-signal-head {
    padding-top: 24px;
  }

  /* Phone: center You / Invite / Talk / Grow in the leftover under that
     sticky copy. The 900px sheet overlay-centers in the full 100dvh pin,
     which left a cream band under Mom. Tablet keeps that overlay. */
  .how-signal.is-enhanced .how-signal-pin {
    display: flex;
    flex-direction: column;
  }

  .how-signal.is-enhanced .how-signal-stage {
    position: relative;
    inset: unset;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* pin34: leftover-center parked art mid ~537 vs viewport mid ~422,
     so Invite/Talk hugged the bottom. `translate` (not transform) so
     compact camera scale/shift on .how-signal-art-frame stays intact.
     Invite + Talk lift more; You + Grow a lighter mid-screen nudge. */
  .how-signal.is-enhanced [data-how-signal-scene="1"] .how-signal-art {
    translate: 0 -52px;
  }

  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-art {
    translate: 0 -76px;
  }

  /* Grow stays in flow. The old -52px lift parked the phone on the
     paragraph. flex-start + padding keeps ≥24px under the copy, and a
     slightly shorter shell leaves the See-example pill on screen. */
  .how-signal.is-enhanced [data-how-signal-scene="4"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="4"] .how-signal-grow-below {
    translate: none;
  }

  .how-signal.is-enhanced .how-signal-scene-grow {
    justify-content: flex-start;
    box-sizing: border-box;
    padding-top: 28px;
  }

  /* pin35: Invite solid + dotted paths start below Gatherer. Same Mom /
     Invite-more ends. Tablet 681–900 keeps the compact mobile paths. */
  .how-signal.is-enhanced .how-signal-invite-mobile {
    display: none;
  }

  .how-signal.is-enhanced .how-signal-invite-phone {
    display: block;
  }

  .how-signal-drop {
    padding: 4px 0 40px;
  }

  .how-signal-drop-track {
    --drop-h: 64px;
  }

  .how-signal-pin {
    width: calc(100% - 48px);
  }

  .how-signal-head {
    padding-bottom: 20px;
  }

  .how-signal-intro h2,
  .how-signal.is-enhanced .how-signal-copy-slot h3 {
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.028em;
  }

  .how-signal-art {
    height: 200px;
  }

  .how-signal-copy-inline {
    padding: 8px 20px 0;
  }

  .how-signal-copy h3 {
    font-size: 28px;
    line-height: 1.05;
  }

  .how-signal.is-enhanced .how-signal-art {
    height: min(46dvh, 390px);
  }

  .how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="1"] .how-signal-art,
  .how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="2"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="1"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="2"] .how-signal-art {
    width: min(100%, calc(70dvh * 354 / 558));
    height: auto;
    aspect-ratio: 354 / 558;
    max-height: 70dvh;
    overflow: visible;
  }

  .how-signal.is-enhanced .how-signal-scene[data-how-signal-scene="3"] .how-signal-art,
  .how-signal.is-enhanced [data-how-signal-scene="3"] .how-signal-art {
    width: min(100%, calc(70dvh * 354 / 558));
    height: auto;
    aspect-ratio: 354 / 524;
    max-height: 70dvh;
    overflow: visible;
  }

  .how-signal.is-enhanced .how-signal-scene-grow .how-signal-art {
    width: min(100%, calc(54dvh * 354 / 733.091));
    height: auto;
    aspect-ratio: 354 / 733.091;
    max-height: 54dvh;
  }

  /* iPhone 16 Pro shell (Figma 1239:1350). growBoxPhone must match
     left/top/width/height. Screen inset is 1239:1352 relative to the shell. */
  .how-signal-grow-window {
    left: 439px;
    top: -96.5455px;
    width: 354px;
    height: 733.091px;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.landing .how-signal-phone-shell {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
  }

  .how-signal-grow-stage {
    position: absolute;
    left: 13.49px;
    top: 10.92px;
    width: 327.479px;
    height: 711.254px;
    border-radius: 0;
    -webkit-mask-image: url("/marketing/how-signal/phone/screen-mask.svg");
    mask-image: url("/marketing/how-signal/phone/screen-mask.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
  }

  .how-signal-grow-frame {
    width: 390px;
    height: 844px;
    transform: scale(calc(327.479 / 390));
    transform-origin: top left;
  }

  .how-signal-phone-chrome {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .how-signal-phone-status {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
  }

  /* iOS status edge: systemUltraThinMaterialLight is blur 22.5,
     saturation 1.1, brightness +0.12. CSS blur reads heavier than
     Core Animation's radius, so 10px is the visual match. The mask
     is the Maps status-bar fade: solid through halfway, 0.7 at 75%,
     gone at the bottom. */
  .how-signal-phone-status::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(243, 239, 229, 0.16) 0%,
      rgba(243, 239, 229, 0.06) 50%,
      rgba(243, 239, 229, 0) 100%
    );
    -webkit-backdrop-filter: blur(10px) saturate(1.1) brightness(1.12);
    backdrop-filter: blur(10px) saturate(1.1) brightness(1.12);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.7) 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.7) 75%, transparent 100%);
  }

  .how-signal-phone-status img {
    position: absolute;
    z-index: 1;
  }

  .how-signal-phone-status img:first-child {
    left: 29px;
    top: 18px;
    width: 24.192px;
    height: 10.114px;
  }

  .how-signal-phone-status img:last-child {
    right: 21.25px;
    top: 18.61px;
    width: 58.176px;
    height: 9.891px;
  }

  .how-signal-phone-safari {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6.681px;
    box-sizing: border-box;
    width: 100%;
    height: 68.478px;
    padding: 10.5px 14.197px 6.681px;
    background: linear-gradient(to bottom, rgba(243, 239, 229, 0), rgba(243, 239, 229, 0.92));
    color: #000;
  }

  .how-signal-phone-safari-back,
  .how-signal-phone-safari-more,
  .how-signal-phone-safari-url {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40.92px;
    border: 0.835px solid #fff;
    border-radius: 66.808px;
    background: rgba(252, 252, 252, 0.72);
    box-shadow: 0 0.778px 1.945px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .how-signal-phone-safari-back,
  .how-signal-phone-safari-more {
    width: 40.92px;
    flex: none;
  }

  .how-signal-phone-safari-url {
    justify-content: space-between;
    width: 177.875px;
    height: 40.085px;
    padding: 0 8.351px;
    border-radius: 33.404px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 14.197px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }

  .how-signal-phone-safari svg {
    display: block;
    flex: none;
  }

  .how-signal.is-enhanced .how-signal-copy-slot h3,
  .how-signal.is-enhanced .how-signal-intro h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.028em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-signal-drop-pulse {
    animation: none;
    opacity: 0;
  }

  body.landing .how-signal-halo > img {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .how-signal.is-enhanced .how-signal-you-node,
  .how-signal.is-enhanced .how-signal-you-caption,
  .how-signal.is-enhanced .how-signal-mom {
    will-change: auto;
  }
}

/* Light paper tokens: ink, body, and green that pass AA on #f3efe5. */
.how-signal-eyebrow {
  color: #65a30d;
}

.how-signal-intro h2,
.how-signal-copy h3,
.how-signal-person-name,
.how-signal-you-name,
.how-signal-you-dim,
.how-signal-talk-mom,
.how-signal-talk-held {
  color: #022c22;
}

.how-signal-intro > p,
.how-signal-copy-text > p,
.how-signal-you-dim-label,
.how-signal-year {
  color: #404040;
}

.how-signal-onward {
  color: #047857;
}

/* pin31: even line lengths on every How body paragraph — intro, scene
   intros, and caption `p`s. Headings keep their own wrap. Wrapping only;
   cameras and the GSAP pin are unchanged. */
.how-signal p,
#how p {
  text-wrap: pretty;
  text-wrap: balance;
}