/* RollupBandit — site stylesheet
 * Premium golf-club inspired: deep green / cream / muted gold.
 * Plain CSS, no frameworks, system fonts only. Mobile-first.
 */

/* ─── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

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

a {
    color: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
    --green-deep: #17392B;
    --green-fairway: #1F4D3A;
    --cream: #F6F1E7;
    --card: #FFFDF7;
    --sand: #D9C9A3;
    --sand-soft: #E8E0CB;
    --gold: #C9A227;
    --charcoal: #1E1E1E;
    --muted: #6B7B72;

    --serif: "Iowan Old Style", "Charter", "Apple Garamond",
        "Hoefler Text", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --container: 1100px;
    --gap-lg: 28px;
    --gap-md: 18px;
    --gap-sm: 10px;

    --radius: 14px;
    --radius-sm: 10px;
    --border: 1px solid var(--sand);
}

/* ─── Base ────────────────────────────────────────────────── */
body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--charcoal);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 720px) {
    .container {
        padding: 0 36px;
    }
}

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
    background: var(--green-deep);
    color: var(--cream);
    padding: 14px 0;
    border-bottom: 1px solid rgba(201, 162, 39, 0.18);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.brand-mark {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.brand-name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.site-nav {
    display: flex;
    gap: 22px;
    font-size: 14px;
    letter-spacing: 0.2px;
}

.site-nav a {
    color: rgba(246, 241, 231, 0.78);
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--cream);
    border-bottom-color: var(--gold);
}

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
    background:
        radial-gradient(110% 70% at 88% 0%,
            rgba(31, 77, 58, 0.5) 0%,
            rgba(23, 57, 43, 0) 60%),
        var(--green-deep);
    color: var(--cream);
    padding: 48px 0 56px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.14);
}

@media (min-width: 720px) {
    .hero {
        padding: 64px 0 72px;
    }
}

@media (min-width: 1000px) {
    .hero {
        padding: 72px 0 88px;
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    justify-items: center;
}

@media (min-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 56px;
        justify-items: stretch;
    }
}

.eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--gold);
}

.hero-title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(36px, 5.4vw, 60px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.4px;
    max-width: 18ch;
}

.hero-lede {
    margin: 22px 0 0;
    font-size: clamp(16.5px, 1.6vw, 19px);
    line-height: 1.55;
    color: rgba(246, 241, 231, 0.82);
    max-width: 46ch;
}

.hero-actions {
    margin: 32px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 160ms ease, color 160ms ease,
        border-color 160ms ease, transform 160ms ease;
}

.btn-primary {
    background: var(--cream);
    color: var(--green-deep);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--gold);
    color: var(--green-deep);
}

.btn-ghost {
    background: transparent;
    color: var(--cream);
    border-color: rgba(246, 241, 231, 0.42);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
}

/* Hero phone frame — composes a real product screenshot inside a
   premium bezel so the visual reads as the actual app, not a logo
   mock. Notch dropped now that real content fills the frame. */
.hero-visual {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-phone {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 9 / 19.5;
    border-radius: 32px;
    background: var(--green-deep);
    border: 1px solid rgba(201, 162, 39, 0.32);
    box-shadow:
        0 30px 60px -28px rgba(0, 0, 0, 0.55),
        0 12px 24px -16px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

@media (min-width: 1000px) {
    .hero-phone {
        max-width: 300px;
    }
}

.hero-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* ─── Section base ────────────────────────────────────────── */
.section {
    padding: 80px 0;
}

@media (min-width: 720px) {
    .section {
        padding: 110px 0;
    }
}

.section-eyebrow {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--muted);
}

.section-title {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.2px;
    max-width: 24ch;
}

.section-lede {
    margin: 0 0 48px;
    color: var(--muted);
    font-size: 17px;
    max-width: 60ch;
}

/* ─── Features ────────────────────────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 720px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (min-width: 1000px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
    padding: 26px 24px 22px;
    transition: transform 200ms ease, border-color 200ms ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--green-fairway);
}

.feature-card h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.1px;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.55;
}

/* ─── Screenshots ─────────────────────────────────────────── */
.section-screens {
    background: var(--sand-soft);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
}

/* Screens grid — deliberately sized 2x2 from tablet up so every
   tile is the same size and there's no stranded final card from
   asymmetric wrapping. Container narrows the grid so the four
   phones read as a curated set, not a scrolling roll. */
.screen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 720px) {
    .screen-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 56px;
        row-gap: 56px;
        max-width: 760px;
    }
}

.screen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 280px;
}

.phone-frame {
    width: 100%;
    aspect-ratio: 9 / 20;
    border-radius: 28px;
    background: var(--green-deep);
    border: 1px solid rgba(201, 162, 39, 0.18);
    box-shadow:
        0 18px 32px -18px rgba(23, 57, 43, 0.45),
        0 6px 14px -10px rgba(23, 57, 43, 0.25);
    position: relative;
    overflow: hidden;
}

.phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-frame::after {
    /* Placeholder label, only shown when no <img> sits inside the
       frame (i.e. data-screen attribute is set on a content-less
       frame). Real screenshot tiles override the fallback by placing
       an <img> child inside the frame. */
    content: attr(data-screen);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 18px;
    color: rgba(246, 241, 231, 0.6);
    letter-spacing: 0.4px;
    padding: 0 18px;
    text-align: center;
}

.phone-frame:has(img)::after {
    display: none;
}

.screen-caption {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--green-fairway);
}

/* ─── Page-content (privacy, support) ─────────────────────── */
.page-content {
    padding: 70px 0 100px;
}

@media (min-width: 720px) {
    .page-content {
        padding: 90px 0 130px;
    }
}

.page-content .container {
    max-width: 760px;
}

.page-title {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.1;
}

.page-lede {
    margin: 0 0 48px;
    color: var(--muted);
    font-size: 18px;
    max-width: 60ch;
}

.page-content h2 {
    margin: 48px 0 12px;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.1px;
}

.page-content h2:first-of-type {
    margin-top: 0;
}

.page-content p {
    margin: 0 0 14px;
    color: var(--charcoal);
}

.page-content p + p {
    margin-top: 0;
}

.page-content ul.bulleted {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 14px;
    color: var(--charcoal);
}

.page-content ul.bulleted li {
    margin: 0 0 6px;
}

.contact-card {
    margin: 36px 0 0;
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
    padding: 26px 24px;
}

.contact-card h2 {
    margin: 0 0 6px;
}

.contact-card a {
    color: var(--green-fairway);
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 77, 58, 0.32);
    transition: border-color 160ms ease;
}

.contact-card a:hover {
    border-bottom-color: var(--gold);
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: var(--green-deep);
    color: rgba(246, 241, 231, 0.82);
    padding: 56px 0 40px;
    border-top: 1px solid rgba(201, 162, 39, 0.18);
}

.site-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: end;
}

@media (min-width: 720px) {
    .site-footer-inner {
        grid-template-columns: 1.4fr 1fr;
        gap: 36px;
    }
}

.footer-brand .footer-name {
    margin: 0;
    font-family: var(--serif);
    color: var(--cream);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.footer-brand .footer-tagline {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 0.3px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    letter-spacing: 0.2px;
}

@media (min-width: 720px) {
    .footer-links {
        justify-content: flex-end;
    }
}

.footer-links a {
    color: rgba(246, 241, 231, 0.82);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 160ms ease, border-color 160ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--cream);
    border-bottom-color: var(--gold);
}

.footer-legal {
    grid-column: 1 / -1;
    margin: 16px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(201, 162, 39, 0.16);
    font-size: 12.5px;
    color: rgba(246, 241, 231, 0.55);
    letter-spacing: 0.3px;
}

/* ─── Reduce motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .feature-card {
        transition: none;
    }
    .feature-card:hover {
        transform: none;
    }
}