:root {
    --background: 0 0% 100%;
    --foreground: 210 24% 16%;

    --card: 0 0% 100%;
    --card-foreground: 210 24% 16%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 24% 16%;

    --primary: 200 85% 40%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 200 75% 55%;
    --primary-dark: 200 95% 25%;

    --accent-blue: 185 80% 45%;
    --accent-blue-light: 185 70% 60%;
    --accent-blue-dark: 185 90% 30%;

    --secondary: 210 20% 96%;
    --secondary-foreground: 210 24% 16%;

    --muted: 210 20% 96%;
    --muted-foreground: 215 16% 47%;

    --accent: 210 20% 96%;
    --accent-foreground: 210 24% 16%;

    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 200 85% 40%;

    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent-blue)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary-dark)), hsl(var(--primary)), hsl(var(--accent-blue)));
    --gradient-card: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted)));

    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.2);
    --shadow-card: 0 4px 20px -4px hsl(var(--primary) / 0.1);
    --shadow-glow: 0 0 40px hsl(var(--accent-blue) / 0.3);

    --radius: 0.5rem;
}

*, *::before, *::after {
    border-color: hsl(var(--border));
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* FocusOnNavigate focuses the main heading (tabindex=-1) after navigation; hide the resulting
   focus ring on these non-keyboard focus targets while keeping it on real interactive controls. */
[tabindex="-1"]:focus {
    outline: none;
}

.bg-gradient-hero {
    background: var(--gradient-hero);
}

.bg-gradient-card {
    background: var(--gradient-card);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-primary-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    height: 2.75rem;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--input));
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.card {
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    transition: color 0.2s, background-color 0.2s;
}

.badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.separator {
    height: 1px;
    width: 100%;
    background-color: hsl(var(--border));
    flex-shrink: 0;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link:hover {
    color: hsl(var(--foreground));
}

.dropdown-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: hsl(var(--foreground));
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: hsl(var(--secondary));
}

.product-frame {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-elegant);
    min-width: 0;
}

.product-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted));
}

.product-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
}

.product-urlbar {
    /* The url is nowrap, so its min-content contribution would size the whole grid
       track on narrow viewports. Zero basis and width contribute nothing intrinsic;
       flex-grow still fills the space that is actually available. */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    text-align: center;
    font-size: 0.72rem;
    color: hsl(var(--muted-foreground));
    background-color: hsl(var(--background));
    border-radius: 9999px;
    padding: 0.15rem 0.75rem;
    border: 1px solid hsl(var(--border));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 18rem;
    padding: 2rem;
    text-align: center;
    background: var(--gradient-card);
    color: hsl(var(--muted-foreground));
}

.faq-item {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background-color: hsl(var(--card));
}

.faq-item + .faq-item {
    margin-top: 0.75rem;
}

.faq-item > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    transition: transform 0.2s;
    color: hsl(var(--muted-foreground));
}

.faq-item[open] > summary .faq-chevron {
    transform: rotate(180deg);
}

.faq-body {
    padding: 0 1.25rem 1.25rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.65;
}

.logo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background-color: hsl(var(--card));
    color: hsl(var(--muted-foreground));
    font-weight: 600;
    font-size: 0.85rem;
}

.logo-chip i {
    color: hsl(var(--primary));
}

.stat-value {
    /* Stat values are words, not numbers, and the two-column mobile grid cell is
       narrower than a single long word set at 2rem. */
    font-size: clamp(1.3rem, 5.5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    color: hsl(var(--foreground));
    overflow-wrap: anywhere;
}

.stat-label {
    font-size: 0.85rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

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

.list-check > li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.35rem 0;
    color: hsl(var(--foreground));
    line-height: 1.5;
}

.list-check > li > i {
    color: hsl(var(--primary));
    margin-top: 0.28rem;
    flex-shrink: 0;
}

.qm-input {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    padding: 0.625rem 0.875rem;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.qm-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}

.validation-message,
.qm-validation {
    display: block;
    color: hsl(var(--destructive));
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.qm-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border: 1px solid hsl(var(--input));
    border-radius: 9999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.qm-chip:hover {
    border-color: hsl(var(--primary));
}

.qm-chip-on {
    background-color: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

/* ---------------------------------------------------------------
   Diagram system (qm-dia-*).
   Shafts, rails, rings and fills are CSS. Every glyph, arrow head
   and pictogram is a Font Awesome node, per AGENTS.md 4c.
   All keyframes live here, never in the Tailwind CDN inline config,
   which is generated at runtime after this file has applied.
   Resting state is the finished state, so the reduced-motion
   animation:none at the end of this block degrades cleanly.
   --------------------------------------------------------------- */

.qm-dia {
    --dia-node: 3.25rem;
    --dia-line: 2px;
    --dia-rule: hsl(var(--border));
    --dia-dur-flow: 5.5s;
    --dia-dur-halo: 5.5s;
    --dia-dur-fill: 1.1s;
    --dia-ease: cubic-bezier(.4, 0, .2, 1);
    --qm-delay: 0s;
    position: relative;
    isolation: isolate;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) * 1.5);
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin: 0;
}

@media (min-width: 768px) {
    .qm-dia {
        padding: 2rem;
    }
}

.qm-dia-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.qm-dia-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    /* Grid and flex children default to min-width:auto, which lets a long chip widen
       the whole track on narrow viewports. */
    min-width: 0;
    padding: 0.9rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-card);
}

.qm-dia-ico {
    width: var(--dia-node);
    height: var(--dia-node);
    border-radius: calc(var(--radius) + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
}

.qm-dia-ico--accent {
    background-color: hsl(var(--accent-blue) / 0.12);
    color: hsl(var(--accent-blue-dark));
}

.qm-dia-ico--solid {
    background-image: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
}

.qm-dia-ico--success {
    background-color: hsl(var(--success) / 0.12);
    color: hsl(var(--success));
}

.qm-dia-ico--muted {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border: 1px dashed hsl(var(--border));
}

.qm-dia-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    line-height: 1.3;
}

.qm-dia-cap {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.45;
}

.qm-dia-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 9999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    max-width: 100%;
    text-align: center;
}

.qm-dia-chip--off {
    background-color: transparent;
    border: 1px dashed hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

.qm-dia-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border));
}

.qm-dia-figcap {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

/* Connector. Layer 1 is the static rule, layer 2 is a comet moved by
   background-position alone, so nothing lays out and nothing repaints
   outside the strip itself. */
.qm-dia-link {
    position: relative;
    border-radius: 9999px;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(90deg, var(--dia-rule), var(--dia-rule)),
        linear-gradient(90deg,
            hsl(var(--accent-blue) / 0) 0%,
            hsl(var(--accent-blue) / 0.95) 45%,
            hsl(var(--primary) / 0.95) 60%,
            hsl(var(--primary) / 0) 100%);
    background-size: 100% 100%, 45% 100%;
    background-position: 0 0, -100% 0;
    animation: qm-dia-flow-x var(--dia-dur-flow) linear infinite;
    animation-delay: var(--qm-delay);
}

.qm-dia-link-h {
    height: var(--dia-line);
    width: 100%;
}

.qm-dia-link-v {
    width: var(--dia-line);
    min-height: 2.25rem;
    background-image:
        linear-gradient(180deg, var(--dia-rule), var(--dia-rule)),
        linear-gradient(180deg,
            hsl(var(--accent-blue) / 0) 0%,
            hsl(var(--accent-blue) / 0.95) 45%,
            hsl(var(--primary) / 0.95) 60%,
            hsl(var(--primary) / 0) 100%);
    background-size: 100% 100%, 100% 45%;
    background-position: 0 0, 0 -100%;
    animation-name: qm-dia-flow-y;
}

@keyframes qm-dia-flow-x {
    from { background-position: 0 0, -50% 0; }
    to   { background-position: 0 0, 150% 0; }
}

@keyframes qm-dia-flow-y {
    from { background-position: 0 0, 0 -50%; }
    to   { background-position: 0 0, 0 150%; }
}

.qm-dia-link--rev {
    animation-name: qm-dia-flow-x-rev;
}

@keyframes qm-dia-flow-x-rev {
    from { background-position: 0 0, 150% 0; }
    to   { background-position: 0 0, -50% 0; }
}

/* Return rail. Three borders form the path that carries the last stage
   back to the first, so the diagram reads as a closed cycle. */
.qm-loop-rail {
    position: relative;
    height: 3rem;
    margin: 0 2.5rem;
    border-left: var(--dia-line) solid var(--dia-rule);
    border-right: var(--dia-line) solid var(--dia-rule);
    border-bottom: var(--dia-line) solid var(--dia-rule);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.qm-loop-rail > .qm-dia-link {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--dia-line) * -1);
}

.qm-loop-rail > .qm-loop-label {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    background-color: hsl(var(--card));
    padding: 0 0.6rem;
}

.qm-loop-rail-v {
    position: relative;
    width: 3rem;
    margin: 0.5rem 0 0.5rem 1.5rem;
    border-top: var(--dia-line) solid var(--dia-rule);
    border-bottom: var(--dia-line) solid var(--dia-rule);
    border-left: var(--dia-line) solid var(--dia-rule);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    min-height: 4rem;
}

/* Travelling activation halo. Sits behind an icon puck and pulses in
   sequence with the connectors via --qm-delay. */
.qm-dia-halo {
    position: relative;
}

.qm-dia-halo::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border-radius: calc(var(--radius) + 6px);
    border: 2px solid hsl(var(--primary) / 0.55);
    opacity: 0;
    pointer-events: none;
    animation: qm-dia-halo var(--dia-dur-halo) var(--dia-ease) infinite;
    animation-delay: var(--qm-delay);
}

@keyframes qm-dia-halo {
    0%   { opacity: 0; transform: scale(0.9); }
    8%   { opacity: 1; transform: scale(1); }
    26%  { opacity: 0; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.12); }
}

/* Meter fill. Resting state is full, so animation:none leaves it read
   as a complete bar rather than an empty one. */
.qm-dia-meter {
    height: 0.5rem;
    border-radius: 9999px;
    background-color: hsl(var(--muted));
    overflow: hidden;
}

.qm-dia-meter > span {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background-image: var(--gradient-primary);
    transform-origin: left center;
    animation: qm-dia-fill var(--dia-dur-fill) var(--dia-ease) both;
    animation-delay: var(--qm-delay);
}

@keyframes qm-dia-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.qm-dia-hatch {
    background-image: repeating-linear-gradient(
        135deg,
        hsl(var(--muted-foreground) / 0.25) 0,
        hsl(var(--muted-foreground) / 0.25) 3px,
        transparent 3px,
        transparent 7px);
}

.qm-dia-reject {
    border: 1px dashed hsl(var(--destructive) / 0.5);
    color: hsl(var(--muted-foreground));
    background-color: hsl(var(--destructive) / 0.04);
}

/* Scroll-driven reveal where the browser supports it. Without it the
   one-shot fills simply run on load, which is the current behaviour. */
@supports (animation-timeline: view()) {
    .qm-dia-meter > span {
        animation-timeline: view();
        animation-range: entry 20% cover 35%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qm-dia *,
    .qm-dia *::before,
    .qm-dia *::after {
        animation: none !important;
        transition: none !important;
    }
}