/*
 * GadVerify public homepage, premium tech/business-platform redesign.
 * Uses only the existing --gv-* brand tokens (partials/theme-vars.blade.php)
 * and existing font stack; no new brand colors introduced.
 */

.is-home .public-content { max-width: none; padding: 0; }
.is-home .public-header-inner,
.is-home .public-footer { max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.is-home .public-header { background: var(--gv-navy); }

.gv-home {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--gv-text);
    overflow-x: clip;
}

.gv-home h1, .gv-home h2, .gv-home h3 { text-wrap: balance; }

.gv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gv-violet);
    margin-bottom: 22px;
}

/* -----------------------------------------------------------------------
   Buttons (homepage-specific, larger/bolder than the app-shell .btn)
----------------------------------------------------------------------- */

.gv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.gv-btn:hover { transform: translateY(-1px); }
.gv-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gv-primary) 30%, transparent); }
.gv-btn-lg { height: 58px; padding: 0 34px; font-size: 16px; }

.gv-btn-primary {
    background: linear-gradient(135deg, var(--gv-primary), var(--gv-violet));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--gv-primary) 65%, transparent);
}
.gv-btn-primary:hover { background: linear-gradient(135deg, var(--gv-primary-dark), color-mix(in srgb, var(--gv-violet) 85%, black)); }

.gv-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.gv-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }

/* -----------------------------------------------------------------------
   Hero
----------------------------------------------------------------------- */

.gv-hero {
    position: relative;
    background:
        radial-gradient(ellipse 900px 500px at 82% -10%, color-mix(in srgb, var(--gv-primary) 35%, transparent), transparent),
        radial-gradient(ellipse 700px 500px at -10% 100%, color-mix(in srgb, var(--gv-violet) 20%, transparent), transparent),
        var(--gv-navy);
    color: #fff;
    /* No overflow: hidden here anymore -- .gv-hero-visual-clip below now
       owns that (scoped to just the decorative visual), so the account
       dropdown in .gv-hero-actions can pop out past this section's own
       edges on short mobile layouts instead of being clipped invisible. */
    padding: 88px 20px 96px;
}

/* Clips only the full-bleed decorative visual -- same box .gv-hero used to
   clip against (absolutely positioned, matches the section's own bounds
   exactly via inset: 0), but scoped to this one element so nothing else
   in the hero (the account dropdown) gets clipped by it. */
.gv-hero-visual-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.gv-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
}

.gv-hero-copy > * {
    max-width: 640px;
}

.gv-hero-copy > .gv-hero-actions {
    max-width: none; /* a flex row of buttons, not a text measure */
}

.gv-hero-title {
    font-size: 54px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
}

.gv-hero-sub {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    max-width: 480px;
    margin-bottom: 32px;
}

.gv-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }

.gv-hero-price { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.gv-hero-price strong { color: #fff; font-weight: 700; }

/* -----------------------------------------------------------------------
   Hero network visual, a full-bleed ambient background layer spanning the
   entire browser width (the "left: 50%; width: 100vw; translateX(-50%)"
   trick breaks it out of .gv-hero's own padding/max-width, which its
   text content -- .gv-hero-copy -- stays constrained by). Purely
   decorative (aria-hidden in the markup), sits behind the copy via
   z-index, and dimmed so the headline/buttons on top stay readable at
   any diagram size.
----------------------------------------------------------------------- */

.gv-hero-visual {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0.5;
    pointer-events: none;
}

.gv-network {
    position: relative;
    /* Kept deliberately well short of the viewport (was min(90vw, 1100px),
       which was big enough to visually collide with .gv-hero-copy's text on
       most laptop-width screens, and to push satellite nodes past the right
       edge). This stays comfortably inside the hero's right-hand space at
       any width without needing a true side-by-side flex layout. */
    width: min(32vw, 480px);
    max-width: none;
    aspect-ratio: 1 / 1;
    margin-right: min(2vw, 40px);
    /* The node/ring/label sizes below were tuned in fixed px for the old
       440px box and stayed that size when the box grew up to 1100px,
       leaving them looking lost/undersized in the much bigger space.
       container-type turns cqw ("1% of this element's own width") into a
       real unit the node sizing below can scale off of, so the whole
       diagram grows together instead of just its box. */
    container-type: inline-size;
    container-name: gv-network;
}

@media (max-width: 991px) {
    .gv-hero-visual { justify-content: center; opacity: 0.3; }
    .gv-network { width: min(70vw, 380px); margin-right: 0; }
}

@media (max-width: 640px) {
    .gv-hero-visual { opacity: 0.2; }
    .gv-network { width: min(80vw, 300px); }
}

.gv-network-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.gv-line {
    stroke: color-mix(in srgb, var(--gv-violet) 55%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 5 7;
    animation: gv-flow-dash 18s linear infinite;
}

@keyframes gv-flow-dash {
    to { stroke-dashoffset: -240; }
}

.gv-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gv-node-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(70px, 21cqw, 150px);
    height: clamp(70px, 21cqw, 150px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gv-primary), color-mix(in srgb, var(--gv-violet) 60%, var(--gv-primary)));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--gv-primary) 18%, transparent), 0 20px 45px -12px rgba(37, 99, 235, 0.65);
}

.gv-node-mark {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(16px, 4.5cqw, 32px);
    color: #fff;
    letter-spacing: 0.02em;
}

.gv-node-ring {
    position: absolute;
    inset: clamp(-32px, -3.2cqw, -10px);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--gv-violet) 45%, transparent);
    animation: gv-pulse-ring 3.2s ease-out infinite;
}

@keyframes gv-pulse-ring {
    0% { transform: scale(0.92); opacity: 0.9; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { opacity: 0; }
}

.gv-node-satellite {
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    border-radius: clamp(10px, 3.2cqw, 20px);
    padding: clamp(8px, 2.3cqw, 16px) clamp(10px, 3.2cqw, 20px);
    animation: gv-node-float 6s ease-in-out infinite;
}
.gv-node-satellite:nth-child(odd) { animation-delay: -3s; }

.gv-node-satellite i {
    font-size: clamp(14px, 3.9cqw, 26px);
    color: var(--gv-violet);
    display: block;
    margin: 0 auto 3px;
}
.gv-node-satellite span {
    font-size: clamp(9px, 2.4cqw, 15px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

@keyframes gv-node-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(clamp(-14px, -1.4cqw, -6px)); }
}

/* -----------------------------------------------------------------------
   Hero CTA dropdown, <details> reuses the header's exact dropdown menu
   styling (public-shell.css), just anchored under the hero's dark band.
----------------------------------------------------------------------- */

.gv-hero-cta-dropdown { position: relative; }
.gv-hero-cta-dropdown .public-nav-dropdown-menu { top: calc(100% + 10px); }

/* -----------------------------------------------------------------------
   Section shell
----------------------------------------------------------------------- */

.gv-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 88px 20px;
}

.gv-section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }

.gv-section-kicker {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gv-primary);
    margin-bottom: 14px;
}

.gv-section-head h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--gv-navy);
    margin-bottom: 12px;
}

.gv-section-head p { font-size: 15px; color: var(--gv-muted); line-height: 1.65; }

/* -----------------------------------------------------------------------
   How it works, a 4-step flow, connected by a through-line
----------------------------------------------------------------------- */

.gv-how { padding-top: 64px; }

.gv-how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
}
.gv-how-steps::before {
    content: '';
    position: absolute;
    /* Half the icon's own height (56px / 2) -- runs through the vertical
       center of the circles, not below them. */
    top: 28px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--gv-violet), var(--gv-primary));
    opacity: 0.25;
    z-index: 0;
}

.gv-how-step { position: relative; text-align: center; }

.gv-how-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gv-surface);
    border: 2px solid var(--gv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--gv-primary);
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
}

.gv-how-step h3 { font-size: 16px; font-weight: 700; color: var(--gv-navy); margin-bottom: 8px; }
.gv-how-step p { font-size: 13px; color: var(--gv-muted); line-height: 1.6; }

@media (max-width: 860px) {
    .gv-how-steps { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
    .gv-how-steps::before { display: none; }
}
@media (max-width: 520px) {
    .gv-how-steps { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   Audience sections, Business Owners / Device Owners, alternating layout
----------------------------------------------------------------------- */

.gv-audience { padding: 64px 20px; }
.gv-audience-business { background: var(--gv-surface); }
.gv-audience-individual { background: var(--gv-background); }

.gv-audience-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--gv-navy);
    text-wrap: balance;
    margin: 14px 0 12px;
}
.gv-audience-sub { font-size: 15px; color: var(--gv-muted); line-height: 1.65; margin-bottom: 22px; max-width: 480px; }

.gv-audience-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gv-audience-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gv-text); font-weight: 500; }
.gv-audience-business .gv-audience-list i { color: var(--gv-primary); }
.gv-audience-individual .gv-audience-list i { color: color-mix(in srgb, var(--gv-violet) 75%, black); }

.gv-btn-teal {
    background: var(--gv-violet);
    border-color: var(--gv-violet);
}
.gv-btn-teal:hover { background: color-mix(in srgb, var(--gv-violet) 82%, black); border-color: color-mix(in srgb, var(--gv-violet) 82%, black); }

.gv-audience-panel {
    border-radius: 24px;
    padding: 44px 32px;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gv-audience-panel-business {
    background: radial-gradient(ellipse 480px 320px at 30% 20%, color-mix(in srgb, var(--gv-primary) 22%, transparent), transparent), color-mix(in srgb, var(--gv-primary) 8%, var(--gv-background));
}
.gv-audience-panel-individual {
    background: radial-gradient(ellipse 480px 320px at 70% 20%, color-mix(in srgb, var(--gv-violet) 24%, transparent), transparent), color-mix(in srgb, var(--gv-violet) 8%, var(--gv-surface));
}

.gv-audience-panel-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    margin-bottom: 26px;
}
.gv-audience-panel-business .gv-audience-panel-icon { background: linear-gradient(135deg, var(--gv-primary), var(--gv-primary-dark)); }
.gv-audience-panel-individual .gv-audience-panel-icon { background: linear-gradient(135deg, var(--gv-violet), color-mix(in srgb, var(--gv-violet) 70%, black)); }

.gv-audience-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gv-audience-stat {
    background: var(--gv-surface);
    border: 1px solid var(--gv-border);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gv-navy);
}
.gv-audience-panel-individual .gv-audience-stat { background: rgba(255, 255, 255, 0.7); }
.gv-audience-stat i { font-size: 20px; }
.gv-audience-business .gv-audience-stat i { color: var(--gv-primary); }
.gv-audience-individual .gv-audience-stat i { color: color-mix(in srgb, var(--gv-violet) 75%, black); }

/* -----------------------------------------------------------------------
   Quick verify band
----------------------------------------------------------------------- */

.gv-verify-band { padding: 64px 20px; background: var(--gv-surface); }

.gv-verify-card {
    background: var(--gv-navy);
    border-radius: 24px;
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    background-image: radial-gradient(ellipse 600px 300px at 90% 0%, color-mix(in srgb, var(--gv-violet) 25%, transparent), transparent);
}

.gv-verify-copy { flex: 1 1 320px; }
.gv-verify-copy h2 { font-size: 24px; font-weight: 800; color: white; margin: 10px 0 8px; }
.gv-verify-copy p { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.gv-verify-copy p strong { color: white; font-family: 'JetBrains Mono', ui-monospace, monospace; }

.gv-verify-form {
    flex: 1 1 380px;
    display: flex;
    gap: 10px;
    background: white;
    padding: 8px;
    border-radius: 14px;
}
.gv-verify-form input {
    flex: 1;
    border: none;
    background: none;
    padding: 0 14px;
    font-size: 15px;
    color: var(--gv-text);
    min-width: 0;
}
.gv-verify-form input:focus { outline: none; }
.gv-verify-form .gv-btn { height: 46px; padding: 0 22px; white-space: nowrap; }

@media (max-width: 640px) {
    .gv-verify-card { padding: 32px 24px; }
    .gv-verify-form { flex-direction: column; }
    .gv-verify-form .gv-btn { width: 100%; justify-content: center; }
}

/* -----------------------------------------------------------------------
   Security section
----------------------------------------------------------------------- */

.gv-security-section { background: var(--gv-navy); max-width: none; }
.gv-security-section > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.gv-security-section .gv-section-head h2 { color: #fff; }
.gv-security-section .gv-section-head p { color: rgba(255, 255, 255, 0.6); }

.gv-security-item { display: flex; gap: 18px; }

.gv-security-item i {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--gv-violet);
}

.gv-security-item h3 { font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.gv-security-item p { font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.6; }

/* -----------------------------------------------------------------------
   Final CTA band
----------------------------------------------------------------------- */

.gv-final-cta {
    text-align: center;
    padding: 96px 20px;
    background: var(--gv-background);
}
.gv-final-cta h2 { font-size: 30px; font-weight: 800; color: var(--gv-navy); margin-bottom: 14px; letter-spacing: -0.015em; }
.gv-final-cta p { font-size: 15px; color: var(--gv-muted); max-width: 480px; margin: 0 auto 32px; line-height: 1.6; }

.gv-final-cta-head { margin-bottom: 40px; }
.gv-final-cta-head p { margin-bottom: 0; }

.gv-final-cta-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.gv-final-cta-option {
    flex: 1 1 240px;
    max-width: 280px;
    background: var(--gv-surface);
    border: 1px solid var(--gv-border);
    border-radius: 18px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    list-style: none;
}
.gv-final-cta-option::-webkit-details-marker { display: none; }
.gv-final-cta-option:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.3); }

.gv-final-cta-option i { font-size: 28px; margin-bottom: 14px; }
.gv-final-cta-option strong { font-size: 16px; font-weight: 800; color: var(--gv-navy); margin-bottom: 4px; }
.gv-final-cta-option span { font-size: 13px; color: var(--gv-muted); }

.gv-final-cta-business { border-color: color-mix(in srgb, var(--gv-primary) 30%, var(--gv-border)); }
.gv-final-cta-business i { color: var(--gv-primary); }
.gv-final-cta-business:hover { border-color: var(--gv-primary); }

.gv-final-cta-individual { border-color: color-mix(in srgb, var(--gv-violet) 40%, var(--gv-border)); }
.gv-final-cta-individual i { color: color-mix(in srgb, var(--gv-violet) 75%, black); }
.gv-final-cta-individual:hover { border-color: var(--gv-violet); }

.gv-final-cta-signin { position: relative; }
.gv-final-cta-signin i { color: var(--gv-navy); }
.gv-final-cta-signin .public-nav-dropdown-menu { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }

/* -----------------------------------------------------------------------
   App download banner (partials/app-download-banner.blade.php, 'full')
----------------------------------------------------------------------- */

.gv-app-download {
    padding: 56px 20px 88px;
    background: var(--gv-background);
}

.gv-app-download-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 28px;
    border-radius: var(--gv-radius-lg, 20px);
    background: var(--gv-gradient-brand-soft, var(--gv-background));
    border: 1px solid var(--gv-border);
}

.gv-app-download-copy h3 { font-size: 20px; font-weight: 800; color: var(--gv-navy); margin: 0 0 6px; }
.gv-app-download-copy p { font-size: 14px; color: var(--gv-muted); margin: 0 0 20px; }

.gv-app-download-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.gv-app-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--gv-border);
    background: var(--gv-surface);
    color: var(--gv-navy);
    cursor: pointer;
}
.gv-app-download-btn:hover { border-color: var(--gv-primary); }

.gv-app-download-btn-primary {
    background: var(--gv-gradient-brand, var(--gv-primary));
    color: #fff;
    border-color: transparent;
}
.gv-app-download-btn-primary:hover { opacity: 0.92; }

.gv-app-download-btn.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.gv-app-download-also { margin-top: 16px; font-size: 12.5px; color: var(--gv-muted); }
.gv-app-download-also a { color: var(--gv-primary); font-weight: 650; text-decoration: none; margin: 0 4px; }

/* -----------------------------------------------------------------------
   Scroll reveal (progressive enhancement, see home.js)
----------------------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* JS disabled or hasn't run yet: content must still be visible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .gv-line, .gv-node-ring, .gv-node-satellite { animation: none; }
}

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */

@media (max-width: 980px) {
    .gv-hero { padding: 56px 20px 64px; text-align: center; }
    .gv-hero-copy > * { margin-left: auto; margin-right: auto; }
    .gv-hero-actions { justify-content: center; }
    .gv-hero-title { font-size: 40px; }
}

@media (max-width: 640px) {
    .gv-section { padding: 64px 20px; }
    .gv-section-head h2 { font-size: 26px; }
    .gv-hero-title { font-size: 32px; }
    .gv-btn { width: 100%; }
    .gv-hero-actions { flex-direction: column; }
    .gv-final-cta h2 { font-size: 24px; }

    /* Below this width the hero text is fully centered and stacked --
       the decorative network visual (also centered at this range) would
       sit directly behind it rather than off to one side, reading as
       visual noise/clutter rather than atmosphere. Purely decorative
       (aria-hidden), so hiding it costs nothing functionally. */
    .gv-hero-visual { display: none; }

    .gv-audience { padding: 48px 20px; }
    .gv-audience-panel { padding: 32px 22px; min-height: 0; }
}

@media (max-width: 420px) {
    /* Two stat tiles per row gets genuinely tight below ~420px once the
       panel's own padding + Bootstrap's column gutter are accounted for --
       a single column reads as considered spacing instead of cramped. */
    .gv-audience-stat-grid { grid-template-columns: 1fr; }
}