/*==========================================================
    REVLO — HOW IT WORKS
    Scoped under .hw-section so nothing here can leak into or
    be overridden by the rest of the page's CSS.
==========================================================*/

.hw-section{
    --hw-brand:#FF3B3B;
    --hw-brand-dark:#E5342E;
    --hw-brand-light:#FF6A5A;
    --hw-brand-soft:#FFF1F0;
    --hw-ink:#17130F;
    --hw-ink-soft:#6B6560;
    --hw-line:rgba(23,19,15,.08);
    --hw-paper:#FFFFFF;
    --hw-surface:#FCFAF8;

    --hw-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --hw-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hw-font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    position:relative;
    background:var(--hw-paper);
    padding:clamp(64px, 9vw, 140px) 0;
    color:var(--hw-ink);
}

.hw-section *{
    box-sizing:border-box;
}

.hw-container{
    max-width:1320px;
    margin:0 auto;
    padding:0 24px;
}

/*==================================
    HEADER
==================================*/

.hw-header{
    max-width:640px;
    margin:0 auto 84px;
    text-align:center;
}

.hw-eyebrow{
    display:inline-flex;
    align-items:center;
    padding:11px 20px;
    border-radius:100px;
    background:var(--hw-brand-soft);
    border:1px solid rgba(255,59,59,.18);
    color:var(--hw-brand-dark);
    font-family:var(--hw-font-mono);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.hw-heading{
    margin:24px 0 18px;
    font-family:var(--hw-font-display);
    font-size:clamp(2rem, 3.4vw, 2.9rem);
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.01em;
}

.hw-sub{
    margin:0;
    font-family:var(--hw-font-body);
    font-size:1.05rem;
    line-height:1.75;
    color:var(--hw-ink-soft);
}

/*==================================
    TIMELINE — desktop: 4 columns
    with a horizontal line running
    through the marker centers.
==================================*/

.hw-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
}

/* Line sits at the vertical center of the 28px-radius markers
   (56px tall, so 28px from the top of the row), and spans from
   the horizontal center of column 1 to the center of column 4:
   with 4 equal columns that's 12.5% in from each side. */
.hw-line{
    position:absolute;
    top:28px;
    left:12.5%;
    right:12.5%;
    height:3px;
    background:var(--hw-line);
    border-radius:3px;
    overflow:hidden;
    z-index:0;
}

.hw-line__fill{
    height:100%;
    width:100%;
    background:linear-gradient(90deg, var(--hw-brand), var(--hw-brand-light));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}

.hw-section.hw-inview .hw-line__fill{
    transform:scaleX(1);
}

/*==================================
    STEP
==================================*/

.hw-step{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.hw-step__marker{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--hw-paper);
    border:3px solid var(--hw-line);
    color:var(--hw-ink-soft);
    font-family:var(--hw-font-mono);
    font-size:.9rem;
    font-weight:700;
    transition:
        background .5s ease,
        border-color .5s ease,
        color .5s ease,
        transform .5s ease;
    transition-delay:calc(var(--hw-i, 0) * 150ms);
}

.hw-section.hw-inview .hw-step__marker{
    background:linear-gradient(135deg, var(--hw-brand), var(--hw-brand-light));
    border-color:var(--hw-brand);
    color:#fff;
    transform:scale(1.06);
}

.hw-step__card{
    margin-top:26px;
    width:100%;
    padding:28px 22px;
    background:var(--hw-surface);
    border:1px solid var(--hw-line);
    border-radius:18px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hw-step:hover .hw-step__card{
    transform:translateY(-6px);
    border-color:rgba(255,59,59,.22);
    box-shadow:0 20px 40px rgba(255,59,59,.10);
}

.hw-step__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-bottom:16px;
    border-radius:12px;
    background:var(--hw-brand-soft);
    color:var(--hw-brand);
    font-size:1.05rem;
}

.hw-step__card h3{
    margin:0 0 10px;
    font-family:var(--hw-font-body);
    font-size:1.06rem;
    font-weight:700;
    color:var(--hw-ink);
}

.hw-step__card p{
    margin:0;
    font-family:var(--hw-font-body);
    font-size:.92rem;
    line-height:1.65;
    color:var(--hw-ink-soft);
}

/*==========================================================
    RESPONSIVE — stack vertically, line rotates to run down
    the left side through the marker centers instead.
==========================================================*/

@media (max-width:900px){

    .hw-header{
        margin-bottom:56px;
    }

    .hw-timeline{
        grid-template-columns:1fr;
        gap:0;
    }

    .hw-step{
        flex-direction:row;
        align-items:flex-start;
        text-align:left;
        gap:22px;
        padding-bottom:36px;
    }

    .hw-step:last-child{
        padding-bottom:0;
    }

    .hw-step__card{
        margin-top:0;
    }

    /* Vertical line: left edge sits at the horizontal center of
       the 56px marker (28px in), running from the center of the
       first marker to the center of the last. Steps are direct
       grid children with no extra wrapper, so nth-child selects
       them directly for the top/bottom trim. */
    .hw-line{
        top:28px;
        bottom:28px;
        left:28px;
        right:auto;
        width:3px;
        height:auto;
    }

    .hw-line__fill{
        width:100%;
        height:100%;
        transform:scaleY(0);
        transform-origin:top;
    }

    .hw-section.hw-inview .hw-line__fill{
        transform:scaleY(1);
    }
}

@media (max-width:480px){
    .hw-step__card{
        padding:22px 18px;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion: reduce){
    .hw-line__fill{
        transition:none;
        transform:none !important;
    }
    .hw-step__marker{
        transition:none;
    }
    .hw-step__card{
        transition:none;
    }
}