/*
 * Shared site styles for orderwallet.net.
 * Mirrors the iOS app's design vocabulary:
 *   primary teal     #3DB3AD
 *   teal gradient    #25A8A8 → #68C7B8
 *   tab orange       #FCAC60
 *   cream background #F8F8F8
 *   field cream      #FFFAF5
 *   primary text     #363433
 *   subtitle text    #6B6B6B
 *
 * No build pipeline — vanilla CSS imported from every page.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary-teal: #3DB3AD;
    --accent-red: #FF624D;          /* matches the app's swipeRed */
    --dark-teal: #25A8A8;
    --light-teal: #68C7B8;
    --accent-orange: #FCAC60;
    --cream-bg: #F8F8F8;
    --field-bg: #FFFAF5;
    --field-border: #FFEDD6;
    --primary-text: #363433;
    --subtitle-text: #6B6B6B;
    --gray-icon: #8F867E;
}

html {
    scroll-behavior: smooth;
    /* Pair with body { overflow-x: hidden } below — the mobile drawer
       parks itself just off the right edge of the viewport, and both
       html and body need clipping to suppress the phantom horizontal
       scroll on phones. */
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #FAF8F4;
    color: var(--primary-text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100vh;
    /* The mobile nav drawer sits at right:0 + translateX(105%) when
       closed — i.e. parked just off the right edge of the viewport.
       Browsers count transformed positions in scrollWidth, so without
       this clip the closed drawer adds ~325px of phantom horizontal
       scroll on phones. */
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    /* Header z-index must sit ABOVE .nav-backdrop (150) because the
       mobile drawer lives inside .site-header's stacking context.
       If the header is below the backdrop, the drawer (no matter
       how high its own z-index) is trapped inside the header's
       context — and clicks on drawer links route to the backdrop
       instead of the link. 200 keeps it above the backdrop and
       below the drawer's own z-index (which still controls order
       relative to siblings inside the header). */
    z-index: 200;
    /* Solid background — used to be rgba + backdrop-filter blur, but
       backdrop-filter creates a containing block for position:fixed
       descendants. That trapped the mobile nav drawer inside the 68px
       header strip instead of the viewport. Drop the blur, keep the
       sticky bar. */
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.site-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-text);
    flex-shrink: 0;
}

.site-header .brand img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.site-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    align-items: center;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--subtitle-text);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.site-nav a:hover { color: var(--primary-text); background: rgba(0,0,0,0.04); }

.site-nav a.active {
    color: white;
    background: var(--primary-teal);
}

.site-nav a.community-cta {
    color: white;
    background: var(--accent-orange);
    padding: 8px 14px 8px 12px;
}
.site-nav a.community-cta:hover { color: white; opacity: 0.9; }
.site-nav a.community-cta svg {
    width: 14px;
    height: 14px;
    fill: white;
    flex-shrink: 0;
}

/* Problems pill — red attention-grabber next to the Community CTA.
   Uses the in-app swipeRed (#FF624D, also our --accent-red var) so
   the marketing pill matches the Remove tile in the iOS swipe rows. */
.site-nav a.problems-cta {
    color: white;
    background: var(--accent-red);
    padding: 8px 14px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.site-nav a.problems-cta:hover { color: white; opacity: 0.9; }
.site-nav a.problems-cta svg {
    width: 14px;
    height: 14px;
    fill: white;
    flex-shrink: 0;
}

/* The "green pill = active page" indicator only applies to the
   regular route links. Community + Problems keep their brand
   colors (orange + red) so they stay recognizable even when the
   user is on those pages. */

/* Nav-link icons — only rendered on phone, sized to match the
   pill height. Hidden on desktop where the labels carry meaning. */
.site-nav a .nav-icon {
    display: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ─── Hamburger button + slide-in drawer (mobile nav) ────
   On desktop the .site-nav row sits inline next to the brand. On
   phone (≤720px) we hide that row, show a hamburger button on the
   right edge of the header, and convert .site-nav into a drawer
   that slides in from the right. A backdrop dims the page behind
   the drawer; tap it (or the X, or any link inside) to close.

   The button + backdrop + drawer-close-button are display:none by
   default and only revealed inside the mobile media query, so
   desktop markup stays untouched. */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    margin-left: auto;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--primary-text);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
}
.nav-toggle:hover { background: rgba(0, 0, 0, 0.04); }
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.nav-drawer-close { display: none; }

.nav-backdrop {
    /* Invisible tap-target behind the drawer — no dim, no fill. Its
       only job is to catch taps on the page outside the drawer so
       nav.js can close the menu. The drawer itself sits at z-index
       200, this stays at 150 so it's behind. */
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 150;
}

@media (max-width: 720px) {
    /* Reveal the hamburger; the inline pill-row gets repurposed as a drawer. */
    .nav-toggle { display: flex; }
    .nav-backdrop { display: block; }
    .nav-backdrop.open { pointer-events: auto; }

    /* The nav itself becomes a side drawer. Translates offscreen by
       default and slides in when .open is added by nav.js. */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 320px);
        margin-left: 0;
        background: white;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
        transform: translateX(105%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 200;
        overflow-y: auto;
    }
    .site-nav.open { transform: translateX(0); }

    /* Close (X) button sits at the top-right of the drawer. */
    .nav-drawer-close {
        display: flex;
        align-self: flex-end;
        background: transparent;
        border: 0;
        padding: 8px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: var(--primary-text);
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-bottom: 4px;
    }
    .nav-drawer-close:hover { background: rgba(0, 0, 0, 0.04); }
    .nav-drawer-close svg { width: 22px; height: 22px; }

    /* Each link becomes a full-width row with its icon on the left.
       Override the desktop pill defaults explicitly so the
       icon-only mobile rules from before don't sneak back in. */
    .site-nav a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 12px;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 500;
        background: transparent;
        color: var(--primary-text);
        white-space: normal;
    }
    .site-nav a:hover { background: rgba(0, 0, 0, 0.05); }
    .site-nav a.active {
        background: rgba(61, 179, 173, 0.12);
        color: var(--primary-teal);
    }

    /* Icons + labels: both visible in the drawer. */
    .site-nav a .nav-icon {
        display: block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    .site-nav a .nav-label {
        display: inline;
        font-weight: 500;
        font-size: 1rem;
    }

    /* CTA pills (Problems, Community, App Store) — flatten them in
       the drawer so they read as labeled rows like the rest, but
       keep their brand color so they're still identifiable. */
    .site-nav a.problems-cta,
    .site-nav a.community-cta {
        background: transparent;
        padding: 14px 12px;
    }
    .site-nav a.problems-cta { color: var(--accent-red); }
    .site-nav a.community-cta { color: var(--accent-orange); }
    .site-nav a.problems-cta:hover { background: rgba(255, 98, 77, 0.10); color: var(--accent-red); }
    .site-nav a.community-cta:hover { background: rgba(252, 172, 96, 0.14); color: var(--accent-orange); }
    .site-nav a.problems-cta span,
    .site-nav a.community-cta span {
        display: inline;
        font-size: 1rem;
        font-weight: 600;
    }
    .site-nav a.problems-cta svg,
    .site-nav a.community-cta svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    .site-nav a.problems-cta svg { fill: var(--accent-red); }
    .site-nav a.community-cta svg { fill: var(--accent-orange); }

    /* App Store keeps its dark fill and sits at the bottom of the
       drawer as the primary download CTA. */
    .site-nav a.appstore-btn {
        background: #000;
        color: white;
        padding: 14px 12px;
        margin-top: 12px;
    }
    .site-nav a.appstore-btn:hover { background: #1a1a1a; color: white; }
    .site-nav a.appstore-btn span {
        display: inline;
        font-size: 1rem;
        font-weight: 600;
    }
    .site-nav a.appstore-btn svg {
        width: 22px;
        height: 22px;
        fill: white;
        flex-shrink: 0;
    }

    /* Brand keeps its wordmark visible on phone now that the inline
       nav isn't competing for the row. */
    .site-header .brand span { display: inline; }
}

/* Color the nav-icons. Inactive icons take the muted text color;
   active route's icon inherits white from the pill itself. */
.site-nav a .nav-icon { fill: var(--subtitle-text); }
.site-nav a:hover .nav-icon { fill: var(--primary-text); }
.site-nav a.active .nav-icon { fill: white; }

/* Footer reuses the same <a><svg .nav-icon><span .nav-label>X</span></a>
   markup so the rewrite script could touch both places uniformly,
   but the footer doesn't want the SVG — it's plain text links. Hide
   the icon there; the label span renders inline as normal text. */
.footer-row .nav-icon { display: none; }

/* App Store pill — sits at the trailing edge of the nav, dark so
   it reads as the primary download CTA. Inline Apple-logo SVG is
   sized off the surrounding font so it scales with the label. */
.site-nav a.appstore-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: white;
    background: #000;
    padding: 8px 14px 8px 12px;
}
.site-nav a.appstore-btn:hover { color: white; background: #1a1a1a; }

.site-nav a.appstore-btn svg {
    width: 14px;
    height: 14px;
    fill: white;
    flex-shrink: 0;
    margin-top: -1px;
}

/* ─── Page intro (replaces the old teal hero) ────────────── */
.intro {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 24px;
}

.intro h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.8px;
    margin-bottom: 12px;
    color: var(--primary-text);
}

.intro p {
    font-size: 1.1rem;
    color: var(--subtitle-text);
    max-width: 640px;
    line-height: 1.55;
}

.intro .download-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 18px;
    background: var(--primary-teal);
    color: white;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.15s, opacity 0.15s;
}
.intro .download-link:hover { transform: translateY(-1px); opacity: 0.95; }

/* ─── Landing hero (split layout: text + paired phone previews) ─ */
.hero-split {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    gap: 40px;
    align-items: center;
}

.hero-split-text { max-width: 480px; }

.hero-split-text h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.05;
    margin-bottom: 16px;
    color: var(--primary-text);
}

/* The question is the new lead — bold, sized to feel like a tagline
   without dominating the way the previous "Simple." h1 did. The
   answer follows in muted weight as the resolution. */
.hero-split-text .hero-question {
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--primary-text);
    margin-bottom: 14px;
}

.hero-split-text .hero-answer {
    /* The full sentence is 63 chars and just barely overflows the
       480px desktop text column at 1.05rem. Dropped to 0.95rem so
       it fits on one line with breathing room. Mobile keeps the
       same size — the column there is wider proportionally, so it
       still fits cleanly. */
    font-size: 0.95rem;
    color: var(--subtitle-text);
    line-height: 1.55;
    max-width: 520px;
    margin-bottom: 24px;
}

.hero-split-actions {
    display: inline-flex;
    /* No wrap — keep both buttons side-by-side at every viewport
       width. On phone we shrink padding / font-size below instead
       of letting the second button stack underneath. */
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 100%;
}

.hero-split-actions .primary,
.hero-split-actions .secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 12px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: white;
    transition: transform 0.15s;
    white-space: nowrap;
}
.hero-split-actions .primary { background: #000; }
.hero-split-actions .secondary { background: var(--accent-orange); padding: 12px 20px 12px 16px; }
.hero-split-actions .primary:hover,
.hero-split-actions .secondary:hover { transform: translateY(-1px); }

.hero-split-actions .primary svg,
.hero-split-actions .secondary svg {
    width: 16px;
    height: 16px;
    fill: white;
    flex-shrink: 0;
    margin-top: -1px;
}

/* Default (desktop): show the long descriptive label, hide the short
   abbreviation. The @media (max-width: 480px) block below flips this
   on tight phones. These defaults MUST sit above the media query —
   if they were below, source-order would let them win at every
   width, breaking the mobile shrink. */
.hero-split-actions .short { display: none; }
.hero-split-actions .long { display: inline; }

@media (max-width: 480px) {
    /* Tight phones: trim padding + label to keep both pills on one
       row without overflowing. The labels we still want to show are
       in `.short`; the longer descriptive labels in `.long` hide. */
    .hero-split-actions { gap: 8px; }
    .hero-split-actions .primary,
    .hero-split-actions .secondary {
        padding: 10px 14px;
        font-size: 13px;
        gap: 6px;
    }
    .hero-split-actions .long { display: none; }
    .hero-split-actions .short { display: inline; }
}

/* Two phone frames sitting side-by-side in the hero's right column.
   The wrapper is a 2-col grid so both images stay the same width and
   share the same baseline at the top. */
.hero-split-shots {
    display: grid;
    /* minmax(0, 1fr) so the phone images can shrink with the viewport
       rather than forcing the grid wider than its container. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.hero-split-shot {
    border-radius: 32px;
    overflow: hidden;
    background: #1a1a1a;
    padding: 8px;
    box-shadow:
        0 28px 64px rgba(0,0,0,0.18),
        0 6px 18px rgba(0,0,0,0.06);
    width: 100%;
}

.hero-split-shot img {
    width: 100%;
    display: block;
    border-radius: 24px;
}

@media (max-width: 1020px) {
    /* Tighten the gap a little so the phones don't shrink as the
       viewport narrows. */
    .hero-split { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
}

@media (max-width: 820px) {
    .hero-split {
        /* minmax(0, 1fr) instead of plain 1fr so the column can shrink
           below its content's min-content size. With plain 1fr the
           intrinsic width of the phone-screenshot <img>s would force
           the column wider than the viewport, causing the hero to
           overflow horizontally on phones. */
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        text-align: left;
        padding-top: 40px;
    }
    .hero-split-text { max-width: none; }
}

@media (max-width: 380px) {
    /* Tightest phones: drop the gap a tick so the pair still fits. */
    .hero-split-shots { gap: 10px; }
}

/* ─── Sections ────────────────────────────────────────────── */
.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
}

.section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 32px;
    color: var(--primary-text);
}

.section-sub {
    font-size: 1.05rem;
    color: var(--subtitle-text);
    max-width: 640px;
    margin-bottom: 40px;
    /* Negative top-margin so when this paragraph follows
       .section-title the pair sits closer than the spacing the
       title alone uses to lead into the grid. */
    margin-top: -20px;
}

/* ─── Feature row (text + paired phone screenshots) ─────── */
.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    gap: 56px;
    align-items: center;
    margin-bottom: 72px;
}

.feature-row.reverse {
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
}
.feature-row.reverse .feature-text { order: 2; }
.feature-row.reverse .feature-pair,
.feature-row.reverse > .feature-illustration { order: 1; }

@media (max-width: 860px) {
    .feature-row, .feature-row.reverse {
        /* minmax(0, 1fr) so the column can shrink below the intrinsic
           width of the embedded illustration img — plain 1fr would
           force the row to overflow the viewport on phones. */
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    /* On mobile the rows always stack as text-then-image regardless of
       the reverse modifier (which only controls desktop column order).
       This rule targets the .feature-pair wrapper used on the marketing
       pages AND .feature-illustration when it's a direct child of the
       row (the simplified layout used on /problems). */
    .feature-row.reverse .feature-text { order: 1; }
    .feature-row.reverse .feature-pair,
    .feature-row.reverse > .feature-illustration { order: 2; }
}

.feature-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-teal);
    padding: 4px 12px;
    background: rgba(61, 179, 173, 0.10);
    border-radius: 999px;
    margin-bottom: 14px;
    text-decoration: none;
    transition: background 0.15s;
}
/* When rendered as an anchor (e.g. eyebrows on /problems that link
   to the matching feature page), darken the fill on hover. */
a.feature-eyebrow:hover {
    background: rgba(61, 179, 173, 0.20);
    color: var(--primary-teal);
}

.feature-row h3 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
    color: var(--primary-text);
}

.feature-row p {
    color: var(--subtitle-text);
    font-size: 1rem;
    line-height: 1.6;
}

/* Plain bullet list — used on /wallet, /reservations, /groups,
   /feed, /contacts. Two stacked points per feature row, each
   prefixed with a small teal dot. Lighter than .problem-solution
   (which has colored Problem/Solution labels) — used when both
   bullets are just descriptive points about the same feature. */
.feature-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feature-bullets li {
    color: var(--subtitle-text);
    font-size: 1rem;
    line-height: 1.55;
    padding-left: 22px;
    position: relative;
}
.feature-bullets li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-teal);
}

/* Problem / Solution bullet list — used on /problems. Two stacked
   items per row, each prefixed with a brand-colored label. Reads
   like a stat block so each pain point pairs cleanly with its fix. */
.problem-solution {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.problem-solution li {
    color: var(--subtitle-text);
    font-size: 1rem;
    line-height: 1.6;
}
.ps-label {
    font-weight: 700;
    margin-right: 4px;
    letter-spacing: 0.2px;
}
.ps-problem { color: var(--accent-red); }
.ps-solution { color: var(--primary-teal); }

/* Two phone shots side-by-side in the visual half of the row. */
.feature-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 480px) {
    /* On tight phones two phone-frames side-by-side feel cramped.
       Keep them paired but smaller; allow horizontal scroll fallback
       isn't needed since the grid stays at 2 columns either way. */
    .feature-pair { gap: 12px; }
}

/* ─── Phone-frame screenshot ─────────────────────────────── */
.feature-shot {
    width: 100%;
    max-width: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: #1a1a1a;
    padding: 7px;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.16),
        0 4px 12px rgba(0,0,0,0.06);
}

.feature-shot img {
    width: 100%;
    display: block;
    border-radius: 22px;
    background: #FAF8F4;
}

/* Hint-illustration variant — flat hand-drawn art, no phone bezel.
   Used on /problems. Soft cream background, rounded corners, gentle
   shadow so the illustration sits on the page without competing for
   attention. */
.feature-illustration {
    width: 100%;
    background: #FAF8F4;
    border-radius: 22px;
    padding: 20px;
    box-shadow:
        0 10px 28px rgba(0,0,0,0.06),
        0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
}

.feature-illustration img {
    width: 100%;
    height: auto;
    display: block;
    /* Preserve the aspect ratio of the source hint; some are tall
       4-panel comics, some are square before/after pairs. Letting
       them set their own height keeps every pair readable. */
}

/* ─── Gallery strip ──────────────────────────────────────── */
.gallery {
    background: white;
    padding: 64px 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.gallery-header {
    max-width: 1100px;
    margin: 0 auto 28px;
    padding: 0 24px;
}

.gallery-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.gallery-header p {
    color: var(--subtitle-text);
}

.gallery-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 8px 24px 28px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.gallery-scroll::-webkit-scrollbar { height: 8px; }
.gallery-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

.gallery-shot {
    flex: 0 0 240px;
    scroll-snap-align: start;
    border-radius: 24px;
    overflow: hidden;
    background: #1a1a1a;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.gallery-shot img {
    width: 100%;
    display: block;
    border-radius: 18px;
}

/* ─── CTA strip (slim, no giant green block) ─────────────── */
.cta-panel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

.cta-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 22px 28px;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.cta-card .cta-text h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 4px;
}

.cta-card .cta-text p {
    color: var(--subtitle-text);
    font-size: 0.95rem;
}

.cta-card .cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cta-button {
    padding: 10px 18px;
    background: var(--primary-teal);
    color: white;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.15s, opacity 0.15s;
}
.cta-button:hover { transform: translateY(-1px); opacity: 0.95; }

.cta-button.secondary {
    background: var(--accent-orange);
}

/* ─── Index "what's inside" cards ───────────────────────── */
/* Order matters here: ALL default (desktop) rules come first, then
   the @media overrides last. Mixing them caused the mobile rules
   to lose the cascade race because the desktop .tab-card.community
   { span 3 } rule used to sit AFTER the media queries — at phone
   width it would still apply and force the grid to render 3
   columns regardless of the 1fr template. */

.tab-grid {
    display: grid;
    /* Four columns at desktop width. The Community card spans 3 of
       them (see .tab-card.community below) so its landscape
       screenshot has room without being squished. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 56px;
}

.tab-card {
    display: block;
    padding: 18px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.15s, box-shadow 0.15s;
}

.tab-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Small phone preview at the top of the card — shows the first
   screenshot from the matching section so the card hints at content. */
.tab-card-preview {
    aspect-ratio: 9 / 16;
    background: linear-gradient(135deg, var(--field-bg), #fff);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.04);
}

.tab-card-preview img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.tab-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.tab-card p {
    font-size: 0.9rem;
    color: var(--subtitle-text);
    line-height: 1.5;
}

/* Community card spans 3 of the 4 grid columns so its landscape
   screenshot of the community web admin has room to show without
   being squished into a 9:16 phone frame. */
.tab-card.community {
    grid-column: span 3;
}
.tab-card.community .tab-card-preview {
    /* Drop the 9:16 phone frame for a wide landscape ratio that
       matches the source screenshot (1637×1072 ≈ 3:2). */
    aspect-ratio: 1637 / 1072;
    background: var(--field-bg);
}
.tab-card.community .tab-card-preview img {
    /* Fit the full dashboard in view — no cropping, slight padding
       around it courtesy of the field-bg. */
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1020px) {
    /* Tablet: drop to 2 columns, Community spans both. */
    .tab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tab-card.community { grid-column: span 2; }
}

@media (max-width: 720px) {
    /* Phone: single-column with a compact horizontal card layout —
       small preview thumb on the left, title + description on the right.
       Avoids the tall 9:16 preview taking over the whole viewport. */
    .tab-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tab-card.community { grid-column: span 1; }
    .tab-card {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 14px;
    }
    .tab-card-preview {
        flex: 0 0 110px;
        width: 110px;
        margin-bottom: 0;
    }
    .tab-card-body { flex: 1; min-width: 0; }
    .tab-card h3 { margin-bottom: 6px; }
    /* Community's preview is landscape, so on mobile we use a wider
       thumb to keep the wide screenshot readable. */
    .tab-card.community .tab-card-preview {
        flex-basis: 140px;
        width: 140px;
    }
}

/* ─── Lightbox (full-resolution screenshot overlay) ─────── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    cursor: zoom-out;
}

.lightbox-overlay.open { opacity: 1; }

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    /* Image itself reads "this is the content" — clicking ON the
       image does NOT close, only clicking the dark surround does. */
    cursor: default;
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: #1f2a2a;
    color: rgba(255,255,255,0.7);
    padding: 40px 24px 32px;
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
}

.site-footer .footer-row {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Contact line — sits above the nav-row in the footer. Email + Discord
   invite pulled out as their own visual block so they don't blend in
   with the page links. */
.site-footer .footer-contact {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
}

.site-footer .footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.92);
    font-weight: 500;
}

.site-footer .footer-contact a svg {
    width: 14px;
    height: 14px;
    fill: rgba(255,255,255,0.92);
    flex-shrink: 0;
}

.site-footer a {
    color: rgba(255,255,255,0.85);
}
.site-footer a:hover { color: white; }