/* =============================================================================
   Grape4Invite — Homepage styles (index.css)
   Mobile-first. No !important. CSS custom properties for brand tokens.
   Loaded AFTER assets/css/main.css so these rules win the cascade.
   Scoped to body.home so these rules do not leak into other pages.
   ============================================================================= */

:root {
    /* Brand palette — aligned with the Grape4Invite app */
    --g4i-purple-dark:  #6d28d9;
    --g4i-purple:       #8b5cf6;
    --g4i-purple-light: #c4b5fd;
    --g4i-fuchsia:      #d946ef;

    /* App surface palette (light-lilac theme) */
    --g4i-bg:           #eeebf4;     /* page background */
    --g4i-bg-dark:      #1c1d26;     /* retained for legacy fallbacks */
    --g4i-card:         #ffffff;     /* card surfaces */
    --g4i-border:       rgba(139, 92, 246, 0.15);
    --g4i-input-bg:     #f3f0f8;     /* light-grey input fill */

    /* Text */
    --g4i-text:         #1f2937;
    --g4i-text-muted:   #6b7280;
    --g4i-white:        #ffffff;

    /* Accent highlights (from app metrics) */
    --g4i-yellow:       #eab308;
    --g4i-green:        #22c55e;

    /* Gradient CTA (app's Login button) */
    --g4i-gradient:     linear-gradient(135deg, var(--g4i-fuchsia), var(--g4i-purple));

    /* Tokens */
    --g4i-radius:       20px;
    --g4i-radius-sm:    10px;
    --g4i-shadow-lg:    0 16px 56px rgba(139, 92, 246, 0.2);
    --g4i-shadow-md:    0 8px 24px rgba(139, 92, 246, 0.15);
    --g4i-shadow-sm:    0 4px 14px rgba(139, 92, 246, 0.1);
    --g4i-maxw:         1200px;

    /* App spec tokens (from Grape4Invite app design system) */
    --primary-purple:          #b444eb;
    --secondary-purple:        #8b5cf6;
    --main-gradient:           linear-gradient(135deg, #c026d3, #8b5cf6);
    --shadow-purple:           rgba(139, 92, 246, 0.25);
    --bg-light:                #f5f5f5;
    --bg-white-trans:          rgba(255, 255, 255, 0.95);
    --text-dark:               #333333;
    --text-muted:              #888888;
    --border-light:            rgba(255, 255, 255, 0.2);
    --border-radius:           24px;
    --btn-radius:              30px;
    --title-tag-number-bg:     #8c42f0;
    --title-tag-text-bg:       #d7bdf9;
    --title-tag-text-color:    #523895;
}

/* -----------------------------------------------------------------------------
   Home page reset (scoped to body.home)
   ----------------------------------------------------------------------------- */

body.home { color: var(--g4i-text); background: var(--g4i-bg); }

/* Legal pages (ToS, Privacy) share the same light surface */
body:has(#tos-content-placeholder),
body:has(#privacy-content-placeholder) {
    background: var(--g4i-bg);
    color: var(--g4i-text);
}

/* Legal pages — match home page design.
   main.css paints a purple gradient on #banner and layers bkgImage.png via
   #banner::before. body.home neutralizes both on the landing page; mirror
   that here so ToS / Privacy share the flat --g4i-bg surface. */
body:has(#tos-content-placeholder) #banner,
body:has(#privacy-content-placeholder) #banner {
    background: var(--g4i-bg);
    box-shadow: none;
    min-height: auto;
}

body:has(#tos-content-placeholder) #banner::before,
body:has(#privacy-content-placeholder) #banner::before {
    content: none;
    display: none;
}

/* Card surface: match the home page's hero card (solid white, purple
   border, deep purple-tinted shadow) instead of the current translucent
   rgba card. */
body:has(#tos-content-placeholder) .card-box-privacy-policy,
body:has(#privacy-content-placeholder) .card-box-privacy-policy {
    background: var(--g4i-card) !important;
    border: 1px solid var(--g4i-border) !important;
    border-radius: var(--g4i-radius) !important;
    box-shadow: var(--g4i-shadow-lg) !important;
}

body.home *,
body.home *::before,
body.home *::after { box-sizing: border-box; }

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

body.home .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Neutralize main.css legacy rules that target #banner, #banner::before,
   #three, #four, #five, and #footer at higher specificity than
   body.home .hero / .phones / .preview / etc. used to have.
   Our section rules below now also use body.home #banner (etc.) so they
   match main.css head-on (specificity 1,1,1 beats 1,0,0).
   ----------------------------------------------------------------------------- */

body.home #banner {
    background: none;            /* our .hero rule sets the real gradient */
    box-shadow: none;
    z-index: auto;
    text-align: initial;
}
body.home #banner::before {
    content: none;
    display: none;
}

body.home #three {
    background-color: transparent;
    margin-top: 0;
}

body.home #four {
    height: auto;
    min-height: 0;
    padding: 0;
}

body.home #five {
    background: none;            /* our .contact rule sets its own gradient */
    background-blend-mode: normal;
}

/* #footer.site-footer is styled below in the FOOTER section (unscoped so
   it can be used on ToS/Privacy pages too); that rule beats main.css's
   #footer { padding: ... } via specificity (1,1,0 > 1,0,0). */

/* Mobile-only: main.css has !important rules on #three via
   @media (max-width: 767px) { #one + section, #three { margin-top: 5rem !important; ... } }
   Beat those with matching !important + higher specificity. */
@media screen and (max-width: 767px) {
    body.home #three {
        margin-top: 0 !important;
        padding-top: 0 !important;
        background-color: transparent !important;
    }
}

/* -----------------------------------------------------------------------------
   HERO (#banner)
   ----------------------------------------------------------------------------- */

body.home #banner {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    background: var(--g4i-bg);
    overflow: hidden;
}

body.home .hero__card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    border-radius: var(--g4i-radius);
    box-shadow: var(--g4i-shadow-lg);
    text-align: center;
}

body.home .hero__checkmark {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    object-fit: contain;
    animation: heroFloat 6s ease-in-out infinite;
}

body.home .hero__wordmark {
    width: 100%;
    max-width: 280px;
}

body.home .hero__tagline {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--g4i-text);
    max-width: 42ch;
}

body.home .hero__cta {
    display: inline-block;
    line-height: 0;
    border: 0;
    text-decoration: none;
}
body.home .hero__cta img { width: 180px; }
body.home .hero__cta:focus-visible {
    outline: 3px solid var(--g4i-purple-dark);
    outline-offset: 3px;
    border-radius: var(--g4i-radius-sm);
}

body.home .hero__scroll {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.5rem 1rem;
    color: var(--g4i-purple-dark);
    text-decoration: none;
    font-size: 0.875rem;
    opacity: 0.85;
    border: 0;
}
body.home .hero__scroll::after {
    content: "↓";
    display: block;
    margin-top: 0.25rem;
    font-size: 1.2rem;
    text-align: center;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@media screen and (min-width: 768px) {
    body.home #banner { padding: 3rem 2rem 5rem; }
    body.home .hero__card {
        max-width: 760px;
        padding: 2.5rem 2.5rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }
    body.home .hero__checkmark { width: 140px; height: 140px; }
    body.home .hero__wordmark { max-width: 360px; }
    body.home .hero__tagline {
        flex: 1 1 100%;
        font-size: 1.25rem;
        max-width: 60ch;
        margin: 0 auto;
    }
    body.home .hero__cta { flex: 1 1 100%; }
    body.home .hero__cta img { width: 200px; margin: 0 auto; }
}

@media screen and (min-width: 1200px) {
    body.home #banner { padding: 4rem 3rem 6rem; }
    body.home .hero__card {
        max-width: 900px;              /* narrower so wrapped rows feel balanced */
        padding: 3rem 4rem;
        flex-direction: row;
        flex-wrap: wrap;                /* matches tablet — tagline + CTA get their own rows */
        justify-content: center;
        gap: 2.5rem;
        text-align: center;
    }
    body.home .hero__checkmark { width: 160px; height: 160px; }
    body.home .hero__wordmark { max-width: 380px; flex: 0 0 auto; }
    body.home .hero__tagline {
        flex: 1 1 100%;                 /* full-width row under checkmark + wordmark */
        font-size: 1.5rem;
        max-width: 60ch;
        margin: 0 auto;
    }
    body.home .hero__cta { flex: 1 1 100%; margin: 0; }
    body.home .hero__cta img { width: 240px; margin: 0 auto; }
}

/* -----------------------------------------------------------------------------
   PHONES SHOWCASE (#one)
   ----------------------------------------------------------------------------- */

body.home #one {
    position: relative;
    background: var(--g4i-bg);
    color: var(--g4i-text);
    padding: 3rem 1rem 5rem;
}

body.home .phones__inner {
    max-width: var(--g4i-maxw);
    margin: 0 auto;
}

/* Marquee carousel — phones scroll continuously right→left, with a
   transparent-wall fade on each edge. Track is duplicated in HTML so the
   loop seam is invisible. */
body.home .phones__gallery {
    position: relative;
    overflow: hidden;
    margin: 0 auto 2.5rem;
    max-width: 520px;
    /* Slide widths are fixed (rem) per breakpoint to avoid percentage-against-
       max-content circular sizing that would force images to render at their
       intrinsic pixel size. */
    --g4i-phone-slide: 13.23rem;
    --g4i-phone-gap: 0.9rem;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

body.home .phones__track {
    display: flex;
    width: max-content;
    animation: g4iPhonesScroll 24s linear infinite;
}

body.home .phones__track img {
    flex: 0 0 auto;
    width: var(--g4i-phone-slide);
    /* aspect-ratio drives height — 1.91:1 (was 2.1:1, +10% height). object-fit:
       cover trims a few pixels top/bottom rather than distort the image. */
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    margin-right: var(--g4i-phone-gap);
    border-radius: var(--g4i-radius-sm);
    background: var(--g4i-card);
    box-shadow: var(--g4i-shadow-sm);
    padding: 0.25rem;
    box-sizing: border-box;
}

/* bkgImage slides inherit everything from .phones__track img — same width,
   same aspect-ratio, same object-fit: cover, same card chrome — so they read
   as identical-sized panels next to the phone screenshots. */

@keyframes g4iPhonesScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    body.home .phones__track { animation: none; }
}

body.home .phones__header {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 56ch;
}

body.home .phones__header h2 {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--g4i-purple-dark);
}

body.home .phones__header p {
    margin: 0;
    color: var(--g4i-text-muted);
    line-height: 1.6;
}

body.home .phones__features {
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    border-radius: var(--g4i-radius-sm);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--g4i-shadow-sm);
    max-width: 720px;
    margin: 0 auto;
}

body.home .phones__features h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--g4i-purple-dark);
}

body.home .phones__features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.home .phones__features li {
    padding: 0.25rem 0;
    color: var(--g4i-text);
    line-height: 1.5;
    break-inside: avoid;
}

body.home .phones__features li::before {
    content: "\2606";
    color: var(--g4i-purple);
    display: inline-block;
    margin-right: 0.55em;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    body.home #one { padding: 5rem 2rem 6rem; }
    body.home .phones__gallery {
        max-width: none;
        margin-bottom: 3.5rem;
        --g4i-phone-slide: 16.93rem;
        --g4i-phone-gap: 1.35rem;
    }
    body.home .phones__header h2 { font-size: 2.25rem; }
    body.home .phones__features ul {
        column-count: 2;
        column-gap: 2.5rem;
    }
}

@media screen and (min-width: 1200px) {
    body.home #one { padding: 6rem 3rem 7rem; }
    body.home .phones__gallery {
        --g4i-phone-slide: 18.63rem;
        --g4i-phone-gap: 1.575rem;
    }
    body.home .phones__header h2 { font-size: 2.75rem; }
}

/* -----------------------------------------------------------------------------
   PREVIEW / CAROUSEL (#three)
   Preserves .carousel-container + .carousel-img + .back/.left/.right/.center
   (carousel JS in main.js toggles these class names — DO NOT RENAME)
   ----------------------------------------------------------------------------- */

body.home #three {
    position: relative;
    overflow: hidden;
    background: var(--g4i-bg);
    color: var(--g4i-text);
    padding: 3rem 1rem 5rem;
    /* main.css has an unscoped '#three { display: flex; align-items: stretch }'
       that turns .preview__inner into a flex item with min-width: auto, which
       refuses to shrink below the mobile carousel's forced 100vw and blows
       the card past the section's right padding. Revert to normal block flow
       here — .preview__inner's own grid at >=1200px still drives desktop. */
    display: block;
}

body.home .preview__bg {
    display: none;           /* decorative bg image hidden in light theme */
}

body.home .preview__inner {
    position: relative;
    z-index: 2;
    max-width: var(--g4i-maxw);
    margin: 0 auto;
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    border-radius: var(--g4i-radius-sm);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--g4i-shadow-sm);
}

body.home .preview__header {
    text-align: center;
    margin-bottom: 1rem;
}

body.home .preview__text-col {
    margin-bottom: 1rem;
}

body.home .preview__header h2 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--g4i-purple-dark);
}

body.home .preview__subtitle {
    margin: 0;
    font-size: 1.1rem;
    color: var(--g4i-purple);
}

body.home .preview__desc {
    margin: 0 auto;
    max-width: 60ch;
    line-height: 1.6;
    color: var(--g4i-text-muted);
}

/* Carousel (DO NOT RENAME — JS hooks).
   main.css has a BASE (non-@media) .carousel-container rule that uses
   position: absolute + right: -125% + width/height 600/550 + display: flex.
   Reset each of those properties here so the carousel stays in normal flow
   on desktop (1200+), where main.css's tablet !important overrides do not
   kick in. */
body.home .carousel-container {
    position: relative;
    display: block;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-width: 540px;
    min-height: 360px;                      /* ensure visible room on light bg */
    aspect-ratio: 16 / 10;
    margin: 0 auto;
    overflow: hidden;                       /* clip phone images to card */
}

body.home .carousel-img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 40%;
    max-height: 90%;
    height: auto;
    border-radius: var(--g4i-radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
}

body.home .carousel-img.center {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 3;
}
body.home .carousel-img.left {
    transform: translate(-140%, -50%) scale(0.75);
    opacity: 0.7;
    z-index: 2;
}
body.home .carousel-img.right {
    transform: translate(40%, -50%) scale(0.75);
    opacity: 0.7;
    z-index: 2;
}
body.home .carousel-img.back {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    body.home #three { padding: 5rem 2rem 6rem; }
    body.home .preview__header h2 { font-size: 2.25rem; }
    body.home .carousel-container { max-width: 720px; }
    body.home .carousel-img { max-width: 35%; }
}

/* Tablet range — main.css has !important rules for .carousel-img that
   set max-width: 130px and scale(1.5) on the center image, which overflow
   the 300px-tall container main.css forces. Override with matching
   !important at a higher specificity so the phones fit comfortably. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    body.home .carousel-container {
        height: 320px !important;          /* slightly taller than main.css's 300 */
    }
    body.home .carousel-img {
        max-width: 110px !important;
    }
    body.home .carousel-img.center {
        transform: translate(-50%, -50%) scale(1.15) !important;
    }
    body.home .carousel-img.left {
        transform: translate(-150%, -50%) scale(0.9) !important;
    }
    body.home .carousel-img.right {
        transform: translate(50%, -50%) scale(0.9) !important;
    }
    body.home .carousel-img.back {
        transform: translate(-50%, -50%) scale(0.5) !important;
    }
}

/* Mobile (≤767px) — main.css forces .carousel-container to width: 100vw
   with margin-left: -1.5rem (designed for the old edge-to-edge layout).
   Now that the carousel lives inside the merged .preview__inner card,
   pull it back to a normal in-flow, centered element so the card's
   right-side padding is preserved. main.css's height/margin-top/margin-
   bottom !important rules for the container are left untouched. */
@media screen and (max-width: 767px) {
    body.home .carousel-container {
        width: 100% !important;
        max-width: 540px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 1200px) {
    body.home #three {
        padding: 6rem 3rem 7rem;
    }
    body.home .preview__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }
    body.home .preview__text-col { grid-column: 1; margin-bottom: 0; }
    body.home .preview__header { text-align: left; margin-bottom: 1rem; }
    body.home .preview__header h2 { font-size: 2.75rem; }
    body.home .preview__desc { text-align: left; margin: 0; }
    body.home .carousel-container {
        grid-column: 2;
        margin: 0;
        max-width: 600px;
    }
    body.home .carousel-img { max-width: 40%; }
}

/* -----------------------------------------------------------------------------
   SPACER (#four)
   Kept as an anchor target; no visual presence.
   ----------------------------------------------------------------------------- */

body.home #four.spacer {
    background: var(--g4i-bg);
    height: 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   CONTACT (#five)
   ----------------------------------------------------------------------------- */

body.home #five {
    background: var(--g4i-bg);
    color: var(--g4i-text);
    padding: 4rem 1rem 4rem;
}

body.home .contact__inner {
    max-width: 720px;
    margin: 0 auto;
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    border-radius: var(--g4i-radius);
    box-shadow: var(--g4i-shadow-md);
    padding: 2.5rem 1.5rem;
}

body.home .contact__header {
    text-align: center;
    margin-bottom: 2rem;
}

body.home .contact__header h2 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--g4i-purple-dark);
}

body.home .contact__header p {
    margin: 0 auto;
    max-width: 56ch;
    color: var(--g4i-text-muted);
    line-height: 1.55;
}

body.home .contact__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

body.home .contact__field {
    display: block;
    width: 100%;
}

body.home .contact__field input,
body.home .contact__field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--g4i-border);
    border-radius: var(--g4i-radius-sm);
    background: var(--g4i-input-bg);
    color: var(--g4i-text);
    font: inherit;
    line-height: 1.4;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

body.home .contact__field input::placeholder,
body.home .contact__field textarea::placeholder {
    color: var(--g4i-text-muted);
}

body.home .contact__field input:focus,
body.home .contact__field textarea:focus {
    outline: none;
    border-color: var(--g4i-purple);
    background: var(--g4i-card);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

body.home .contact__field textarea {
    resize: vertical;
    min-height: 120px;
}

body.home .contact__submit {
    padding: 0.85rem 2.5rem;
    border: none;
    border-radius: 999px;
    background: var(--g4i-gradient);
    color: var(--g4i-white);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
    justify-self: center;
    box-shadow: var(--g4i-shadow-md);
}

body.home .contact__submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: var(--g4i-shadow-lg);
}
body.home .contact__submit:focus-visible {
    outline: 3px solid var(--g4i-purple-light);
    outline-offset: 3px;
}

@media screen and (min-width: 768px) {
    body.home #five { padding: 5rem 2rem 5rem; }
    body.home .contact__header h2 { font-size: 2.25rem; }
    body.home .contact__form {
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        row-gap: 1rem;
    }
    body.home .contact__field--full { grid-column: 1 / -1; }
    body.home .contact__submit {
        grid-column: 1 / -1;
        max-width: 240px;
        justify-self: center;
    }
}

@media screen and (min-width: 1200px) {
    body.home #five { padding: 6rem 3rem 6rem; }
    body.home .contact__header h2 { font-size: 2.75rem; }
}

/* -----------------------------------------------------------------------------
   FOOTER (.site-footer)
   Unscoped — this section is shared by index.html AND the legal pages
   (termsofservice.html, privacypolicy.html). The selector #footer.site-footer
   has specificity (1,1,0) which beats main.css's base #footer rule (1,0,0).
   ----------------------------------------------------------------------------- */

#footer.site-footer {
    background: var(--g4i-bg);
    color: var(--g4i-text);
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.site-footer__link-card {
    width: 100%;
    max-width: 360px;
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    border-radius: var(--g4i-radius-sm);
    padding: 1.25rem 1.5rem;
    color: var(--g4i-text);
    font: inherit;
    cursor: pointer;
    text-decoration: none;          /* kill <a> default underline when used as a link */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
    box-shadow: var(--g4i-shadow-sm);
}
.site-footer__link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--g4i-shadow-md);
    background: var(--g4i-card);
}
.site-footer__link-card:focus-visible {
    outline: 3px solid var(--g4i-purple);
    outline-offset: 2px;
}
.site-footer__link-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--g4i-text);   /* override main.css h1-h6 { color: #fff } */
}
.site-footer__link-card .icon {
    font-size: 1.1rem;
    color: var(--g4i-purple);
}

.site-footer__colophon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 2rem;
    border-top: 1px solid var(--g4i-border);
}

.site-footer__company {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
#footer.site-footer .site-footer__company img {
    height: 50px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.site-footer__company:hover img { opacity: 1; }
.site-footer__company:focus-visible {
    outline: 3px solid var(--g4i-purple);
    outline-offset: 4px;
    border-radius: 4px;
}

.site-footer__colophon span {
    font-size: 0.85rem;
    color: var(--g4i-text-muted);
    font-weight: 700;                    /* bold copyright line, matches squaregrape.net */
}

@media screen and (min-width: 768px) {
    #footer.site-footer { padding: 4rem 2rem 3rem; }
    .site-footer__links {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
    .site-footer__link-card {
        flex: 0 1 320px;
    }
    .site-footer__colophon {
        flex-direction: row;
        justify-content: center;
    }
    .site-footer__colophon span { font-size: 0.9rem; }
}

/* -----------------------------------------------------------------------------
   HEADER (injected by main.js from header.html)
   main.css has legacy dark header styling. Override it with the app's
   light surface: white bar, dark text, purple-gradient Log In / Sign Up.
   Applies to every page that loads main.js + index.css (index, ToS, Privacy).
   ----------------------------------------------------------------------------- */

#header {
    background: var(--g4i-card);
    color: var(--g4i-text);
    box-shadow: var(--g4i-shadow-sm);
    border-bottom: 1px solid var(--g4i-border);
    background-image: none;   /* main.css adds a pic02.png bg — kill it */
}
/* Override main.css's  #nav a { color: #fff !important }  on the light header.
   Specificity (0,2,1) + !important beats main.css (0,1,1) + !important. */
#header #nav a {
    color: var(--g4i-text) !important;
    text-decoration: none;
}
#header #nav a:hover { color: var(--g4i-purple-dark) !important; }
#header #logo,
#header #logo a { color: var(--g4i-purple-dark) !important; }

/* Language dropdown: mirror mobile #navPanel depth-1 look —
   group card with purple left accent, lilac wash, hover deepens tint
   and swipes the row 6px right. */
#header #nav > ul > li > ul {
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    box-shadow: var(--g4i-shadow-md);
    border-radius: var(--g4i-radius-sm);
    padding: 0;
    min-width: 160px;
    overflow: hidden; /* clip group corners + left-accent */
}

#header #nav > ul > li > ul > li {
    display: block;
    margin: 0;
}

#header #nav > ul > li > ul > li > a {
    display: block;
    padding: 0.6em 1em;
    color: var(--g4i-text-muted) !important;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.3;
    background: rgba(139, 92, 246, 0.04);
    border-left: 3px solid var(--primary-purple); /* rides along with hover swipe */
    border-top: 1px solid rgba(139, 92, 246, 0.08);
    transform: translateX(0);
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

#header #nav > ul > li > ul > li:first-child > a {
    border-top: none;
}

#header #nav ul li ul li a:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-purple) !important;
    transform: translateX(6px);
}

/* Nav list items and buttons: vertical-align middle so Log In / Sign Up
   pills are centered against the tall header line, not baseline-aligned. */
#header nav ul li { vertical-align: middle; }
/* Log In / Sign Up pills — app design system spec:
   - gradient: linear-gradient(135deg, #c026d3, #8b5cf6)  (var(--main-gradient))
   - border-radius: 30px  (var(--btn-radius))
   - white bold text (font-weight 600)
   - purple-tinted drop shadow  (var(--shadow-purple))
   Sized down from the app's 350x53px sidebar button to fit the 3.5em header. */
#header .button.primary {
    background: var(--main-gradient);
    color: #ffffff !important;                /* beat #nav a !important */
    border: none;
    border-radius: var(--btn-radius);
    height: auto;                              /* undo main.css height: 2em */
    line-height: 1.2;
    padding: 0.55rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 8px 25px var(--shadow-purple);
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.2s;
}
#header .button.primary:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 28px var(--shadow-purple);
}
#header .button.primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* Logo mark before the "Grape4invite" logo text in the header.
   Renders the grape4invite PNG logo inline before the wordmark.
   Applies to both the desktop #header and the mobile #titleBar
   (whose .title is a clone of #logo.html()). */
#header #logo a::before,
#titleBar .title a::before {
    content: "";
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    margin-right: 0.45em;
    background: url('../images/logo_grape4invite.png') center/contain no-repeat;
    vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   LEGAL PAGES (.card-box-privacy-policy) — override main.css translucent frosted
   look with a clean white card matching the homepage sections.
   ----------------------------------------------------------------------------- */

.card-box-privacy-policy {
    background: var(--g4i-card);
    color: var(--g4i-text);
    box-shadow: var(--g4i-shadow-md);
    border: 1px solid var(--g4i-border);
}

.card-box-privacy-policy h2,
.card-box-privacy-policy h3 {
    color: var(--g4i-purple-dark);
}

/* -----------------------------------------------------------------------------
   MOBILE NAV: #titleBar and #navPanel (shown on <=767px instead of #header).
   Match the desktop design language — white surface, purple accents, gradient
   hamburger, gradient Log In / Sign Up pills.
   ----------------------------------------------------------------------------- */

/* Top title bar */
#titleBar {
    background: var(--g4i-card);
    color: var(--primary-purple);
    box-shadow: var(--g4i-shadow-sm);
    border-bottom: 1px solid var(--g4i-border);
}
#titleBar .title,
#titleBar .title a {
    color: var(--primary-purple) !important;
    font-weight: 600;
    text-decoration: none;
}
#titleBar .toggle:before {
    background: var(--main-gradient);
    color: #ffffff;
    border-radius: var(--g4i-radius-sm);
}

/* Slide-in nav panel */
#navPanel {
    background: var(--g4i-card);
    color: var(--g4i-text);
    border-right: 1px solid var(--g4i-border);
    box-shadow: var(--g4i-shadow-md);
    padding: 1rem;
}

#navPanel .link {
    color: var(--g4i-text) !important;
    border-top: 1px solid var(--g4i-border);
    padding: 0 0.5rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
#navPanel .link:hover {
    color: var(--primary-purple) !important;
    background: var(--g4i-bg);
}

/* Top-level items (Home, Contact, Language, Log In, Sign Up) */
#navPanel .link.depth-0 {
    color: var(--g4i-text) !important;
    font-weight: 600;
}

/* Nested language options (English, Español, Português, Français, Deutsch)
   visually grouped as children of the Language section above:
   - purple left accent line connects them as one block
   - subtle purple-tinted bg reinforces the grouping
   - rounded top-left / bottom-left corners close the group
   - faint divider between individual options */
#navPanel .link.depth-1 {
    color: var(--g4i-text-muted) !important;
    font-weight: 400;
    font-size: 0.95em;
    margin-left: 1rem;                                  /* pull accent line off the panel edge */
    padding-left: 3.5rem;                               /* extra tab of indent inside the group */
    border-top: 1px solid rgba(139, 92, 246, 0.08);
    border-left: 3px solid var(--primary-purple);
    background: rgba(139, 92, 246, 0.04);
    transform: translateX(0);
    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}
/* First option sits directly below "Language" — no divider above it */
#navPanel .link.depth-0 + .link.depth-1 {
    border-top: none;
    margin-top: 0.25rem;
    border-top-left-radius: var(--g4i-radius-sm);
}
/* Last option (depth-1 immediately followed by a depth-0) — round bottom + spacing */
#navPanel .link.depth-1:has(+ .link.depth-0) {
    margin-bottom: 0.5rem;
    border-bottom-left-radius: var(--g4i-radius-sm);
}
#navPanel .link.depth-1:hover {
    color: var(--primary-purple) !important;
    background: rgba(139, 92, 246, 0.1);
    transform: translateX(6px);
}

/* Log In / Sign Up — pill buttons inside the panel.
   Target by href since navList() strips original class attributes. */
#navPanel .link[href="https://app.grape4invite.com"] {
    background: var(--main-gradient);
    color: #ffffff !important;
    border-radius: var(--btn-radius);
    font-weight: 600;
    text-align: center;
    margin: 0.5rem 0;
    height: 2.75rem;
    line-height: 2.75rem;
    border-top: none;
    box-shadow: 0 4px 14px var(--shadow-purple);
}
#navPanel .link[href="https://app.grape4invite.com"]:hover {
    color: #ffffff !important;
    background: var(--main-gradient);
    filter: brightness(1.05);
}

/* ---------------------------------------------------------------
   Temporarily hide Log In / Sign Up nav items until the app is live.
   Elements (and i18n keys) are preserved intentionally — re-enable
   by removing the data-hidden-until-app attributes in header.html.
   --------------------------------------------------------------- */
#nav li[data-hidden-until-app="true"],
#navPanel a[data-hidden-until-app="true"] {
    display: none;
}

/* Companion to the rule above: with Log In / Sign Up hidden, the rightmost
   nav item becomes "Language", whose dropdown was sized assuming the two
   buttons sat to its right. Push the nav further from the viewport edge so
   the dropdown stays fully on-screen. Removed alongside the rule above when
   the app launches.
   Desktop only — #header is display:none below 768px (navPanel takes over). */
#header nav {
    right: 4.5em;
}