@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #F7FAFC;
    color: #1D3557;
}

/* muted gold text colour */
.text-muted-gold {
    color: #f7c46f;
}

.input {
    /* mt-2 */
    margin-top: 0.5rem;
    /* block w-full */
    display: block;
    width: 100%;
    /* rounded-xl  (0.75rem = 12 px) */
    border-radius: 0.75rem;
    /* border-2 border-gray-200 */
    border: 2px solid #e5e7eb;
    /* p-3  (0.75rem) */
    padding: 0.75rem;
    /* Reset default outline so we can style focus ring manually */
    outline: none;
}

    /* focus:ring focus:ring-muted-gold  +  focus:border-muted-gold */
    .input:focus {
        border-color: darkblue; /* muted-gold */
        box-shadow: 0 0 0 3px rgba(247, 196, 111, .45); /* halo ring */
    }

/* centre text and keep it narrow like the rest of the card */
footer {
    max-width: 48rem; /* = 768 px (same as card width) */
    margin: 4rem auto 1.5rem; /* top 64px, bottom 24px */
    padding: 0 1rem; /* horizontal 16px */
    font-size: 0.8125rem; /* ≈ 13px */
    line-height: 1.3;
    text-align: center;
    color: rgba(29, 53, 87, 0.60); /* deep-blue, 60 % opacity */
}

    footer p + p {
        margin-top: 0.25rem;
    }