.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 {
    width: 20%;
    height: auto;
    max-width: 20%;
    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 */
}

/* 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: #252525;
    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;
    }
}