/* G3/G4 landing pages — Figma design is 1920x1080.
   Scaling is scoped to .g-page via the --g custom property so it does NOT
   shrink rem/em-based dialog/global.min.css styles. --g equals 1 design
   pixel scaled to viewport, picking the smaller of the width-based and
   height-based scales so the layout always fits inside the viewport at
   its original 16:9 proportions (capped at 1920x1080 so 4K displays don't
   grow without limit). svh is used so the scale stays stable as mobile
   URL bars show/hide. Convert design px to css length: calc(N * var(--g)). */

/* Scoped body reset — only kicks in on the two template body classes WP adds. */
body.page-template-page-video-homepage-g3,
body.page-template-page-video-homepage-g4 {
    margin: 0;
    padding: 0;
    background: #2a2a2a;
}

body.page-template-page-video-homepage-g3 > img[src^="data:image/webp"],
body.page-template-page-video-homepage-g3 > noscript,
body.page-template-page-video-homepage-g4 > img[src^="data:image/webp"],
body.page-template-page-video-homepage-g4 > noscript {
    display: none !important;
}

.g-page {
    --g: min(min(100vw, 1920px) / 1920, min(100svh, 1080px) / 1080);
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    background: #2a2a2a;
    color: #fff;
    font-family: 'Signika', sans-serif;
    min-height: 100vh;
    padding: 0 !important;
}

.g-page * {
    box-sizing: border-box;
}

.g-page a {
    color: inherit;
    text-decoration: none;
}

/* ===== Hero (1920x1080 design area) ===== */
.g-hero {
    position: relative;
    width: 100%;
    height: calc(1080 * var(--g));
    overflow: hidden;
}

/* Background — supports both <img> and <video> via .g-bg-media */
.g-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.g-bg-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient overlays from Figma */
.g-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.g-overlay--top {
    top: 0;
    height: calc(526 * var(--g));
    background: linear-gradient(180deg, rgba(15, 7, 33, 0.4) 12.55%, rgba(42, 0, 79, 0) 33.45%);
}

.g-overlay--mid {
    top: calc(515 * var(--g));
    height: calc(482 * var(--g));
    background: linear-gradient(180deg, rgba(42, 0, 79, 0) 0%, rgba(21, 11, 40, 0.368254) 27.97%, rgba(19, 12, 36, 0.4) 74.88%, rgba(42, 0, 79, 0) 93.82%);
}

.g-overlay--cta {
    top: calc(853 * var(--g));
    height: calc(226 * var(--g));
    background: linear-gradient(360deg, #451C85 0%, rgba(62, 25, 111, 0) 100%);
}

/* Small top-left logo */
.g-small-logo {
    position: absolute;
    top: calc(18 * var(--g));
    left: calc(90 * var(--g));
    width: calc(94 * var(--g));
    height: calc(94 * var(--g));
    z-index: 5;
}

.g-small-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Centered logo (G4 only) */
.g-center-logo {
    position: absolute;
    top: calc(40 * var(--g));
    left: 50%;
    transform: translateX(-50%);
    width: calc(314 * var(--g));
    height: calc(217 * var(--g));
    z-index: 4;
}

.g-center-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Subtitle */
.g-subtitle {
    position: absolute;
    top: calc(757 * var(--g));
    left: 50%;
    transform: translateX(-50%);
    width: calc(1749 * var(--g));
    margin: 0;
    padding: calc(17 * var(--g)) 0;
    font-family: 'Signika', sans-serif;
    font-weight: 700;
    font-size: calc(100 * var(--g));
    line-height: calc(87 * var(--g));
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    z-index: 5;
}

/* CTA "Hit Spin!" button */
.g-cta {
    position: absolute;
    top: calc(900 * var(--g));
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(350 * var(--g));
    height: calc(100 * var(--g));
    padding: 0 calc(52 * var(--g));
    font-family: 'Signika', sans-serif;
    font-weight: 700;
    font-size: calc(50 * var(--g));
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, rgba(60, 179, 8, 1) 0%, rgba(75, 211, 15, 1) 19%, rgba(39, 109, 8, 1) 82%, rgba(45, 126, 9, 1) 98%);
    border: calc(4 * var(--g)) solid rgba(74, 206, 16, 1);
    border-radius: calc(46 * var(--g));
    box-shadow: 0 calc(3 * var(--g)) calc(3 * var(--g)) rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease;
    z-index: 5;
    animation: g-pulse 1.6s ease-in-out infinite;
}

.g-cta:hover {
    transform: translateX(-50%) scale(1.04);
}

@keyframes g-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.04); }
}

/* ===== Footer ===== */
.g-footer {
    background: #2a2a2a;
    color: #fff;
    padding: calc(55 * var(--g)) calc(90 * var(--g)) !important;
}

.g-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(40 * var(--g));
    margin-bottom: calc(55 * var(--g));
}

.g-footer-links {
    display: flex;
    gap: calc(98 * var(--g));
    width: calc(1128 * var(--g));
}

.g-link-group {
    font-size: calc(14 * var(--g));
    line-height: 2;
}

.g-link-group a {
    display: block;
    color: #fff;
}

.g-link-group a:hover {
    text-decoration: underline;
}

.g-footer-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: calc(36 * var(--g));
    width: calc(612 * var(--g));
    font-size: calc(14 * var(--g));
}

.g-social {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--g));
}

.g-social img {
    height: calc(47 * var(--g));
    width: auto;
    display: block;
}

.g-disclaimer {
    margin: 0;
    padding: calc(8 * var(--g));
    font-size: calc(14 * var(--g));
    line-height: 1.5;
}

.g-disclaimer p {
    margin: 0 0 calc(14 * var(--g));
}

.g-disclaimer p:last-child {
    margin-bottom: 0;
}