/* ============================================================
   Colours
   ============================================================ */
:root {
    --color-orange: #fb8c00;
    --homepage-heading-font-size: 42px;
    --homepage-heading-line-height: 1.2;
    --homepage-paragraph-font-size: 22px;
    --homepage-paragraph-line-height: 1.5;
    --swoosh-color: #7d65fd;

    /* Swoosh underline (SVG under highlighted words) */
    --swoosh-offset: -0.3em;  /* distance below the text */
    --swoosh-height: 0.34em;  /* thickness of the swoosh */
    --swoosh-width: 112%;     /* how far it extends past the word */
}

/* ============================================================
   Swoosh underline
   Wrap the highlighted word in a span with this class and place
   the swoosh SVG inside it. Override --swoosh-* on an individual
   element (inline style) to tweak a single instance.
   ============================================================ */
.swoosh-underline {
    position: relative;
    display: inline-block;
}

.swoosh-underline > svg {
    position: absolute;
    left: 0;
    bottom: var(--swoosh-offset);
    width: var(--swoosh-width);
    height: var(--swoosh-height);
    pointer-events: none;
    overflow: visible;
}

/* Prevent decorative/oversized elements (e.g. scaled background images and
   fixed-width image columns) from creating a horizontal scroll region, which
   on mobile pushed all content to the left and left ~33% of the screen blank.
   Use overflow-x: clip (not hidden) — hidden establishes a scroll container
   that breaks position: sticky (the "How TapSpot works" phone column), whereas
   clip contains the overflow without affecting sticky descendants. */
html,
body {
    overflow-x: clip;
}

ul.navbar-nav {
    margin-top: 8px;
}

.navbar .container {
    position: relative;
    align-items: center;
}

.navbar-top-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar-menu .nav-link:hover,
.navbar-menu .nav-link:focus {
    color: #7d65fd;
}

.navbar-menu .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 0.85rem;
    right: 0.85rem;
    height: 2px;
    background-color: #7d65fd;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.navbar-menu .nav-link:hover::after,
.navbar-menu .nav-link:focus::after,
.navbar-menu .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-collapse-custom {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-menu-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.navbar-popup-panel {
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
}

.navbar-menu .nav-link {
    font-weight: 500;
    padding: 0.75rem 0.85rem;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease;
}

.navbar-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.navbar-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background-color: var(--color-orange);
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-top: 8px;
}

.navbar-login-btn:hover,
.navbar-login-btn:focus {
    background-color: #e19365;
    color: #ffffff;
    transform: translateY(-1px);
}

.navbar-login-btn i {
    font-size: 0.9rem;
}

.navbar-brand {
    margin-top: 2px;
}

section[id] {
    scroll-margin-top: 96px;
}

@media (min-width: 1200px) {
    .navbar-brand {
        margin-right: 0;
    }

    .navbar-top-row {
        display: contents;
    }

    .navbar-collapse-custom {
        display: flex !important;
    }

    .navbar-popup-panel {
        align-items: center;
    }

    .navbar-menu-wrapper {
        padding: 0 1.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-toggler {
        display: block !important;
    }

    .navbar-collapse-custom {
        display: none !important;
    }

    .navbar-collapse-custom.show {
        display: block !important;
    }
}

@media (max-width: 1199.98px) {
    .navbar {
        padding: 0;
    }

    .navbar .container {
        flex-wrap: wrap;
        row-gap: 0;
        padding: 0;
        max-width: 100%;
    }

    .navbar-top-row {
        background-color: #ffffff;
        padding: 0.5rem 1rem;
        width: 100%;
    }

    .navbar-brand {
        padding-left: 0;
    }

    .navbar-toggler {
        margin-left: auto;
        padding: 0.25rem;
        margin-right: -0.25rem;
    }

    .navbar-collapse-custom {
        width: 100%;
        flex-basis: 100%;
        order: 3;
        display: block;
        padding: 0;
        margin-top: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .navbar-popup-panel {
        display: block;
        width: 100%;
        padding: 1rem 1rem 0.5rem;
        border-top: 1px solid rgba(17, 24, 39, 0.08);
        background-color: #ffffff;
        box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18), 0 4px 8px rgba(17, 24, 39, 0.12);
    }

    .navbar-menu-wrapper {
        display: block;
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .navbar-menu {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin: 0;
        width: 100%;
    }

    .navbar-menu .nav-item,
    .navbar-menu .nav-link {
        width: 100%;
        text-align: center;
    }

    .navbar-menu .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(17, 24, 39, 0.06);
        display: block;
    }

    .navbar-menu .nav-link:hover,
    .navbar-menu .nav-link:focus {
        background-color: rgba(125, 101, 253, 0.08);
        color: #7d65fd;
    }

    .navbar-menu .nav-link::after {
        display: none;
    }

    .navbar-login-wrapper {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 0.75rem;
        margin-left: 0;
        padding: 0 0 0.5rem;
    }
}

h2,
h1.hero-title {
    font-family: "Nunito Sans", system-ui, -apple-system, sans-serif!important;
    line-height: 1.0!important;
    font-size: 42px!important;
}

body .homepage-heading.homepage-heading {
    font-size: var(--homepage-heading-font-size) !important;
    line-height: var(--homepage-heading-line-height) !important;
}

h3 {
    font-size: 22px!important;
}

p {
    line-height: 1.3!important;
    font-size: 20px!important;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

body .homepage-paragraph.homepage-paragraph {
    font-size: var(--homepage-paragraph-font-size) !important;
    line-height: var(--homepage-paragraph-line-height) !important;
}

button {
    font-family: 'DM Sans', sans-serif;
    line-height: 1.0!important;
    font-size: 18px!important;
    white-space: nowrap;
    border-radius: 20px!important;
    border-width: 2px!important;
}

.button-subtext {
    color: var(--color-orange);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.hero-actions {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 6px;
    align-items: center;
}

.hero-touchpoint-image {
    display: block;
    width: 100%;
    height: auto;
}

.reassurance-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(14px, 2.25vw, 26px);
}

.reassurance-item {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--color-orange) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.reassurance-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: currentColor;
}

.hero-reassurance {
    justify-content: flex-start;
    margin-top: 18px;
}

.multi-link-options li {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 36px;
    letter-spacing: -0.02em;
}

.multi-link-preview-stage {
    position: relative;
    width: min(100%, 570px);
    height: 704px;
    margin-inline: auto;
    perspective: 1400px;
    perspective-origin: 32% 45%;
    transform-style: preserve-3d;
    outline: none;
}

.multi-link-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 332px;
    height: 704px;
    box-sizing: border-box;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform-origin: center center;
    transition: transform 0.95s cubic-bezier(0.22, 0.74, 0.18, 1), opacity 0.42s ease, filter 0.42s ease;
    cursor: pointer;
    perspective: 850px;
    perspective-origin: left center;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.multi-link-slide__face {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 1;
    transform: translateZ(0) rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.48s cubic-bezier(0.22, 0.74, 0.18, 1), opacity 0.24s ease, filter 0.24s ease;
    will-change: transform, opacity, filter;
}

.multi-link-slide__face::after {
    content: "";
    position: absolute;
    top: 18px;
    right: -16px;
    width: 16px;
    height: calc(100% - 36px);
    border-radius: 0 10px 10px 0;
    opacity: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.64), rgba(71, 85, 105, 0.26));
    box-shadow: 8px 0 16px rgba(15, 23, 42, 0.22);
    transform: rotateY(90deg);
    transform-origin: left center;
    transition: opacity 0.16s ease;
}

.multi-link-slide__panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 40px;
    transform: translateZ(0.5px);
    backface-visibility: hidden;
}

.multi-link-slide__panel::before {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0) 26%, rgba(15, 23, 42, 0.58) 100%);
    transition: opacity 0.36s ease;
}

.multi-link-slide.is-active {
    filter: none;
}

.multi-link-slide:focus-visible {
    outline: 4px solid rgba(125, 101, 253, 0.55);
    outline-offset: 5px;
}

.multi-link-slide.is-recycling {
    pointer-events: none;
}

.multi-link-slide.is-recycling .multi-link-slide__face {
    opacity: 0;
    filter: brightness(0.86) drop-shadow(20px 14px 18px rgba(15, 23, 42, 0.34));
    transform: translateZ(46px) rotateY(90deg);
    transition: transform 0.62s cubic-bezier(0.55, 0.08, 0.68, 0.53), opacity 0.06s linear 0.56s, filter 0.22s ease 0.34s;
}

.multi-link-slide.is-recycling .multi-link-slide__face::after,
.multi-link-slide.is-recycling .multi-link-slide__panel::before {
    opacity: 1;
}

.multi-link-slide[data-stack-position="0"] {
    z-index: 5;
    transform: translate3d(0, 0, 80px) rotateY(2deg) scale(0.9);
    opacity: 1;
    filter: saturate(1);
}

.multi-link-slide[data-stack-position="1"] {
    z-index: 4;
    transform: translate3d(55px, 18px, 20px) rotateY(-4deg) scale(0.85);
    opacity: 0.94;
    filter: saturate(0.94) brightness(0.98);
}

.multi-link-slide[data-stack-position="2"] {
    z-index: 3;
    transform: translate3d(110px, 34px, -40px) rotateY(-7deg) scale(0.8);
    opacity: 0.86;
    filter: saturate(0.86) brightness(0.96);
}

.multi-link-slide[data-stack-position="3"] {
    z-index: 2;
    transform: translate3d(165px, 50px, -100px) rotateY(-10deg) scale(0.75);
    opacity: 0.76;
    filter: saturate(0.78) brightness(0.94);
}

.multi-link-slide[data-stack-position="4"] {
    z-index: 1;
    transform: translate3d(220px, 66px, -160px) rotateY(-13deg) scale(0.7);
    opacity: 0.66;
    filter: saturate(0.7) brightness(0.92);
}

.multi-link-page-shot {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.16);
}

.multi-link-page-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1199.98px) {
    .multi-link-preview-stage {
        width: min(100%, 520px);
    }

    .multi-link-slide[data-stack-position="0"] {
        transform: translate3d(0, 0, 70px) rotateY(2deg) scale(0.86);
    }

    .multi-link-slide[data-stack-position="1"] {
        transform: translate3d(45px, 18px, 15px) rotateY(-4deg) scale(0.81);
    }

    .multi-link-slide[data-stack-position="2"] {
        transform: translate3d(90px, 34px, -45px) rotateY(-7deg) scale(0.76);
    }

    .multi-link-slide[data-stack-position="3"] {
        transform: translate3d(135px, 50px, -105px) rotateY(-10deg) scale(0.71);
    }

    .multi-link-slide[data-stack-position="4"] {
        transform: translate3d(180px, 66px, -165px) rotateY(-13deg) scale(0.66);
    }
}

@media (max-width: 767.98px) {
    .multi-link-preview-stage {
        width: 100%;
        max-width: 360px;
        height: 610px;
        perspective-origin: 28% 45%;
    }

    .multi-link-slide[data-stack-position="0"] {
        transform: translate3d(17px, -38px, 60px) rotateY(2deg) scale(0.78);
    }

    .multi-link-slide[data-stack-position="1"] {
        transform: translate3d(42px, -18px, 0) rotateY(-4deg) scale(0.72);
    }

    .multi-link-slide[data-stack-position="2"] {
        transform: translate3d(67px, 2px, -55px) rotateY(-7deg) scale(0.66);
    }

    .multi-link-slide[data-stack-position="3"] {
        transform: translate3d(92px, 22px, -110px) rotateY(-10deg) scale(0.6);
    }

    .multi-link-slide[data-stack-position="4"] {
        transform: translate3d(117px, 42px, -165px) rotateY(-13deg) scale(0.54);
    }
}

@media (max-width: 767.98px) {
    .hero-actions {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .hero-actions .btn {
        margin-left: 0 !important;
    }

    .hero-reassurance {
        gap: 12px 18px;
    }

    .multi-link-options li {
        font-size: 24px !important;
        letter-spacing: -0.01em;
    }
}

.badge {
    border-radius: 14px!important;
    border-width: 2px!important;
    margin-bottom: 40px;
}

.img-square-crop {
    width: 100%;

    /* Ensures it fills the column width */
    aspect-ratio: 1 / 1;

    /* FORCES the container to be square */
    object-fit: cover;

    /* CROPS the overflowing sides to prevent distortion */
    object-position: center;

    /* Keeps the middle of the image visible */
    display: block;

    /* Removes default baseline space below image */
    margin-bottom: 1rem;

    /* Adjust this to match your desired spacing to the <h4> */
}

.loyalty-step-image {
    object-fit: contain;
    background-color: #f9f7f7;
}

.feature-box {
    border-radius: 16px;
    padding: 20px;
    border: 2px solid #DDD;
}

.loyalty-intro {
    position: relative;
}

.loyalty-wave {
    position: absolute;
    right: calc((100vw - 100%) / -2 + 24px);
    bottom: 8px;
    width: 86px;
    color: var(--color-orange);
    filter: drop-shadow(1px 2px 0 rgba(216, 134, 101, 0.3));
    transform: rotate(4deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 2;
}

.loyalty-wave svg {
    display: block;
    width: 100%;
    height: auto;
}

.review-setup-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 200px;
    margin-top: 8px;
    color: var(--color-orange);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.review-setup-note svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.review-cta-row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
}

.review-button-stack {
    flex: 0 0 200px;
}

.review-platforms {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 2.2vw, 30px);
    min-width: 0;
    margin: -8px 0 0 auto;
}

.review-platform-logo {
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

.review-platform-google {
    width: 120px;
    height: 58px;
}

.review-platform-tripadvisor {
    width: 62px;
    height: 64px;
}

.review-platform-yelp {
    width: 108px;
    height: 50px;
}

.review-anywhere {
    display: flex;
    align-items: center;
    color: #7d65fd;
    font-family: 'Shadows Into Light Two', cursive;
    font-size: 20px;
    line-height: 1.05;
    white-space: nowrap;
}

.review-anywhere svg {
    width: 76px;
    height: 54px;
    margin-left: 5px;
    overflow: visible;
}

.review-anywhere path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.howloyalty {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #8f94fb;
    transform: rotate(6deg);
    margin-top: 26px;
    margin-left: -72px;
}

/* ----------------------------------------------------------
   Mobile overflow fixes — keep sections within the viewport so
   nothing is truncated or pushed off either edge on phones.
   ---------------------------------------------------------- */
@media (max-width: 575.98px) {
    .loyalty-wave {
        position: relative;
        right: auto;
        bottom: auto;
        width: 62px;
        margin: -28px 18px 14px auto;
        transform: rotate(8deg);
    }

    /* "Reward loyalty" heading was pushed off the left by negative margins. */
    .howloyalty {
        margin-left: 0;
        gap: 8px;
    }

    /* Hero CTA buttons sit side-by-side and overflowed; stack them full-width. */
    .d-flex > .d-grid.gap-2 {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .review-cta-row {
        flex-direction: column;
        gap: 24px;
    }

    .review-button-stack {
        flex: 0 0 auto;
    }

    .review-platforms {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 12px;
        width: 100%;
        margin: 0;
    }

    .review-platform-logo {
        justify-self: center;
        max-width: 100%;
    }

    .review-platform-google {
        width: 105px;
        height: 52px;
    }

    .review-platform-tripadvisor {
        width: 58px;
        height: 60px;
    }

    .review-platform-yelp {
        width: 94px;
        height: 46px;
    }

    .review-anywhere {
        grid-column: 1 / -1;
        justify-self: center;
        font-size: 19px;
    }
}

/* ==========================================================
   Footer
   ========================================================== */
.tapspot-footer {
    background: #2a1f2d;
    color: #fff;
    font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    padding: 48px 0 28px;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 36px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.footer-logo {
    width: 160px;
    height: auto;
    filter: brightness(0) invert(1);
}

.footer-social {
    margin-top: auto;
}

.footer-social-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0 0 12px;
}

.footer-social-icons {
    display: flex;
    gap: 16px;
}

.footer-social-icons a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.footer-social-icons a:hover {
    opacity: 0.7;
}

.footer-col h4.footer-heading,
.footer-right h4.footer-heading {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
}

.footer-col ul,
.footer-right ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li,
.footer-right ul li {
    margin-bottom: 12px;
}

.footer-col ul li a,
.footer-right ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: opacity 0.15s ease;
}

.footer-col ul li a:hover,
.footer-right ul li a:hover {
    opacity: 0.7;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    margin: 0;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-left {
        min-height: auto;
    }

    .footer-social {
        margin-top: 24px;
    }
}

/* Live screenshots layered beneath the existing transparent device artwork. */
.device-shot {
    position: relative;
    isolation: isolate;
    line-height: 0;
}

.device-shot--desktop {
    width: 100%;
}

.device-shot--mobile {
    width: min(100%, 384px);
    margin-inline: auto;
}

.device-shot__screen {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    background: #fff;
}

.device-shot__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.device-shot__screen--desktop {
    inset: 10.42% 7.33% 10.52%;
    border-radius: 18px;
}

.review-device-shot {
    margin-inline: auto;
}

@media (min-width: 768px) {
    .review-device-shot {
        margin-top: clamp(187px, calc(301px - 6.1vw), 255px);
    }
}

.review-device-shot .device-shot__screen img {
    object-position: center center;
}

.device-shot__screen--mobile {
    inset: 1.9% 4.3% 4.6%;
    border-radius: 13% / 6%;
}

.device-shot__screen--mobile img {
    object-position: center center;
}

.device-shot__frame {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

@media (max-width: 576px) {
    .device-shot__screen--desktop {
        border-radius: 10px;
    }
}

/* "Customer Experience": the hand-drawn arrow is anchored to the phone image's
   bottom-right corner so its tip touches that corner at every width (the offset
   from the corner is constant because the arrow is positioned relative to the
   image box). The heading sits below the image, to the left of the arrow. */
.ce-arrow {
    position: absolute;
    width: 7rem;
    right: -61px;
    bottom: -84px;
    margin: 0;
    pointer-events: none;
}

/* Floating back-to-top control. It stays out of the document flow and only
   appears once scrolling back to the header would be useful. */
.back-to-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1050;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #ffffff;
    background: #6b7280;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 0.22;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .back-to-top:hover {
        background: #4b5563;
        opacity: 0.44;
    }
}

.back-to-top:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 3px;
}

.back-to-top svg {
    display: block;
    width: 24px;
    height: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
    }
}