h1:focus {
    outline: none;
}

/* ---- Shared text utilities ---- */

.text-strong {
    font-weight: 600;
}

/* ---- Marketing design tokens (soft white-toned: ink/gray + one muted soft-coral accent) ---- */

:root {
    --form-gap: 16px;
    --font-marketing: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Fluent 2 elevation ramp - cards rest at 2, lift to 8 on hover, dialogs/menus at 16. */
    --elevation-2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
    --elevation-8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
    --elevation-16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
    --motion-fast: 150ms cubic-bezier(0.33, 0, 0.67, 1);
    /* Brand gradient for hero/feature bands - deep navy into the brand blue, no second hue. */
    --brand-gradient: linear-gradient(115deg, #0A2E4D 0%, #0F6CBD 100%);
    /* Derived from the MudBlazor palette (Theme/BrandPalette.cs) so light and dark mode both apply. */
    --marketing-ink: var(--mud-palette-text-primary);
    --marketing-ink-secondary: var(--mud-palette-text-secondary);
    --marketing-surface-alt: var(--mud-palette-background-gray);
    --marketing-hairline: var(--mud-palette-lines-default);
    --marketing-footer-text: var(--mud-palette-text-secondary);
    /* Whole-layout wash - soft, barely-there tint over the page background. */
    --marketing-page-bg: color-mix(in srgb, var(--mud-palette-background-gray) 35%, transparent);
    /* Same ink as text/tiles, not flat black - stays in the theme's monochrome family. */
    --marketing-dark: #1D1D1F;
    /* Single standard corner radius for every button, admin + marketing. */
    --button-radius: 4px;
    /* Single standard padding for every button, admin + marketing. */
    --button-padding: 5px 20px;
    /* Standard hover: saturate+darken, never a faded opacity dim (reads as disabled). */
    --button-hover-filter: saturate(1.5) brightness(0.95);
}

/* ---- Accent tones (Theme/AccentTone.cs) - colorful icon bubbles for menus, categories and benefits ---- */

.tone-blue { --tone: #0F6CBD; }
.tone-green { --tone: #13A10E; }
.tone-orange { --tone: #DA5B0B; }
.tone-red { --tone: #D13438; }
.tone-teal { --tone: #038387; }
.tone-gold { --tone: #C19C00; }
.tone-berry { --tone: #C239B3; }
.tone-cornflower { --tone: #4F6BED; }

/* Mixing with the theme's text color darkens the tone on light surfaces and lightens it on dark ones, so the icon keeps its contrast in both modes. */
.tone-bubble {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone, var(--mud-palette-primary)) 15%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--tone, var(--mud-palette-primary)) 82%, var(--mud-palette-text-primary));
    text-decoration: none;
    transition: background var(--motion-fast), transform var(--motion-fast);
}

a.tone-bubble:hover {
    background: color-mix(in srgb, var(--tone, var(--mud-palette-primary)) 25%, var(--mud-palette-surface));
}

.tone-bubble-sm {
    width: 30px;
    height: 30px;
}

.tone-bubble-lg {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

/* ---- Home page sections ---- */

.marketing-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--marketing-dark);
    min-height: 620px;
    display: flex;
    align-items: center;
}

/* Full-bleed pseudo-element, not the (shorter) content wrapper - avoids un-darkened photo strips above/below it. */
.marketing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8, 28, 52, 0.92) 0%, rgba(12, 59, 94, 0.78) 45%, rgba(15, 108, 189, 0.35) 100%);
}

/* Flat scrim, not a gradient - text is vertically centered so a bottom-only-dark gradient
   could leave it unreadable. Left-aligned, not centered, so lines share one starting edge. */
.marketing-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 64px 0;
    text-align: left;
}

.marketing-hero-title {
    color: #ffffff;
    font-family: var(--font-marketing);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    max-width: 700px;
}

.marketing-hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
    margin: 16px 0 0;
    max-width: 700px;
    line-height: 1.7;
    white-space: pre-line;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Subtle inline link under the summary - the rest of a long CMS description lives on /about
   instead of crowding the hero, but stays one click away. */
.marketing-hero-learn-more {
    display: inline-block;
    margin-top: 10px;
    color: #ffffff !important;
    font-weight: 500;
    text-decoration: none !important;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.marketing-hero-learn-more:hover {
    opacity: 1;
}

/* ---- Home hero "wow" layer (HomeHero): drifting photo, deep brand gradient with a warm glow, staged fade-up copy,
   gold headline accent, live stats and the next open visit card. Motion is off for prefers-reduced-motion. ---- */

.marketing-hero.hero-wow {
    overflow: hidden;
    isolation: isolate;
    min-height: 680px;
}

.hero-wow-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: saturate(1.15) contrast(1.06);
    transform: scale(1.08);
    animation: hero-drift 24s ease-in-out infinite alternate;
}

@keyframes hero-drift {
    from { transform: scale(1.08) translate3d(0, 0, 0); }
    to { transform: scale(1.18) translate3d(-2%, -1.5%, 0); }
}

.marketing-hero.hero-wow::before {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(4, 8, 16, .86) 0%, rgba(4, 8, 16, .66) 34%, rgba(4, 8, 16, .22) 62%, rgba(4, 8, 16, 0) 82%),
        linear-gradient(0deg, rgba(4, 8, 16, .45) 0%, rgba(4, 8, 16, 0) 35%);
}

.hero-wow-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(35% 45% at 92% 100%, rgba(255, 176, 46, .18) 0%, transparent 70%);
    animation: hero-glow 9s ease-in-out infinite alternate;
}

@keyframes hero-glow {
    from { opacity: .75; }
    to { opacity: 1; }
}

.hero-wow .marketing-hero-overlay {
    padding: 88px 0 72px;
}

.hero-wow-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: 48px;
}

.hero-wow-copy {
    min-width: 0;
}

.hero-wow-in {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-in .7s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes hero-in {
    to { opacity: 1; transform: none; }
}

.hero-wow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.hero-wow-pill .mud-icon-root {
    color: #FFC83D;
}

.hero-wow .marketing-hero-title {
    margin: 0;
    max-width: 760px;
    font-size: clamp(2.6rem, 4.6vw, 4.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.hero-wow-accent {
    background: linear-gradient(100deg, #FFE08A 0%, #FFC83D 40%, #FF9F1C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.hero-wow .marketing-hero-subtitle {
    max-width: 620px;
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.6;
}

.hero-wow-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.hero-wow-cta.mud-button-root {
    min-height: 56px;
    padding-left: 30px;
    padding-right: 26px;
    font-size: 17px;
    animation: hero-cta-glow 2.8s ease-in-out infinite;
}

@keyframes hero-cta-glow {
    0%, 100% { box-shadow: 0 10px 26px -10px rgba(255, 140, 0, .8), 0 0 0 0 rgba(255, 200, 61, .45); }
    50% { box-shadow: 0 10px 26px -10px rgba(255, 140, 0, .8), 0 0 0 10px rgba(255, 200, 61, 0); }
}

.hero-wow-glass.mud-button-root {
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: var(--button-radius);
    background: rgba(255, 255, 255, .1) !important;
    backdrop-filter: blur(10px);
    font-weight: 700;
    text-transform: none;
}

.hero-wow-glass.mud-button-root:hover {
    background: rgba(255, 255, 255, .2) !important;
}

.hero-wow-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.hero-wow-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(4, 8, 16, .45);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.hero-wow-stat .mud-icon-root {
    align-self: center;
    color: #FFC83D;
}

.hero-wow-stat-value {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.hero-wow-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background: rgba(4, 8, 16, .62);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
    color: #ffffff;
}

.hero-wow-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
    color: #7CF29A;
}

.hero-wow-live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3DDC6B;
    flex-shrink: 0;
}

.hero-wow-live-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #3DDC6B;
    animation: hero-live 1.8s ease-out infinite;
}

@keyframes hero-live {
    from { transform: scale(.6); opacity: 1; }
    to { transform: scale(1.6); opacity: 0; }
}

.hero-wow-card-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.hero-wow-card-day {
    font-size: 18px;
    font-weight: 700;
}

.hero-wow-card-time {
    font-family: var(--font-marketing);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-wow-card-note {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.hero-wow-card-cta.mud-button-root {
    margin-top: 16px;
    min-height: 48px;
}

.hero-wow-card-foot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

.hero-wow-next-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(4, 8, 16, .6);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-wow-bg,
    .hero-wow-glow,
    .hero-wow-cta.mud-button-root,
    .hero-wow-live-dot::after {
        animation: none;
    }

    .hero-wow-in {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

@media (max-width: 1279.98px) {
    .hero-wow-grid {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 32px;
    }
}

@media (max-width: 959.98px) {
    .marketing-hero.hero-wow {
        min-height: clamp(460px, 72vh, 620px);
    }

    .marketing-hero.hero-wow::before {
        background: linear-gradient(180deg, rgba(4, 8, 16, 0) 0%, rgba(4, 8, 16, .35) 35%, rgba(4, 8, 16, .9) 100%);
    }

    .hero-wow .marketing-hero-overlay {
        padding: 24px 0 26px;
    }

    .hero-wow-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-wow-pill {
        margin-bottom: 12px;
        padding: 5px 11px;
        font-size: 12px;
    }

    .hero-wow .marketing-hero-title {
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }

    .hero-wow .marketing-hero-subtitle {
        margin-top: 10px;
        font-size: 15px !important;
    }

    .hero-wow .hero-wow-actions {
        margin-top: 16px !important;
    }

    .hero-wow-cta.mud-button-root {
        width: 100%;
        min-height: 52px;
    }

    .hero-wow-stats {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hero-wow-stats::-webkit-scrollbar {
        display: none;
    }

    .hero-wow-stat {
        flex-shrink: 0;
        padding: 7px 11px;
        font-size: 12.5px;
    }

    .hero-wow-stat-value {
        font-size: 16px;
    }
}

/* Page banner (About/Gallery/Contact/... - every marketing page except Home). Minimal: flat
   gray band, small type, compact padding - not a hero-sized title block. */
.marketing-page-banner {
    background: var(--marketing-surface-alt);
    padding: 20px 0;
}

/* PageBanner-backed variant - real background image with a dark overlay so text stays readable. */
.marketing-page-banner-image {
    background-size: cover;
    background-position: center;
    padding: 0;
}

.marketing-page-banner-image .marketing-page-banner-overlay {
    background: rgba(0, 0, 0, 0.45);
    padding: 20px 0;
}

.marketing-page-banner-image .marketing-page-banner-overlay .mud-typography {
    color: #ffffff;
}

.marketing-page-banner-image .marketing-breadcrumb-link {
    color: rgba(255, 255, 255, 0.75) !important;
}

.marketing-page-banner-image .marketing-breadcrumb-link:hover {
    color: #ffffff !important;
}

/* Sits above the centered hero copy, left-aligned like the page banner trail. */
.sales-intro-breadcrumb {
    margin-bottom: 20px;
}

.marketing-breadcrumb-link {
    text-decoration: none !important;
}

.marketing-breadcrumb-link:hover {
    color: var(--mud-palette-primary) !important;
}

/* MudImage has no width constraint outside MudAvatar/Fluid="true" - without this, width follows the photo's own aspect ratio. */
.service-detail-image {
    width: 100%;
    display: block;
}

/* Signals the thumbnail is clickable (see marketing.js initServiceGallery). Opacity dip, not fade-to-nothing. */
.service-gallery-thumb {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.service-gallery-thumb:hover {
    opacity: 0.85;
}

.marketing-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
}

/* Pins the video while a long description scrolls past. Desktop only - mobile stacks them, so sticky would trap it on screen. */
@media (min-width: 960px) {
    .marketing-video-embed-sticky {
        position: sticky;
        top: 64px;
    }
}

.marketing-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Plain image block - no radius, no shadow, no lift. */
.marketing-quote-section {
    background: var(--marketing-surface-alt);
    padding: 120px 0;
}

@media (max-width: 959px) {
    .marketing-quote-section {
        padding: 64px 0;
    }
}

/* Shared "flat surface card" shape - hairline border, standard radius. Used by every marketing
   card variant below (feature card, testimonial card, promo card) instead of each
   repeating the same two declarations; each keeps its own background/padding/layout. */
.marketing-feature-card,
.marketing-testimonial-card,
.marketing-promo-card,
.contact-form {
    border-radius: 8px;
    border: 1px solid var(--marketing-hairline);
}

/* Contact page panels (form + info) - same flat-card shape as the rest of the site's cards. */
.contact-form {
    background: var(--marketing-surface-alt);
    padding: 28px;
    height: 100%;
}

/* Contact info's icon+value rows - a small tinted circle instead of a bare inline icon. */
.contact-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.contact-info-link {
    color: var(--marketing-ink) !important;
    text-decoration: none !important;
}

.contact-info-link:hover {
    color: var(--mud-palette-primary) !important;
}

/* Shared hover-lift - rises 4px and tints the border primary on hover. */
.marketing-feature-card:hover,
.marketing-testimonial-card:hover,
.marketing-pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--mud-palette-primary);
}

/* Pricing/Membership plan cards - same feel across Signup, Pricing.razor and Membership.razor. */
.marketing-pricing-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.marketing-pricing-card:hover {
    box-shadow: 0 12px 24px -14px rgba(16, 16, 32, 0.18);
}

.marketing-pricing-card-featured {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.marketing-pricing-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 6px 14px -6px rgba(16, 16, 32, 0.35);
}

/* Light section band - no dark/black fills anywhere, just the surface-alt gray against white
   for rhythm between sections. */
.marketing-dark-section {
    background: var(--marketing-surface-alt);
}

/* "How It Works" connected step cards (HomeProcessSection): one row with a rail between markers on wide screens,
   a vertical timeline on phones. --tone comes from the step's own color or an AccentTone class. */
.how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.how-steps-row {
    grid-template-columns: repeat(var(--how-count), minmax(0, 1fr));
}

.how-step {
    --tone: var(--mud-palette-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.how-step-marker {
    position: relative;
    display: flex;
    justify-content: center;
}

.how-steps-row .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(50% + 38px);
    width: calc(100% - 76px + 20px);
    height: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, transparent) 0 10px, transparent 10px 18px);
}

.how-step-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--tone);
    color: #ffffff;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 16%, var(--marketing-surface-alt)), 0 14px 26px -12px color-mix(in srgb, var(--tone) 80%, transparent);
    transition: transform var(--motion-fast);
}

.how-step-icon .mud-icon-root {
    font-size: 28px;
}

.how-step:hover .how-step-icon {
    transform: translateY(-3px) scale(1.05);
}

.how-step-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px 22px;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--tone);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    text-align: left;
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.how-step:hover .how-step-card {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px -26px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
}

.how-step-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.how-step-title {
    position: relative;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.how-step-text {
    position: relative;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

.how-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px solid color-mix(in srgb, #FFC83D 55%, var(--mud-palette-lines-default));
    border-radius: 18px;
    background: linear-gradient(120deg, color-mix(in srgb, #FFC83D 16%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 70%);
}

.how-cta-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.how-cta-title {
    font-size: 18px;
    font-weight: 800;
}

.how-cta-sub {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.how-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.how-cta-secondary.mud-button-root {
    border-radius: var(--button-radius);
    font-weight: 700;
    text-transform: none;
}

@media (hover: none) {
    .how-step:hover .how-step-card,
    .how-step:hover .how-step-icon {
        transform: none;
        box-shadow: none;
    }

    .how-step:hover .how-step-icon {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 16%, var(--marketing-surface-alt));
    }
}

@media (max-width: 959.98px) {
    .how-steps,
    .how-steps-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .how-step {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
        padding-bottom: 14px;
    }

    .how-step:last-child {
        padding-bottom: 0;
    }

    .how-steps-row .how-step:not(:last-child)::after,
    .how-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 54px;
        bottom: 0;
        left: 23px;
        width: 3px;
        height: auto;
        border-radius: 3px;
        background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--tone) 55%, transparent) 0 8px, transparent 8px 14px);
    }

    .how-step-marker {
        justify-content: flex-start;
        padding-top: 4px;
    }

    .how-step-icon {
        width: 46px;
        height: 46px;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 16%, var(--marketing-surface-alt));
    }

    .how-step-icon .mud-icon-root {
        font-size: 22px;
    }

    .how-step-card {
        padding: 14px 14px 16px;
        border-top-width: 1px;
        border-left: 4px solid var(--tone);
        border-radius: 14px;
    }

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

    .how-step-text {
        font-size: 13.5px;
    }

    .how-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        margin-top: 20px;
        padding: 18px 16px;
    }

    .how-cta-icon {
        align-self: center;
    }

    .how-cta-actions {
        flex-direction: column;
    }

    .how-cta-actions .mud-button-root {
        width: 100%;
    }
}

/* "What We Provide" tabbed showcase (HomeFeatureHighlightsSection + marketing.js initProvide). */
.provide {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 28px;
    align-items: stretch;
}

.provide-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.provide-tab {
    --tone: var(--mud-palette-primary);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 16px 16px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 14px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.provide-tab:hover {
    background: color-mix(in srgb, var(--tone) 6%, transparent);
}

.provide-tab:focus-visible {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.provide-tab.active {
    border-color: color-mix(in srgb, var(--tone) 35%, var(--mud-palette-lines-default));
    background: var(--mud-palette-surface);
    box-shadow: 0 16px 32px -24px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
}

.provide-tab-number {
    flex-shrink: 0;
    width: 38px;
    font-family: var(--font-marketing);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--marketing-hairline);
    transition: color var(--motion-fast);
}

.provide-tab:hover .provide-tab-number,
.provide-tab.active .provide-tab-number {
    color: var(--tone);
}

.provide-tab-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.provide-tab-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.provide-tab.active .provide-tab-title {
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.provide-tab-desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.provide-tab.active {
    border-left: 4px solid var(--tone);
}

.provide-stage {
    position: relative;
    display: grid;
    min-height: 460px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--marketing-surface-alt);
    box-shadow: 0 28px 56px -30px rgba(16, 16, 32, .45);
}

.provide-panel {
    --tone: var(--mud-palette-primary);
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 55%, #10131c), #10131c);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
}

.provide-panel.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility 0s;
}

.provide-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform .8s ease;
}

.provide-panel.active img {
    transform: scale(1);
}

.provide-panel-overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 72px 28px 26px;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 18, .55) 35%, rgba(8, 10, 18, .88) 100%);
    color: #ffffff;
}

.provide-panel-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tone);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.provide-panel-title {
    margin: 0;
    font-family: var(--font-marketing);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.provide-panel-text {
    max-width: 560px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.provide-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 10px 18px;
    border-radius: var(--button-radius);
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(255, 140, 0, .75);
    transition: transform var(--motion-fast);
}

.provide-panel-cta:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .provide-panel,
    .provide-panel img {
        transition: none;
    }
}

@media (max-width: 959.98px) {
    .provide {
        display: block;
    }

    .provide-tabs {
        display: none;
    }

    .provide-stage {
        display: flex;
        gap: 12px;
        min-height: 0;
        margin: 0 -16px;
        padding: 4px 16px 12px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }

    .provide-stage::-webkit-scrollbar {
        display: none;
    }

    .provide-panel,
    .provide-panel.active {
        flex: 0 0 82%;
        min-height: 320px;
        border-radius: 16px;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        scroll-snap-align: start;
        transition: none;
    }

    .provide-panel img {
        transform: none;
    }

    .provide-panel-overlay {
        padding: 56px 16px 16px;
    }

    .provide-panel-title {
        font-size: 20px;
    }

    .provide-panel-text {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
    }
}

/* Testimonial quote card - review text up front, a large faint watermark quote mark, reviewer
   identity pinned to the footer with a hairline divider above it. */
.marketing-testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 18px 16px;
    background: var(--marketing-surface-alt);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.marketing-testimonial-quote-icon {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 64px !important;
    color: var(--mud-palette-primary);
    opacity: 0.12;
}

.marketing-testimonial-desc {
    position: relative;
    margin-top: 12px;
    color: var(--marketing-ink);
    line-height: 1.6;
}

.marketing-testimonial-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--marketing-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Baseline "prose" styling for CMS rich-text output (MudExRichTextEdit) - without this, injected
   h1/h2/ul render at the theme's raw browser/global heading sizes, wildly oversized next to the
   surrounding body copy. */
/* Bold, not the theme's soft 450 page-heading weight - these are editor-authored section headings
   inside a long CMS document, not page chrome, so they should read as actually bold (matching what
   the rich-text editor itself already shows) so they stand out and break up the prose. */
.marketing-rich-text h1,
.marketing-rich-text h2,
.marketing-rich-text h3 {
    font-family: var(--font-marketing);
    color: var(--marketing-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
    margin: 1.2rem 0 0.4rem;
}

.marketing-rich-text h1 {
    font-size: 1.4rem;
}

.marketing-rich-text h2 {
    font-size: 1.15rem;
}

.marketing-rich-text h3 {
    font-size: 1.05rem;
}

.marketing-rich-text > :first-child {
    margin-top: 0;
}

.marketing-rich-text p {
    margin: 0 0 0.75rem;
}

.marketing-rich-text ul,
.marketing-rich-text ol {
    margin: 0 0 0.75rem;
    padding-left: 1.4rem;
}

.marketing-rich-text li {
    margin-bottom: 0.3rem;
}

/* Promotion card - a "coupon ticket" look (accent left edge + dashed stub divider) instead of a
   plain box, so an offer reads as an offer at a glance, fully visible, no click required. */
.marketing-promo-card {
    padding: 16px 18px;
    background: var(--marketing-surface-alt);
    border-left: 4px solid var(--mud-palette-primary) !important;
}

.marketing-promo-title {
    color: var(--marketing-ink);
    font-size: 1.05rem;
}

.marketing-promo-expiry {
    flex-shrink: 0;
}

/* Dashed stub divider - the "tear line" between a coupon's header and its details. */
.marketing-promo-divider {
    border-top: 1px dashed var(--marketing-hairline);
    margin: 12px 0;
}

/* CSS-only tab toggle (Details / Ask Your Questions on service detail) - hidden radio inputs +
   label buttons + sibling selectors, zero JS (Static SSR has no @onclick to toggle panels). */
.marketing-tabs-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.marketing-tabs-btn {
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    border: 1px solid var(--marketing-hairline);
    color: var(--marketing-ink-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.marketing-tabs-panel {
    display: none;
}

#service-tab-details:checked ~ #service-panel-details,
#service-tab-ask:checked ~ #service-panel-ask {
    display: block;
}

#service-tab-details:checked ~ .marketing-tabs-nav label[for="service-tab-details"],
#service-tab-ask:checked ~ .marketing-tabs-nav label[for="service-tab-ask"] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #ffffff;
}

.marketing-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid var(--marketing-hairline);
    background: var(--marketing-surface-alt);
    color: var(--marketing-ink);
    padding: 12px 14px;
    font-size: .95rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.marketing-textarea:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.14);
}

/* Contact-style forms (ContactMessageForm) - outlined fields with a floating label: it rests inside the empty
   field like a placeholder, then moves up onto the top border line on focus or once there is a value. The inputs
   carry placeholder=" " (never shown) only so :placeholder-shown can tell empty from filled. On the line, the
   label's background is split: card color above, input color below, so the border looks notched. */
.marketing-field {
    position: relative;
    margin-top: 8px;
    margin-bottom: .25rem;
}

.marketing-field-label {
    position: absolute;
    top: 15px;
    left: 10px;
    z-index: 1;
    max-width: calc(100% - 20px);
    padding: 0 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}

.marketing-field:focus-within .marketing-field-label,
.marketing-field:has(.marketing-field-input:not(:placeholder-shown), .marketing-field-textarea:not(:placeholder-shown)) .marketing-field-label {
    top: -9px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(to bottom, var(--marketing-surface-alt) 50%, var(--mud-palette-surface) 50%);
}

.marketing-field:focus-within .marketing-field-label {
    color: var(--mud-palette-primary);
}

.marketing-field:has(.invalid) .marketing-field-label {
    color: var(--mud-palette-error, #D32F2F);
}

.marketing-field-input,
.marketing-field-textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    background: var(--mud-palette-surface);
    color: var(--marketing-ink);
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.marketing-field-input {
    height: 48px;
    padding: 0 16px;
}

.marketing-field-textarea {
    display: block;
    min-height: 130px;
    resize: vertical;
    padding: 14px 16px 12px;
}

.marketing-field-input:focus,
.marketing-field-textarea:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary), 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.14);
}

.marketing-field-input.invalid,
.marketing-field-textarea.invalid {
    border-color: var(--mud-palette-error, #D32F2F);
}

.marketing-field-error {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--mud-palette-error, #D32F2F);
}

/* ---- Contact page: phone quick actions (Call / Email / Directions) ---- */

.contact-quick-actions {
    margin-bottom: 20px;
}

.contact-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
}

.contact-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 96px;
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--marketing-hairline);
    box-shadow: var(--elevation-2);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.contact-quick-action .tone-bubble {
    width: 48px;
    height: 48px;
}

.contact-quick-label {
    font-size: 14px;
    font-weight: 600;
}

.contact-quick-hours {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 12px !important;
}

/* Phones: 16px inputs stop iOS from zooming in on focus, 48px rows are comfortable thumb targets, and the send button spans the width. */
@media (max-width: 959.98px) {
    .contact-form {
        padding: 20px 16px;
        height: auto;
    }

    .marketing-field-input,
    .marketing-field-textarea {
        font-size: 16px;
    }

    .marketing-field-input {
        height: 48px;
    }

    .contact-submit {
        width: 100%;
        min-height: 48px;
    }
}

/* ---- Marketing site (Apple.com-style visual system) ---- */

.marketing-display {
    font-family: var(--font-marketing);
}

/* Tight tracking on headings only - Apple's large display type sits closer together than body
   text; MudBlazor's Typography.LetterSpacing is int-only (px), so this is set in CSS instead. */
.marketing-layout-main h1, .marketing-layout-main h2, .marketing-layout-main h3,
.marketing-layout-main h4, .marketing-layout-main h5, .marketing-layout-main h6,
.marketing-page-banner h1, .marketing-page-banner h2, .marketing-page-banner h3 {
    letter-spacing: -0.02em;
}

.marketing-brand-mark {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    white-space: nowrap;
    color: var(--marketing-ink);
}

.marketing-brand-mark .mud-icon-root {
    color: var(--mud-palette-primary);
}

.marketing-brand-mark-on-dark {
    color: #ffffff;
}

.marketing-brand-word {
    font-family: var(--font-marketing);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.01em;
}

.marketing-brand-word-muted {
    opacity: .55;
}

.marketing-brand-word + .marketing-brand-word {
    margin-left: .3em;
}

.module-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.module-toggle-row:last-child {
    border-bottom: none;
}

.module-toggle-text {
    flex: 1;
    min-width: 0;
}

/* Sized by the page's own width (container query), not the screen's, so it also adapts beside an open nav drawer. */
.settings-page {
    max-width: 760px;
    container-type: inline-size;
}

.settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.settings-row > .settings-field,
.settings-row > .mud-select {
    flex: 1 1 240px;
    min-width: 0;
}

@container (max-width: 480px) {
    .settings-row > .mud-button-root,
    .settings-actions > .mud-button-root {
        width: 100%;
    }
}

.brand-initial-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.brand-logo {
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* Flat CTA - accent fill, standard button radius. Hover darkens the fill (more vivid/present),
   never fades via opacity - a faded button reads as disabled, not hovered. */
.header-book-now-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--mud-palette-primary) !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 400;
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.header-book-now-btn:hover {
    filter: var(--button-hover-filter);
    color: #ffffff !important;
}

/* Translucent, blurred nav - Apple's signature header treatment even before the scroll-triggered
   sticky state kicks in. */
.marketing-app-bar {
    background: color-mix(in srgb, var(--mud-palette-appbar-background) 80%, transparent) !important;
    backdrop-filter: saturate(1.8) blur(20px);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    color: var(--marketing-ink) !important;
    border-bottom: 1px solid var(--marketing-hairline);
}

/* Toolbar's own padding removed - the MudContainer inside it supplies the gutter, lining the nav up with page content. */
.marketing-app-bar .mud-toolbar {
    padding: 0;
}

/* MudMainContent reserves space for a "fixed" appbar by default - it can't see that the real
   MudAppBar (Fixed="false") is wrapped in .marketing-sticky-header, so it always adds this padding
   even though the header sits in normal document flow. That's the gap under the nav bar. */
.marketing-layout-main {
    padding-top: 0 !important;
    background-color: var(--marketing-page-bg);
}

/* Sticky footer - .mud-main-content already has flex:1 1 auto, .mud-layout just needs to be the flex column it assumes. */
.marketing-app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- Sticky header on scroll ---- */

.marketing-sticky-header.is-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    animation: marketing-sticky-in 0.3s ease-out;
}

@keyframes marketing-sticky-in {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Reserves the header's height so sticky mode doesn't yank content up underneath it. */
.marketing-sticky-header-spacer {
    display: none;
    height: 48px;
}

.marketing-sticky-header-spacer.is-active {
    display: block;
}

/* Color-only hover - no underline, no bar. NavLink's own .active class (applied for the current
   page) gets the same color, permanently. */
.marketing-nav-link {
    font-size: 13px;
    font-weight: 400;
    color: var(--marketing-ink) !important;
    text-decoration: none !important;
}

.marketing-nav-link:hover,
.marketing-nav-link.active {
    color: var(--mud-palette-primary) !important;
}

/* Own breakpoint, not MudBlazor's d-none/d-md-flex - those applied at once on real mobile widths. */
.marketing-app-bar .marketing-nav {
    display: none !important;
}

.marketing-app-bar .header-book-now-btn {
    display: none !important;
}

@media (min-width: 960px) {
    .marketing-app-bar .marketing-nav {
        display: flex !important;
    }

    .marketing-app-bar .header-book-now-btn {
        display: inline-flex !important;
    }
}

/* ---- Marketing section spacing (tightened - minimal, not Apple's 140px rhythm) ---- */

.marketing-section {
    padding-top: 56px;
    padding-bottom: 56px;
}

.marketing-section-tight {
    padding-top: 36px;
    padding-bottom: 36px;
}

@media (max-width: 959px) {
    .marketing-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .marketing-section-tight {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* Scroll-reveal (see marketing.js initScrollReveal) - subtle fade+rise, no-op under
   prefers-reduced-motion (guarded in JS, and again here as a safety net). */
.marketing-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.marketing-reveal.marketing-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .marketing-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Marketing footer (Apple's light-gray, minimal footer treatment) ---- */

.marketing-footer {
    background: var(--marketing-surface-alt);
    color: var(--marketing-footer-text);
    font-size: 13px;
}

.marketing-footer .mud-typography {
    color: var(--marketing-footer-text);
    font-size: 13px;
}

.marketing-footer .mud-link {
    color: var(--marketing-footer-text) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

/* Footer column titles ("Quick Links", "Popular Services", "Newsletter") - bold and black,
   standing out from the muted body/link text around them. */
.marketing-footer-heading {
    color: var(--marketing-ink) !important;
    font-weight: 700 !important;
}

.marketing-footer .mud-link:hover {
    color: var(--marketing-ink) !important;
}

/* Popular Services title - turns the theme's primary (soft-coral/orange) color on hover. */
.footer-course-title {
    transition: color 0.2s ease;
}

.marketing-footer .footer-course-title:hover {
    color: var(--mud-palette-primary) !important;
}

/* :not() excludes the newsletter send button - its own color rule would otherwise get overridden, making the icon disappear. */
.marketing-footer .mud-icon-button:not(.newsletter-button) {
    color: var(--marketing-ink) !important;
    transition: color 0.2s ease;
}

.marketing-footer .mud-icon-button:not(.newsletter-button):hover {
    color: var(--mud-palette-primary) !important;
}

/* ---- Audience-first footer: entry card per audience, then grouped link columns ---- */

.footer-audiences {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.footer-audience {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 14px 30px -20px rgba(16, 16, 32, .6);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.footer-audience:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 36px -20px rgba(16, 16, 32, .7);
}

.footer-audience-home {
    background: var(--brand-gradient);
}

.footer-audience-business {
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
}

.footer-audience-team {
    background: linear-gradient(135deg, #0B5E5D 0%, #0E7C7B 100%);
}

.footer-audience-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
}

.footer-audience-business .footer-audience-icon {
    background: rgba(43, 26, 0, .1);
}

.footer-audience-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.footer-audience-eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    opacity: .85;
}

.footer-audience-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.footer-audience-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.footer-audience-cta .mud-icon-root {
    transition: transform var(--motion-fast);
}

.footer-audience:hover .footer-audience-cta .mud-icon-root {
    transform: translateX(3px);
}

.footer-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 32px;
}

.footer-columns .marketing-footer-heading {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links a {
    width: fit-content;
    color: var(--marketing-footer-text);
    text-decoration: none;
    transition: color var(--motion-fast), transform var(--motion-fast);
}

.footer-links a:hover {
    color: var(--mud-palette-primary);
    transform: translateX(2px);
}

/* Footer "Popular" services: featured services first, each a small row with its category color, title, price and a chevron. */
.footer-popular {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.footer-popular-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    color: #DA5B0B;
}

.footer-links .footer-popular-item {
    --tone: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.footer-links .footer-popular-item:hover {
    border-color: color-mix(in srgb, var(--tone) 50%, var(--mud-palette-lines-default));
    box-shadow: 0 10px 20px -16px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
    color: var(--mud-palette-text-primary);
    transform: translateY(-1px);
}

.footer-popular-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.footer-popular-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.footer-popular-title {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-popular-price {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.footer-popular-chevron {
    flex-shrink: 0;
    color: var(--mud-palette-text-disabled);
    transition: transform var(--motion-fast), color var(--motion-fast);
}

.footer-popular-item:hover .footer-popular-chevron {
    color: var(--tone);
    transform: translateX(2px);
}

.footer-links .footer-popular-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 700;
}

.footer-bottom {
    border-top: 1px solid var(--marketing-hairline);
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 12px;
}

.footer-bottom-inner a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.footer-bottom-inner a:hover {
    color: var(--mud-palette-primary);
}

@media (max-width: 1279.98px) {
    .footer-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand,
    .footer-newsletter {
        grid-column: span 3;
    }
}

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

    .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .footer-brand,
    .footer-newsletter {
        grid-column: span 2;
    }

    .footer-bottom-inner {
        justify-content: center;
        text-align: center;
    }
}

@media (hover: none) {
    .footer-audience:hover,
    .footer-links a:hover {
        transform: none;
    }
}

/* Secondary button - hairline outline, ink text, fills with the soft accent (not black)
   on hover. Used for every non-primary marketing CTA (card actions, "All Services", quote
   requests). */
.botton-border {
    padding: var(--button-padding) !important;
    border: 1px solid var(--marketing-ink) !important;
    color: var(--marketing-ink) !important;
    border-radius: var(--button-radius) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    background: transparent !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.botton-border:hover:not(:disabled) {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: #ffffff !important;
}

.marketing-app-bar .mud-button-root,
.marketing-app-bar .mud-link {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* MudBadge's default -8px top offset pokes the cart-count dot above the app bar's own top edge -
   the bar sits flush at the document/viewport top with no room above it, so the top slice of the
   badge was rendering off-screen. Nudge it down just enough to stay fully visible. */
.marketing-app-bar .mud-badge-root .mud-badge {
    top: 2px !important;
}

.marketing-avatar {
    border-radius: 50%;
}

/* Flat accent fill, no shadow, no gradient, standard button radius. Hover darkens the fill
   (more vivid/present), never fades via opacity - a faded button reads as disabled. */
.marketing-layout-main .mud-button-filled,
.marketing-footer .mud-button-filled {
    border-radius: var(--button-radius) !important;
    padding: var(--button-padding) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: filter 0.2s ease;
}

.marketing-layout-main .mud-button-filled:hover,
.marketing-footer .mud-button-filled:hover {
    filter: var(--button-hover-filter);
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .botton-border,
.marketing-layout-main .mud-button-filled,
.marketing-footer .mud-link,
.marketing-footer .mud-icon-button {
        transition: none !important;
    }
}

/* ---- Auth shell (Login and any other unauthenticated page) ---- */

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
    color: #fff;
    background: var(--mud-palette-primary);
}

.auth-brand-mark {
    color: inherit;
}

.auth-brand-body {
    max-width: 30rem;
}

.auth-brand-body h1 {
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.auth-brand-body p {
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
}

.auth-brand-features {
    background: transparent;
    margin: 2rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.auth-brand-features .auth-feature-item {
    padding: 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.92);
}

.auth-brand-footer {
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.65);
}

.auth-page-container {
    min-height: 100vh;
}

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--mud-palette-background, #F7F7FB);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    border-radius: 20px !important;
    padding: 2.75rem 2.5rem !important;
    box-shadow: 0 1px 2px rgba(16, 16, 32, 0.04), 0 24px 48px -12px rgba(16, 16, 32, 0.14) !important;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-wrap svg {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}

.auth-input {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, #E5E5F0);
    background: transparent;
    color: var(--mud-palette-text-primary, #1E1B2E);
    padding: 0 14px 0 44px;
    font-size: .9rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Placeholder text is never shown - the attribute only exists as a CSS hook for :placeholder-shown below. */
.auth-input::placeholder {
    color: transparent;
}

.auth-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.14);
}

.auth-input.invalid {
    border-color: var(--mud-palette-error, #D32F2F);
}

/* Kills Chrome's opaque autofill background. */
.auth-input:-webkit-autofill {
    -webkit-text-fill-color: var(--mud-palette-text-primary, #1E1B2E);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s;
}

/* Outlined floating label - sits inside like a placeholder, moves onto the border line on focus/value. */
.auth-input-label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    color: var(--mud-palette-text-secondary, #5F5F72);
    padding: 0 4px;
    pointer-events: none;
    transition: top .15s ease, left .15s ease, font-size .15s ease, color .15s ease;
}

.auth-input:focus ~ .auth-input-label,
.auth-input:not(:placeholder-shown) ~ .auth-input-label {
    top: 0;
    left: 12px;
    font-size: .72rem;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-primary);
}

.auth-input.invalid ~ .auth-input-label {
    color: var(--mud-palette-error, #D32F2F);
}

.auth-field-error {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--mud-palette-error, #D32F2F);
}

.api-error-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    max-width: 360px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.25);
}

.auth-submit {
    height: 48px !important;
    border-radius: var(--button-radius) !important;
    padding: var(--button-padding) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: .98rem !important;
    box-shadow: 0 10px 24px -8px rgba(var(--mud-palette-primary-rgb), 0.55) !important;
}

.auth-mobile-hero,
.auth-mobile-back {
    display: none !important;
}

.auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Phones: a colorful brand header curves over the top of the screen and the form card floats on it. */
@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        display: none;
    }

    .auth-panel {
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    .auth-panel::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 290px;
        border-radius: 0 0 36px 36px;
        background:
            radial-gradient(circle at 88% 8%, rgba(0, 183, 195, 0.55), transparent 42%),
            radial-gradient(circle at 8% 95%, rgba(43, 136, 216, 0.65), transparent 48%),
            var(--brand-gradient);
    }

    .auth-mobile-hero {
        position: relative;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 44px 0 28px;
        color: #ffffff;
        text-align: center;
    }

    .auth-mobile-hero .mud-typography {
        color: rgba(255, 255, 255, 0.9);
    }

    .auth-card {
        position: relative;
        padding: 28px 22px !important;
        box-shadow: 0 16px 40px -12px rgba(10, 46, 77, 0.35) !important;
    }

    .auth-mobile-back {
        position: relative;
        display: inline-flex !important;
        margin-top: 16px !important;
    }
}

@media (max-width: 359.98px) {
    .auth-name-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ---- Dashboard ---- */

.dash-hero {
    padding: 1rem 1rem;
    color: #fff;
    background: var(--mud-palette-primary);
}

.hero-title {
    color: #fff;
}

.hero-subtitle {
    color: rgba(255, 255, 255, .85);
    max-width: 40rem;
}

.stat-card {
    border-radius: 12px !important;
    padding: .9rem 1.1rem !important;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(16, 16, 32, 0.14) !important;
}

.roadmap-card {
    border-radius: 12px !important;
    padding: 1.1rem 1.25rem !important;
}

/* Nudges the row up to line up with the drawer's group titles (Mud's own padding sits it lower). */
.page-breadcrumbs {
    margin-top: -6px;
}

.page-breadcrumbs .mud-breadcrumb-item {
    font-size: .8rem;
}

.page-breadcrumbs a.mud-breadcrumb-item {
    color: var(--mud-palette-text-secondary);
}

.page-breadcrumbs a.mud-breadcrumb-item:hover {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.page-breadcrumbs .mud-breadcrumb-separator {
    color: var(--mud-palette-text-disabled);
}

.page-breadcrumbs .mud-breadcrumb-item:last-child {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

/* ---- App shell chrome (authenticated top bar + sidebar) ---- */

.app-bar-elevated {
    box-shadow: 0 1px 2px rgba(16, 16, 32, 0.03), 0 8px 24px -12px rgba(16, 16, 32, 0.10) !important;
    backdrop-filter: saturate(1.4) blur(6px);
}

/* Desktop rail only - on .nav-drawer-mobile this clips the Temporary overlay's open/close transform. */
.nav-drawer,
.nav-drawer .mud-drawer-content,
.nav-drawer .mud-navmenu {
    overflow-x: hidden;
}

/* padding-left tightened so top-level icons line up with the AppBar hamburger icon. */
.nav-drawer .mud-nav-link,
.nav-drawer-mobile .mud-nav-link {
    border-radius: 10px;
    margin: 2px 8px;
    padding-left: 6px;
    transition: background-color .12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-drawer .mud-nav-group .mud-nav-link,
.nav-drawer-mobile .mud-nav-group .mud-nav-link {
    margin-left: 8px;
    margin-right: 8px;
}

.nav-drawer .mud-nav-link.active,
.nav-drawer-mobile .mud-nav-link.active {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.nav-drawer .mud-nav-group-title,
.nav-drawer-mobile .mud-nav-group-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: none;
    opacity: .55;
    padding-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini variant doesn't auto-hide the group title text like it does for links - hide it ourselves. */
.nav-drawer-collapsed .mud-nav-group-title-text,
.nav-drawer-collapsed .mud-nav-group .mud-nav-group-title > span:not(.mud-icon-root):not(.mud-nav-link-icon) {
    display: none;
}

/* Expand chevron gets clipped to a faint sliver in the icon-only rail - just hide it. */
.nav-drawer-collapsed .mud-nav-link-expand-icon {
    display: none;
}

.nav-drawer-collapsed .mud-nav-group,
.nav-drawer-collapsed .mud-nav-group .mud-collapse-container {
    overflow: hidden;
}

/* Hide nested item text - only the icon shows in the icon-only rail. */
.nav-drawer-collapsed .mud-nav-item-text {
    display: none;
}

/* Fixed icon-sized box, centered in the rail, for both the group icon and nested item icons - a
   hover/active pill that just wraps the icon instead of stretching across the whole row. */
.nav-drawer-collapsed .mud-nav-group .mud-nav-item .mud-nav-link,
.nav-drawer-collapsed .mud-navmenu > .mud-nav-group > .mud-nav-link,
.nav-drawer-collapsed .mud-nav-group-title {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* User dashboard sidebar - same rounded-pill active/hover language as the admin .nav-drawer
   above, adapted for a standalone MudNavMenu inside a MudPaper card rather than a fixed rail. */
.user-dashboard-nav .mud-nav-link {
    border-radius: 8px;
    margin: 2px 4px;
    padding: 8px 12px;
    transition: background-color .12s ease, color .12s ease;
}

.user-dashboard-nav .mud-nav-link:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.user-dashboard-nav .mud-nav-link.active {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.user-dashboard-nav .mud-nav-link .mud-icon-root {
    opacity: .7;
}

.user-dashboard-nav .mud-nav-link.active .mud-icon-root {
    opacity: 1;
}

/* Dashboard quick-action cards - a subtle lift + shadow on hover, matching the modern-card feel
   the sidebar's rounded-pill nav already has. */
.dashboard-action-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dashboard-action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--mud-palette-primary);
}

.page-shell {
    animation: page-fade-in .2s ease;
}

@media (max-width: 959.98px) {
    .page-shell {
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom)) !important;
    }

    .page-shell .page-breadcrumbs {
        margin-top: 0;
        margin-bottom: 4px !important;
    }
}

@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Shrinks MudFileUpload's built-in drag-and-drop area (CoverImagePicker, service gallery) -
   Mud's own default height is oversized for a small sidebar/tile upload widget. */
.mud-file-upload-dragarea {
    height: 96px;
}

/* ---- Marketing ---- */

.marketing-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 26rem;
}

.marketing-search-wrap svg {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    opacity: .55;
    pointer-events: none;
}

.marketing-search-wrap.no-icon .marketing-search-input {
    padding-left: 14px;
}

.marketing-search-input {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #E5E5F0);
    background: transparent;
    color: var(--mud-palette-text-primary, #1E1B2E);
    padding: 0 14px 0 44px;
    font-size: .9rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.marketing-search-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.14);
}

/* Standalone plug-and-play search section (ServiceSearchSection) - its own soft band, pill
   search bar, so it reads as a distinct feature rather than an inline page-header row. */
.marketing-search-section {
    background: var(--marketing-surface-alt);
    padding: 28px 0;
}

/* Input and button merged into one bordered box - border sits on the container, not each
   child, so the button reads as attached to the input's right edge, not a separate control. */
.marketing-search-section-form {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--marketing-ink);
    border-radius: 8px;
    overflow: hidden;
    max-width: 32rem;
    margin: 0 auto;
}

.marketing-search-section-form .marketing-search-wrap {
    max-width: none;
    flex: 1;
}

.marketing-search-section-form:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.14);
}

.marketing-search-section-form .marketing-search-input {
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding-left: 44px;
}

.marketing-search-section-btn {
    border-radius: 0 !important;
    height: 40px;
    padding: 0 18px !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 400 !important;
    flex-shrink: 0;
    border: none !important;
    border-left: 1px solid var(--marketing-ink) !important;
}

/* ---- Footer newsletter input+button - flat, hairline-bordered, matches Apple's minimal
   footer form treatment (no dark chip, no coral accent). ---- */

.newsletter-input-box {
    position: relative;
}

.newsletter-input {
    width: 100%;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    border: 1px solid var(--marketing-hairline);
    color: var(--marketing-ink);
    padding: 8px 44px 8px 12px;
    font-size: 14px;
    min-height: 40px;
    outline: none;
    transition: border-color .15s ease;
}

.newsletter-input:focus {
    border-color: var(--mud-palette-primary);
}

.newsletter-input::placeholder {
    color: var(--marketing-ink-secondary);
}

/* Right corners only - it sits flush against the input's left edge, so a rounded left side would float mid-input. */
.newsletter-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: none;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--button-radius) !important;
    border-bottom-right-radius: var(--button-radius) !important;
    background: var(--mud-palette-primary) !important;
    color: #ffffff !important;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.newsletter-button:hover {
    filter: var(--button-hover-filter);
}

.newsletter-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---- Standard radius+padding for every button (--button-radius/--button-padding). MudIconButton
   excluded (circular, icon-sized), .marketing-search-section-btn excluded (flush-merged with its input). ---- */
.mud-button-root:not(.mud-icon-button):not(.marketing-search-section-btn) {
    border-radius: var(--button-radius) !important;
    padding: var(--button-padding) !important;
}

/* Same standard hover as the pill CTAs, extended to every plain button. .botton-border
   excluded - it already inverts to a solid fill on hover. */
.mud-button-root:not(.mud-icon-button):not(.botton-border):hover,
.marketing-tabs-btn:hover {
    filter: var(--button-hover-filter);
}

/* ---- Multi-step flows (StepIndicator) and booking ---- */

.step-indicator {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.step-indicator-item {
    flex: 1;
    min-width: 0;
    border-top: 3px solid var(--mud-palette-lines-default);
    padding-top: 8px;
}

.step-indicator-item.done,
.step-indicator-item.current {
    border-top-color: var(--mud-palette-primary);
}

.step-indicator-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    text-align: start;
}

button.step-indicator-button {
    cursor: pointer;
}

.step-indicator-item.current .step-indicator-button {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.step-indicator-dot {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--mud-palette-lines-default);
}

.step-indicator-item.done .step-indicator-dot,
.step-indicator-item.current .step-indicator-dot {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.step-indicator-label {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .step-indicator-item:not(.current) .step-indicator-label {
        display: none;
    }
}

.booking-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.booking-choice {
    display: grid;
    gap: 4px;
    justify-items: start;
    min-height: 44px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.booking-choice .mud-icon-root {
    color: var(--mud-palette-primary);
}

.booking-choice:hover,
.booking-choice:focus-visible {
    border-color: var(--mud-palette-primary);
}

.booking-choice.selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.18);
}

.booking-choice-title {
    font-weight: 600;
}

.booking-choice-text {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.booking-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

.booking-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Date & time step: month calendar on the left, the chosen day's times on the right; stacked on phones. */
.booking-schedule {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.booking-calendar-panel,
.booking-times-panel {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.booking-times-panel {
    min-height: 100%;
    scroll-margin-top: 72px;
}

.booking-calendar.mud-picker-static,
.booking-calendar .mud-picker-paper {
    background: transparent;
}

/* MudDatePicker lays the 42 day buttons out with flex-wrap and relies on its fixed 310px width to get 7 per row; stretched to the
   panel on phones it fit 9-11 per row, so dates drifted under the wrong weekday. A 7-column grid keeps every week aligned at any width. */
.booking-calendar .mud-picker-calendar-header-day,
.booking-calendar .mud-picker-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center;
}

.booking-calendar .mud-picker-calendar-header-day {
    max-height: none;
    margin-bottom: 4px;
}

.booking-calendar .mud-picker-calendar {
    row-gap: 4px;
}

.booking-calendar .mud-picker-calendar .mud-day {
    margin: 0;
}

.booking-times-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    text-align: center;
}

.booking-slot-period {
    display: block;
    margin: 12px 0 6px;
    font-weight: 600 !important;
    text-transform: none;
}

.booking-slot-period:first-of-type {
    margin-top: 0;
}

.booking-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.booking-slot {
    min-height: 44px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
    -webkit-tap-highlight-color: transparent;
}

.booking-slot:hover,
.booking-slot:focus-visible {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.booking-slot.selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

@media (max-width: 759.98px) {
    .booking-schedule {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .booking-calendar-panel {
        padding: 8px 0;
    }

    .booking-calendar-panel > .mud-typography {
        padding: 0 16px;
    }

    .booking-calendar,
    .booking-calendar .mud-picker-content,
    .booking-calendar .mud-picker-calendar-container {
        width: 100%;
    }

    .booking-slot-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .booking-times-hint {
        min-height: 0;
        padding: 8px 0;
    }
}

.booking-confirmed {
    text-align: center;
    padding: 32px 16px;
}

/* ---- Empty states and loading placeholders ---- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary);
}

.list-skeleton {
    display: grid;
    gap: 14px;
}

.list-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.list-skeleton-lines {
    flex: 1;
}

/* ---- Before / after comparison (BeforeAfterSlider) ---- */

.before-after {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    user-select: none;
    background: var(--mud-palette-background-gray);
}

.before-after-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after-before {
    clip-path: inset(0 calc(100% - var(--before-after-position)) 0 0);
}

.before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--before-after-position);
    width: 3px;
    margin-left: -1.5px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.before-after-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.before-after-label {
    position: absolute;
    top: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

.before-after-label-before {
    left: 10px;
}

.before-after-label-after {
    right: 10px;
}

.before-after-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.before-after:focus-within .before-after-handle::after {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
}

/* ---- Customer appointment cards with progress track ---- */

.appointment-list {
    display: grid;
    gap: 12px;
}

.appointment-card {
    padding: 16px;
    border-radius: 12px !important;
}

.appointment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.appointment-card-header .min-w-0 {
    min-width: 0;
}

.appointment-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.appointment-progress li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.appointment-progress li + li::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--mud-palette-lines-default);
}

.appointment-progress li.done + li.done::before {
    background: var(--mud-palette-primary);
}

.appointment-progress-dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.appointment-progress li.done .appointment-progress-dot {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
}

.appointment-progress-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.appointment-progress li.done .appointment-progress-label {
    color: var(--mud-palette-text-primary);
}

.appointment-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
}

/* ---- Service finder ---- */

.finder-trail {
    display: grid;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.finder-trail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
}

.finder-trail-item:hover,
.finder-trail-item:focus-visible {
    background: var(--mud-palette-background-gray);
}

.finder-trail-answer {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.finder-card {
    border-radius: 14px !important;
}

.finder-matches {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.finder-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.finder-match .min-w-0 {
    min-width: 0;
}

.finder-match-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Admin command palette ---- */

.command-palette .mud-dialog-content {
    padding-top: 16px;
}

.command-palette-results {
    display: grid;
    gap: 2px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    margin-top: 12px;
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.command-palette-item:hover,
.command-palette-item:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.command-palette-item-text {
    flex: 1;
    min-width: 0;
}

.command-palette-item-section {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* ---- Promotion strip (PromotionBanner) ---- */

.promotion-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 14px;
}

/* The home page has the full promotions section at every width, so the strip would repeat it there. */
.promotion-banner-home {
    display: none;
}

.promotion-banner-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promotion-banner-cta {
    color: inherit !important;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

/* ---- Hero secondary actions (white on the brand gradient) ---- */

.marketing-hero-secondary-cta {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.marketing-hero-secondary-cta:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ==== SaaS redesign: Fluent-style surfaces, explore tabs, phone-first navigation ==== */

.marketing-sticky-header {
    transition: transform var(--motion-fast);
}

.marketing-sticky-header.is-hidden {
    transform: translateY(-100%);
}

/* ---- Explore-by-category tabs (HomeCategoriesSection, wide screens only) ---- */

.category-explorer-band {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0, transparent 45%),
        var(--mud-palette-background-gray);
}

.category-explorer {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.category-explorer-tabs {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category-explorer-tab {
    --tone: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.category-explorer-tab:hover {
    background: color-mix(in srgb, var(--tone) 7%, var(--mud-palette-surface));
    transform: translateX(3px);
}

.category-explorer-tab:focus-visible {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.category-explorer-tab-icon {
    width: 40px;
    height: 40px;
    transition: background var(--motion-fast), color var(--motion-fast);
}

.category-explorer-tab-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.category-explorer-tab-label {
    font-weight: 700;
}

.category-explorer-tab-count {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.category-explorer-tab-chevron {
    color: var(--mud-palette-text-disabled);
    transition: transform var(--motion-fast), color var(--motion-fast);
}

.category-explorer-tab.selected {
    border-color: color-mix(in srgb, var(--tone) 35%, var(--mud-palette-lines-default));
    border-left-color: var(--tone);
    background: var(--mud-palette-surface);
    box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
    transform: none;
}

.category-explorer-tab.selected .category-explorer-tab-label {
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.category-explorer-tab.selected .category-explorer-tab-icon {
    background: var(--tone);
    color: #ffffff;
}

.category-explorer-tab.selected .category-explorer-tab-chevron {
    color: var(--tone);
    transform: translateX(3px);
}

.category-explorer-panel {
    --tone: var(--mud-palette-primary);
    border-radius: 20px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 24px 48px -32px rgba(16, 16, 32, .5);
    animation: explorer-fade 220ms ease-out;
}

@keyframes explorer-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.category-explorer-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--tone) 90%, #0b1020) 0%, color-mix(in srgb, var(--tone) 60%, #0b1020) 100%);
    color: #ffffff;
}

.category-explorer-head-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.category-explorer-head-icon .mud-icon-root {
    font-size: 30px;
}

.category-explorer-head-text {
    min-width: 0;
}

.category-explorer-head-title {
    margin: 0;
    font-family: var(--font-marketing);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.category-explorer-head-desc {
    max-width: 640px;
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.category-explorer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.category-explorer-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 700;
}

.category-explorer-fact-urgent {
    background: #D13438;
}

.category-explorer-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 28px 6px;
}

.category-explorer-empty {
    padding: 22px 28px 6px;
}

.cat-svc {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.cat-svc:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tone) 45%, var(--mud-palette-lines-default));
    box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
}

.cat-svc-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--tone) 12%, var(--mud-palette-background-gray));
    color: color-mix(in srgb, var(--tone) 75%, var(--mud-palette-text-primary));
}

.cat-svc-thumb .mud-icon-root {
    font-size: 36px;
}

.cat-svc-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.cat-svc:hover .cat-svc-thumb img {
    transform: scale(1.08);
}

.cat-svc-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cat-svc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cat-svc-badges:empty {
    display: none;
}

.cat-svc-badges .svc-badge {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    box-shadow: none;
}

.cat-svc-badge-popular {
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.cat-svc-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.cat-svc-title:hover {
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.cat-svc-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.cat-svc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.cat-svc-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 17px;
    font-weight: 800;
}

.cat-svc-price-old {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.cat-svc-cta.mud-button-root {
    min-height: 36px;
    border-radius: var(--button-radius);
    padding-left: 16px;
    padding-right: 16px;
    font-weight: 700;
    text-transform: none;
}

.category-explorer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 28px 24px;
}

.category-explorer-cta.mud-button-root {
    border-radius: var(--button-radius);
    padding-left: 22px;
    padding-right: 18px;
    background: var(--tone) !important;
    font-weight: 700;
    text-transform: none;
}

.category-explorer-assure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.category-explorer-assure .mud-icon-root {
    color: #13A10E;
}

@media (max-width: 1279.98px) {
    .category-explorer {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .category-explorer-services {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-explorer-assure {
        margin-left: 0;
    }
}

@media (hover: none) {
    .cat-svc:hover,
    .category-explorer-tab:hover {
        transform: none;
        box-shadow: none;
    }
}

.menu-profile .mud-avatar {
    background: var(--brand-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px #2B88D8;
}

.menu-profile-guest .mud-avatar {
    background: var(--mud-palette-background-gray) !important;
    color: var(--mud-palette-text-secondary) !important;
    box-shadow: none;
}

.menu-profile .min-w-0 {
    min-width: 0;
}

/* ---- Phone tab bar (MobileBottomNav) ---- */

.mobile-bottom-nav {
    display: none;
}

.mobile-only {
    display: none;
}

@media (max-width: 959.98px) {
    .mobile-only {
        display: block;
    }

    /* A MudButton marked mobile-only keeps its own inline-flex layout; "display: block" stacked its icon above the label. */
    .mud-button-root.mobile-only {
        display: inline-flex;
    }

    /* The phone app bar is 43px but its 48px icon buttons start above it, so a count badge at "top: 2px" began 1px above the window
       and was cut off under the status bar. Measured on a Galaxy Note10 through WebView devtools. */
    .marketing-app-bar .mud-badge-root .mud-badge {
        top: 8px !important;
    }

    .has-bottom-nav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1300;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 0 4px env(safe-area-inset-bottom);
        background: var(--mud-palette-appbar-background);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    }

    .mobile-bottom-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        font-size: 11px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: transparent;
        transition: background var(--motion-fast);
    }

    .mobile-bottom-nav-item.active {
        color: var(--mud-palette-primary);
    }

    .mobile-bottom-nav-item.active::before {
        background: var(--mud-palette-primary);
    }

    .mobile-bottom-nav-primary::before {
        display: none;
    }

    /* Raised, gradient booking button - the one colorful call to action in the tab bar. */
    .mobile-bottom-nav-primary-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin-top: -18px;
        border-radius: 50%;
        border: 3px solid var(--mud-palette-surface);
        background: linear-gradient(135deg, #0F6CBD 0%, #2B88D8 55%, #00B7C3 100%);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(15, 108, 189, 0.45);
    }

    .mobile-bottom-nav-item.active .mud-icon-root {
        transform: scale(1.08);
    }

    /* Photo stays visible at the top; the copy sits at the bottom over a gradient that darkens toward it. */
    .marketing-hero {
        min-height: clamp(400px, 62vh, 560px);
        align-items: flex-end;
    }

    .marketing-hero::before {
        background: linear-gradient(180deg, rgba(8, 28, 52, 0.15) 0%, rgba(8, 28, 52, 0.55) 40%, rgba(8, 28, 52, 0.94) 100%);
    }

    .marketing-hero-overlay {
        padding: 24px 0 28px;
    }

    .marketing-hero-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
    }

    .marketing-hero-subtitle {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 10px;
        font-size: 15px !important;
        line-height: 1.5 !important;
        white-space: normal;
    }

    .marketing-hero-learn-more {
        font-size: 14px;
    }

    .marketing-hero-actions {
        margin-top: 20px !important;
    }

    .marketing-hero-primary-cta {
        width: 100%;
        min-height: 48px;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* The Menu page carries the footer's social links, newsletter and fine print on phones. */
    .marketing-footer {
        display: none !important;
    }

    /* Feed rhythm: sections read as stacked cards separated by a thin canvas gap. */
    .marketing-layout-main > * + * {
        border-top: 8px solid var(--mud-palette-background-gray);
    }
}

/* Pressed feedback on touch screens - a slight scale-down instead of a hover state they cannot show. */
@media (hover: none) {
    .mud-button-root:active,
    .booking-choice:active,
    .menu-tile:active,
    .quick-start-action:active,
    .quick-start-prompt:active,
    .category-explorer-tab:active,
    .mobile-bottom-nav-item:active {
        transform: scale(0.97);
    }
}

/* ---- Phone home service rails (HomeServiceRails / ServiceRailCard) ---- */

.service-rails {
    padding: 8px 0 16px;
    background: var(--mud-palette-surface);
}

.service-rail-group + .service-rail-group {
    margin-top: 12px;
}

.service-rail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 8px;
}

.service-rail-heading {
    flex: 1;
    min-width: 0;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-rail-see-all {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
}

/* The next card peeks in from the right edge, which is what tells people the row scrolls sideways. */
.service-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding: 4px 16px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.service-rail::-webkit-scrollbar {
    display: none;
}

.service-rail-item,
.service-rail > .service-rail-card {
    flex: 0 0 68%;
    max-width: 260px;
    scroll-snap-align: start;
}

.service-rail-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.service-rail-image {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-disabled);
}

.service-rail-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-rail-placeholder {
    font-size: 2.5rem !important;
}

.service-rail-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #C50F1F;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.service-rail-badge-emergency {
    background: #0F6CBD;
}

.service-rail-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 10px 12px 12px;
}

.service-rail-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.service-rail-price {
    font-weight: 700;
}

.service-rail-body .mud-button-root {
    margin-top: auto !important;
}

.service-rail-price-old {
    margin-left: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
}

/* ---- Phone services list (/services) ---- */

/* ---- Home promotions as coupon tickets (HomePromotionsSection) ---- */

.promos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}

.promo {
    --tone: var(--mud-palette-primary);
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    border: 1px solid color-mix(in srgb, var(--tone) 25%, var(--mud-palette-lines-default));
    border-radius: 18px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
}

.promo-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    border-right: 2px dashed rgba(255, 255, 255, .55);
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 85%, #ffffff) 0%, var(--tone) 100%);
    color: #ffffff;
}

.promo-stub::before,
.promo-stub::after {
    content: "";
    position: absolute;
    right: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mud-palette-background);
}

.promo-stub::before {
    top: -11px;
}

.promo-stub::after {
    bottom: -11px;
}

.promo-stub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.promo-stub-icon .mud-icon-root {
    font-size: 26px;
}

.promo-stub-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.promo-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px 20px;
}

.promo-expiry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 12%, transparent);
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
    font-size: 12px;
    font-weight: 800;
}

.promo-expiry.urgent {
    background: #D13438;
    color: #ffffff;
}

.promo-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.promo-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.promo-actions {
    margin-top: auto;
    padding-top: 8px;
}

@media (hover: none) {
    .promo:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 599.98px) {
    .promos {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 4px 16px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }

    .promos::-webkit-scrollbar {
        display: none;
    }

    .promo {
        flex: 0 0 88%;
        grid-template-columns: 72px minmax(0, 1fr);
        scroll-snap-align: start;
    }

    .promos-single .promo {
        flex-basis: 100%;
    }

    .promo-stub-icon {
        width: 40px;
        height: 40px;
    }

    .promo-stub-icon .mud-icon-root {
        font-size: 22px;
    }

    .promo-body {
        padding: 14px 14px 16px;
    }

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

    .promo-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13.5px;
    }

    .promo-cta.mud-button-root {
        width: 100%;
    }

    .promo-actions {
        align-self: stretch;
    }
}

/* ---- Footer brand block (MarketingFooter): logo and about, then one list where phone, email, hours, address and socials share
   the same row: tinted icon, small label, value. ---- */

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand-desc {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
}

.footer-reach {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-reach-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 8px;
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background var(--motion-fast);
}

a.footer-reach-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

a.footer-reach-item:hover .footer-reach-value {
    color: var(--mud-palette-primary);
}

.footer-reach-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.footer-reach-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.35;
}

.footer-reach-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
}

.footer-reach-value {
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: color var(--motion-fast);
}

.footer-reach-social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.footer-reach-social-link {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.footer-reach-social-link:hover {
    background: var(--mud-palette-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 1279.98px) {
    .footer-brand {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 24px;
        padding: 20px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 18px;
        background: var(--mud-palette-surface);
    }

    .footer-reach {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 4px 12px;
    }
}

@media (max-width: 759.98px) {
    .footer-brand {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (hover: none) {
    .footer-reach-social-link:hover {
        transform: none;
    }
}

/* Social links in their platforms' own colors (SocialBrand): --brand for the icon, --brand-fill for a filled look (Instagram's
   gradient). .social-brand-filled (Menu) is always filled; in the footer the icon is brand-colored and fills on hover. */
.social-brand {
    --brand: var(--mud-palette-primary);
    --brand-fill: var(--brand);
}

.brand-instagram { --brand: #E4405F; --brand-fill: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.brand-facebook { --brand: #1877F2; }
.brand-youtube { --brand: #FF0000; }
.brand-linkedin { --brand: #0A66C2; }
.brand-tiktok { --brand: #000000; --brand-fill: linear-gradient(135deg, #25F4EE 0%, #000000 40%, #000000 60%, #FE2C55 100%); }
.brand-pinterest { --brand: #E60023; }
.brand-whatsapp { --brand: #25D366; }
.brand-yelp { --brand: #D32323; }
.brand-nextdoor { --brand: #1B8751; }
.brand-google { --brand: #4285F4; }
.brand-x { --brand: #000000; }
.brand-threads { --brand: #000000; }

.footer-reach-social-link.social-brand {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 30%, var(--mud-palette-lines-default));
}

.footer-reach-social-link.social-brand:hover {
    background: var(--brand-fill);
    border-color: transparent;
    color: #ffffff;
}

.tone-bubble.social-brand-filled {
    background: var(--brand-fill);
    color: #ffffff;
}

.brand-x.social-brand,
.brand-threads.social-brand,
.brand-tiktok.social-brand {
    --brand: var(--mud-palette-text-primary);
}

.brand-x.social-brand,
.brand-threads.social-brand {
    --brand-fill: #000000;
}

/* ---- Gallery page: counted category pills, mixed-size photo grid, in-page viewer ---- */

.gallery-chips {
    justify-content: center;
}

.gallery-chip-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    font-size: 11.5px;
    font-weight: 800;
}

.svc-chip.active .gallery-chip-count {
    background: rgba(255, 255, 255, .25);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 14px;
}

.gallery-tile {
    --tone: var(--mud-palette-primary);
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    cursor: zoom-in;
    font: inherit;
    text-align: left;
}

.gallery-tile-tall {
    grid-row: span 2;
}

.gallery-tile-wide {
    grid-column: span 2;
}

.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .3s ease;
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
    transform: scale(1.07);
}

.gallery-tile:focus-visible {
    outline: 3px solid var(--tone);
    outline-offset: 3px;
}

.gallery-tile-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--mud-palette-text-disabled);
}

.gallery-tile-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 40px 14px 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 16, .82) 100%);
    color: #ffffff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}

.gallery-tile:hover .gallery-tile-overlay,
.gallery-tile:focus-visible .gallery-tile-overlay {
    opacity: 1;
    transform: none;
}

.gallery-tile-category {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--tone);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
}

.gallery-tile-caption {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.gallery-tile-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(4, 8, 16, .55);
    color: #ffffff;
    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-tile:hover .gallery-tile-zoom,
.gallery-tile:focus-visible .gallery-tile-zoom {
    opacity: 1;
}

.gallery-cta {
    margin-top: 32px;
}

.gallery-viewer {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 72px 32px;
    outline: none;
    animation: gallery-fade .2s ease-out;
}

@keyframes gallery-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gallery-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 16, .92);
}

.gallery-viewer-top {
    position: absolute;
    top: 12px;
    left: 16px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.gallery-viewer-count {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

.gallery-viewer-figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.gallery-viewer-figure img {
    max-width: 100%;
    max-height: calc(100vh - 170px);
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}

.gallery-viewer-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 720px;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    text-align: center;
}

.gallery-viewer-caption .gallery-tile-category {
    background: rgba(255, 255, 255, .18);
}

.gallery-viewer-btn.mud-icon-button {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
}

.gallery-viewer-btn.mud-icon-button:hover {
    background: rgba(255, 255, 255, .24);
}

.gallery-viewer-prev,
.gallery-viewer-next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}

.gallery-viewer-prev {
    left: 12px;
}

.gallery-viewer-next {
    right: 12px;
}

@media (hover: none) {
    .gallery-tile-overlay {
        opacity: 1;
        transform: none;
    }

    .gallery-tile-zoom {
        display: none;
    }

    .gallery-tile:hover img {
        transform: none;
    }
}

@media (max-width: 959.98px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 180px;
        gap: 10px;
    }

    .gallery-chips {
        justify-content: flex-start;
    }
}

@media (max-width: 599.98px) {
    .gallery-grid {
        grid-auto-rows: 150px;
        gap: 8px;
    }

    .gallery-tile {
        border-radius: 12px;
    }

    .gallery-tile-wide {
        grid-column: span 2;
    }

    .gallery-tile-overlay {
        padding: 28px 10px 10px;
    }

    .gallery-tile-caption {
        font-size: 12.5px;
    }

    .gallery-tile-category {
        height: 20px;
        font-size: 10.5px;
    }

    .gallery-viewer {
        padding: 56px 8px 24px;
    }

    .gallery-viewer-prev,
    .gallery-viewer-next {
        top: auto;
        bottom: 16px;
        transform: none;
    }

    .gallery-viewer-figure img {
        max-height: calc(100vh - 200px);
    }

    .gallery-viewer-caption {
        padding: 0 60px;
        font-size: 13.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-tile img,
    .gallery-tile-overlay,
    .gallery-viewer {
        transition: none;
        animation: none;
    }
}

/* ---- Partner cards (HomePartnershipSection on About) ---- */

.partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.partner {
    --tone: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.partner:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tone) 40%, var(--mud-palette-lines-default));
    box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
}

.partner-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 25%, var(--mud-palette-surface)), color-mix(in srgb, var(--tone) 55%, var(--mud-palette-surface)));
}

.partner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.partner:hover .partner-photo img {
    transform: scale(1.05);
}

.partner-initials {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-family: var(--font-marketing);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: .02em;
}

.partner-company {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(4, 8, 16, .65);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partner-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
}

.partner-name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.partner-role {
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.partner-desc {
    display: -webkit-box;
    margin: 4px 0 0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.partner-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.partner-social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.partner-website {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.partner-website:hover {
    text-decoration: underline;
}

@media (hover: none) {
    .partner:hover {
        transform: none;
        box-shadow: none;
    }

    .partner:hover .partner-photo img {
        transform: none;
    }
}

@media (max-width: 599.98px) {
    .partners {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 4px 16px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }

    .partners::-webkit-scrollbar {
        display: none;
    }

    .partner {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    .partners-single .partner {
        flex-basis: 100%;
    }

    .partner-name {
        font-size: 16px;
    }
}

/* ---- Membership: member vs pay-as-you-go table ---- */

.vs {
    max-width: 920px;
    margin: 0 auto;
}

.vs-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    transition: background var(--motion-fast);
}

.vs-row > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
}

.vs-row:not(.vs-head):hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.vs-row:not(.vs-head) + .vs-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.vs-head > span {
    font-size: 15px;
    font-weight: 800;
}

.vs-feature-head {
    color: var(--mud-palette-text-secondary);
}

.vs-feature {
    font-weight: 700;
}

.vs-guest {
    color: var(--mud-palette-text-secondary);
}

.vs-guest .mud-icon-root {
    color: var(--mud-palette-text-disabled);
}

.vs-member {
    position: relative;
    background: color-mix(in srgb, #FFC83D 10%, var(--mud-palette-surface));
    border-left: 2px solid #FFC83D;
    border-right: 2px solid #FFC83D;
    font-weight: 700;
}

.vs-member .mud-icon-root {
    color: #13A10E;
}

.vs-head .vs-member {
    border-top: 2px solid #FFC83D;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
}

.vs-head .vs-member .mud-icon-root {
    color: #2B1A00;
}

.vs-row:last-child .vs-member {
    border-bottom: 2px solid #FFC83D;
    border-radius: 0 0 16px 16px;
}

.vs-ribbon {
    position: absolute;
    top: -12px;
    right: 14px;
    padding: 3px 10px !important;
    border-radius: 999px;
    background: #D13438;
    color: #ffffff;
    font-size: 11px !important;
    font-weight: 800;
    text-transform: none;
}

.membership-how-action {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

@media (max-width: 599.98px) {
    .vs-head {
        display: none;
    }

    .vs-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-bottom: 10px;
        border: 1px solid var(--mud-palette-lines-default) !important;
        border-radius: 14px;
        overflow: hidden;
        background: var(--mud-palette-surface);
    }

    .vs-row > span {
        padding: 10px 12px;
    }

    .vs-row > .vs-feature {
        grid-column: 1 / -1;
        padding-bottom: 4px;
    }

    .vs-row > [role="cell"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 13.5px;
    }

    .vs-row > [role="cell"]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: none;
        color: var(--mud-palette-text-secondary);
    }

    .vs-row > [role="cell"] .mud-icon-root {
        display: none;
    }

    .vs-member,
    .vs-row:last-child .vs-member {
        border: 0;
        border-left: 3px solid #FFC83D;
        border-radius: 0;
    }

    .membership-how-action .mud-button-root {
        width: 100%;
    }
}

/* ---- Marketing nav account menu (MarketingAccountMenu) ---- */

.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.account-trigger:hover,
.account-trigger:focus-visible {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 16px -10px rgba(16, 16, 32, .45);
}

.account-avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-gradient, var(--mud-palette-primary));
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}

.account-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 17px;
    box-shadow: 0 0 0 3px var(--mud-palette-surface), 0 0 0 5px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.account-trigger-name {
    max-width: 120px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-trigger-chevron {
    color: var(--mud-palette-text-secondary);
}

.account-menu-popover {
    min-width: 290px;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 24px 48px -20px rgba(16, 16, 32, .45) !important;
}

.account-menu-popover .mud-list {
    padding: 0 0 6px;
}

.account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 100%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.account-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-card-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.account-card-email {
    overflow: hidden;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #C239B3 14%, transparent);
    color: #9B2C8F;
    font-size: 11.5px;
    font-weight: 800;
}

.account-links {
    padding: 6px 0;
}

.account-link.mud-list-item {
    min-height: 44px;
    padding: 6px 18px;
}

.account-link .mud-list-item-text,
.account-link .mud-menu-item-text {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 600;
}

.account-link-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.account-signout {
    margin-top: 4px;
    color: var(--mud-palette-error);
}

/* Home section intro (SectionHeading): eyebrow, title and lead, centered and the same size in every section. */
.section-heading {
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: center;
}

.section-heading-lead {
    margin-top: 4px !important;
}

@media (max-width: 959.98px) {
    .section-heading {
        margin-bottom: 16px;
    }

    .section-heading-lead {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---- Service catalog cards (ServiceListCard) and the Services page pills/grid ---- */

.svc-action.mud-button-root {
    border-radius: var(--button-radius);
    font-weight: 700;
    text-transform: none;
}

.svc-card {
    --tone: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--tone);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.svc-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tone) 45%, var(--mud-palette-lines-default));
    border-top-color: var(--tone);
    box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--tone) 70%, rgba(16, 16, 32, .6));
}

.svc-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in srgb, var(--tone) 12%, var(--mud-palette-background-gray));
}

.svc-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.svc-card:hover .svc-card-media img {
    transform: scale(1.06);
}

.svc-card-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--tone) 70%, var(--mud-palette-text-primary));
}

.svc-card-placeholder .mud-icon-root {
    font-size: 48px;
}

.svc-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 12px -4px rgba(16, 16, 32, .45);
}

.svc-badge .mud-icon-root {
    font-size: 16px;
}

.svc-badge-emergency {
    background: #D13438;
    color: #ffffff;
}

.svc-badge-deal {
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
}

.svc-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px 16px;
}

.svc-card-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 12%, transparent);
    color: color-mix(in srgb, var(--tone) 80%, var(--mud-palette-text-primary));
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.svc-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tone);
}

.svc-card-title {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.svc-card-title a {
    color: inherit;
    text-decoration: none;
}

.svc-card-title a:hover {
    color: color-mix(in srgb, var(--tone) 80%, var(--mud-palette-text-primary));
}

.svc-card-desc {
    display: -webkit-box;
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.svc-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.svc-card-price-now {
    font-size: 20px;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.svc-card-price-old {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.svc-card-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.svc-card-kind .mud-icon-root {
    color: var(--tone);
}

.svc-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.svc-card-actions > form,
.svc-card-actions > .mud-button-root {
    flex: 1;
    min-width: 0;
}

.svc-card-cta.mud-button-root {
    min-height: 42px;
    border-radius: var(--button-radius);
    font-weight: 700;
    text-transform: none;
}

.svc-card-details {
    flex-shrink: 0;
    padding: 8px 4px;
    color: color-mix(in srgb, var(--tone) 80%, var(--mud-palette-text-primary));
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.svc-card-details:hover {
    text-decoration: underline;
}

.svc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.svc-chip {
    --tone: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px 0 12px;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--mud-palette-lines-default));
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.svc-chip .mud-icon-root {
    color: var(--tone);
}

.svc-chip:hover {
    border-color: var(--tone);
    background: color-mix(in srgb, var(--tone) 8%, var(--mud-palette-surface));
}

.svc-chip.active {
    border-color: var(--tone);
    background: var(--tone);
    color: #ffffff;
}

.svc-chip.active .mud-icon-root {
    color: #ffffff;
}

.svc-chip:active {
    transform: scale(.97);
}

.svc-results-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.svc-results-count {
    font-size: 18px;
    font-weight: 800;
}

.svc-results-context {
    color: var(--mud-palette-text-secondary);
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.svc-empty {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

@media (hover: none) {
    .svc-card:hover {
        transform: none;
        box-shadow: none;
    }

    .svc-card:hover .svc-card-media img {
        transform: none;
    }
}

@media (max-width: 959.98px) {
    .svc-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px 14px;
        padding: 2px 16px 6px;
        scrollbar-width: none;
    }

    .svc-chips::-webkit-scrollbar {
        display: none;
    }

    .svc-chip {
        flex-shrink: 0;
    }
}

@media (max-width: 599.98px) {
    .svc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .svc-grid .svc-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        border-top-width: 1px;
        border-left: 4px solid var(--tone);
        border-radius: 14px;
    }

    .svc-grid .svc-card-media {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .svc-grid .svc-card-badges {
        top: 6px;
        left: 6px;
        flex-direction: column;
        gap: 4px;
    }

    .svc-grid .svc-badge {
        height: 22px;
        padding: 0 7px;
        font-size: 11px;
    }

    .svc-grid .svc-card-body {
        gap: 4px;
        padding: 10px 12px 12px;
    }

    .svc-grid .svc-card-title {
        font-size: 15px;
    }

    .svc-grid .svc-card-desc {
        font-size: 13px;
    }

    .svc-grid .svc-card-price-now {
        font-size: 17px;
    }

    .svc-grid .svc-card-kind {
        display: none;
    }

    .svc-grid .svc-card-actions {
        margin-top: 6px;
    }

    .svc-grid .svc-card-cta.mud-button-root {
        min-height: 38px;
    }

    .svc-empty {
        flex-direction: column;
    }
}

/* ---- Checkout: numbered address/payment cards beside a sticky order summary; phones get a collapsible summary on top and
   the total + next action in a bar above the tab bar ---- */

.checkout-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.checkout-top .step-indicator {
    align-self: stretch;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.checkout-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, #13A10E 12%, transparent);
    color: #0E7A0A;
    font-size: 13px;
    font-weight: 800;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.checkout-card {
    padding: 22px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
}

.checkout-card-pending {
    opacity: .7;
}

.checkout-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.checkout-card-step {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.checkout-address-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

.checkout-address-row + .checkout-address-row {
    margin-top: 10px;
}

.checkout-address-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.checkout-address-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.checkout-address-name {
    font-size: 15px;
    font-weight: 800;
}

.checkout-address-line {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.checkout-add-link,
.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: var(--mud-palette-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.checkout-add-link:hover,
.checkout-back-link:hover {
    text-decoration: underline;
}

.checkout-empty-address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.checkout-secure-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.checkout-summary {
    position: sticky;
    top: 96px;
}

.checkout-cta.mud-button-root {
    min-height: 52px;
}

.checkout-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 24px auto;
    padding: 36px 24px;
    border: 1px solid color-mix(in srgb, #13A10E 35%, var(--mud-palette-lines-default));
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, #13A10E 10%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 60%);
    text-align: center;
}

.checkout-done-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #13A10E;
    color: #ffffff;
    box-shadow: 0 0 0 8px color-mix(in srgb, #13A10E 18%, transparent);
    animation: checkout-pop .45s cubic-bezier(.2, .9, .3, 1.4);
}

.checkout-done-icon .mud-icon-root {
    font-size: 40px;
}

@keyframes checkout-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.checkout-done-number {
    margin-top: 4px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    font-weight: 800;
    letter-spacing: .02em;
}

.checkout-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.checkout-mini-summary {
    margin-bottom: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.checkout-mini-summary summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
    font-weight: 700;
}

.checkout-mini-summary summary::-webkit-details-marker {
    display: none;
}

.checkout-mini-label {
    flex: 1;
    color: var(--mud-palette-primary);
    font-size: 14px;
}

.checkout-mini-total {
    font-size: 16px;
    font-weight: 800;
}

.checkout-mini-chevron {
    transition: transform var(--motion-fast);
}

.checkout-mini-summary[open] .checkout-mini-chevron {
    transform: rotate(180deg);
}

.checkout-mini-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.checkout-mobile-total {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    line-height: 1.2;
}

.checkout-mobile-total span {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.checkout-mobile-total strong {
    font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-done-icon {
        animation: none;
    }
}

@media (max-width: 959.98px) {
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 84px;
    }

    .checkout-card {
        padding: 16px;
    }

    .checkout-mobile-bar.mobile-only {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 1250;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    .checkout-mobile-bar .mud-button-root {
        flex: 1;
    }
}

/* ---- Cart: one card per item at every width; order summary beside the list (sticky) on wide screens ---- */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.cart-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.cart-head-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 800;
}

.cart-head-continue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--mud-palette-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.cart-head-continue:hover {
    text-decoration: underline;
}

.cart-item-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.cart-item-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    box-shadow: 0 14px 28px -24px rgba(16, 16, 32, .55);
}

.cart-item-blocked {
    border-color: color-mix(in srgb, #DA7B0B 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #DA7B0B 5%, var(--mud-palette-surface));
}

.cart-item-card + .cart-item-card {
    margin-top: 12px;
}

.cart-item-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-disabled);
}

.cart-item-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cart-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}

.cart-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.cart-item-title:hover {
    color: var(--mud-palette-primary);
}

.cart-item-top .mud-icon-button {
    margin: -4px -8px 0 0;
}

.cart-item-meta {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
}

.cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.cart-qty-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--motion-fast);
}

.cart-qty-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.cart-qty-button:disabled {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

.cart-qty-value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
}

.cart-item-total {
    font-size: 18px;
    font-weight: 800;
}

.cart-summary-sticky {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-summary-card {
    border-radius: 18px !important;
    box-shadow: 0 20px 40px -32px rgba(16, 16, 32, .5);
}

.cart-checkout-button.mud-button-root.mud-button-root,
.cart-continue-button.mud-button-root.mud-button-root {
    min-height: 50px;
    padding: 0 24px !important;
    border-radius: var(--button-radius) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none;
}

.cart-continue-button.mud-button-outlined.mud-button-root {
    border: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.cart-assurance {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 4px;
    list-style: none;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.cart-assurance li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-assurance .mud-icon-root {
    color: #13A10E;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    margin: 24px auto;
    padding: 36px 24px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 20px;
    background: var(--mud-palette-surface);
    text-align: center;
}

.cart-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.cart-empty-actions .mud-button-root.mud-button-root {
    min-width: 190px;
    min-height: 46px;
    padding: 0 24px !important;
    border-radius: var(--button-radius) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none;
    justify-content: center;
}

.cart-empty-actions .mud-button-outlined.mud-button-root {
    border: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
}

.cart-empty-actions .mud-button-outlined.mud-button-root:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

@media (max-width: 599.98px) {
    .cart-empty {
        margin: 8px auto 16px;
        padding: 28px 18px;
        border-radius: 18px;
    }

    .cart-empty-actions {
        flex-direction: column;
        align-self: stretch;
        margin-top: 14px;
    }

    .cart-empty-actions .mud-button-root.mud-button-root {
        width: 100%;
    }
}

@media (hover: none) {
    .cart-item-card:hover {
        box-shadow: none;
    }
}

@media (max-width: 959.98px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cart-summary-sticky {
        position: static;
    }

    .cart-continue-button {
        min-height: 44px;
    }
}

@media (max-width: 599.98px) {
    .cart-item-card {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .cart-item-thumb {
        width: 80px;
        height: 80px;
    }

    .cart-item-title {
        font-size: 15px;
    }

    .cart-item-total {
        font-size: 16px;
    }
}

/* ---- My orders: summary, search + payment filters, one card per order (row on wide screens) ---- */

.orders-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.orders-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
}

.orders-stat-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.orders-stat-label {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.orders-stat-alert {
    border-color: color-mix(in srgb, #DA7B0B 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #DA7B0B 8%, var(--mud-palette-surface));
    cursor: pointer;
}

.orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.orders-search {
    flex: 1 1 260px;
    max-width: 380px;
}

.orders-filters {
    margin: 0;
}

.order-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-card {
    --tone: var(--mud-palette-primary);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--tone);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.order-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tone) 45%, var(--mud-palette-lines-default));
    border-left-color: var(--tone);
    box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--tone) 80%, rgba(16, 16, 32, .5));
}

.order-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

.order-card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.order-card-number {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-card-date {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.order-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.order-card-total {
    min-width: 90px;
    font-size: 17px;
    font-weight: 800;
    text-align: right;
}

.order-card-chevron {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    transition: transform var(--motion-fast), color var(--motion-fast);
}

.order-card:hover .order-card-chevron {
    color: var(--tone);
    transform: translateX(2px);
}

@media (hover: none) {
    .order-card:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 599.98px) {
    .orders-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px;
    }

    .orders-stat-value {
        font-size: 18px;
    }

    .orders-search {
        max-width: none;
    }

    .order-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "icon main total"
            "icon badges chevron";
        gap: 4px 12px;
        padding: 12px;
    }

    .order-card-icon {
        grid-area: icon;
        align-self: start;
        width: 38px;
        height: 38px;
    }

    .order-card-main {
        grid-area: main;
    }

    .order-card-badges {
        grid-area: badges;
        justify-content: flex-start;
    }

    .order-card-total {
        grid-area: total;
        min-width: 0;
        font-size: 16px;
    }

    .order-card-chevron {
        grid-area: chevron;
        justify-self: end;
    }
}

/* ---- Order detail: header card with progress + actions, items and addresses beside a sticky summary ---- */

.order-detail-backlink {
    margin: 0 0 12px;
}

.order-hero {
    --tone: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--mud-palette-lines-default));
    border-left: 5px solid var(--tone);
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 9%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 70%);
}

.order-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.order-hero-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.order-hero-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

.order-hero-number {
    font-family: var(--font-marketing);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-hero-date {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.order-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-progress li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.order-progress li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 3px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
}

.order-progress li.done:not(:last-child)::after {
    background: var(--tone);
}

.order-progress-dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 3px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: #ffffff;
}

.order-progress li.done {
    color: var(--mud-palette-text-primary);
}

.order-progress li.done .order-progress-dot {
    border-color: var(--tone);
    background: var(--tone);
}

.order-progress li.current .order-progress-dot {
    border-color: var(--tone);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 20%, transparent);
}

.order-progress li.current {
    color: color-mix(in srgb, var(--tone) 85%, var(--mud-palette-text-primary));
}

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

.order-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.order-detail-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.order-item-card:hover {
    box-shadow: none;
}

.order-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.order-address-grid .checkout-address-row + .checkout-address-row {
    margin-top: 0;
}

.order-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
}

.order-totals li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.order-totals-total {
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 18px;
    font-weight: 800;
}

@media (max-width: 959.98px) {
    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .checkout-summary {
        position: static;
    }
}

@media (max-width: 599.98px) {
    .order-hero {
        gap: 14px;
        padding: 16px;
    }

    .order-hero-top {
        align-items: flex-start;
        gap: 12px;
    }

    .order-hero-number {
        font-size: 19px;
    }

    .order-hero-top .order-card-badges {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .order-hero-actions .mud-button-root {
        width: 100%;
    }

    .order-progress li {
        font-size: 12px;
    }
}

/* ---- Service detail: phone layout and sticky Add to cart / Book bar ---- */

.service-detail-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.service-detail-ask {
    color: var(--mud-palette-primary);
    font-weight: 600;
    cursor: pointer;
}

.service-detail-ask:hover {
    text-decoration: underline;
}

.service-detail-mobile-bar {
    display: none;
}

@media (max-width: 959.98px) {
    .service-detail-image {
        width: 100%;
        height: auto !important;
        aspect-ratio: 4 / 3;
        border-radius: 12px !important;
    }

    .service-gallery-strip {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .service-gallery-strip::-webkit-scrollbar {
        display: none;
    }

    .service-gallery-strip > .mud-grid-item {
        flex: 0 0 84px !important;
        max-width: 84px !important;
    }

    .service-gallery-thumb {
        width: 100%;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    .service-detail-title {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    .marketing-tabs-nav {
        align-items: stretch;
    }

    .marketing-tabs-nav .marketing-tabs-btn {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        text-align: center;
    }

    .service-detail-related-heading {
        margin-top: 32px !important;
        margin-bottom: 8px !important;
    }

    .service-detail-related-rail {
        margin: 0 -16px;
    }

    .service-detail-grid {
        margin-bottom: 8px !important;
    }

    .marketing-section-tight:has(> .service-detail-mobile-bar) {
        padding-bottom: 84px;
    }

    .service-detail-mobile-bar.mobile-only {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 1250;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    .service-detail-mobile-cart,
    .service-detail-mobile-book {
        flex: 1;
        min-width: 0;
    }

    .service-detail-bar-button {
        min-height: 44px;
        font-weight: 600 !important;
    }
}

/* ---- Dashboard header card (DashboardUpperInfo) ---- */

.dashboard-upper-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px !important;
}

.dashboard-upper-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dashboard-upper-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px #2B88D8;
}

.dashboard-upper-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.dashboard-upper-greeting {
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dashboard-upper-join {
    color: var(--mud-palette-text-secondary) !important;
}

.dashboard-upper-join strong {
    color: var(--mud-palette-primary);
}

.dashboard-upper-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-upper-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--motion-fast), background var(--motion-fast);
    -webkit-tap-highlight-color: transparent;
}

.dashboard-upper-action:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.dashboard-upper-cart {
    position: relative;
}

.dashboard-upper-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

/* Phones: identity on top, then the three shortcuts as equal icon-over-label tiles (Facebook-style shortcut row). */
@media (max-width: 959.98px) {
    .dashboard-upper-info {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px;
    }

    .dashboard-upper-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .dashboard-upper-action {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-height: 72px;
        padding: 10px 4px;
        border-radius: 12px;
        border-color: transparent;
        background: var(--mud-palette-background-gray);
        font-size: 13px;
    }

    .dashboard-upper-action .tone-bubble-sm {
        width: 36px;
        height: 36px;
    }
}

/* ---- Pull-to-refresh indicator (native app; see comfortProLiveUpdates in marketing.js) ---- */

.pull-refresh-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 64px);
    left: 50%;
    z-index: 1400;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    box-shadow: var(--elevation-8);
    opacity: 0;
    transform: translate(-50%, -48px);
    transition: opacity var(--motion-fast);
    pointer-events: none;
}

.pull-refresh-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-top-color: var(--mud-palette-primary);
}

.pull-refresh-indicator.ready .pull-refresh-spinner {
    border-color: var(--mud-palette-primary);
    border-top-color: transparent;
}

.pull-refresh-indicator.refreshing .pull-refresh-spinner {
    animation: pull-refresh-spin 0.8s linear infinite;
}

@keyframes pull-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Notification bell, dropdown panel and /notifications page ---- */

.notification-bell-phone {
    display: none;
}

.header-badge .mud-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
}

.notification-popover {
    border-radius: 12px !important;
    overflow: hidden;
}

.notification-panel {
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, 75vh);
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.notification-panel > .notification-item,
.notification-panel .notification-empty {
    flex-shrink: 0;
}

.notification-panel {
    overflow-y: auto;
}

.notification-panel-footer {
    position: sticky;
    bottom: 0;
    display: block;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    color: var(--mud-palette-text-secondary);
}

.notification-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 36px 12px 16px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--motion-fast);
}

.notification-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.notification-item.unread {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.notification-item.unread:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.notification-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notification-item-title {
    font-weight: 600;
    line-height: 1.3;
}

.notification-item.unread .notification-item-title {
    font-weight: 700;
}

.notification-item-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.notification-item-time {
    font-size: 12px;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.notification-item-dot {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.notifications-page {
    padding-top: 16px;
    padding-bottom: 24px;
}

.notifications-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.notifications-list {
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.notifications-list .notification-item + .notification-item {
    border-top: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 959.98px) {
    .notification-bell-phone.mobile-only {
        display: inline-flex;
    }
}

/* ---- "What do you need?" composer (HomeQuickStart) ---- */

.quick-start {
    padding: 12px 16px;
    background: var(--mud-palette-surface);
}

.quick-start-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.quick-start-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.quick-start-prompt-text {
    flex: 1;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
}

.quick-start-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.quick-start-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* ---- Menu hub (/menu) ---- */

.menu-page {
    padding-top: 16px;
    padding-bottom: 24px;
}

.menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: var(--elevation-2);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.menu-profile-name {
    display: block;
    font-size: 17px;
    font-weight: 600;
}

.menu-profile-link {
    display: block;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.menu-heading {
    margin: 20px 0 8px;
    color: var(--mud-palette-text-secondary);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.menu-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 88px;
    padding: 12px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: var(--elevation-2);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow var(--motion-fast);
}

.menu-tile:hover {
    box-shadow: var(--elevation-8);
}

.menu-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 4px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.menu-segmented-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.menu-segmented-option.selected {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--elevation-2);
}

/* ---- Sales buttons shared by Membership and Pricing ---- */

.sell-btn-soft.mud-button-root {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)) !important;
    color: var(--mud-palette-primary) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    font-weight: 700;
    text-transform: none;
    border-radius: var(--button-radius);
    transition: transform var(--motion-fast), background var(--motion-fast);
}

.sell-btn-soft.mud-button-root:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-surface)) !important;
}

/* ---- Pricing page (bundles + build-your-own) ---- */

.pricing-intro {
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb, #FF9F1C 16%, transparent) 0, transparent 38%),
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) 0, transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent), transparent);
}

.plan-badge-hot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
    font-weight: 700;
    box-shadow: 0 6px 14px -6px rgba(255, 140, 0, .8);
}

.plan-card {
    overflow: hidden;
}

/* Anchors the "Most Popular" badge to its card. */
.plan-card-wrap {
    position: relative;
    height: 100%;
}

.plan-card-top {
    height: 6px;
    background: var(--tone);
}

/* "Everything in X, plus:" takes over the list's divider; the list below it shows only the additions. */
.plan-card-builds-on {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.plan-card-builds-on + .membership-benefits,
.plan-card-all .membership-benefits {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
    flex-grow: 0;
}

.plan-card-all {
    margin-top: 14px;
}

.plan-card-all summary {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.plan-card-all summary::-webkit-details-marker {
    display: none;
}

.plan-card-all summary .mud-icon-root {
    transition: transform var(--motion-fast);
}

.plan-card-all[open] summary .mud-icon-root {
    transform: rotate(180deg);
}

.section-more {
    margin-top: 16px;
    text-align: center;
}

.pricing-builder-band {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent), transparent 70%);
}

.pricing-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.pricing-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.pricing-module {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    padding: 14px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.pricing-module:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: 0 10px 22px -14px rgba(16, 16, 32, .35);
}

.pricing-module:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 2px;
}

.pricing-module.selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    animation: pricing-pop .22s ease;
}

.pricing-module-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pricing-module-name {
    font-weight: 700;
    line-height: 1.3;
}

.pricing-module-price {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.pricing-module-check {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--mud-palette-text-disabled);
    transition: color var(--motion-fast), transform var(--motion-fast);
}

.pricing-module.selected .pricing-module-check {
    color: var(--mud-palette-primary);
    transform: scale(1.1);
}

.pricing-summary {
    position: sticky;
    top: 88px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 16px 36px -22px rgba(16, 16, 32, .45);
}

.pricing-summary-heading {
    margin-bottom: 12px;
    color: var(--mud-palette-text-secondary);
    text-transform: none;
}

.pricing-summary-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.pricing-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.pricing-summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pricing-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    font-weight: 700;
}

.pricing-total-value {
    display: inline-block;
    font-size: 20px;
    font-weight: 800;
    color: var(--mud-palette-primary);
    text-align: right;
    animation: pricing-pop .25s ease;
}

.pricing-mobile-bar {
    display: none;
}

@keyframes pricing-pop {
    0% { transform: scale(.96); }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes pricing-bar-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 959.98px) {
    .pricing-builder {
        grid-template-columns: 1fr;
    }

    .pricing-module-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 10px;
    }

    .pricing-module:hover {
        transform: none;
        box-shadow: none;
    }

    .pricing-builder-band.has-selection {
        padding-bottom: 76px;
    }

    .pricing-mobile-bar.mobile-only {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 1250;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -6px 16px rgba(0, 0, 0, .1);
        animation: pricing-bar-in .2s ease;
    }

    .pricing-mobile-bar-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        line-height: 1.2;
    }

    .pricing-mobile-bar-count {
        font-size: 12px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .pricing-mobile-bar .pricing-total-value {
        font-size: 17px;
        text-align: left;
    }
}

@media (max-width: 599.98px) {
    .plan-featured {
        order: -1;
    }

    .pricing-module {
        min-height: 68px;
        padding: 12px;
    }

    .pricing-intro .membership-price-amount,
    .plan-card .membership-price-amount {
        font-size: 30px;
    }
}

/* ---- Plan cards shared by Membership and Pricing ---- */

.plan-save-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

.plan-savings-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
    font-size: 13px;
    font-weight: 700;
}

.plan-reassure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.plan-reassure .mud-icon-root {
    color: var(--mud-palette-success);
}

@media (min-width: 960px) {
    .plan-featured .marketing-pricing-card-featured {
        transform: translateY(-8px);
        box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
    }

    .plan-featured .marketing-pricing-card-featured:hover {
        transform: translateY(-12px);
    }

    .plan-featured .marketing-pricing-badge {
        top: -20px;
    }
}

/* ---- Membership subscribe (checkout) ---- */

.subscribe-page {
    padding-top: 20px;
    padding-bottom: 48px;
}

.subscribe-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.subscribe-back:hover {
    color: var(--mud-palette-primary);
}

.subscribe-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 20px;
}

.subscribe-secure-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    font-size: 13px;
    font-weight: 700;
}

.subscribe-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas: "form summary";
    gap: 28px;
    align-items: start;
}

.subscribe-summary-area {
    grid-area: summary;
}

.subscribe-form-area {
    grid-area: form;
}

.subscribe-summary {
    position: sticky;
    top: 88px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 18px 40px -26px rgba(16, 16, 32, .5);
}

.subscribe-plan-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--brand-gradient);
    color: #ffffff;
}

.subscribe-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
}

.subscribe-plan-hero .min-w-0 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.subscribe-plan-eyebrow {
    font-size: 12px;
    font-weight: 600;
    opacity: .8;
}

.subscribe-plan-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.subscribe-plan-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    line-height: 1.1;
}

.subscribe-plan-amount {
    font-size: 22px;
    font-weight: 800;
}

.subscribe-plan-cycle {
    font-size: 12px;
    opacity: .85;
}

.subscribe-summary-body {
    padding: 20px;
}

.subscribe-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

.subscribe-benefits {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.subscribe-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    font-size: 14px;
}

.subscribe-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.subscribe-line-good {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.subscribe-line-total {
    align-items: baseline;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 800;
}

.subscribe-total-value {
    font-size: 26px;
    color: var(--mud-palette-primary);
    animation: pricing-pop .25s ease;
}

.subscribe-then {
    align-self: flex-end;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.subscribe-form {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.subscribe-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.subscribe-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.subscribe-step-title {
    font-size: 17px;
    font-weight: 700;
}

.subscribe-card-field {
    padding: 16px 14px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.card-field-wrap.missing .subscribe-card-field {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
}

.subscribe-card-field.StripeElement--focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.subscribe-card-field.StripeElement--invalid {
    border-color: var(--mud-palette-error);
}

.subscribe-card-field.StripeElement--complete {
    border-color: var(--mud-palette-success);
}

.subscribe-card-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.subscribe-promo {
    margin: 14px 0 18px;
}

.subscribe-promo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.promo-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 4px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.promo-field:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.promo-field.invalid {
    border-color: var(--mud-palette-error);
}

.promo-field-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promo-field-input::placeholder {
    color: transparent;
}

.promo-field-label {
    position: absolute;
    top: 50%;
    left: 14px;
    padding: 0 4px;
    transform: translateY(-50%);
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    pointer-events: none;
    transition: top var(--motion-fast), font-size var(--motion-fast), color var(--motion-fast);
}

.promo-field:focus-within .promo-field-label,
.promo-field:has(.promo-field-input:not(:placeholder-shown)) .promo-field-label {
    top: -2px;
    font-size: 12px;
    font-weight: 600;
    background: var(--mud-palette-surface);
}

.promo-field:focus-within .promo-field-label {
    color: var(--mud-palette-primary);
}

.promo-field.invalid .promo-field-label {
    color: var(--mud-palette-error);
}

.promo-field-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 92px;
    height: 100%;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-disabled);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: not-allowed;
    transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

.promo-field-apply.ready {
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
    cursor: pointer;
    box-shadow: 0 6px 14px -8px rgba(255, 140, 0, .9);
    animation: pricing-pop .22s ease;
}

.promo-field-apply.ready:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.promo-field-apply.ready:active {
    transform: translateY(0);
}

.promo-field-apply .mud-progress-circular {
    color: #2B1A00;
}

.subscribe-promo-applied {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
}

.subscribe-promo-applied > span {
    flex: 1;
}

.subscribe-pay-btn.mud-button-root {
    min-height: 56px;
    font-size: 17px;
}

.subscribe-consent {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.subscribe-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.subscribe-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--mud-palette-text-primary);
    transition: transform var(--motion-fast), border-color var(--motion-fast);
}

.subscribe-trust-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
}

.subscribe-trust-item .mud-icon-root {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    color: var(--mud-palette-success);
}

@media (max-width: 380px) {
    .subscribe-trust {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .subscribe-trust-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 12px;
        text-align: left;
    }
}

@media (hover: none) {
    .subscribe-trust-item:hover {
        transform: none;
    }
}

.subscribe-signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.subscribe-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 24px auto 0;
    padding: 36px 24px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, #FF9F1C 16%, transparent) 0, transparent 55%),
        var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 18px 40px -26px rgba(16, 16, 32, .5);
}

.subscribe-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34C759 0%, #107C10 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px -10px rgba(16, 124, 16, .7);
    animation: pricing-pop .4s ease;
}

.subscribe-success-icon .mud-icon-root {
    font-size: 40px;
}

.subscribe-success-lead {
    max-width: 440px;
}

.subscribe-success-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
}

.subscribe-success-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 959.98px) {
    .subscribe-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "summary" "form";
        gap: 16px;
    }

    .subscribe-summary {
        position: static;
    }
}

@media (max-width: 599.98px) {
    .subscribe-page {
        padding-top: 12px;
    }

    .subscribe-heading .mud-typography-h4 {
        font-size: 1.5rem;
    }

    .subscribe-plan-hero,
    .subscribe-summary-body,
    .subscribe-form {
        padding: 16px;
    }

    .subscribe-success {
        margin-top: 8px;
        padding: 28px 16px;
    }

    .subscribe-success-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .subscribe-success-actions .mud-button-root {
        flex: none;
        width: 100%;
    }
}

/* ---- Tenant signup (reuses the subscribe checkout layout) ---- */

.password-rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.password-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    transition: color var(--motion-fast);
}

.password-rules li .mud-icon-root {
    color: var(--mud-palette-lines-default);
    transition: color var(--motion-fast);
}

.password-rules li.met {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.password-rules li.met .mud-icon-root {
    color: var(--mud-palette-success);
    animation: pricing-pop .2s ease;
}

.signup-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-error);
}

.signup-error-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    color: var(--mud-palette-error);
    font-size: 14px;
    font-weight: 600;
    animation: perk-rise .2s ease both;
}

.signup-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.signup-stepper li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.signup-stepper li + li::before {
    content: "";
    width: 40px;
    height: 2px;
    margin-right: 4px;
    border-radius: 1px;
    background: var(--mud-palette-lines-default);
}

.signup-stepper li.done + li::before {
    background: var(--mud-palette-success);
}

.signup-stepper-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
    font-size: 13px;
    font-weight: 700;
}

.signup-stepper li.active {
    color: var(--mud-palette-text-primary);
}

.signup-stepper li.active .signup-stepper-dot {
    border-color: transparent;
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
}

.signup-stepper li.done .signup-stepper-dot {
    border-color: transparent;
    background: var(--mud-palette-success);
    color: #ffffff;
}

.signup-bundles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

.signup-bundle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--motion-fast), background var(--motion-fast);
}

.signup-bundle:hover {
    transform: translateY(-1px);
}

.signup-bundle.selected {
    border-color: transparent;
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
    animation: pricing-pop .22s ease;
}

.signup-module-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.signup-step-gap {
    margin-top: 28px;
}

.signup-summary-modules {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    font-size: 14px;
}

.signup-summary-modules li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signup-summary-module-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.subscribe-summary .subscribe-total-value {
    text-align: right;
}

@media (max-width: 959.98px) {
    .signup-summary-details {
        display: none;
    }

    .signup-inline-card.mobile-only {
        display: block;
        position: static;
        margin-top: 16px;
    }
}

@media (max-width: 599.98px) {
    .signup-stepper li + li::before {
        width: 24px;
    }

    .signup-module-grid {
        grid-template-columns: 1fr;
    }

    .signup-bundle {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ---- Pricing perks strip + plan builder panels ---- */

.pricing-perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.pricing-perk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 20px -16px rgba(16, 16, 32, .35);
    animation: perk-rise .45s ease both;
    animation-delay: var(--perk-delay, 0ms);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.pricing-perk:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default));
    box-shadow: 0 14px 28px -16px rgba(16, 16, 32, .4);
}

.pricing-perk:hover .tone-bubble {
    transform: rotate(-8deg) scale(1.08);
}

.pricing-perk .tone-bubble {
    flex-shrink: 0;
    transition: transform var(--motion-fast);
}

.pricing-perk-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pricing-perk-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.pricing-perk-detail {
    font-size: 13px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

@keyframes perk-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-perk {
        animation: none;
    }
}

.pricing-builder-panel {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.pricing-builder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.pricing-builder-head .subscribe-step {
    margin-bottom: 0;
}

.pricing-count-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-size: 12px;
    font-weight: 800;
    animation: pricing-pop .22s ease;
}

.pricing-builder-tools {
    display: flex;
    gap: 6px;
}

.pricing-tool {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast);
}

.pricing-tool:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.pricing-tool:disabled {
    opacity: .45;
    cursor: default;
}

.pricing-start-from {
    margin-top: 10px;
}

.pricing-started-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 8px 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, #FF9F1C 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, #FF9F1C 45%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    animation: perk-rise .3s ease both;
}

.pricing-started-banner > span {
    flex: 1;
}

.pricing-banner-close {
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.pricing-banner-close:hover {
    background: var(--mud-palette-action-default-hover);
}

.pricing-module.from-bundle {
    animation: bundle-glow 1.2s ease;
}

@keyframes bundle-glow {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, #FF9F1C 70%, transparent); }
    40% { box-shadow: 0 0 0 6px color-mix(in srgb, #FF9F1C 35%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.pricing-summary .subscribe-step {
    margin-bottom: 14px;
}

.pricing-summary-list li {
    align-items: center;
    animation: perk-rise .2s ease both;
}

.pricing-summary-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.pricing-summary-remove {
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
}

.pricing-summary-remove:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}

.pricing-summary-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 959.98px) {
    .pricing-perks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }

    .pricing-perk:hover {
        transform: none;
    }

    .pricing-builder-panel {
        padding: 16px;
    }
}

@media (max-width: 599.98px) {
    .pricing-perk {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .pricing-perk-title {
        font-size: 13px;
    }

    .pricing-perk-detail {
        font-size: 12px;
    }

    .pricing-builder-panel {
        padding: 14px;
        margin: 0 -4px;
    }

    .pricing-builder-tools {
        width: 100%;
    }

    .pricing-tool {
        flex: 1;
        justify-content: center;
    }
}

/* ---- Booking details: meeting type, saved addresses, US address fields ---- */

.appointment-where {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.appointment-where .mud-icon-root {
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

.address-picker.meeting-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-picker .address-card {
    align-items: center;
    min-height: 84px;
}

.address-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.address-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 96px;
    padding: 14px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.address-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    box-shadow: 0 10px 22px -16px rgba(16, 16, 32, .4);
}

.address-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 2px;
}

.address-card.selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.address-card .tone-bubble {
    flex-shrink: 0;
}

.address-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.address-card-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    line-height: 1.3;
}

.address-card-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
    font-size: 11px;
    font-weight: 700;
}

.address-card-line {
    font-size: 13px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.address-card-check {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--mud-palette-lines-default);
    transition: color var(--motion-fast);
}

.address-card.selected .address-card-check {
    color: var(--mud-palette-primary);
    animation: pricing-pop .22s ease;
}

.address-card-add {
    border-style: dashed;
}

.address-dialog {
    width: min(720px, calc(100vw - 32px));
    border-radius: 20px !important;
}

.address-dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.address-dialog-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.address-dialog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 4px;
}

a.address-card {
    text-decoration: none;
}

@media (max-width: 599.98px) {
    .address-dialog {
        width: calc(100vw - 16px);
        margin: 8px !important;
        max-height: calc(100vh - 16px);
    }

    .address-dialog-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .address-dialog .address-card {
        min-height: 0;
    }
}

.booking-new-address {
    animation: perk-rise .25s ease both;
}

.new-address-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.new-address-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.new-address-title {
    font-weight: 700;
}

.new-address-hint {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.new-address-save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.new-address-labels {
    display: flex;
    gap: 8px;
}

.new-address-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}

.new-address-label.selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    animation: pricing-pop .2s ease;
}

.us-address .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (hover: none) {
    .address-card:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 599.98px) {
    .address-picker {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .address-card {
        min-height: 0;
    }
}

.booking-new-address {
    margin-top: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}

.booking-validation {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--mud-palette-error);
}

.us-address {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
}

.us-address-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--form-gap);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--form-gap);
}

.form-grid-full {
    grid-column: 1 / -1;
}

.form-grid .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 599.98px) {
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.us-address-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.us-address-option .mud-icon-root {
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

@media (max-width: 599.98px) {
    .address-picker.meeting-picker {
        grid-template-columns: 1fr;
    }

    .meeting-picker .address-card {
        min-height: 72px;
    }

    .us-address-row {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }

    .new-address-save {
        flex-direction: column;
        align-items: stretch;
    }

    .new-address-labels {
        width: 100%;
    }

    .new-address-label {
        flex: 1;
        justify-content: center;
        padding: 0 8px;
    }

    .us-address-city {
        grid-column: 1 / -1;
    }

    .booking-new-address {
        padding: 14px 12px;
    }
}

/* ---- Invoices (customer list + document) and work-order charges ---- */

.invoice-doc {
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.invoice-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.invoice-doc-head .min-w-0 {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invoice-doc-kind {
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

.invoice-doc-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.invoice-doc-date,
.invoice-doc-muted {
    display: block;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.invoice-doc-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.invoice-doc-total {
    font-size: 24px;
    font-weight: 800;
    color: var(--mud-palette-primary);
}

.invoice-doc-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 0;
}

.invoice-doc-party {
    display: block;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.invoice-overdue {
    color: var(--mud-palette-error);
}

.invoice-doc-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.invoice-doc-lines li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.invoice-line-desc {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
}

.invoice-pay {
    margin-top: 16px;
}

.invoice-payment-element {
    padding: 4px 0;
}

.charges {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.charges-head {
    margin-bottom: 8px;
}

.charge-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(70px, .8fr) minmax(110px, 1.2fr) minmax(80px, .8fr) minmax(80px, auto) auto;
    align-items: center;
    gap: 10px;
}

.charge-total {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.charges-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.charges-estimate {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .invoice-doc {
        padding: 16px;
    }

    .invoice-doc-head {
        flex-direction: column;
    }

    .invoice-doc-amount {
        flex-direction: row;
        align-items: center;
    }

    .charge-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        padding: 10px 0;
        border-bottom: 1px dashed var(--mud-palette-lines-default);
    }

    .charge-desc {
        grid-column: 1 / -1;
    }

    .charge-total {
        grid-column: 1 / 4;
        text-align: left;
    }
}

/* ---- Testimonials carousel (HomeTestimonialsSection) ---- */

.testimonials-band {
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 0, transparent 40%),
        radial-gradient(circle at 92% 90%, color-mix(in srgb, #FF9F1C 12%, transparent) 0, transparent 42%);
}

.testimonials-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
}

.testimonials-arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.testimonials-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    box-shadow: 0 6px 16px -12px rgba(16, 16, 32, .5);
    transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), opacity var(--motion-fast);
}

.testimonials-arrow:hover:not(:disabled) {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    transform: translateY(-2px);
}

.testimonials-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.testimonials-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 20px) / 3);
    column-gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 14px;
    scrollbar-width: none;
}

.testimonials-track::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px 20px;
    border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 14px 30px -24px rgba(16, 16, 32, .5);
    scroll-snap-align: start;
    overflow: hidden;
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.testimonial-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tone);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tone) 45%, var(--mud-palette-lines-default));
    box-shadow: 0 20px 36px -22px rgba(16, 16, 32, .55);
}

.testimonial-quote {
    align-self: flex-start;
}

.testimonial-text {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mud-palette-text-primary);
}

.testimonial-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-card.expanded .testimonial-text.clamped {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.testimonial-more {
    align-self: flex-start;
    margin-top: -6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.testimonial-more:hover {
    text-decoration: underline;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.testimonial-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--mud-palette-surface), 0 0 0 5px color-mix(in srgb, var(--tone) 45%, transparent);
}

.testimonial-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tone) 18%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--tone) 70%, var(--mud-palette-text-primary));
    font-weight: 800;
}

.testimonial-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.testimonial-name {
    font-weight: 700;
}

.testimonial-title {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.testimonials-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    cursor: pointer;
    transition: width var(--motion-fast), background var(--motion-fast);
}

.testimonials-dots button.active {
    width: 24px;
    background: var(--mud-palette-primary);
}

@media (max-width: 959.98px) {
    .testimonials-track {
        grid-auto-columns: calc((100% - 16px) / 2);
        column-gap: 16px;
    }
}

@media (max-width: 599.98px) {

    .testimonials-track {
        grid-auto-columns: 86%;
        column-gap: 12px;
        margin: 0 -16px;
        padding: 6px 16px 14px;
        scroll-padding-inline: 16px;
    }

    .testimonial-card {
        padding: 20px 18px 18px;
    }

    .testimonials-dots button {
        width: 10px;
        height: 10px;
    }

    .testimonials-dots button.active {
        width: 26px;
    }
}

@media (hover: none) {
    .testimonial-card:hover {
        transform: none;
        box-shadow: 0 14px 30px -24px rgba(16, 16, 32, .5);
    }
}

/* ---- Service area finder (HomeServiceAreasSection) ---- */

.areas-band {
    background:
        radial-gradient(circle at 90% 15%, color-mix(in srgb, #0E7C7B 12%, transparent) 0, transparent 40%),
        var(--marketing-surface-alt);
}

.areas-controls {
    max-width: 720px;
    margin: 20px auto 24px;
    text-align: center;
}

.areas-controls .area-states {
    justify-content: center;
}

.areas-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "results map";
    gap: 24px;
    align-items: start;
}

.areas-body.no-map {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "results";
}

.areas-results {
    grid-area: results;
    min-width: 0;
}

.areas-map {
    grid-area: map;
    z-index: 0;
    height: 440px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    box-shadow: 0 18px 40px -28px rgba(16, 16, 32, .55);
}

/* A parent-qualified selector, so MapLibre's own ".maplibregl-map { position: relative }" (loaded later) can't win: with relative
   positioning "top: 96px" pushed the map 96px below the area cards instead of making it stick. */
.areas-body > .areas-map {
    position: sticky;
    top: 96px;
}

.areas-map.map-unavailable {
    display: none;
}

.areas-body:has(.areas-map.map-unavailable) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "results";
}

.areas-map .maplibregl-map,
.areas-map.maplibregl-map {
    font: inherit;
}

.area-pin {
    display: block;
    width: 30px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.area-pin:focus-visible span {
    outline: 3px solid #FF9F1C;
    outline-offset: 2px;
}

.area-popup .maplibregl-popup-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    box-shadow: 0 14px 28px -14px rgba(16, 16, 32, .55);
}

.area-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: var(--mud-palette-surface);
}

.areas-map .maplibregl-ctrl-group {
    border-radius: 12px;
    overflow: hidden;
}

/* The data license (OpenStreetMap ODbL) and OpenFreeMap's terms require the credit, so it stays one tap away behind the "i" button
   instead of being removed; collapsed after load, faint until hovered. */
.areas-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) {
    opacity: .55;
    transition: opacity var(--motion-fast);
}

.areas-map .maplibregl-ctrl-attrib.maplibregl-compact:hover {
    opacity: 1;
}

.area-pin span {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: var(--mud-palette-primary);
    box-shadow: 0 6px 14px -4px rgba(16, 16, 32, .55);
    transform: rotate(-45deg);
    transform-origin: center;
    transition: background var(--motion-fast), transform var(--motion-fast);
}

.area-pin span::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
}

.area-pin.active span,
.area-pin:hover span {
    background: #FF9F1C;
    transform: rotate(-45deg) scale(1.2);
}

.area-pin.active {
    z-index: 2;
}

.area-pin-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--mud-palette-primary) !important;
    font-weight: 700;
    text-decoration: none;
}

.area-card.highlight {
    border-color: color-mix(in srgb, var(--tone) 70%, var(--mud-palette-lines-default));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent);
}

.area-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    margin-top: 20px;
    padding: 0 8px 0 12px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.area-search:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.area-search-icon {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

.area-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 16px;
}

.area-search-input::placeholder {
    color: transparent;
}

.area-search-input::-webkit-search-cancel-button {
    display: none;
}

.area-search-label {
    position: absolute;
    top: 50%;
    left: 44px;
    padding: 0 4px;
    transform: translateY(-50%);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transition: top var(--motion-fast), left var(--motion-fast), font-size var(--motion-fast), color var(--motion-fast);
}

.area-search:focus-within .area-search-label,
.area-search:has(.area-search-input:not(:placeholder-shown)) .area-search-label {
    top: -2px;
    left: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.area-search-clear {
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.area-search-clear:hover {
    background: var(--mud-palette-action-default-hover);
}

.area-states {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.area-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.area-state span {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    font-size: 12px;
}

.area-state:hover {
    border-color: var(--mud-palette-primary);
}

.area-state.active {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.area-state.active span {
    background: rgba(255, 255, 255, .25);
}

.area-count {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.area-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.area-card[hidden] {
    display: none;
}

.area-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tone) 55%, var(--mud-palette-lines-default));
    box-shadow: 0 12px 24px -18px rgba(16, 16, 32, .5);
}

.area-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.area-card-name {
    font-weight: 700;
    line-height: 1.3;
}

.area-card-state {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.area-card-intro {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.area-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--motion-fast), transform var(--motion-fast);
}

.area-card:hover .area-card-cta,
.area-card:focus-visible .area-card-cta {
    opacity: 1;
    transform: translateX(0);
}

.area-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, #FF9F1C 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #FF9F1C 8%, var(--mud-palette-surface));
    animation: perk-rise .2s ease both;
}

.area-empty[hidden] {
    display: none;
}

.area-empty-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.area-empty-title {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.area-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: var(--button-radius);
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 959.98px) {
    .areas-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "map" "results";
        gap: 16px;
    }

    .areas-map {
        height: 280px;
    }

    .areas-body > .areas-map {
        position: relative;
        top: 0;
    }
}

@media (max-width: 599.98px) {
    .areas-controls {
        margin: 16px auto 18px;
    }

    .areas-map {
        height: 240px;
        border-radius: 14px;
    }

    .areas-controls .area-states {
        justify-content: flex-start;
    }

    .area-states {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 14px -16px 0;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }

    .area-states::-webkit-scrollbar {
        display: none;
    }

    .area-state {
        flex-shrink: 0;
    }

    .area-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .area-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-height: 0;
        padding: 12px;
    }

    .area-card-cta {
        opacity: 1;
        transform: none;
    }

    .area-empty {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (hover: none) {
    .area-card:hover {
        transform: none;
        box-shadow: none;
    }

    .area-card-cta {
        opacity: 1;
        transform: none;
    }
}

/* ---- Admin lists (ServerDataTable, ListFilterTabs, PersonCell, StatusBadge) ---- */

.admin-table.mud-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
}

.admin-table .mud-table-toolbar {
    gap: 8px;
    height: auto;
    min-height: 60px;
    padding: 10px 16px;
}

.admin-table-search {
    max-width: 340px;
    width: 100%;
}

.admin-table .mud-table-head .mud-table-cell {
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    white-space: nowrap;
}

.admin-table .mud-table-body .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.admin-table .cell-actions,
.admin-table .mud-table-body .mud-table-cell[data-label="Actions"] {
    text-align: right;
    white-space: nowrap;
}

.admin-table:has(.mud-table-body .mud-table-cell:last-child[data-label="Actions"]) .mud-table-head .mud-table-cell:last-child {
    text-align: right;
}

.cell-strong {
    font-weight: 700;
}

.mud-table-body .mud-table-cell.mud-table-cell-align-right {
    flex-direction: row;
}

.cell-muted {
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}

.cell-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.cell-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cell-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
    word-break: break-all;
}

.cell-link:hover {
    text-decoration: underline;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.role-chip-more {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.person-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.person-avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.person-initials {
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    color: color-mix(in srgb, var(--tone) 80%, var(--mud-palette-text-primary));
    font-size: 14px;
    font-weight: 800;
}

.person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.person-name {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.person-sub {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.status-badge {
    --status: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status) 12%, transparent);
    color: color-mix(in srgb, var(--status) 85%, var(--mud-palette-text-primary));
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status);
}

.status-success { --status: #13A10E; }
.status-warning { --status: #DA7B0B; }
.status-danger { --status: #D13438; }
.status-info { --status: #0F6CBD; }
.status-neutral { --status: #7A7F8C; }

.list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.list-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.list-tab:hover {
    border-color: var(--mud-palette-primary);
}

.list-tab.active {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.member-hero-note {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.member-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
}

.member-fact {
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.member-fact dt {
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

.member-fact dd {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 800;
}

.member-fact dd span {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.member-hero .order-hero-actions .member-cancel {
    margin-left: auto;
}

@media (max-width: 599.98px) {
    .member-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-fact dd {
        font-size: 16px;
    }

    .member-hero .order-hero-actions .member-cancel {
        margin-left: 0;
    }
}

.dashboard-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

div.order-card:hover {
    transform: none;
    box-shadow: none;
}

.order-progress-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.referral-code-stat .orders-stat-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .04em;
}

.referral-code-stat {
    cursor: pointer;
}

.address-book {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.address-book-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.address-book-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.address-book-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.address-book-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

@media (max-width: 959.98px) {
    .address-book {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599.98px) {
    .dashboard-heading-actions,
    .dashboard-heading-actions .mud-button-root {
        width: 100%;
    }

    .address-book-actions .mud-button-root {
        flex: 1;
    }

    .order-progress-4 li {
        font-size: 11.5px;
    }

    .orders-stats .referral-code-stat {
        flex-basis: 100%;
    }
}

.equipment-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.equipment-card {
    --tone: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 5px solid var(--tone);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.equipment-card-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.equipment-card-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.equipment-card-name {
    font-family: var(--font-marketing);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.equipment-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.equipment-serial {
    overflow-wrap: anywhere;
}

.equipment-notes {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tone) 7%, var(--mud-palette-surface));
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

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

.equipment-history {
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.equipment-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

.equipment-timeline li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equipment-timeline li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -22px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--tone);
    border-radius: 50%;
    background: var(--tone);
}

.equipment-timeline li.current::before {
    background: var(--mud-palette-surface);
}

.equipment-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: -14px;
    left: -16px;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.equipment-timeline-date {
    font-weight: 800;
}

.equipment-timeline-text {
    font-size: 14px;
}

.equipment-timeline-parts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 959.98px) {
    .equipment-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .equipment-card {
        padding: 16px;
    }

    .equipment-card-top .order-card-badges {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .equipment-card-name {
        font-size: 18px;
    }

    .equipment-actions .mud-button-root {
        width: 100%;
    }
}

.rejoin-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, #FFC83D 55%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, #FFC83D 14%, transparent), transparent 70%);
}

.rejoin-text {
    min-width: 0;
}

@media (max-width: 959.98px) {
    .admin-table.mud-table {
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    .admin-table .mud-table-toolbar {
        padding: 0 0 10px;
        background: transparent;
    }

    .admin-table-search {
        max-width: none;
    }

    .admin-table .mud-table-container {
        overflow: visible;
    }

    .admin-table.mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        padding: 12px 14px 6px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 14px;
        background: var(--mud-palette-surface);
    }

    .admin-table.mud-sm-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 36px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--mud-palette-lines-default);
        text-align: right;
    }

    .admin-table.mud-sm-table .mud-table-body .mud-table-cell::before {
        flex-shrink: 0;
        color: var(--mud-palette-text-secondary);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }

    .admin-table.mud-sm-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell.cell-primary {
        order: -1;
        justify-content: flex-start;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        font-size: 15px;
        font-weight: 700;
        text-align: left;
    }

    .admin-table.mud-sm-table .mud-table-body .mud-table-cell.cell-primary::before {
        display: none;
    }

    .admin-table.mud-sm-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:last-child[data-label="Actions"],
    .admin-table.mud-sm-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell.cell-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-top: 8px;
        border-bottom: 0;
    }

    .admin-table.mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]::before,
    .admin-table.mud-sm-table .mud-table-body .mud-table-cell.cell-actions::before {
        display: none;
    }

    .admin-table.mud-sm-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:last-child:not([data-label="Actions"]) {
        border-bottom: 0;
    }

    .admin-table.mud-sm-table .cell-chips {
        justify-content: flex-end;
    }

    .admin-table.mud-sm-table .cell-stack {
        align-items: flex-end;
    }

    .admin-table .mud-table-pagination {
        border-top: 0;
    }
}

@media (max-width: 599.98px) {
    .list-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 4px -16px 12px;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }

    .list-tabs::-webkit-scrollbar {
        display: none;
    }

    .list-tab {
        flex-shrink: 0;
    }

    .admin-table .mud-table-pagination .mud-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        padding: 8px 0;
    }
}

/* ---- Membership page ---- */

.section-anchor {
    scroll-margin-top: 72px;
}

.sales-intro {
    padding: 40px 0 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent), transparent);
}

.sales-intro-lead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.sales-intro-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* Hero with a picture: copy left, image right; stacks on phones. */
.sales-intro-split .sales-intro-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding-bottom: 32px;
}

.sales-intro-split .sales-intro-lead {
    margin-left: 0;
}

.sales-intro-split .sales-intro-actions {
    justify-content: flex-start;
}

.sales-intro-image {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
}

@media (max-width: 959.98px) {
    .sales-intro-split .sales-intro-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

.membership-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.membership-benefit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.membership-benefit:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--elevation-8);
}

.faq-accordion {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.faq-accordion-item + .faq-accordion-item {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.faq-accordion-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    transition: background var(--motion-fast);
}

.faq-accordion-item summary::-webkit-details-marker {
    display: none;
}

.faq-accordion-item summary:hover {
    background: var(--mud-palette-action-default-hover);
}

.faq-accordion-question {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.faq-accordion-chevron {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    transition: transform var(--motion-fast);
}

.faq-accordion-item[open] .faq-accordion-chevron {
    transform: rotate(180deg);
    color: var(--mud-palette-primary);
}

.faq-accordion-item[open] .faq-accordion-question {
    color: var(--mud-palette-primary);
}

.faq-accordion-answer {
    margin: 0;
    padding: 0 20px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.membership-cta {
    padding: 56px 0;
    background: var(--brand-gradient);
    color: #ffffff;
}

.membership-cta-lead {
    opacity: .9;
}

.sell-btn.mud-button-root {
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%) !important;
    color: #2B1A00 !important;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    border-radius: var(--button-radius);
    padding-left: 28px;
    padding-right: 24px;
    box-shadow: 0 8px 20px -8px rgba(255, 140, 0, .75);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast);
}

.sell-btn.mud-button-root:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 12px 26px -8px rgba(255, 140, 0, .85);
}

.sell-btn.mud-button-root:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -6px rgba(255, 140, 0, .75);
}

.sell-btn.mud-button-root:focus-visible {
    outline: 3px solid color-mix(in srgb, #FF9F1C 55%, transparent);
    outline-offset: 2px;
}

.sell-btn .mud-button-icon-end {
    transition: transform var(--motion-fast);
}

.sell-btn:hover .mud-button-icon-end {
    transform: translateX(3px);
}

.plan-outline-btn.mud-button-root {
    border-radius: var(--button-radius);
    border-width: 2px;
    font-weight: 700;
    text-transform: none;
}

.plan-outline-btn.mud-button-root:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.sales-intro-actions .mud-button-root,
.membership-cta .mud-button-root {
    text-transform: none;
    border-radius: var(--button-radius);
}

.membership-cta .membership-cta-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .7);
}

.sales-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 16px;
}

.sales-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.sales-trust-item .mud-icon-root {
    color: var(--mud-palette-success);
}

.membership-cycle-toggle {
    display: flex;
    width: fit-content;
    margin: 0 auto 32px;
    padding: 4px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.membership-cycle-toggle button {
    min-width: 112px;
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
}

.membership-cycle-toggle button.selected {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--elevation-2);
}

.membership-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
}

.membership-price-amount {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.membership-price-cycle {
    color: var(--mud-palette-text-secondary);
}

.membership-benefits {
    list-style: none;
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.membership-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
}

.membership-benefits .mud-icon-root {
    flex-shrink: 0;
    margin-top: 1px;
}

.membership-badge-current {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

@media (min-width: 600px) and (max-width: 959.98px) {
    .membership-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599.98px) {
    .sales-intro {
        padding-top: 24px;
        padding-bottom: 0;
    }

    .sales-intro-lead {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .sales-intro-actions {
        margin-top: 20px;
    }

    .sales-intro .mud-typography-h3 {
        font-size: 1.75rem;
    }

    .sales-intro-actions .mud-button-root {
        flex: 1;
        white-space: nowrap;
    }

    .sales-cta-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 360px;
        gap: 10px;
    }

    .sales-cta-actions .mud-button-root {
        flex: none;
        width: 100%;
    }

    /* Benefits swipe sideways on phones so the plans stay one short scroll away. */
    .membership-benefit-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px 8px;
        scrollbar-width: none;
    }

    .membership-benefit-grid::-webkit-scrollbar {
        display: none;
    }

    .membership-benefit {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    .faq-accordion-item summary {
        padding: 14px 16px;
    }

    .faq-accordion-question {
        font-size: 15px;
    }

    .faq-accordion-answer {
        padding: 0 16px 16px;
        font-size: 14px;
    }

    .membership-cta {
        padding: 36px 0;
    }

    .sales-trust {
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .sales-trust-item {
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-default);
        font-size: 13px;
        font-weight: 500;
    }

    .plan-carousel {
        scroll-padding-inline: 16px;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        width: auto !important;
        margin: 0 -16px !important;
        padding: 14px 16px 12px;
        scrollbar-width: none;
    }

    .plan-carousel::-webkit-scrollbar {
        display: none;
    }

    .plan-carousel > .plan-carousel-item {
        flex: 0 0 86% !important;
        max-width: 86% !important;
        padding: 0 !important;
        scroll-snap-align: center;
    }

    .plan-carousel > .plan-carousel-item:only-child {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .plan-carousel .marketing-pricing-card:hover {
        transform: none;
    }

    .plan-card-body {
        padding: 20px !important;
    }

    .plan-card-actions {
        padding: 0 20px 20px !important;
    }

    .membership-price-amount {
        font-size: 32px;
    }

    .membership-benefits {
        margin-top: 16px;
        padding-top: 16px;
    }

    .membership-cycle-toggle {
        width: 100%;
        margin-bottom: 24px;
    }

    .membership-cycle-toggle button {
        flex: 1;
        min-width: 0;
    }

    /* The most popular plan leads the stack on phones instead of sitting in the middle of it. */
    .plan-featured {
        order: -1;
    }

}

.menu-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.menu-fineprint {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.menu-fineprint a {
    color: inherit;
}

.business-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 16px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, #FF9F1C 35%, transparent) 0, transparent 55%),
        var(--brand-gradient);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
    transition: transform var(--motion-fast);
}

.business-promo:active {
    transform: scale(.98);
}

.business-promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFC83D 0%, #FF9F1C 100%);
    color: #2B1A00;
}

.business-promo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.business-promo-eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    color: #FFC83D;
}

.business-promo-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.business-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
    .marketing-sticky-header,
    .category-explorer-panel {
        transition: none;
        animation: none;
    }
}

/* ---- Phone-only simplifications ---- */

.dashboard-back-link {
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 959.98px) {
    .hide-on-phone,
    .dashboard-sidebar-col {
        display: none !important;
    }

    .dashboard-back-link.mobile-only {
        display: inline-flex;
    }
}

/* ---- Profile page ---- */

.profile-page {
    max-width: 720px;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--brand-gradient);
    color: #ffffff;
}

.profile-hero .profile-hero-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.profile-hero-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-hero-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.profile-hero-sub {
    font-size: 14px;
    opacity: 0.85;
    overflow-wrap: anywhere;
}

.profile-heading {
    margin: 24px 0 8px;
    color: var(--mud-palette-text-secondary);
}

.profile-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 14px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.profile-row + .profile-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.profile-row-link {
    transition: background var(--motion-fast);
}

.profile-row-link:hover {
    background: var(--mud-palette-action-default-hover);
}

.profile-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.profile-row-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.profile-row-value {
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.profile-row-chevron {
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.profile-note {
    display: block;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
}

.profile-note a {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.profile-signout {
    margin-top: 24px;
}

@media (max-width: 599.98px) {
    .profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
    }

    .profile-hero .profile-hero-avatar {
        width: 76px;
        height: 76px;
        font-size: 28px;
    }

    .profile-signout {
        width: 100%;
    }
}

/* ---- Phones and touch devices: no GPU-heavy effects that redraw every frame ----
   A backdrop blur over scrolling content and looping animations made the Android app's WebView drop ~73% of its frames
   (median 69 ms per frame, measured with dumpsys gfxinfo). Solid translucent fills look nearly the same at a fraction of the cost. */
@media (max-width: 959.98px), (hover: none) {
    .marketing-app-bar {
        background: var(--mud-palette-appbar-background) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .app-bar-elevated {
        backdrop-filter: none;
    }

    .hero-wow-pill,
    .hero-wow-glass.mud-button-root,
    .hero-wow-stat,
    .hero-wow-card {
        backdrop-filter: none;
    }

    .hero-wow-pill,
    .hero-wow-stat {
        background: rgba(4, 8, 16, .55);
    }

    .hero-wow-bg,
    .hero-wow-glow,
    .hero-wow-cta.mud-button-root {
        animation: none;
    }

    .hero-wow-bg {
        transform: none;
    }
}

.mud-tab,
#components-reconnect-modal button {
    text-transform: none;
}