/* ==========================================================================
   RoboInsure — brand stylesheet
   Palette + type sourced from the RoboInsure mobile app (lib/colors.dart)
   and the RoboInsure company profile artwork.
   ========================================================================== */

:root {
    --ri-background: #10151E;
    --ri-surface: #18202C;
    --ri-surface-alt: #1F2836;
    --ri-primary: #2EE0FF;
    --ri-secondary: #4E90CA;
    --ri-accent: #FF4D6D;
    --ri-success: #009961;
    --ri-text: #FFFFFF;
    --ri-text-muted: #8CA0B3;
    --ri-line: #243040;

    --ri-font-body: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ri-font-heading: "Space Grotesk", "Poppins", "Segoe UI", sans-serif;

    --ri-max-width: 1200px;
    --ri-radius-lg: 20px;
    --ri-radius-md: 14px;

    color-scheme: dark;

    /* Safety-net overrides for MudBlazor's generated CSS custom properties, in case a
       future MudBlazor version changes how a palette slot is consumed internally. The
       C# theme in Theme/RoboInsureTheme.cs sets the same values as the primary source
       of truth; these reinforce the brand colours regardless. */
    --mud-palette-primary: var(--ri-primary) !important;
    --mud-palette-secondary: var(--ri-secondary) !important;
    --mud-palette-tertiary: var(--ri-accent) !important;
    --mud-palette-background: var(--ri-background) !important;
    --mud-palette-surface: var(--ri-surface) !important;
    --mud-palette-appbar-background: var(--ri-background) !important;
    --mud-palette-drawer-background: var(--ri-background) !important;
    --mud-palette-text-primary: var(--ri-text) !important;
    --mud-palette-text-secondary: var(--ri-text-muted) !important;
    --mud-palette-lines-default: var(--ri-line) !important;
    --mud-palette-divider: var(--ri-line) !important;
}

html, body {
    background-color: var(--ri-background);
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    /* html/body are deliberately NOT the scrolling element — see .ri-scroll-region
       below. This guarantees the ambient backdrop can never move on scroll,
       regardless of browser quirks around `position: fixed` inside transformed
       or filtered ancestors. */
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* ------------------------------- App shell --------------------------------
   Two full-viewport siblings: a static backdrop that never moves, and a
   single scrolling region that owns ALL page scroll. Because `html`/`body`
   have `overflow: hidden` above, there is no other scroll container in the
   document that could ever move the backdrop — this is robust against
   transforms/filters on ancestors, mobile browser UI-chrome quirks, etc.,
   without needing a 3rd-party scroll library. */
.ri-app-shell {
    position: fixed;
    inset: 0;
    height: 100dvh;
}

.ri-scroll-region {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* ---------------------------- Ambient backdrop ----------------------------
   A static, non-scrolling "space" backdrop sits behind the whole app
   (z-index -1), as a sibling of .ri-scroll-region rather than inside it, so
   it structurally can never be part of the scrolling content. Every
   section/card above it is transparent or translucent, so it reads as
   content floating over a static field rather than a page that scrolls a
   flat colour. Pure CSS (gradients + tiled radial dots for stars) — no image
   assets, so it costs nothing extra to ship into a MAUI WebView later. */
.ri-ambient-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--ri-background);
    background-image:
        radial-gradient(ellipse 60% 50% at 12% -10%, rgba(46, 224, 255, 0.20), transparent 60%),
        radial-gradient(ellipse 55% 45% at 108% 8%, rgba(255, 77, 109, 0.14), transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 115%, rgba(78, 144, 202, 0.18), transparent 60%),
        radial-gradient(ellipse 40% 40% at 85% 75%, rgba(46, 224, 255, 0.10), transparent 65%);
}

.ri-ambient-backdrop::before,
.ri-ambient-backdrop::after {
    content: "";
    position: absolute;
    inset: -10%;
    background-repeat: repeat;
    opacity: 0.5;
}

.ri-ambient-backdrop::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.4px);
    background-size: 180px 180px;
}

.ri-ambient-backdrop::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.2px);
    background-size: 110px 110px;
    background-position: 40px 60px;
    opacity: 0.35;
}

a {
    color: var(--ri-primary);
}

/* Fluid, mobile-first type scale so headings stay legible from phone widths up
   to wide desktop — and will scale the same way inside a MAUI BlazorWebView. */
h1, h2, h3, h4, h5, h6, .ri-heading {
    font-family: var(--ri-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ri-text);
}

.ri-heading { margin: 0; }

.mud-typography-h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem); line-height: 1.12; }
.mud-typography-h2 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem); line-height: 1.16; }
.mud-typography-h3 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.2; }
.mud-typography-h4 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); line-height: 1.25; }

.mud-text-secondary { color: var(--ri-text-muted) !important; }

/* ------------------------------- Layout ---------------------------------- */

.ri-main {
    padding-top: 92px; /* clears the fixed/sticky app bar */
    min-height: 60vh;
    position: relative;
}

.ri-appbar {
    background-color: rgba(16, 21, 30, 0.72) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
}

.ri-appbar-inner {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ri-brand-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
}

.ri-brand {
    display: flex;
    align-items: center;
}

.ri-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-right: 28px;
}

.ri-nav-link {
    color: var(--ri-text) !important;
    font-weight: 500;
    font-size: 0.95rem;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.ri-nav-link:hover {
    opacity: 1;
    color: var(--ri-primary) !important;
}

.ri-login-btn {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.ri-drawer-header {
    padding: 20px 16px !important;
}

.ri-drawer .mud-nav-link {
    border-radius: 10px;
}

/* Profile switcher (only shown to people with more than one profile): the current choice is bold and tinted. */
.ri-switcher-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    margin-right: 8px;
}

.ri-switcher-current,
.ri-switcher-current .mud-nav-link-text {
    font-weight: 700;
    color: var(--ri-primary);
}

.ri-footer {
    background-color: rgba(11, 15, 22, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.6);
    padding: 56px 0 28px;
    margin-top: 40px;
    position: relative;
}

.ri-footer-heading {
    color: var(--ri-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

.ri-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ri-footer-legal {
    display: flex;
    gap: 20px;
}

/* -------------------------------- Sections -------------------------------- */

.ri-section {
    padding: 64px 0;
}

.ri-section-alt {
    position: relative;
    background: rgba(24, 32, 44, 0.55);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 40px 80px -40px rgba(0, 0, 0, 0.6),
        0 0 120px -60px rgba(46, 224, 255, 0.35);
}

.ri-section-heading {
    max-width: 720px;
}

.ri-section-lead {
    max-width: 680px;
    color: var(--ri-text-muted);
}

.ri-eyebrow {
    display: block;
    color: var(--ri-primary);
    font-weight: 700;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    margin-bottom: 8px;
}

.ri-eyebrow-chip {
    background: rgba(46, 224, 255, 0.1) !important;
    color: var(--ri-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.ri-heading-underline {
    width: 64px;
    height: 3px;
    border-radius: 2px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--ri-primary), var(--ri-accent));
}

.ri-text-gradient {
    background: linear-gradient(90deg, var(--ri-primary), #7CF3FF 60%, var(--ri-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ri-body-copy {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.75;
}

/* --------------------------------- Hero ----------------------------------- */

.ri-hero {
    padding: 28px 0 24px;
    text-align: center;
    position: relative;
}

/* Single centered column at every breakpoint: logo/faiser lockup on top,
   then headline, subtitle, actions and trust badge below — desktop and
   mobile share the same stacked composition, mobile just scales down. */
.ri-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ri-hero-title {
    margin-top: 4px;
}

.ri-hero-subtitle {
    color: var(--ri-text-muted);
    font-size: 1.08rem;
    max-width: 560px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.ri-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.ri-hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    color: var(--ri-text-muted);
}

.ri-cta-btn {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

.ri-cta-btn-spinner {
    margin-right: 10px;
}

.ri-cta-btn-secondary {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--ri-text) !important;
    border-color: var(--ri-line) !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

.ri-hero-art {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 0;
}

.ri-hero-glow {
    position: absolute;
    inset: 8% 4% 6%;
    border-radius: 50%;
    background: radial-gradient(ellipse 58% 46% at 50% 32%, rgba(46, 224, 255, 0.30) 0%, rgba(46, 224, 255, 0.08) 55%, transparent 75%);
    filter: blur(4px);
}

.ri-hero-lockup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.ri-hero-logo {
    width: min(320px, 82%);
    height: auto;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.45));
}

.ri-hero-faiser {
    width: min(250px, 66%);
    height: auto;
    margin-top: -4px;
    filter: drop-shadow(0 16px 40px rgba(46, 224, 255, 0.35));
}

/* -------------------------------- Cards ------------------------------------ */

.ri-panel-card,
.ri-product-card,
.ri-feature-card,
.ri-step-card,
.ri-stat-panel {
    background: rgba(24, 32, 44, 0.72);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--ri-radius-lg);
    padding: 28px;
    height: 100%;
    box-sizing: border-box;
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.ri-product-card,
.ri-feature-card,
.ri-step-card {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* ---------------------- Account: needs analysis + quote --------------------- */

.ri-opportunity-columns {
    display: flex;
    align-items: stretch;
    gap: 28px;
}

.ri-opportunity-column {
    flex: 1 1 0;
    min-width: 0;
}

.ri-opportunity-column + .ri-opportunity-column {
    padding-left: 28px;
    border-left: 1px solid var(--ri-line);
}

.ri-needs-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ri-radius-md);
    padding: 18px;
}

@media (max-width: 959.98px) {
    .ri-opportunity-columns {
        flex-direction: column;
        gap: 20px;
    }

    .ri-opportunity-column + .ri-opportunity-column {
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid var(--ri-line);
    }
}

.ri-product-card:hover,
.ri-feature-card:hover,
.ri-step-card:hover {
    transform: translateY(-6px);
    border-color: rgba(46, 224, 255, 0.4);
    box-shadow:
        0 30px 60px -24px rgba(0, 0, 0, 0.6),
        0 0 50px -18px rgba(46, 224, 255, 0.45);
}

.ri-card-title {
    font-family: var(--ri-font-heading);
    font-weight: 600;
}

.ri-product-icon,
.ri-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 224, 255, 0.12);
    color: var(--ri-primary);
}

.ri-feature-icon {
    font-size: 1.6rem;
}

.ri-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ri-primary), var(--ri-secondary));
    color: #03222B;
    font-weight: 700;
    font-family: var(--ri-font-heading);
}

.ri-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ri-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
}

/* ------------------------------- Partners ---------------------------------- */

.ri-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ri-partner-badge {
    background: #FFFFFF;
    border-radius: var(--ri-radius-md);
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ri-partner-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 36px -14px rgba(0, 0, 0, 0.6);
}

.ri-partner-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --------------------------------- CTA -------------------------------------- */

.ri-cta-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(120deg, rgba(46, 224, 255, 0.16), rgba(255, 77, 109, 0.10));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ri-radius-lg);
    padding: 36px;
    box-shadow:
        0 30px 60px -28px rgba(0, 0, 0, 0.6),
        0 0 60px -30px rgba(46, 224, 255, 0.3);
}

/* -------------------------------- Contact ------------------------------------ */

.ri-toggle-group-label {
    color: var(--ri-text);
}

/* Insurance-type toggle buttons on the "Contact us" form: a real checkbox input,
   visually hidden but still focusable/keyboard-operable/screen-reader friendly, with
   the <label> styled to look like a button. This is deliberately plain HTML rather than
   a MudBlazor chip component, so the selected/unselected look is simple CSS driven off
   a class Blazor toggles server-side — no extra JS interop needed. */
.ri-insurance-toggle-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}

.ri-insurance-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px 14px;
    background: rgba(24, 32, 44, 0.72);
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    color: var(--ri-text-muted);
    cursor: pointer;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ri-insurance-toggle:hover {
    border-color: rgba(46, 224, 255, 0.4);
    color: var(--ri-text);
}

.ri-insurance-toggle.is-selected {
    background: rgba(46, 224, 255, 0.12);
    border-color: var(--ri-primary);
    color: var(--ri-primary);
    box-shadow: 0 0 0 1px rgba(46, 224, 255, 0.35) inset;
}

.ri-insurance-toggle:active {
    transform: scale(0.97);
}

/* The checkbox itself stays in the accessibility tree (tab order, screen readers,
   native toggling) but is visually replaced by the label's own look — this is NOT
   display:none/visibility:hidden, both of which would remove it from keyboard/AT
   navigation too. */
.ri-insurance-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ri-insurance-toggle:has(input:focus-visible) {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

/* Routes.razor's <FocusOnNavigate Selector="h1" /> programmatically focuses the page's h1 after
   every navigation, purely so screen readers announce it — but browsers draw a visible focus
   ring on it too, which reads as a stray box around the heading since it isn't a real
   interactive element. Scoped to h1 only, so real keyboard focus rings elsewhere (links,
   buttons, inputs) are untouched. */
h1:focus {
    outline: none;
}

.ri-toggle-svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.ri-insurance-toggle-label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Contact form, two steps: who the cover is for, then the details. Each step slides in (from the
   right going forwards, from the left going back) and the progress bars fill as you go. */
.ri-form-progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 24px;
}

.ri-form-progress-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--ri-line);
    overflow: hidden;
    position: relative;
}

.ri-form-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ri-secondary), var(--ri-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ri-form-progress-bar.is-done::after {
    transform: scaleX(1);
}

.ri-form-step {
    animation: ri-step-in-forward 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ri-form-step.is-back {
    animation-name: ri-step-in-back;
}

@keyframes ri-step-in-forward {
    from {
        opacity: 0;
        transform: translateX(32px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ri-step-in-back {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ri-form-step-caption {
    display: block;
    color: var(--ri-primary);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ri-form-step-title {
    margin: 4px 0 6px;
    font-family: var(--ri-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ri-text);
}

/* Focused programmatically on a step change (for screen readers), so no focus ring on a heading. */
.ri-form-step-title:focus {
    outline: none;
}

.ri-form-step-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end; /* off to the right, apart from the reading text, where the eye finds a control */
    gap: 8px;
    margin-bottom: 16px;
}

/* What was picked on step 1, as a pill button: the way back to change the choice. */
.ri-form-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px 5px 14px;
    border: 1px solid rgba(46, 224, 255, 0.35);
    border-radius: 999px;
    background: rgba(46, 224, 255, 0.08);
    color: var(--ri-primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ri-form-choice:hover {
    border-color: var(--ri-primary);
    background: rgba(46, 224, 255, 0.14);
}

.ri-form-choice:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

.ri-form-choice:disabled {
    cursor: default;
    opacity: 0.6;
}

.ri-form-choice-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    background: rgba(46, 224, 255, 0.16);
    color: var(--ri-text);
    font-size: 0.75rem;
}

.ri-form-choice-change .mud-icon-root {
    font-size: 0.95rem;
}

.ri-form-step-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

/* Sections that appear because of the step 1 choice fade up into place. */
.ri-form-reveal {
    animation: ri-reveal 0.45s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ri-reveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ri-form-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    background: rgba(24, 32, 44, 0.72);
    color: var(--ri-text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.ri-form-note .mud-icon-root {
    flex-shrink: 0;
    color: var(--ri-secondary);
}

/* "For me" / "For my business": text-only pill toggles (one, both or neither). Outlined when off, filled cyan when on;
   no icons. The checkbox inside is visually hidden but real, so keyboard and screen readers work. The pills sit
   side by side, and share the row evenly on a phone. */
.ri-line-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ri-line-chip {
    position: relative;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    background: transparent;
    border: 1.5px solid rgba(46, 224, 255, 0.28);
    border-radius: 999px;
    color: var(--ri-text);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.25s ease;
}

.ri-line-chip:hover {
    border-color: rgba(46, 224, 255, 0.7);
    background: rgba(46, 224, 255, 0.07);
}

.ri-line-chip.is-selected {
    background: var(--ri-primary);
    border-color: var(--ri-primary);
    color: var(--ri-background);
    box-shadow: 0 8px 22px -10px rgba(46, 224, 255, 0.7);
}

.ri-line-chip:active {
    transform: scale(0.97);
}

.ri-line-chip input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ri-line-chip:has(input:focus-visible) {
    outline: 2px solid var(--ri-primary);
    outline-offset: 3px;
}

.ri-line-chip-title {
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
}

.ri-line-chips-note {
    display: block;
    margin-top: 12px;
}

@media (max-width: 599px) {
    .ri-line-chip {
        flex: 1 1 0;
        padding: 0 14px;
    }

    .ri-line-chip-title {
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ri-form-step,
    .ri-form-reveal {
        animation: none;
    }

    .ri-form-progress-bar::after,
    .ri-line-chip {
        transition: none;
    }
}

.ri-field-error {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--ri-accent);
}

.ri-contact-panel {
    padding: 32px;
}

.ri-contact-info {
    padding: 32px;
}

.ri-contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

/* ------------------------------ Page headers --------------------------------- */

.ri-page-hero {
    padding: 48px 0 32px;
    border-bottom: 1px solid var(--ri-line);
}

.ri-page-title {
    margin-top: 4px;
}

.ri-notfound {
    max-width: 620px;
    margin: 96px auto;
    padding: 0 24px;
    text-align: center;
}

/* ============================== Breakpoints ================================= */

@media (max-width: 959.98px) {
    .ri-main { padding-top: 80px; }
    .ri-section { padding: 48px 0; }
    .ri-hero { padding: 20px 0 20px; }
    .ri-section-heading { margin-left: auto; margin-right: auto; text-align: center; }
    .ri-heading-underline { margin-left: auto; margin-right: auto; }
    .ri-section-lead { margin-left: auto; margin-right: auto; text-align: center; }
    .ri-cta-banner { justify-content: center; text-align: center; }
    .ri-partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
    .ri-partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .ri-partners-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
    .ri-appbar-inner { padding-top: 4px; padding-bottom: 4px; }
    .ri-brand-logo { height: 32px; }
    .ri-cta-banner { padding: 24px; }
    .ri-panel-card, .ri-product-card, .ri-feature-card, .ri-step-card, .ri-stat-panel,
    .ri-contact-panel, .ri-contact-info {
        padding: 20px;
    }
}

/* Respect the safe-area on notched devices — relevant now on mobile browsers and
   directly relevant once this UI runs inside a MAUI BlazorWebView on iOS/Android. */
.ri-appbar {
    padding-top: env(safe-area-inset-top, 0px);
}

.ri-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* --- Profile (read-only view) and the referral link ----------------------------------------- */

.ri-profile-dl {
    margin: 0 0 16px;
    display: grid;
    gap: 0;
}

.ri-profile-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ri-line);
}

.ri-profile-dl dt {
    color: var(--ri-text-muted);
    font-size: 0.875rem;
}

.ri-profile-dl dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
    overflow-wrap: anywhere;
    letter-spacing: 0.02em;
}

/* One person behind a business, in the business editor. */
.ri-member-card {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    background: var(--ri-surface-alt);
}

.ri-referral {
    margin-top: 32px;
    padding: 20px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    background: var(--ri-surface-alt);
}

.ri-referral-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ri-referral-copy {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 599px) {
    .ri-profile-dl > div {
        flex-direction: column;
        gap: 2px;
    }

    .ri-profile-dl dd {
        text-align: left;
    }

    .ri-referral-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Referral cookie prompt ------------------------------------------------------------------ */

.ri-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1400;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--ri-surface);
    border: 1px solid var(--ri-primary);
    border-radius: var(--ri-radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ri-consent-icon {
    flex: none;
    font-size: 2rem !important;
}

.ri-consent-body {
    flex: 1;
    min-width: 0;
}

.ri-consent-title {
    font-weight: 600;
}

.ri-consent-text {
    color: var(--ri-text-muted);
    margin-top: 2px;
}

.ri-consent-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ri-consent-actions a.mud-button {
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 599px) {
    .ri-consent {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ri-consent-icon {
        display: none;
    }

    .ri-consent-actions {
        justify-content: flex-end;
    }
}

/* --- The client app (/app: AppLayout) ----------------------------------------------------- */

/* Computers: a fixed sidebar with every place; the page scrolls beside it. Phones and tablets: a slim top bar and a
   bottom bar (tabs + More), see below. */
.ri-app-logo {
    height: 32px;
}

.ri-app-sidebar {
    display: none;
}

.ri-app-topbar {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    background: rgba(16, 21, 30, 0.88);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ri-app-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* A place in the sidebar or in More (a link or a button that looks like one). */
.ri-app-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--ri-radius-md);
    background: none;
    color: var(--ri-text-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ri-app-nav-item:hover {
    color: var(--ri-text);
    background: rgba(255, 255, 255, 0.04);
}

.ri-app-nav-item.is-current {
    color: var(--ri-primary);
    background: rgba(46, 224, 255, 0.12);
}

.ri-app-nav-item:focus-visible,
.ri-app-tab:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

@media (min-width: 960px) {
    .ri-app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 248px;
        padding: 20px 12px;
        background: rgba(16, 21, 30, 0.92);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        overflow-y: auto;
    }

    .ri-app-sidebar-brand {
        display: block;
        padding: 4px 10px 20px;
    }

    .ri-app-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ri-app-sidebar-account {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ri-client-app .ri-scroll-region {
        left: 248px;
    }

    .ri-app-topbar,
    .ri-app-tabs,
    .ri-app-sheet,
    .ri-app-sheet-backdrop {
        display: none !important;
    }

    .ri-app-main {
        padding-top: 16px;
        padding-bottom: 48px;
    }
}

/* Phones and tablets: the first places as tabs within thumb reach (clear of the home indicator), then More. The number
   of columns comes from the layout (one per tab, plus More). */
.ri-app-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: grid;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 21, 30, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ri-app-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border: 0;
    border-radius: var(--ri-radius-md);
    background: none;
    color: var(--ri-text-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ri-app-tab.is-current {
    color: var(--ri-primary);
}

.ri-app-tab.is-current .mud-icon-root {
    filter: drop-shadow(0 0 8px rgba(46, 224, 255, 0.45));
}

/* More: a sheet that slides up above the bottom bar with the remaining places and the account actions. */
.ri-app-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(5, 8, 12, 0.55);
    animation: ri-fade-in 0.2s ease both;
}

.ri-app-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 1160;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 12px 12px;
    background: var(--ri-surface);
    border-top: 1px solid var(--ri-line);
    border-radius: 20px 20px 0 0;
    animation: ri-sheet-up 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ri-app-sheet-handle {
    width: 40px;
    height: 4px;
    margin: 4px auto 10px;
    border-radius: 2px;
    background: var(--ri-line);
}

@keyframes ri-sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
    .ri-app-sheet,
    .ri-app-sheet-backdrop {
        animation: none;
    }
}

/* The one offer at the top of My quotes (install the app, or turn on notifications). */
.ri-app-offer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 14px 12px 14px 16px;
    border: 1px solid rgba(46, 224, 255, 0.35);
    border-radius: var(--ri-radius-md);
    background: linear-gradient(120deg, rgba(46, 224, 255, 0.12), rgba(78, 144, 202, 0.08));
    animation: ri-reveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ri-app-offer-icon {
    flex-shrink: 0;
    color: var(--ri-primary);
}

.ri-app-offer-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--ri-text-muted);
}

.ri-app-offer-text strong {
    color: var(--ri-text);
    font-size: 0.95rem;
}

.ri-app-offer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* A plain button (its click must reach the browser directly for the permission prompt), styled like the app's filled buttons. */
.ri-app-offer-button {
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ri-primary);
    color: var(--ri-background);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ri-app-offer-button:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

/* Profile: notifications on this device. */
.ri-notifications-card {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    background: rgba(24, 32, 44, 0.72) !important;
}

.ri-notifications-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ri-notifications-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--ri-text-muted);
}

.ri-notifications-text strong {
    color: var(--ri-text);
}

/* QA diagnostics (QaDiagnostics.razor): QA only, deliberately plain and apart from the customer's settings. */
.ri-qa-diagnostics {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 32px;
    padding: 12px 14px;
    border: 1px dashed var(--ri-line);
    border-radius: var(--ri-radius-md);
    font-size: 0.8rem;
    color: var(--ri-text-muted);
}

.ri-qa-diagnostics strong {
    color: var(--ri-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ri-qa-diagnostics p {
    margin: 0;
    color: var(--ri-text);
}

.ri-notifications-message {
    margin: 8px 0 0 38px;
    font-size: 0.85rem;
    color: var(--ri-text);
}

/* The client app's "new version" / "reinstall" card (AppVersionOffer.razor), above the page content. */
.ri-app-version {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    background: rgba(24, 32, 44, 0.92);
    font-size: 0.9rem;
    color: var(--ri-text-muted);
}

.ri-app-version strong {
    display: block;
    color: var(--ri-text);
}

.ri-app-version ol {
    margin: 6px 0 0;
    padding-left: 18px;
}

.ri-app-version-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .ri-app-offer {
        animation: none;
    }
}

/* Login page: the "Not a client yet?" heading under the sign-in button. */
.ri-login-subhead {
    color: var(--ri-text);
    font-family: var(--ri-font-heading);
    font-weight: 700;
}

/* The invitation page's mobile-digits check: one big field for 4 digits. */
.ri-invitation-label {
    display: block;
    color: var(--ri-text);
    font-family: var(--ri-font-heading);
    font-weight: 700;
    margin-bottom: 4px;
}

.ri-invitation-digits {
    width: 9ch;
    padding: 10px 14px;
    font-size: 1.6rem;
    letter-spacing: 0.4em;
    text-align: center;
    color: var(--ri-text);
    background: transparent;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
}

.ri-invitation-digits:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* --- Client app pages: My quotes (tiles), a quote's own page, My documents, the document viewer ---------------------- */
.ri-app-page {
    padding-top: 24px;
}

.ri-app-page-head {
    margin-bottom: 20px;
}

.ri-app-page-head .ri-section-lead {
    text-align: left;
    margin: 0;
}

.ri-app-page-title {
    font-size: clamp(1.7rem, 4vw, 2.3rem) !important;
    margin-bottom: 4px !important;
}

.ri-back-link {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    color: var(--ri-text-muted) !important;
    font-weight: 600;
    font-size: 0.9rem;
}

.ri-back-link:hover {
    color: var(--ri-primary) !important;
}

/* Filters above the tiles: what needs the client first. */
.ri-quote-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ri-quote-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--ri-line);
    border-radius: 999px;
    background: none;
    color: var(--ri-text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.ri-quote-filter span {
    opacity: 0.7;
}

.ri-quote-filter.is-current {
    border-color: rgba(46, 224, 255, 0.5);
    background: rgba(46, 224, 255, 0.12);
    color: var(--ri-primary);
}

.ri-quote-filter:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

/* Tiles: one column on phones, two on tablets, three on computers. */
.ri-quote-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.ri-quote-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
    padding: 18px 18px 14px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
    color: var(--ri-text);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ri-quote-tile:hover {
    border-color: rgba(46, 224, 255, 0.45);
    transform: translateY(-2px);
}

.ri-quote-tile:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

.ri-quote-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ri-quote-tile-insurer {
    font-family: var(--ri-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.ri-quote-tile-meta {
    color: var(--ri-text-muted);
    font-size: 0.85rem;
}

.ri-quote-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.ri-quote-tile-price {
    font-family: var(--ri-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

.ri-quote-tile-price small {
    color: var(--ri-text-muted);
    font-family: var(--ri-font-body);
    font-size: 0.75rem;
    font-weight: 500;
}

.ri-quote-tile-chevron {
    color: var(--ri-text-muted);
}

/* Where a quote stands. */
.ri-quote-status {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ri-quote-status.is-waiting {
    background: rgba(255, 193, 77, 0.16);
    color: #FFC14D;
}

.ri-quote-status.is-preparing {
    background: rgba(140, 160, 179, 0.16);
    color: var(--ri-text-muted);
}

.ri-quote-status.is-accepted {
    background: rgba(74, 222, 128, 0.14);
    color: #4ADE80;
}

.ri-quote-status.is-declined {
    background: rgba(255, 77, 109, 0.14);
    color: var(--ri-accent);
}

/* A quote's own page: price, the quotation and the decision on the left; "what matters" beside it (below on phones). */
.ri-quote-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ri-quote-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.ri-quote-detail-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

@media (min-width: 1200px) {
    .ri-quote-detail {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
    }
}

.ri-quote-price-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ri-quote-price-amount {
    font-family: var(--ri-font-heading);
    font-size: 2rem;
    font-weight: 700;
}

.ri-quote-breakdown {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--ri-line);
}

.ri-quote-breakdown-line,
.ri-quote-breakdown-detail {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.ri-quote-breakdown-line dt {
    font-weight: 600;
}

.ri-quote-breakdown-detail {
    padding-left: 12px;
    color: var(--ri-text-muted);
    font-size: 0.9rem;
}

.ri-quote-breakdown dd {
    margin: 0;
}

.ri-quote-decision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The in-page document viewer. */
.ri-pdf-viewer {
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
    overflow: hidden;
}

.ri-pdf-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--ri-line);
}

.ri-pdf-toolbar-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ri-pdf-toolbar-meta {
    color: var(--ri-text-muted);
    font-size: 0.8rem;
}

.ri-pdf-canvas {
    max-height: 75vh;
    overflow: auto;
    padding: 12px;
    background: #0B0F15;
}

.ri-pdf-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: var(--ri-text-muted);
}

.ri-pdf-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ri-pdf-page {
    max-width: none;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

/* My documents: a plain list (rows, not cards). */
.ri-document-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
    overflow: hidden;
}

.ri-document-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

.ri-document-row + .ri-document-row {
    border-top: 1px solid var(--ri-line);
}

.ri-document-open {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    color: var(--ri-text);
    text-decoration: none;
}

.ri-document-open:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ri-document-open:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: -2px;
}

.ri-document-icon {
    flex-shrink: 0;
    color: var(--ri-primary);
}

.ri-document-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ri-document-text span {
    color: var(--ri-text-muted);
    font-size: 0.85rem;
}

/* My documents: "Policy documents" (a list per policy) above "Quotations". */
.ri-document-section + .ri-document-section {
    margin-top: 32px;
}

.ri-document-group-title {
    margin: 16px 0 8px !important;
    font-weight: 700 !important;
}

.ri-document-group-title a {
    color: var(--ri-text);
}

.ri-document-group-title span {
    color: var(--ri-text-muted);
    font-weight: 400;
}

.ri-policy-document-list + .ri-document-group-title {
    margin-top: 20px !important;
}

@media (prefers-reduced-motion: reduce) {
    .ri-quote-tile {
        transition: none;
    }
}

/* Inside the client app, cards sit in columns and lists: as tall as their content, slightly tighter. */
.ri-app-page .ri-panel-card {
    height: auto;
    padding: 20px;
}

/* Phones: the document's title gets its own line above the zoom and Download buttons. */
@media (max-width: 599.98px) {
    .ri-pdf-toolbar-title {
        flex-basis: 100%;
        white-space: normal;
    }

    .ri-pdf-toolbar-meta {
        margin-right: auto;
    }

    .ri-pdf-canvas {
        padding: 8px;
    }
}

/* A quote's documents: one row each, View (new tab) and Download. */
.ri-quote-documents {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ri-document-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.ri-document-links + .ri-document-links {
    padding-top: 12px;
    border-top: 1px solid var(--ri-line);
}

.ri-document-links-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
}

.ri-document-links-actions {
    display: flex;
    gap: 8px;
}

/* Phones: the buttons go under the title, full width, easy to tap. */
@media (max-width: 599.98px) {
    .ri-document-links-actions {
        flex-basis: 100%;
    }

    .ri-document-links-actions > * {
        flex: 1;
    }
}

/* --- Client app: My policies (dashboard, cards per profile) and a policy's own page ---------------------------------- */
.ri-policy-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.ri-policy-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
}

.ri-policy-stat.is-main {
    grid-column: span 2;
    border-color: rgba(46, 224, 255, 0.45);
}

.ri-policy-stat-label {
    color: var(--ri-text-muted);
    font-size: 0.85rem;
}

.ri-policy-stat-value {
    font-family: var(--ri-font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ri-text);
}

.ri-policy-stat-value.is-small { font-size: 1.2rem; }

.ri-policy-stat-value small {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ri-text-muted);
}

.ri-policy-section { margin-bottom: 28px; }

.ri-policy-section-title {
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
}

/* A policy card: the whole card is a link (stretched underneath), with Amend / Cancel above it. */
.ri-policy-tile { position: relative; }

.ri-policy-tile-link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.ri-policy-tile-link:focus-visible {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

.ri-policy-tile .ri-policy-actions { position: relative; z-index: 2; }

.ri-policy-tile-name { font-weight: 600; }

.ri-policy-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ri-policy-status.is-active { background: rgba(76, 175, 80, 0.18); color: #8BE28F; }
.ri-policy-status.is-ended { background: rgba(255, 255, 255, 0.08); color: var(--ri-text-muted); }
.ri-policy-status.is-pending { background: rgba(255, 183, 77, 0.16); color: #FFCC80; }

.ri-policy-actions .ri-policy-status { align-self: center; }

/* Cancel a policy (/app/policies/{id}/cancel): one card per step. */
.ri-cancel-step { margin-top: 16px; }
.ri-cancel-step-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.ri-cancel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.ri-policy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ri-policy-actions.is-compact {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--ri-line);
}

.ri-policy-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 0;
}

.ri-policy-facts dt {
    color: var(--ri-text-muted);
    font-size: 0.8rem;
}

.ri-policy-facts dd {
    margin: 2px 0 0;
    font-weight: 600;
}

.ri-policy-document {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--ri-line);
}

.ri-policy-document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ri-radius-md);
    background: rgba(46, 224, 255, 0.12);
    color: var(--ri-primary);
    flex: none;
}

.ri-policy-document-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ri-policy-document-actions {
    display: flex;
    gap: 4px;
}

/* A row of My claims / My amendments / My cancellations: the whole row opens its policy. */
a.ri-request-row {
    color: inherit;
    text-decoration: none;
    border-radius: var(--ri-radius-md);
}

a.ri-request-row:first-child { border-top: none; }

a.ri-request-row:hover,
a.ri-request-row:focus-visible {
    background: rgba(46, 224, 255, 0.06);
}

@media (max-width: 600px) {
    .ri-policy-stat.is-main { grid-column: 1 / -1; }
}

/* The "reconnecting" overlay (App.razor). Blazor adds one of components-reconnect-show / -failed / -rejected to
   #components-reconnect-modal; each state shows its own text and button. */
#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 21, 30, 0.72);
    backdrop-filter: blur(2px);
}

.ri-reconnect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 320px;
    padding: 28px 24px;
    border: 1px solid var(--ri-line, #263244);
    border-radius: 16px;
    background: #18202C;
    color: #E8EEF5;
    text-align: center;
}

.ri-reconnect-text { margin: 0; }

.ri-reconnect-button {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: #2EE0FF;
    color: #10151E;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ri-reconnect-when-show,
.ri-reconnect-when-failed,
.ri-reconnect-when-rejected { display: none; }

.components-reconnect-show .ri-reconnect-when-show,
.components-reconnect-failed .ri-reconnect-when-failed,
.components-reconnect-rejected .ri-reconnect-when-rejected { display: block; }

/* Once it has given up, FAISER stops "loading". */
.components-reconnect-failed .ri-reconnect-loader,
.components-reconnect-rejected .ri-reconnect-loader { opacity: .5; }
.components-reconnect-failed .faiser-loader-ring,
.components-reconnect-rejected .faiser-loader-ring,
.components-reconnect-failed .faiser-loader-eye,
.components-reconnect-rejected .faiser-loader-eye { animation: none; }

/* The client app's background: a real deep-space photograph (Firefly, 2026-10-11) instead of the drawn starfield the public
   site uses. A light navy wash keeps cards and text easy to read; on phones (upright, so only a slice of the wide image
   shows) it's aimed at the nebula on the right. 51 KB JPEG. */
.ri-ambient-backdrop--space {
    /* The same sky as the public website (owner review 2026-10-16: the background changed between the site and the app).
       Only the nebula photo (it has its own faint stars): the website's extra star layer would be busy behind the cards. */
    background-image:
        linear-gradient(180deg, rgba(5, 8, 15, 0.1) 0%, rgba(5, 8, 15, 0.45) 100%),
        url("../images/backgrounds/space-sky.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ri-ambient-backdrop--space::before,
.ri-ambient-backdrop--space::after { display: none; }

@media (max-width: 599.98px) {
    .ri-ambient-backdrop--space { background-position: 78% center; }
}

/* --- Client app: Feedback page ------------------------------------------------------------------------------------ */
.ri-feedback-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ri-feedback-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ri-feedback-label {
    font-weight: 600;
    color: var(--ri-text);
}

.ri-feedback-note {
    display: block;
}

/* The five stars: real radio buttons (hidden) inside labels, so arrow keys and screen readers work. Each is a 52px target. */
.ri-rating {
    display: flex;
    gap: 4px;
}

.ri-rating-star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: rgba(46, 224, 255, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.ri-rating-star .mud-icon-root {
    width: 2.3rem;
    height: 2.3rem;
}

.ri-rating-star:hover {
    background: rgba(46, 224, 255, 0.08);
}

.ri-rating-star.is-on {
    color: var(--ri-primary);
}

.ri-rating-star:active {
    transform: scale(0.92);
}

.ri-rating-star input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ri-rating-star:has(input:focus-visible) {
    outline: 2px solid var(--ri-primary);
    outline-offset: 2px;
}

.ri-rating-caption {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    font-size: 0.9rem;
}

/* A text button that looks like a link (Clear). */
.ri-link-button {
    padding: 6px 8px;
    background: none;
    border: 0;
    color: var(--ri-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* The pills for "Which part of the app" are buttons here (single choice, tap again to clear) and wrap at their own size. */
button.ri-line-chip {
    font: inherit;
    font-weight: 600;
}

button.ri-line-chip:disabled {
    opacity: 0.6;
    cursor: default;
}

.ri-feedback-card .ri-line-chip {
    flex: 0 1 auto;
    min-height: 44px;
    padding: 0 20px;
}

.ri-feedback-actions {
    display: flex;
    justify-content: flex-end;
}

.ri-feedback-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.ri-feedback-thanks-icon {
    width: 3.2rem !important;
    height: 3.2rem !important;
}

.ri-feedback-thanks-title {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
}

.ri-feedback-thanks .ri-section-lead {
    text-align: center;
    margin: 0 auto;
}

.ri-feedback-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 599.98px) {
    .ri-feedback-actions .mud-button-root {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ri-rating-star {
        transition: none;
    }
}

/* Make a claim (/app/policies/{id}/claim): "What happened?" as tappable cards, then one upload card per document or photo. */
.ri-claim-types { display: grid; gap: 12px; }

.ri-claim-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.ri-claim-type > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ri-claim-type:hover, .ri-claim-type:focus-visible { border-color: var(--ri-primary); }
.ri-claim-type:focus-visible { outline: 2px solid var(--ri-primary); outline-offset: 2px; }

/* Amend policy (/app/policies/{id}/amend): a card per cover with Change / Remove, then the covers that can be added. */
.ri-amend-cover {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ri-amend-cover > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ri-amend-cover-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ri-amend-add { display: flex; flex-wrap: wrap; gap: 8px; }
.ri-amend-type-help { margin: -4px 0 6px 44px; }

.ri-claim-card {
    background: var(--ri-surface);
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md);
    padding: 16px;
}

.ri-claim-card.is-complete { border-color: rgba(76, 175, 80, 0.55); }

.ri-claim-card-head { display: flex; align-items: center; gap: 12px; }

.ri-claim-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--ri-radius-md);
    background: rgba(46, 224, 255, 0.12);
    color: var(--ri-primary);
}

.ri-claim-card-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.ri-claim-count {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(255, 183, 77, 0.16);
    color: #FFCC80;
}

.ri-claim-count.is-done { background: rgba(76, 175, 80, 0.18); color: #8BE28F; }

.ri-claim-card-help { margin-top: 8px !important; }

.ri-claim-files { display: grid; gap: 10px; margin-top: 12px; }

.ri-claim-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ri-claim-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--ri-radius-md);
    flex: none;
    background: var(--ri-surface-alt);
}

.ri-claim-thumb.is-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--ri-text-muted); }

.ri-claim-file-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ri-claim-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.ri-claim-file-actions { display: flex; align-items: center; gap: 4px; }

.ri-claim-add-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }

.ri-claim-button, .ri-claim-drop, .ri-claim-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: var(--ri-radius-md);
}

.ri-claim-button { padding: 10px 16px; background: var(--ri-primary); color: #0B1118; font-weight: 600; }

.ri-claim-drop {
    flex: 1 1 220px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px dashed var(--ri-text-muted);
    color: var(--ri-text-muted);
}

.ri-claim-drop:hover, .ri-claim-drop:focus-within { border-color: var(--ri-primary); color: var(--ri-primary); }
.ri-claim-button:focus-within, .ri-claim-link:focus-within { outline: 2px solid var(--ri-primary); outline-offset: 2px; }

/* The real file input covers the drop area (invisible), so dropping a file and tapping both work in every browser. */
.ri-claim-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.ri-claim-link { padding: 4px 8px; color: var(--ri-primary); font-size: 0.85rem; font-weight: 600; }

.ri-claim-button.is-disabled, .ri-claim-drop.is-disabled, .ri-claim-link.is-disabled { opacity: 0.5; pointer-events: none; }

.ri-claim-missing { margin: 6px 0 0; padding-left: 20px; }

.ri-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* An insurer's benefit sheet on the quote page (amendments phase 4). */
.ri-quote-benefits { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* --- Client app: Home (calm design, design-concepts 01 + 03; docs/client-app.md "Home and landing") ------------------ */
.ri-home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 0;
    margin-bottom: 24px;
    border: 1px solid rgba(46, 224, 255, 0.28);
    border-radius: var(--ri-radius-lg);
    background: linear-gradient(135deg, rgba(31, 40, 54, 0.85), rgba(16, 21, 30, 0.6));
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.ri-home-hero-text { position: relative; padding-bottom: 24px; min-width: 0; }

.ri-home-greeting { margin: 0 !important; font-size: clamp(1.75rem, 5vw, 2.75rem) !important; line-height: 1.15 !important; }

.ri-home-hero-lead { margin: 6px 0 0; color: var(--ri-primary); }

/* A comet-like cyan light trail across the hero (concept 02), behind the text. */
.ri-home-hero-trail {
    position: absolute;
    inset: -40% -10% auto 20%;
    height: 140%;
    background: radial-gradient(ellipse 60% 18% at 55% 50%, rgba(46, 224, 255, 0.22), transparent 70%);
    transform: rotate(-12deg);
    pointer-events: none;
}

.ri-home-total {
    margin: 12px 0 0;
    white-space: nowrap;
    font-family: var(--ri-font-heading);
    font-size: clamp(1.75rem, 8vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.ri-home-total small, .ri-home-profile-price small { font-size: 0.9rem; font-weight: 400; color: var(--ri-text-muted); }

.ri-home-total-sub { margin: 6px 0 0; color: var(--ri-text-muted); }

/* FAISER peeks up from the hero's bottom edge (decoration only). */
/* A fixed height (not a share of the width) so he always shows head and shoulders: with a short hero (a client without
   cover yet) the old sizing cut him off at the top of his head (owner review 2026-10-16). */
.ri-home-faiser {
    flex: none;
    height: 250px;
    width: auto;
    margin-bottom: -64px;
    align-self: flex-end;
    filter: drop-shadow(0 0 24px rgba(46, 224, 255, 0.25));
}

@media (min-width: 600px) {
    .ri-home-hero { min-height: 196px; }
}

/* "Let's get you covered": the three steps for a client without cover yet. */
.ri-home-start {
    padding: 20px 22px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
}

.ri-home-start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.ri-home-start-steps li { display: flex; gap: 14px; align-items: flex-start; }

.ri-home-start-number {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ri-line);
    color: var(--ri-text-muted);
    font-family: var(--ri-font-heading);
    font-weight: 700;
}

.ri-home-start-steps li.is-current .ri-home-start-number { border-color: var(--ri-primary); color: var(--ri-primary); }

.ri-home-start-text { display: flex; flex-direction: column; gap: 2px; }

.ri-home-section { margin-bottom: 28px; }

.ri-home-section-title { font-size: 1.15rem !important; margin: 0 0 12px !important; }

.ri-home-calm { margin: 0; color: var(--ri-text-muted); }

.ri-home-needs { display: grid; gap: 10px; }

.ri-home-need, .ri-home-progress a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md, 14px);
    background: rgba(24, 32, 44, 0.72);
    color: var(--ri-text);
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ri-home-need-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ri-primary); box-shadow: 0 0 10px var(--ri-primary); }

.ri-home-need-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.ri-home-progress a { flex-direction: column; align-items: flex-start; gap: 2px; }

.ri-home-need-title { font-weight: 600; }

.ri-home-need-detail { color: var(--ri-text-muted); font-size: 0.875rem; }

.ri-home-need-chevron { color: var(--ri-text-muted); }

.ri-home-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.ri-home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.ri-home-stat, .ri-home-profile, .ri-home-action {
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
    backdrop-filter: blur(8px);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ri-home-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: var(--ri-text); text-decoration: none; }

.ri-home-stat-value { font-family: var(--ri-font-heading); font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }

.ri-home-stat-label { display: flex; align-items: center; gap: 6px; color: var(--ri-primary); font-size: 0.8rem; font-weight: 600; }

.ri-home-stat-sub { color: var(--ri-text-muted); font-size: 0.8rem; }

/* A profile's share of the monthly total as a ring (concept 02). */
.ri-home-ring {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: conic-gradient(var(--ri-primary) calc(var(--p, 0) * 1%), rgba(46, 224, 255, 0.12) 0);
    box-shadow: 0 0 18px rgba(46, 224, 255, 0.18);
}

.ri-home-ring > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ri-surface);
    font-family: var(--ri-font-heading);
    font-weight: 700;
}

.ri-home-columns { display: grid; gap: 0 24px; }

.ri-home-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.ri-home-profile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; color: var(--ri-text); text-decoration: none; }

.ri-home-profile-kind { color: var(--ri-primary); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

.ri-home-profile-name { font-weight: 600; }

.ri-home-profile-price { font-family: var(--ri-font-heading); font-size: 1.25rem; font-weight: 700; margin-top: 6px; }

.ri-home-profile-meta { color: var(--ri-text-muted); font-size: 0.85rem; }

/* Big touch tiles, two by two on phones; only "Make a claim" (or My quotes) is filled. */
.ri-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.ri-home-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 96px;
    padding: 16px;
    color: var(--ri-text);
    font-weight: 600;
    text-decoration: none;
}

.ri-home-action .mud-icon-root { color: var(--ri-primary); }

.ri-home-action.is-main { background: var(--ri-primary); border-color: var(--ri-primary); color: var(--ri-background); }

.ri-home-action.is-main .mud-icon-root { color: var(--ri-background); }

/* The glow belongs to the card under the pointer or keyboard focus only, never to every card at once. */
a.ri-home-stat:hover, a.ri-home-stat:focus-visible,
.ri-home-need:hover, .ri-home-progress a:hover, .ri-home-profile:hover, .ri-home-action:hover,
.ri-home-need:focus-visible, .ri-home-progress a:focus-visible, .ri-home-profile:focus-visible, .ri-home-action:focus-visible {
    border-color: rgba(46, 224, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(46, 224, 255, 0.25), 0 8px 28px rgba(46, 224, 255, 0.14);
}

/* On wider screens "Needs you" becomes a row of pills (concept 01); phones keep full-width rows (concept 03). */
@media (min-width: 720px) {
    .ri-home-needs { display: flex; flex-wrap: wrap; }
    .ri-home-need { border-radius: 999px; padding: 10px 18px; }
}

@media (min-width: 960px) {
    .ri-home-columns { grid-template-columns: minmax(0, 1fr) 300px; }
    .ri-home-hero { padding: 32px 40px 0; }
    .ri-home-hero-text { padding-bottom: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
    .ri-home-stat { animation: ri-home-rise 420ms ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
    .ri-home-need-dot { animation: ri-home-breathe 2.4s ease-in-out infinite; }

    @media (hover: hover) {
        .ri-home-need:hover, .ri-home-profile:hover, .ri-home-action:hover, .ri-home-progress a:hover { transform: translateY(-3px); }
    }
}

/* Movement only, never starting transparent: a browser that holds animations back (a background tab) left the cards
   invisible, an empty hole on Home (owner review 2026-10-16). */
@keyframes ri-home-rise {
    from { transform: translateY(10px); }
    to { transform: none; }
}

@keyframes ri-home-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

/* --- Client app: a quote's page (concept 04: hero card with the price, one main action, the tracker; cards below) ------ */
.ri-quote-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid rgba(46, 224, 255, 0.35);
    border-radius: var(--ri-radius-lg);
    background: linear-gradient(135deg, rgba(31, 40, 54, 0.9), rgba(16, 21, 30, 0.65));
    box-shadow: 0 0 40px rgba(46, 224, 255, 0.08);
    backdrop-filter: blur(10px);
}

.ri-quote-hero-main { min-width: 0; flex: 1; }

.ri-quote-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.ri-quote-hero-insurer { font-size: 1.25rem !important; margin: 0 !important; }

.ri-quote-hero-meta { margin: 4px 0 0; color: var(--ri-text-muted); font-size: 0.875rem; }

.ri-quote-hero-headline { margin: 16px 0 0; font-size: 1.15rem; }

.ri-quote-hero-price {
    margin: 4px 0 0;
    font-family: var(--ri-font-heading);
    font-size: clamp(2.25rem, 8vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.ri-quote-hero-price small { font-size: 1rem; font-weight: 400; color: var(--ri-text-muted); }

.ri-quote-hero-year { margin: 4px 0 0; color: var(--ri-text-muted); }

.ri-quote-hero .ri-quote-decision { margin-top: 20px; }

.ri-quote-hero-note { margin-top: 12px !important; color: var(--ri-text-muted); max-width: 60ch; }

.ri-glow-button { box-shadow: 0 0 18px rgba(46, 224, 255, 0.45) !important; }

/* Requested -> Quoted -> Accept -> Covered: a row on phones, a column beside the price on wider screens. */
.ri-quote-tracker { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }

.ri-quote-tracker li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ri-text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.ri-quote-tracker-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ri-line);
    border-radius: 50%;
    background: var(--ri-surface);
}

.ri-quote-tracker li.is-done { color: var(--ri-text); }
.ri-quote-tracker li.is-done .ri-quote-tracker-dot { border-color: var(--ri-primary); background: var(--ri-primary); color: var(--ri-background); }
.ri-quote-tracker li.is-current { color: var(--ri-primary); font-weight: 600; }
.ri-quote-tracker li.is-current .ri-quote-tracker-dot { border-color: var(--ri-primary); box-shadow: 0 0 12px rgba(46, 224, 255, 0.6); }

/* The line between the dots. */
.ri-quote-tracker li + li::before {
    content: "";
    position: absolute;
    top: 11px;
    right: calc(50% + 14px);
    width: calc(100% - 20px);
    height: 2px;
    background: var(--ri-line);
}

.ri-quote-tracker li.is-done + li::before, .ri-quote-tracker li.is-done + li.is-current::before { background: var(--ri-primary); }

.ri-quote-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }

.ri-quote-card {
    padding: 16px 18px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
    backdrop-filter: blur(8px);
}

.ri-quote-card-title { margin: 0 0 10px; font-family: var(--ri-font-heading); font-size: 1rem; font-weight: 600; }

.ri-quote-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.ri-quote-card-list li { display: flex; align-items: flex-start; gap: 8px; }

.ri-quote-card-list .mud-icon-root { color: var(--ri-primary); flex: none; margin-top: 2px; }

.ri-quote-card-amount { margin-left: auto; color: var(--ri-text-muted); white-space: nowrap; font-size: 0.875rem; }

.ri-quote-card-big { margin: 0; font-family: var(--ri-font-heading); font-size: 2.25rem; font-weight: 700; line-height: 1.1; }

.ri-quote-card-note { margin: 4px 0 0; color: var(--ri-text-muted); font-size: 0.85rem; }

@media (min-width: 720px) {
    .ri-quote-hero { flex-direction: row; align-items: stretch; padding: 28px 32px; }

    .ri-quote-tracker { flex-direction: column; justify-content: center; gap: 22px; padding-left: 28px; border-left: 1px solid var(--ri-line); }
    .ri-quote-tracker li { flex: none; flex-direction: row; text-align: left; font-size: 0.9rem; }
    .ri-quote-tracker li + li::before { top: -22px; right: auto; left: 11px; width: 2px; height: 22px; }
}

/* --- Client app: a policy's own page (concept 05: the policy as a card, the renewal ring, action tiles, activity) ------- */
.ri-policy-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }

.ri-policy-card {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid rgba(46, 224, 255, 0.55);
    border-radius: var(--ri-radius-lg);
    background: linear-gradient(135deg, #1B2A44 0%, #24477A 55%, #2B5E9A 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(46, 224, 255, 0.12);
    overflow: hidden;
}

/* The diagonal sheen of a premium bank card. */
.ri-policy-card-sheen {
    position: absolute;
    inset: -50% auto -50% -30%;
    width: 60%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.12) 45%, transparent 60%);
    transform: rotate(8deg);
    pointer-events: none;
}

.ri-policy-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ri-policy-card-title { font-size: 1.35rem !important; margin: 0 !important; }

.ri-policy-card-insurer { position: relative; margin: 4px 0 0; color: rgba(255, 255, 255, 0.75); }

.ri-policy-card-price { position: relative; margin: 22px 0 0; font-family: var(--ri-font-heading); font-size: clamp(1.75rem, 6vw, 2.25rem); font-weight: 700; white-space: nowrap; }

.ri-policy-card-price small { font-size: 0.9rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); }

.ri-policy-card-number { position: relative; margin: 6px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; letter-spacing: 0.04em; }

.ri-renewal-ring {
    flex: none;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--ri-primary) calc(var(--p, 0) * 1%), rgba(46, 224, 255, 0.12) 0);
    box-shadow: 0 0 24px rgba(46, 224, 255, 0.2);
}

.ri-renewal-ring > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--ri-background);
    line-height: 1.15;
}

.ri-renewal-ring strong { font-family: var(--ri-font-heading); font-size: 1.9rem; }

.ri-renewal-ring small { color: var(--ri-text-muted); font-size: 0.75rem; }

.ri-policy-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.ri-policy-chips:empty { display: none; }

.ri-policy-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }

.ri-policy-tile-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-lg);
    background: rgba(24, 32, 44, 0.72);
    color: var(--ri-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ri-policy-tile-action .mud-icon-root { color: var(--ri-primary); }

.ri-policy-tile-action.is-main { background: var(--ri-primary); border-color: var(--ri-primary); color: var(--ri-background); box-shadow: 0 0 22px rgba(46, 224, 255, 0.35); }

.ri-policy-tile-action.is-main .mud-icon-root { color: var(--ri-background); }

.ri-policy-tile-action.is-quiet { color: var(--ri-text-muted); }

.ri-policy-tile-action.is-quiet .mud-icon-root { color: var(--ri-text-muted); }

.ri-policy-tile-action:hover, .ri-policy-tile-action:focus-visible {
    border-color: rgba(46, 224, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(46, 224, 255, 0.25), 0 8px 28px rgba(46, 224, 255, 0.14);
}

.ri-policy-columns { display: grid; gap: 16px; }

.ri-policy-columns > .ri-panel-card { margin: 0; }

.ri-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--ri-line); display: grid; gap: 14px; }

.ri-timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; }

.ri-timeline li::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ri-primary);
    box-shadow: 0 0 8px var(--ri-primary);
}

.ri-timeline-what { font-weight: 600; }

.ri-timeline-when { color: var(--ri-text-muted); font-size: 0.85rem; }

@media (min-width: 720px) {
    .ri-policy-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ri-policy-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ri-renewal-ring { margin: 0; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .ri-policy-tile-action:hover, .ri-quote-card:hover { transform: translateY(-3px); }
}

/* Phones: FAISER peeks from the hero's top corner (concept 03) instead of standing beside the text. */
@media (max-width: 599px) {
    .ri-home-hero { display: block; padding-bottom: 0; }
    .ri-home-faiser { position: absolute; top: 10px; right: 6px; width: 88px; height: auto; margin: 0; }
    .ri-home-greeting { padding-right: 84px; }
    .ri-home-hero-lead { padding-right: 84px; }
}

/* ===================== Public website: "Orbit" design (owner, 2026-10-16) =====================
   design-concepts 25 (Orbit hero), 26 (stacked cover cards), 27 (contact). The owner's rules: deep and dark, no milky glass,
   solid cards with real depth, glow only where it matters (none around buttons), FAISER never over text, a background that
   drifts slowly when scrolling. Everything is scoped to .ri-public (MainLayout) so the client app keeps its own look. */

/* The background: the same nebula sky as the client app (owner 2026-10-16: "use the same background for the main website as
   what we have for the client portal"; space-sky.webp, 2752 px so wide screens never enlarge it), and in front of it the
   outline of a dark globe with a soft cyan rim. --ri-scroll (unitless px, set by js/scroll-region.js) moves the sky at 4% and
   the globe at 12% of the page's speed: slow, and the different speeds give depth. The sky layer is taller than the screen so
   it never runs out; the globe's travel is capped so its horizon stays in view. */
.ri-public .ri-ambient-backdrop--space {
    inset: 0 0 -30vh 0;
    transform: translate3d(0, max(calc(var(--ri-scroll, 0) * -0.04px), -30vh), 0);
    will-change: transform;
}

/* The globe: planet Earth at night from orbit, southern Africa's lights under a thin blue atmosphere (owner 2026-10-16: the
   see-through disc "represents nothing ... make it look more like a planet"; images/backgrounds/earth.webp, 3200x762, 140 KB,
   space made transparent so the sky shows above the horizon). Its horizon shows low on the first screen (under the Home hero)
   and rises slowly with the page. Below the photo the planet carries on in its own bottom colour (#050714), so scrolling never
   reveals an edge. --w is the planet's width; the photo is 0.238 of it tall. */
.ri-public .ri-globe {
    --w: max(150vw, 1800px);
    position: absolute;
    left: 50%;
    top: 64vh;
    width: var(--w);
    height: calc(var(--w) * 0.238 + 130vh);
    z-index: -1;
    pointer-events: none;
    background:
        url("../images/backgrounds/earth.webp") center top / 100% auto no-repeat,
        linear-gradient(to bottom, transparent calc(var(--w) * 0.238 - 160px), #050714 calc(var(--w) * 0.238 - 2px));
    transform: translate3d(-50%, max(calc(var(--ri-scroll, 0) * -0.12px), -46vh), 0);
    will-change: transform;
}

@media (max-width: 959.98px) {
    .ri-public .ri-globe { --w: 320vw; top: 78vh; }
}

/* A solid bar: no see-through "milk". */
.ri-public .ri-appbar {
    background-color: #070B12 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #172131;
}

/* Cards: solid, a shade lighter than the sky, lit from above (lighter top edge) and lifted by layered shadows. */
.ri-public .ri-panel-card,
.ri-public .ri-product-card,
.ri-public .ri-feature-card,
.ri-public .ri-step-card,
.ri-public .ri-stat-panel {
    background: linear-gradient(180deg, #151D2A 0%, #0F151F 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #1E2938;
    border-top-color: #33465E;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 22px 44px -16px rgba(0, 0, 0, 0.85);
}

.ri-public .ri-product-card:hover,
.ri-public .ri-feature-card:hover,
.ri-public .ri-step-card:hover {
    transform: translateY(-4px);
    border-color: #2A3A4E;
    border-top-color: rgba(46, 224, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 8px rgba(0, 0, 0, 0.45),
        0 30px 56px -18px rgba(0, 0, 0, 0.9);
}

/* No translucent bands across the page. */
.ri-public .ri-section-alt {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
}

.ri-public .ri-cta-banner {
    background: linear-gradient(180deg, #16202E 0%, #0F151F 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #1E2938;
    border-top-color: #33465E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 26px 50px -18px rgba(0, 0, 0, 0.85);
}

/* No glow around buttons. */
.ri-public .ri-cta-btn,
.ri-public .mud-button-filled { box-shadow: none !important; }

/* --- Home hero: FAISER above the curve of a dark planet ---------------------------------------------------------------- */
.ri-orbit {
    position: relative;
    overflow: hidden;
    min-height: min(680px, 74vh);
    padding: 56px 0 120px;
}

.ri-orbit-inner {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    gap: 24px;
}

.ri-orbit-title { margin-top: 4px; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem) !important; line-height: 1.06 !important; }

.ri-orbit-subtitle { color: var(--ri-text-muted); font-size: 1.08rem; max-width: 540px; margin-top: 20px; line-height: 1.7; }

.ri-orbit .ri-hero-actions { justify-content: flex-start; }

.ri-orbit .ri-hero-trust { justify-content: flex-start; }

.ri-orbit-faiser { display: flex; justify-content: center; }

.ri-orbit-faiser img {
    width: clamp(140px, 22vw, 260px);
    height: auto;
    /* Lit from below by the horizon. */
    filter: drop-shadow(0 26px 34px rgba(46, 224, 255, 0.18)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}

/* The "How it works" cards sit just over the globe's horizon on the first screen. */
.ri-orbit-steps { position: relative; z-index: 1; padding-top: 0; }

.ri-orbit-steps .ri-section-heading { margin-bottom: 8px; }

@media (min-width: 960px) {
    .ri-orbit-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .ri-orbit-faiser { justify-content: center; padding-top: 24px; }
}

@media (max-width: 959.98px) {
    .ri-orbit { padding: 32px 0 96px; text-align: center; min-height: 0; }
    .ri-orbit-subtitle { margin-left: auto; margin-right: auto; }
    .ri-orbit .ri-hero-actions, .ri-orbit .ri-hero-trust { justify-content: center; }
    .ri-orbit-faiser { order: -1; }
}

/* FAISER floats gently (a slow 7 s rise and fall), only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
    .ri-orbit-faiser img { animation: ri-float 7s ease-in-out infinite; }
}

@keyframes ri-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- The covers stacked in 3D ------------------------------------------------------------------------------------------- */
.ri-covers { display: grid; gap: 40px; align-items: center; }

.ri-cover-stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.ri-cover-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid #1E2938;
    border-top-color: #33465E;
    border-radius: 16px;
    background: linear-gradient(180deg, #172131 0%, #0F151F 100%);
    color: var(--ri-text);
    font-family: var(--ri-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 30px -14px rgba(0, 0, 0, 0.85);
    transition: transform 260ms ease, border-color 200ms ease;
}

.ri-cover-card .mud-icon-root { color: var(--ri-primary); flex: none; }

.ri-cover-card:hover, .ri-cover-card:focus-visible { border-top-color: rgba(46, 224, 255, 0.6); }

/* Computers with motion welcome: concept 26's pile. Thick, near-square cards lie flat in an isometric view (tilted back,
   turned), each one lower and further left than the one before, so they form a staggered pile; the slab thickness is a
   second, darker layer just under each card (::after, pushed back in 3D) whose lit edge shows below it. The card under the
   pointer or keyboard focus rises out of the pile. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .ri-covers { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

    .ri-cover-stack {
        display: block;
        position: relative;
        height: 450px;
        perspective: 2200px;
        perspective-origin: 50% 0%;
    }

    .ri-cover-stack li {
        position: absolute;
        width: 230px;
        height: 150px;
        left: calc(50% - var(--i) * 34px);
        top: calc(var(--i) * 58px - 10px);
        transform-style: preserve-3d;
        z-index: calc(10 - var(--i));
    }

    .ri-cover-card {
        position: relative;
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: flex-end;
        gap: 14px;
        /* The label sits on the front edge, the part of each card that shows below the card on top of it. */
        padding: 0 20px 14px;
        border-radius: 14px;
        border: 1px solid #2B3B52;
        border-top-color: #4A6382;
        background: linear-gradient(160deg, #1D283A 0%, #131B28 100%);
        font-size: 1.05rem;
        transform: rotateX(58deg) rotateZ(-38deg);
        transform-style: preserve-3d;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .ri-cover-card .mud-icon-root { font-size: 2rem; }

    .ri-cover-card span { white-space: nowrap; }

    /* The slab's thickness, with its lit front edge. */
    .ri-cover-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(160deg, #3A4E6A 0%, #1A2433 60%);
        transform: translateZ(-9px);
        box-shadow: 0 40px 60px -10px rgba(0, 0, 0, 0.9);
        pointer-events: none;
    }

    .ri-cover-card:hover,
    .ri-cover-card:focus-visible {
        transform: rotateX(58deg) rotateZ(-38deg) translateZ(14px);
        /* Only after the pointer rests on it a moment: sweeping across the pile no longer sets every card off. */
        transition-delay: 180ms;
        border-top-color: rgba(46, 224, 255, 0.7);
    }
}

/* --- Contact: FAISER leans on the top edge of the details card, arms folded -------------------------------------------- */
.ri-peek-host :is(.ri-contact-info, .ri-stat-panel) { position: relative; }
/* About: the card is as tall as what it says, not the whole text column beside it (owner: empty lower half). */
.ri-peek-host .ri-stat-panel { height: auto; }

/* The image ends where his forearms rest: its bottom 10px overlap the card's top border, nothing lower. */
.ri-peek-faiser {
    position: absolute;
    bottom: calc(100% - 10px);
    right: 32px;
    width: 128px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}

/* Room above the card for him. */
.ri-peek-host { padding-top: 128px !important; }

@media (min-width: 960px) {
    /* Side by side with the form: he stands above the card without pushing it down. */
    .ri-peek-host { padding-top: 24px !important; }
    .ri-peek-host .ri-contact-info { margin-top: 0; }
}

/* ===================== Client app: the concepts' finish (owner review 2026-10-16) =====================
   Concepts 01-05 (design-concepts/runway) put every card in dark navy glass with a thin, luminous cyan edge and a soft
   glow; the first build used flat dark boxes with a faint grey border that all but vanished against the sky ("Where's all of
   this in the logged in version?"). One finish for every card in the client app; the main action keeps its solid cyan. */
.ri-client-app :is(.ri-home-stat, .ri-home-profile, .ri-home-action:not(.is-main), .ri-home-need, .ri-home-progress a,
    .ri-home-start, .ri-quote-card, .ri-panel-card, .ri-policy-tile-action:not(.is-main), .ri-quote-tile, .ri-policy-stat) {
    background: linear-gradient(180deg, rgba(22, 34, 52, 0.94) 0%, rgba(12, 20, 32, 0.94) 100%);
    border: 1px solid rgba(46, 224, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 22px rgba(46, 224, 255, 0.10),
        0 18px 36px -18px rgba(0, 0, 0, 0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ri-client-app :is(a.ri-home-stat, .ri-home-profile, .ri-home-action:not(.is-main), .ri-home-need, .ri-home-progress a,
    .ri-quote-card, .ri-policy-tile-action:not(.is-main), .ri-quote-tile):is(:hover, :focus-visible) {
    border-color: rgba(46, 224, 255, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 30px rgba(46, 224, 255, 0.22),
        0 22px 40px -18px rgba(0, 0, 0, 0.9);
}

/* The heroes (Home, a quote): the strongest edge on the page. */
.ri-client-app :is(.ri-home-hero, .ri-quote-hero) {
    border: 1px solid rgba(46, 224, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 40px rgba(46, 224, 255, 0.16),
        0 24px 50px -20px rgba(0, 0, 0, 0.9);
}

/* The main actions glow softly, as in the concepts (Make a claim, Accept). */
.ri-client-app :is(.ri-home-action.is-main, .ri-policy-tile-action.is-main) {
    box-shadow: 0 0 26px rgba(46, 224, 255, 0.35);
}

.ri-client-app .ri-renewal-ring { box-shadow: 0 0 34px rgba(46, 224, 255, 0.35); }

/* --- Home banner: a window into the nebula (concept 02) with FAISER leaning on its bottom edge ------------------------- */
.ri-client-app .ri-home-hero {
    background:
        radial-gradient(ellipse 50% 70% at 78% 40%, rgba(46, 224, 255, 0.18), transparent 70%),
        linear-gradient(90deg, rgba(8, 13, 22, 0.92) 0%, rgba(8, 13, 22, 0.55) 55%, rgba(8, 13, 22, 0.25) 100%),
        url("../images/backgrounds/space-sky.webp") center 40% / cover;
    min-height: 230px;
    padding-bottom: 0;
}

/* The leaning pose (images/faiser-leaning.webp, his forearms along the image's bottom edge) rests on the banner's floor. */
.ri-client-app .ri-home-faiser {
    height: 220px;
    width: auto;
    margin: 0 8px 0 0;
    align-self: flex-end;
    filter: drop-shadow(0 0 26px rgba(46, 224, 255, 0.3));
}

/* Phones: he leans over the banner's top corner (concept 03), outside the card, so he never covers its text. */
@media (max-width: 599.98px) {
    .ri-client-app .ri-home-hero { min-height: 0; overflow: visible; margin-top: 70px; }
    .ri-client-app .ri-home-hero-trail { display: none; }
    .ri-client-app .ri-home-faiser { height: auto; width: 92px; top: auto; bottom: calc(100% - 8px); right: 18px; }
    .ri-client-app .ri-home-greeting, .ri-client-app .ri-home-hero-lead { padding-right: 0; }
}

/* --- Phones: a floating, rounded tab bar (concept 03) ----------------------------------------------------------------- */
@media (max-width: 959.98px) {
    .ri-client-app .ri-app-tabs {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 6px 8px;
        border-radius: 22px;
        background: rgba(10, 16, 26, 0.94);
        border: 1px solid rgba(46, 224, 255, 0.3);
        box-shadow: 0 0 22px rgba(46, 224, 255, 0.12), 0 16px 34px -10px rgba(0, 0, 0, 0.9);
    }
}

/* Softer, slower hover everywhere (owner 2026-10-16: "very sharp currently"): a long ease-out and a smaller lift. */
.ri-client-app :is(.ri-home-stat, .ri-home-profile, .ri-home-action, .ri-home-need, .ri-home-progress a, .ri-quote-card,
    .ri-policy-tile-action, .ri-quote-tile),
.ri-public :is(.ri-product-card, .ri-feature-card, .ri-step-card, .ri-cover-card, .ri-partner-badge) {
    transition:
        transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 650ms ease,
        box-shadow 650ms ease,
        background-color 650ms ease;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .ri-client-app :is(.ri-home-need, .ri-home-profile, .ri-home-action, .ri-home-progress a, .ri-policy-tile-action):hover,
    .ri-public :is(.ri-product-card, .ri-feature-card, .ri-step-card):hover {
        transform: translateY(-2px);
    }
}

/* "Why choose RoboInsure": thin outline icons in a slim cyan ring (owner 2026-10-16: the filled icons in square blocks looked
   poor), the same line style as the rest of the site. */
.ri-public .ri-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(46, 224, 255, 0.4);
    background: radial-gradient(circle at 50% 30%, rgba(46, 224, 255, 0.14), rgba(46, 224, 255, 0.02) 70%);
    color: var(--ri-primary);
    font-size: 1.55rem;
    box-shadow: 0 0 18px rgba(46, 224, 255, 0.12);
}

/* The cover pile eases even more slowly than other cards. */
.ri-public .ri-cover-card { transition-duration: 900ms; }

/* Home banner text: centred vertically and a little larger (owner 2026-10-16); a long first name wraps onto a second line
   instead of running under FAISER. */
.ri-client-app .ri-home-hero { align-items: center; }

.ri-client-app .ri-home-hero-text { padding: 28px 0; align-self: center; }

.ri-client-app .ri-home-greeting {
    font-size: clamp(2rem, 1rem + 2.6vw, 3.1rem) !important;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.ri-client-app .ri-home-hero-lead { font-size: 1.05rem; }

.ri-client-app .ri-home-total-sub { font-size: 1rem; }

/* --- Contact form insurance-type tiles, in the new look (owner 2026-10-16: "match the rest of our latest creations") -----
   Solid raised navy cards with a lit top edge, the icon in the same slim cyan ring as "Why choose RoboInsure", slow soft
   hover. Picked: cyan edge with a soft glow, the ring filled a little, and a small tick in the corner. */
.ri-insurance-toggle {
    gap: 12px;
    padding: 20px 10px 16px;
    background: linear-gradient(180deg, #151D2A 0%, #0F151F 100%);
    border: 1px solid #1E2938;
    border-top-color: #33465E;
    color: #A9B6C8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 28px -18px rgba(0, 0, 0, 0.8);
    transition: transform 650ms cubic-bezier(.22, .61, .36, 1), border-color 650ms cubic-bezier(.22, .61, .36, 1),
                box-shadow 650ms cubic-bezier(.22, .61, .36, 1), color 650ms cubic-bezier(.22, .61, .36, 1);
}

.ri-insurance-toggle:hover {
    transform: translateY(-2px);
    border-color: #2A3A4F;
    border-top-color: rgba(46, 224, 255, 0.55);
    color: #E8EEF6;
}

.ri-insurance-toggle.is-selected {
    background: linear-gradient(180deg, #13263A 0%, #0E1826 100%);
    border-color: rgba(46, 224, 255, 0.55);
    border-top-color: var(--ri-primary);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(46, 224, 255, 0.25), 0 0 22px rgba(46, 224, 255, 0.16), 0 14px 28px -18px rgba(0, 0, 0, 0.8);
}

/* The tick: drawn in CSS so the markup stays one label + checkbox + icon + text. */
.ri-insurance-toggle::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #2A3A4F;
    transition: background-color 650ms ease, border-color 650ms ease;
}

.ri-insurance-toggle.is-selected::after {
    border-color: var(--ri-primary);
    background: var(--ri-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23071019' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.ri-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(46, 224, 255, 0.4);
    background: radial-gradient(circle at 50% 30%, rgba(46, 224, 255, 0.14), rgba(46, 224, 255, 0.02) 70%);
    color: var(--ri-primary);
    box-shadow: 0 0 18px rgba(46, 224, 255, 0.12);
    transition: background 650ms ease, box-shadow 650ms ease;
}

.ri-type-icon .mud-icon-root { font-size: 1.55rem; }

.ri-insurance-toggle.is-selected .ri-type-icon {
    background: radial-gradient(circle at 50% 30%, rgba(46, 224, 255, 0.3), rgba(46, 224, 255, 0.06) 70%);
    box-shadow: 0 0 24px rgba(46, 224, 255, 0.3);
}

.ri-insurance-toggle-label { font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
    .ri-insurance-toggle, .ri-insurance-toggle:hover { transition: none; transform: none; }
}

/* Contact form step 2: "How can we reach you?" between what they need and their details; a step below the step title. */
.ri-form-section-title {
    margin: 12px 0 0;
    padding-top: 20px;
    border-top: 1px solid #1E2938;
    font-family: var(--ri-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ri-text);
}

/* --- Cover pile: the chosen cover's full story (owner 2026-10-16) -------------------------------------------------------
   Pointing at a card, focusing it or tapping it chooses it (Home.razor); its card stays until another is chosen. Phones: text,
   list, then the story. Computers: the story under the section text, the pile beside both. */
.ri-covers { grid-template-areas: "text" "pile" "info"; }
.ri-covers-text { grid-area: text; }
.ri-cover-stack { grid-area: pile; }
.ri-cover-info-stage { grid-area: info; }

button.ri-cover-card {
    width: 100%;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-family: var(--ri-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
}

.ri-cover-card.is-active { border-color: rgba(46, 224, 255, 0.55); border-top-color: var(--ri-primary); }

/* All the stories on one spot: the area is as tall as the longest, so nothing below jumps when another is chosen. */
.ri-cover-info-stage { display: grid; }

.ri-cover-info {
    grid-area: 1 / 1;
    padding: 22px 24px;
    border: 1px solid #1E2938;
    border-top-color: rgba(46, 224, 255, 0.55);
    border-radius: 18px;
    background: linear-gradient(180deg, #151D2A 0%, #0F151F 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 26px rgba(46, 224, 255, 0.08), 0 20px 40px -20px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* Out quickly, then the chosen one in, so two texts never show through each other. */
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.ri-cover-info.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 450ms ease 160ms, transform 450ms cubic-bezier(.22, .61, .36, 1) 160ms, visibility 0s linear 0s;
}

.ri-cover-info-head { display: flex; align-items: center; gap: 14px; }
.ri-cover-info-head .ri-type-icon { flex: none; }
.ri-cover-info-title { margin: 0; font-family: var(--ri-font-heading); font-weight: 700; font-size: 1.2rem; color: var(--ri-text); }
.ri-cover-info-text { margin: 14px 0 10px; color: var(--ri-text-muted); line-height: 1.55; }

.ri-cover-info-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ri-cover-info-points li { display: flex; align-items: center; gap: 10px; color: var(--ri-text); font-size: 0.95rem; }
.ri-cover-info-points .mud-icon-root { color: var(--ri-primary); flex: none; }

.ri-cover-info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.ri-cover-info-link { color: var(--ri-primary); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.ri-cover-info-link:hover { text-decoration: underline; }

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .ri-covers {
        grid-template-areas: "text pile" "info pile";
        grid-template-rows: auto 1fr;
        align-items: start;
        row-gap: 28px;
    }

    /* The pile stands beside both, centred on them. */
    .ri-cover-stack { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ri-cover-info { transition: none; }
}

/* Until a cover is chosen (owner 2026-10-16: none pre-selected), a quiet hint fills the story's spot: same place and fade,
   a dashed outline instead of a lit card, so it reads as "something goes here". Wording follows the device: point or tap. */
.ri-cover-hint {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 24px;
    border: 1px dashed rgba(46, 224, 255, 0.3);
    border-radius: 18px;
    background: rgba(15, 21, 31, 0.55);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.ri-cover-hint.is-active { opacity: 1; visibility: visible; transition: opacity 450ms ease 160ms, visibility 0s linear 0s; }
.ri-cover-hint p { margin: 0; color: var(--ri-text-muted); font-size: 1rem; }
.ri-cover-hint .ri-type-icon { animation: ri-hint-pulse 2.6s ease-in-out infinite; }

@keyframes ri-hint-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(46, 224, 255, 0.1); }
    50% { box-shadow: 0 0 26px rgba(46, 224, 255, 0.35); }
}

.ri-cover-hint-touch { display: none; }
@media (hover: none) {
    .ri-cover-hint-hover { display: none; }
    .ri-cover-hint-touch { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .ri-cover-hint, .ri-cover-hint.is-active { transition: none; }
    .ri-cover-hint .ri-type-icon { animation: none; }
}

/* Phones and the flat list: no shared spot (an empty box as tall as the longest story looked broken), just the hint or the
   chosen story at its own height, fading in. */
@media (max-width: 959.98px), (prefers-reduced-motion: reduce) {
    .ri-cover-info:not(.is-active), .ri-cover-hint:not(.is-active) { display: none; }
    .ri-cover-info.is-active, .ri-cover-hint.is-active { animation: ri-cover-fade-in 450ms ease both; }
    .ri-cover-hint { padding: 18px 20px; flex-direction: row; text-align: left; }
}

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

@media (prefers-reduced-motion: reduce) {
    .ri-cover-info.is-active, .ri-cover-hint.is-active { animation: none; }
}

/* ===================== Client app built to the concept images (owner 2026-10-21) =====================
   "Can't you open up the images I want the system to look like, identify which screens the images represent and just apply
   the changes?" design-concepts/runway: 01 = Home on a computer, 03 = Home on a phone, 04 = a quote's page, 05 = a policy's
   page (02 was the bold alternative to 01). Colours sampled from the images: the sky #09111B; the cards that matter (Home
   numbers, the phone total, the quote hero) a light grey-slate glass #3D4550 to #4E5B66 with a bright cyan edge (#8DCBDD) and
   a soft glow; every other card a darker slate #1B222D to #2E3640 with a faint grey edge. Text in a plain sans (Segoe UI on
   Windows, Roboto on Android, San Francisco on Apple), sentence-case buttons. This block comes last and wins over the earlier
   client-app rules. */
.ri-client-app {
    --ri-font-app: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --ri-font-heading: var(--ri-font-app);
    --ri-font-body: var(--ri-font-app);
    --mud-typography-default-family: var(--ri-font-app);
    --mud-typography-h1-family: var(--ri-font-app);
    --mud-typography-h2-family: var(--ri-font-app);
    --mud-typography-h3-family: var(--ri-font-app);
    --mud-typography-h4-family: var(--ri-font-app);
    --mud-typography-h5-family: var(--ri-font-app);
    --mud-typography-h6-family: var(--ri-font-app);
    --mud-typography-subtitle1-family: var(--ri-font-app);
    --mud-typography-subtitle2-family: var(--ri-font-app);
    --mud-typography-body1-family: var(--ri-font-app);
    --mud-typography-body2-family: var(--ri-font-app);
    --mud-typography-button-family: var(--ri-font-app);
    --mud-typography-caption-family: var(--ri-font-app);
    --mud-typography-overline-family: var(--ri-font-app);
    --mud-typography-button-text-transform: none;
    --mud-typography-button-letterspacing: 0.01em;

    --ri-card-fill: linear-gradient(180deg, rgba(42, 49, 59, 0.9) 0%, rgba(30, 36, 45, 0.9) 100%);
    --ri-card-edge: rgba(255, 255, 255, 0.12);
    --ri-focus-fill: linear-gradient(180deg, rgba(86, 98, 111, 0.78) 0%, rgba(58, 66, 77, 0.78) 100%);
    --ri-focus-edge: rgba(141, 220, 240, 0.85);
    --ri-focus-glow: 0 0 18px rgba(46, 224, 255, 0.28), 0 0 2px rgba(46, 224, 255, 0.6);

    font-family: var(--ri-font-app);
}

.ri-client-app :is(h1, h2, h3, h4, .ri-heading) { font-family: var(--ri-font-app); letter-spacing: -0.01em; }

/* Ordinary cards: dark slate, faint grey edge, no glow. */
.ri-app-shell.ri-client-app :is(.ri-home-profile, .ri-home-action:where(:not(.is-main)), .ri-home-need, :where(.ri-home-progress) a, .ri-home-start,
    .ri-quote-card, .ri-panel-card, .ri-policy-tile-action:where(:not(.is-main)), .ri-quote-tile, .ri-policy-stat, .ri-document-list,
    .ri-notifications-card, .ri-home-needs-strip, .ri-home-actions-section) {
    background: var(--ri-card-fill) !important;
    border: 1px solid var(--ri-card-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 36px -18px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* The cards that matter: light slate glass, bright cyan edge, soft glow. */
.ri-app-shell.ri-client-app :is(.ri-home-stat, .ri-home-total-card, .ri-quote-hero) {
    background: var(--ri-focus-fill) !important;
    border: 1.5px solid var(--ri-focus-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--ri-focus-glow), 0 22px 44px -20px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hover or keyboard focus lights any card a little more. */
.ri-app-shell.ri-client-app :is(a.ri-home-stat, .ri-home-profile, .ri-home-action:where(:not(.is-main)), .ri-home-need, .ri-home-progress a,
    .ri-quote-card, .ri-policy-tile-action:where(:not(.is-main)), .ri-quote-tile):is(:hover, :focus-visible) {
    border-color: rgba(141, 220, 240, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 26px rgba(46, 224, 255, 0.32), 0 22px 40px -18px rgba(0, 0, 0, 0.9);
}

/* Messages on dark cards: light text; the colour stays in the icon and the tint (MudBlazor wrote dark green on dark green). */
.ri-client-app .mud-alert-text-success { color: #C9F5E0; background-color: rgba(0, 153, 97, 0.16); }
.ri-client-app .mud-alert-text-info { color: #DCEAF7; background-color: rgba(78, 144, 202, 0.16); }
.ri-client-app .mud-alert-text-warning { color: #FFE6B3; background-color: rgba(255, 176, 32, 0.14); }
.ri-client-app .mud-alert-text-error { color: #FFD6DA; background-color: rgba(255, 92, 108, 0.14); }
.ri-client-app .mud-alert-text-success .mud-alert-icon { color: #3DDC97; }
.ri-client-app .mud-alert-text-info .mud-alert-icon { color: #7FB7E8; }

/* The install / notifications offer moves in without fading from transparent (it could stay half see-through). */
.ri-client-app .ri-app-offer { animation-name: ri-home-rise; }

/* Pill buttons, as in concepts 01 and 04. */
.ri-client-app .mud-button-root.mud-button-filled,
.ri-client-app .mud-button-root.mud-button-outlined { border-radius: 999px; padding-left: 20px; padding-right: 20px; }

/* --- Phones: the logo on the sky (no band) and a floating tab bar of icons (concept 03) ------------------------------- */
@media (max-width: 959.98px) {
    .ri-client-app .ri-app-topbar {
        position: relative;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        background: transparent;
        border-bottom: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ri-client-app .ri-app-logo { height: 34px; }

    .ri-client-app .ri-app-tabs {
        left: 50%;
        right: auto;
        width: min(calc(100% - 64px), 420px);
        transform: translateX(-50%);
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding: 4px 10px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(60, 70, 82, 0.82), rgba(36, 43, 53, 0.86));
        border: 1.5px solid rgba(141, 220, 240, 0.7);
        box-shadow: 0 0 18px rgba(46, 224, 255, 0.22), 0 16px 34px -10px rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* The labels stay for screen readers. */
    .ri-client-app .ri-app-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ri-client-app .ri-app-tab { padding: 12px 0; color: #9DB0C6; }
    .ri-client-app .ri-app-tab .mud-icon-root { font-size: 1.75rem; }
    .ri-client-app .ri-app-tab.is-current { color: var(--ri-primary); }
}

/* --- Home (concept 01 on computers, 03 on phones) ------------------------------------------------------------------------ */
.ri-client-app .ri-home-head { margin: 4px 0 24px; }

.ri-client-app .ri-home-greeting {
    margin: 0 !important;
    font-size: clamp(2rem, 1.4rem + 1.6vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
}

.ri-client-app .ri-home-sub { margin: 4px 0 0; color: var(--ri-text-muted); font-size: 1rem; }

.ri-client-app .ri-home-columns { display: grid; gap: 16px 22px; }

.ri-client-app .ri-home-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.ri-client-app .ri-home-section { margin: 0; }

.ri-client-app .ri-home-section-title { font-size: 1.15rem !important; font-weight: 600; margin: 0 0 12px !important; }

/* Needs you: a strip with the heading and the items as pills (computers); rows on phones. */
.ri-client-app .ri-home-needs-strip { padding: 14px 18px; border-radius: 18px; }

.ri-client-app .ri-home-needs { display: flex; flex-direction: column; gap: 10px; }

.ri-client-app .ri-home-need {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    color: var(--ri-text);
    font-size: 1.05rem;
    text-decoration: none;
}

.ri-client-app .ri-home-need-title { font-weight: 500; flex: 1; min-width: 0; }

.ri-client-app .ri-home-need-dot { width: 12px; height: 12px; background: var(--ri-primary); box-shadow: 0 0 10px rgba(46, 224, 255, 0.8); }

.ri-client-app .ri-home-calm { margin: 0; color: var(--ri-text-muted); }

/* Phones: the strip itself is no card, its rows are. */
@media (max-width: 719.98px) {
    .ri-app-shell.ri-client-app .ri-home-needs-strip { padding: 0; background: none !important; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .ri-client-app .ri-home-needs-strip .ri-home-section-title { color: var(--ri-text-muted); font-weight: 500 !important; }
}

@media (min-width: 720px) {
    .ri-client-app .ri-home-needs-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .ri-client-app .ri-home-needs-strip .ri-home-section-title { margin: 0 !important; font-size: 1.25rem !important; }
    .ri-client-app .ri-home-needs { flex-direction: row; flex-wrap: wrap; }
    .ri-app-shell.ri-client-app .ri-home-need {
        padding: 9px 18px;
        border-radius: 999px;
        font-size: 1rem;
        background: rgba(110, 118, 128, 0.42) !important;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
    }
    .ri-client-app .ri-home-need-chevron { display: none; }
}

/* Four big numbers. */
.ri-client-app .ri-home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; }

.ri-client-app .ri-home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 160px;
    padding: 20px 12px;
    border-radius: 18px;
    color: var(--ri-text);
    text-align: center;
    text-decoration: none;
    animation: none;
}

.ri-client-app .ri-home-stat-value { font-family: var(--ri-font-app); font-size: clamp(1.6rem, 0.9rem + 1.4vw, 2.4rem); font-weight: 700; line-height: 1.15; white-space: nowrap; }

.ri-client-app .ri-home-stat-label { display: block; color: #C9D3DD; font-size: 1.05rem; font-weight: 400; }

/* A card per profile: the name, the monthly amount, two fact lines and the split bar. */
.ri-client-app .ri-home-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }

.ri-client-app .ri-home-profile { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-radius: 16px; color: var(--ri-text); text-decoration: none; }

.ri-client-app .ri-home-profile-name { font-size: 1.2rem; font-weight: 600; }

.ri-client-app .ri-home-profile-price { margin: 8px 0 8px; font-family: var(--ri-font-app); font-size: 1.6rem; font-weight: 700; }

.ri-client-app .ri-home-profile-price small { font-size: 1rem; font-weight: 400; color: var(--ri-text-muted); }

.ri-client-app .ri-home-profile-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--ri-text-muted); font-size: 0.85rem; text-transform: none; letter-spacing: 0; }

.ri-client-app .ri-home-profile-meta span:last-child { color: #C9D3DD; }

/* The split bar (concepts 01 and 03): cyan, then blue for the next part. */
.ri-client-app .ri-home-split { display: flex; gap: 0; height: 9px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: rgba(78, 144, 202, 0.25); }

.ri-client-app .ri-home-split > span { display: block; min-width: 0; background: var(--ri-primary); }

.ri-client-app .ri-home-split > span:nth-child(even), .ri-client-app .ri-home-split > span.is-rest { background: var(--ri-secondary); }

.ri-client-app .ri-home-progress { display: grid; gap: 10px; }

.ri-client-app .ri-home-progress a { padding: 14px 18px; border-radius: 14px; }

/* Quick actions: a panel of outlined pills on computers (concept 01). */
.ri-client-app .ri-home-side { display: flex; flex-direction: column; min-width: 0; }

.ri-client-app .ri-home-actions-section { padding: 18px; border-radius: 18px; }

.ri-client-app .ri-home-actions-section .ri-home-section-title { font-size: 1.3rem !important; }

.ri-client-app .ri-home-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }

.ri-app-shell.ri-client-app .ri-home-action {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 0;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--ri-text);
    font-weight: 500;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(52, 78, 90, 0.75), rgba(36, 56, 66, 0.75)) !important;
    border: 1.5px solid rgba(141, 220, 240, 0.75);
    box-shadow: 0 0 12px rgba(46, 224, 255, 0.16);
}

.ri-client-app .ri-home-action .mud-icon-root { color: #D5E2EC; flex: none; }

.ri-client-app .ri-home-faiser-stand { display: none; }

.ri-client-app .ri-home-total-card { display: none; }

.ri-client-app .ri-home .ri-app-offer { margin: 24px 0 0; }

@media (min-width: 960px) {
    .ri-client-app .ri-home-columns { grid-template-columns: minmax(0, 1fr) 230px; align-items: start; }
    .ri-client-app .ri-home-faiser-stand { display: block; width: 150px; height: auto; margin: 36px 0 0 auto; filter: drop-shadow(0 0 22px rgba(46, 224, 255, 0.22)); }
}

@media (max-width: 1199.98px) and (min-width: 600px) {
    .ri-client-app .ri-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones (concept 03): one screen. The title, the total card with FAISER peeking over its corner, Needs you, four tiles. */
@media (max-width: 599.98px) {
    .ri-client-app .ri-home-head { margin: 0 0 30px; }
    .ri-client-app .ri-home-greeting { font-size: 1.8rem !important; padding-right: 112px; }
    .ri-client-app .ri-home-sub { display: none; }

    .ri-client-app .ri-home-total-card {
        position: relative;
        display: block;
        margin: 0 0 26px;
        padding: 20px 22px 22px;
        border-radius: 22px;
    }

    .ri-client-app .ri-home-faiser-peek {
        position: absolute;
        right: 22px;
        bottom: calc(100% - 14px);
        width: 104px;
        height: auto;
        filter: drop-shadow(0 0 16px rgba(46, 224, 255, 0.25));
        pointer-events: none;
    }

    .ri-client-app .ri-home-total-label { display: block; color: #AFC0D0; font-size: 1.05rem; }
    .ri-client-app .ri-home-total { margin: 6px 0 0; font-family: var(--ri-font-app); font-size: 2.3rem; font-weight: 700; white-space: nowrap; }
    .ri-client-app .ri-home-total small { font-size: 1.05rem; font-weight: 400; color: #D5E2EC; }
    .ri-client-app .ri-home-total-none { margin: 8px 0 0; color: var(--ri-text-muted); }
    .ri-client-app .ri-home-total-card .ri-home-split { margin-top: 16px; }

    .ri-client-app .ri-home-stats,
    .ri-client-app .ri-home-profiles-section,
    .ri-client-app .ri-home-progress-section { display: none; }

    .ri-app-shell.ri-client-app .ri-home-actions-section { padding: 0; background: none !important; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .ri-client-app .ri-home-actions-section .ri-home-section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ri-client-app .ri-home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .ri-app-shell.ri-client-app .ri-home-action {
        flex-direction: row;
        justify-content: space-between;
        min-height: 78px;
        padding: 16px 18px;
        border-radius: 16px;
        font-size: 1.05rem;
        background: var(--ri-card-fill) !important;
        border: 1px solid var(--ri-card-edge);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .ri-client-app .ri-home-action .mud-icon-root { font-size: 1.9rem; color: #C2D0DD; }

    .ri-app-shell.ri-client-app .ri-home-action.is-main { background: var(--ri-card-fill) !important; color: var(--ri-text); }
}

/* --- A quote's page (concept 04) ---------------------------------------------------------------------------------------- */
/* One column: the hero across the page, three cards under it, the documents, then "What matters most to you?". */
.ri-client-app .ri-quote-detail { grid-template-columns: minmax(0, 1fr); }

.ri-client-app .ri-quote-detail-side { max-width: 640px; }

.ri-client-app .ri-quote-hero { padding: 26px 30px; border-radius: 20px; gap: 24px; }

.ri-client-app .ri-quote-hero-insurer { font-size: 1.6rem !important; font-weight: 700; }

.ri-client-app .ri-quote-hero-meta { color: #AFC0D0; }

.ri-client-app .ri-quote-hero-headline { margin: 14px 0 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 500; }

.ri-client-app .ri-quote-hero-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 6px 0 0;
    font-family: var(--ri-font-app);
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
    line-height: 1.05;
    white-space: normal;
}

.ri-client-app .ri-quote-hero-per { display: flex; flex-direction: column; gap: 2px; }

.ri-client-app .ri-quote-hero-per small { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.9rem); font-weight: 600; color: var(--ri-text); }

.ri-client-app .ri-quote-hero-year { margin: 0; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem); font-weight: 400; color: #9DB0C2; }

.ri-client-app .ri-quote-hero-note { color: #AFC0D0; }

.ri-client-app .ri-glow-button { box-shadow: 0 0 22px rgba(46, 224, 255, 0.6) !important; }

.ri-client-app .ri-quote-decision-actions .mud-button-root { font-size: 1.05rem; padding: 8px 26px; }

.ri-client-app .ri-quote-tracker li { font-size: 1rem; }

@media (min-width: 720px) {
    .ri-client-app .ri-quote-tracker { border-left: 0; padding-left: 12px; min-width: 170px; }
    .ri-client-app .ri-quote-tracker li { font-size: 1.1rem; }
}

.ri-client-app .ri-quote-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }

.ri-client-app .ri-quote-card { padding: 20px 24px; border-radius: 18px; }

.ri-client-app .ri-quote-card-title { font-family: var(--ri-font-app); font-size: 1.35rem; font-weight: 600; margin-bottom: 14px; }

.ri-client-app .ri-quote-card-list { gap: 0; }

.ri-client-app .ri-quote-card-list li { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.02rem; }

.ri-client-app .ri-quote-card-list li:first-child { border-top: 0; padding-top: 0; }

.ri-client-app .ri-quote-card-list .mud-icon-root { color: #AFC0D0; }

/* The excess: one big number in the middle of its card. */
.ri-client-app .ri-quote-card[aria-labelledby="ri-quote-excess"] { text-align: center; }
.ri-client-app .ri-quote-card[aria-labelledby="ri-quote-excess"] .ri-quote-card-title { text-align: left; }
.ri-client-app .ri-quote-card-big { margin-top: 18px; font-family: var(--ri-font-app); font-size: 3.2rem; }
.ri-client-app .ri-quote-card-note { color: #9DB0C2; font-size: 1rem; }

/* --- A policy's page (concept 05) ---------------------------------------------------------------------------------------- */
.ri-client-app .ri-policy-hero { gap: 36px; margin-bottom: 26px; }

.ri-client-app .ri-policy-card { padding: 26px 28px 28px; border: 1.5px solid var(--ri-focus-edge); box-shadow: var(--ri-focus-glow), 0 22px 44px -20px rgba(0, 0, 0, 0.9); background: linear-gradient(120deg, #141C2B 0%, #1B2D48 45%, #24507C 75%, #2C6596 100%); }

.ri-client-app .ri-policy-card-title { font-size: 1.75rem !important; font-weight: 700; }

.ri-client-app .ri-policy-card-insurer { font-size: 1.1rem; }

.ri-client-app .ri-policy-card-price { margin-top: 34px; font-family: var(--ri-font-app); font-size: clamp(2.2rem, 1.5rem + 2vw, 2.9rem); }

.ri-client-app .ri-policy-card-price small { font-size: 1.3rem; }

.ri-client-app .ri-renewal-ring { width: 188px; height: 188px; background: conic-gradient(var(--ri-primary) calc(var(--p, 0) * 1%), rgba(140, 160, 179, 0.18) 0); box-shadow: 0 0 34px rgba(46, 224, 255, 0.35); }

.ri-client-app .ri-renewal-ring > span { width: 168px; height: 168px; background: #0B121C; }

.ri-client-app .ri-renewal-ring small { font-size: 1rem; color: #AFC0D0; }

.ri-client-app .ri-renewal-ring strong { font-family: var(--ri-font-app); font-size: 2.2rem; }

.ri-client-app .ri-policy-tiles { gap: 22px; margin-bottom: 26px; }

.ri-app-shell.ri-client-app .ri-policy-tile-action { min-height: 128px; gap: 12px; border-radius: 18px; font-size: 1.15rem; font-weight: 500; color: #A9BDD0; }

.ri-client-app .ri-policy-tile-action .mud-icon-root { font-size: 2.1rem; color: #A9BDD0; }

.ri-app-shell.ri-client-app .ri-policy-tile-action.is-main { color: #04222B; box-shadow: 0 0 26px rgba(46, 224, 255, 0.4); }

.ri-client-app .ri-policy-tile-action.is-main .mud-icon-root { color: #04222B; }

.ri-client-app .ri-policy-columns { gap: 22px; }

.ri-client-app .ri-policy-section-title { font-family: var(--ri-font-app); font-size: 1.3rem !important; font-weight: 600; padding-bottom: 12px; margin-bottom: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.ri-client-app .ri-timeline { border-left: 0; padding-left: 26px; }

.ri-client-app .ri-timeline li::before { left: -26px; top: 4px; width: 12px; height: 12px; }

.ri-client-app .ri-timeline li + li::after { content: ""; position: absolute; left: -21px; top: -18px; height: 18px; border-left: 2px dotted rgba(46, 224, 255, 0.6); }

.ri-client-app .ri-timeline-what { font-weight: 500; }

@media (max-width: 599.98px) {
    .ri-client-app .ri-policy-hero { flex-direction: column; gap: 22px; }
    .ri-client-app .ri-policy-card { flex: none; width: 100%; }
    .ri-client-app .ri-renewal-ring { width: 150px; height: 150px; }
    .ri-client-app .ri-renewal-ring > span { width: 134px; height: 134px; }
    .ri-client-app .ri-policy-tiles { gap: 14px; }
    .ri-app-shell.ri-client-app .ri-policy-tile-action { min-height: 104px; }
}

/* Phone tiles use the concept's one-word labels; computers the full ones. */
.ri-client-app .ri-label-short { display: none; }

@media (max-width: 599.98px) {
    .ri-client-app .ri-home-action .ri-label-long { display: none; }
    .ri-client-app .ri-home-action .ri-label-short { display: inline; }
}

/* --- Lighting pass (owner 2026-10-21: "do it all"): closer to the concepts' glass ------------------------------------
   The cards that matter get a glass highlight across their top (a soft white ellipse over the slate) and a wider, softer
   cyan bloom around the edge; the Home numbers are bigger. Ordinary cards are unchanged. */
.ri-client-app {
    --ri-focus-fill:
        radial-gradient(120% 70% at 50% -18%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 70%),
        linear-gradient(180deg, rgba(92, 106, 120, 0.80) 0%, rgba(58, 66, 77, 0.80) 100%);
    --ri-focus-edge: rgba(150, 228, 246, 0.92);
    --ri-focus-glow: 0 0 2px rgba(46, 224, 255, 0.75), 0 0 22px rgba(46, 224, 255, 0.36), 0 0 56px rgba(46, 224, 255, 0.14);
}

.ri-client-app .ri-home-stat-value { font-size: clamp(1.75rem, 1.05rem + 1.3vw, 2.6rem); letter-spacing: -0.01em; }
.ri-client-app .ri-home-stat-label { font-size: 0.95rem; }

/* The policy card keeps its own blue gradient, with the same glass highlight on top. */
.ri-client-app .ri-policy-card {
    background:
        radial-gradient(120% 70% at 50% -18%, rgba(255, 255, 255, 0.16) 0%, transparent 65%),
        linear-gradient(120deg, #141C2B 0%, #1B2D48 45%, #24507C 75%, #2C6596 100%);
}

@media (prefers-reduced-motion: reduce) {
    .ri-client-app { --ri-focus-glow: 0 0 2px rgba(46, 224, 255, 0.75), 0 0 16px rgba(46, 224, 255, 0.3); }
}

/* Phones (concept 03): the waving FAISER stands behind the total card, only his head and raised hand above its edge. */
@media (max-width: 599.98px) {
    .ri-client-app .ri-home-faiser-peek {
        width: 112px;
        height: 104px;
        object-fit: cover;
        object-position: top;
        bottom: calc(100% - 1px);
    }
}

/* Privacy notice (/privacy): readable long-form sections. */
.ri-privacy h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.75rem 0 0.5rem;
}

.ri-privacy h2:first-of-type {
    margin-top: 0;
}

.ri-privacy p,
.ri-privacy li {
    line-height: 1.6;
}

.ri-privacy ul {
    padding-left: 1.25rem;
    margin: 0.5rem 0 1rem;
}

.ri-privacy li + li {
    margin-top: 0.35rem;
}

/* The quote wizard (item 2.4): the tracker's look, each step a button (done steps open again, later ones stay shut). */
.ri-wizard-steps { margin: 8px 0 20px; }
.ri-wizard-step-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.ri-wizard-step-button:disabled { cursor: default; opacity: 0.7; }
.ri-wizard-step-button:focus-visible { outline: 2px solid var(--ri-primary); outline-offset: 4px; border-radius: 6px; }
.ri-wizard-steps .ri-quote-tracker-dot { font-size: 0.75rem; }
.ri-wizard-title { font-size: 1.25rem !important; margin: 0 0 12px !important; }
.ri-wizard-invite { max-width: 60ch; }
.ri-wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; }
.ri-wizard-nav .ri-wizard-forward { margin-left: auto; }

/* Record of advice (item 1.5): one row per question, Yes / No beside it (under it on phones). */
.ri-advice-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ri-advice-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid var(--ri-line);
    border-radius: var(--ri-radius-md, 8px);
}
.ri-advice-question-text { flex: 1 1 260px; }
.ri-advice-answers { display: flex; gap: 8px; }

/* Test system tab (TestSystemBanner.razor): QA, dev and local only, never Production. */
.ri-test-system-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1250; /* above the app bars (1200), below the chat window (1300), prompts (1400) and dialogs */
    pointer-events: none;
    padding: 2px 12px 3px;
    border-radius: 0 0 8px 8px;
    background: #f5b301;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* Phones: the logo fills the top, so the tab sits on the left edge, above the bottom bar and the "Chat with us" button
   (both at 84px + the iPhone home-indicator inset, live-chat.css). */
@media (max-width: 599.98px) {
    .ri-test-system-banner {
        top: auto;
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
        left: 0;
        transform: none;
        border-radius: 0 8px 8px 0;
    }
}