/* =========================================================
   VAGAL TOOL CARD
========================================================= */

.tool-card{
    min-height:260px;
    justify-content:flex-start;
    align-items:flex-start;

    padding:22px 20px 20px;

    background:linear-gradient(
        145deg,
        rgba(15,25,31,.94),
        rgba(7,13,18,.86)
    );

    border-color:rgba(167,139,250,.25);

    cursor:pointer;
    user-select:none;
    text-align:left;
    outline:none;

    margin-bottom:0;
}

.tool-card:hover{
    transform:translateY(-5px);
    border-color:var(--green-1);
    box-shadow:
        0 14px 30px rgba(52,211,153,.16),
        0 0 18px rgba(139,92,246,.1);
}

.tool-card:focus-visible{
    border-color:var(--green-1);
    box-shadow:
        0 0 0 3px rgba(52,211,153,.28),
        0 14px 30px rgba(52,211,153,.16);
}


/* =========================================================
   VAGAL CARD CONTENT
========================================================= */

.tool-emoji{
    font-size:2.1rem;
    line-height:1;
    margin:0 auto 16px;
    filter:drop-shadow(
        0 4px 12px rgba(52,211,153,.22)
    );
}

.tool-title{
    font-size:1.05rem;
    color:var(--text);
    font-weight:500;
    letter-spacing:-.01em;
    margin-bottom:7px;
}

.tool-tag{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:999px;
    font-size:.66rem;
    font-weight:300;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--green-1);
    background:rgba(52,211,153,.08);
    border:1px solid rgba(52,211,153,.25);
    margin-bottom:12px;
}

.tool-desc{
    flex:1;
    color:#b9cfc9;
    font-size:.87rem;
    font-weight:300;
    line-height:1.55;
    margin-bottom:16px;
}

.tool-arrow{
    display:inline-flex;
    align-items:center;
    padding:9px 34px 9px 18px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--green-1);

    background:linear-gradient(
        135deg,
        rgba(52,211,153,.32),
        rgba(52,211,153,.18)
    );

    clip-path:polygon(
        0 0,
        calc(100% - 22px) 0,
        100% 50%,
        calc(100% - 22px) 100%,
        0 100%
    );

    transition:
        color .28s ease,
        background .28s ease,
        transform .28s ease;
}

.tool-card:hover .tool-arrow{
    color:#04140d;

    background:linear-gradient(
        135deg,
        var(--green-1),
        #0fbf86
    );
}

/* =========================================================
   VAGAL RESET INTRO
========================================================= */

.final{
    font-size:1.5rem;
    text-align:center;
    margin:18px 0 3px;
    font-weight:700;
    overflow-wrap:anywhere;
}

.bold-green{
    color:var(--green-1);
    font-size:1.5rem;
    font-weight:700;
}

/* =========================================================
   RESET TOOL STAGE
========================================================= */

.tool-intro{
    padding-bottom:24px;
}

.tool-stage{
    padding:32px 42px 42px;
    overflow:hidden;
    background:#0a1116;
    border-radius:24px;
}


/* =========================================================
   RESET CONTENT
========================================================= */

.sequence-label{
    text-align:center;
    color:var(--green-1);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.sequence-title{
    max-width:100%;
    text-align:center;
    font-size:1.7rem;
    font-weight:600;
    margin-bottom:8px;
    overflow-wrap:anywhere;
}

.sequence-subtitle{
    max-width:100%;
    text-align:center;
    color:var(--muted);
    font-size:.95rem;
    font-weight:300;
    margin-bottom:28px;
    overflow-wrap:anywhere;
}

.tool-panel{
    width:100%;
    text-align:center;
}

.tool-panel p{
    width:100%;
    max-width:670px;
    color:#c7d9d4;
    font-size:.95rem;
    font-weight:300;
    line-height:1.65;
    margin:0 auto 22px;
    overflow-wrap:anywhere;
}

.sequence-controls{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}


/* =========================================================
   VAGAL ACTION BUTTONS
========================================================= */

#breathStartBtn,
.action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:35px;
    padding:16px 36px;
    min-width:190px;
    max-width:100%;
    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,
.action-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 22px rgba(45,212,191,.25);
}

.secondary-btn{
    color:var(--purple-1);
    background:rgba(139,92,246,.07);
    border-color:rgba(167,139,250,.5);
}


/* =========================================================
   BREATHING
========================================================= */

.breath-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    margin:25px 0 5px;
}

.breath-circle{
    width:200px;
    height:200px;
    max-width:100%;
    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;
    transform:scale(1);

    box-shadow:
        0 0 26px rgba(52,211,153,.28),
        0 0 70px rgba(139,92,246,.18);
}

.breath-circle.inhale{
    transform:scale(1.35);
    transition:
        transform 4s ease-out,
        box-shadow 4s ease-out;

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

.breath-circle.hold{
    transform:scale(1.35);
    transition:none;

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

.breath-circle.exhale{
    transform:scale(.85);
    transition:
        transform 6s ease-in,
        box-shadow 6s ease-in;

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

.breath-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:3px;
    color:var(--text);
    text-shadow:0 0 24px rgba(52,211,153,.45);
    white-space:nowrap;
}

.breath-counter{
    color:var(--muted);
    margin-top:25px;
    font-size:.9rem;
    letter-spacing:1px;
    min-height:1.2em;
}

.hum-circle{
    width:200px;
    height:200px;
    max-width:100%;
    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;
    margin:28px auto;
    transform:scale(.85);

    box-shadow:
        0 0 26px rgba(52,211,153,.28),
        0 0 70px rgba(139,92,246,.18);
}

.hum-circle.inhale{
    transform:scale(1.3);
    transition:transform 4.5s ease-out;
}

.hum-circle.hum{
    transform:scale(.85);
    transition:transform 7s ease-in;
}

.phase-text{
    font-size:1rem;
    font-weight:600;
    letter-spacing:3px;
    white-space:nowrap;
}


/* =========================================================
   MOVEMENT
========================================================= */

.movement-box{
    width:100%;
    max-width:480px;
    margin:25px auto 5px;
    text-align:left;
}

.movement-step{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:13px 0;
    border-bottom:1px solid rgba(167,139,250,.12);
}

.movement-step:last-child{
    border-bottom:0;
}

.step-number{
    flex:0 0 30px;
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#07110d;
    background:var(--green-1);
    font-size:.75rem;
    font-weight:700;
}

.movement-step strong{
    display:block;
    font-size:.95rem;
    font-weight:600;
    margin-bottom:2px;
    overflow-wrap:anywhere;
}

.movement-step span{
    display:block;
    color:var(--muted);
    font-size:.82rem;
    font-weight:300;
    overflow-wrap:anywhere;
}

.done-message{
    width:100%;
    color:var(--green-1)!important;
    font-weight:500!important;
    font-size:1rem!important;
}

/* =========================================================
   SEQUENCE DOTS
========================================================= */

.sequence-dots{
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:25px;
}

.sequence-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(138,163,156,.3);
}

.sequence-dot.active{
    background:var(--green-1);
    box-shadow:0 0 9px rgba(52,211,153,.45);
}


/* =========================================================
   VAGAL-SPECIFIC RESPONSIVE OVERRIDES
========================================================= */

@media(max-width:620px){

    .final{
        font-size:1.15rem;
        line-height:1.4;
        margin:12px 0 0;
    }

    .bold-green{
        font-size:1.15rem;
    }

    .tool-card{
        padding:20px 18px 18px;
    }

    .tool-title{
        font-size:1rem;
    }

    .tool-desc{
        font-size:.85rem;
        line-height:1.5;
    }

    .why-box{
        padding:19px 17px;
        margin-top:28px;
    }

    .why-box p{
        font-size:.88rem;
        line-height:1.65;
    }

    .info-card{
        padding:19px 17px 16px;
    }

    .info-card li{
        font-size:.86rem;
        line-height:1.55;
    }

    .ps-note{
        padding:16px 17px;
        font-size:.86rem;
        line-height:1.6;
    }

    .tool-intro{
        padding-bottom:20px;
    }

    .tool-stage{
        padding:24px 15px 30px;
        border-radius:18px;
    }

    .sequence-label{
        font-size:.64rem;
    }

    .sequence-title{
        font-size:1.4rem;
        line-height:1.25;
    }

    .sequence-subtitle{
        font-size:.86rem;
        line-height:1.45;
        margin-bottom:22px;
    }

    .tool-panel p{
        font-size:.88rem;
        line-height:1.6;
    }

    .breath-circle,
    .hum-circle{
        width:170px;
        height:170px;
    }

    .breath-circle.inhale,
    .breath-circle.hold{
        transform:scale(1.25);
    }

    .breath-circle.exhale{
        transform:scale(.82);
    }

    .hum-circle.inhale{
        transform:scale(1.2);
    }

    .breath-label{
        font-size:.9rem;
        letter-spacing:2px;
    }

    .phase-text{
        font-size:.9rem;
        letter-spacing:2px;
    }

    #breathStartBtn,
    .action-btn{
        width:100%;
        max-width:280px;
        min-width:0;
        padding:14px 20px;
        font-size:.92rem;
    }

    .movement-box{
        max-width:100%;
    }

    .movement-step{
        gap:10px;
    }

    .movement-step strong{
        font-size:.9rem;
    }

    .movement-step span{
        font-size:.78rem;
        line-height:1.5;
    }

    .step-number{
        flex:0 0 28px;
        width:28px;
        height:28px;
    }
}


@media(max-width:380px){

    .final,
    .bold-green{
        font-size:1.05rem;
    }

    .tool-card{
        padding:18px 16px;
    }

    .tool-stage{
        padding-left:13px;
        padding-right:13px;
    }

    .sequence-title{
        font-size:1.3rem;
    }

    .sequence-subtitle{
        font-size:.82rem;
    }

    .breath-circle,
    .hum-circle{
        width:155px;
        height:155px;
    }

    .breath-label{
        font-size:.82rem;
        letter-spacing:1.5px;
    }

    .phase-text{
        font-size:.82rem;
        letter-spacing:1.5px;
    }
}