/* ==================================================================
   How It Works — kwizzbit/how-it-works (whole-file segment)
   Faithful slice of /HTML/howitworks.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

    .how-it-works {
      background-color: var(--wp--preset--color--cream);
      padding-block: 10rem 7rem;
    }

    /* INTRO */
    .how-it-works__intro {
      text-align: center;
      padding-bottom: 3rem;
    }
    .how-it-works__intro-cta {
      margin-top: var(--wp--preset--spacing--60);
    }
    /* House image — replaces emoji, 137×130px per brief */
    .how-it-works__house {
      width: 110px;
      height: 104px;
      display: block;
      margin: 0 auto 1.125rem;
      object-fit: contain;
    }
    /* Spring pop-in — same curve + overshoot as the hero avatar. Gated behind
       .has-house-pop (added by JS) so no-JS / reduced-motion users always see it. */
    @keyframes hiw-house-pop {
      0%   { transform: scale(0); }
      80%  { transform: scale(1.12); }
      100% { transform: scale(1); }
    }
    .how-it-works__house.has-house-pop            { transform: scale(0); }
    .how-it-works__house.has-house-pop.is-popped  {
      animation: hiw-house-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @media (prefers-reduced-motion: reduce) {
      .how-it-works__house.has-house-pop { transform: none; animation: none; }
    }

    /* Headline wrap — positioning context for backdrop SVG */
    .how-it-works__headline-wrap {
      position: relative;
      display: inline-block;
    }

    /* Backdrop squares — centred behind headline text */
    .how-it-works__backdrop {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 486px;
      height: 282px;
      pointer-events: none;
      z-index: 0;
      opacity: 0.7;
    }

    .how-it-works__backdrop svg {
      width: 100%;
      height: 100%;
    }

    /* Ensure headline sits above backdrop */
    .how-it-works__headline {
      position: relative;
      z-index: 1;
    }
    .how-it-works__headline {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: 4.0625rem; /* 65px — Sketch spec */
      line-height: 60px;
      letter-spacing: -0.10769em;
      color: var(--wp--preset--color--ink);
      max-width: 656px;
      margin-inline: auto;
    }
    .how-it-works__headline .hiw-arrow {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      letter-spacing: 0;
      color: var(--wp--preset--color--coral);
      font-size: 0.8em;
      vertical-align: middle;
      display: inline-block;
      margin-inline: 0.06em;
    }

    /* Arrow animations — respect prefers-reduced-motion */
    @keyframes arrow-nudge-right {
      0%   { transform: translateX(0); }
      50%  { transform: translateX(7px); }
      100% { transform: translateX(0); }
    }
    @keyframes arrow-nudge-down {
      0%   { transform: translateY(0); }
      50%  { transform: translateY(7px); }
      100% { transform: translateY(0); }
    }

    .hiw-arrow--right {
      animation: arrow-nudge-right 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    .hiw-arrow--down {
      animation: arrow-nudge-down 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      /* slight delay so they don't move in perfect sync */
      animation-delay: 0.15s;
    }

    @media (prefers-reduced-motion: reduce) {
      .hiw-arrow--right,
      .hiw-arrow--down { animation: none; }
    }

    /* STEPS */
    .how-it-works__steps {
      display: flex;
      flex-direction: column;
    }
    .hiw-step {
      padding-block: 1.75rem;
    }
    .hiw-step__inner {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      max-width: 1100px;
      margin-inline: auto;
      gap: 3rem;
    }
    .hiw-step__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      z-index: 2;
    }
    .hiw-step__media {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    /* Alternating layout */
    .hiw-step--1 .hiw-step__content,
    .hiw-step--3 .hiw-step__content { order: 1; }
    .hiw-step--1 .hiw-step__media,
    .hiw-step--3 .hiw-step__media   { order: 2; justify-content: flex-end; }
    .hiw-step--2 .hiw-step__media   { order: 1; justify-content: flex-start; }
    .hiw-step--2 .hiw-step__content { order: 2; }

    /* STEP TYPOGRAPHY */
    .hiw-step__eyebrow {
      font-family: "Pixelar", monospace;
      font-weight: 400;
      font-size: 19px;
      line-height: 1;
      letter-spacing: 0.06em;
      color: var(--wp--preset--color--coral);
      margin-bottom: 2px; /* tight to subheader */
    }
    .hiw-step__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: 2.8125rem; /* 45px — matches features-tour title */
      line-height: 1; /* 45px at 45px font-size */
      letter-spacing: -0.091em; /* Sketch -4.09pt ÷ 45pt */
      color: var(--wp--preset--color--ink);
      width: max-content;
      max-width: 100%;
      margin-bottom: calc(var(--wp--preset--spacing--50) - 10px); /* 14px — tighter to lead */
    }
    .hiw-step__lead {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.9375rem; /* 15px */
      line-height: 1.412;
      color: var(--wp--preset--color--ink);
      max-width: 280px;
      margin-bottom: 0; /* now the last element in .hiw-step__content — no CTA below it */
    }

    /* DASHED CONNECTOR */
    /* Dashed connector — desktop only.
       Stretches from text block edge to behind the phone visual.
       Steps 1 & 3: anchored left at grid midpoint, extends right into visual.
       Step 2: anchored right at grid midpoint, extends left into visual.
       z-index:0 so the visual image sits above the line end.          */
    .hiw-step__connector {
      position: absolute;
      top: 50%;
      height: 0;
      border-top: 2px dashed var(--wp--preset--color--coral);
      pointer-events: none;
      opacity: 0.55;
      z-index: 0;
      width: 140px;
    }

    /* Steps 1 & 3: line starts at inner edge of content (left col),
       runs rightward into the visual */
    .hiw-step--1 .hiw-step__connector {
      left: calc(50% - 63px);
      transform: translateY(-50%);
    }

    .hiw-step--3 .hiw-step__connector {
      left: calc(50% - 79px);
      transform: translateY(-50%);
    }

    /* Step 2: line starts at inner edge of visual (left col),
       runs rightward into the content */
    .hiw-step--2 .hiw-step__connector {
      left: calc(50% - 94px);
      transform: translateY(-50%);
    }

    /* VISUALS */
    .hiw-step__visual { width: 100%; }
    .hiw-step__visual img { width: 100%; height: auto; display: block; }
    .hiw-step--1 .hiw-step__visual { max-width: 460px; margin-right: 70px; }
    .hiw-step--2 .hiw-step__visual { max-width: 460px; margin-left: 30px; }
    .hiw-step--3 .hiw-step__visual { max-width: 480px; margin-right: 30px; }

    /* TABLET */
    @media (min-width: 641px) and (max-width: 1023px) {
      .hiw-step__title { font-size: clamp(2rem, 4.5vw, 2.5rem); } /* match features-tour tablet */
      /* Tablet: desktop type sizes, single-column stacked layout, no connectors */

      /* Single column — content always on top, visual below */
      .hiw-step__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 600px;
      }

      .hiw-step--1 .hiw-step__content,
      .hiw-step--2 .hiw-step__content,
      .hiw-step--3 .hiw-step__content { order: 1; }

      .hiw-step--1 .hiw-step__media,
      .hiw-step--2 .hiw-step__media,
      .hiw-step--3 .hiw-step__media {
        order: 2;
        justify-content: center;
      }

      /* Hide connector lines on tablet */
      .hiw-step__connector { display: none; }

      /* Visuals full-width of the single column */
      .hiw-step--1 .hiw-step__visual,
      .hiw-step--2 .hiw-step__visual,
      .hiw-step--3 .hiw-step__visual {
        max-width: 480px;
        margin-right: 0;
        margin-left: 0;
      }

      /* Lead paragraph — restore desktop width */
      .hiw-step__lead { max-width: 316px; }

      /* Reset hand margins that used px offsets designed for desktop 2-col */
      .hiw-step--1 .hiw-hand,
      .hiw-step--2 .hiw-hand,
      .hiw-step--3 .hiw-hand {
        bottom: 5%;
        left: auto;
        right: auto;
      }
    }

    /* MOBILE */
    @media (max-width: 640px) {
      .how-it-works { padding-block: 6.5rem 4rem; }
      .how-it-works__intro { padding-bottom: 3rem; }
      .how-it-works__emoji { font-size: 2.25rem; margin-bottom: 1rem; }
      .how-it-works__house { width: 94px; height: 88px; }
      .how-it-works__headline { font-size: clamp(1.875rem, 9.5vw, 2.5rem); line-height: 1.0; max-width: 100%; }
      /* Coral divider — 1px × 45px centred rule under the headline, 60% opacity */
      .how-it-works__intro::after {
        content: '';
        display: block;
        width: 45px;
        height: 1px;
        background: var(--wp--preset--color--coral);
        opacity: 0.6;
        margin: 1.25rem auto 0;
      }
      .hiw-step { padding-block: 0.5rem; }
      .hiw-step__inner { grid-template-columns: 1fr; gap: 2rem; }
      .hiw-step--1 .hiw-step__content,
      .hiw-step--2 .hiw-step__content,
      .hiw-step--3 .hiw-step__content { order: 1; }
      .hiw-step--1 .hiw-step__media,
      .hiw-step--2 .hiw-step__media,
      .hiw-step--3 .hiw-step__media { order: 2; justify-content: center; }
      .hiw-step__eyebrow { font-size: 18px; }
      .hiw-step__title { font-size: clamp(2.25rem, 7.875vw, 2.875rem); line-height: 1; letter-spacing: -0.105em; }
      .hiw-step__lead { font-size: 1rem; max-width: min(290px, 88vw); color: #473531; }
      .hiw-step__connector { display: none; }
      .hiw-step--1 .hiw-step__visual,
      .hiw-step--2 .hiw-step__visual,
      .hiw-step--3 .hiw-step__visual { max-width: min(408px, 92vw); margin-inline: auto; }
      /* Visual 3 centred */
      .hiw-step--3 .hiw-step__media { justify-content: center !important; }
      .hiw-step--3 .hiw-step__visual { margin-inline: auto !important; }
      /* Mobile hand nudges */
      .hiw-step--2 .hiw-hand { right: calc(28% - 110px) !important; }
      .hiw-step--3 .hiw-hand { left: calc(30% - 120px) !important; }
    }

    /* ── Scroll-in animation ───────────────────────────────
       Steps start translated down + invisible.
       JS adds .is-visible via IntersectionObserver once
       the step enters the viewport — animates once only.
       Stagger: content and media animate together per step.
    ──────────────────────────────────────────────────── */
    .hiw-step {
      opacity: 0;
      transform: translateY(40px);
      transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hiw-step.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Pixel hand emojis ────────────────────────────────────────
       Each .hiw-step__visual is position:relative (set below).
       Hands are absolute-positioned children, sized in % so they
       scale naturally as the visual resizes across breakpoints.
       Float animation: subtle 3-axis drift, unique per hand.
    ─────────────────────────────────────────────────────────── */

    .hiw-step__visual {
      position: relative;
    }

    .hiw-hand {
      position: absolute;
      pointer-events: none;
      width: 92px !important;
      height: 92px !important;
      max-width: 92px !important;
      max-height: 92px !important;
      object-fit: contain;
      display: block;
      z-index: 10;
    }

    /* Step 1 — pointing finger, lower-right of left phone, pointing toward right phone */
    /* Step 1 — pointing finger, lower-right of left phone, pointing toward right phone */
    .hiw-step--1 .hiw-hand {
      bottom: calc(18% + 25px);
      left: 32%;
      animation: hand-float-1 4s ease-in-out infinite;
    }

    /* Step 2 — diagonal pointer, lower area between the two phones */
    .hiw-step--2 .hiw-hand {
      bottom: calc(20% - 50px);
      right: calc(28% - 120px);
      animation: hand-float-2 4.5s ease-in-out infinite;
    }

    /* Step 3 — fingers crossed, lower area of phone cluster */
    .hiw-step--3 .hiw-hand {
      bottom: 15%;
      left: calc(30% - 135px);
      animation: hand-float-3 3.8s ease-in-out infinite;
    }

    /* Float keyframes — subtle XY drift, each unique so they don't sync */
    @keyframes hand-float-1 {
      0%   { transform: translate(0, 0) rotate(0deg); }
      40%  { transform: translate(4px, -8px) rotate(1.5deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }
    @keyframes hand-float-2 {
      0%   { transform: translate(0, 0) rotate(0deg); }
      45%  { transform: translate(-3px, -7px) rotate(-1deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }
    @keyframes hand-float-3 {
      0%   { transform: translate(0, 0) rotate(0deg); }
      50%  { transform: translate(5px, -6px) rotate(2deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }

        @media (prefers-reduced-motion: reduce) {
      .btn { transition: none; }
      .hiw-step {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .hiw-hand {
        animation: none;
      }
    }

  /* ── Time-to-value badge ─────────────────────────────────── */
  .how-it-works__badge {
    /* flex + justify-content centres the pill AND keeps it block-level
       so it breaks above the inline-block headline-wrap */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wp--preset--color--ink-soft);
  }
  .how-it-works__badge span {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(26, 26, 26, 0.18);
    background: transparent;
  }
  .how-it-works__badge strong {
    font-weight: 700;
    color: var(--wp--preset--color--coral);
  }

  /* ── Per-step assistive badge (replaces the old "See all features" CTA) ── */
  .hiw-step__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: var(--wp--preset--spacing--60);
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(26, 26, 26, 0.18);
    background: transparent;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wp--preset--color--ink-soft);
  }
  .hiw-step__badge svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }