/* ============================================================================
   Good Deals page.
   Adapted from the layout the old pricing page used (which was deleted with
   the paywall), trimmed to what this page actually needs. Uses the global
   theme tokens from /style.css, so it follows dark/light automatically.
   ============================================================================ */

.ga-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 24px 96px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ga-hero {
    position: relative;          /* anchors the absolutely-positioned starfield */
    overflow: hidden;            /* orbits run up to ~1000px wide — clip them */
    text-align: center;
}

/* The field is positioned with z-index 0, so it would paint over the in-flow
   copy. Lifting every sibling above it keeps the stars behind the text without
   restructuring the markup. .stars-field itself is already hidden below 760px
   by the global rule in style.css. */
.ga-hero > :not(.stars-field) {
    position: relative;
    z-index: 1;
}

.ga-eyebrow {
    font-family: "Geist", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0 0 18px;
}

.ga-title {
    font-family: "Geist", sans-serif;
    font-weight: 200;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 auto 20px;
}

.ga-subtitle {
    max-width: 52ch;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 auto 32px;
}

/* Email capture — mirrors the homepage hero form. */
.ga-deals-form {
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(100%, 700px);
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
}

.ga-deals-form:focus-within { border-color: var(--border-strong); }

.ga-deals-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text);
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    outline: none;
}

.ga-deals-form input::placeholder { color: var(--muted); }

.ga-deals-form button {
    flex: 0 0 auto;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
}

.ga-reassure {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

@media (max-width: 700px) {
    .ga-main { padding: 40px 18px 64px; }
    .ga-deals-form { flex-wrap: wrap; border-radius: 20px; }
    .ga-deals-form input,
    .ga-deals-form button { width: 100%; }
}