.hiw-stage-wrap{
    --ink:#161616; --label:#686868; --body:#222222;
    --canvas:#ffffff; --line:#E4E2DF;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  .hiw-stage-wrap,.hiw-stage-wrap *{box-sizing:border-box;margin:0;padding:0}
  .hiw-stage-wrap{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--ink)}
  .hiw-stage-wrap{overflow-x:hidden;font-family:"Inter","Plus Jakarta Sans",system-ui,sans-serif}

  /* ---- scaling stage: 1920-wide design, scaled to fit ---- */
  /* Height cropped to 2330 (last step card bottoms at 2258) to remove the dead
     canvas that used to sit between this section and the next. aspect-ratio must
     match the stage height so the reserved box == the scaled content height. */
  .hiw-stage-wrap{position:relative;width:100%;aspect-ratio:1920/2330}
  .hiw-stage{
    position:absolute;top:0;left:50%;
    width:1920px;height:2330px;
    transform-origin:top center;
    transform:translateX(-50%) scale(var(--s,1));
  }

  /* ---- background grid texture (recreated from image0) ---- */
  .hiw-bg{position:absolute;inset:0;background:var(--canvas);overflow:hidden}
  .hiw-bg::before{
    content:"";position:absolute;inset:-2px;
    background-image:
      linear-gradient(to right, rgba(120,150,210,.11) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(120,150,210,.11) 1px, transparent 1px);
    background-size:174px 174px;
    -webkit-mask-image:radial-gradient(120% 90% at 50% 22%, #000 0%, rgba(0,0,0,.35) 55%, transparent 78%);
    mask-image:radial-gradient(120% 90% at 50% 22%, #000 0%, rgba(0,0,0,.35) 55%, transparent 78%);
  }

  /* ---- header ---- */
  .hiw-eyebrow{
    position:absolute;top:116px;left:0;width:100%;text-align:center;
    font-family:"Plus Jakarta Sans";font-weight:600;font-size:15px;letter-spacing:2.6px;
    color:var(--label);text-transform:uppercase;
  }
  .hiw-headline{
    position:absolute;top:158px;left:50%;transform:translateX(-50%);
    width:1000px;text-align:center;
    font-family:"Plus Jakarta Sans";font-weight:700;color:var(--ink);
    font-size:52px;line-height:1.14;letter-spacing:-.5px;
  }
  .hiw-headline span{display:block}
  .hiw-pills{
    position:absolute;top:352px;left:0;width:100%;
    display:flex;justify-content:center;gap:13px;
  }
  .hiw-pill{
    display:inline-flex;align-items:center;gap:9px;
    height:44px;padding:0 20px;border-radius:999px;background:#fff;
    border:1px solid #ECEAE7;box-shadow:0 1px 2px rgba(20,20,20,.04);
    font-family:"Plus Jakarta Sans";font-weight:600;font-size:15px;color:var(--ink);
    cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  }
  .hiw-pill:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,20,20,.08)}
  .hiw-pill svg{display:block}

  /* ---- cards ---- */
  .hiw-card{
    position:absolute;left:147px;width:1625px;height:562px;border-radius:25px;
    background:#fff;box-shadow:0 15px 30px rgba(0,0,0,.04);
    overflow:hidden;
  }
  .hiw-col--text{position:absolute;top:0;height:100%;width:560px;
    display:flex;flex-direction:column;justify-content:flex-start;padding-top:107px}
  .hiw-card[data-side="right"] .hiw-col--text{left:63px}
  .hiw-card[data-side="left"]  .hiw-col--text{right:70px;left:auto;align-items:flex-start}

  .hiw-step{font-family:"Plus Jakarta Sans";font-weight:500;font-size:26px;color:var(--label);margin-bottom:6px}
  .hiw-ttl{font-family:"Plus Jakarta Sans";font-weight:700;font-size:56px;line-height:1.02;
        color:var(--ink);letter-spacing:-1px;display:flex;align-items:center;gap:16px;white-space:nowrap}
  .hiw-ttl__figma{width:30px;height:46px;object-fit:contain}
  .hiw-ttl__spark{width:40px;height:40px}
  .hiw-body{margin-top:26px;max-width:472px;font-family:"Inter";font-weight:400;
         font-size:22px;line-height:1.45;color:var(--body)}

  /* ---- screenshot ---- */
  .hiw-shot{position:absolute;top:0;height:100%;width:52%;}
  .hiw-shot--right{right:0}
  .hiw-shot--left{left:0}
  .hiw-shot__frame{
    position:absolute;top:31px;width:1030px;height:640px;
    border-radius:16px;overflow:hidden;
    background:#0f0f14;border:1px solid rgba(255,255,255,.06);
    box-shadow:0 30px 60px rgba(20,20,30,.18);
  }
  .hiw-shot--right .hiw-shot__frame{left:8px;transform:perspective(2600px) rotateY(-7deg) rotateZ(-1deg)}
  .hiw-shot--left  .hiw-shot__frame{right:8px;transform:perspective(2600px) rotateY(7deg) rotateZ(1deg)}
  .hiw-shot__frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}

  /* floating chip echoing the source's small pills/avatars/bars */
  .hiw-chip{
    position:absolute;top:34px;display:flex;align-items:center;gap:9px;
    height:30px;padding:0 11px;border-radius:999px;
    background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
    box-shadow:0 8px 22px rgba(20,20,30,.16);border:1px solid rgba(255,255,255,.6);
  }
  .hiw-shot--right .hiw-chip{right:150px}
  .hiw-shot--left  .hiw-chip{left:150px}
  .hiw-chip__ava{display:flex}
  .hiw-chip__ava i{width:17px;height:17px;border-radius:50%;display:block;border:2px solid #fff;margin-left:-6px}
  .hiw-chip__ava i:first-child{margin-left:0;background:#7C4DFF}
  .hiw-chip__ava i:last-child{background:#18B4F0}
  .hiw-chip__bars{display:flex;flex-direction:column;gap:4px}
  .hiw-chip__bars b{height:6px;border-radius:3px;background:#151515;display:block}
  .hiw-chip__bars b:first-child{width:31px}
  .hiw-chip__bars b:last-child{width:44px;opacity:.55}
  .hiw-chip__pill{width:38px;height:19px;border-radius:10px;background:#151515;opacity:.9}

  /* =================== ENTRANCE ANIMATIONS =================== */
  @keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
  @keyframes popLogo{0%{opacity:0;transform:scale(.4) rotate(-25deg)}70%{transform:scale(1.12) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

  /* header load-in */
  .hiw-eyebrow,.hiw-headline span,.hiw-pill{opacity:0;animation:riseIn .9s var(--ease) forwards}
  .hiw-eyebrow{animation-delay:.15s}
  .hiw-headline span:nth-child(1){animation-delay:.30s}
  .hiw-headline span:nth-child(2){animation-delay:.42s}
  .hiw-headline span:nth-child(3){animation-delay:.54s}
  .hiw-pill:nth-child(1){animation-delay:.72s}
  .hiw-pill:nth-child(2){animation-delay:.82s}

  /* cards reveal on scroll */
  .hiw-reveal{opacity:0}
  .hiw-reveal .hiw-col--text > *{opacity:0;transform:translateY(24px)}
  .hiw-reveal .hiw-shot{opacity:0}
  .hiw-card[data-side="right"] .hiw-shot{transform:translateX(70px) scale(.96)}
  .hiw-card[data-side="left"]  .hiw-shot{transform:translateX(-70px) scale(.96)}
  .hiw-reveal .hiw-chip{opacity:0;transform:translateY(-14px)}

  .hiw-reveal.hiw-in{opacity:1;animation:riseIn .8s var(--ease) forwards}
  .hiw-reveal.hiw-in .hiw-col--text > *{animation:riseIn .7s var(--ease) forwards}
  .hiw-reveal.hiw-in .hiw-col--text > *:nth-child(1){animation-delay:.18s}
  .hiw-reveal.hiw-in .hiw-col--text > *:nth-child(2){animation-delay:.30s}
  .hiw-reveal.hiw-in .hiw-col--text > *:nth-child(3){animation-delay:.42s}
  .hiw-reveal.hiw-in .hiw-ttl__figma,.hiw-reveal.hiw-in .hiw-ttl__spark{animation:popLogo .8s var(--ease) .5s both}
  .hiw-reveal.hiw-in .hiw-shot{opacity:1;transform:translateX(0) scale(1);
      transition:opacity .9s var(--ease) .25s, transform 1.05s var(--ease) .25s}
  .hiw-reveal.hiw-in .hiw-chip{opacity:1;transform:translateY(0);
      transition:opacity .6s var(--ease) .7s, transform .7s var(--ease) .7s}

  /* gentle idle float on chips + hover lift on screenshots */
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .hiw-reveal.hiw-in .hiw-chip{animation:floaty 4.5s ease-in-out 1.4s infinite}
  .hiw-shot__frame{transition:transform .6s var(--ease)}
  .hiw-shot--right:hover .hiw-shot__frame{transform:perspective(2600px) rotateY(-4deg) rotateZ(0deg) translateY(-6px)}
  .hiw-shot--left:hover .hiw-shot__frame{transform:perspective(2600px) rotateY(4deg) rotateZ(0deg) translateY(-6px)}

  /* =================== MOBILE (≤768px): true reflow =================== */
  @media (max-width:768px){
    /* turn the fixed 1920 design-stage into normal document flow */
    .hiw-stage-wrap{height:auto!important;aspect-ratio:auto!important}
    .hiw-stage{position:relative;left:auto;width:100%;height:auto;
           transform:none!important;padding:0 0 46px}
    .hiw-bg{position:absolute;inset:0}
    /* Grid texture hidden on mobile: its first horizontal line rendered as a
       hard seam near the top. Plain canvas reads cleaner on small screens. */
    .hiw-bg::before{display:none}

    /* header */
    .hiw-eyebrow{position:static;margin:46px 0 0;font-size:clamp(11px,3vw,13px);letter-spacing:2px}
    .hiw-headline{position:static;transform:none;width:auto;margin:14px auto 0;padding:0 22px;
              font-size:clamp(25px,7.4vw,33px);line-height:1.18;letter-spacing:-.4px}
    .hiw-pills{position:static;margin:22px 0 0;padding:0 22px;flex-wrap:wrap}
    .hiw-pill{height:40px;font-size:14px;padding:0 17px}

    /* cards → stacked single column */
    .hiw-card{position:static;left:auto;width:calc(100% - 32px);margin:26px auto 0;
          height:auto;border-radius:20px;overflow:hidden;
          display:flex;flex-direction:column;gap:22px;padding:30px 24px 26px}

    .hiw-col--text{position:static;left:auto!important;right:auto!important;
               width:100%;height:auto;padding-top:0;order:0;align-items:flex-start!important}
    .hiw-step{font-size:clamp(14px,3.7vw,16px);margin-bottom:4px}
    .hiw-ttl{font-size:clamp(26px,7.6vw,32px);letter-spacing:-.5px;gap:11px;
         white-space:normal;flex-wrap:wrap}
    .hiw-ttl__figma{width:19px;height:29px}
    .hiw-ttl__spark{width:26px;height:26px}
    .hiw-body{font-size:clamp(15px,4.1vw,17px);line-height:1.5;margin-top:16px;max-width:none}

    /* screenshot → full-width, straightened */
    .hiw-shot{position:relative;width:100%;height:auto;order:1}
    .hiw-shot__frame{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;
                 transform:none!important;border-radius:12px;
                 box-shadow:0 18px 40px rgba(20,20,30,.16)}
    .hiw-shot__frame img{height:auto}
    .hiw-chip{top:13px;height:26px;padding:0 9px;gap:7px}
    .hiw-shot--right .hiw-chip,.hiw-shot--left .hiw-chip{right:13px;left:auto}
    .hiw-chip__ava i{width:15px;height:15px}

    /* mobile entrance: vertical only (no horizontal overflow) */
    .hiw-card[data-side="right"] .hiw-shot,.hiw-card[data-side="left"] .hiw-shot{transform:translateY(28px) scale(.98)}
    .hiw-reveal.hiw-in .hiw-shot{transform:none}
    .hiw-shot--right:hover .hiw-shot__frame,.hiw-shot--left:hover .hiw-shot__frame{transform:none!important}
  }

  @media (prefers-reduced-motion: reduce){
    .hiw-stage-wrap *{animation:none!important;transition:none!important}
    .hiw-reveal,.hiw-reveal .hiw-shot,.hiw-reveal .hiw-col--text>*,.hiw-reveal .hiw-chip,.hiw-eyebrow,.hiw-headline span,.hiw-pill{opacity:1!important;transform:none!important}
  }

.hiw{position:relative;z-index:1;background:#fff}