/* ============================================================
   "How it works" — Calendly 2-col with sticky head + sticky visual
   ============================================================
   Layout (desktop, >=992px):
     LEFT (1fr)               | RIGHT (1fr)
     .hw-head (sticky top)    | .hw-right (sticky)
     .hw-step  (75vh, dim)    |   .hw-visuals
     .hw-step  (75vh, dim)    |     .hw-vis 0/1/2/3 absolute,
     .hw-step  (75vh, dim)    |     only one is-active
     .hw-step  (75vh, dim)    |

   - RED head sticks at top of left column
   - YELLOW step list scrolls under it; each step has min-height:75vh
     so it gets a full screen of scroll travel
   - Inactive steps dim to opacity 0.3, active jumps to 1
   - GREEN visual sticks at top of right column; all 4 .hw-vis are
     absolute-stacked, only active is opacity 1, swap is fast (0.25s)
   - Click any step to scroll-jump to it
   Mobile (<992px): right column hidden; each step contains its own
   inline mockup (.hw-step-vis-mobile). Flat stack, natural scroll,
   no JS step switching, no pin, no sticky.
   ============================================================ */

.section--how { padding: 5rem 0; }
@media (max-width: 768px) {
  .section--how { padding: 3rem 0; }
}

.hw-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hw-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Sentinel — 1px invisible marker placed just before .hw-head. JS
   watches it with IntersectionObserver to know when the sticky head
   has engaged (sentinel scrolls above the sticky line). */
.hw-head-sentinel {
  height: 1px;
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* RED: sticky head — mobile is just a static block */
.hw-head { margin-bottom: 1.5rem; }
.hw-head h2 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 0.85rem 0 0.85rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hw-head p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-strong);
  margin: 0;
  max-width: 56ch;
}

/* YELLOW: step list */
.hw-steps {
  display: flex;
  flex-direction: column;
}
.hw-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.hw-step:last-child { border-bottom: none; }
.hw-step-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.hw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: #FFFFFF;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.hw-step-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.hw-step-copy h3 {
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hw-step-copy p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-strong);
  margin: 0;
  max-width: 56ch;
}
.section--dark .hw-step-copy p,
.section--dark-glow .hw-step-copy p { color: var(--on-dark-muted); }

/* Mobile inline visual — shown by default, hidden on desktop */
.hw-step-vis-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  min-width: 0;
  width: 100%;
}

/* RIGHT column hidden by default (mobile-first) */
.hw-right { display: none; }

/* ---- MOBILE / TABLET INTERACTIVE PATTERN (<992px) ----
   Stack the section vertically with sticky head + sticky visual at
   the top of the viewport while step copies scroll past below.
   Same interactive feel as the desktop 2-col pattern, just rotated
   into a column. */
@media (max-width: 991.98px) {
  .hw-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Dissolve .hw-left so its children (.hw-head, .hw-steps) become
     direct flex children of .hw-row alongside .hw-right. Then flex
     `order` lets us arrange head → visuals → steps top-to-bottom. */
  .hw-left { display: contents; }

  .hw-head {
    order: 1;
    position: sticky;
    top: 64px; /* below mobile nav */
    background: var(--surface);
    padding: 0.85rem 0 0.95rem;
    margin: 0;
    z-index: 3;
    border-bottom: 1px solid var(--border);
    /* Visually fade + slide up when stuck — but DO NOT shrink the flow
       box. Collapsing height (max-height: 0) caused a layout shift, which
       moved subsequent content up, which moved the sentinel relative to
       the viewport just enough to retrigger the IO and create an
       infinite stick/unstick bounce on step 1. Keeping the box intact
       avoids the feedback loop entirely. */
    transition:
      opacity 0.25s ease,
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hw-head h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    line-height: 1.2;
    margin: 0.4rem 0 0;
  }
  /* Stuck state — fade out + slide up. Visual stack still moves up to
     fill the gap via .hw-row.is-head-stuck .hw-right { top: 64px }. */
  .hw-head.is-stuck {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
  }

  /* Mobile visual stack: sticky beneath the head, holds the active
     mockup. Container height tuned so the scaled-up mockups have room
     to breathe horizontally without dominating the viewport. */
  .hw-right {
    order: 2;
    display: block;
    position: sticky;
    /* Stick top = nav (64) + head approx (~95) */
    top: calc(64px + 95px);
    height: 42vh;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    /* Animate the top change when head collapses */
    transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* When head is collapsed (stuck), pull the visual flush against
     the nav. No transparent gap = no step content bleeding through
     between the nav and the visual area. */
  .hw-row.is-head-stuck .hw-right {
    top: 64px;
  }
  .hw-visuals {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: visible so the phone's drop shadow isn't sharply
       clipped at the visual area's edges */
    overflow: visible;
  }
  .hw-vis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.98) translateY(8px);
    transition:
      opacity 0.25s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .hw-vis.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  /* Scale down the inner mockups so they fit inside the visual area
     on mobile. Bumped from 0.72 → 0.86 so the mockups fill the
     available width instead of leaving big dead margins on the sides.
     Mockups have fixed pixel widths/heights internally so transform-
     scale is the cleanest proportional shrink. */
  .hw-right .hw-mock--browser {
    transform: scale(0.86);
    transform-origin: center center;
  }
  .hw-right .hw-leads {
    transform: scale(0.86);
    transform-origin: center center;
  }
  .hw-right .hw-phone {
    transform: scale(0.55);
    transform-origin: center center;
  }
  /* Smaller phones — drop scale a notch so content doesn't overflow */
  @media (max-width: 380px) {
    .hw-right .hw-mock--browser,
    .hw-right .hw-leads {
      transform: scale(0.78);
    }
  }
  @media (max-width: 340px) {
    .hw-right .hw-mock--browser,
    .hw-right .hw-leads {
      transform: scale(0.7);
    }
  }

  /* All mobile mockups: collapse vertical content so each renders in a
     wider/shorter "desktop monitor" ratio (~16:10) instead of a tall
     phone-card shape. Width stays wide via the scale bump above; these
     rules cut the natural height roughly in half. */

  /* --- Coastline browser (step 1) ---
     Hide the OS-style top bar (dots + URL chip) on mobile to reclaim
     vertical space. Otherwise show ALL the desktop hero content (rating
     chip, headline, subtitle, both CTAs, full nav links) — just at
     smaller font sizes. Frame stays at ~1.6:1 (16:10). */
  .hw-right .hw-mock-bar { display: none; }

  /* Top nav: brand + Services/About/Reviews + Get a quote — keep on one line */
  .hw-right .hw-website-nav { padding: 0.45rem 0.6rem; gap: 0.35rem; flex-wrap: nowrap; }
  .hw-right .hw-website-nav strong {
    font-size: 0.68rem;
    gap: 0.28rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .hw-right .hw-website-logo-img { width: 16px; height: 16px; }
  .hw-right .hw-website-nav-links {
    display: inline-flex; /* override the <=480px hide rule below */
    gap: 0.45rem;
    font-size: 0.55rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .hw-right .hw-website-cta {
    font-size: 0.55rem;
    padding: 0.22rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hero — all 4 elements (rating chip, h4, sub, actions) centered */
  .hw-right .hw-website-hero {
    min-height: 160px;
    flex: 0 0 auto;
  }
  .hw-right .hw-website-hero-overlay {
    padding: 0.7rem 0.85rem;
    gap: 0.35rem;
    align-items: center;
    text-align: center;
  }
  .hw-right .hw-website-rating {
    font-size: 0.56rem;
    padding: 0.14rem 0.5rem;
    gap: 0.25rem;
  }
  .hw-right .hw-website-stars { font-size: 0.6rem; }
  .hw-right .hw-website-hero-overlay .mock-headline {
    font-size: 1rem;
    line-height: 1.18;
    max-width: 100%;
  }
  .hw-right .hw-website-sub {
    font-size: 0.6rem;
    line-height: 1.25;
    margin-top: -0.05rem;
    max-width: 100%;
  }
  .hw-right .hw-website-actions {
    gap: 0.35rem;
    margin-top: 0.25rem;
    justify-content: center;
  }
  .hw-right .hw-website-btn {
    font-size: 0.65rem;
    padding: 0.32rem 0.65rem;
  }

  /* --- Padlock leads card (step 2) --- */
  .hw-right .hw-leads {
    padding: 0.85rem 1rem 0.7rem;
    gap: 0.55rem;
  }
  .hw-right .hw-leads-list {
    gap: 0.4rem;
  }
  .hw-right .hw-lead {
    padding: 0.5rem 0.65rem;
    gap: 0.55rem;
  }
  .hw-right .hw-lead-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }
  .hw-right .hw-lead-head strong {
    font-size: 0.78rem;
  }
  /* Truncate the quote + email/time line to 1 line each so each lead
     row stays short (~50px). 2 short rows give a landscape card shape. */
  .hw-right .hw-lead-body p {
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .hw-right .hw-lead-meta {
    font-size: 0.62rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .hw-right .hw-leads-footer {
    padding-top: 0.45rem;
    font-size: 0.65rem;
  }
  .hw-right .hw-leads-shield-lock {
    width: 60px;
  }
  /* Drop the 3rd lead — 2 visible leads is enough to convey the "live
     stream" idea and keeps the card landscape-shaped on mobile */
  .hw-right .hw-leads-list .hw-lead:nth-child(n+3) {
    display: none;
  }

  /* --- RBS dashboard (step 4) ---
     Mirror the desktop layout — full sidebar with all 4 nav items,
     stat cards with prominent numbers above their label, all 4 lead
     rows including the green "booked" row. Just smaller fonts. */
  .hw-right .hw-dash {
    min-height: 0;
    grid-template-columns: 78px minmax(0, 1fr);
  }
  .hw-right .hw-dash-side {
    padding: 0.7rem 0.5rem;
    gap: 0.6rem;
  }
  .hw-right .hw-dash-brand { font-size: 0.7rem; gap: 0.32rem; }
  .hw-right .hw-dash-brand-mark { width: 7px; height: 7px; }
  .hw-right .hw-dash-side ul { gap: 0.08rem; }
  .hw-right .hw-dash-side li {
    padding: 0.28rem 0.4rem;
    font-size: 0.62rem;
    gap: 0.3rem;
    border-radius: 5px;
  }
  .hw-right .hw-dash-side-icon {
    font-size: 0.65rem;
    width: 10px;
  }
  .hw-right .hw-dash-main {
    padding: 0.85rem 1rem 1rem;
    gap: 0.7rem;
  }
  .hw-right .hw-dash-stats { gap: 0.4rem; }
  /* Proper stat card — big number above small uppercase label, just
     like desktop. Number stays prominent so the dashboard reads as
     a real metrics view. */
  .hw-right .hw-dash-stat {
    padding: 0.55rem 0.6rem;
    gap: 0.15rem;
    min-height: 0;
  }
  .hw-right .hw-dash-stat strong { font-size: 1.1rem; line-height: 1.05; }
  .hw-right .hw-dash-stat span {
    font-size: 0.55rem;
    line-height: 1.15;
    letter-spacing: 0.04em;
  }
  .hw-right .hw-dash-table { gap: 0.35rem; }
  .hw-right .hw-dash-row {
    padding: 0.45rem 0.7rem;
  }
  .hw-right .hw-dash-name { font-size: 0.76rem; }
  .hw-right .hw-dash-time { font-size: 0.64rem; }
  /* All 4 lead rows visible (incl. the booked/green row) — matches desktop */
  /* Phone in portrait viewport: SHAPE the frame as landscape (wider
     than tall) so it uses the available horizontal width better. NOT
     a rotate transform — instead, dimensions and the notch position
     change so the email content stays readable upright inside a
     landscape phone outline. Same internal text + styling. */
  @media (orientation: portrait) {
    /* Landscape phone — same 300:570 proportions as the desktop
       portrait phone, just rotated. 570 wide × 300 tall keeps the
       real phone aspect ratio (1.9:1) so it doesn't look like a
       tablet. flex-shrink: 0 stops the flex container from squeezing
       the width. */
    .hw-right .hw-phone {
      width: 570px;
      height: 300px;
      flex-shrink: 0;
      border-radius: 36px;
      transform: scale(0.58);
      transform-origin: center center;
    }
    /* Sig + footer hidden in landscape so the higher-priority content
       (subject → meta → body → CTA → fine print) fits comfortably
       in the shorter landscape frame */
    .hw-right .hw-phone-mail-sig,
    .hw-right .hw-phone-mail-footer {
      display: none;
    }
    /* Notch slides to the left edge (where the camera would sit if
       the phone were rotated 90° clockwise from portrait) */
    .hw-right .hw-phone-notch {
      top: 50%;
      left: 4px;
      transform: translateY(-50%);
      width: 22px;
      height: 90px;
      border-radius: 0 14px 14px 0;
    }
    /* Screen fills the landscape area; pad a bit on the left so the
       notch doesn't crowd the content */
    .hw-right .hw-phone-screen {
      border-radius: 24px;
      padding-left: 18px;
    }
    /* Status bar stays at the top (now full landscape width) */
    .hw-right .hw-phone-status {
      padding: 0.4rem 1rem 0.35rem;
    }
    /* Header row stays horizontal */
    .hw-right .hw-phone-mail-header {
      padding: 0.4rem 1rem 0.45rem;
    }
    /* Email body — tighter padding + slightly smaller text so the
       full content (subject → meta → body → CTA → fine → sig → footer)
       fits inside the shorter landscape height. */
    .hw-right .hw-phone-mail {
      padding: 0.55rem 1rem 0.7rem;
      gap: 0.45rem;
    }
    .hw-right .hw-phone-mail .mock-headline {
      font-size: 0.85rem;
      margin: 0;
    }
    .hw-right .hw-phone-mail-meta {
      gap: 0.5rem;
    }
    .hw-right .hw-phone-mail-avatar {
      width: 24px;
      height: 24px;
      font-size: 0.65rem;
    }
    .hw-right .hw-phone-mail-meta-text strong { font-size: 0.72rem; }
    .hw-right .hw-phone-mail-meta-text span { font-size: 0.6rem; }
    .hw-right .hw-phone-mail-body {
      gap: 0.35rem;
    }
    .hw-right .hw-phone-mail-body p {
      font-size: 0.7rem;
      line-height: 1.4;
      margin: 0;
    }
    .hw-right .hw-phone-mail-cta {
      padding: 0.45rem 0.7rem;
      font-size: 0.72rem;
    }
    .hw-right .hw-phone-mail-fine {
      font-size: 0.68rem;
    }
    .hw-right .hw-phone-mail-sig strong { font-size: 0.7rem; }
    .hw-right .hw-phone-mail-sig span { font-size: 0.62rem; }
    .hw-right .hw-phone-mail-footer {
      padding: 0.3rem 1rem;
      font-size: 0.6rem;
    }
  }
  /* Smaller portrait phones — drop the scale a bit more */
  @media (orientation: portrait) and (max-width: 380px) {
    .hw-right .hw-phone {
      transform: scale(0.5);
    }
  }
  @media (orientation: portrait) and (max-width: 340px) {
    .hw-right .hw-phone {
      transform: scale(0.42);
    }
  }

  /* Step list scrolls below the sticky head + visual */
  .hw-steps { order: 3; }
  .hw-step {
    min-height: 50vh;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
    /* Copy aligned to TOP (not centered) so when scroll-snap fires, the
       headline lands right where the snap target is — instead of ~25vh
       below it (which happens with justify-content: center on a 50vh
       block) */
    justify-content: flex-start;
    cursor: pointer;
    /* Each step's top is the snap target. scroll-margin-top pushes the
       snap line down so the step lands BELOW the sticky nav + visual
       (≈64px nav + 42vh visual), with a touch of breathing room. */
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: calc(64px + 42vh + 1rem);
  }
  .hw-step:last-child { border-bottom: none; }
  .hw-step .hw-step-copy {
    opacity: 0.35;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hw-step.is-active .hw-step-copy { opacity: 1; }

  /* The inline mockup per step isn't needed anymore — the active
     mockup is shown in the sticky .hw-right above. */
  .hw-step-vis-mobile { display: none; }
}

/* Gentle scroll-snap on mobile only — step headers softly pull into
   place as the user scrolls. `proximity` (vs mandatory) means the snap
   only kicks in when near a step boundary, so fast scrolls + scrolls
   between sections feel natural. */
@media (max-width: 991.98px) {
  html {
    scroll-snap-type: y proximity;
  }
  /* Tug from the end of step 4 into the "4 out of 5" results section.
     Same proximity snap pattern as the steps — engages only when the
     user is close to the section boundary, so a normal full-section
     scroll doesn't feel forced. */
  #results {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 64px; /* land top of section right below nav */
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* ---- DESKTOP layout ---- */
@media (min-width: 992px) {
  .hw-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
  .hw-head {
    position: sticky;
    /* Sit flush against the nav so there's no transparent gap for
       scrolled-up step content to bleed through. Nav is ~72px tall. */
    top: 72px;
    background: var(--surface);
    /* Internal padding gives visual breathing room while the white
       background covers everything between the nav bottom and the
       first step. */
    padding: 1.25rem 0 1.25rem;
    margin-bottom: 0;
    z-index: 3;
    border-bottom: 1px solid var(--border);
  }
  .hw-head h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    margin: 0.85rem 0 0.75rem;
  }
  .hw-step {
    /* Scroll travel between steps. Smaller = faster transitions
       and less dead space; larger = more deliberate scroll cadence.
       55vh keeps each step solidly in view for a comfortable read
       while cutting ~25% of the empty gap that 75vh leaves behind. */
    min-height: 55vh;
    justify-content: center;
    padding: 1.25rem 0;
    border-bottom: none;
    cursor: pointer;
    border-radius: 6px;
    position: relative;
    /* Opacity dim lives on the inner .hw-step-copy now so the divider
       (::after below) stays at full strength. */
  }
  /* Dim/active state on the copy block, not the wrapper, so the
     divider line below stays crisp regardless of active state. */
  .hw-step .hw-step-copy {
    opacity: 0.3;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hw-step.is-active .hw-step-copy { opacity: 1; }
  .hw-step:hover .hw-step-copy { opacity: 0.6; }
  .hw-step.is-active:hover .hw-step-copy { opacity: 1; }

  /* Thin divider between steps, same style as the sticky head's
     bottom border. */
  .hw-step::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
  }
  .hw-step:last-child::after { display: none; }
  .hw-step-copy h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
  .hw-step-copy p { font-size: 1.0625rem; line-height: 1.65; }

  /* Hide mobile inline visual on desktop */
  .hw-step-vis-mobile { display: none; }

  /* GREEN: sticky visual stack */
  .hw-right {
    display: block;
    position: sticky;
    top: 90px;
    height: calc(100vh - 90px - 32px);
    max-height: 720px;
    align-self: start;
  }
  .hw-visuals {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hw-vis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.98) translateY(8px);
    transition:
      opacity 0.25s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .hw-vis.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
}

/* Reduced motion: no dim, no transitions */
@media (prefers-reduced-motion: reduce) {
  .hw-step,
  .hw-vis {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}