.hero{
    width:100%;
    max-height:420px;
    object-fit:contain;
    background:white;
    padding:1rem
}

main {
    max-width:1200px;
    margin:auto;
    padding:2rem 1rem
}

main img {
  max-width: 100%;
  height: auto;
}

.card {
    background:white;
    padding:2rem;
    border-radius:12px;
    margin-bottom:2rem;
    box-shadow:0 2px 8px rgba(0,0,0,.08)
}

.grid {
     display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.grid .card {
    display:flex;
    flex-direction:column
}

.grid .card h2 {
    margin-bottom: 1rem;
}

.grid .card p:last-of-type {
    margin-bottom: 1.25rem;
}

.grid .btn {
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center
}

.btn {
    display:inline-block;
    background:#2563eb;
    color:white;
    text-decoration:none;
    padding:.8rem 1.2rem;
    border-radius:8px
}

form {
    display:flex;
    flex-direction:column;
    gap:1rem
}

input,textarea {
    padding:1rem;
    border:1px solid #ccc
}

.faq-question {
    width:100%;
    text-align:left;
    padding:1rem;
    margin-top:1rem;
    background:#dbeafe;
    border:none;
    cursor:pointer;
    font-weight:bold
}

.faq-answer {
    display:none;
    padding:1rem;
    border:1px solid #ddd;
    background:white
}

.faq-answer.active {
    display:block
}


@media (max-width: 768px) {
    
    .grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
     
    .grid .card {
        width: 100%;
        min-width: 0;
    }

    .grid .card h2 {
        min-height: 0 !important;
    }

    .grid .btn {
        min-height: 0 !important;
    }

}