/* rently-home.css — the landing page (Index.razor: /, /home, /index) style sheet.
   EXTRACTED VERBATIM 2026-08-24 (PUB-9.S3c) from the in-body style block Index.razor carried at
   lines 908-3558: 72.7 KB of CSS shipped inside every SSR payload of the landing page was the
   whole PERF_HTML_WEIGHT_HEAVY finding (338 KB vs the 292 KB threshold). Loaded from App.razor
   AFTER rently-nav.css — LAST of the app sheets — because the in-body block used to beat every
   head sheet by source order (the S12-02 lesson recorded in App.razor), and last-of-links keeps
   those wins without inflating specificity. Razor at-escapes un-escaped mechanically; no other
   transformation. */

    /* ═══ Sitewide Polish N4 (2026-07-24): landing near-full-width ═══
       One shared cap replaces the six per-section inline max-width:1440px styles.

       S12-02 (2026-07-27) — THE TOKEN AND ITS ≥1600px MEDIA TWIN USED TO BE DECLARED HERE, AND
       THEY MOVED TO App.razor's critical-CSS :root (renamed --rently-landing-max-width →
       --rently-content-max-width, because /rental/details now shares it and "landing" became a
       misnomer). DO NOT re-add a :root declaration to this file. This inline style element is part
       of the page's RENDER OUTPUT, so it lands in the document body — later in source order than
       every stylesheet link in the head — and a plain :root here beats a media-query :root in any
       linked sheet, because media queries add no specificity. Re-declaring the base value here
       would therefore silently flatten this page back to 1440 at ≥1600px while looking correct.

       (Tag names spelled out in prose deliberately: a literal angle-bracket style/head/body token
       inside a CSS comment in a Razor inline style element is re-tokenised by the Razor parser and
       fails the build with RZ9980.)

       The `, 1440px` fallbacks below stay: they are the right defensive default for the frame
       before the critical block parses. */
    .section-wrapper,
    .how-it-works-section {
        max-width: var(--rently-content-max-width, 1440px);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* New Hero Banner Styles */
    .hero-banner-wrapper {
        position: relative;
        width: 100%;
        min-height: 450px;
        overflow: hidden visible;
        background-color: #fff;
    }

    /* Hide desktop guest hero wrapper on mobile/tablet — MudHidden only hides
       children, but the wrapper's min-height still reserves 400px of empty space */
    @media (max-width: 959px) {
        .hero-banner-wrapper {
            display: none !important;
        }
    }

    .hero-banner-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
    }

    .hero-section-grey {
        position: relative;
        flex: 0 0 65%;
        background-color: #D9D9D9;
        background-image: url('/images/Icon_White_01_50.webp');
        background-repeat: repeat;
        background-size: 500px auto;
        background-position: center;
        overflow: hidden;
    }

    .hero-section-red {
        position: relative;
        flex: 1;
        background-color: #EF412c; /* Rently red */
    }

    .hero-r-logo {
        position: absolute;
        height: 100%;
        width: auto;
        left: -200px; /* Overlap into grey section for diagonal effect */
        top: 0;
        z-index: 10;
        object-fit: contain;
    }

    .hero-content-container {
        position: relative;
        max-width: var(--rently-content-max-width, 1440px); /* N4: hero edge aligns with the widened sections */
        margin: 0 auto;
        min-height: 450px;
        display: flex;
        align-items: center;
    }

    .hero-content {
        position: relative;
        z-index: 10;
        width: 100%;
        padding: 60px 0;
    }

    .hero-mascot-container {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 15;
        pointer-events: none; /* Don't interfere with buttons */
    }

    .hero-mascot {
        width: 500px;
        height: auto;
        object-fit: contain;
    }

    /* ============================================
       Signed-In Compact Hero — Desktop
       ============================================ */
    .hero-compact-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .hero-compact-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hero-compact-bg-full {
        width: 100%;
        height: 100%;
        background-color: #D9D9D9;
        background-image: url('/images/Icon_White_01_50.webp');
        background-repeat: repeat;
        background-size: 500px auto;
        background-position: center;
    }

    .hero-compact-content-container {
        position: relative;
        z-index: 5;
        max-width: var(--rently-content-max-width, 1440px); /* N4: hero edge aligns with the widened sections */
        margin: 0 auto;
        padding: 28px 12px;
    }

    .hero-compact-layout {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    /* Left column: greeting + action buttons */
    .hero-compact-left {
        flex: 0 0 auto;
        min-width: 0;
    }

    .hero-compact-greeting {
        margin-bottom: 14px;
    }

    .hero-compact-title {
        margin: 0;
        line-height: 1.2;
    }

    .hero-compact-title-welcome {
        display: block;
        font-size: 15px;
        font-weight: 400;
        color: #35a0ae;
        letter-spacing: 0.5px;
        text-transform: none;
        margin-bottom: 4px;
    }

    .hero-compact-title-brand {
        display: block;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.15;
    }

    .hero-compact-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .hero-compact-btn {
        border-radius: 8px !important;
        text-transform: none !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }

    /* Right column: category card grid */
    .hero-compact-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        min-width: 0;
    }

    .hero-compact-cats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 100%;
        max-width: 480px;
    }

    .hero-compact-cat-card {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid rgb(53 160 174 / 12%);
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
        min-height: 44px;
        overflow: hidden;
    }

    .hero-compact-cat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgb(53 160 174 / 18%);
        border-color: #35a0ae;
    }

    .hero-compact-cat-card:focus-visible {
        outline: 2px solid #35a0ae;
        outline-offset: 1px;
    }

    .hero-compact-cat-skeleton {
        min-height: 44px;
    }

    .hero-compact-cat-card-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-compact-cat-card-img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .hero-compact-cat-card-label {
        font-size: 12px;
        font-weight: 600;
        color: #424242;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-width: 0;
    }

    .hero-compact-cat-card-more {
        border-color: rgb(235 60 39 / 15%);
        background: rgb(235 60 39 / 3%);
    }

    .hero-compact-cat-card-more:hover {
        border-color: #EF412c;
        box-shadow: 0 4px 12px rgb(235 60 39 / 15%);
    }

    /* Responsive adjustments for compact hero */
    @media (max-width: 1400px) {
        .hero-compact-cats-grid {
            max-width: 420px;
            gap: 6px;
        }

        .hero-compact-cat-card {
            padding: 6px 8px;
        }
    }

    @media (max-width: 1200px) {
        .hero-compact-layout {
            gap: 24px;
        }

        .hero-compact-title-brand {
            font-size: 26px;
        }

        .hero-compact-cats-grid {
            grid-template-columns: repeat(3, 1fr);
            max-width: 380px;
            gap: 5px;
        }

        .hero-compact-cat-card {
            padding: 5px 7px;
            min-height: 44px;
        }

        .hero-compact-cat-card-img {
            width: 24px;
            height: 24px;
        }

        .hero-compact-cat-card-label {
            font-size: 12px;
        }
    }

    /* Legacy Hero Banner styles */
    .hero-banner {
        padding: 60px 0;
    }

    .hero-heading-primary {
        font-size: 50px !important;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1.15 !important;
    }

        .hero-heading-primary span {
            display: inline;
        }

    .hero-heading-secondary {
        font-size: 50px !important;
        font-weight: 700;
        color: #35a0ae !important;
    }

    .hero-tagline {
        margin-top: 40px;
        font-size: 16px;
        font-weight: 600;
        color: #35a0ae !important;
        max-width: 600px;
    }

    .hero-buttons {
        margin-top: 60px;
    }

    .hero-button-col {
        margin-bottom: 0;
    }

        .hero-button-col .rz-button {
            white-space: nowrap;
            padding: 10px 16px;
            border-radius: 8px !important;
            text-transform: none !important;
        }

    .hero-carousel {
        height: 432px;
    }

    .carousel-image {
        height: 432px;
    }

    /* How It Works Section */
    .how-it-works-section {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* How it works section styles */
    .how-it-works-wrapper {
        width: 100%;
        background-color: #35a0ae; /* Rently blue */
        background-image: url('/images/Icon_Midnight_green_01_50.webp');
        background-repeat: repeat;
        background-size: 500px auto;
        background-position: center;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    /* Popular Rentables section styles */
    .popular-rentables-wrapper {
        width: 100%;
        background-color: #35a0ae;
        background-image: url('/images/Icon_Midnight_green_01_50.webp');
        background-repeat: repeat;
        background-size: 500px auto;
        background-position: center;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .popular-rentables-wrapper .mud-card {
        box-shadow: 0 0 0 1px #35a0ae, 0 4px 12px rgb(0 0 0 / 15%);
        border: none;
    }

    .popular-rentables-wrapper .rental-card {
        border: none;
        box-shadow: 0 0 0 1px #35a0ae, 0 4px 16px rgb(0 0 0 / 18%);
    }

    .popular-rentables-wrapper .carousel-item-content .mud-card,
    .popular-rentables-wrapper .carousel-item-content .rz-card {
        border: none;
        box-shadow: 0 0 0 1px #35a0ae, 0 4px 16px rgb(0 0 0 / 18%) !important;
    }

    .popular-rentables-wrapper .mud-carousel-arrow .mud-icon-button {
        background-color: rgb(255 255 255 / 90%) !important;
        color: #35a0ae !important;
    }

    .popular-rentables-wrapper .carousel-arrow-wrapper {
        background-color: rgb(255 255 255 / 90%) !important;
        color: #35a0ae !important;
    }

    .popular-rentables-wrapper .carousel-arrow-wrapper:hover {
        background-color: #fff !important;
    }

    /* Popular Stores section styles */
    .popular-stores-wrapper {
        width: 100%;
        background-color: #EF412c; /* Rently red */
        background-image: url('/images/Icon_Fire_engine_red_01_50.webp');
        background-repeat: repeat;
        background-size: 500px auto;
        background-position: center;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    .popular-stores-wrapper .stores-carousel-wrapper {
        padding-top: 0;
    }
    
    .popular-stores-wrapper .mud-card {
        box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    }

    .popular-stores-wrapper .carousel-arrow-wrapper {
        background-color: rgb(255 255 255 / 90%) !important;
        color: #EF412c !important;
    }

    .popular-stores-wrapper .carousel-arrow-wrapper:hover {
        background-color: #fff !important;
    }
    
    /* Keep old styles for backward compatibility if needed */
    .how-it-works-card {
        padding-top: 15px;
        padding-bottom: 15px;
        height: 100%;
    }
    
    /* New How It Works Card Styles */
    .how-it-works-card-new {
        height: 100%;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: #fff;
        border: none !important;
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%) !important;
        border-radius: 16px !important;
    }

    .how-it-works-card-new:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgb(0 0 0 / 15%) !important;
    }

    .how-it-works-card-content-centered {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px 24px;
        position: relative;
        height: 100%;
    }

    .how-it-works-step-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgb(53 160 174 / 10%);
        color: #35a0ae;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgb(53 160 174 / 20%);
    }

    .how-it-works-icon-new {
        width: 70px;
        height: 70px;
        object-fit: contain;
        filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(439%) hue-rotate(141deg) brightness(91%) contrast(91%);
        transition: transform 0.3s ease;
        margin-bottom: 16px;
    }

    .how-it-works-card-new:hover .how-it-works-icon-new {
        transform: scale(1.1);
    }

    .how-it-works-title-new {
        color: #35a0ae !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        margin: 0 0 12px !important;
        text-align: center;
        letter-spacing: 1px;
    }

    .how-it-works-description {
        font-size: 15px !important;
        color: #424242 !important;
        line-height: 1.6 !important;
        margin: 0 0 16px !important;
        font-weight: 500;
    }

    .how-it-works-link-new {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #35a0ae !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600;
        transition: color 0.3s ease;
        margin-top: auto;

        /* PUB-9.S3b: the measured box was 21px tall (below the WCAG 2.2 SC 2.5.8 24px floor).
           min-height grows the hit area; the inline-flex centering keeps the glyph unmoved. */
        min-height: 24px;
        padding-block: 2px;
    }

    .how-it-works-link-new:hover {
        color: #124950 !important;
        text-decoration: underline !important;
    }

    .how-it-works-link-new .mud-icon-root {
        font-size: 18px !important;
    }
    
    /* Keep old styles below for reference */
    .how-it-works-header-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .how-it-works-icon {
        position: absolute;
        width: 60px;
        height: 60px;
        z-index: 2;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .how-it-works-card-title {
        color: #d6d6d6 !important;
        font-size: 65px !important;
        font-weight: 700 !important;
        z-index: 1;
        margin: 0;
    }

    .how-it-works-card-text {
        font-size: 18px;
        color: #6a6a6a;
        font-weight: 600;
        text-align: center;
        line-height: 1.5;
    }

    .how-it-works-link {
        display: block;
        margin-top: 10px;
        color: #35a0ae;
    }

    /* Section Headers */
    .section-header {
        height: 60px;
    }

    .section-header-text {
        color: #fff;
        font-weight: 600;
    }

    .section-header-new {
        padding: 20px 0;
        text-align: left;
    }

    /* S22: at phone widths the section wrapper carries no inline gutter, so a .section-header-new
       that renders below 600px sat flush against the screen edge. Give it the hero's 20px gutter
       rhythm. (Wave 2 note: the one section that USED to render this class below 600px —
       "Recommended for You" — is now a <SectionCard> and no longer carries it. The rule is kept
       because it is the phone half of a class four home sections share, and the remaining three are
       only desktop-gated by their MudHidden branches, not by anything structural.) */
    @media (max-width: 599px) {
        .section-header-new {
            padding: 20px;
        }

        /* (S23's `h1.section-title` phone clamp is DELETED here, wave 2. It sized the 40px marketing
           heading down so "Recommended for You" held one line on a phone — arithmetic keyed to the
           two 20px page gutters. That heading is now SectionCard's own `page` rank, a
           clamp(1.5rem, 2vw, 2rem) declared with the component, and it sits inside a card whose
           insets the old arithmetic knew nothing about. It was also the ONLY h1.section-title in the
           tree (the other three .section-title carriers are h2), so leaving it would leave a selector
           that matches nothing — the kind of dead rule a future session reads as live.) */
    }

    .section-title {
        font-size: 40px !important;
        font-weight: 700;
        color: #35a0ae;
        margin: 0;
        line-height: 1.2;
    }

    .rentals-header,
    .stores-header {
        padding-top: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Carousel Wrappers */
    .featured-categories-wrapper,
    .rentals-carousel-wrapper,
    .stores-carousel-wrapper {
        width: 100%;
        position: relative;
    }

    /* Center rental cards on mobile */
    @media (max-width: 599px) {
        .rentals-carousel-wrapper .mud-grid {
            justify-content: center !important;
        }
        
        .rentals-carousel-wrapper .mud-grid-item {
            display: flex;
            justify-content: center;
        }
        
        .rentals-carousel-wrapper .rental-card {
            margin: 0 auto;
            max-width: 280px;
        }
    }

    /* Skeleton styles */
    .rental-card-skeleton,
    .rental-card-skeleton-mobile {
        display: flex;
        flex-direction: column;
    }

    /* Animation classes */
    .rental-card-carousel-wrapper,
    .store-card-carousel-wrapper {
        animation: fadeIn 0.4s ease-out;
    }

    /* Fix rental card dimensions in carousel */
    .rentals-carousel-wrapper .dynamic-carousel-container .carousel-item-wrapper {
        height: auto !important;
        display: flex;
        align-items: stretch;
    }

    .rentals-carousel-wrapper .carousel-item-content {
        height: auto !important;
        width: 100%;
    }

    .carousel-item-content .mud-card,
    .carousel-item-content .rz-card {
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgb(0 0 0 / 12%) !important;

        /* overflow:hidden moved out - rental-card.css:15 already scopes it on .rental-card */
    }

    .rentals-carousel-wrapper .rental-card {
        display: flex;
        flex-direction: column;
        width: 100%;

        /* min-height:440px removed so cards size from content; auth-stable distance-slot
           keeps cards consistent regardless of whether distance is rendered. */
    }

    .rental-card .mud-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .rental-card .mud-card-actions {
        margin-top: auto;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Home section entrance reveal + skeleton→content crossfade are now provided by the shared
       loading-UX kit (ContentReveal + css/rently-loading.css). The former .home-section-reveal /
       .recommended-wrapper / .section-categories-wrapper min-height wrappers and the local
       fadeInOpacity keyframe were removed in that migration — the skeleton now reserves space
       honestly (no arbitrary min-heights) and the crossfade replaces the hard skeleton→content cut. */

    /* Card Styles */
    .rental-card-skeleton,
    .store-card-skeleton,
    .category-card-skeleton {
        display: flex;
        flex-direction: column;
    }

    .category-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .category-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
        }

    /* Large Desktop Styles */
    @media (min-width: 1280px) {
        .hero-button-col .rz-button {
            min-width: 160px;
            font-size: 14px;
        }
    }

    /* Tablet Styles (768px - 959px) */
    @media (max-width: 959px) {
        /* New How It Works Card Responsive */
        .how-it-works-card-content-centered {
            padding: 24px 20px;
        }

        .how-it-works-icon-new {
            width: 60px;
            height: 60px;
        }

        .how-it-works-title-new {
            font-size: 20px !important;
        }

        .how-it-works-description {
            font-size: 14px !important;
            margin: 0 0 12px !important;
        }

        .how-it-works-link-new {
            font-size: 13px !important;
        }
        
        /* Hero Banner Adjustments */
        .hero-banner {
            padding: 40px 0;
        }

        .hero-content {
            padding: 0 30px !important;
        }

        .hero-heading-primary {
            font-size: 48px;
            color: #fff !important;
        }

        .hero-heading-secondary {
            font-size: 56px;
            color: #fff !important;
        }

        .hero-tagline {
            font-size: 16px;
            color: #fff !important;
        }

        .hero-buttons {
            margin-top: 40px;
        }

        .hero-button-col {
            margin-bottom: 10px;
        }

            .hero-button-col .rz-button {
                font-size: 14px;
                padding: 8px 12px;
            }

        .hero-carousel {
            height: 300px;
        }

        .carousel-image {
            height: 300px;
        }
        
        .how-it-works-icon {
            width: 60px;
            height: 60px;
        }

        .how-it-works-card-title {
            font-size: 50px;
            color: #B0B0B0 !important;
        }

        .how-it-works-card-text {
            font-size: 16px;
            font-weight: 500;
        }

        /* Section Headers */
        .section-header-text {
            font-size: 1.5rem !important;
        }

        /* Section Spacing */
        .section-wrapper {
            padding-left: 16px;
            padding-right: 16px;
        }
    }

    /* Mobile Styles (320px - 599px) */
    @media (max-width: 599px) {
        /* New How It Works Card Mobile */
        .how-it-works-card-content-centered {
            padding: 24px 16px;
        }

        .how-it-works-icon-new {
            width: 50px;
            height: 50px;
        }

        .how-it-works-title-new {
            font-size: 22px !important;
        }

        .how-it-works-description {
            font-size: 13px !important;
            margin: 0 0 10px !important;
        }

        .how-it-works-link-new {
            font-size: 12px !important;
        }
        
        /* Hero Banner Adjustments */
        .hero-banner {
            padding: 30px 0;
        }

        .hero-content {
            padding: 0 16px !important;
        }

        .hero-heading-primary {
            font-size: 32px;
            line-height: 1.2;
            color: #fff !important;
        }

        .hero-heading-secondary {
            font-size: 40px;
            line-height: 1.1;
            margin-top: 5px;
            color: #fff !important;
        }

        .hero-tagline {
            font-size: 15px;
            margin-top: 10px;
            color: #fff !important;
        }

        .hero-buttons {
            margin-top: 30px;
        }

        .hero-button-col {
            margin-bottom: 10px;
        }

            .hero-button-col .rz-button {
                font-size: 13px;
                padding: 8px 10px;
                white-space: normal;
                line-height: 1.2;
            }

        .hero-carousel {
            height: 200px;
        }

        .carousel-image {
            height: 200px;
        }

        .carousel-wrapper {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* How It Works & Popular Stores */
        .how-it-works-wrapper,
        .popular-stores-wrapper {
            margin-top: 0;
            margin-bottom: 0;
            padding: 30px 0;
        }

        .how-it-works-section {
            padding: 0 16px;
        }

        .how-it-works-card-col {
            padding: 8px;
            margin-bottom: 8px;
        }

        .how-it-works-card {
            padding: 20px 10px;
            margin-left: 0;
            margin-right: 0;
        }
        
        .how-it-works-icon {
            width: 50px;
            height: 50px;
        }

        .how-it-works-card-title {
            font-size: 40px;
            color: #B0B0B0 !important;
        }

        .how-it-works-card-text {
            font-size: 14px;
            padding: 0 10px;
            font-weight: 500;
        }

        .how-it-works-link {
            font-size: 12px;
        }

        /* Section Headers */
        .section-header {
            height: 50px;
        }

        .section-header-text {
            font-size: 1.25rem !important;
            text-align: center;
            padding: 0 10px;
        }

        /* Content Headers */
        .rentals-header,
        .stores-header {
            padding: 10px 16px;
        }

            .rentals-header h4,
            .stores-header h4 {
                font-size: 1.25rem !important;
            }

        /* Section Spacing */
        .section-wrapper {
            padding-left: 0;
            padding-right: 0;
        }

        /* Carousel Wrappers */
        .rental-card-carousel-wrapper,
        .store-card-carousel-wrapper {
            padding: 0 8px;
        }
    }

    /* Small Mobile Styles (320px - 400px) */
    @media (max-width: 400px) {
        .hero-heading-primary {
            font-size: 28px;
            color: #fff !important;
        }

        .hero-heading-secondary {
            font-size: 34px;
            color: #fff !important;
        }

        .how-it-works-icon {
            width: 40px;
            height: 40px;
        }
        
        .how-it-works-card-title {
            font-size: 32px;
            color: #B0B0B0 !important;
        }
        
        .how-it-works-card-text {
            font-size: 13px;
        }

        .section-header-text {
            font-size: 1rem !important;
        }
    }

    /* Responsive adjustments for very small screens */
    @media (max-width: 359px) {
        .hero-banner {
            background-position: right center;
        }

        .hero-heading-primary {
            font-size: 24px;
            color: #fff !important;
        }

        .hero-heading-secondary {
            font-size: 28px;
            color: #fff !important;
        }

        .hero-tagline {
            font-size: 13px;
            color: #fff !important;
        }

        .hero-button-col .rz-button {
            font-size: 11px !important;
            padding: 8px !important;
            white-space: normal !important;
            line-height: 1.1 !important;
        }
    }

    /* Fix for mobile padding */
    @media (max-width: 767px) {
        .rz-p-0 {
            padding: 0 !important;
        }

        .mx-auto {
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }

    /* Ensure proper spacing on all breakpoints */
    .section-wrapper > .rz-column {
        width: 100%;
    }

    /* Responsive adjustments for new hero banner */
    @media (max-width: 1440px) {
        .hero-mascot-container {
            right: 20px;
        }
    }

    @media (max-width: 1200px) {
        .hero-section-grey {
            flex: 0 0 70%;
        }

        .hero-mascot {
            width: 320px; /* Adjusted for bigger base size */
        }

        .hero-mascot-container {
            bottom: -15%;
        }
    }

    @media (max-width: 992px) {
        .hero-section-grey {
            flex: 0 0 75%;
        }

        .hero-mascot {
            width: 280px; /* Adjusted for bigger base size */
        }

        .hero-r-logo {
            left: -80px;
        }
    }

    @media (max-width: 768px) {
        .hero-banner-wrapper {
            min-height: 400px;
        }

        .hero-content-container {
            min-height: 400px;
        }

        .hero-section-grey {
            flex: 0 0 100%;
        }

        .hero-section-red {
            display: none; /* Hide red section on mobile */
        }

        .hero-mascot-container {
            right: 10px;
            bottom: -15%;
        }

        .hero-mascot {
            width: 240px; /* Adjusted for bigger base size */
        }

        .hero-icon-pattern {
            background-size: 100px auto; /* Smaller icons on mobile */
        }
    }

    @media (max-width: 576px) {
        .hero-mascot-container {
            display: none; /* Hide mascot on very small screens */
        }

        .hero-content {
            padding: 40px 0;
        }
    }

    /* Mobile Hero Banner Styles */
    .hero-mobile-wrapper {
        position: relative;
        min-height: auto;
        overflow: hidden;
        background: #fff;
    }

    .hero-mobile-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
    }

    .hero-mobile-section-grey {
        position: relative;
        flex: 0 0 65%;
        background-color: #D9D9D9;
        background-image: url('/images/Icon_White_01_50.webp');
        background-repeat: repeat;
        background-size: 250px auto;
        background-position: center;
        overflow: hidden;
    }

    .hero-mobile-section-red {
        position: relative;
        flex: 1;
        background-color: #EF412c;
        overflow: hidden;
    }

    .hero-mobile-r-logo {
        position: absolute;
        height: 100%;
        width: auto;
        left: -80px;
        top: 0;
        z-index: 1;
        object-fit: contain;
    }

    .hero-mobile-content-container {
        position: relative;
        min-height: auto;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }

    .hero-mobile-content {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 100%;
        padding: 50px 0;
    }

    .hero-mobile-mascot-container {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 5;
        pointer-events: none;
    }

    .hero-mobile-speech-bubble {
        position: absolute;
        width: 110px;
        height: auto;
        left: -35px;
        top: 65%;
        transform: rotate(-9deg);
        z-index: 1;
        object-fit: contain;
    }

    .hero-mobile-mascot {
        display: block;
        width: 150px;
        height: auto;
        object-fit: contain;
    }

    .hero-mobile-text {
        margin-bottom: 40px;
        position: relative;
        z-index: 10;
        text-align: left;
        max-width: 350px;
    }

    .hero-mobile-welcome {
        font-size: 18px;
        font-weight: 400;
        color: #35a0ae;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .hero-mobile-title {
        font-size: 40px;
        font-weight: 700;
        line-height: 1.15;
        margin-bottom: 20px;
        margin-top: 0;
    }

    .hero-mobile-title .text-primary {
        color: #35a0ae !important;
    }

    .hero-mobile-title .text-accent {
        color: #EF412c;
    }

    .hero-mobile-tagline {
        font-size: 16px;
        font-weight: 600;
        color: #35a0ae;
        line-height: 1.3;
        margin: 0;
        margin-top: 30px;
    }

    .hero-mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        z-index: 10;
        max-width: 350px;
    }

    .hero-mobile-button {
        height: 44px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        white-space: nowrap !important;
        padding: 0 16px !important;
        width: 100% !important;
    }

    .hero-mobile-button:active {
        transform: scale(0.98);
    }


    /* Tablet adjustments */
    @media (min-width: 600px) and (max-width: 959px) {
        .hero-mobile-wrapper {
            min-height: 450px;
        }

        .hero-mobile-section-grey {
            flex: 0 0 70%;
        }

        .hero-mobile-mascot-container {
            right: 0;
            top: 0;
        }

        .hero-mobile-mascot {
            width: 200px;
        }

        .hero-mobile-speech-bubble {
            width: 130px;
            left: -50px;
            top: 55%;
            transform: rotate(-9deg);
        }

        .hero-mobile-content-container {
            padding: 0 40px;
        }

        .hero-mobile-text {
            max-width: 400px;
        }

        .hero-mobile-title {
            font-size: 45px;
        }

        .hero-mobile-tagline {
            font-size: 15px;
        }

        .hero-mobile-actions {
            flex-direction: row;
            gap: 12px;
            max-width: 400px;
        }

        .hero-mobile-button {
            flex: 1;
        }
    }

    /* Small mobile adjustments */
    @media (max-width: 599px) {
        .hero-mobile-wrapper {
            min-height: auto;
        }

        .hero-mobile-section-grey {
            flex: 0 0 100%;
            background-size: 200px auto;
        }

        .hero-mobile-section-red {
            display: none;
        }

        .hero-mobile-mascot-container {
            right: 0;
            top: 0;
        }

        .hero-mobile-mascot {
            width: 120px;
        }

        .hero-mobile-speech-bubble {
            width: 90px;
            left: -35px;
            top: 55%;
            transform: rotate(-9deg);
        }

        .hero-mobile-content {
            padding: 40px 0;
        }

        .hero-mobile-text {
            max-width: 280px;
        }

        .hero-mobile-title {
            font-size: 32px;
        }

        .hero-mobile-welcome {
            font-size: 16px;
        }

        .hero-mobile-tagline {
            font-size: 14px;
        }

        .hero-mobile-actions {
            max-width: 280px;
        }

        .hero-mobile-button {
            height: 44px !important;
            font-size: 14px !important;
        }
    }

    /* Very small mobile */
    @media (max-width: 400px) {
        .hero-mobile-mascot-container {
            right: 0;
            top: 0;
        }

        .hero-mobile-mascot {
            width: 75px;
        }

        .hero-mobile-speech-bubble {
            width: 70px;
            left: -20px;
            top: 70%;
            transform: rotate(-9deg);
        }

        .hero-mobile-text,
        .hero-mobile-actions {
            max-width: 100%;
        }

        .hero-mobile-title {
            font-size: 28px;
        }
    }

    /* Mobile Categories Section */
    .categories-mobile-wrapper {
        padding: 24px 16px;
        background: #fff;
    }

    .categories-mobile-header {
        text-align: center;
        margin-bottom: 20px;
        padding: 0 16px;
    }

    .categories-mobile-title {
        font-size: 28px;
        font-weight: 700;
        color: #35a0ae;
        margin: 0;
        line-height: 1.2;
    }

    .categories-mobile-subtitle {
        font-size: 14px;
        color: #616161;
        margin-top: 4px;
    }

    .categories-mobile-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        max-width: 100%;
        margin: 0 auto;
        justify-items: center;
    }

    .category-mobile-item {
        cursor: pointer;
        position: relative;
    }

    .category-mobile-card {
        padding: 8px !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        background: #fff !important;
        border: 1px solid rgb(0 0 0 / 6%);
        box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    }

    .category-mobile-item:active .category-mobile-card {
        transform: scale(0.98);
    }

    .category-mobile-icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background: rgb(53 160 174 / 8%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
        transition: all 0.2s ease;
        border: 1px solid rgb(53 160 174 / 15%);
    }

    .category-mobile-item:active .category-mobile-icon-wrapper {
        background: rgb(53 160 174 / 15%);
        border-color: rgb(53 160 174 / 25%);
    }

    .category-mobile-icon {
        width: 35px;
        height: 35px;
        object-fit: contain;
    }

    .category-mobile-icon-default {
        font-size: 28px !important;
        color: #35a0ae;
    }

    .category-mobile-icon-wrapper.category-mobile-more {
        background: rgb(235 60 39 / 10%);
    }

    .category-mobile-icon-wrapper.category-mobile-more .category-mobile-icon-default {
        color: #EF412c;
    }

    .category-mobile-name {
        font-size: 0.75rem;
        font-weight: 500;
        color: #424242;
        text-align: center;
        line-height: 1.2;
        min-height: 2.4em;
        overflow-wrap: break-word; /* was the deprecated word-break: break-word — same wrapping behavior */
    }

    .category-mobile-count {
        position: absolute;
        top: -5px;
        right: 10px;
        background: #EF412c;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 20px;
        text-align: center;
    }

    .category-mobile-skeleton {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .categories-mobile-empty {
        text-align: center;
        padding: 40px 20px;
    }

    .categories-mobile-empty p {
        margin: 16px 0;
        color: #727272;
        font-size: 14px;
    }

    /* Tablet adjustments for categories */
    @media (min-width: 600px) and (max-width: 959px) {
        .categories-mobile-wrapper {
            padding: 50px 40px;
        }

        .categories-mobile-title {
            font-size: 32px;
        }

        .categories-mobile-subtitle {
            font-size: 16px;
        }

        .categories-mobile-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            max-width: 700px;
        }

        .category-mobile-icon-wrapper {
            width: 80px;
            height: 80px;
        }

        .category-mobile-icon {
            width: 45px;
            height: 45px;
        }

        .category-mobile-icon-default {
            font-size: 40px !important;
        }

        .category-mobile-name {
            font-size: 14px;
            max-width: 90px;
        }
    }

    /* Small mobile adjustments for categories */
    @media (max-width: 400px) {
        .categories-mobile-wrapper {
            padding: 20px 12px;
        }

        .categories-mobile-title {
            font-size: 24px;
        }
        
        .popular-stores-mobile-title {
            font-size: 24px;
        }
        
        .popular-rentables-mobile-title {
            font-size: 24px;
        }

        .categories-mobile-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .category-mobile-icon-wrapper {
            width: 55px;
            height: 55px;
            border-radius: 12px;
        }

        .category-mobile-icon {
            width: 30px;
            height: 30px;
        }

        .category-mobile-icon-default {
            font-size: 26px !important;
        }

        .category-mobile-name {
            font-size: 12px;
            max-width: 60px;
        }
    }

    /* Mobile How It Works Section */
    .how-it-works-mobile-wrapper {
        background-color: #35a0ae;
        background-image: url('/images/Icon_Midnight_green_01_50.webp');
        background-repeat: repeat;
        background-size: 300px auto;
        background-position: center;
        padding: 32px 16px;
        position: relative;
        overflow: hidden;
    }

    .how-it-works-mobile-container {
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    .how-it-works-mobile-header {
        text-align: center;
        margin-bottom: 20px;
        padding: 0 16px;
    }

    .how-it-works-mobile-title {
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        line-height: 1.2;
    }

    .how-it-works-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 30px;
    }

    .how-it-works-mobile-card {
        background: #fff !important;
        position: relative;
        overflow: visible;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .how-it-works-mobile-card:active {
        transform: scale(0.98);
    }

    .step-header {
        height: 90px;
        background: linear-gradient(135deg, rgb(53 160 174 / 3%) 0%, rgb(53 160 174 / 6%) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-bottom: 1px solid rgb(53 160 174 / 10%);
    }

    .step-icon-circle {
        width: 65px;
        height: 65px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
        z-index: 2;
        border: 2px solid rgb(53 160 174 / 20%);
    }

    .step-icon {
        width: 36px;
        height: 36px;
        object-fit: contain;
        filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(439%) hue-rotate(141deg) brightness(91%) contrast(91%);
    }

    /* P9.S / S6-F9 (2026-08-23): the background is a DARKENED VARIANT of brand Secondary
       #EF412c, not the brand colour itself, and the difference is a WCAG AA failure.
       Measured by Lighthouse on the live rig and verified independently: white on #EF412c at
       12px bold is 3.844:1, and AA requires 4.5:1 for normal text (large text - >=18.66px bold
       or >=24px regular - would need only 3.0, which #EF412c already clears; 12px bold is
       normal text). #d93b28 is the same hue scaled to 91% and measures 4.541:1.
       The brand colour is NOT changed. This is a variant for the one job brand Secondary
       cannot do - carrying white text at a normal size - and it is written as a literal here
       rather than a var() because PaletteProjection re-projects brand tokens at runtime, so an
       AA-critical ink must not depend on a token whose computed value can move.
       The same defect exists at 3.092:1 on brand Primary #35a0ae behind the Usercentrics
       consent buttons; that surface is third-party CMP configuration, not markup we author, and
       is routed to the owner rather than patched here. */
    .step-number-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #d93b28;
        color: #fff;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
    }

    .step-content {
        padding: 14px 16px !important;
    }

    .step-title {
        font-size: 17px;
        font-weight: 600;

        /* S33 (P9, owner-approved) — same ink, same class, same bar as .mission-title: 17px/600 is
           under the large-text threshold, so 4.5:1 applies, and #35a0ae is 3.092 on white / 2.836
           on the real page. #256f7a is 5.301.
           HONEST SCOPE: this site measured ZERO nodes in the 2026-08-24 drop, so it carries no
           node delta and is not counted in P4's 38. It is fixed because it is the same defect at
           the same ink, not because it was observed — the Phase 0 re-measure is what will say
           whether this card renders on a scanned route at the 412px test viewport at all. */
        color: #256f7a;
        margin: 0 0 6px;
        line-height: 1.2;
    }

    .step-description {
        font-size: 13px;
        color: #616161;
        margin: 0;
        line-height: 1.5;
    }

    .how-it-works-mobile-cta {
        text-align: center;
    }

    .knowledge-base-link {
        color: #fff !important;
        text-decoration: underline !important;
        font-weight: 500 !important;
    }

    .knowledge-base-link:hover {
        color: rgb(255 255 255 / 80%) !important;
    }

    /* Tablet adjustments for How It Works */
    @media (min-width: 600px) and (max-width: 959px) {
        .how-it-works-mobile-wrapper {
            padding: 60px 40px;
        }

        .how-it-works-mobile-title {
            font-size: 32px;
        }

        .how-it-works-mobile-subtitle {
            font-size: 16px;
        }

        .how-it-works-mobile-steps {
            max-width: 600px;
        }

        .step-number {
            width: 50px;
            height: 50px;
            font-size: 20px;
        }

        .step-content {
            padding: 25px;
            margin-left: 25px;
        }

        .step-icon-wrapper {
            width: 70px;
            height: 70px;
        }

        .step-icon {
            width: 40px;
            height: 40px;
        }

        .step-title {
            font-size: 20px;
        }

        .step-description {
            font-size: 14px;
        }

        .step-connector {
            left: 24px;
        }
    }

    /* Small mobile adjustments for How It Works */
    @media (max-width: 400px) {
        .how-it-works-mobile-wrapper {
            padding: 28px 12px;
        }

        .how-it-works-mobile-title {
            font-size: 24px;
        }

        .how-it-works-mobile-steps {
            margin-bottom: 30px;
        }

        .how-it-works-mobile-step {
            margin-bottom: 25px;
        }

        .step-number {
            width: 35px;
            height: 35px;
            font-size: 16px;
            top: 15px;
        }

        .step-content {
            padding: 15px;
            margin-left: 17px;
            flex-direction: column;
            text-align: center;
        }

        .step-icon-wrapper {
            width: 50px;
            height: 50px;
        }

        .step-icon {
            width: 30px;
            height: 30px;
        }

        .step-title {
            font-size: 16px;
        }

        .step-description {
            font-size: 12px;
        }

        .step-connector {
            left: 16px;
            top: 50px;
        }
    }

    /* Popular Stores Mobile Header */
    .popular-stores-mobile-header {
        text-align: center;
        margin-bottom: 20px;
        padding: 0 16px;
    }

    .popular-stores-mobile-title {
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        line-height: 1.2;
    }

    /* Popular Rentables Mobile Header */
    .popular-rentables-mobile-header {
        text-align: center;
        margin-bottom: 20px;
        padding: 0 16px;
    }

    .popular-rentables-mobile-title {
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        line-height: 1.2;
    }

    /* Mobile Catalogue Wrapper */
    .mobile-catalogue-wrapper {
        padding: 0;
        margin: 0;
        background: rgb(255 255 255 / 95%);
        overflow: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* Reset Catalogue's internal .mobile-content padding when embedded */
    .mobile-catalogue-wrapper .mobile-content {
        padding: 0 !important;
        min-height: auto !important;
    }

    /* Embedded catalogue: boxed cards matching Popular Rentables style */
    .mobile-catalogue-wrapper .mobile-rental-grid {
        padding: 0 16px;
        gap: 24px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-catalogue-wrapper .mobile-rental-item .rental-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        box-shadow: 0 0 0 1px #35a0ae, 0 4px 16px rgb(0 0 0 / 18%);
        border: none;
        border-radius: 12px;
    }

    @media (min-width: 600px) and (max-width: 959px) {
        .mobile-catalogue-wrapper .mobile-rental-grid {
            gap: 20px;
        }
    }

    /* Phone TWO-UP: this sheet's own 16px grid padding + 24px gap are the LARGEST of the four
       nested insets between the section card's edge and a column, and they are the easiest to
       miss because they live nowhere near the grid's definition (that is in Catalogue.razor's
       style element). Left alone they take the embed's columns to ~131px, which clips the card
       internals; zeroed, the embed lands at ~160px — close to the standalone page's ~170px, so
       one compact-card recipe serves both hosts.
       Two classes, declared AFTER the rule above, so it wins the (0,2,0) tie on source order. */
    @media (max-width: 599px) {
        .mobile-catalogue-wrapper .mobile-grid--two-up {
            padding: 0;
            gap: 10px;
        }
    }

    /* ══ "Recommended for You" — the section card ══
       The h1 used to be a sibling floating above the embed's own boxed surface, which read as a
       label with no relationship to the thing below it. Index wraps the heading AND both MudHidden
       embed branches in one card; the embed's inner surfaces are neutralised from
       Catalogue.razor.css (a scoped sheet, because it loads AFTER this one and therefore wins the
       source-order tie against a global rule of equal specificity).

       WAVE 2: the card chrome and the head band that used to be declared here are GONE. The wrapper
       is now a <SectionCard>, so .rently-card (rently-dashboard-system.css) paints the surface and
       .rently-section-card__head paints the band — one head treatment shared with the catalogue page
       and the two order-details pages instead of two look-alike vocabularies. `overflow: hidden` went
       with them: the head band no longer bleeds to the card's edge, so there is no fill to clip, and
       clipping a wrapper that hosts the catalogue embed is a liability rather than a nicety.

       What is left here is the one thing the component cannot own — this HOST's phone gutter. The
       class name is kept for the same reason it is kept in the markup: Catalogue.razor.css's two
       embed-neutralisation rules use it as their ancestor compound. */
    .home-recommended-card {
        margin-inline: 12px;
    }

    /* At desktop widths the section wrapper already supplies the page gutter, so the card sits
       edge to edge inside it — the 12px inline margin is a phone/tablet gutter only. */
    @media (min-width: 960px) {
        .home-recommended-card {
            margin-inline: 0;
        }
    }

    /* ============================================
       Hero Integrated Categories — Desktop
       ============================================ */
    .hero-categories-strip {
        margin-top: 32px;
        padding: 16px 20px;
        background: rgb(255 255 255 / 65%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 16px;
        border: 1px solid rgb(255 255 255 / 40%);
        box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
        max-width: 680px;
        animation: heroCatFadeIn 0.5s ease-out;
    }

    .hero-categories-row {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hero-categories-row::-webkit-scrollbar {
        display: none;
    }

    .hero-category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        min-width: 68px;
        max-width: 68px;
        transition: transform 0.2s ease;
    }

    .hero-category-item:hover {
        transform: translateY(-3px);
    }

    .hero-category-circle {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid rgb(53 160 174 / 20%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
    }

    .hero-category-item:hover .hero-category-circle {
        border-color: #35a0ae;
        box-shadow: 0 4px 12px rgb(53 160 174 / 25%);
    }

    .hero-category-circle.hero-category-more {
        background: rgb(235 60 39 / 6%);
        border-color: rgb(235 60 39 / 20%);
    }

    .hero-category-item:hover .hero-category-circle.hero-category-more {
        border-color: #EF412c;
        box-shadow: 0 4px 12px rgb(235 60 39 / 20%);
    }

    .hero-category-img {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .hero-category-icon-fallback {
        font-size: 26px !important;
        color: #35a0ae;
    }

    .hero-category-circle.hero-category-more .hero-category-icon-fallback {
        color: #EF412c;
    }

    .hero-category-label {
        font-size: 12px;
        font-weight: 500;
        color: #424242;
        text-align: center;
        line-height: 1.2;
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    @keyframes heroCatFadeIn {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Desktop responsive adjustments for hero categories */
    @media (max-width: 1200px) {
        .hero-categories-strip {
            max-width: 580px;
            margin-top: 24px;
            padding: 14px 16px;
        }

        .hero-category-item {
            min-width: 62px;
            max-width: 62px;
        }

        .hero-category-circle {
            width: 50px;
            height: 50px;
        }

        .hero-category-img {
            width: 30px;
            height: 30px;
        }

        .hero-category-label {
            font-size: 12px;
        }
    }

    @media (max-width: 992px) {
        .hero-categories-strip {
            max-width: 520px;
            margin-top: 20px;
            padding: 12px 14px;
        }

        .hero-category-item {
            min-width: 56px;
            max-width: 56px;
        }

        .hero-category-circle {
            width: 44px;
            height: 44px;
        }

        .hero-category-img {
            width: 26px;
            height: 26px;
        }

        .hero-category-icon-fallback {
            font-size: 22px !important;
        }
    }

    /* ============================================
       Hero Integrated Categories — Mobile
       (S22: original pre-S18 marquee kit restored with the member hero;
        the S19 member category strip and its rules are gone)
       ============================================ */

    /* Full-bleed. The ancestor .hero-mobile-content-container carries a 20px inline
       gutter, so without these negative margins the marquee's clip box stops short
       of the screen and pills disappear into a band of dead gutter on both sides.
       .hero-mobile-wrapper has overflow:hidden, so widening this box past the
       viewport cannot create a page h-scrollbar. */
    .hero-mobile-categories-strip {
        margin-top: 20px;
        margin-left: -20px;
        margin-right: -20px;
        position: relative;
        z-index: 10;
    }

    .hero-mobile-categories-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .hero-mobile-categories-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Auto-scrolling marquee for signed-in mobile category pills.
       The mask feathers both edges so pills dissolve instead of being guillotined
       at the clip boundary now that the strip runs edge to edge. */
    .hero-mobile-categories-autoscroll {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    }

    /* NO flex gap here — it is load-bearing that spacing lives on the pills.
       The track holds two identical halves and the marquee keyframe translates it
       by exactly -50%. With gap, 2N pills measure 2N*W + (2N-1)*gap, so the 50%
       mark falls half a gap BEFORE the second half actually begins and the loop
       visibly stutters on every wrap. Folding the 8px into each pill's own
       margin-right makes each half exactly N*(W+8), so -50% lands on the seam. */
    .hero-mobile-categories-track {
        display: flex;
        width: max-content;
        animation: categoryMarquee 30s linear infinite;
    }

    /* Scoped to the track so the skeleton row, which spaces itself with the
       gap on .hero-mobile-categories-scroll, does not get double spacing. */
    .hero-mobile-categories-track .hero-mobile-cat-pill {
        margin-right: 8px;
    }

    .hero-mobile-categories-track:hover,
    .hero-mobile-categories-track:active {
        animation-play-state: paused;
    }

    @keyframes categoryMarquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-mobile-categories-track {
            animation: none;
        }

        .hero-mobile-categories-autoscroll {
            overflow-x: auto;
        }
    }

    /* Manual horizontal scrolling avoids autoplay motion and keeps every item in
       one predictable keyboard order. Edge padding aligns the first/last pills. */
    .hero-mobile-cat-pill {
        appearance: none;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px 6px 6px;
        background: rgb(255 255 255 / 75%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 24px;
        border: 1px solid rgb(255 255 255 / 50%);
        box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
        scroll-snap-align: start;
        min-height: 44px;
        font: inherit;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .hero-mobile-cat-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgb(53 160 174 / 20%);
    }

    .hero-mobile-cat-pill:focus-visible {
        outline: 3px solid #256f7a;
        outline-offset: 2px;
    }

    .hero-mobile-cat-pill:active {
        transform: scale(0.96);
    }

    .hero-mobile-cat-skeleton {
        min-width: 110px;
        opacity: 0.7;
    }

    .hero-mobile-cat-thumb {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgb(53 160 174 / 8%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid rgb(53 160 174 / 15%);
    }

    .hero-mobile-cat-img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .hero-mobile-cat-fallback {
        font-size: 16px !important;
    }

    .hero-mobile-cat-text {
        font-size: 12px;
        font-weight: 500;
        color: var(--rently-text-body, #424242);
        line-height: 1;
    }

    .hero-mobile-cat-more {
        padding: 6px 14px;
        background: color-mix(in srgb, var(--rz-secondary) 7%, transparent);
        border-color: color-mix(in srgb, var(--rz-secondary) 20%, transparent);
    }

    .hero-mobile-cat-more-icon {
        font-size: 18px !important;
    }

    .hero-mobile-cat-more-text {
        color: #a72e1f;
    }

    /* The restored member hero is deliberately XS-only even before MudHidden's
       viewport observer becomes interactive (SSR backstop). */
    @media (min-width: 600px) {
        .hero-mobile-wrapper--member {
            display: none !important;
        }
    }

    /* S23: with the salutation line gone the welcome tagline leads the member hero, so it
       takes headline weight. Ink is the DARK teal literal, not the brand teal — the lead
       line sits directly on the grey band (#D9D9D9), where #35a0ae measures ~2.2:1; the
       dark literal holds >4:1 at this size and stays pinned in dark mode (N6 band rule).
       These (0,2,0) member rules out-rank every width-tier override below 600px, so they
       are the single source of truth for the member hero's phone geometry. */
    .hero-mobile-wrapper--member .hero-mobile-tagline {
        margin-top: 0;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.3;
        color: #256f7a;
    }

    /* The text column yields the mascot's width plus the speech-bubble overhang (52px)
       so the lead line never runs under the bubble; the min-height floors the block so
       the action buttons start BELOW the mascot's bottom edge (buttons paint above the
       cow — without the floor they would clip its hooves). */
    .hero-mobile-wrapper--member .hero-mobile-text {
        margin-bottom: 28px;
        max-width: min(210px, calc(100vw - clamp(96px, 34vw, 140px) - 72px));
        min-height: 96px;
    }

    /* Larger and off the nav edge: the mascot scales with the viewport (96px floor on the
       narrowest phones up to 140px) and drops 14px so it no longer kisses the search bar. */
    .hero-mobile-wrapper--member .hero-mobile-mascot-container {
        top: 14px;
    }

    .hero-mobile-wrapper--member .hero-mobile-mascot {
        width: clamp(96px, 34vw, 140px);
    }

    .hero-mobile-wrapper--member .hero-mobile-speech-bubble {
        width: clamp(72px, 25vw, 100px);
        left: -42px;
        top: 52%;
    }

    /* ═══ S26-02 — guest hero phone geometry (the twin of the member block above) ═══
       The signed-out hero gets the same treatment the user approved on the signed-in one: a
       LARGER mascot that scales with the viewport and drops clear of the search bar, and text
       that yields the cow plus its speech bubble instead of painting over them (measured before:
       a 75px cow flush at top 0, with the headline running through the bubble at 375).
       Only the two lines that sit BESIDE the cow yield — the tagline and the action buttons
       clear it vertically and keep the full column, so the guest hero's denser copy (eyebrow +
       two-line headline + two-line tagline) never re-wraps into a narrow gutter the way a
       blanket member-style column would. All four numbers are measured, not guessed: the glyph
       runs were sampled in-browser at the shipping font.
       Scoped to 599px and below — the tablet band (600–959) keeps the shared rules above. */
    @media (max-width: 599px) {
        .hero-mobile-wrapper--guest .hero-mobile-mascot-container {
            top: 14px;
        }

        .hero-mobile-wrapper--guest .hero-mobile-mascot {
            width: clamp(96px, 34vw, 140px);
        }

        /* Tucked tighter to the cow than the member hero's −42px and sitting a little higher:
           the guest headline is this hero's lead element and needs the width. Verified clear of
           the tagline's first line at 320 / 375 / 414 / 599. Note the rendered box is the
           ROTATED bounding box (−9deg), ~10px taller and wider than the layout box. */
        .hero-mobile-wrapper--guest .hero-mobile-speech-bubble {
            width: clamp(72px, 25vw, 100px);
            left: -20px;
            top: 48%;
        }

        /* The eyebrow sits ABOVE the bubble, so it only has to clear the cow itself:
           viewport − 20px gutter − mascot − 8px breathing. Sized so it never wraps (its glyph
           run measures 14.05em, so /14.2 keeps ~1% slack) — a wrapped eyebrow would push the
           headline down into the bubble. */
        .hero-mobile-wrapper--guest .hero-mobile-welcome {
            max-width: calc(100vw - 28px - clamp(96px, 34vw, 140px));
            font-size: clamp(13px, calc((100vw - 28px - clamp(96px, 34vw, 140px)) / 14.2), 16px);
        }

        /* The headline runs alongside the bubble, so its column yields the 20px overhang too.
           Sized by the same arithmetic as S23-02's section title: the longest authored line
           measures 6.97em, so /7.1 keeps ~2% slack and the two authored lines stay two lines
           (32px at 414+, 28.1px at 375, 23px at 320). Deliberately NO nowrap — wrapping stays
           the SC 1.4.12 text-spacing safety valve. */
        .hero-mobile-wrapper--guest .hero-mobile-title {
            max-width: calc(100vw - 48px - clamp(96px, 34vw, 140px));
            font-size: clamp(22px, calc((100vw - 48px - clamp(96px, 34vw, 140px)) / 7.1), 32px);
        }
    }

    /* Small mobile adjustments for hero categories */
    @media (max-width: 400px) {
        .hero-mobile-categories-strip {
            margin-top: 16px;
        }

        .hero-mobile-cat-pill {
            padding: 5px 10px 5px 5px;
            gap: 5px;
        }

        .hero-mobile-cat-text {
            font-size: 12px;
        }

        .hero-mobile-cat-thumb {
            width: 26px;
            height: 26px;
        }

        .hero-mobile-cat-img {
            width: 18px;
            height: 18px;
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .hero-mobile-categories-scroll {
            scroll-behavior: auto;
        }

        .hero-categories-strip {
            animation-duration: 0.01ms !important;
        }

        .hero-category-item:hover {
            transform: none;
        }

        .hero-mobile-cat-pill:hover,
        .hero-mobile-cat-pill:active {
            transform: none;
        }

        .how-it-works-card-new,
        .how-it-works-icon-new,
        .how-it-works-link-new,
        .category-card,
        .category-mobile-card,
        .category-mobile-icon-wrapper,
        .how-it-works-mobile-card,
        .hero-mobile-button,
        .carousel-arrow-wrapper {
            transition: none !important;
        }

        .how-it-works-card-new:hover,
        .how-it-works-card-new:hover .how-it-works-icon-new,
        .category-card:hover,
        .category-mobile-item:active .category-mobile-card,
        .how-it-works-mobile-card:active,
        .hero-mobile-button:active {
            transform: none !important;
        }

        .rental-card-carousel-wrapper,
        .store-card-carousel-wrapper {
            animation: none !important;
        }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       DARK MODE — section-design §13.9 D5 paired-flip (appended; light byte-identical).
       Repaints the home page's hardcoded NEUTRAL light islands to dark tokens.
       INVARIANT — brand identity, correct in BOTH themes, deliberately NOT flipped:
         • teal #35a0ae / red #EF412c section bands (.how-it-works-wrapper,
           .popular-rentables-wrapper, .popular-stores-wrapper, .hero-section-red,
           .how-it-works-mobile-wrapper) and their icon-pattern watermarks
         • N6 (2026-07-24): the grey #D9D9D9 + white-watermark iconography bands
           (.hero-section-grey, .hero-compact-bg-full, .hero-mobile-section-grey) — user decision
         • white text / badges / arrows ON those brand bands (.how-it-works-mobile-title,
           .popular-stores-mobile-title, .popular-rentables-mobile-title,
           .step-number-badge, .category-mobile-count, .knowledge-base-link,
           .section-header-text, brand carousel arrows)
         • brand teal text #35a0ae (measured 4.71:1 on the #1e293b card = AA pass)
       Dead legacy rules (.how-it-works-card-title / -card-text / .section-header-text —
       not present in markup) are intentionally left untouched.
       ═══════════════════════════════════════════════════════════════════════════ */

    /* N6 (2026-07-24): the grey #D9D9D9 + white-watermark iconography bands are BRAND —
       they now stay identical in dark mode (user decision: the Rently iconography
       backgrounds are part of the brand and dark enough to sit comfortably in dark).
       Only the plain-white wrappers still flip to the dark shell; the five grey band
       selectors were removed from this rule and their background-image:none rule was
       deleted. Cards/glass ON the bands keep their dark treatments (same precedent as
       the invariant teal/red bands); text sitting DIRECTLY on a band is pinned to its
       light-mode ink below. */
    [data-theme="dark"] .hero-banner-wrapper,
    [data-theme="dark"] .hero-mobile-wrapper,
    [data-theme="dark"] .categories-mobile-wrapper {
        background-color: var(--rently-shell-bg);
    }

    /* White content cards → dark card surface */
    [data-theme="dark"] .hero-compact-cat-card,
    [data-theme="dark"] .how-it-works-card-new {
        background-color: var(--rently-card-bg);
    }

    [data-theme="dark"] .category-mobile-card,
    [data-theme="dark"] .how-it-works-mobile-card {
        background-color: var(--rently-card-bg) !important;
    }

    /* card definition on dark: near-black hairlines → token border; teal-tint lifted */
    [data-theme="dark"] .category-mobile-card {
        border-color: var(--rently-border);
    }

    [data-theme="dark"] .hero-compact-cat-card {
        border-color: rgb(76 181 194 / 28%);
    }

    [data-theme="dark"] .how-it-works-card-new {
        box-shadow: 0 4px 16px rgb(0 0 0 / 45%) !important;
    }

    /* Translucent-white glassmorphism (hero strips / pills, embedded catalogue) → dark glass */
    [data-theme="dark"] .hero-categories-strip {
        background: rgb(30 41 59 / 72%);
        border-color: rgb(255 255 255 / 14%);
    }

    [data-theme="dark"] .hero-mobile-cat-pill {
        background: rgb(30 41 59 / 82%);
        border-color: rgb(255 255 255 / 16%);
    }

    [data-theme="dark"] .hero-mobile-cat-pill:focus-visible {
        outline-color: #5db2be;
    }

    [data-theme="dark"] .hero-mobile-cat-more-text {
        color: #f4796a;
    }

    [data-theme="dark"] .mobile-catalogue-wrapper {
        background: rgb(15 23 42 / 95%);
    }

    /* White icon circles (inside now-dark cards / glass) → lifted dark surface;
       teal icon-holders lifted so the category icons stay visible on dark */
    [data-theme="dark"] .step-icon-circle,
    [data-theme="dark"] .hero-category-circle {
        background-color: var(--rently-muted-bg);
    }

    [data-theme="dark"] .category-mobile-icon-wrapper,
    [data-theme="dark"] .hero-mobile-cat-thumb {
        background-color: rgb(76 181 194 / 16%);
    }

    /* Grey body text → light text ramp (#424242 → body; #616161/#6a6a6a/#727272 → secondary) */
    [data-theme="dark"] .hero-compact-cat-card-label,
    [data-theme="dark"] .category-mobile-name,
    [data-theme="dark"] .hero-category-label,
    [data-theme="dark"] .hero-mobile-cat-text {
        color: var(--rently-text-body);
    }

    [data-theme="dark"] .how-it-works-description {
        color: var(--rently-text-body) !important;
    }

    [data-theme="dark"] .categories-mobile-subtitle,
    [data-theme="dark"] .categories-mobile-empty p,
    [data-theme="dark"] .step-description {
        color: var(--rently-text-secondary);
    }

    /* N6 (2026-07-24): these headings sit DIRECTLY on the restored light-grey iconography bands,
       so they are PINNED to the light-mode heading ink in dark (in dark they would otherwise
       inherit the page's light body ink — unreadable on the light band). LITERAL, not a token:
       the dark theme re-declares the text tokens to light values, and the palette engine
       reprojects at runtime — a token here would drift back to light-on-light.
       Child .text-primary/.text-accent spans keep their own brand color. */
    [data-theme="dark"] .hero-heading-primary,
    [data-theme="dark"] .hero-compact-title-brand,
    [data-theme="dark"] .hero-mobile-title,
    /* F8 (session 5): the greeting h1 sits on the same light bands and was missed in the
       original pin sweep — it inherited the dark BODY ink (#f8fafc ≈ 1.4:1 on #D9D9D9).
       The .mud-typography descendants are belt-and-braces in case a future MudBlazor build
       starts inking .mud-typography-* directly. */
    [data-theme="dark"] .hero-compact-greeting-line,
    [data-theme="dark"] .hero-compact-greeting-line .mud-typography {
        color: #424242 !important;
    }

    /* S23: the member hero's lead tagline is pinned to its light-band literal in dark for
       the same band reason (the grey band never flips). */
    [data-theme="dark"] .hero-mobile-wrapper--member .hero-mobile-tagline {
        color: #256f7a !important;
    }

    /* Desktop inline-styled twins of the mobile islands above (completeness — section-8 ui-review gate).
       The guest/signed-in section bands (markup divs carrying the .home-section-surface hook)
       carry INLINE light colours. A
       no-op-in-light class hook + !important (needed to beat an inline style) flips them on dark while
       keeping light byte-identical (the inline value still wins in light). */
    [data-theme="dark"] .home-section-surface {
        background-color: var(--rently-shell-bg) !important;
    }