.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .status-pulse {
            width: 8px;
            height: 8px;
            background-color: #4be277;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 0 rgba(75, 226, 119, 0.7);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(75, 226, 119, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(75, 226, 119, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(75, 226, 119, 0); }
        }
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 1.5rem;
        }
        .glass-card {
            background: rgb(var(--rr-surface-container-highest) / 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(134, 149, 133, 0.1);
        }
        .hero-mesh {
            background-image: radial-gradient(at 0% 0%, rgba(75, 226, 119, 0.05) 0px, transparent 50%),
                              radial-gradient(at 100% 100%, rgba(34, 197, 94, 0.03) 0px, transparent 50%);
        }

        .hosting-lower-zone {
            position: relative;
            isolation: isolate;
            overflow: hidden;
        }

        .hosting-lower-zone::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgb(var(--rr-primary) / 0.035) 1px, transparent 1px),
                linear-gradient(to bottom, rgb(var(--rr-primary) / 0.026) 1px, transparent 1px);
            background-size: 64px 64px;
            -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
            opacity: 0.72;
        }

        .hosting-lower-zone::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(circle at 16% 18%, rgb(var(--rr-primary) / 0.075), transparent 34rem),
                radial-gradient(circle at 86% 62%, rgb(var(--rr-primary) / 0.052), transparent 32rem);
        }

        .hosting-kicker,
        .hosting-card-label {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            color: rgb(var(--rr-primary));
            font-family: "Space Grotesk", sans-serif;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .hosting-kicker::before,
        .hosting-card-label::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border: 1px solid rgb(var(--rr-primary) / 0.48);
            background: rgb(var(--rr-primary) / 0.74);
            box-shadow: 0 0 18px rgb(var(--rr-primary) / 0.16);
            animation: hosting-marker-pulse 5.4s ease-in-out infinite;
        }

        .hosting-section-title {
            margin-top: 1rem;
            color: rgb(var(--rr-on-surface));
            font-family: "Space Grotesk", sans-serif;
            font-size: 3.1rem;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1;
        }

        .hosting-section-title-accent,
        .hosting-accent-word {
            display: inline-block;
            color: rgb(var(--rr-primary));
            animation:
                rr-hero-title-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both,
                rr-hero-title-accent 1700ms ease 420ms both;
        }

        .hosting-section-copy {
            color: rgb(var(--rr-on-surface-variant) / 0.9);
            line-height: 1.85;
        }

        .hosting-pricing-card,
        .hosting-guidance-panel,
        .hosting-benefit-card,
        .hosting-fit-card,
        .hosting-process-panel,
        .hosting-adjust-panel,
        .hosting-sovereignty-panel {
            position: relative;
            overflow: hidden;
            border: 1px solid rgb(255 255 255 / 0.075);
            border-radius: 0.5rem;
            background:
                linear-gradient(180deg, rgb(var(--rr-surface-container-low) / 0.86), rgb(var(--rr-surface-container-lowest) / 0.92));
            box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.035),
                0 26px 70px rgb(3 7 18 / 0.22);
            backdrop-filter: blur(18px);
        }

        .hosting-pricing-card,
        .hosting-benefit-card,
        .hosting-fit-card {
            transition:
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.32s ease,
                box-shadow 0.32s ease,
                background-color 0.32s ease;
        }

        .hosting-pricing-card::before,
        .hosting-benefit-card::before,
        .hosting-fit-card::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(105deg, transparent 0%, rgb(var(--rr-primary) / 0.04) 48%, rgb(var(--rr-primary) / 0.09) 50%, transparent 55%);
            transform: translateX(-120%);
            transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .hosting-pricing-card:hover,
        .hosting-benefit-card:hover,
        .hosting-fit-card:hover {
            transform: translateY(-4px);
            border-color: rgb(var(--rr-primary) / 0.26);
            box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.045),
                0 24px 54px rgb(3 7 18 / 0.32),
                0 0 28px rgb(var(--rr-primary) / 0.055);
        }

        .hosting-pricing-card:hover::before,
        .hosting-benefit-card:hover::before,
        .hosting-fit-card:hover::before {
            transform: translateX(120%);
        }

        .hosting-pricing-card.is-recommended {
            border-color: rgb(var(--rr-primary) / 0.58);
            background:
                radial-gradient(circle at top, rgb(var(--rr-primary) / 0.085), transparent 26rem),
                linear-gradient(180deg, rgb(var(--rr-surface-container-high) / 0.88), rgb(var(--rr-surface-container-lowest) / 0.95));
        }

        .hosting-price-note {
            color: rgb(var(--rr-on-surface-variant) / 0.74);
            font-size: 0.78rem;
            line-height: 1.65;
        }

        .hosting-offer-badge {
            position: relative;
            z-index: 1;
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.38rem 0.7rem;
            width: fit-content;
            max-width: 100%;
            padding: 0.62rem 0.82rem;
            border: 1px solid rgb(var(--rr-primary) / 0.42);
            border-radius: 0.42rem;
            color: rgb(var(--rr-primary));
            background:
                linear-gradient(110deg, rgb(var(--rr-primary) / 0.05), rgb(var(--rr-primary) / 0.17), rgb(var(--rr-primary) / 0.055));
            box-shadow:
                0 0 0 1px rgb(var(--rr-primary) / 0.06),
                0 18px 38px rgb(var(--rr-primary) / 0.095);
            overflow: hidden;
            animation: hosting-offer-float 3.8s ease-in-out infinite;
        }

        .hosting-offer-badge::before {
            content: "";
            position: absolute;
            inset: -45% auto -45% -35%;
            width: 38%;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.24), transparent);
            transform: skewX(-18deg);
            animation: hosting-offer-shine 2.8s ease-in-out infinite;
        }

        .hosting-offer-badge span,
        .hosting-offer-badge strong {
            position: relative;
            z-index: 1;
            font-family: "Space Grotesk", sans-serif;
            line-height: 1.15;
        }

        .hosting-offer-badge span {
            font-size: 0.78rem;
            text-decoration: line-through;
            text-decoration-thickness: 2px;
            text-decoration-color: rgb(var(--rr-primary) / 0.72);
            color: rgb(var(--rr-on-surface-variant) / 0.92);
        }

        .hosting-offer-badge strong {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            animation: hosting-offer-pop 1.8s ease-in-out infinite;
        }

        .hosting-feature-list {
            display: grid;
            gap: 0.85rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .hosting-feature-list li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.75rem;
            align-items: start;
            color: rgb(var(--rr-on-surface-variant) / 0.92);
            font-size: 0.92rem;
            line-height: 1.55;
        }

        .hosting-feature-list .material-symbols-outlined {
            color: rgb(var(--rr-primary));
            font-size: 1.15rem;
            line-height: 1.4;
        }

        .hosting-guidance-panel::before,
        .hosting-process-panel::before,
        .hosting-adjust-panel::before,
        .hosting-sovereignty-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgb(var(--rr-primary) / 0.028) 1px, transparent 1px),
                linear-gradient(to bottom, rgb(var(--rr-primary) / 0.02) 1px, transparent 1px);
            background-size: 52px 52px;
            -webkit-mask-image: linear-gradient(180deg, black, transparent 86%);
            mask-image: linear-gradient(180deg, black, transparent 86%);
            opacity: 0.68;
        }

        .hosting-panel-content {
            position: relative;
            z-index: 1;
        }

        .hosting-guidance-steps,
        .hosting-adjust-grid,
        .hosting-sovereignty-markers {
            display: grid;
            gap: 0.85rem;
        }

        .hosting-guidance-steps {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .hosting-process-panel .hosting-guidance-steps,
        .hosting-adjust-panel .hosting-adjust-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hosting-step,
        .hosting-adjust-item,
        .hosting-sovereignty-marker {
            border-left: 1px solid rgb(var(--rr-primary) / 0.28);
            background: linear-gradient(90deg, rgb(var(--rr-primary) / 0.045), transparent 72%);
        }

        .hosting-step {
            padding: 1rem;
        }

        .hosting-step span {
            display: block;
            margin-bottom: 0.72rem;
            color: rgb(var(--rr-primary));
            font-family: "Space Grotesk", sans-serif;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.16em;
        }

        .hosting-step strong,
        .hosting-adjust-item strong,
        .hosting-sovereignty-marker strong {
            display: block;
            color: rgb(var(--rr-on-surface));
            font-family: "Space Grotesk", sans-serif;
            line-height: 1.25;
        }

        .hosting-step p,
        .hosting-adjust-item p,
        .hosting-sovereignty-marker p {
            margin-top: 0.55rem;
            color: rgb(var(--rr-on-surface-variant) / 0.86);
            font-size: 0.86rem;
            line-height: 1.65;
        }

        .hosting-adjust-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .hosting-adjust-item,
        .hosting-sovereignty-marker {
            padding: 1.15rem;
        }

        .hosting-image-shell {
            position: relative;
            min-height: 28rem;
            border: 1px solid rgb(255 255 255 / 0.08);
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 28px 80px rgb(3 7 18 / 0.34);
        }

        .hosting-image-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgb(var(--rr-primary) / 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgb(var(--rr-primary) / 0.028) 1px, transparent 1px);
            background-size: 58px 58px;
            opacity: 0.6;
        }

        .hosting-image-status {
            position: absolute;
            left: 1.4rem;
            right: 1.4rem;
            bottom: 1.4rem;
            z-index: 3;
            border: 1px solid rgb(var(--rr-primary) / 0.24);
            border-radius: 0.5rem;
            background: rgb(var(--rr-surface) / 0.82);
            backdrop-filter: blur(16px);
        }

        .hosting-trust-strip {
            position: relative;
            z-index: 1;
            border-top: 1px solid rgb(255 255 255 / 0.08);
            border-bottom: 1px solid rgb(255 255 255 / 0.05);
        }

        @keyframes hosting-marker-pulse {
            0%, 100% {
                box-shadow: 0 0 12px rgb(var(--rr-primary) / 0.12);
                opacity: 0.86;
            }
            50% {
                box-shadow: 0 0 0 6px rgb(var(--rr-primary) / 0), 0 0 22px rgb(var(--rr-primary) / 0.2);
                opacity: 1;
            }
        }

        @keyframes hosting-offer-float {
            0%, 100% {
                transform: translateY(0);
                box-shadow:
                    0 0 0 1px rgb(var(--rr-primary) / 0.06),
                    0 18px 38px rgb(var(--rr-primary) / 0.095);
            }
            50% {
                transform: translateY(-3px);
                box-shadow:
                    0 0 0 1px rgb(var(--rr-primary) / 0.12),
                    0 24px 50px rgb(var(--rr-primary) / 0.16);
            }
        }

        @keyframes hosting-offer-shine {
            0%, 35% {
                left: -42%;
            }
            72%, 100% {
                left: 112%;
            }
        }

        @keyframes hosting-offer-pop {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.045);
            }
        }

        @media (max-width: 1180px) {
            .hosting-guidance-steps,
            .hosting-adjust-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .hosting-section-title {
                font-size: 2.55rem;
            }
        }

        @media (max-width: 760px) {
            .hosting-section-title {
                font-size: 2rem;
                line-height: 1.08;
            }

            .hosting-guidance-steps,
            .hosting-adjust-grid,
            .hosting-process-panel .hosting-guidance-steps,
            .hosting-adjust-panel .hosting-adjust-grid {
                grid-template-columns: 1fr;
            }

            .hosting-image-shell {
                min-height: 24rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .hosting-kicker::before,
            .hosting-card-label::before,
            .hosting-offer-badge,
            .hosting-offer-badge::before,
            .hosting-offer-badge strong {
                animation: none;
            }

            .hosting-section-title-accent,
            .hosting-accent-word {
                animation: none;
            }

            .hosting-pricing-card::before,
            .hosting-benefit-card::before,
            .hosting-fit-card::before {
                display: none;
            }
        }