@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] {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem);
    /* Tighter than the default, and tighter still as it grows: the mockups set the
       headline as a block of two short lines, which only works when the lines nearly
       touch. */
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 750;
    margin-bottom: 1rem;
}

/* The two halves are separate elements so the second can take the action hue, and the
   break between them is forced rather than left to wrapping — otherwise the turn in
   colour lands mid-line at some widths and reads as an accident. */
.hero-title .headline-accent[b-yrh10kzt83] {
    display: block;
}

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

.hero-promises[b-yrh10kzt83] {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.hero-promises li[b-yrh10kzt83] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.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] {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.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);
}

/* The number is the pack's 01–04, set small and in the accent above the title. It is
   decorative — the steps are already in document order — so it is not announced. */
.how-card-step[b-yrh10kzt83] {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.how-card-title[b-yrh10kzt83] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.15rem 0 0.35rem;
}

.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);
}

/* The disc lifts a little with the card, which is the only motion on the page. */
.how-card .icon-badge[b-yrh10kzt83] {
    transition: transform .15s ease;
}

.how-card:hover .icon-badge[b-yrh10kzt83] {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .how-card .icon-badge[b-yrh10kzt83] { transition: none; }
    .how-card:hover .icon-badge[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, titles only: the promise survives in three words and the row costs
       one line of height instead of six. */
    .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] { display: none; }
}

@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: auto 1fr; column-gap: 1rem; align-items: start; }
    .how-card .icon-badge[b-yrh10kzt83] { grid-row: 1 / span 3; }
    .how-card-step[b-yrh10kzt83], .how-card-title[b-yrh10kzt83], .how-card-text[b-yrh10kzt83] { grid-column: 2; }
    .how-card-step[b-yrh10kzt83] { margin-top: 0; }
}
/* /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 */
.wizard-steps[b-6bqle3rx9l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

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

.wizard-step-number[b-6bqle3rx9l] {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--color-divider);
    font-size: 0.8rem;
    font-weight: 600;
}

.wizard-step.current[b-6bqle3rx9l] {
    color: var(--color-text);
    font-weight: 600;
}

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

.wizard-step.done[b-6bqle3rx9l] {
    color: var(--color-text);
}

/* Ink on the lavender tint rather than the accent on it: the violet is a 4.4:1 text
   colour over a near-white ground, which is fine for a mark and not for a numeral. */
.wizard-step.done .wizard-step-number[b-6bqle3rx9l] {
    background: var(--color-lavender);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: var(--color-text);
}

.wizard-card[b-6bqle3rx9l] {
    max-width: 1080px;
}

/* Fields left, step illustration right. Stays a grid at every width: below the
   breakpoint it collapses to one column, and the image 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) 250px;
    gap: 2.5rem;
    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;
    }
}

.wizard-title[b-6bqle3rx9l] {
    margin-bottom: 0.35rem;
}


.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);
}

.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/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-tile` rule written in
   Home.razor.css would compile to `.step-image-tile[b-home]` and never match. */

.step-image[b-tcyjpxvwaa] {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-lg);
}

/* ── 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. */
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 545;
}

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

/* ── 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; }
}

/* ── Landing "how it works" cards ───────────────────────────
   A square window off a 4:5 original trims 10% from the top and bottom, which is
   margin in all four illustrations — nothing is clipped. */
.step-image-tile[b-tcyjpxvwaa] {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 1rem;
}

/* ── Wizard side panel ──────────────────────────────────────
   Uncropped 4:5, and sticky so it stays with the fields on a long step. */
.step-image-panel[b-tcyjpxvwaa] {
    width: 100%;
    height: auto;
    position: sticky;
    top: 1.5rem;
}

/* Below the wizard's two-column breakpoint the panel 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: static;
        width: 200px;
        margin: 0 auto 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .step-image-panel[b-tcyjpxvwaa] {
        width: 150px;
    }
}

/* ── Dark theme ─────────────────────────────────────────────
   Light artwork on the dark ground (#151a24 since the 2026-10-04 retune). Dimming it and drawing an edge makes it read as
   a card rather than a hole punched in the page. 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);
        box-shadow: 0 0 0 1px var(--color-divider);
    }
}

:root[data-theme="dark"] .step-image[b-tcyjpxvwaa] {
    filter: brightness(0.88) saturate(0.92);
    box-shadow: 0 0 0 1px var(--color-divider);
}

/* The cut-out hero needs neither the dim nor the outline the other illustrations get in
   dark: it has no plate to disguise, and an outline would box transparent corners. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .step-image-hero > .step-image[b-tcyjpxvwaa] { box-shadow: none; }
}

:root[data-theme="dark"] .step-image-hero > .step-image[b-tcyjpxvwaa] { box-shadow: none; }

/* 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; }
}