/* ==========================================
   BRAND COLORS
========================================== */

:root{

    --starbucks-green:#00754A;

    --starbucks-dark:#006241;

    --text:#111111;

    --muted:#666666;

    --border:#E5E5E5;

    --card-shadow:0 2px 7px rgba(0,0,0,.05);

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    font-size:16px;

    scroll-behavior:smooth;

}


body{

    width:100%;

    min-height:100vh;

    background:#ffffff;

    color:var(--text);

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}


/* ==========================================
   MAIN CONTAINER
========================================== */

.container{

    width:100%;

    max-width:500px;

    margin:0 auto;

    padding:20px 14px 35px;

}


/* ==========================================
   BRAND
========================================== */

.brand{

    text-align:center;

    margin-bottom:22px;

}


.brand h1{

    font-size:27px;

    font-weight:700;

    color:var(--starbucks-green);

    letter-spacing:.2px;

}


.underline{

    width:58px;

    height:3px;

    margin:8px auto 0;

    background:var(--starbucks-green);

    border-radius:20px;

}


/* ==========================================
   MAIN HEADING
========================================== */

h2{

    text-align:center;

    font-size:1.55rem;

    line-height:1.2;

    font-weight:700;

    margin-bottom:10px;

    white-space:nowrap;

}


.subtitle{

    text-align:center;

    color:var(--muted);

    font-size:14px;

    line-height:1.55;

    margin:0 auto 28px;

    max-width:420px;

}


/* ==========================================
   STEPS
========================================== */

.steps{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.step{

    width:100%;

    min-height:66px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:11px;

    box-shadow:var(--card-shadow);

}


.number{

    width:36px;

    height:36px;

    flex:0 0 36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--starbucks-green);

    color:#ffffff;

    font-size:15px;

    font-weight:700;

}


.step p{

    font-size:14px;

    line-height:1.4;

    font-weight:500;

}


/* ==========================================
   CLAIM BUTTON
========================================== */

.claim-btn{

    width:100%;

    min-height:56px;

    margin-top:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:16px;

    background:var(--starbucks-green);

    color:#ffffff;

    border-radius:11px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:0 4px 10px rgba(0,117,74,.20);

    transition:transform .2s ease;

}


.claim-btn:active{

    transform:scale(.98);

}


/* ==========================================
   DISCLAIMER
========================================== */

.disclaimer{

    text-align:center;

    color:#777777;

    font-size:12px;

    line-height:1.65;

    margin:19px auto 38px;

    max-width:390px;

}


/* ==========================================
   FAQ
========================================== */

.faq h3{

    font-size:22px;

    line-height:1.2;

    font-weight:700;

    margin-bottom:18px;

    white-space:nowrap;

}


.faq-item{

    width:100%;

    margin-bottom:9px;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:11px;

    overflow:hidden;

}


.faq-question{

    width:100%;

    min-height:53px;

    padding:15px;

    border:none;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    text-align:left;

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    color:var(--text);

}


.faq-icon{

    flex:0 0 auto;

    color:var(--starbucks-green);

    font-size:21px;

    font-weight:400;

    line-height:1;

    transition:transform .25s ease;

}


.faq-answer{

    display:none;

    padding:0 15px 15px;

    color:var(--muted);

    font-size:13px;

    line-height:1.65;

}


.faq-item.active .faq-answer{

    display:block;

}


.faq-item.active .faq-icon{

    transform:rotate(45deg);

}


/* ==========================================
   BRAND DISCLAIMER
========================================== */

.brand-disclaimer{

    text-align:center;

    color:#999999;

    font-size:10px;

    line-height:1.5;

    margin:30px 10px 0;

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:360px){

    .container{

        padding-left:12px;

        padding-right:12px;

    }


    .brand h1{

        font-size:25px;

    }


    h2{

        font-size:1.4rem;

    }


    .subtitle{

        font-size:13px;

    }


    .step p{

        font-size:13px;

    }


    .faq h3{

        font-size:20px;

    }


    .faq-question{

        font-size:13px;

    }

}