.gg-title-heading {
    z-index: 10;
    color: #fff;
    margin-bottom: 20px;
    font-family: canada-type-gibson, sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 100px;
    display: block;
    position: relative;
}

.gg-intro-title-copy11 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 220px;
    margin-bottom: 0;
    margin-right: 110px;
    display: flex;
    position: absolute;
    inset: 0% 0% 0% auto;
}

/* Say Hello Button Styles */
.say-hello-btn.is-playing,
.say-hello-btn-m.is-playing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

/* Desktop (hover-capable) */
@media (hover: hover) {
    .say-hello-btn {
        opacity: 0;
        pointer-events: auto;
        transition: opacity 200ms ease;
    }

    .say-hello-btn:hover {
        opacity: 1;
    }
}

/* Mobile / Touch (no hover) */
@media (hover: none) {
    .say-hello-btn {
        display: none !important;
    }

    .say-hello-btn-m {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .cursor-gif {
        display: none !important;
    }

    .cursor-gif-m {
        opacity: 1 !important;
        right: 30px;
        bottom: 30px;
        visibility: visible !important;
    }
}

/* Cursor graphic */
.cursor-gif,
.cursor-gif-m {
    opacity: 0;
    transition: opacity .5s ease-out;
}

.say-hello-btn,
.say-hello-btn-m {
    position: absolute;
    z-index: 120;
    cursor: pointer;
    text-decoration: none;
}

.gg-say-hello-image {
    /* Tony 2026-06-01: was width: 20% / max-width: 20% which collapsed the
       button to nothing because the chain .say-hello-btn (position:absolute,
       no width) -> .cursor-gif -> img sizes upward from the image. Hard-fix
       to 120px so the button is reliably 120px wide regardless of parent
       chain width inheritance. */
    width: 120px;
    height: auto;
    max-width: 120px;
    display: block;
}

/* Ensure slider content is balanced so grid stays perfectly centered */
.slider.w-slider {
    padding-left: 0;
    padding-right: 0;
}

/* Foreground Video Overlay */
#fgVideoOverlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 120;
    background: transparent;
}

#fgVideoOverlay.active {
    display: flex;
    pointer-events: all;
}

#fgVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 2s ease;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

#fgVideo.fading {
    opacity: 0;
}

/* Girlfriend Cards Hover Video Styles */
.gg-model-card {
    /* #2: the visible "border" is now drawn by an inset box-shadow
       set via JS in home.js. We disable the existing border (was
       conflicting with the Webflow base rule) and rely on
       box-shadow which (a) doesn't take layout space and (b) can't
       collide with any other border rule in the cascade.
       Initial state: no shadow. JS only adds it when scroll
       position warrants. */
    border: 0 !important;
    box-shadow: none;
    border-radius: 20px;
    width: 100%;
    padding: 0;
    text-decoration: none;
    display: block;
    position: relative;
    cursor: pointer;
}

.gg-model-card:hover {
    /* Hover always wins — JS-driven shadow overridden to none
       while pointer is inside. */
    box-shadow: none !important;
}

.gg-model-card-relative {
    width: 100%;
    height: 100%;
    position: relative;
}

.bg-stack {
    aspect-ratio: 9 / 16;
    outline-offset: 0px;
    mix-blend-mode: screen;
    border-radius: 12px;
    outline: none;
    width: 100%;
    margin-bottom: 30px;
    display: block;
    position: relative;
    overflow: visible;
}

.gg-model-card-video {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    margin-bottom: 40px;
    display: block;
    position: absolute;
    inset: 0%;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.layer--base {
    z-index: 2;
    opacity: 0;
    outline-offset: -1px;
    border-radius: 12px;
    outline: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
    transition: opacity 0.5s ease;
}

.gg-model-card:hover .gg-model-card-video {
    opacity: 0;
}

.gg-model-card:hover .layer--base {
    opacity: 1;
}

/* Suppress all borders/outlines on inner content at all times */
.gg-model-card .gg-card-info-pad,
.gg-model-card .gg-table-data,
.gg-model-card .gg-data-cell {
    border: none !important;
    outline: none !important;
}

.gg-model-card:hover .gg-card-info-pad,
.gg-model-card:hover .gg-table-data,
.gg-model-card:hover .gg-data-cell {
    border: none !important;
    outline: none !important;
}

.gg-card-info-pad {
    padding: 20px;
    position: relative;
    z-index: 3;
    border: none;
    outline: none;
}

.gg-model-name-container {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    text-decoration: none;
    display: flex;
}

.gg-girl-signatures {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gg-girl-signatures img {
    margin: 0 auto;
}

.gg-table-data {
    border: none;
    outline: none;
}

/* Match Webflow gogirlfriend.webflow.css: smooth opacity transition */
.gg-data-cell {
    border: none;
    outline: none;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide Section-2 video content while keeping gg-hr visible */
#Section-2 .gg-exclusive-models {
    display: none;
}

/* Remove excessive spacing from Section-2 container */
#Section-2.gg-exclusive {
    padding: 0px 0px 60px 0px;
    /* Top, Right, Bottom, Left */
    margin: 0;
    margin-top: 120px;
    /* Push Information section down, away from model cards */
}

/* Audit Task 4 (aggressive rewrite 2026-06-03):
   The overview copy ("The first AI which actually thinks about you...")
   physically lives in Section-3.gg-faq (per DOM audit), NOT Section-2.
   The Webflow base CSS narrows the chain as follows on phones:
     .gg-faq                @media (max-width: 479px) adds 20px L/R padding
     ._w-page-700px         @media (max-width: 991px) sets width: 90%
                            @media (max-width: 767px) adds 34px L/R padding
   That stack leaves a visible inset on iPhone-class viewports.

   Force BOTH Section-2 and Section-3 plus every intermediate wrapper
   to span 100% of the viewport below 768px (and again below 480px,
   because the .gg-faq 20px gutter is in a 479px media query and only
   another 479px-scoped rule reliably beats it). Inner readability
   padding is applied only to the text-bearing wrappers, not to the
   sections themselves. */
@media screen and (max-width: 767px) {
    #Section-2.gg-exclusive,
    #Section-3.gg-faq {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    #Section-2.gg-exclusive .w-layout-blockcontainer,
    #Section-2.gg-exclusive .w-container,
    #Section-2.gg-exclusive .container,
    #Section-2.gg-exclusive ._w-page-700px,
    #Section-3.gg-faq .w-layout-blockcontainer,
    #Section-3.gg-faq .w-container,
    #Section-3.gg-faq .container,
    #Section-3.gg-faq ._w-page-700px {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* Text-bearing wrappers inside Section-3 get a small inner gutter
       so the copy doesn't kiss the viewport edges. Section + wrappers
       stay edge-to-edge above this. */
    #Section-3.gg-faq .gg-examples-container,
    #Section-3.gg-faq .accordion-item-open.ui-example,
    #Section-3.gg-faq .accordion-item-top-wrapper,
    #Section-3.gg-faq .accordion-item-bottom-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* 2026-06-10: the FAQ question title sits in a 3-column grid
       (.5fr 1.7fr .5fr, 2vw gap) declared on .accordion-item-top-wrapper
       at gogirlfriend.webflow.css:353-363. Even after the wrapper goes
       full-width above, the title cell only occupies the middle 1.7fr
       slot, leaving a wide empty right gutter on mobile. Collapse the
       wrapper to a flex row so the (opacity:0) "00" marker stays inline
       at its natural size and the real title fills the remaining width. */
    #Section-3.gg-faq .accordion-item-top-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2vw !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-columns: auto !important;
    }
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    /* 2026-06-10 (rev 2): the hidden "00" marker (.accordian-title.colour.hide)
       has opacity:0 but is still display:block, so it consumes ~60px of flex
       width + a 2vw gap before the real title starts. That made the title
       wrap narrower than the answer paragraph below it. Killing the marker
       with display:none on mobile so the title spans the full wrapper width
       and visually aligns with the answer. Desktop layout untouched. */
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title.colour,
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title.hide,
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title.colour.hide {
        display: none !important;
    }
    /* 2026-06-10: the FAQ answer <p> has Webflow defaults of margin-left:-89px,
       max-width:50vw, padding-right:140px (gogirlfriend.webflow.css lines 376-393)
       which made it overflow LEFT of the wrapper while the wrapper has
       overflow:hidden -> first letter of each line was clipped on mobile.
       Reset to flow inside the wrapper's 16px gutters. Same fix for the
       overview-video button below it. */
    #Section-3.gg-faq .p-accordion-answer,
    #Section-3.gg-faq .p-accordion-answer.lp {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    #Section-3.gg-faq .div-block-163 {
        margin-left: 0 !important;
    }
}

/* Below 480px the Webflow .gg-faq rule re-introduces 20px L/R padding;
   re-assert the full-width override at that breakpoint too. */
@media screen and (max-width: 479px) {
    #Section-2.gg-exclusive,
    #Section-3.gg-faq {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    #Section-2.gg-exclusive .w-layout-blockcontainer,
    #Section-2.gg-exclusive .w-container,
    #Section-2.gg-exclusive .container,
    #Section-2.gg-exclusive ._w-page-700px,
    #Section-3.gg-faq .w-layout-blockcontainer,
    #Section-3.gg-faq .w-container,
    #Section-3.gg-faq .container,
    #Section-3.gg-faq ._w-page-700px {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    #Section-3.gg-faq .gg-examples-container,
    #Section-3.gg-faq .accordion-item-open.ui-example,
    #Section-3.gg-faq .accordion-item-top-wrapper,
    #Section-3.gg-faq .accordion-item-bottom-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* 2026-06-10: mirror the title-width fix at the 480px breakpoint.
       Webflow's 479-scoped block (webflow.css 7913-7917, 8143-8150) re-asserts
       margin-left:1px on .accordian-title and leaves the parent grid intact,
       so we have to collapse the wrapper to a flex row here too. */
    #Section-3.gg-faq .accordion-item-top-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2vw !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-columns: auto !important;
    }
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    /* 2026-06-10 (rev 2): hide the "00" marker at this breakpoint too
       (see same fix in the 768 block above) so the title spans the
       full wrapper width and aligns with the answer paragraph below. */
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title.colour,
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title.hide,
    #Section-3.gg-faq .accordion-item-top-wrapper .accordian-title.colour.hide {
        display: none !important;
    }
    /* 2026-06-10: mirror the answer-paragraph reset at the 480px breakpoint
       too, otherwise Webflow's 479-scoped rules re-introduce the negative
       margin and the first letter of each line gets clipped again. */
    #Section-3.gg-faq .p-accordion-answer,
    #Section-3.gg-faq .p-accordion-answer.lp {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    #Section-3.gg-faq .div-block-163 {
        margin-left: 0 !important;
    }
}

/* Ensure gg-hr in Section-2 has minimal spacing */
#Section-2 .gg-hr {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

/* Ensure bottom dividers are perfectly centered and don't break horizontal overflow */
.gg-hr.last {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
    max-width: 100%;
}

/* Remove Webflow's fixed height constraints on the Information section to allow multi-paragraph expansion + kill the hover zoom animation */
[data-w-id="2ef18bac-ac28-3c77-5238-a0874cd2cda7"],
[data-w-id="7a992139-6c5e-c1be-4d78-a726d1cdf1f4"] {
    height: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* Information heading + body copy only: cap at 50% viewport width. Accordion items/examples below keep their own widths. */
#Section-3 #O1,
#Section-3 .gg-textzoom-container,
#Section-3 .gg-textzoom-container .of-body-copy {
    width: 50vw !important;
    max-width: 50vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile: widen to 90% for readability */
@media screen and (max-width: 767px) {
    #Section-3 #O1,
    #Section-3 .gg-textzoom-container,
    #Section-3 .gg-textzoom-container .of-body-copy {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    .gg-intro-title-heading {
        font-size: 38px !important;
    }

    #Section-1.gg-models {
        margin-bottom: -200px !important;
    }
}

/* Reduce bottom spacing on Section-1 if needed */
#Section-1.gg-models {
    margin-bottom: 0;
    padding-bottom: 0;
}

.gg-girl-signatures {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
}

.gg-name {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
    margin-bottom: 6px;
    vertical-align: top;
    position: relative;
    top: 0;
}

/* Name SVG styling - ID-based classes for specific widths */
.gg-name.girlfriend-1 {
    width: 106px;
    margin-top: 0;
    margin-bottom: 6px;
    align-self: flex-start;
}

.gg-name.girlfriend-2 {
    width: 106px;
    margin-top: 0;
    margin-bottom: -4px;
}

.gg-name.girlfriend-3 {
    width: 100px;
    margin-top: 0;
    margin-bottom: 6px;
}

.gg-name.girlfriend-4 {
    width: 116px;
}

.gg-name.girlfriend-5 {
    width: 100px;
}

.gg-name.girlfriend-6 {
    width: 96px;
}

.gg-name.girlfriend-7 {
    width: 100px;
}

.gg-name.girlfriend-8 {
    width: 100px;
}

.gg-name.girlfriend-9 {
    width: 112px;
}

.gg-table-data {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0;
}

.gg-data-cell {
    display: flex;
    align-items: center;
    flex-flow: row;
}

.gg-cell-check {
    flex-shrink: 0;
    aspect-ratio: 1;
    border: 2px solid gray;
    border-radius: 50px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 18px;
    display: flex;
}

.gg-data-check {
    width: 8px;
    height: auto;
}

.gg-subtext-data {
    color: #fff;
    font-family: inter-variable, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 14px;
    z-index: 2;
}

.gg-choose-model {
    /* Resting state: grey rgb(36, 36, 36). Turns blue on hover via
       the .gg-model-card:hover .gg-choose-model rule below.
       (Note: the UI #13 fix that removed the grey rectangle on the
       mobile dashboard targeted the Tailwind `bg-zinc-900` wrapper
       on profile/show.blade.php, NOT this button — those are two
       different greys.) */
    background-color: rgb(36, 36, 36);
    border-radius: 9px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    padding: 16px 20px;
    display: flex;
    transition: background-color 0.3s ease;
}

.gg-model-card:hover .gg-table-data {
    opacity: 1 !important;
}

.gg-model-card:hover .gg-choose-model {
    background-color: var(--gg-carousel-arrow, #2d69c6) !important;
    /* Wait for the description cell-highlight stagger to finish
       before turning blue. home.js animates each .gg-data-cell to
       opacity:1 with a 280ms cumulative delay; 5 cells = 1120ms
       total. transition-delay: 1120ms here matches that, so the
       button stays grey through the cell cascade and only turns
       blue once every description row is highlighted.
       On mouseleave, the BASE rule's transition (no delay) kicks
       in instead, so the button returns to grey instantly. */
    transition: background-color 0.3s ease 1120ms !important;
}

.gg-ui-font {
    color: #fff;
    font-family: inter-variable, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* Slider Container */
.slider {
    width: 100%;
    position: relative;
}

.gg-slider-innercontainer {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
}

.girls-1,
.girls-2,
.girls-3 {
    height: auto;
}

/* Grid Layout */
.gg-girl-cards {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    width: 78%;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    box-sizing: border-box;
}

.gg-girlcell {
    opacity: 1;
    align-items: center;
}

/* Slider Navigation Arrows */
.left-arrow {
    opacity: 0;
    background-image: url('/images/GG-Left-Arrow.svg');
    background-position: 50% 35%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
}

.right-arrow {
    /* Inherits positioning from .w-slider-arrow-right in webflow.css */
    /* Uses: position: absolute; inset: 0px; margin: auto; left: auto; */
    width: 13%;
    /* Override from gogirlfriend.webflow.css */
}

.gg-models-next {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
}

/* Carousel arrow: at rest = no blue (transparent fill, subtle border); on hover = admin --gg-carousel-arrow */
.right-arrow .gg-models-next-btn,
.gg-models-next-btn {
    z-index: 1;
    opacity: 0.5;
    background-color: transparent !important;
    border: 2px solid #7379ad !important;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 36px;
    margin-bottom: 280px;
    display: flex;
    position: relative;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* Hover: admin carousel arrow color (fill + border), full opacity, scale */
.right-arrow.gg-carousel-arrow-hover .gg-models-next-btn {
    opacity: 1 !important;
    background-color: var(--gg-carousel-arrow, #2d69c6) !important;
    border-color: var(--gg-carousel-arrow, #2d69c6) !important;
    transform: scale(1.05);
}

.gg-pale-blue-arrow {
    width: 18px;
}

/* Mobile Responsive - keep girlfriends visible (we don't have avatars-mobile block) */
@media screen and (max-width: 991px) {
    #Section-1 .slider.w-slider {
        display: block !important;
    }

    .slider {
        width: 100%;
    }

    .gg-girl-cards {
        width: 80%;
        margin-top: 140px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 140px;
        grid-row-gap: 140px;
    }
}

@media screen and (max-width: 767px) {
    #Section-1 .slider.w-slider {
        display: block !important;
    }

    .slider {
        width: 100%;
    }

    .gg-girl-cards {
        width: 100%;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr;
    }

    .bg-stack {
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        display: flex;
        overflow: hidden;
    }

    .layer--base {
        z-index: 2;
        aspect-ratio: 9 / 16;
        opacity: 0;
        width: 100%;
        height: auto;
        position: relative;
        inset: 0%;
        box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.64);
    }

    /* Tap hint - visible on mobile only */
    .gg-tap-mobile {
        display: flex !important;
        z-index: 3;
        align-items: center;
        margin-top: 50%;
        margin-right: 20%;
        text-decoration: none;
        position: absolute;
        inset: 0 0 auto auto;
    }

    .gg-tap-mobile .gg-tap-outer {
        border: 2px solid var(--gg-primary, #8b6eff);
        border-radius: 50px;
        padding: 4px;
    }

    .gg-tap-mobile .gg-tap-inner {
        border: 2px solid var(--gg-primary, #8b6eff);
        border-radius: 20px;
        padding: 4px;
    }

    .gg-tap-mobile .gg-tap-dot {
        background-color: var(--gg-primary, #8b6eff);
        border-radius: 50px;
        width: 6px;
        height: 6px;
    }

    .gg-tap-mobile .gg-tap-text {
        color: var(--gg-primary, #8b6eff);
        margin-left: 12px;
        font-family: inter-variable, sans-serif;
        font-size: 16px;
        font-weight: 400;
        animation: gg-tap-glow 2s ease-in-out infinite;
    }
}

@media screen and (max-width: 991px) {
    .gg-tap-mobile {
        display: flex !important;
        z-index: 3;
        align-items: center;
        margin-top: 50%;
        margin-right: 20%;
        text-decoration: none;
        position: absolute;
        inset: 0 0 auto auto;
    }

    .gg-tap-mobile .gg-tap-outer {
        border: 2px solid var(--gg-primary, #8b6eff);
        border-radius: 50px;
        padding: 4px;
    }

    .gg-tap-mobile .gg-tap-inner {
        border: 2px solid var(--gg-primary, #8b6eff);
        border-radius: 20px;
        padding: 4px;
    }

    .gg-tap-mobile .gg-tap-dot {
        background-color: var(--gg-primary, #8b6eff);
        border-radius: 50px;
        width: 6px;
        height: 6px;
    }

    .gg-tap-mobile .gg-tap-text {
        color: var(--gg-primary, #8b6eff);
        margin-left: 12px;
        font-family: inter-variable, sans-serif;
        font-size: 16px;
        font-weight: 400;
        animation: gg-tap-glow 2s ease-in-out infinite;
    }
}

/* Tap hint - hidden on desktop */
.gg-tap-mobile {
    display: none;
}

@keyframes gg-tap-glow {

    0%,
    100% {
        color: var(--gg-primary, #8b6eff);
        text-shadow: 0 0 12px var(--gg-primary, #8b6eff);
    }

    50% {
        color: #6ecffb;
        text-shadow: 0 0 16px #6ecffb;
    }
}

/* Pricing Section Styles */
.gg-pricing {
    position: relative;
}

.gg-pricing-card {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gg-pricing-card:hover>div:first-child {
    opacity: 1 !important;
}

.gg-pricing-card:hover {
    border-color: rgba(192, 192, 192, 0.5) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(192, 192, 192, 0.3), 0 0 30px rgba(192, 192, 192, 0.2);
}

.gg-pricing-button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gg-pricing-button:hover {
    background-color: #a8a8a8 !important;
    box-shadow: 0 5px 20px rgba(192, 192, 192, 0.4);
    transform: translateY(-2px);
}

.gg-pricing-button:active {
    transform: translateY(0);
}

.gg-get-started-btn:hover {
    background: linear-gradient(135deg, #d0d0d0 0%, #b8b8b8 100%) !important;
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4) !important;
    transform: translateY(-2px);
}

.gg-get-started-btn:active {
    transform: translateY(0);
}

@media screen and (max-width: 991px) {
    .gg-pricing .w-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .gg-pricing-card {
        padding: 40px 32px !important;
    }
}

@media screen and (max-width: 767px) {
    .gg-pricing-card {
        padding: 36px 28px !important;
    }

    .gg-pricing-card h2 {
        font-size: 28px !important;
    }

    .gg-pricing-card span[style*="font-size: 56px"] {
        font-size: 48px !important;
    }
}

/* --- Go Boyfriend Promotional Footer Component --- */
.gg-gb-footer {
    z-index: 1;
    outline-offset: -1px;
    background-color: #000;
    background-image: url("https://cdn.prod.website-files.com/68ac2ff49e759a261fd19739%2F69b53ed77c54be58c5b1d32c_GB-Header-03-Footer_1_poster.0000000.jpg");
    background-position: 50%;
    background-size: cover;
    border-radius: 60px;
    outline: 1px solid #000;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
    height: 66svh;
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 40px;
    text-decoration: none;
    display: flex;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.gg-gb-footer .go-footer-videos {
    z-index: 1;
    border-radius: 60px;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    inset: 0% auto auto 0%;
}

.gg-gb-footer .w-background-video > video {
    object-fit: cover;
    z-index: -100;
    background-position: 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    inset: -100%;
}

.gg-gb-footer .footer-promo-spacing {
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    display: flex;
    max-width: 100%;
}

.gg-gb-footer .gg-logo.smaller.footer {
    margin-bottom: 16px;
    margin-left: -20px;
    position: relative;
}

.gg-gb-footer .gg-logo.smaller {
    width: 294px;
    height: 170px;
    margin-top: 20px;
    margin-left: 20px;
}

.gg-gb-footer .gg-logo {
    z-index: 100;
    mix-blend-mode: screen;
    width: 380px;
    height: 220px;
    position: absolute;
}

.gg-gb-footer .gg-logo-animation {
    mix-blend-mode: color-dodge;
    width: 100%;
    height: 100%;
}

.gg-gb-footer .gg-footer-link {
    z-index: 100;
    align-items: center;
    display: flex;
    position: relative;
}

.gg-gb-footer .gg-hero-description-text.bold.medium {
    font-weight: 500;
}

.gg-gb-footer .gg-hero-description-text.bold {
    font-size: 23px;
    font-weight: 600;
}

.gg-gb-footer .gg-hero-description-text {
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    font-family: tt-commons-pro, sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px;
}

.gg-gb-footer .footer-arrow {
    width: 19px;
    margin-left: 12px;
}

/* Mobile adjustments */
@media screen and (max-width: 991px) {
    .gg-gb-footer {
        height: auto;
        min-height: 250px;
        padding: 30px 20px;
        border-radius: 20px;
    }
    .gg-gb-footer .go-footer-videos {
        border-radius: 20px;
    }
    .gg-gb-footer .w-background-video > video {
        border-radius: 20px;
    }
    .gg-gb-footer .footer-promo-spacing {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .gg-gb-footer .gg-logo {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: 200px;
        height: 115px;
    }
    .gg-gb-footer .gg-logo.smaller {
        width: 200px;
        height: 115px;
        margin: 0 auto 20px auto !important;
    }
    .gg-gb-footer .gg-logo.smaller.footer {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .gg-gb-footer .gg-hero-description-text {
        font-size: 24px;
        line-height: 24px;
    }
}
/* ------------------------------------------------ */
/* =================================================================
   #1 + #4: Sign-up / Login / Leave nav icons appear on hover.
   Pure opacity fade — no independent transform. The icon moves
   together with the rest of the link via the parent's
   `transform: translateX(-4px)` shift on `.gg-nav-link:hover`
   (in public-layout.css). Per Oli's spec all menu items use
   0.3s ease-out — fade timing is driven by the icon transition
   rule in public-layout.css.
   ================================================================= */
/* Wrapper around `.gg-nav-icon + .gg-menu-text` inside each
   `.gg-nav-link`. Both children render inside this single
   compositor layer, so they translate pixel-perfectly in lockstep
   when the parent slides on hover — no sub-pixel drift between
   the GPU-promoted icon layer and the main-thread-rendered text.

   The Webflow-style identity 3D transform + `transform-style:
   preserve-3d` are set INLINE on the element in
   resources/views/partials/header.blade.php (so the markup matches
   the Webflow IX2 output exactly). This rule only carries the
   layout + backface-visibility hint that complements that. */
.gg-nav-link .gg-nav-link-content {
  display: inline-flex;
  align-items: center;
  backface-visibility: hidden;
}
.gg-nav-link .gg-nav-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.gg-nav-link:hover .gg-nav-icon,
.gg-nav-link:focus-visible .gg-nav-icon {
  opacity: 1;
}

/* =================================================================
   UI #16: Overview Video button on the landing page.
   Markup lives INSIDE the .accordion-item-bottom-wrapper of the
   "...reach your goals" panel in home.blade.php.

   Scoped to .div-block-163 / .link-block-6 — NO global `img { … }`
   rule (the page already has one — vertical-align: middle,
   max-width: 100%, display: inline-block — that this design
   inherits).

   Responsive `margin-left` mirrors `.p-accordion-answer`'s
   breakpoint cascade so the button's left edge stays aligned with
   the text's left edge across all viewports:
     desktop      → -89px (matches gogirlfriend.webflow.css line 381)
     ≤ 991px      → -53px (matches line 7607)
     ≤ 767px      → -37px (matches line 7952)
     ≤ 479px      → -22px (matches line 8199)
   Without this cascade the text shifts but the button stays at
   -89px and ends up offset on every non-desktop viewport.
   ================================================================= */
.div-block-163 {
    z-index: 999;
    max-width: 50vw;
    margin-left: -89px;
    position: relative;
}
.link-block-6 {
    opacity: 0.75;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.link-block-6:hover,
.link-block-6:focus-visible {
    opacity: 1;
}
@media screen and (max-width: 991px) {
    .div-block-163 {
        max-width: 60vw;
        margin-left: -53px;
    }
}
@media screen and (max-width: 767px) {
    .div-block-163 {
        margin-left: -37px;
    }
}
@media screen and (max-width: 479px) {
    .div-block-163 {
        margin-left: -22px;
    }
}