#stage2 .tool-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 560px;
}
#stage2 .tool-card {
    min-height: 54px;
    padding: 5px 5px;
    font-size: 0.9rem;
    font-weight: 200;
}

/* ---------- Step 3: Micro Action Cards ---------- */

#stage3 .tool-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 700px;
    margin: 24px auto;
}

#stage3 .tool-card {
    min-width: 0;
    min-height: 80px;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 200;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
    #stage3 .tool-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}



/* ---------- Branded Breathing ---------- */

.breath-wrap{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:28px 0 24px;
}

.breath-circle{
    width:200px;
    height:200px;
    border-radius:50%;
    border:1px solid rgba(167,139,250,.35);
    background:radial-gradient(circle at 50% 45%,rgba(52,211,153,.38),rgba(139,92,246,.22) 62%,rgba(10,17,22,.85));
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    margin:0 auto 24px;
    transform:scale(1);
    opacity:1;
    box-shadow:0 0 26px rgba(52,211,153,.28),0 0 70px rgba(139,92,246,.18);
}

#breathCircle{margin-left:auto;margin-right:auto;}

.breath-circle.idle{
    transform:scale(1);
    opacity:.75;
    animation:breathIdle 4.5s ease-in-out infinite;
}

.breath-circle.inhale{
    transform:scale(1);
    opacity:1;
    animation:breathInhale 4s ease-out forwards;
}

.breath-circle.hold{
    transform:scale(1.35);
    opacity:1;
    animation:breathHold 2s linear forwards;
}

.breath-circle.exhale{
    transform:scale(1.35);
    opacity:1;
    animation:breathExhale 6s ease-in forwards;
}

@keyframes breathInhale{
    from{
        transform:scale(1);
        box-shadow:0 0 26px rgba(52,211,153,.28),0 0 70px rgba(139,92,246,.18);
    }

    to{
        transform:scale(1.35);
        box-shadow:0 0 48px rgba(52,211,153,.55),0 0 110px rgba(167,139,250,.32);
    }
}

@keyframes breathHold{
    from{
        transform:scale(1.35);
        box-shadow:0 0 48px rgba(52,211,153,.55),0 0 110px rgba(167,139,250,.32);
    }

    to{
        transform:scale(1.35);
        box-shadow:0 0 48px rgba(52,211,153,.45),0 0 110px rgba(167,139,250,.28);
    }
}

@keyframes breathExhale{
    from{
        transform:scale(1.35);
        box-shadow:0 0 48px rgba(52,211,153,.45),0 0 110px rgba(167,139,250,.28);
    }

    to{
        transform:scale(.85);
        box-shadow:0 0 20px rgba(52,211,153,.25),0 0 55px rgba(139,92,246,.15);
    }
}

@keyframes breathIdle{
    0%,100%{
        transform:scale(1);
        box-shadow:0 0 26px rgba(52,211,153,.26),0 0 70px rgba(139,92,246,.16);
    }

    50%{
        transform:scale(1.03);
        box-shadow:0 0 38px rgba(52,211,153,.40),0 0 90px rgba(167,139,250,.24);
    }
}

/* ---------- Label ---------- */

.breath-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family:Inter,system-ui,sans-serif;
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:3px;
    color:#eafff7;
    text-transform:uppercase;
    text-shadow:0 0 24px rgba(52,211,153,.45);
    margin:0;
    pointer-events:none;
    white-space:nowrap;
}

.breath-counter{
    color:#8aa39c;
    margin-top:30px;
    font-size:.95rem;
    font-weight:500;
    text-align:center;
    letter-spacing:1px;
    min-height:1.2em;
}

/* ---------- Breathing Button ---------- */

#breathStartBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:35px;
    padding:16px 36px;
    min-width:190px;
    font-family:Inter,system-ui,sans-serif;
    font-size:1rem;
    font-weight:500;
    letter-spacing:.03em;
    color:#34d399;
    background:#0b1f17;
    border:1.5px solid #34d399;
    border-radius:var(--radius-sm);
    cursor:pointer;
    box-shadow:0 4px 18px rgba(45,212,191,.18);
    transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}

#breathStartBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 22px rgba(45,212,191,.25);
}

#breathStartBtn.is-running{
    background:#0a1116;
    border-color:#34d399;
    color:#34d399;
    box-shadow:none;
}

#breathStartBtn.is-running:hover{
    background:rgba(52,211,153,.10);
    box-shadow:0 0 20px rgba(52,211,153,.22);
}

#breathStartBtn:active{transform:translateY(0);}

#breathStartBtn:focus-visible{
    outline:2px solid #a78bfa;
    outline-offset:3px;
}

/* ---------- First Stage ---------- */

#stage1 .stage-instruction{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

#stage1 .breath-note{
    margin-top:8px;
    opacity:.75;
}

#stage1 .stage-actions{
    margin-top:28px;
}

.is-hidden{
    display:none !important;
}

/* ---------- Mobile ---------- */

@media(max-width:600px){
    .breath-circle{
        width:170px;
        height:170px;
    }

    @keyframes breathInhale{
        from{transform:scale(1);}
        to{transform:scale(1.28);}
    }

    @keyframes breathHold{
        from{transform:scale(1.28);}
        to{transform:scale(1.28);}
    }

    @keyframes breathExhale{
        from{transform:scale(1.28);}
        to{transform:scale(.82);}
    }
}