@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root {
    --pda-bg: #fffaf7;
    --pda-surface: #ffffff;
    --pda-blush: #fff0eb;
    --pda-pink: #ffdaf0;
    --pda-coral: #ffb3a2;
    --pda-coral-deep: #c96f5a;
    --pda-text: #292522;
    --pda-muted: #6d6560;
    --pda-green: #204637;
    --pda-green-dark: #17372c;
    --pda-gold: #bf9b30;
    --pda-gold-light: #e4c56b;
    --pda-border: #eadfd8;

    --pda-font-display: "Fraunces", Georgia, serif;
    --pda-font-body: "Instrument Sans", "Segoe UI", sans-serif;

    --pda-container: 1200px;
    --pda-radius: 20px;
    --pda-transition: 180ms ease;
}

.pda-landing,
.pda-landing * {
    box-sizing: border-box;
}

.pda-landing {
    color: var(--pda-text);
    background: var(--pda-bg);
    font-family: var(--pda-font-body);
}

.pda-container {
    width: min(calc(100% - 48px), var(--pda-container));
    margin-inline: auto;
}

.pda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font-family: var(--pda-font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform var(--pda-transition),
        background var(--pda-transition),
        box-shadow var(--pda-transition);
}

.pda-btn:hover {
    transform: translateY(-2px);
}

.pda-btn--primary {
    color: #fff;
    background: var(--pda-green);
    box-shadow: 0 14px 30px -18px rgba(32, 70, 55, .75);
}

.pda-btn--primary:hover {
    background: var(--pda-green-dark);
}

.pda-btn--gold {
    color: var(--pda-green-dark);
    background: var(--pda-gold-light);
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, .45);
}

.pda-btn--gold:hover {
    background: #ecd17f;
}

@media (max-width: 640px) {
    .pda-container {
        width: min(calc(100% - 32px), var(--pda-container));
    }
}