/* Shared by the static landing page and the React /welcome preview. */
.how-steps {
  background: #fff;
  color: #333;
  font-family: 'Inter', sans-serif;
  --how-top-offset: 80px;
  scroll-margin-top: var(--how-top-offset);
  container-type: inline-size;
}
.how-steps, .how-steps * { box-sizing: border-box; }
.how-steps .how-heading { text-align:center; padding: 70px 20px 40px; }
.how-steps .how-heading h2 {
  margin:0; font-family:'Inter',sans-serif; font-weight:700;
  font-size:clamp(28px,3.5vw,44px); line-height:1.23; letter-spacing:-.02em;
}
.how-steps .how-heading span { color:#0085ff; position:relative; display:inline-block; }
.how-steps .how-heading span::after {
  content:""; position:absolute; left:0; top:120%; width:100%; height:7px;
  background:url("/landing/how-steps/FinalHighlighterImg.svg") center / 100% 100% no-repeat;
  transform:translateY(-.08em); pointer-events:none;
}
.how-steps .how-story { max-width:1198px; margin:auto; padding:0 20px 65px; }
.how-steps .how-phone-track { display:none; }
.how-steps .how-pair {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,4vw,70px);
  margin:24px 0; padding:clamp(24px,5vw,70px);
  border:6px solid rgba(180,126,87,.13); border-radius:clamp(28px,5vw,60px);
  background:linear-gradient(#fff7f2,#fffbf9);
}
.how-steps .how-pair-image { width:100%; max-height:550px; object-fit:contain; }
.how-steps .how-copy { min-width:0; }
.how-steps .how-eyebrow { color:#0074db; font-size:15px; font-weight:700; text-transform:uppercase; }
.how-steps .how-title {
  margin:16px 0; font-family:'Inter',sans-serif; font-size:clamp(26px,3vw,32px);
  font-weight:700; line-height:1.35; letter-spacing:0;
}
.how-steps .how-title span { color:#0085ff; }
.how-steps .how-desc { margin:0 0 20px; color:#595959; font-size:16px; line-height:1.8; font-weight:500; }
.how-steps .how-features { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.how-steps .how-features li { display:flex; align-items:flex-start; gap:16px; font-size:16px; line-height:1.7; }
.how-steps .how-features li::before {
  content:"✓"; flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  background:#27c07d; color:white; text-align:center; font-size:18px; line-height:28px;
}
.how-steps .how-progress { display:none; }
@container (max-width:768px) {
  .how-steps .how-heading { padding:56px 20px 32px; }
  .how-steps .how-story { padding:0 10px 40px; }
  .how-steps .how-pair { grid-template-columns:1fr; gap:16px; padding:24px; margin:16px 0; border-width:4px; }
  .how-steps .how-pair-image { max-height:290px; }
  .how-steps .how-title { margin:12px 0; }
  .how-steps .how-desc { line-height:1.65; }
  .how-steps .how-features { gap:12px; }
}
@media (max-width:380px) {
  .how-steps .how-pair { padding:18px; }
  .how-steps .how-pair-image { max-height:220px; }
  .how-steps .how-features li { font-size:15px; }
}
/* The shared markup is a full-height, readable sequence by default. JavaScript
   adds is-animated only when the section can support a sticky composition. */
@media (min-width:901px) and (min-height:701px) and (prefers-reduced-motion:no-preference) {
  .how-steps.is-animated .how-story { max-width:none; height:400vh; padding:0; position:relative; }
  .how-steps.is-animated .how-sticky {
    position:sticky; top:var(--how-top-offset); height:calc(100vh - var(--how-top-offset));
    display:flex; align-items:center; justify-content:center; padding:20px 40px;
  }
  .how-steps.is-animated .how-card {
    width:100%; max-width:1198px; height:min(856px,calc(100vh - var(--how-top-offset) - 40px));
    display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
    padding:clamp(35px,5vw,70px) clamp(40px,6vw,84px);
    border:6px solid rgba(180,126,87,.13); border-radius:60px;
    background:linear-gradient(#fff7f2,#fffbf9);
  }
  .how-steps.is-animated .how-card-inner { display:contents; }
  .how-steps.is-animated .how-phone-track { display:grid; height:100%; min-height:0; position:relative; grid-column:1; grid-row:1; }
  .how-steps.is-animated .how-copy-track { display:grid; grid-column:2; grid-row:1; align-items:center; min-width:0; }
  .how-steps.is-animated .how-phone-track img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    opacity:0; visibility:hidden; transform:translateY(20px);
    transition:opacity .55s ease,transform .55s ease,visibility .55s;
  }
  .how-steps.is-animated .how-phone-track img.is-active { opacity:1; visibility:visible; transform:none; }
  .how-steps.is-animated .how-pair-image { display:none; }
  .how-steps.is-animated .how-pair {
    display:block; grid-column:1; grid-row:1; margin:0; padding:0; border:0;
    border-radius:0; background:none; opacity:0; visibility:hidden;
    pointer-events:none; transform:translateY(16px);
    transition:opacity .55s ease,transform .55s ease,visibility .55s;
  }
  .how-steps.is-animated .how-pair.is-active { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .how-steps.is-animated .how-progress { display:block; height:8px; max-width:320px; background:#fff; border:1px solid #e0e0e0; border-radius:100px; overflow:hidden; margin-bottom:40px; }
  .how-steps.is-animated .how-progress-fill { display:block; width:25%; height:100%; border-radius:100px; background:#b47e57; transition:width .4s ease; }
}
/* This follows the supplied phone layout: a sticky viewport, a phone that
   shrinks to reveal copy, and measured per-state scroll distances. The
   container query also supports /welcome inside its narrower app shell. */
@media (prefers-reduced-motion:no-preference) {
  @container (max-width:1024px) {
    .how-steps.is-mobile-animated .how-story {
      max-width:none; position:relative; padding:0; margin:0; height:100dvh;
    }
    .how-steps.is-mobile-animated .how-sticky {
      position:sticky; top:var(--how-top-offset); width:100%;
      height:calc(100dvh - var(--how-top-offset)); padding:10px;
      display:flex; align-items:stretch; justify-content:center; overflow:hidden;
    }
    .how-steps.is-mobile-animated .how-card {
      width:100%; height:100%; border:4px solid rgba(180,126,87,.13);
      border-radius:28px; overflow:hidden; background:linear-gradient(#fff7f2,#fffbf9);
    }
    .how-steps.is-mobile-animated .how-card-inner {
      display:flex; flex-direction:column; width:100%; min-height:100%;
      padding:24px 24px 34px; gap:24px; transform:translate3d(0,0,0);
      will-change:transform;
    }
    .how-steps.is-mobile-animated .how-phone-track {
      position:relative; display:block; width:min(300px,74vw); max-width:100%;
      height:365px; flex:0 0 365px; margin:0 auto; will-change:height,flex-basis;
    }
    .how-steps.is-mobile-animated .how-phone-track img {
      position:absolute; inset:0; display:block; width:100%; height:100%;
      object-fit:contain; opacity:0; visibility:hidden; transform:translateY(18px);
      transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),visibility .55s;
    }
    .how-steps.is-mobile-animated .how-phone-track img.is-active {
      opacity:1; visibility:visible; transform:none;
    }
    .how-steps.is-mobile-animated .how-copy-track {
      position:relative; width:100%; min-width:0;
    }
    .how-steps.is-mobile-animated .how-pair-image { display:none; }
    .how-steps.is-mobile-animated .how-pair {
      position:absolute; top:0; left:0; display:block; width:100%;
      margin:0; padding:0; border:0; border-radius:0; background:none;
      opacity:0; visibility:hidden; transform:translateY(16px);
      transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),visibility .5s;
    }
    .how-steps.is-mobile-animated .how-pair.is-active {
      position:relative; opacity:1; visibility:visible; transform:none;
    }
    .how-steps.is-mobile-animated .how-progress {
      display:block; width:200px; max-width:55%; height:7px; margin-bottom:24px;
      background:#fff; border:1px solid #e0e0e0; border-radius:100px; overflow:hidden;
    }
    .how-steps.is-mobile-animated .how-progress-fill {
      display:block; width:25%; height:100%; background:#b47e57; border-radius:100px;
      transition:width .4s cubic-bezier(.16,1,.3,1);
    }
    .how-steps.is-mobile-animated .how-eyebrow { display:block; margin-bottom:16px; }
    .how-steps.is-mobile-animated .how-title {
      font-size:clamp(27px,7vw,32px); line-height:1.17; margin:0 0 18px;
    }
    .how-steps.is-mobile-animated .how-desc {
      font-size:16px; line-height:1.55; margin:0 0 22px;
    }
    .how-steps.is-mobile-animated .how-features { gap:16px; }
    .how-steps.is-mobile-animated .how-features li {
      font-size:15px; line-height:1.48; gap:14px;
    }
  }
  @container (max-width:480px) {
    .how-steps.is-mobile-animated .how-card { border-radius:24px; }
    .how-steps.is-mobile-animated .how-card-inner { padding:20px 20px 32px; gap:22px; }
    .how-steps.is-mobile-animated .how-phone-track {
      width:min(285px,76vw); height:350px; flex-basis:350px;
    }
    .how-steps.is-mobile-animated .how-progress { margin-bottom:22px; }
    .how-steps.is-mobile-animated .how-eyebrow { margin-bottom:14px; font-size:14px; }
    .how-steps.is-mobile-animated .how-title { font-size:28px; margin-bottom:17px; }
    .how-steps.is-mobile-animated .how-desc { font-size:15px; line-height:1.58; margin-bottom:20px; }
    .how-steps.is-mobile-animated .how-features { gap:15px; }
  }
}
@media (prefers-reduced-motion:reduce) {
  .how-steps *, .how-steps *::before, .how-steps *::after { transition:none !important; animation:none !important; }
}