@import '_content/DentaFlow.Web.Shared/DentaFlow.Web.Shared.p2y3be216c.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-header[b-f9scalwkxk] {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    padding: 0.75rem 0;
}

.site-header-inner[b-f9scalwkxk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Signed in, "My cases" joins the nav; on a phone that no longer fits on one line, so
       the nav drops under the brand instead of overflowing the viewport. */
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

/* Brand, language picker and theme toggle style themselves (DentaFlow.Web.Shared). Only
   the layout of this header, and the page links, live here. */

.site-nav[b-f9scalwkxk] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

/* NavLink is a framework component, so its <a> carries no scope attribute from this file
   and a plain `.site-nav-link` rule would never match. ::deep reaches it through
   .site-nav, which is authored here. */
.site-nav[b-f9scalwkxk]  .site-nav-link {
    position: relative;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    text-decoration: none;
    padding: 0.35rem 0;
}

.site-nav[b-f9scalwkxk]  .site-nav-link:hover {
    color: var(--color-link-hover);
}

.site-nav[b-f9scalwkxk]  .site-nav-link.active {
    color: var(--color-accent);
    font-weight: 600;
}

.site-nav[b-f9scalwkxk]  .site-nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.3rem;
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-accent);
}

/* The way through to the clinic portal. An outlined button rather than a link, because
   it addresses a different audience than the page links beside it — a dentist, not a
   patient — and it should read as an action without competing with the wizard's call to
   action on the page below. */
.site-partner[b-f9scalwkxk] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.4rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.site-partner:hover[b-f9scalwkxk] {
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: var(--color-accent);
}

.site-partner:focus-visible[b-f9scalwkxk] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Above phone width every item shows its words; the icon beside "My cases" is the phone's
   version of it and stays out of the way. */
.site-nav-icon[b-f9scalwkxk] {
    display: none;
}

.site-partner-short[b-f9scalwkxk] {
    display: none;
}

/* Sized, together with BrandLockup's and ThemeToggle's own phone rules, so the whole
   header keeps ONE row at 360px in both languages, signed in or out — it used to take two
   (97px tall) once "My cases" and the partner button joined it. Three things buy that
   room, in order of how much: "Home" is dropped (the brand next to it is the same link),
   "My cases" keeps its icon and hides its words, and the partner button switches to its
   short wording. Below ~350px it wraps again, which is the honest limit for five items.
   Measure before adding a sixth. */
@media (max-width: 480px) {
    .site-header-inner[b-f9scalwkxk] {
        column-gap: 0.5rem;
    }

    .site-nav[b-f9scalwkxk] {
        gap: 0.45rem;
        font-size: 0.85rem;
    }

    .site-nav[b-f9scalwkxk]  .site-nav-home {
        display: none;
    }

    /* The label stays in the DOM, clipped rather than removed, so the link still announces
       itself; the icon is what is left to look at. */
    .site-nav[b-f9scalwkxk]  .site-nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-nav[b-f9scalwkxk]  .site-nav-icon {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linejoin: round;
    }

    /* The active page's underline is drawn under the text, which is now a clipped span -
       it would sit in the wrong place, so the icon takes the accent instead. */
    .site-nav[b-f9scalwkxk]  .site-nav-mine.active::after {
        display: none;
    }

    /* It keeps its words on a phone, where it is the one thing in this header a visitor
       might be looking for and the rest is navigation they already know — but the short
       wording, which is what makes the row fit. */
    .site-partner[b-f9scalwkxk] {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    .site-partner-full[b-f9scalwkxk] {
        display: none;
    }

    .site-partner-short[b-f9scalwkxk] {
        display: inline;
    }

    .site-nav[b-f9scalwkxk]  .culture-picker {
        gap: 0.45rem;
        font-size: 0.85rem;
    }
}

main[b-f9scalwkxk] {
    display: block;
    min-height: 70vh;
}

.site-footer[b-f9scalwkxk] {
    border-top: 1px solid var(--color-divider);
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.site-footer-inner[b-f9scalwkxk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.site-footer-links[b-f9scalwkxk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.site-footer-links a[b-f9scalwkxk] {
    color: inherit;
    text-decoration: none;
}

.site-footer-links a:hover[b-f9scalwkxk] {
    color: var(--color-link-hover);
    text-decoration: underline;
}

#blazor-error-ui[b-f9scalwkxk] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-f9scalwkxk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-820msvpnh2],
.components-reconnect-repeated-attempt-visible[b-820msvpnh2],
.components-reconnect-failed-visible[b-820msvpnh2],
.components-pause-visible[b-820msvpnh2],
.components-resume-failed-visible[b-820msvpnh2],
.components-rejoining-animation[b-820msvpnh2] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-retrying[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-failed[b-820msvpnh2],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-820msvpnh2] {
    display: block;
}


#components-reconnect-modal[b-820msvpnh2] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-820msvpnh2 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-820msvpnh2 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-820msvpnh2 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-820msvpnh2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-820msvpnh2 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-820msvpnh2 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-820msvpnh2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-820msvpnh2 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-820msvpnh2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-820msvpnh2] {
    margin: 0;
    text-align: center;
}

/* Blazor template leftovers until 2026-10-04: a blue that belonged to no palette here. */
#components-reconnect-modal button[b-820msvpnh2] {
    border: 0;
    background-color: var(--color-action);
    color: #fff;
    padding: 8px 24px;
    border-radius: var(--radius-md);
    font-weight: var(--font-label-weight, 600);
}

    #components-reconnect-modal button:hover[b-820msvpnh2] {
        background-color: var(--color-action-hover);
    }

    #components-reconnect-modal button:active[b-820msvpnh2] {
        background-color: var(--color-action-hover);
    }

.components-rejoining-animation[b-820msvpnh2] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-820msvpnh2] {
        position: absolute;
        border: 3px solid var(--color-accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-820msvpnh2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-820msvpnh2] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-820msvpnh2 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CaseSubmitted.razor.rz.scp.css */
.submitted-card[b-uluds0dagy] {
    max-width: 560px;
    margin: 0 auto;
}

.submitted-mark[b-uluds0dagy] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0.5rem auto 1rem;
    border-radius: 50%;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--color-success) 16%, transparent);
    color: var(--color-success);
}

/* Under the button, quiet on purpose: the next step is going home or waiting, and this is
   only for the visitor who has a question right now. */
.submitted-contact[b-uluds0dagy] {
    margin-top: 1.25rem;
    color: var(--color-muted);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Retuned 2026-11-07 to SmileRadar_Brand_Assets. The shared vocabulary — .eyebrow,
   .headline-accent, .btn-brand, .icon-badge — lives in nocturne.css; what is here is
   only this page's layout. */

.hero-title[b-yrh10kzt83] {
    /* Smaller than the two-word headline it replaced (2026-11-14): this one is a whole
       sentence, and at the old 3.4rem it ran to five lines beside the picture. */
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    font-weight: 750;
    margin-bottom: 1rem;
}

/* The last words take the action hue on a mint highlight, as the mockup draws them. They
   stay inline — the sentence runs on into them — and never break inside. */
.hero-title .headline-accent[b-yrh10kzt83] {
    white-space: nowrap;
    padding: 0 0.2em;
    border-radius: 0.25em;
    background-color: var(--color-mint);
}

.hero-checks[b-yrh10kzt83] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex-direction: column;
    gap: 0.55rem;
}

.hero-checks li[b-yrh10kzt83] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* BrandIcon is a child component, so its svg carries no scope attribute of this page
   (scoped-CSS gotcha 2): reach it through ::deep from the list written here. */
.hero-checks[b-yrh10kzt83]  .hero-check-icon {
    flex: 0 0 auto;
    color: var(--color-accent-2);
}

.hero-actions[b-yrh10kzt83] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 0.5rem;
}

.hero-how-link[b-yrh10kzt83] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-accent-2) 55%, transparent);
    text-underline-offset: 0.3em;
}

/* The play mark, as the mockup draws it. Its own span so the underline runs under the
   words only. */
.hero-play[b-yrh10kzt83] {
    display: inline-flex;
    color: var(--color-accent);
}

.hero-how-link:hover[b-yrh10kzt83],
.hero-how-link:focus-visible[b-yrh10kzt83] {
    color: var(--color-action);
}

.hero-lead[b-yrh10kzt83] {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 46ch;
}

/* One row at every width, as the mockup draws it: three short claims side by side. */
.hero-promises[b-yrh10kzt83] {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    gap: 1.25rem;
}

.hero-promises li[b-yrh10kzt83] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

.how-section[b-yrh10kzt83] {
    margin-top: 4.5rem;
}

.how-heading[b-yrh10kzt83] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* One card with the four steps inside it, as the pack draws it. Grid rather than a
   Bootstrap row so the steps keep equal widths and a single shared ground; it collapses
   to two columns and then one, because four of these never fit a phone. */
.how-steps[b-yrh10kzt83] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    padding: 2rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
}

@media (max-width: 991px) {
    .how-steps[b-yrh10kzt83] { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 575px) {
    .how-steps[b-yrh10kzt83] { grid-template-columns: 1fr; padding: 1.5rem; }
}

.how-card[b-yrh10kzt83] {
    position: relative;
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* The scene above each step. HowStepArt sizes its own svg; this only centres it and
   leaves room under it. */
.how-card-art[b-yrh10kzt83] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform .15s ease;
}

.how-card:hover .how-card-art[b-yrh10kzt83] {
    transform: translateY(-3px);
}

/* An arrow between the steps when they stand in one row, as in the mockup: four steps
   that read as a sequence rather than four separate offers. Centred in the gap, level
   with the scenes. */
@media (min-width: 992px) {
    .how-card:not(:last-child)[b-yrh10kzt83]::after {
        content: "→";
        position: absolute;
        top: 3.25rem;
        right: -1.35rem;
        font-size: 1.15rem;
        line-height: 1;
        color: var(--color-accent-2);
    }
}

.how-card:hover[b-yrh10kzt83],
.how-card:focus-visible[b-yrh10kzt83] {
    color: inherit;
}

.how-card:focus-visible[b-yrh10kzt83] {
    outline: 2px solid var(--color-accent);
    outline-offset: 8px;
    border-radius: var(--radius-md);
}

.how-card-title[b-yrh10kzt83] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

/* White on the teal in light (6.7:1); in dark accent-2 is the pack's light mint, so the
   numeral takes the page's navy instead — the same flip as the brand pill. */
.how-card-num[b-yrh10kzt83] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background-color: var(--color-accent-2);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .how-card-num[b-yrh10kzt83] { color: var(--color-bg); }
}

:root[data-theme="dark"] .how-card-num[b-yrh10kzt83] { color: var(--color-bg); }

.how-card:hover .how-card-title[b-yrh10kzt83],
.how-card:focus-visible .how-card-title[b-yrh10kzt83] {
    color: var(--color-link);
}

.how-card-text[b-yrh10kzt83] {
    font-size: 0.9rem;
    margin: 0;
    color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
    .how-card-art[b-yrh10kzt83] { transition: none; }
    .how-card:hover .how-card-art[b-yrh10kzt83] { transform: none; }
}

/* ── Phone-first hero (2026-11-10) ──────────────────────────
   The illustration is first in the document and the button comes before the promises, so
   a phone opens on the brand and a call to action instead of 78 words of copy. */
.hero-art[b-yrh10kzt83] { text-align: center; }

.hero-promise-text[b-yrh10kzt83] { display: flex; flex-direction: column; }
.hero-promise-detail[b-yrh10kzt83] { color: var(--color-muted); font-size: 0.875rem; }

@media (max-width: 767.98px) {
    /* Three across, title over its short detail. The details stay since 2026-11-14:
       "Medici stomatologi" without "verificați" is not the promise. */
    .hero-promises[b-yrh10kzt83] { flex-direction: row; gap: 0.5rem; margin-top: 1.75rem; }
    .hero-promises li[b-yrh10kzt83] {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        line-height: 1.25;
    }
    .hero-promise-detail[b-yrh10kzt83] { font-size: 0.75rem; }
}

@media (max-width: 575px) {
    /* Each step becomes a row — icon left, words right — so four steps read as a list
       rather than as four stacked blocks. */
    .how-card[b-yrh10kzt83] { display: grid; grid-template-columns: 96px 1fr; column-gap: 1rem; align-items: center; }
    .how-card-art[b-yrh10kzt83] { grid-row: 1 / span 2; margin-bottom: 0; }
    .how-card-title[b-yrh10kzt83], .how-card-text[b-yrh10kzt83] { grid-column: 2; }
    .how-card-title[b-yrh10kzt83] { align-self: end; }
    .how-card-text[b-yrh10kzt83] { align-self: start; }
}
/* /Components/Pages/MyCase.razor.rz.scp.css */

/* Public channels on an offer card: a quiet row of links, separated by thin rules rather
   than punctuation so they read as a set without shouting over the terms above them. */
.offer-links[b-cc9moqn5tu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

.offer-links a + a[b-cc9moqn5tu] {
    position: relative;
}

.offer-links a + a[b-cc9moqn5tu]::before {
    content: "";
    position: absolute;
    left: -0.45rem;
    top: 0.15em;
    bottom: 0.15em;
    width: 1px;
    background: var(--color-divider);
}
/* /Components/Pages/NewCase.razor.rz.scp.css */
/* Retuned 2026-11-12 to read as the next screen of the landing page rather than as a
   form bolted on behind it: the same four icons in the progress strip, an eyebrow and a
   real headline on every step, and the card the "how it works" strip sits on. The
   shared vocabulary (.eyebrow, the tokens) is in nocturne.css; the illustrations and
   the radar they stand on are in StepImage. */

/* ── Progress strip ─────────────────────────────────────────
   Four discs joined by a hairline. Each <li> is a disc, its label, and — except the
   last — a line that takes whatever room is left, so the strip always spans the card
   below it whatever the labels measure in either language. */
.wizard-steps[b-6bqle3rx9l] {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    max-width: 1080px;
}

.wizard-step[b-6bqle3rx9l] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-muted);
}

.wizard-step:not(:last-child)[b-6bqle3rx9l] {
    flex: 1 1 0;
}

.wizard-step:not(:last-child)[b-6bqle3rx9l]::after {
    content: "";
    flex: 1 1 auto;
    min-width: 1rem;
    height: 2px;
    margin: 0 0.9rem 0 0.2rem;
    border-radius: 2px;
    background-color: var(--color-divider);
}

.wizard-step-badge[b-6bqle3rx9l] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background-color: var(--color-lavender);
    color: var(--color-muted);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.wizard-step-text[b-6bqle3rx9l] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.wizard-step-number[b-6bqle3rx9l] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.wizard-step-label[b-6bqle3rx9l] {
    font-size: 0.92rem;
    font-weight: 600;
}

/* The step you are on: the disc takes the accent, as the landing page's button does. */
.wizard-step.current[b-6bqle3rx9l] {
    color: var(--color-text);
}

.wizard-step.current .wizard-step-badge[b-6bqle3rx9l] {
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.wizard-step.current .wizard-step-number[b-6bqle3rx9l] {
    color: var(--color-accent);
}

/* Behind you: mint, and the line leading on from it is drawn in. */
.wizard-step.done[b-6bqle3rx9l] {
    color: var(--color-text);
}

.wizard-step.done .wizard-step-badge[b-6bqle3rx9l] {
    background-color: var(--color-mint);
    color: var(--color-accent-2);
}

.wizard-step.done:not(:last-child)[b-6bqle3rx9l]::after {
    background-color: color-mix(in srgb, var(--color-accent-2) 45%, transparent);
}

/* In dark the accent is the pack's lavender, and white on it is 2.06:1 — the same trap
   .btn-brand fell into. The icon takes the page's navy there instead. Declared for the
   media query and the explicit toggle both. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wizard-step.current .wizard-step-badge[b-6bqle3rx9l] { color: var(--color-bg); }
}

:root[data-theme="dark"] .wizard-step.current .wizard-step-badge[b-6bqle3rx9l] { color: var(--color-bg); }

/* Below the full strip only the step you are on keeps its words. Four labels do not fit
   a tablet in Romanian — at 600px they ran 30px past the card — and which step is
   CURRENT is the one thing the strip has to say in text. The other labels are still
   there for a screen reader: clipped, not removed. */
@media (max-width: 767.98px) {
    .wizard-step-number[b-6bqle3rx9l] { display: none; }
    .wizard-step[b-6bqle3rx9l] { gap: 0.5rem; }
    .wizard-step:not(:last-child)[b-6bqle3rx9l]::after { margin: 0 0.6rem; }

    .wizard-step:not(.current) .wizard-step-text[b-6bqle3rx9l] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* On a phone the strip is the four discs and their lines, on one row; the step's own
   eyebrow and headline, just below, say in words where you are. */
@media (max-width: 575.98px) {
    .wizard-steps[b-6bqle3rx9l] { margin-bottom: 1.1rem; }

    .wizard-step-badge[b-6bqle3rx9l] { width: 2.5rem; height: 2.5rem; }

    .wizard-step.current .wizard-step-text[b-6bqle3rx9l] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-step-badge[b-6bqle3rx9l] { transition: none; }
}

/* ── The card ───────────────────────────────────────────────
   The surface the landing page's "how it works" strip sits on: card radius, the soft
   shadow, no border of its own. */
.wizard-card[b-6bqle3rx9l] {
    max-width: 1080px;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.wizard-card > .card-body[b-6bqle3rx9l] {
    padding: 2rem;
}

/* Fields left, the step's illustration on its radar right. Stays a grid at every width:
   below the breakpoint it collapses to one column, and the illustration reorders itself
   above the fields from its own stylesheet — which only works on a grid item. */
.wizard-layout[b-6bqle3rx9l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
    align-items: start;
}

/* Without this the map and the inputs can push the column past its track. */
.wizard-fields[b-6bqle3rx9l] {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wizard-layout[b-6bqle3rx9l] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

@media (max-width: 575.98px) {
    .wizard-card > .card-body[b-6bqle3rx9l] { padding: 1.25rem; }
}

/* A headline, not a form label: the landing page's weight and tracking at a size that
   still leaves a phone's first screen to the fields. */
.wizard-title[b-6bqle3rx9l] {
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 750;
    margin-bottom: 0.5rem;
}


.wizard-pane[b-6bqle3rx9l] {
    min-height: 22rem;
}

.wizard-actions[b-6bqle3rx9l] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-divider);
}

/* The currency picker sits on the amount's right edge and takes only the room its
   longest option needs. InputSelect is a framework component, so its <select> carries no
   scope attribute of this page: the rule reaches it through ::deep from a wrapper written
   here (scoped-CSS gotcha 3). */
.price-group[b-6bqle3rx9l]  .price-currency {
    flex: 0 0 6.25rem;
}

.wizard-error[b-6bqle3rx9l] {
    color: var(--color-danger);
}

.wizard-xray[b-6bqle3rx9l] {
    max-width: 100%;
    max-height: 260px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-divider);
    display: block;
}
/* /Components/Shared/HowItWorksVideo.razor.rz.scp.css */
/* ── The window ─────────────────────────────────────────────
   A native <dialog>: Escape closes it, focus stays inside it while open, and the page
   behind is inert — all without code of ours. The body carries the padding so a click
   on the dark backdrop is the only click whose target is the dialog itself. */
.howv[b-atpmjr1b1f] {
    width: min(720px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.howv[b-atpmjr1b1f]::backdrop {
    background-color: rgba(18, 21, 74, .55);
}

.howv-body[b-atpmjr1b1f] {
    padding: 1.25rem 1.5rem 1.5rem;
}

.howv-head[b-atpmjr1b1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.howv-title[b-atpmjr1b1f] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.howv-close[b-atpmjr1b1f] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-lavender);
    color: var(--color-text);
}

.howv-close:hover[b-atpmjr1b1f],
.howv-close:focus-visible[b-atpmjr1b1f] {
    background-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-lavender));
}

/* ── The stage ──────────────────────────────────────────────
   All four scenes share one grid cell, so the stage is as tall as the tallest caption
   and nothing is positioned by hand. */
.howv-stage[b-atpmjr1b1f] {
    display: grid;
}

.howv-scene[b-atpmjr1b1f] {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    animation: howv-scene-b-atpmjr1b1f 24s linear var(--d) infinite;
}

.howv-art[b-atpmjr1b1f] {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 8 / 5;
    margin: 0 auto;
    overflow: visible;
}

.howv-cap[b-atpmjr1b1f] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 34rem;
    margin: 0.75rem auto 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.howv-cap strong[b-atpmjr1b1f] {
    display: block;
    color: var(--color-text);
    font-size: 1.05rem;
}

/* Same disc as the landing page's steps, with the same dark-theme flip. */
.howv-num[b-atpmjr1b1f] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background-color: var(--color-accent-2);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .howv-num[b-atpmjr1b1f] { color: var(--color-bg); }
}

:root[data-theme="dark"] .howv-num[b-atpmjr1b1f] { color: var(--color-bg); }

.howv-progress[b-atpmjr1b1f] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 1.25rem 0 1.25rem;
}

.howv-seg[b-atpmjr1b1f] {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background-color: var(--color-divider);
    overflow: hidden;
}

.howv-seg[b-atpmjr1b1f]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-accent-2);
    transform-origin: left center;
    transform: scaleX(0);
}

.howv-seg-1[b-atpmjr1b1f]::after { animation: howv-seg-1-b-atpmjr1b1f 24s linear infinite; }
.howv-seg-2[b-atpmjr1b1f]::after { animation: howv-seg-2-b-atpmjr1b1f 24s linear infinite; }
.howv-seg-3[b-atpmjr1b1f]::after { animation: howv-seg-3-b-atpmjr1b1f 24s linear infinite; }
.howv-seg-4[b-atpmjr1b1f]::after { animation: howv-seg-4-b-atpmjr1b1f 24s linear infinite; }

.howv-cta[b-atpmjr1b1f] {
    display: flex;
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .howv-body[b-atpmjr1b1f] { padding: 1rem 1rem 1.25rem; }
    .howv-cap[b-atpmjr1b1f] { font-size: 0.92rem; }
}

/* ── Drawing colours ────────────────────────────────────────
   The same roles as HowStepArt: accent for the drawing, accent-2 for what happens,
   surface + divider for the cards. */
.v-blob[b-atpmjr1b1f] { fill: var(--color-lavender); }
.v-blob-mint[b-atpmjr1b1f] { fill: var(--color-mint); }
.v-panel[b-atpmjr1b1f] { fill: var(--color-surface); stroke: var(--color-divider); stroke-width: 1.5; }
.v-frame[b-atpmjr1b1f] { stroke: var(--color-accent); stroke-width: 3.5; }
.v-shadow[b-atpmjr1b1f] { fill: var(--color-text); opacity: .07; }
.v-stroke[b-atpmjr1b1f] { fill: none; stroke: var(--color-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v-stroke-thin[b-atpmjr1b1f] { stroke-width: 2.8; }
.v-ink[b-atpmjr1b1f] { fill: var(--color-accent); opacity: .75; }
.v-ink-soft[b-atpmjr1b1f] { fill: var(--color-muted); opacity: .45; }
.v-base[b-atpmjr1b1f] { fill: var(--color-accent); opacity: .85; }
.v-track[b-atpmjr1b1f] { fill: var(--color-divider); }
.v-fill[b-atpmjr1b1f] { fill: var(--color-accent-2); }
.v-knob[b-atpmjr1b1f] { fill: var(--color-accent-2); stroke: var(--color-surface); stroke-width: 3.5; }
.v-tick[b-atpmjr1b1f] { fill: var(--color-accent-2); }
.v-tick-mark[b-atpmjr1b1f] { fill: none; stroke: var(--color-surface); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-tick-mark-lg[b-atpmjr1b1f] { stroke-width: 4; }
.v-band[b-atpmjr1b1f] { fill: var(--color-accent); }
.v-ring[b-atpmjr1b1f] { fill: none; stroke: var(--color-text); stroke-width: 4.5; stroke-linecap: round; }
.v-cell[b-atpmjr1b1f] { fill: var(--color-accent); opacity: .18; }
.v-cell-on[b-atpmjr1b1f] { fill: var(--color-accent-2); }
.v-caret[b-atpmjr1b1f] { fill: var(--color-accent-2); animation: howv-blink-b-atpmjr1b1f 1s steps(1) infinite; }

/* ── Motion ─────────────────────────────────────────────────
   Every moving part: one keyframe set, delayed by its scene (--d) plus its own offset
   (--o). transform-box: fill-box makes each one turn and grow about itself; it is safe
   here because none of these elements has a transform attribute (see the component). */
.v-pop[b-atpmjr1b1f],
.v-grow[b-atpmjr1b1f],
.v-arrive[b-atpmjr1b1f],
.v-slide-fill[b-atpmjr1b1f],
.v-slide-knob[b-atpmjr1b1f],
.v-fade[b-atpmjr1b1f] {
    transform-box: fill-box;
    animation-duration: 24s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--d) + var(--o, 0s));
}

.v-pop[b-atpmjr1b1f] { transform-origin: center; animation-name: howv-pop-b-atpmjr1b1f; }
.v-grow[b-atpmjr1b1f] { transform-origin: left center; animation-name: howv-grow-b-atpmjr1b1f; }
.v-arrive[b-atpmjr1b1f] { animation-name: howv-arrive-b-atpmjr1b1f; }
.v-slide-fill[b-atpmjr1b1f] { transform-origin: left center; animation-name: howv-slide-fill-b-atpmjr1b1f; }
.v-slide-knob[b-atpmjr1b1f] { animation-name: howv-slide-knob-b-atpmjr1b1f; }
.v-fade[b-atpmjr1b1f] { animation-name: howv-fade-b-atpmjr1b1f; }

/* Before an element's own start it must already look like its first frame, or it would
   flash in its finished state for the length of its offset. */
.v-pop[b-atpmjr1b1f] { transform: scale(0); }
.v-grow[b-atpmjr1b1f] { transform: scaleX(0); }
.v-arrive[b-atpmjr1b1f] { opacity: 0; transform: translateX(36px); }
.v-slide-fill[b-atpmjr1b1f] { transform: scaleX(.11); }
.v-slide-knob[b-atpmjr1b1f] { transform: translateX(-68px); }
.v-fade[b-atpmjr1b1f] { opacity: 0; }

/* A scene: in over half a second, held, out by the end of its six. */
@keyframes howv-scene-b-atpmjr1b1f {
    0% { opacity: 0; transform: translateY(6px); }
    2% { opacity: 1; transform: none; }
    23% { opacity: 1; transform: none; }
    25%, 100% { opacity: 0; transform: none; }
}

@keyframes howv-pop-b-atpmjr1b1f {
    0% { transform: scale(0); }
    3% { transform: scale(1.15); }
    4.5%, 100% { transform: scale(1); }
}

@keyframes howv-grow-b-atpmjr1b1f {
    0% { transform: scaleX(0); }
    3%, 100% { transform: scaleX(1); }
}

@keyframes howv-arrive-b-atpmjr1b1f {
    0% { opacity: 0; transform: translateX(36px); }
    3%, 100% { opacity: 1; transform: none; }
}

@keyframes howv-slide-fill-b-atpmjr1b1f {
    0% { transform: scaleX(.11); }
    8%, 100% { transform: scaleX(1); }
}

@keyframes howv-slide-knob-b-atpmjr1b1f {
    0% { transform: translateX(-68px); }
    8%, 100% { transform: translateX(0); }
}

@keyframes howv-fade-b-atpmjr1b1f {
    0% { opacity: 0; }
    3%, 100% { opacity: 1; }
}

@keyframes howv-blink-b-atpmjr1b1f {
    50% { opacity: 0; }
}

/* One per segment, so each stays filled after its scene and empties only when the loop
   starts over — a delay could not do that. */
@keyframes howv-seg-1-b-atpmjr1b1f { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
@keyframes howv-seg-2-b-atpmjr1b1f { 0%, 25% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes howv-seg-3-b-atpmjr1b1f { 0%, 50% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } }
@keyframes howv-seg-4-b-atpmjr1b1f { 0%, 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* Somebody who asked for less motion gets the four scenes still, two by two, with their
   words — the same content, nothing moving. */
@media (prefers-reduced-motion: reduce) {
    .howv-stage[b-atpmjr1b1f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }

    .howv-scene[b-atpmjr1b1f] {
        grid-area: auto;
        opacity: 1;
        animation: none;
    }

    .v-pop[b-atpmjr1b1f], .v-grow[b-atpmjr1b1f], .v-arrive[b-atpmjr1b1f], .v-slide-fill[b-atpmjr1b1f], .v-slide-knob[b-atpmjr1b1f], .v-fade[b-atpmjr1b1f], .v-caret[b-atpmjr1b1f] {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .howv-cap[b-atpmjr1b1f] { font-size: 0.85rem; }
    .howv-progress[b-atpmjr1b1f] { display: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 575.98px) {
    .howv-stage[b-atpmjr1b1f] { grid-template-columns: 1fr; }
}
/* /Components/Shared/HowStepArt.razor.rz.scp.css */
/* Every colour is a theme token, so the scenes follow the light and dark palettes on
   their own. The roles, kept to the site's split: the accent (violet / lavender) for the
   drawing's lines and what is ours, accent-2 (teal / mint) for the thing that happens —
   the slider's fill, the ticks — and surface + divider for the cards, which is what makes
   them read as the same cards the page is built from. */

.how-art[b-8w8agvp4w1] {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: visible;
}

.art-blob[b-8w8agvp4w1] { fill: var(--color-lavender); }
.art-blob-mint[b-8w8agvp4w1] { fill: var(--color-mint); }

.art-panel[b-8w8agvp4w1] {
    fill: var(--color-surface);
    stroke: var(--color-divider);
    stroke-width: 1.5;
}

.art-frame[b-8w8agvp4w1] {
    stroke: var(--color-accent);
    stroke-width: 3;
}

.art-shadow[b-8w8agvp4w1] {
    fill: var(--color-text);
    opacity: .07;
}

.art-stroke[b-8w8agvp4w1] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.art-stroke-thin[b-8w8agvp4w1] { stroke-width: 3.2; }

.art-ink[b-8w8agvp4w1] { fill: var(--color-accent); opacity: .75; }
.art-ink-soft[b-8w8agvp4w1] { fill: var(--color-muted); opacity: .45; }

.art-base[b-8w8agvp4w1] { fill: var(--color-accent); opacity: .85; }

.art-track[b-8w8agvp4w1] { fill: var(--color-divider); }
.art-fill[b-8w8agvp4w1] { fill: var(--color-accent-2); }

.art-knob[b-8w8agvp4w1] {
    fill: var(--color-accent-2);
    stroke: var(--color-surface);
    stroke-width: 3;
}

/* The tick is drawn in the surface colour rather than white: in dark, accent-2 is the
   pack's light mint, and a white tick on it would all but disappear. */
.art-tick[b-8w8agvp4w1] { fill: var(--color-accent-2); }

.art-tick-mark[b-8w8agvp4w1] {
    fill: none;
    stroke: var(--color-surface);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.art-tick-mark-lg[b-8w8agvp4w1] { stroke-width: 3.4; }

.art-band[b-8w8agvp4w1] { fill: var(--color-accent); }

.art-ring[b-8w8agvp4w1] {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.art-cell[b-8w8agvp4w1] { fill: var(--color-accent); opacity: .18; }
.art-cell-on[b-8w8agvp4w1] { fill: var(--color-accent-2); opacity: .9; }
/* /Components/Shared/OfferComparison.razor.rz.scp.css */
/* Scrolls sideways on a phone rather than squeezing the columns; the label column stays put. */
.offer-compare-wrap[b-7tmhjbxad0] {
    overflow-x: auto;
    /* overflow-x: auto turns the y axis to auto as well, and a pixel of rounding was
       enough to draw a vertical scrollbar beside the table. */
    overflow-y: hidden;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.offer-compare[b-7tmhjbxad0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.offer-compare th[b-7tmhjbxad0],
.offer-compare td[b-7tmhjbxad0] {
    padding: 0.6rem 0.9rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-divider);
    min-width: 12rem;
}

.offer-compare tr:last-child > th[b-7tmhjbxad0],
.offer-compare tr:last-child > td[b-7tmhjbxad0] {
    border-bottom: 0;
}

/* The label column: sticky, so a patient scrolling across three clinics on a phone still
   knows which row they're reading. It needs its own opaque ground to cover what slides under. */
.offer-compare th[scope="row"][b-7tmhjbxad0],
.offer-compare thead td:first-child[b-7tmhjbxad0],
.offer-compare tfoot td:first-child[b-7tmhjbxad0] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 9rem;
    background-color: var(--color-surface);
    font-weight: 400;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.offer-compare thead th[b-7tmhjbxad0] {
    vertical-align: bottom;
}

.offer-compare-clinic[b-7tmhjbxad0] {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.offer-compare-strong[b-7tmhjbxad0] {
    font-weight: 600;
}

.offer-compare-none[b-7tmhjbxad0] {
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.offer-compare-message[b-7tmhjbxad0] {
    white-space: pre-line;
}
/* /Components/Shared/StepImage.razor.rz.scp.css */
/* Placement modifiers live here rather than in the consuming page: the Class parameter
   lands on THIS component's root element, so a `.step-image-panel` rule written in
   NewCase.razor.css would compile to `.step-image-panel[b-newcase]` and never match.

   Every picture is a transparent cut-out standing on a stage (2026-11-12), so the stage
   is what gets placed and sized and the picture only fills its share of it. */

.step-image-stage[b-tcyjpxvwaa] {
    display: block;
    position: relative;
}

.step-image[b-tcyjpxvwaa] {
    display: block;
    max-width: 100%;
}

/* ── Landing hero ───────────────────────────────────────────
   The brand pack artwork (2026-11-07) is composed square-ish and whole, so it is shown
   whole: no crop window, no card radius. The previous rule cropped a 16:9 illustration
   whose left 45% was empty, which this one is not.

   The pack ships this crop WITHOUT transparency, on a near-white plate that reads as a
   rectangle around the tooth on any tinted ground. Rather than hiding that with a blend
   mode — which only ever works over a light ground — the plate was cut away when the
   WebP was built: a flood fill inward from the border, so only background REACHABLE FROM
   OUTSIDE is cleared and the tooth keeps its own near-white highlights. See the pack
   README, which asks for a transparent export; this is that export. */
.step-image-hero[b-tcyjpxvwaa] {
    /* The wrapper is sized and the picture fills it, rather than the other way round,
       because the animated overlay has to share the picture's exact box. The ratio is the
       artwork's own, so the box is what the bare <img> would have been. */
    width: 100%;
    aspect-ratio: 600 / 545;
}

.step-image-hero > .step-image[b-tcyjpxvwaa] {
    width: 100%;
    height: 100%;
}

/* ── The hero's moving radar ────────────────────────────────
   An SVG over the picture, in the picture's own 600×545 pixel space (see StepImage.razor
   for where the numbers come from). Only transform and opacity animate, so it is
   compositor work: no layout, no paint of the page under it.

   The colours are fixed rather than tokens ON PURPOSE: they repeat the three blips and
   the teal of a raster illustration that does not change with the theme, so a token that
   flipped in dark would stop matching the dot it rings. Checked on both grounds. */
.radar-fx[b-tcyjpxvwaa] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.radar-ping[b-tcyjpxvwaa],
.radar-halo[b-tcyjpxvwaa] {
    fill: none;
    /* Constant on screen: the rings are scaled from an eighth of their size, and a stroke
       that scaled with them would start as a hairline and end as a band. */
    vector-effect: non-scaling-stroke;
    opacity: 0;
}

.radar-ping[b-tcyjpxvwaa] {
    stroke: #1FB89C;
    stroke-width: 2.5;
    /* The radar's centre, in viewBox units. Safe as a CSS origin because these circles
       carry no transform ATTRIBUTE — see CLAUDE.md, SVG transforms. */
    transform-origin: 355.5px 297.5px;
    animation: radar-ping-b-tcyjpxvwaa 3.6s linear infinite;
}

/* Two rings, half a cycle apart: one is always on its way out. */
.radar-ping-late[b-tcyjpxvwaa] { animation-delay: 1.8s; }

@keyframes radar-ping-b-tcyjpxvwaa {
    0%   { transform: scale(.12); opacity: 0; }
    10%  { opacity: .8; }
    70%  { opacity: .35; }
    100% { transform: scale(1.02); opacity: 0; }
}

.radar-halo[b-tcyjpxvwaa] {
    stroke-width: 2.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: radar-halo-b-tcyjpxvwaa 1.8s ease-out infinite;
}

/* Each delay is when a ring's edge reaches that blip — its distance from the centre as a
   share of the ring's travel, times the 3.6s cycle, modulo the 1.8s between rings. Move a
   blip or change the timing above and these stop lining up, silently. */
.radar-halo-near[b-tcyjpxvwaa] { stroke: #9F94F0; animation-delay: 1.68s; }
.radar-halo-mid[b-tcyjpxvwaa]  { stroke: #0E8F84; animation-delay: .54s; }
.radar-halo-far[b-tcyjpxvwaa]  { stroke: #2FB89F; animation-delay: 1.1s; }

@keyframes radar-halo-b-tcyjpxvwaa {
    0%   { transform: scale(1);   opacity: .85; }
    60%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Somebody who asked their system for less motion gets the picture as it was drawn. */
@media (prefers-reduced-motion: reduce) {
    .radar-fx[b-tcyjpxvwaa] { display: none; }
}

/* ── Wizard side panel ──────────────────────────────────────
   A square stage: the radar fills it, the illustration sits over its middle with room
   left all round for the rings to show. Sticky, so it stays with the fields on a long
   step.

   The illustrations lost their ground on 2026-11-12. They arrived on a pale grey plate
   with a lavender blob behind the drawing, which on the wizard's card read as a card
   inside the card. Both were cut away with the same rule as the hero — a flood fill
   INWARD FROM THE BORDER, so only ground reachable from outside is cleared and white
   shapes inside the drawing (the tooth, the envelope, the map) keep their fill. The
   one-off tool cropped the 4:5 source to its middle square at the same time; the
   full-size sources are in Branding/Imagini-Sursa. */
.step-image-panel[b-tcyjpxvwaa] {
    position: sticky;
    top: 1.5rem;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.step-image-panel > .step-image[b-tcyjpxvwaa] {
    position: absolute;
    inset: 11%;
    width: 78%;
    height: 78%;
}

/* Below the wizard's two-column breakpoint the stage moves above the fields, small:
   it explains the step, it isn't worth a screenful of scrolling before the form. */
@media (max-width: 991.98px) {
    .step-image-panel[b-tcyjpxvwaa] {
        order: -1;
        position: relative;
        top: auto;
        width: 190px;
        margin: 0 auto 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .step-image-panel[b-tcyjpxvwaa] {
        width: 160px;
        margin-bottom: 1rem;
    }
}

/* ── The radar a wizard step stands on ──────────────────────
   Drawn in a 400×400 box (see StepImage.razor). Theme tokens throughout: unlike the
   hero's overlay, nothing here has to match a colour baked into a bitmap, so the rings
   are the accent at low strength in either theme. */
.stage-radar[b-tcyjpxvwaa] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stage-ring[b-tcyjpxvwaa],
.stage-axis[b-tcyjpxvwaa],
.stage-ping[b-tcyjpxvwaa] {
    fill: none;
    stroke: var(--color-accent);
    vector-effect: non-scaling-stroke;
}

.stage-ring[b-tcyjpxvwaa] { stroke-width: 1.25; stroke-opacity: .22; }
.stage-ring-rim[b-tcyjpxvwaa] { stroke-opacity: .32; }
.stage-axis[b-tcyjpxvwaa] { stroke-width: 1; stroke-opacity: .13; }

/* The lit sector, as in the brand's tooth-and-radar. accent-2 is the teal in light and
   the pack's mint in dark, so one rule gives the right tint on both grounds. */
.stage-wedge[b-tcyjpxvwaa] {
    fill: var(--color-accent-2);
    fill-opacity: .13;
}

.stage-blip-a[b-tcyjpxvwaa] { fill: var(--color-accent-2); }
.stage-blip-b[b-tcyjpxvwaa] { fill: var(--color-accent); fill-opacity: .55; }
.stage-blip-c[b-tcyjpxvwaa] { fill: var(--color-accent-2); fill-opacity: .75; }

/* The landing hero's pulse, from this box's own centre: it starts behind the
   illustration and appears at its edge. */
.stage-ping[b-tcyjpxvwaa] {
    stroke: var(--color-accent-2);
    stroke-width: 1.5;
    transform-origin: 200px 200px;
    opacity: 0;
    animation: stage-ping-b-tcyjpxvwaa 3.6s linear infinite;
}

/* Quieter than the hero's: this one sits beside a form somebody is filling in, and on a
   phone it is 160px across. It only shows once it is clear of the drawing. */
@keyframes stage-ping-b-tcyjpxvwaa {
    0%   { transform: scale(.12); opacity: 0; }
    45%  { opacity: 0; }
    62%  { opacity: .5; }
    100% { transform: scale(1.02); opacity: 0; }
}

.stage-ping-late[b-tcyjpxvwaa] { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
    .stage-ping[b-tcyjpxvwaa] { display: none; }
}

/* ── Dark theme ─────────────────────────────────────────────
   The pictures are drawn for a light ground and have no dark variants. Cut out, they
   need no outline any more — there is no plate left to box — only a slight dim, so a
   white tooth does not glare on the navy. Declared for both the media query and the
   explicit toggle so it wins in either direction. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .step-image[b-tcyjpxvwaa] {
        filter: brightness(0.88) saturate(0.92);
    }
}

:root[data-theme="dark"] .step-image[b-tcyjpxvwaa] {
    filter: brightness(0.88) saturate(0.92);
}

/* On a phone the hero sits above the headline, so it is held to a height that leaves the
   headline and the button in the first screen. Here rather than in Home.razor.css because
   the class lands on this component's own element (scoped-CSS gotcha 2). The height is
   fixed and the width follows from the ratio — 220×200, what the bare image measured. */
@media (max-width: 991.98px) {
    .step-image-hero[b-tcyjpxvwaa] { width: auto; height: 200px; max-width: 100%; margin: 0 auto; }
}