@import '_content/VibeScan.Ui/VibeScan.Ui.rsgujg7rkw.bundle.scp.css';

/* /Components/Auth/AuthStage.razor.rz.scp.css */
.as[b-bu6maksnvq] {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--vs-ink);
    font-family: var(--vs-body, system-ui, sans-serif);
    background: var(--vs-void);
    overflow-x: clip;
}
.as a[b-bu6maksnvq] { color: inherit; text-decoration: none; }

/* ---- background: same star-field / graticule / glow language as the home page ---- */
.as-bg[b-bu6maksnvq] { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.as-bg i[b-bu6maksnvq] { position: absolute; inset: 0; }
.as-glow[b-bu6maksnvq] {
    background:
        radial-gradient(900px 620px at 14% -6%, rgba(91,77,255,.22), transparent 70%),
        radial-gradient(720px 520px at 104% 8%, rgba(125,211,252,.09), transparent 70%),
        radial-gradient(640px 420px at 50% 112%, rgba(255,138,31,.09), transparent 70%);
    animation: as-drift-b-bu6maksnvq 18s ease-in-out infinite alternate;
}
.as-grid[b-bu6maksnvq] {
    background-image:
        linear-gradient(var(--vs-hair) 1px, transparent 1px),
        linear-gradient(90deg, var(--vs-hair) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
    mask: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
    opacity: .7;
}
.as-grain[b-bu6maksnvq] { opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); mix-blend-mode: overlay; }
@keyframes as-drift-b-bu6maksnvq { to { transform: translate3d(-2%, 3%, 0) scale(1.05); } }

/* ---- header / footer ---- */
.as-top[b-bu6maksnvq], .as-foot[b-bu6maksnvq] { position: relative; z-index: 1; width: min(1180px, 100% - 40px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.as-top[b-bu6maksnvq] { padding: 22px 0; }
.as-mark[b-bu6maksnvq] { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; font-family: 'Syne', var(--vs-display); font-kerning: normal; font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.as-glyph[b-bu6maksnvq] { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--vs-platinum-2); border-radius: 3px; display: grid; place-items: center; flex: none; }
.as-glyph[b-bu6maksnvq]::after { content: ""; width: 7px; height: 7px; background: var(--vs-amber); border-radius: 1px; box-shadow: 0 0 12px 3px rgba(255,138,31,.7); animation: as-blip-b-bu6maksnvq 2.4s ease-in-out infinite; }
.as-tld[b-bu6maksnvq] { color: var(--vs-platinum-dim); font-weight: 600; }
.as-back[b-bu6maksnvq] { font-size: 13.5px; color: var(--vs-ink-2); padding: 8px 4px; transition: color .15s; }
.as-back:hover[b-bu6maksnvq] { color: var(--vs-ink); }
.as-foot[b-bu6maksnvq] { padding: 22px 0 26px; font-family: var(--vs-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .06em; color: var(--vs-platinum-dim); flex-wrap: wrap; }
.as-foot a:hover[b-bu6maksnvq] { color: var(--vs-ink); }

/* ---- layout ---- */
.as-main[b-bu6maksnvq] { position: relative; z-index: 1; flex: 1; width: min(1180px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(12px, 4vh, 48px); }

.as-chip[b-bu6maksnvq] { display: inline-flex; align-items: center; gap: 9px; font-family: var(--vs-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-amber); border: 1px solid color-mix(in srgb, var(--vs-amber) 35%, transparent); background: var(--vs-amber-soft); border-radius: 999px; padding: 7px 13px; }
.as-chip i[b-bu6maksnvq] { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-amber); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--vs-amber) 70%, transparent); animation: as-blip-b-bu6maksnvq 1.6s ease-in-out infinite; }
.as-pitch h1[b-bu6maksnvq] { margin: 20px 0 16px; font-family: var(--vs-display); font-weight: 800; font-size: clamp(36px, 5vw, 62px); line-height: 1; letter-spacing: -.035em; }
.as-grad[b-bu6maksnvq] { background: linear-gradient(100deg, var(--vs-indigo), #C026D3 48%, var(--vs-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-lede[b-bu6maksnvq] { max-width: 480px; margin: 0 0 30px; color: var(--vs-ink-2); font-size: 17px; line-height: 1.55; }
.as-points[b-bu6maksnvq] { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 480px; }
.as-points li[b-bu6maksnvq] { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--vs-hair-2); border-radius: 12px; background: color-mix(in srgb, var(--vs-carbon) 70%, transparent); backdrop-filter: blur(6px); transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s; }
.as-points li:hover[b-bu6maksnvq] { transform: translateX(4px); border-color: color-mix(in srgb, var(--vs-indigo) 55%, transparent); }
.as-points b[b-bu6maksnvq] { font-family: var(--vs-display); font-size: 20px; letter-spacing: -.02em; color: var(--vs-ink); }
.as-points span[b-bu6maksnvq] { font-size: 13.5px; color: var(--vs-ink-2); }

/* ---- card ---- */
.as-card[b-bu6maksnvq] {
    position: relative;
    justify-self: center;
    width: min(460px, 100%);
    padding: clamp(22px, 4vw, 34px);
    border-radius: 18px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--vs-carbon), var(--vs-carbon)) padding-box,
        conic-gradient(from var(--as-a, 0deg), transparent 0 68%, var(--vs-amber) 82%, var(--vs-indigo) 92%, transparent) border-box;
    box-shadow: 0 40px 90px -40px rgba(91,77,255,.55), 0 1px 0 rgba(255,255,255,.05) inset;
    animation: as-spin-b-bu6maksnvq 7s linear infinite;
}
@property --as-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes as-spin-b-bu6maksnvq { to { --as-a: 360deg; } }
@keyframes as-blip-b-bu6maksnvq { 50% { opacity: .4; } }
.as-br[b-bu6maksnvq] { position: absolute; width: 9px; height: 9px; border: 1px solid var(--vs-platinum-2); opacity: .8; }
.as-tl[b-bu6maksnvq] { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.as-tr[b-bu6maksnvq] { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.as-bl[b-bu6maksnvq] { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.as-bb[b-bu6maksnvq] { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

@media (max-width: 900px) {
    .as-main[b-bu6maksnvq] { grid-template-columns: 1fr; gap: 28px; padding-block: 4px 20px; }
    .as-card[b-bu6maksnvq] { order: -1; }
    .as-pitch[b-bu6maksnvq] { text-align: center; }
    .as-lede[b-bu6maksnvq], .as-points[b-bu6maksnvq] { margin-inline: auto; }
    .as-points li[b-bu6maksnvq] { text-align: left; }
}
@media (max-width: 520px) {
    .as-top[b-bu6maksnvq] { padding: 16px 0; }
    .as-back[b-bu6maksnvq] { display: none; } /* the logo links home; the site-wide language picker sits in this corner */
    .as-points li[b-bu6maksnvq] { grid-template-columns: 78px 1fr; padding: 10px 12px; }
    .as-points b[b-bu6maksnvq] { font-size: 17px; }
    .as-lede[b-bu6maksnvq] { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .as-glow[b-bu6maksnvq], .as-card[b-bu6maksnvq], .as-glyph[b-bu6maksnvq]::after, .as-chip i[b-bu6maksnvq] { animation: none; }
    .as-points li[b-bu6maksnvq] { transition: none; }
}
/* /Components/Auth/FirebaseAuthPanel.razor.rz.scp.css */
.ap[b-njoq1edh8n] { color: var(--vs-ink); font-family: var(--vs-body, system-ui, sans-serif); }

/* ---- mode tabs ---- */
.ap-tabs[b-njoq1edh8n] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 22px; border: 1px solid var(--vs-hair-2); border-radius: 12px; background: var(--vs-carbon-lo, rgba(255,255,255,.03)); }
.ap-tabs button[b-njoq1edh8n] {
    min-height: 44px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--vs-ink-2); font: 600 14px var(--vs-body, inherit);
    transition: background .2s, color .2s, box-shadow .2s;
}
.ap-tabs button:hover[b-njoq1edh8n] { color: var(--vs-ink); }
.ap-tabs button.is-on[b-njoq1edh8n] { background: var(--vs-carbon-hi, #1a1d27); color: var(--vs-ink); box-shadow: 0 0 0 1px var(--vs-hair-3), 0 8px 22px -12px rgba(91,77,255,.7); }
.ap-tabs button:focus-visible[b-njoq1edh8n], .ap-provider:focus-visible[b-njoq1edh8n], .ap-submit:focus-visible[b-njoq1edh8n], .ap-ghost:focus-visible[b-njoq1edh8n] { outline: 2px solid var(--vs-indigo); outline-offset: 2px; }

.ap-title[b-njoq1edh8n] { margin: 0 0 6px; font-family: var(--vs-display); font-weight: 800; font-size: clamp(22px, 3vw, 27px); letter-spacing: -.025em; line-height: 1.1; }
.ap-sub[b-njoq1edh8n] { margin: 0 0 20px; color: var(--vs-ink-2); font-size: 14.5px; line-height: 1.5; }
.ap-error[b-njoq1edh8n] { margin: 0 0 16px; padding: 11px 13px; border-radius: 10px; font-size: 13.5px; color: var(--vs-critical); background: var(--vs-critical-soft); border: 1px solid color-mix(in srgb, var(--vs-critical) 35%, transparent); }

/* ---- providers ---- */
.ap-providers[b-njoq1edh8n] { display: grid; gap: 10px; }
.ap-provider[b-njoq1edh8n] {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    min-height: 48px; padding: 0 16px; border-radius: 11px; cursor: pointer;
    background: var(--vs-carbon-hi, #1a1d27); color: var(--vs-ink);
    border: 1px solid var(--vs-hair-3); font: 600 14.5px var(--vs-body, inherit);
    transition: transform .15s, border-color .2s, background .2s;
}
.ap-provider:hover:not(:disabled)[b-njoq1edh8n] { transform: translateY(-1px); border-color: var(--vs-platinum-2); }
.ap-provider:disabled[b-njoq1edh8n], .ap-submit:disabled[b-njoq1edh8n] { opacity: .55; cursor: not-allowed; }

.ap-divider[b-njoq1edh8n] { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--vs-platinum-dim); font-family: var(--vs-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.ap-divider[b-njoq1edh8n]::before, .ap-divider[b-njoq1edh8n]::after { content: ""; flex: 1; height: 1px; background: var(--vs-hair-2); }

/* ---- form ---- */
.ap-form[b-njoq1edh8n] { display: grid; gap: 14px; }
.ap-field[b-njoq1edh8n] { display: grid; gap: 7px; }
.ap-field span[b-njoq1edh8n] { font-size: 12.5px; font-weight: 600; color: var(--vs-ink-2); }
.ap-field input[b-njoq1edh8n] {
    min-height: 48px; padding: 0 14px; border-radius: 11px; outline: 0;
    background: var(--vs-carbon-hi, #1a1d27); border: 1px solid var(--vs-hair-3); color: var(--vs-ink);
    font: 16px var(--vs-body, inherit); /* 16px stops iOS focus zoom */
    transition: border-color .2s, box-shadow .2s;
}
.ap-field input[b-njoq1edh8n]::placeholder { color: #8A93A8; }
.ap-field input:focus[b-njoq1edh8n] { border-color: var(--vs-amber); box-shadow: 0 0 0 4px var(--vs-amber-soft); }
.ap-submit[b-njoq1edh8n] {
    margin-top: 4px; min-height: 50px; border: 0; border-radius: 11px; cursor: pointer;
    font: 700 15px var(--vs-body, inherit); color: #1B0A00;
    background: linear-gradient(135deg, #FFB84D, var(--vs-amber));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vs-amber) 40%, transparent), 0 12px 34px -10px color-mix(in srgb, var(--vs-amber) 70%, transparent);
    transition: transform .15s, filter .15s;
}
.ap-submit:hover:not(:disabled)[b-njoq1edh8n] { transform: translateY(-1px); filter: brightness(1.06); }

.ap-legal[b-njoq1edh8n] { margin: 18px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--vs-platinum-dim); }
.ap-legal a[b-njoq1edh8n] { color: var(--vs-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ap-legal a:hover[b-njoq1edh8n] { color: var(--vs-ink); }

/* ---- signed-in row ---- */
.ap-user[b-njoq1edh8n] { display: flex; align-items: center; gap: 12px; }
.ap-avatar[b-njoq1edh8n] { border-radius: 50%; }
.ap-user-name[b-njoq1edh8n] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ap-ghost[b-njoq1edh8n] { min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer; background: transparent; color: var(--vs-ink); border: 1px solid var(--vs-hair-3); font: 600 13px var(--vs-body, inherit); }

@media (prefers-reduced-motion: reduce) {
    .ap-tabs button[b-njoq1edh8n], .ap-provider[b-njoq1edh8n], .ap-submit[b-njoq1edh8n], .ap-field input[b-njoq1edh8n] { transition: none; }
}

.ap-tabs--one[b-njoq1edh8n] { grid-template-columns: 1fr; }
.ap-notice[b-njoq1edh8n] { margin: 0 0 16px; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); background: var(--vs-amber-soft); border: 1px solid color-mix(in srgb, var(--vs-amber) 30%, transparent); }
.ap-notice a[b-njoq1edh8n] { color: var(--vs-ink); text-decoration: underline; text-underline-offset: 3px; }
/* /Components/Conversion/AutoFixShowcase.razor.rz.scp.css */
.af[b-fk1c9rnal3] { max-width: 1180px; margin: 0 auto; padding: 96px 24px; color: var(--vs-ink); }
.af-head[b-fk1c9rnal3] { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.af-eyebrow[b-fk1c9rnal3] { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vs-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vs-indigo); }
.af-eyebrow i[b-fk1c9rnal3] { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-indigo); box-shadow: 0 0 10px var(--vs-indigo); animation: af-blink-b-fk1c9rnal3 1.4s ease-in-out infinite; }
.af h2[b-fk1c9rnal3] { margin: 14px 0 12px; font-family: var(--vs-display, inherit); font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; }
.af-grad[b-fk1c9rnal3] { background: linear-gradient(100deg, var(--vs-indigo), #C026D3 45%, var(--vs-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.af-head p[b-fk1c9rnal3] { margin: 0; color: var(--vs-ink-2); font-size: 17px; line-height: 1.55; }

.af-flow[b-fk1c9rnal3] { display: grid; grid-template-columns: 1.15fr .9fr 1.15fr; gap: 18px; align-items: stretch; }
.af-col[b-fk1c9rnal3] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.af-step[b-fk1c9rnal3] { font-family: var(--vs-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--vs-platinum-dim); }
.af-card[b-fk1c9rnal3], .af-out[b-fk1c9rnal3], .af-core[b-fk1c9rnal3] {
    background: var(--vs-carbon); border: 1px solid var(--vs-hair-2); border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -36px rgba(20,16,60,.45);
    transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.af-card:hover[b-fk1c9rnal3], .af-out:hover[b-fk1c9rnal3] { transform: translateY(-3px); border-color: color-mix(in srgb, var(--vs-indigo) 45%, transparent); }
.af-card[b-fk1c9rnal3] { padding: 18px; flex: 1; }

.af-cov-top[b-fk1c9rnal3] { display: flex; align-items: baseline; gap: 10px; }
.af-cov-top b[b-fk1c9rnal3] { font-family: var(--vs-display, inherit); font-size: 40px; letter-spacing: -.03em; }
.af-cov-top span[b-fk1c9rnal3] { color: var(--vs-ink-2); font-size: 14px; }
.af-cov-bar[b-fk1c9rnal3] { display: flex; gap: 3px; height: 12px; margin: 12px 0; border-radius: 99px; overflow: hidden; }
.af-cov-bar i[b-fk1c9rnal3] { min-width: 4px; background-size: 200% 100% !important; animation: af-shimmer-b-fk1c9rnal3 3.2s ease-in-out infinite; }
.af-cov-legend[b-fk1c9rnal3] { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--vs-ink-2); }
.af-cov-legend li[b-fk1c9rnal3] { display: flex; align-items: center; gap: 7px; }
.af-cov-legend i[b-fk1c9rnal3] { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.af-cov-legend b[b-fk1c9rnal3] { margin-left: auto; color: var(--vs-ink); font-variant-numeric: tabular-nums; }

.af-finds[b-fk1c9rnal3] { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--vs-hair-2); display: grid; gap: 7px; }
.af-finds li[b-fk1c9rnal3] { position: relative; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--vs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: af-fixed-b-fk1c9rnal3 6s var(--d) infinite; }
.af-finds li[b-fk1c9rnal3]::after { content: "\2713 fixed"; margin-left: auto; font-size: 11px; font-weight: 700; color: #10B981; opacity: 0; animation: af-tick-b-fk1c9rnal3 6s var(--d) infinite; }
.af-sev[b-fk1c9rnal3] { flex: none; font: 700 9.5px var(--vs-mono, monospace); letter-spacing: .06em; padding: 3px 7px; border-radius: 99px; }
.af-crit[b-fk1c9rnal3] { color: var(--vs-critical); background: var(--vs-critical-soft); }
.af-warn[b-fk1c9rnal3] { color: var(--vs-warn); background: var(--vs-warn-soft); }

.af-col-core[b-fk1c9rnal3] { align-items: stretch; }
.af-core[b-fk1c9rnal3] { position: relative; flex: 1; min-height: 220px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--vs-indigo) 18%, var(--vs-carbon)), var(--vs-carbon) 70%); }
.af-wires[b-fk1c9rnal3] { position: absolute; inset: 0; width: 100%; height: 100%; }
.af-wires path[b-fk1c9rnal3] { fill: none; stroke: var(--vs-hair-3); stroke-width: .6; vector-effect: non-scaling-stroke; }
.af-wires .af-pulse[b-fk1c9rnal3] { stroke: var(--vs-amber); stroke-width: 2.5; stroke-dasharray: 12 88; animation: af-travel-b-fk1c9rnal3 2.2s linear infinite; }
.af-orb[b-fk1c9rnal3] {
    position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center;
    background: radial-gradient(circle at 35% 30%, #fff 0, #C9C3FF 18%, var(--vs-indigo) 55%, #2A1F7A 100%);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--vs-indigo) 12%, transparent), 0 0 60px color-mix(in srgb, var(--vs-indigo) 60%, transparent);
    animation: af-breathe-b-fk1c9rnal3 3.4s ease-in-out infinite;
}
.af-orb[b-fk1c9rnal3]::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, var(--vs-amber) 75%, #C026D3 88%, transparent); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); animation: af-spin-b-fk1c9rnal3 2.8s linear infinite; }
.af-orb span[b-fk1c9rnal3] { position: relative; color: #fff; font-weight: 800; font-size: 14px; line-height: 1.15; max-width: 92px; text-shadow: 0 1px 8px rgba(20,10,80,.6); }
.af-models[b-fk1c9rnal3] { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-models li[b-fk1c9rnal3] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--vs-carbon); border: 1px solid var(--vs-hair-2); font-weight: 700; font-size: 14px; }
.af-models i[b-fk1c9rnal3] { width: 10px; height: 10px; border-radius: 50%; animation: af-blink-b-fk1c9rnal3 2.4s ease-in-out infinite; }
.af-models .m1[b-fk1c9rnal3] { background: #10B981; } .af-models .m2[b-fk1c9rnal3] { background: #C026D3; animation-delay: .8s; } .af-models .m3[b-fk1c9rnal3] { background: var(--vs-amber); animation-delay: 1.6s; }

.af-outs[b-fk1c9rnal3] { display: grid; gap: 12px; flex: 1; }
.af-out[b-fk1c9rnal3] { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; overflow: hidden; }
.af-out[b-fk1c9rnal3]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--vs-indigo) 14%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: af-sweep-b-fk1c9rnal3 4.8s var(--d) ease-in-out infinite; }
.af-out svg[b-fk1c9rnal3] { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; fill: none; stroke: var(--vs-indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--vs-indigo-soft); }
.af-out b[b-fk1c9rnal3] { display: block; font-size: 15px; margin-bottom: 3px; }
.af-out span[b-fk1c9rnal3] { display: block; font-size: 13px; line-height: 1.45; color: var(--vs-ink-2); }

.af-deep[b-fk1c9rnal3] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 28px; font-size: 13px; color: var(--vs-ink-2); }
.af-deep em[b-fk1c9rnal3] { font-style: normal; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); color: var(--vs-ink); }
.af-deep a[b-fk1c9rnal3] { padding: 9px 18px; border-radius: 99px; font-weight: 700; text-decoration: none; color: #1B0A00; background: linear-gradient(135deg, #FFB84D, var(--vs-amber)); }
.af-deep a:focus-visible[b-fk1c9rnal3] { outline: 2px solid var(--vs-indigo); outline-offset: 3px; }

@keyframes af-travel-b-fk1c9rnal3 { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes af-spin-b-fk1c9rnal3 { to { transform: rotate(360deg); } }
@keyframes af-breathe-b-fk1c9rnal3 { 50% { transform: scale(1.04); } }
@keyframes af-blink-b-fk1c9rnal3 { 50% { opacity: .35; } }
@keyframes af-shimmer-b-fk1c9rnal3 { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes af-sweep-b-fk1c9rnal3 { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@keyframes af-fixed-b-fk1c9rnal3 { 0%, 40% { color: var(--vs-ink); text-decoration: none; } 50%, 90% { color: var(--vs-platinum-dim); text-decoration: line-through; } 100% { color: var(--vs-ink); } }
@keyframes af-tick-b-fk1c9rnal3 { 0%, 45% { opacity: 0; } 52%, 90% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 980px) {
    .af[b-fk1c9rnal3] { padding: 72px 20px; }
    .af-flow[b-fk1c9rnal3] { grid-template-columns: 1fr; }
    .af-core[b-fk1c9rnal3] { min-height: 180px; }
    .af-outs[b-fk1c9rnal3] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .af-cov-legend[b-fk1c9rnal3] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .af-models[b-fk1c9rnal3] { grid-template-columns: repeat(3, 1fr); }
    .af-models li[b-fk1c9rnal3] { justify-content: center; font-size: 13px; padding: 10px 8px; }
}
@media (max-width: 640px) {
    .af[b-fk1c9rnal3] { padding: 56px 16px; }
    .af-outs[b-fk1c9rnal3] { grid-template-columns: 1fr; }
    .af-cov-legend[b-fk1c9rnal3] { grid-template-columns: 1fr 1fr; }
    .af-head p[b-fk1c9rnal3] { font-size: 15.5px; }
    .af-models[b-fk1c9rnal3] { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .af *[b-fk1c9rnal3], .af *[b-fk1c9rnal3]::before, .af *[b-fk1c9rnal3]::after { animation: none !important; }
}

.af-models .af-model-list[b-fk1c9rnal3] { font-size: 11px; line-height: 1.35; align-items: flex-start; }
.af-models .af-model-list i[b-fk1c9rnal3] { margin-top: 4px; flex: none; }
.af-harness[b-fk1c9rnal3] { margin: 10px 0 0; font-size: 11px; color: var(--vs-platinum-dim); text-align: center; }
/* /Components/Conversion/DashboardBackdrop.razor.rz.scp.css */
.db[b-rcxx2grxv1] {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    background: var(--color-page, #FAFAF7);
    filter: blur(7px) saturate(1.05);
    transform: scale(1.03);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.db__side[b-rcxx2grxv1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 14px;
    background: linear-gradient(180deg, #1E1A3A, #2A1F55);
    color: #E9E6F7;
    font-size: 13px;
}

.db__brand[b-rcxx2grxv1] { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.db__mark[b-rcxx2grxv1] { width: 20px; height: 20px; border-radius: 6px; background: var(--gradient-coral-flame, linear-gradient(135deg,#FF6B4A,#FF3D6E)); }
.db__workspace[b-rcxx2grxv1] { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.08); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db__group[b-rcxx2grxv1] { margin-top: 10px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.db__item[b-rcxx2grxv1] { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; }
.db__item i[b-rcxx2grxv1] { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .7; }
.db__item--on[b-rcxx2grxv1] { background: rgba(255,255,255,.12); }
.db__upgrade[b-rcxx2grxv1] { margin-top: auto; padding: 10px; border-radius: 10px; text-align: center; background: var(--gradient-electric-violet, linear-gradient(135deg,#8B5CF6,#C026D3)); font-weight: 600; }

.db__main[b-rcxx2grxv1] { padding: 26px 32px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.db__head[b-rcxx2grxv1] { display: flex; justify-content: space-between; align-items: center; }
.db__crumb[b-rcxx2grxv1] { font-size: 12px; color: #6B6577; }
.db__title[b-rcxx2grxv1] { font: 700 26px var(--font-heading, inherit); color: var(--color-text, #1F1B2D); }
.db__autofix[b-rcxx2grxv1] { padding: 10px 18px; border-radius: 999px; color: #fff; font-weight: 600; background: var(--gradient-coral-flame, linear-gradient(135deg,#FF6B4A,#FF3D6E)); }

.db__kpis[b-rcxx2grxv1] { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 14px; }
.db__card[b-rcxx2grxv1] { background: #fff; border: 1px solid rgba(31,27,45,.08); border-radius: 16px; padding: 16px; box-shadow: 0 6px 20px rgba(31,27,45,.06); }
.db__score[b-rcxx2grxv1] { display: flex; align-items: center; gap: 14px; font-weight: 600; color: #4B4558; }
.db__ring[b-rcxx2grxv1] { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#8B5CF6 calc(var(--p) * 1%), #ECE8F5 0); }
.db__ring b[b-rcxx2grxv1] { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 18px; color: #1F1B2D; }
.db__kpi[b-rcxx2grxv1] { display: flex; flex-direction: column; gap: 4px; color: #6B6577; font-size: 13px; }
.db__kpi b[b-rcxx2grxv1] { font-size: 28px; color: #1F1B2D; }
.db__kpi--critical b[b-rcxx2grxv1] { color: var(--severity-critical, #DC2626); }
.db__kpi--high b[b-rcxx2grxv1] { color: var(--severity-high, #EA580C); }

.db__grid[b-rcxx2grxv1] { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; }
.db__wide[b-rcxx2grxv1] { grid-column: 1 / -1; }
.db__card-title[b-rcxx2grxv1] { font-weight: 700; color: #1F1B2D; margin-bottom: 10px; }
.db__bar[b-rcxx2grxv1] { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 12px; color: #4B4558; margin: 7px 0; }
.db__bar i[b-rcxx2grxv1] { --w: 0%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #8B5CF6 var(--w), #EEEAF6 var(--w)); }
.db__row[b-rcxx2grxv1] { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(31,27,45,.06); font-size: 13px; color: #2C2738; white-space: nowrap; overflow: hidden; }
.db__row i[b-rcxx2grxv1] { width: 8px; height: 8px; border-radius: 50%; background: #FF6B4A; flex: none; }
.db__row em[b-rcxx2grxv1] { margin-left: auto; font-style: normal; font-size: 11px; padding: 3px 10px; border-radius: 99px; background: #F1ECFF; color: #6D28D9; }
.db__row--ghost span[b-rcxx2grxv1] { flex: 1; height: 10px; border-radius: 6px; background: #EFEDF3; }
.db__row--ghost i[b-rcxx2grxv1] { background: #E2DEEA; }
.db svg[b-rcxx2grxv1] { width: 100%; height: 80px; }
.db svg path[b-rcxx2grxv1] { fill: none; stroke: #8B5CF6; stroke-width: 2.5; vector-effect: non-scaling-stroke; }

@media (max-width: 760px) {
    .db[b-rcxx2grxv1] { grid-template-columns: 1fr; }
    .db__side[b-rcxx2grxv1] { display: none; }
    .db__kpis[b-rcxx2grxv1] { grid-template-columns: repeat(2, 1fr); }
    .db__score[b-rcxx2grxv1] { grid-column: 1 / -1; }
    .db__grid[b-rcxx2grxv1] { grid-template-columns: 1fr; }
}
/* /Components/Conversion/MemberShellPreview.razor.rz.scp.css */
/* Stage B: Member shell preview styles */

.member-preview[b-7uj7nrknjf] {
    min-height: 100dvh;
}

.member-preview .shell__sidebar[b-7uj7nrknjf] {
    display: block;
}

.sidebar__project-selector[b-7uj7nrknjf] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.sidebar__project-avatar[b-7uj7nrknjf] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-border);
    flex-shrink: 0;
}

.sidebar__project-info[b-7uj7nrknjf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__project-name[b-7uj7nrknjf] {
    display: block;
    width: 80px;
    height: 14px;
    border-radius: 4px;
    background: var(--color-border);
}

.sidebar__project-domain[b-7uj7nrknjf] {
    display: block;
    width: 100px;
    height: 12px;
    border-radius: 4px;
    background: var(--color-border);
}

.sidebar__chevron[b-7uj7nrknjf] {
    color: var(--color-secondary);
    flex-shrink: 0;
}

.sidebar__user[b-7uj7nrknjf] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    margin-top: var(--space-xs);
}

.sidebar__user-avatar[b-7uj7nrknjf] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
}

.sidebar__user-info[b-7uj7nrknjf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__user-name[b-7uj7nrknjf] {
    display: block;
    width: 70px;
    height: 14px;
    border-radius: 4px;
    background: var(--color-border);
}

.sidebar__user-email[b-7uj7nrknjf] {
    display: block;
    width: 110px;
    height: 12px;
    border-radius: 4px;
    background: var(--color-border);
}

.member-preview__content[b-7uj7nrknjf] {
    padding: var(--space-xl);
}

.member-preview__skeleton-header[b-7uj7nrknjf] {
    width: 240px;
    height: 28px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    background: var(--color-border);
}

.member-preview__skeleton-body[b-7uj7nrknjf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.member-preview__skeleton-card[b-7uj7nrknjf] {
    height: 200px;
    border-radius: var(--radius-lg);
    background: var(--color-border);
}

.member-preview__locked-notice[b-7uj7nrknjf] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-secondary);
    padding: var(--space-md);
    background: var(--color-page);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

@media (max-width: 899px) {
    .member-preview .shell__sidebar[b-7uj7nrknjf] {
        display: none;
    }
}
/* /Components/Conversion/OnboardingAuth.razor.rz.scp.css */
/* OnboardingAuth styles — centered narrow column per billing-conversion-design §9 */

.onboarding-auth[b-0m38zztl5e] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    background: var(--color-dark-band);
}

.onboarding-auth__container[b-0m38zztl5e] {
    width: 100%;
    max-width: 420px;
    position: relative;
    text-align: center;
    color: var(--billing-text);
}

.onboarding-auth__close[b-0m38zztl5e] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border-radius: var(--radius-md);
    color: var(--billing-muted);
    transition: color var(--duration-fast);
}

.onboarding-auth__close:hover[b-0m38zztl5e] {
    color: var(--billing-text);
}

.onboarding-auth__brand-mark[b-0m38zztl5e] {
    margin-bottom: var(--space-lg);
}

.onboarding-auth__orb[b-0m38zztl5e] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-coral-start) 0%, var(--color-violet-start) 100%);
    margin: 0 auto;
    opacity: 0.85;
}

.onboarding-auth__status-pill[b-0m38zztl5e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(61, 220, 132, 0.1);
    color: var(--billing-success);
    margin-bottom: var(--space-md);
}

.onboarding-auth__pill-dot[b-0m38zztl5e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--billing-success);
}

.onboarding-auth__domain[b-0m38zztl5e] {
    font-size: var(--text-sm);
    color: var(--billing-muted);
    margin: 0 0 var(--space-md);
}

.onboarding-auth__headline[b-0m38zztl5e] {
    font-size: var(--text-2xl);
    font-weight: 620;
    line-height: 1.3;
    margin: 0 0 var(--space-xl);
}

.onboarding-auth__headline-sub[b-0m38zztl5e] {
    font-weight: 500;
    color: var(--billing-muted);
    font-size: var(--text-lg);
}

.onboarding-auth__google-btn[b-0m38zztl5e] {
    width: 100%;
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-weight: 500;
    gap: var(--space-sm);
}

.onboarding-auth__google-btn:hover[b-0m38zztl5e] {
    background: var(--color-page);
}

.onboarding-auth__divider[b-0m38zztl5e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--billing-muted);
    font-size: var(--text-sm);
}

.onboarding-auth__divider[b-0m38zztl5e]::before,
.onboarding-auth__divider[b-0m38zztl5e]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--billing-border);
}

.onboarding-auth__email-form[b-0m38zztl5e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.onboarding-auth__field[b-0m38zztl5e] {
    text-align: left;
}

.onboarding-auth__label[b-0m38zztl5e] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--billing-muted);
    margin-bottom: 6px;
}

.onboarding-auth__input[b-0m38zztl5e] {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--billing-border);
    background: var(--billing-card);
    color: var(--billing-text);
    font-size: var(--text-base);
    min-height: var(--touch-target-min);
}

.onboarding-auth__input:focus[b-0m38zztl5e] {
    outline: 2px solid var(--color-violet-start);
    outline-offset: 2px;
    border-color: var(--color-violet-start);
}

.onboarding-auth__input[b-0m38zztl5e]::placeholder {
    color: var(--billing-muted);
}

.onboarding-auth__email-btn[b-0m38zztl5e] {
    width: 100%;
}

.onboarding-auth__terms[b-0m38zztl5e] {
    text-align: left;
    margin-bottom: var(--space-lg);
}

.onboarding-auth__checkbox-label[b-0m38zztl5e] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--billing-muted);
    line-height: 1.5;
    cursor: pointer;
}

.onboarding-auth__checkbox[b-0m38zztl5e] {
    margin-top: 3px;
    min-width: 18px;
    min-height: 18px;
    accent-color: var(--color-violet-start);
}

.onboarding-auth__terms a[b-0m38zztl5e] {
    color: var(--billing-text);
    text-decoration: underline;
}

.onboarding-auth__signin-link[b-0m38zztl5e] {
    font-size: var(--text-sm);
    color: var(--billing-muted);
}

.onboarding-auth__signin-link a[b-0m38zztl5e] {
    color: var(--billing-text);
    text-decoration: underline;
}
/* /Components/Conversion/ProjectsPreparing.razor.rz.scp.css */
/* Stage A: Projects preparation skeleton styles */

.projects-preparing[b-e75rhrp324] {
    padding: var(--space-xl) var(--space-md);
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.projects-preparing__header[b-e75rhrp324] {
    margin-bottom: var(--space-xl);
}

.projects-preparing__title-area[b-e75rhrp324] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}

.projects-preparing__title[b-e75rhrp324] {
    font-size: var(--text-2xl);
    font-weight: 620;
}

.projects-preparing__text[b-e75rhrp324] {
    font-size: var(--text-base);
    color: var(--color-secondary);
    margin: 0 0 var(--space-md);
}

.projects-preparing__actions[b-e75rhrp324] {
    display: flex;
    gap: var(--space-sm);
}

.skeleton--action[b-e75rhrp324] {
    width: 100px;
    height: 36px;
    border-radius: var(--radius-full);
    background: #2A2636;
}

.projects-preparing__grid[b-e75rhrp324] {
    grid-template-columns: repeat(3, 1fr);
}

.projects-preparing__card[b-e75rhrp324] {
    background: #2A2636;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.projects-preparing__card-header[b-e75rhrp324] {
    width: 60%;
    height: 20px;
    border-radius: var(--radius-sm);
    background: #363042;
}

.projects-preparing__card-line[b-e75rhrp324] {
    width: 80%;
    height: 14px;
    border-radius: var(--radius-sm);
    background: #363042;
}

.projects-preparing__card-line--short[b-e75rhrp324] {
    width: 45%;
}

@media (max-width: 899px) {
    .projects-preparing__grid[b-e75rhrp324] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .projects-preparing__grid[b-e75rhrp324] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Conversion/WaitlistForm.razor.rz.scp.css */
.wl[b-hz9ex9nqgw] {
    position: relative;
    max-width: 560px;
    margin-top: 28px;
    padding: 22px 22px 18px;
    border-radius: 16px;
    border: 1px solid var(--vs-hair-3);
    background:
        linear-gradient(var(--vs-carbon), var(--vs-carbon)) padding-box,
        conic-gradient(from var(--wl-a, 0deg), transparent 0 70%, var(--vs-amber) 82%, var(--vs-indigo) 92%, transparent) border-box;
    border-color: transparent;
    box-shadow: 0 30px 70px -40px rgba(91,77,255,.55);
    animation: wl-spin-b-hz9ex9nqgw 6s linear infinite;
}
@property --wl-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wl-spin-b-hz9ex9nqgw { to { --wl-a: 360deg; } }

.wl-badge[b-hz9ex9nqgw] {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--vs-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--vs-amber); background: var(--vs-amber-soft); border: 1px solid color-mix(in srgb, var(--vs-amber) 35%, transparent);
    border-radius: 999px; padding: 6px 12px;
}
.wl-badge i[b-hz9ex9nqgw] { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-amber); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--vs-amber) 70%, transparent); animation: wl-blip-b-hz9ex9nqgw 1.6s ease-in-out infinite; }
@keyframes wl-blip-b-hz9ex9nqgw { 50% { opacity: .35; } }

.wl-title[b-hz9ex9nqgw] { margin: 12px 0 14px; color: var(--vs-ink); font-family: var(--vs-display, inherit); font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; letter-spacing: -.015em; }
.wl-form[b-hz9ex9nqgw] { display: flex; gap: 8px; }
.wl-form input[b-hz9ex9nqgw] {
    flex: 1; min-width: 0; padding: 14px; border-radius: 10px; outline: 0;
    background: var(--vs-carbon-hi); border: 1px solid var(--vs-hair-3); color: var(--vs-ink);
    font-size: 16px; /* 16px stops iOS focus zoom */
}
.wl-form input[b-hz9ex9nqgw]::placeholder { color: #8A93A8; }
.wl-form input:focus[b-hz9ex9nqgw] { border-color: var(--vs-amber); box-shadow: 0 0 0 4px var(--vs-amber-soft); }
.wl-form button[b-hz9ex9nqgw] {
    flex: none; min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px; cursor: pointer;
    font-weight: 700; font-size: 15px; color: #1B0A00;
    background: linear-gradient(135deg, #FFB84D, var(--vs-amber));
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--vs-amber) 80%, transparent);
    transition: transform .15s, filter .15s;
}
.wl-form button:hover[b-hz9ex9nqgw] { filter: brightness(1.07); transform: translateY(-1px); }
.wl-form button:focus-visible[b-hz9ex9nqgw] { outline: 2px solid var(--vs-indigo); outline-offset: 3px; }
.wl-form button:disabled[b-hz9ex9nqgw] { opacity: .6; cursor: progress; }
.wl-ok[b-hz9ex9nqgw] { margin: 0; color: var(--vs-ice); font-size: 15px; }
.wl-err[b-hz9ex9nqgw] { margin: 10px 0 0; color: var(--vs-critical); font-size: 13px; }
.wl-note[b-hz9ex9nqgw] { margin: 12px 0 0; color: var(--vs-platinum-dim); font-size: 12.5px; }

@media (max-width: 640px) {
    .wl[b-hz9ex9nqgw] { padding: 18px 16px 16px; }
    .wl-form[b-hz9ex9nqgw] { flex-direction: column; }
    .wl-form button[b-hz9ex9nqgw] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .wl[b-hz9ex9nqgw], .wl-badge i[b-hz9ex9nqgw] { animation: none; }
}

.wl[b-hz9ex9nqgw] { scroll-margin-top: 110px; } /* clear the sticky nav when a CTA scrolls here */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-tnc92irj40] {
    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-tnc92irj40] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4qbvptpplp],
.components-reconnect-repeated-attempt-visible[b-4qbvptpplp],
.components-reconnect-failed-visible[b-4qbvptpplp],
.components-pause-visible[b-4qbvptpplp],
.components-resume-failed-visible[b-4qbvptpplp],
.components-rejoining-animation[b-4qbvptpplp] {
    display: none;
}

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


#components-reconnect-modal[b-4qbvptpplp] {
    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-4qbvptpplp 0.5s both;
    &[open]

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-4qbvptpplp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-4qbvptpplp] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-4qbvptpplp] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-4qbvptpplp] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-4qbvptpplp] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4qbvptpplp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-4qbvptpplp {
    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/Home.razor.rz.scp.css */
/* Landing page styles */

.hero[b-gl9mwksaz0] {
    padding: var(--space-3xl) var(--space-md);
    text-align: center;
}

.hero__inner[b-gl9mwksaz0] {
    max-width: 720px;
    margin: 0 auto;
}

.hero__headline[b-gl9mwksaz0] {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-md);
}

.hero__tagline[b-gl9mwksaz0] {
    font-size: var(--text-xl);
    color: var(--color-secondary);
    margin: 0 0 var(--space-xl);
}

.hero__form[b-gl9mwksaz0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.hero__error[b-gl9mwksaz0] {
    font-size: var(--text-sm);
    color: var(--severity-high);
    margin: 0;
}

.section[b-gl9mwksaz0] {
    padding: var(--space-3xl) var(--space-md);
}

.section__inner[b-gl9mwksaz0] {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.section__inner--center[b-gl9mwksaz0] {
    text-align: center;
    max-width: 640px;
}

.section__inner--narrow[b-gl9mwksaz0] {
    max-width: 720px;
}

.section__heading[b-gl9mwksaz0] {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.section__subheading[b-gl9mwksaz0] {
    font-size: var(--text-lg);
    color: var(--color-secondary);
    text-align: center;
    margin: 0 0 var(--space-xl);
}

.section--cta[b-gl9mwksaz0] {
    text-align: center;
    padding-bottom: var(--space-3xl);
}

.section--cta h2[b-gl9mwksaz0] {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
}

.section--cta p[b-gl9mwksaz0] {
    color: var(--color-secondary);
    margin-bottom: var(--space-lg);
}

.proof-strip__label[b-gl9mwksaz0] {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    font-weight: 500;
}

.feature-card h3[b-gl9mwksaz0] {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
}

.feature-card p[b-gl9mwksaz0] {
    font-size: var(--text-base);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 479px) {
    .hero[b-gl9mwksaz0] {
        padding: var(--space-xl) var(--space-sm);
    }

    .hero__headline[b-gl9mwksaz0] {
        font-size: var(--text-3xl);
    }

    .input-pill[b-gl9mwksaz0] {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .input-pill .btn[b-gl9mwksaz0] {
        width: 100%;
    }
}
/* /Components/Pages/Index.light.razor.rz.scp.css */
/* Index.light.razor.css - scoped styles for the marketing index page's
   LIGHT variant (/light), structured after the checkvibe-clone reference
   captured in skills/checkvibe-clone.skill.md (silver/light palette,
   dark contrast sections, horizontal scroll-snap cards, use-case tabs,
   asymmetric dev bento, gradient-text on emphasised words).

   Class namespace is vsl- (e.g. .vsl-hero, .vsl-card, .vsl-btn) so it
   cannot collide with the dark page's vs- rules even though both
   pages live in the same Blazor app. The two pages share the design
   token system from wwwroot/css/vibescan-tokens.css (dark defaults at
   :root) and wwwroot/css/vibescan-tokens-light.css (light overrides
   under :root[data-vs-theme="light"]), so colors, radii, fonts and
   spacing are token-driven rather than hardcoded.

   Load order in App.razor is the same as the dark page; Blazor's
   scoped-CSS bundling is per-component, so this file ships with
   Index.light.razor and does not affect any other page.
*/

*[b-5qnflrlfx3], *[b-5qnflrlfx3]::before, *[b-5qnflrlfx3]::after { box-sizing: border-box; }

.vsl-page[b-5qnflrlfx3] {
    background: var(--vs-void);
    color: var(--vs-ink);
    font-family: 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vsl-page a[b-5qnflrlfx3] { color: inherit; text-decoration: none; }
.vsl-wrap[b-5qnflrlfx3] { max-width: var(--vs-maxw); margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }

.vsl-push[b-5qnflrlfx3] { margin-left: auto; }

/* ─── Type roles (silver/light page uses the same webfont fallback
   chain as checkvibe.dev; we don't self-host a fifth font for the
   light page, the system stack is the design's actual rendered body
   per the skill file). ─── */
.vsl-page h1[b-5qnflrlfx3], .vsl-page h2[b-5qnflrlfx3], .vsl-page h3[b-5qnflrlfx3], .vsl-page h4[b-5qnflrlfx3] {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--vs-ink);
}
.vsl-page h1[b-5qnflrlfx3] { font-size: clamp(2.25rem, 5.2vw, 3.25rem); }
.vsl-page h2[b-5qnflrlfx3] { font-size: clamp(1.75rem, 3.6vw, 2.25rem); }
.vsl-page h3[b-5qnflrlfx3] { font-size: 1.25rem; }
.vsl-page h4[b-5qnflrlfx3] { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--vs-platinum-dim); margin-bottom: 14px; }

.vsl-eyebrow[b-5qnflrlfx3] {
    font-size: 0.95rem; color: var(--vs-ink-2);
    font-weight: 500;
    margin-bottom: 18px;
}
.vsl-eyebrow-on-dark[b-5qnflrlfx3] { color: rgba(255,255,255,0.78); }

/* The gradient-text effect (used on "Security", "MCP server", etc.) -
   the brief calls this cool steel-silver, deliberately desaturated/metallic. */
.vsl-gradient[b-5qnflrlfx3] {
    background: linear-gradient(180deg, #d3d6dc 0%, #a6abb4 46%, #868c96 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vsl-italic[b-5qnflrlfx3] { font-style: italic; font-weight: 500; }

/* ─── BUTTONS ─── */
.vsl-btn[b-5qnflrlfx3] {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-weight: 500; font-size: 0.95rem;
    padding: 11px 20px; border: 1px solid transparent; border-radius: 999px;
    cursor: pointer; transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
    text-decoration: none;
}
.vsl-btn-black[b-5qnflrlfx3] {
    background: #0a0a0a; color: #fff;
    box-shadow: 0 4px 14px -4px rgba(10,10,10,.4);
}
.vsl-btn-black:hover[b-5qnflrlfx3] { background: #1f1f1f; transform: translateY(-1px); }
.vsl-btn-black:active[b-5qnflrlfx3] { transform: scale(0.98); }
.vsl-btn-ghost[b-5qnflrlfx3] {
    background: transparent; color: var(--vs-ink); border-color: var(--vs-hair-3);
}
.vsl-btn-ghost:hover[b-5qnflrlfx3] { background: rgba(10,10,10,.04); border-color: var(--vs-ink-2); }
.vsl-btn[disabled][b-5qnflrlfx3] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ─── TOP NAV ─── */
.vsl-nav[b-5qnflrlfx3] {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--vs-hair);
}
.vsl-nav-in[b-5qnflrlfx3] {
    display: flex; align-items: center; gap: 20px; height: 64px;
}
.vsl-mark[b-5qnflrlfx3] { display: inline-flex; align-items: center; gap: 10px; font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; font-kerning: normal; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.vsl-mark-glyph[b-5qnflrlfx3] {
    width: 22px; height: 22px;
    background: linear-gradient(160deg, #f4f5f7 0%, #b7bcc5 35%, #7f838d 65%, #eef0f3 100%);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.vsl-mark-word[b-5qnflrlfx3] { color: var(--vs-ink); }
.vsl-nav-links[b-5qnflrlfx3] { display: flex; gap: 24px; margin-left: 6px; }
.vsl-nav-links a[b-5qnflrlfx3] { font-size: 0.92rem; color: var(--vs-ink-2); transition: color .14s; position: relative; }
.vsl-nav-links a:hover[b-5qnflrlfx3] { color: var(--vs-ink); }
/* Same underline sweep affordance the dark page's nav has (amber there,
   indigo→cyan here); on mobile the padded anchors give it room to read. */
.vsl-nav-links a[b-5qnflrlfx3]::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: linear-gradient(90deg, #5b4dff, #0b7bc2); transition: right .22s ease; }
.vsl-nav-links a:hover[b-5qnflrlfx3]::after { right: 0; }
.vsl-nav-act[b-5qnflrlfx3] { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Header mirrors the dark page: full row >1180; links fold into the burger <=1180; the 4-button cluster folds
   into the menu <=700 (theme stays as an icon next to the burger). */

.vsl-nav-burger[b-5qnflrlfx3] { display: none; width: 40px; height: 40px; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; background: transparent; border: 1px solid var(--vs-hair-3); border-radius: 6px; cursor: pointer; }
.vsl-nav-burger span[b-5qnflrlfx3] { width: 18px; height: 1.5px; background: var(--vs-ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.vsl-nav-burger--open span:nth-child(1)[b-5qnflrlfx3] { transform: translateY(6.5px) rotate(45deg); }
.vsl-nav-burger--open span:nth-child(2)[b-5qnflrlfx3] { opacity: 0; }
.vsl-nav-burger--open span:nth-child(3)[b-5qnflrlfx3] { transform: translateY(-6.5px) rotate(-45deg); }
.vsl-nav-burger:focus-visible[b-5qnflrlfx3] { outline: 2px solid var(--vs-indigo); outline-offset: 2px; }
.vsl-mobile-menu[b-5qnflrlfx3] { display: none; }
@media (max-width: 960px) { .vsl-nav-act[b-5qnflrlfx3] { display: none; } }
@media (max-width: 1240px) {
    .vsl-nav-links[b-5qnflrlfx3] { display: none; }
    .vsl-nav-burger[b-5qnflrlfx3] { display: flex; }
    /* Near-opaque glass on small screens: the sticky bar parks over the hero aurora and the #0a0a0a contrast
       sections while scrolling; at .78 alpha the ink can dip toward 4.5:1 over those fills. */
    .vsl-nav[b-5qnflrlfx3] { background: rgba(255,255,255,0.96); }
    /* overlay under the sticky header so opening it never pushes the page (same fix as the dark page) */
    .vsl-mobile-menu[b-5qnflrlfx3] {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
        max-height: 0; overflow: hidden; transition: max-height .22s ease;
        background: rgba(255,255,255,.98); border-bottom: 1px solid var(--vs-hair-2);
    }
    .vsl-mobile-menu--open[b-5qnflrlfx3] { max-height: 420px; border-top: 1px solid var(--vs-hair); }
    .vsl-mobile-menu > a[b-5qnflrlfx3] { padding: 14px 22px; font-size: 15px; font-weight: 500; color: var(--vs-ink-2); border-bottom: 1px solid var(--vs-hair); }
    .vsl-mobile-menu-act[b-5qnflrlfx3] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 22px 18px; }
    .vsl-mobile-menu-act .nav-ctl[b-5qnflrlfx3] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vsl-nav-burger span[b-5qnflrlfx3], .vsl-mobile-menu[b-5qnflrlfx3] { transition: none; } }

@media (max-width: 540px) {
    /* 44px minimum touch targets (WCAG 2.5.5 / Apple HIG) */
}

/* ─── HERO ─── */
.vsl-hero[b-5qnflrlfx3] {
    padding-block: clamp(64px, 8vw, 110px);
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,1), transparent 70%),
        linear-gradient(160deg, #dfe5ee 0%, #f6f8fb 38%, #ffffff 55%, #c9d2e0 100%);
    position: relative; overflow: hidden;
}
.vsl-hero[b-5qnflrlfx3]::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
    mix-blend-mode: multiply; opacity: 0.5;
}
.vsl-hero-grid[b-5qnflrlfx3] { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 60px); align-items: center; position: relative; z-index: 1; }
@media (max-width: 980px) { .vsl-hero-grid[b-5qnflrlfx3] { grid-template-columns: 1fr; } }

.vsl-pill[b-5qnflrlfx3] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--vs-hair-2); background: rgba(255,255,255,0.7);
    font-size: 0.85rem; color: var(--vs-ink-2); margin-bottom: 22px;
}
.vsl-pill em[b-5qnflrlfx3] { color: var(--vs-ink); font-style: normal; font-weight: 600; }

.vsl-hero-copy h1[b-5qnflrlfx3] { margin-bottom: 22px; }
.vsl-sub[b-5qnflrlfx3] { font-size: 1.05rem; color: var(--vs-ink-2); max-width: 480px; margin-bottom: 30px; }


/* Live favicon preview: pops in beside the input as soon as the typed text is host-like. */
.vsl-icon[b-5qnflrlfx3] { width: 16px; height: 16px; }
.vsl-proof[b-5qnflrlfx3] { margin-top: 28px; font-size: 0.9rem; color: var(--vs-ink-2); }
.vsl-proof b[b-5qnflrlfx3] { color: var(--vs-ink); font-weight: 600; }

/* Hero media: a faux video card with concentric rings + a "Try it now" pill CTA. */
.vsl-hero-media[b-5qnflrlfx3] { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.vsl-video-card[b-5qnflrlfx3] {
    position: relative; width: 100%; max-width: 480px;
    aspect-ratio: 16 / 11;
    background: linear-gradient(160deg, #fff 0%, #fafbfd 100%);
    border: 1px solid var(--vs-hair-2); border-radius: 18px;
    box-shadow: 0 30px 80px -28px rgba(15,23,42,0.28);
    overflow: hidden;
}
.vsl-video-frame[b-5qnflrlfx3] { position: absolute; inset: 0; padding: 22px; }
.vsl-video-rails[b-5qnflrlfx3] { position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: var(--vs-hair-2); }
.vsl-video-tick[b-5qnflrlfx3] { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--vs-hair-3); }
.vsl-video-rings[b-5qnflrlfx3] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vsl-ring[b-5qnflrlfx3] { position: absolute; border: 1px solid var(--vs-hair-2); border-radius: 50%; }
.vsl-ring-3[b-5qnflrlfx3] { width: 70%; aspect-ratio: 1; }
.vsl-ring-2[b-5qnflrlfx3] { width: 54%; aspect-ratio: 1; border-color: var(--vs-hair-3); }
.vsl-ring-1[b-5qnflrlfx3] { width: 38%; aspect-ratio: 1; }
.vsl-ring-center[b-5qnflrlfx3] {
    width: 16%; aspect-ratio: 1; background: linear-gradient(160deg, #f4f5f7 0%, #b7bcc5 35%, #7f838d 65%, #eef0f3 100%);
    box-shadow: 0 6px 18px -4px rgba(15,23,42,0.28);
}
.vsl-ring-label[b-5qnflrlfx3] {
    position: absolute; font-size: 0.7rem; color: var(--vs-ink-2);
    background: rgba(255,255,255,0.7); padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--vs-hair); backdrop-filter: blur(4px);
    font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
.vsl-video-cta[b-5qnflrlfx3] {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    background: #fff; color: var(--vs-ink);
    padding: 12px 22px; border-radius: 999px;
    box-shadow: 0 10px 30px -8px rgba(15,23,42,0.4);
    border: 1px solid var(--vs-hair-2);
    transition: transform .14s ease;
}
.vsl-video-cta:hover[b-5qnflrlfx3] { transform: translate(-50%, calc(-50% - 2px)); }
.vsl-video-cta > span:first-child[b-5qnflrlfx3] { font-weight: 600; font-size: 0.95rem; }
.vsl-video-cta-sub[b-5qnflrlfx3] { font-size: 0.72rem; color: var(--vs-ink-2); letter-spacing: 0.04em; }

/* ─── MCP STRIP ─── */
.vsl-mcp[b-5qnflrlfx3] { padding-block: 56px; background: #fff; border-block: 1px solid var(--vs-hair); }
.vsl-mcp-head[b-5qnflrlfx3] { text-align: center; font-size: 1.1rem; margin-bottom: 24px; }
.vsl-mcp-grid[b-5qnflrlfx3] {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
    background: var(--vs-hair-2); border: 1px solid var(--vs-hair-2);
    border-radius: 14px; overflow: hidden;
}
.vsl-mcp-cell[b-5qnflrlfx3] {
    background: #fff; padding: 18px 12px; text-align: center;
    font-size: 0.85rem; color: var(--vs-ink-2); font-weight: 500;
    transition: background .12s, color .12s;
}
.vsl-mcp-cell:hover[b-5qnflrlfx3] { background: rgba(10,10,10,0.04); color: var(--vs-ink); }
@media (max-width: 980px) { .vsl-mcp-grid[b-5qnflrlfx3] { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 540px) { .vsl-mcp-grid[b-5qnflrlfx3] { grid-template-columns: repeat(2, 1fr); } }

/* ─── HORIZONTAL SCROLL-SNAP CARDS ─── */
.vsl-cards[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 100px); background: #fff; }
.vsl-cards-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 36px; }
.vsl-cards-row[b-5qnflrlfx3] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .vsl-cards-row[b-5qnflrlfx3] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vsl-cards-row[b-5qnflrlfx3] { grid-template-columns: 1fr; } }
.vsl-card[b-5qnflrlfx3] {
    min-height: 320px;
    background: #fafbfd; border: 1px solid var(--vs-hair-2);
    border-radius: 16px; padding: 22px;
    display: flex; flex-direction: column; gap: 16px;
    transition: transform .25s ease;
}
.vsl-card:hover[b-5qnflrlfx3] { transform: scale(1.015); }
.vsl-card-k[b-5qnflrlfx3] { font-weight: 600; font-size: 1rem; color: var(--vs-ink); }
.vsl-card-mini[b-5qnflrlfx3] {
    flex: 1; border-radius: 12px; border: 1px solid var(--vs-hair-2);
    background: #fff; padding: 16px; display: flex; flex-direction: column;
    gap: 10px; min-height: 0;
}
.vsl-mini-url[b-5qnflrlfx3] { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fafbfd; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.vsl-mini-pre[b-5qnflrlfx3] { color: var(--vs-platinum-dim); }
.vsl-mini-input[b-5qnflrlfx3] { color: var(--vs-ink); }
.vsl-mini-nodes[b-5qnflrlfx3] { flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.vsl-node[b-5qnflrlfx3] { padding: 8px 14px; border-radius: 8px; background: #fafbfd; border: 1px solid var(--vs-hair-2); font-size: 0.85rem; }
.vsl-node-link[b-5qnflrlfx3] { width: 28px; height: 1px; background: var(--vs-ink-2); }
.vsl-mini-term[b-5qnflrlfx3] { background: #0a0a0a; color: #dde3ef; padding: 14px; }
.vsl-tline[b-5qnflrlfx3] { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #dde3ef; }
.vsl-tprompt[b-5qnflrlfx3] { color: #8f84ff; margin-right: 6px; }
.vsl-tline-ok[b-5qnflrlfx3] { color: #3ecf8e; }
.vsl-tline-dim[b-5qnflrlfx3] { color: #86868a; }
.vsl-tline-bad[b-5qnflrlfx3] { color: #f87171; }
.vsl-mini-gauge[b-5qnflrlfx3] { align-items: center; justify-content: center; gap: 16px; }
.vsl-gauge-ring[b-5qnflrlfx3] {
    width: 130px; aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(#5b4dff 0deg 180deg, var(--vs-hair-3) 180deg 360deg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; box-shadow: inset 0 0 0 6px #fff;
}
.vsl-gauge-n[b-5qnflrlfx3] { font-size: 1.4rem; font-weight: 600; }
.vsl-gauge-l[b-5qnflrlfx3] { font-size: 0.7rem; color: rgba(255,255,255,0.7); }
.vsl-mini-cta[b-5qnflrlfx3] {
    background: #0a0a0a; color: #fff; border: 0; border-radius: 999px;
    padding: 8px 16px; font-size: 0.78rem; cursor: pointer;
}
.vsl-mini-dash[b-5qnflrlfx3] { gap: 6px; }
.vsl-dash-t[b-5qnflrlfx3] {
    display: block; padding: 8px 10px; background: #fafbfd; border-radius: 6px;
    border: 1px solid var(--vs-hair); font-size: 0.78rem; color: var(--vs-ink-2);
}
.vsl-mini-orbit[b-5qnflrlfx3] { position: relative; align-items: stretch; padding: 20px 14px; min-height: 200px; }
.vsl-orbit-center[b-5qnflrlfx3] {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 0.85rem; font-weight: 600; color: var(--vs-ink);
    background: linear-gradient(160deg, #f4f5f7 0%, #b7bcc5 35%, #7f838d 65%, #eef0f3 100%);
    padding: 12px 14px; border-radius: 999px; box-shadow: 0 4px 14px -2px rgba(15,23,42,0.2);
}
.vsl-orbit-pill[b-5qnflrlfx3] {
    position: absolute; font-size: 0.7rem; color: var(--vs-ink);
    background: #fafbfd; border: 1px solid var(--vs-hair-2);
    padding: 5px 9px; border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
}

/* ─── DARK "BEYOND" SECTION ─── */
.vsl-beyond[b-5qnflrlfx3] {
    background: #0a0a0a; color: #dde3ef; padding-block: clamp(60px, 8vw, 110px);
}
.vsl-beyond-head[b-5qnflrlfx3] { margin-bottom: 40px; max-width: 720px; }
.vsl-beyond-head h2[b-5qnflrlfx3] { color: #fff; }
.vsl-beyond-row[b-5qnflrlfx3] { display: flex; flex-direction: column; gap: 22px; }
.vsl-beyond-cell[b-5qnflrlfx3] {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 28px;
}
.vsl-beyond-cell-split[b-5qnflrlfx3] { grid-template-columns: 1fr 1fr; }
.vsl-beyond-text h3[b-5qnflrlfx3] { color: #fff; margin-bottom: 10px; }
.vsl-beyond-text p[b-5qnflrlfx3] { color: rgba(255,255,255,0.7); font-size: 0.95rem; }
.vsl-beyond-media[b-5qnflrlfx3] { min-height: 0; }
.vsl-chat[b-5qnflrlfx3] {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.vsl-chat-row[b-5qnflrlfx3] { font-size: 0.88rem; line-height: 1.5; }
.vsl-chat-role[b-5qnflrlfx3] { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-right: 8px; text-transform: uppercase; }
.vsl-chat-ai em[b-5qnflrlfx3] { background: linear-gradient(180deg, #d3d6dc 0%, #a6abb4 46%, #868c96 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; font-weight: 600; }
.vsl-pulse[b-5qnflrlfx3] {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
.vsl-pulse-red[b-5qnflrlfx3] { background: #f87171; box-shadow: 0 0 8px 2px rgba(248,113,113,0.6); animation: vsl-blink-b-5qnflrlfx3 1.8s ease-in-out infinite; }
.vsl-pulse-green[b-5qnflrlfx3] { background: #3ecf8e; box-shadow: 0 0 8px 2px rgba(62,207,142,0.6); animation: vsl-blink-b-5qnflrlfx3 1.8s ease-in-out infinite; }
@keyframes vsl-blink-b-5qnflrlfx3 { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.vsl-beyond-half h3[b-5qnflrlfx3] { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.vsl-beyond-half p[b-5qnflrlfx3] { color: rgba(255,255,255,0.7); font-size: 0.9rem; }

@media (max-width: 900px) {
    .vsl-beyond-cell[b-5qnflrlfx3], .vsl-beyond-cell-split[b-5qnflrlfx3] { grid-template-columns: 1fr; }
}

/* ─── FULL HEALTH STACK ─── */
.vsl-stack[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 110px); background: #fff; }
.vsl-stack-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 40px; }
.vsl-stack-grid[b-5qnflrlfx3] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 980px) { .vsl-stack-grid[b-5qnflrlfx3] { grid-template-columns: 1fr; } }

.vsl-score-card[b-5qnflrlfx3] {
    background: #0a0a0a; color: #dde3ef; border-radius: 18px; padding: 28px;
    display: flex; gap: 24px; align-items: center;
    box-shadow: 0 28px 60px -32px rgba(0,0,0,0.6);
}
.vsl-score-ring[b-5qnflrlfx3] {
    width: 110px; aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(#5b4dff 0deg 295deg, rgba(255,255,255,0.12) 295deg 360deg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: none; box-shadow: inset 0 0 0 5px #0a0a0a;
}
.vsl-score-num[b-5qnflrlfx3] { color: #fff; font-size: 2.1rem; font-weight: 700; }
.vsl-score-lbl[b-5qnflrlfx3] { color: rgba(255,255,255,0.6); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; }
.vsl-pillars[b-5qnflrlfx3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vsl-pillar[b-5qnflrlfx3] {
    display: grid; grid-template-columns: 110px 1fr 16px; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.88rem; color: #dde3ef;
}
.vsl-pillar:last-child[b-5qnflrlfx3] { border-bottom: 0; }
.vsl-pillar-k[b-5qnflrlfx3] { font-weight: 600; }
.vsl-pillar-sub[b-5qnflrlfx3] { color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.vsl-pillar-arrow[b-5qnflrlfx3] { color: rgba(255,255,255,0.5); text-align: right; }

.vsl-stack-aside[b-5qnflrlfx3] { padding: 24px; }
.vsl-stack-aside h3[b-5qnflrlfx3] { color: var(--vs-ink); margin-bottom: 18px; font-size: 1.1rem; }
.vsl-marquee[b-5qnflrlfx3] { overflow: hidden; border-block: 1px solid var(--vs-hair); padding-block: 10px; margin-bottom: 12px; }
.vsl-marquee-track[b-5qnflrlfx3] {
    display: flex; gap: 0; width: max-content;
    animation: vsl-marquee-b-5qnflrlfx3 36s linear infinite;
}
.vsl-marquee-rev[b-5qnflrlfx3] { animation-direction: reverse; }
@keyframes vsl-marquee-b-5qnflrlfx3 { to { transform: translateX(-50%); } }
.vsl-marquee-track span[b-5qnflrlfx3] {
    font-size: 0.8rem; color: var(--vs-ink-2); padding-inline: 18px;
    border-right: 1px solid var(--vs-hair); white-space: nowrap;
}

/* ─── SCATTERED TOOLS GRID ─── */
.vsl-tools[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 100px); background: #fafbfd; border-block: 1px solid var(--vs-hair); }
.vsl-tools-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 40px; }
.vsl-tools-grid[b-5qnflrlfx3] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vsl-tool[b-5qnflrlfx3] {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--vs-hair-2); border-radius: 14px;
    padding: 18px 20px; font-size: 0.95rem; color: var(--vs-ink);
    transition: background .15s, border-color .15s, transform .15s;
}
.vsl-tool:hover[b-5qnflrlfx3] { background: rgba(91,77,255,0.04); border-color: rgba(91,77,255,0.3); transform: translateY(-1px); }
.vsl-tool-ic[b-5qnflrlfx3] { font-size: 1.2rem; }
.vsl-tool-arrow[b-5qnflrlfx3] { margin-left: auto; color: var(--vs-ink-2); transition: color .15s, transform .15s; }
.vsl-tool:hover .vsl-tool-arrow[b-5qnflrlfx3] { color: var(--vs-ink); transform: translate(2px, -2px); }
@media (max-width: 900px) { .vsl-tools-grid[b-5qnflrlfx3] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vsl-tools-grid[b-5qnflrlfx3] { grid-template-columns: 1fr; } }

/* ─── USE-CASE TABS ─── */
.vsl-cases[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 110px); background: #fff; }
.vsl-cases-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 30px; }
.vsl-tabs[b-5qnflrlfx3] {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 30px; padding: 4px; background: #fafbfd; border-radius: 999px;
    border: 1px solid var(--vs-hair-2); width: fit-content; margin-inline: auto;
}
.vsl-tab[b-5qnflrlfx3] {
    background: transparent; border: 0; padding: 8px 18px; border-radius: 999px;
    font-size: 0.88rem; color: var(--vs-ink-2); cursor: pointer; transition: background .14s, color .14s;
    font-family: inherit;
}
.vsl-tab.is-active[b-5qnflrlfx3] { background: #fff; color: var(--vs-ink); box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.vsl-tab:hover[b-5qnflrlfx3] { color: var(--vs-ink); }
.vsl-cases-grid[b-5qnflrlfx3] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vsl-case[b-5qnflrlfx3] {
    background: #0a0a0a; color: #dde3ef;
    background-image:
        linear-gradient(120deg, rgba(255,255,255,0.06) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.04) 100%),
        #0a0a0a;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
    padding: 20px; min-height: 160px;
    display: flex; flex-direction: column; gap: 10px;
    transition: box-shadow .15s, transform .15s;
}
.vsl-case:hover[b-5qnflrlfx3] { box-shadow: 0 0 0 1px rgba(91,77,255,0.3), 0 8px 24px -8px rgba(91,77,255,0.3); transform: translateY(-1px); }
.vsl-case h3[b-5qnflrlfx3] { color: #fff; font-size: 1rem; }
.vsl-case p[b-5qnflrlfx3] { color: rgba(255,255,255,0.65); font-size: 0.85rem; line-height: 1.5; }
.vsl-case-hidden[b-5qnflrlfx3] { display: none; }
@media (max-width: 980px) { .vsl-cases-grid[b-5qnflrlfx3] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vsl-cases-grid[b-5qnflrlfx3] { grid-template-columns: 1fr; } }

/* ─── TESTIMONIALS CAROUSEL ─── */
.vsl-quotes[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 110px); background: #fafbfd; border-block: 1px solid var(--vs-hair); }
.vsl-quotes-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 40px; }
.vsl-quotes-carousel[b-5qnflrlfx3] { position: relative; max-width: 720px; margin: 0 auto; min-height: 220px; }
.vsl-quote[b-5qnflrlfx3] {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #6b7682 0%, #2a2e34 50%, #0f1216 100%);
    color: #fff; border-radius: 18px; padding: 30px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    opacity: 0; transform: scale(0.96); transition: opacity .35s ease, transform .35s ease;
}
.vsl-quote.is-active[b-5qnflrlfx3] { opacity: 1; transform: scale(1); }
.vsl-quote-body[b-5qnflrlfx3] { font-size: 1.05rem; line-height: 1.5; }
.vsl-quote-foot[b-5qnflrlfx3] { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.vsl-quote-foot b[b-5qnflrlfx3] { font-weight: 600; }
.vsl-quote-foot span[b-5qnflrlfx3] { color: rgba(255,255,255,0.6); }
.vsl-quotes-dots[b-5qnflrlfx3] { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.vsl-qdot[b-5qnflrlfx3] { width: 8px; height: 8px; border-radius: 50%; background: var(--vs-hair-3); border: 0; padding: 0; cursor: pointer; }
.vsl-qdot.is-active[b-5qnflrlfx3] { background: var(--vs-ink); }

/* ─── DEV BENTO ─── */
.vsl-bento[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 110px); background: #0a0a0a; color: #dde3ef; }
.vsl-bento-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 40px; }
.vsl-bento-head h2[b-5qnflrlfx3] { color: #fff; }
.vsl-bento-grid[b-5qnflrlfx3] {
    display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 14px;
}
.vsl-bento-cell[b-5qnflrlfx3] {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 20px;
    grid-column: span 2;
    display: flex; flex-direction: column; gap: 10px;
}
.vsl-bento-mcp[b-5qnflrlfx3] { grid-column: span 4; grid-row: span 2; background: #000; }
.vsl-bento-mcp .vsl-eyebrow[b-5qnflrlfx3], .vsl-bento-cell .vsl-eyebrow[b-5qnflrlfx3] { color: rgba(255,255,255,0.6); }
.vsl-bento-badges[b-5qnflrlfx3] { display: flex; flex-wrap: wrap; gap: 6px; }
.vsl-bbadge[b-5qnflrlfx3] {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 0.72rem; font-family: 'JetBrains Mono', monospace;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #dde3ef;
}
.vsl-bbadge-warn[b-5qnflrlfx3] { background: rgba(255,184,77,0.12); border-color: rgba(255,184,77,0.3); color: #ffb84d; }
.vsl-bbadge-ok[b-5qnflrlfx3] { background: rgba(125,211,252,0.10); border-color: rgba(125,211,252,0.3); color: #7dd3fc; }
.vsl-feed[b-5qnflrlfx3] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; }
.vsl-feed li[b-5qnflrlfx3] { display: flex; align-items: center; gap: 8px; }
.vsl-feed-dot[b-5qnflrlfx3] { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.vsl-feed-ok[b-5qnflrlfx3] { background: #3ecf8e; }
.vsl-feed-warn[b-5qnflrlfx3] { background: #ffb84d; }
.vsl-feed-bad[b-5qnflrlfx3] { background: #f87171; }
.vsl-export[b-5qnflrlfx3] {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 10px 12px; font-size: 0.85rem;
}
.vsl-export-meta[b-5qnflrlfx3] { color: rgba(255,255,255,0.5); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; }
.vsl-domain[b-5qnflrlfx3] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.vsl-domain li[b-5qnflrlfx3] { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.vsl-domain li:last-child[b-5qnflrlfx3] { border-bottom: 0; }
.vsl-bento-spark[b-5qnflrlfx3] { width: 100%; height: 70px; color: #5b4dff; }
@media (max-width: 900px) {
    .vsl-bento-grid[b-5qnflrlfx3] { grid-template-columns: repeat(2, 1fr); }
    .vsl-bento-cell[b-5qnflrlfx3], .vsl-bento-mcp[b-5qnflrlfx3] { grid-column: span 2; grid-row: auto; }
}

/* ─── FAQ ─── */
.vsl-faq[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 100px); background: #fff; }
.vsl-faq-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 30px; }
.vsl-faq-list[b-5qnflrlfx3] { max-width: 720px; margin: 0 auto; }
.vsl-faq details[b-5qnflrlfx3] {
    border-bottom: 1px solid var(--vs-hair);
}
.vsl-faq summary[b-5qnflrlfx3] {
    list-style: none; cursor: pointer;
    padding: 18px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 1.02rem; font-weight: 500; color: var(--vs-ink);
}
.vsl-faq summary[b-5qnflrlfx3]::-webkit-details-marker { display: none; }
.vsl-faq-pm[b-5qnflrlfx3] { font-size: 1.2rem; color: var(--vs-ink-2); transition: transform .2s; }
.vsl-faq details[open] .vsl-faq-pm[b-5qnflrlfx3] { transform: rotate(45deg); }
.vsl-faq-a[b-5qnflrlfx3] { padding-bottom: 16px; color: var(--vs-ink-2); font-size: 0.95rem; line-height: 1.6; max-width: 640px; }

/* ─── PRICING ─── */
.vsl-pricing[b-5qnflrlfx3] { padding-block: clamp(60px, 8vw, 110px); background: #fafbfd; border-block: 1px solid var(--vs-hair); }
.vsl-pricing-head[b-5qnflrlfx3] { text-align: center; margin-bottom: 40px; }
.vsl-pricing-head p[b-5qnflrlfx3] { color: var(--vs-ink-2); max-width: 560px; margin: 12px auto 0; }
.vsl-plans[b-5qnflrlfx3] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .vsl-plans[b-5qnflrlfx3] { grid-template-columns: 1fr; } }
.vsl-plan[b-5qnflrlfx3] {
    background: #fff; border: 1px solid var(--vs-hair-2); border-radius: 16px;
    padding: 30px 26px; display: flex; flex-direction: column;
}
.vsl-plan-hot[b-5qnflrlfx3] {
    background: linear-gradient(180deg, rgba(91,77,255,0.06), transparent 60%), #fff;
    border-color: rgba(91,77,255,0.3);
    box-shadow: 0 12px 32px -16px rgba(91,77,255,0.4);
}
.vsl-badge[b-5qnflrlfx3] {
    display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: #5b4dff; margin-bottom: 14px; font-weight: 600;
}
.vsl-plan h3[b-5qnflrlfx3] { font-size: 1.2rem; margin-bottom: 6px; }
.vsl-blurb[b-5qnflrlfx3] { font-size: 0.85rem; color: var(--vs-ink-2); margin-bottom: 22px; min-height: 38px; }
.vsl-price[b-5qnflrlfx3] { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; color: var(--vs-ink); margin-bottom: 4px; }
.vsl-price span[b-5qnflrlfx3] { font-size: 0.85rem; font-weight: 400; color: var(--vs-ink-2); margin-left: 4px; }
.vsl-per[b-5qnflrlfx3] { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-bottom: 22px; }
.vsl-plan ul[b-5qnflrlfx3] { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vsl-plan li[b-5qnflrlfx3] { font-size: 0.88rem; color: var(--vs-ink-2); display: flex; gap: 8px; align-items: flex-start; }
.vsl-plan li[b-5qnflrlfx3]::before { content: '—'; color: var(--vs-platinum-dim); flex: none; }
.vsl-plan li b[b-5qnflrlfx3] { color: var(--vs-ink); font-weight: 600; }
.vsl-plan .vsl-btn[b-5qnflrlfx3] { width: 100%; justify-content: center; }

/* ─── FINAL CTA ─── */
.vsl-final[b-5qnflrlfx3] {
    padding-block: clamp(70px, 10vw, 130px);
    background: #0a0a0a; color: #fff; position: relative; overflow: hidden;
}
.vsl-final-inner[b-5qnflrlfx3] { text-align: center; position: relative; z-index: 1; }
.vsl-final-dots[b-5qnflrlfx3] {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 75%);
}
.vsl-final h2[b-5qnflrlfx3] { color: #fff; margin-bottom: 16px; }
.vsl-final p[b-5qnflrlfx3] { color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto 28px; }
.vsl-final-btns[b-5qnflrlfx3] { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vsl-page .vsl-final .vsl-btn-ghost[b-5qnflrlfx3] { color: #fff; border-color: rgba(255,255,255,.35); }
.vsl-page .vsl-final .vsl-btn-ghost:hover[b-5qnflrlfx3] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.6); }
.vsl-final-arrow[b-5qnflrlfx3] { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #0a0a0a; line-height: 22px; text-align: center; font-size: 0.85rem; }

/* ─── FOOTER ─── */
.vsl-foot[b-5qnflrlfx3] { background: #0a0a0a; color: rgba(255,255,255,0.7); padding-block: 48px 24px; }
.vsl-foot-grid[b-5qnflrlfx3] { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
.vsl-mark-foot .vsl-mark-word[b-5qnflrlfx3] { color: #fff; }
.vsl-foot-tag[b-5qnflrlfx3] { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-top: 12px; max-width: 280px; }
.vsl-foot h4[b-5qnflrlfx3] { color: rgba(255,255,255,0.5); }
.vsl-foot ul[b-5qnflrlfx3] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vsl-foot li a[b-5qnflrlfx3] { color: rgba(255,255,255,0.7); font-size: 0.88rem; transition: color .14s; }
.vsl-foot li a:hover[b-5qnflrlfx3] { color: #fff; }
.vsl-foot-base[b-5qnflrlfx3] {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.78rem; color: rgba(255,255,255,0.5);
}
.vsl-foot-base a[b-5qnflrlfx3] { color: inherit; }
.vsl-foot-base a:hover[b-5qnflrlfx3] { color: #fff; }
@media (max-width: 900px) { .vsl-foot-grid[b-5qnflrlfx3] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .vsl-foot-grid[b-5qnflrlfx3] { grid-template-columns: 1fr; gap: 28px; } }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCEMENT LAYER - contrast repair + depth/motion effects.
   Pointer-driven vars (--mx/--my/--rx/--ry/--p) are set by
   Index.light.razor.js; every effect degrades to a static look
   without them.
   ═══════════════════════════════════════════════════════════════════ */
@property --vsl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --vsl-fill { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.vsl-page[b-5qnflrlfx3] { overflow-x: clip; --mx: 50%; --my: 30%; }

/* silver-on-silver fix: emphasis words become a deep indigo > violet > cyan
   sweep with real contrast on the pale hero; muted copy gets darker. */
.vsl-gradient[b-5qnflrlfx3] {
    background: linear-gradient(100deg, #2a1fb0 0%, #5b4dff 30%, #0b7bc2 58%, #2a1fb0 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: vsl-sweep-b-5qnflrlfx3 7s ease-in-out infinite alternate;
}
@keyframes vsl-sweep-b-5qnflrlfx3 { to { background-position: 100% 0; } }
.vsl-page .vsl-btn-black[b-5qnflrlfx3], .vsl-page .vsl-btn-black:hover[b-5qnflrlfx3] { color: #fff; }
.vsl-page .vsl-btn-ghost[b-5qnflrlfx3] { color: var(--vs-ink); }
.vsl-sub[b-5qnflrlfx3], .vsl-proof[b-5qnflrlfx3], .vsl-scanmeta[b-5qnflrlfx3], .vsl-eyebrow[b-5qnflrlfx3], .vsl-blurb[b-5qnflrlfx3] { color: #3d4352; }
.vsl-page .vsl-eyebrow-on-dark[b-5qnflrlfx3], .vsl-page .vsl-bento-mcp .vsl-eyebrow[b-5qnflrlfx3] { color: rgba(255,255,255,.82); }
.vsl-mcp-cell[b-5qnflrlfx3], .vsl-nav-links a[b-5qnflrlfx3], .vsl-faq-a[b-5qnflrlfx3], .vsl-plan li[b-5qnflrlfx3] { color: #3d4352; }

/* stack grid: the max-content marquee tracks were inflating the column and
   squeezing the score card; section eyebrows double as headings here. */
.vsl-stack-grid[b-5qnflrlfx3] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vsl-stack-grid > *[b-5qnflrlfx3], .vsl-stack-aside[b-5qnflrlfx3] { min-width: 0; }
@media (max-width: 980px) { .vsl-stack-grid[b-5qnflrlfx3] { grid-template-columns: minmax(0, 1fr); } }
.vsl-stack-head .vsl-eyebrow[b-5qnflrlfx3], .vsl-cards-head .vsl-eyebrow[b-5qnflrlfx3], .vsl-tools-head .vsl-eyebrow[b-5qnflrlfx3] {
    font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--vs-ink);
}
.vsl-marquee-track span[b-5qnflrlfx3] { color: #2e3340; font-weight: 500; }
.vsl-stack-aside[b-5qnflrlfx3] { align-self: center; }

/* scroll progress hairline on the nav */
.vsl-nav[b-5qnflrlfx3]::after {
    content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: linear-gradient(90deg, #5b4dff, #0b7bc2, #e57708);
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* HERO: drifting aurora mesh + cursor spotlight */
.vsl-hero[b-5qnflrlfx3]::after {
    content: ''; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
    background:
        radial-gradient(38% 42% at 22% 30%, rgba(91,77,255,.30), transparent 70%),
        radial-gradient(34% 38% at 78% 24%, rgba(11,123,194,.26), transparent 70%),
        radial-gradient(30% 36% at 60% 82%, rgba(229,119,8,.20), transparent 70%),
        radial-gradient(26% 30% at 10% 86%, rgba(168,85,247,.20), transparent 70%);
    filter: blur(28px) saturate(1.2);
    animation: vsl-aurora-b-5qnflrlfx3 22s ease-in-out infinite alternate;
}
@keyframes vsl-aurora-b-5qnflrlfx3 {
    0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.08); }
    100% { transform: translate3d(-2%, 5%, 0) rotate(-5deg) scale(1.04); }
}
.vsl-hero-grid[b-5qnflrlfx3]::before {
    content: ''; position: absolute; inset: -60px; pointer-events: none; z-index: -1;
    background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.85), transparent 65%);
    mix-blend-mode: soft-light;
}

/* SCAN BAR: animated conic border + focus bloom */
@keyframes vsl-spin-b-5qnflrlfx3 { to { --vsl-ang: 360deg; } }
@keyframes vsl-pop-b-5qnflrlfx3 { from { transform: scale(.4); opacity: 0; } }

/* HERO MEDIA: tilting glass card, radar sweep, pulsing rings */
.vsl-hero-media[b-5qnflrlfx3] { perspective: 1100px; }
.vsl-video-card[b-5qnflrlfx3] {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out;
    background:
        linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,244,251,.78)),
        radial-gradient(circle at 20% 0%, rgba(91,77,255,.18), transparent 60%);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 90px -30px rgba(42,31,176,.45), 0 12px 30px -12px rgba(15,23,42,.3);
}
.vsl-video-card[b-5qnflrlfx3]::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%);
    transform: translateX(-100%); animation: vsl-glint-b-5qnflrlfx3 5.5s ease-in-out infinite;
}
@keyframes vsl-glint-b-5qnflrlfx3 { 55%, 100% { transform: translateX(100%); } }
.vsl-video-rings[b-5qnflrlfx3]::after {
    content: ''; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(from var(--vsl-ang), rgba(91,77,255,.40), rgba(91,77,255,0) 28%, transparent 100%);
    animation: vsl-spin-b-5qnflrlfx3 4.5s linear infinite;
    mask-image: radial-gradient(circle, transparent 0 8%, #000 9%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 8%, #000 9%);
}
.vsl-ring-1[b-5qnflrlfx3], .vsl-ring-2[b-5qnflrlfx3], .vsl-ring-3[b-5qnflrlfx3] { animation: vsl-ringpulse-b-5qnflrlfx3 3.6s ease-in-out infinite; }
.vsl-ring-2[b-5qnflrlfx3] { animation-delay: .5s; } .vsl-ring-3[b-5qnflrlfx3] { animation-delay: 1s; }
@keyframes vsl-ringpulse-b-5qnflrlfx3 { 50% { border-color: rgba(91,77,255,.55); box-shadow: 0 0 22px rgba(91,77,255,.18); } }
.vsl-ring-center[b-5qnflrlfx3] { box-shadow: 0 0 0 6px rgba(91,77,255,.12), 0 0 34px rgba(91,77,255,.45), 0 6px 18px -4px rgba(15,23,42,.35); }
.vsl-ring-label[b-5qnflrlfx3] {
    color: #1a1c21; font-weight: 600; background: rgba(255,255,255,.88);
    animation: vsl-float-b-5qnflrlfx3 4.2s ease-in-out infinite;
}
.vsl-ring-label:nth-of-type(2n)[b-5qnflrlfx3] { animation-delay: -1.4s; } .vsl-ring-label:nth-of-type(3n)[b-5qnflrlfx3] { animation-delay: -2.6s; }
@keyframes vsl-float-b-5qnflrlfx3 { 50% { transform: translateY(-5px); } }
.vsl-video-cta[b-5qnflrlfx3] { background: linear-gradient(180deg, #fff, #f1f4fa); }

/* GLASS CARDS with a cursor-tracked specular edge */
.vsl-card[b-5qnflrlfx3], .vsl-tool[b-5qnflrlfx3], .vsl-plan[b-5qnflrlfx3], .vsl-case[b-5qnflrlfx3], .vsl-beyond-cell[b-5qnflrlfx3], .vsl-bento-cell[b-5qnflrlfx3], .vsl-mcp-cell[b-5qnflrlfx3] { position: relative; }
.vsl-card[b-5qnflrlfx3]::before, .vsl-tool[b-5qnflrlfx3]::before, .vsl-plan[b-5qnflrlfx3]::before, .vsl-bento-cell[b-5qnflrlfx3]::before, .vsl-beyond-cell[b-5qnflrlfx3]::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
    background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 0%), rgba(91,77,255,.65), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .25s;
}
.vsl-card:hover[b-5qnflrlfx3]::before, .vsl-tool:hover[b-5qnflrlfx3]::before, .vsl-plan:hover[b-5qnflrlfx3]::before,
.vsl-bento-cell:hover[b-5qnflrlfx3]::before, .vsl-beyond-cell:hover[b-5qnflrlfx3]::before { opacity: 1; }
.vsl-card[b-5qnflrlfx3] { background: linear-gradient(170deg, #fff, #f3f6fb); box-shadow: 0 18px 40px -26px rgba(15,23,42,.35); }
.vsl-card:hover[b-5qnflrlfx3] { transform: translateY(-6px) scale(1.012); box-shadow: 0 30px 60px -28px rgba(42,31,176,.4); }
.vsl-tool:hover[b-5qnflrlfx3] { box-shadow: 0 16px 34px -18px rgba(91,77,255,.45); }
.vsl-tool-ic[b-5qnflrlfx3] { filter: drop-shadow(0 3px 5px rgba(91,77,255,.35)); }
.vsl-mcp-cell:hover[b-5qnflrlfx3] { background: linear-gradient(180deg, #fff, rgba(91,77,255,.08)); color: #2a1fb0; }
.vsl-mcp[b-5qnflrlfx3] { background: linear-gradient(180deg, #fff, #f3f6fb); }

/* gauges + score ring sweep in on load */
.vsl-gauge-ring[b-5qnflrlfx3] { background: conic-gradient(#5b4dff 0deg var(--vsl-fill), var(--vs-hair-3) var(--vsl-fill) 360deg); animation: vsl-fill-b-5qnflrlfx3 1.6s .3s ease-out forwards; --vsl-target: 180deg; filter: drop-shadow(0 8px 14px rgba(91,77,255,.35)); }
.vsl-score-ring[b-5qnflrlfx3] { background: conic-gradient(#5b4dff 0deg var(--vsl-fill), rgba(255,255,255,.12) var(--vsl-fill) 360deg); animation: vsl-fill-b-5qnflrlfx3 1.8s .3s ease-out forwards; --vsl-target: 295deg; filter: drop-shadow(0 0 18px rgba(91,77,255,.55)); }
@keyframes vsl-fill-b-5qnflrlfx3 { to { --vsl-fill: var(--vsl-target); } }
.vsl-gauge-ring[b-5qnflrlfx3] { color: var(--vs-ink); }
.vsl-gauge-l[b-5qnflrlfx3] { color: var(--vs-ink-2); }

/* DARK SECTIONS: graticule + glow so they read as layered, not flat black */
.vsl-beyond[b-5qnflrlfx3], .vsl-bento[b-5qnflrlfx3], .vsl-final[b-5qnflrlfx3], .vsl-foot[b-5qnflrlfx3] { position: relative; isolation: isolate; }
.vsl-beyond[b-5qnflrlfx3]::before, .vsl-bento[b-5qnflrlfx3]::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(700px 360px at 12% 0%, rgba(91,77,255,.28), transparent 70%),
        radial-gradient(600px 320px at 92% 100%, rgba(11,123,194,.20), transparent 70%),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px;
    mask-image: linear-gradient(#000 60%, transparent);
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
}
.vsl-final[b-5qnflrlfx3]::before {
    content: ''; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
    background: conic-gradient(from var(--vsl-ang), #5b4dff33, #0b7bc233, #e5770833, #a855f733, #5b4dff33);
    filter: blur(60px); animation: vsl-spin-b-5qnflrlfx3 16s linear infinite;
}
.vsl-beyond-cell[b-5qnflrlfx3], .vsl-bento-cell[b-5qnflrlfx3] { backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.vsl-case[b-5qnflrlfx3] { transition: box-shadow .2s, transform .2s; }
.vsl-case:hover[b-5qnflrlfx3] { transform: translateY(-4px); }
.vsl-chat-ai em[b-5qnflrlfx3] { background: linear-gradient(100deg, #c7d2fe, #7dd3fc, #fde68a); -webkit-background-clip: text; background-clip: text; }

/* PLANS: hot plan gets a rotating gradient border + glow */
.vsl-plan[b-5qnflrlfx3] { transition: transform .25s, box-shadow .25s; }
.vsl-plan:hover[b-5qnflrlfx3] { transform: translateY(-5px); box-shadow: 0 26px 50px -26px rgba(15,23,42,.4); }
.vsl-plan-hot[b-5qnflrlfx3] {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(91,77,255,.07), transparent 60%) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--vsl-ang), #5b4dff, #0b7bc2, #e57708, #a855f7, #5b4dff) border-box;
    animation: vsl-spin-b-5qnflrlfx3 7s linear infinite;
}
.vsl-badge[b-5qnflrlfx3] { background: linear-gradient(90deg, #5b4dff, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vsl-price[b-5qnflrlfx3] { background: linear-gradient(180deg, #14161a, #4a5060); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vsl-per[b-5qnflrlfx3] { color: #4a5060; }

/* marquees fade at the edges; quote cards glint */
.vsl-marquee[b-5qnflrlfx3] { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vsl-quote[b-5qnflrlfx3] { box-shadow: 0 30px 60px -30px rgba(15,23,42,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.vsl-quote[b-5qnflrlfx3]::before { content: '\201C'; position: absolute; top: 6px; left: 20px; font-size: 5rem; line-height: 1; color: rgba(255,255,255,.12); }

/* scroll-reveal (JS adds .vsl-js to the page only when it can finish the job) */
.vsl-js .vsl-reveal[b-5qnflrlfx3] { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.vsl-js .vsl-reveal.is-in[b-5qnflrlfx3] { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .vsl-hero[b-5qnflrlfx3]::after { filter: blur(18px); }
    .vsl-video-card[b-5qnflrlfx3] { transform: none; }
}

/* ─── SILVER LAYER II: metallic detailing (all CSS, no new JS hooks) ───
   Deepens the "engraved metal" read of the light page: gradient hairline
   glints on the light band edges, a top sheen on cards, engraved corner
   ticks on the hero media, and a fine diagonal brush texture on the two
   soft-grey bands. */
.vsl-mcp[b-5qnflrlfx3], .vsl-tools[b-5qnflrlfx3], .vsl-quotes[b-5qnflrlfx3], .vsl-pricing[b-5qnflrlfx3] { position: relative; }
.vsl-mcp[b-5qnflrlfx3]::before, .vsl-tools[b-5qnflrlfx3]::before, .vsl-quotes[b-5qnflrlfx3]::before, .vsl-pricing[b-5qnflrlfx3]::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, transparent 4%, rgba(26,28,33,.16) 22%, rgba(91,77,255,.50) 50%, rgba(26,28,33,.16) 78%, transparent 96%);
}

/* fine brushed-metal grain over the soft-grey bands (image layer only —
   the flat #fafbfd from the shorthand above stays as the paint) */
.vsl-tools[b-5qnflrlfx3], .vsl-quotes[b-5qnflrlfx3] {
    background-image: repeating-linear-gradient(115deg, rgba(26,28,33,.022) 0 1px, transparent 1px 22px);
}

/* engraved top sheen on every raised card */
.vsl-card[b-5qnflrlfx3]::after, .vsl-tool[b-5qnflrlfx3]::after, .vsl-plan[b-5qnflrlfx3]::after {
    content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(26,28,33,.20) 30%, rgba(91,77,255,.45) 50%, rgba(26,28,33,.20) 70%, transparent);
}

/* non-hot plans get a quiet metal edge so the hot plan's conic border
   reads as the loudest voice in a metallic chorus, not the only one */
.vsl-plan[b-5qnflrlfx3] { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,42,.05); }

/* engraved corner ticks on the hero media card (like machined register marks) */
.vsl-video-card[b-5qnflrlfx3]::after {
    content: ''; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
    --vsl-tick: rgba(26,28,33,.35);
    background:
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 0 0      / 16px 1px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 0 0      / 1px 16px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 100% 0   / 16px 1px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 100% 0   / 1px 16px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 0 100%   / 16px 1px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 0 100%   / 1px 16px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 100% 100% / 16px 1px,
        linear-gradient(var(--vsl-tick), var(--vsl-tick)) 100% 100% / 1px 16px;
    background-repeat: no-repeat;
}

@media (max-width: 900px) {
    .vsl-card[b-5qnflrlfx3]::after, .vsl-tool[b-5qnflrlfx3]::after, .vsl-plan[b-5qnflrlfx3]::after { left: 5%; right: 5%; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    .vsl-page *[b-5qnflrlfx3], .vsl-page *[b-5qnflrlfx3]::before, .vsl-page *[b-5qnflrlfx3]::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Shared waitlist card: use the light page type instead of the dark mono display face. */
.vsl-hero[b-5qnflrlfx3]  .wl-title { font-family: inherit; font-weight: 600; letter-spacing: -.02em; }
.vsl-page[b-5qnflrlfx3]  .af h2 { font-family: inherit; font-weight: 700; letter-spacing: -.035em; }
.vsl-btn-inert[b-5qnflrlfx3] { cursor: default; user-select: none; }
@media (max-width: 700px) { .vsl-nav-in[b-5qnflrlfx3] { gap: 10px; } }
@media (max-width: 440px) { .vsl-nav-in[b-5qnflrlfx3] { gap: 8px; } .vsl-nav-burger[b-5qnflrlfx3] { width: 36px; height: 36px; } }

.vsl-ladder[b-5qnflrlfx3] { margin-top: 32px; text-align: center; }
.vsl-ladder-head[b-5qnflrlfx3] { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-bottom: 14px; font-weight: 600; }
.vsl-ladder-row[b-5qnflrlfx3] { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vsl-ladder-chip[b-5qnflrlfx3] { background: #fff; border: 1px solid var(--vs-hair-2); border-radius: 999px; padding: 9px 18px; font-size: 0.9rem; color: var(--vs-ink); text-decoration: none; }
.vsl-ladder-chip:hover[b-5qnflrlfx3] { border-color: rgba(91,77,255,0.5); }
.vsl-ladder-chip b[b-5qnflrlfx3] { font-weight: 600; margin-right: 6px; }
.vsl-ladder-chip span[b-5qnflrlfx3] { font-size: 0.78rem; color: var(--vs-ink-2); margin-left: 3px; }
.vsl-ladder-note[b-5qnflrlfx3] { margin: 14px 0 18px; font-size: 0.88rem; color: var(--vs-ink-2); }
.vsl-ladder-new[b-5qnflrlfx3] { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 0.88rem; color: var(--vs-ink-2); }
.vsl-ladder-new li[b-5qnflrlfx3]::before { content: 'C6'; color: #5b4dff; margin-right: 8px; font-size: 0.6rem; }
/* /Components/Pages/Index.razor.rz.scp.css */
/* Index.razor.css — scoped styles for the marketing index page, ported from
   docs/vibescan-mockup-v3.html per docs/AGENT-BRIEF-vibescan-index.md.

   All classes are prefixed vs- (the mockup's were unprefixed: .hero, .nav, .btn, etc.) because
   Blazor's own CSS isolation only scopes elements *rendered by this component* — it does not
   rename class selectors, so an unprefixed .btn/.card/.hero here would still collide with
   VibeScan.Ui/components.css's identically-named classes used by every other page. The vs-
   prefix is the isolation the design actually needs; scoped-CSS attribute isolation alone is
   not enough here because this page's classes are otherwise indistinguishable from the rest of
   the site's design system. */

*[b-13ojc6rlyn], *[b-13ojc6rlyn]::before, *[b-13ojc6rlyn]::after { box-sizing: border-box; }

/* ── BACKDROP LAYERS ── */
.vs-bg[b-13ojc6rlyn] { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.vs-bg-glitter[b-13ojc6rlyn] {
    position: absolute; inset: 0;
    background-color: var(--vs-void);
    background-image:
        radial-gradient(1.6px 1.6px at 6% 14%, rgba(255,255,255,.62), transparent 62%),
        radial-gradient(1px 1px at 19% 61%, rgba(255,255,255,.44), transparent 62%),
        radial-gradient(2.2px 2.2px at 33% 27%, rgba(255,255,255,.34), transparent 62%),
        radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,.52), transparent 62%),
        radial-gradient(1.4px 1.4px at 57% 8%, rgba(255,255,255,.30), transparent 62%),
        radial-gradient(1px 1px at 68% 49%, rgba(255,255,255,.48), transparent 62%),
        radial-gradient(2px 2px at 81% 22%, rgba(255,255,255,.32), transparent 62%),
        radial-gradient(1px 1px at 93% 73%, rgba(255,255,255,.44), transparent 62%),
        radial-gradient(1.5px 1.5px at 12% 42%, rgba(255,255,255,.36), transparent 62%),
        radial-gradient(1px 1px at 51% 55%, rgba(255,255,255,.30), transparent 62%),
        radial-gradient(1.8px 1.8px at 74% 90%, rgba(255,255,255,.28), transparent 62%),
        radial-gradient(1px 1px at 27% 5%, rgba(255,255,255,.40), transparent 62%),
        radial-gradient(900px 620px at 18% -8%, rgba(91,77,255,.16), transparent 70%),
        radial-gradient(720px 520px at 102% 4%, rgba(125,211,252,.07), transparent 70%),
        radial-gradient(600px 400px at 50% 108%, rgba(255,138,31,.05), transparent 70%);
    background-size:
        360px 360px, 290px 290px, 420px 420px, 270px 270px, 330px 330px,
        310px 310px, 390px 390px, 300px 300px, 255px 255px, 345px 345px,
        375px 375px, 265px 265px,
        100% 100%, 100% 100%, 100% 100%;
}
.vs-bg-shimmer[b-13ojc6rlyn] {
    position: absolute; inset: -30%;
    background: linear-gradient(112deg,
        transparent 38%, rgba(255,255,255,.035) 46%, rgba(221,227,239,.09) 50%,
        rgba(255,255,255,.035) 54%, transparent 62%);
    background-size: 240% 240%;
    animation: vs-sweep-b-13ojc6rlyn 11s ease-in-out infinite;
}
@keyframes vs-sweep-b-13ojc6rlyn {
    0% { background-position: -30% -30%; }
    50% { background-position: 70% 70%; }
    100% { background-position: -30% -30%; }
}
.vs-bg-graticule[b-13ojc6rlyn] {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(221,227,239,.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(221,227,239,.035) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
}
.vs-bg-grain[b-13ojc6rlyn] {
    position: absolute; inset: 0; opacity: .30; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
    .vs-bg-glitter[b-13ojc6rlyn] { background-image:
        radial-gradient(900px 620px at 18% -8%, rgba(91,77,255,.16), transparent 70%),
        radial-gradient(600px 400px at 50% 108%, rgba(255,138,31,.05), transparent 70%); }
    .vs-bg-shimmer[b-13ojc6rlyn], .vs-bg-graticule[b-13ojc6rlyn] { display: none; }
}

.vs-shell[b-13ojc6rlyn] { position: relative; z-index: 1; font-family: var(--vs-body); color: var(--vs-ink); line-height: 1.55; }
.vs-wrap[b-13ojc6rlyn] { max-width: var(--vs-maxw); margin: 0 auto; padding-inline: var(--vs-gutter); }
.vs-shell a[b-13ojc6rlyn] { color: inherit; text-decoration: none; }

/* ── SHARED TYPE ── */
.vs-mono[b-13ojc6rlyn] { font-family: var(--vs-mono); font-weight: 400; letter-spacing: -.02em; }
.vs-eyebrow[b-13ojc6rlyn] {
    font-family: var(--vs-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase; color: var(--vs-platinum-dim);
}
.vs-chrome[b-13ojc6rlyn] {
    background: linear-gradient(176deg, #FFFFFF 0%, var(--vs-platinum) 32%, #8B93A6 62%, #E8EDF7 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vs-shell h1[b-13ojc6rlyn], .vs-shell h2[b-13ojc6rlyn], .vs-shell h3[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.vs-stamp[b-13ojc6rlyn] {
    display: flex; align-items: baseline; gap: 18px;
    border-bottom: 1px solid var(--vs-hair-2);
    padding-bottom: 14px; margin-bottom: 0;
}
.vs-stamp .vs-idx[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10.5px; color: var(--vs-indigo); letter-spacing: .1em; }
.vs-stamp .vs-name[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--vs-platinum-dim); }
.vs-stamp .vs-rule[b-13ojc6rlyn] { flex: 1; height: 1px; background: var(--vs-hair); }
.vs-stamp .vs-meta[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10.5px; color: var(--vs-platinum-ghost); }

.vs-sec[b-13ojc6rlyn] { padding-block: clamp(64px, 9vw, 120px); }
.vs-sec-head[b-13ojc6rlyn] { max-width: 720px; margin: 40px 0 44px; }
.vs-sec-head h2[b-13ojc6rlyn] { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 16px; }
.vs-sec-head p[b-13ojc6rlyn] { color: var(--vs-ink-2); font-size: 16.5px; max-width: 560px; }

/* ── PANEL / BRACKET SYSTEM ── */
.vs-console[b-13ojc6rlyn], .vs-closer[b-13ojc6rlyn] { position: relative; }
.vs-bracket[b-13ojc6rlyn] { position: absolute; width: 9px; height: 9px; border: 1px solid var(--vs-platinum-2); opacity: .5; }
.vs-bracket.vs-tl[b-13ojc6rlyn] { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.vs-bracket.vs-tr[b-13ojc6rlyn] { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.vs-bracket.vs-bl[b-13ojc6rlyn] { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.vs-bracket.vs-br[b-13ojc6rlyn] { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ── BUTTONS ── */
.vs-btn[b-13ojc6rlyn] {
    display: inline-flex; align-items: center; gap: 9px; justify-content: center;
    font-family: var(--vs-body); font-weight: 700; font-size: 14px;
    padding: 13px 22px; border: 1px solid transparent; border-radius: var(--vs-radius);
    cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.vs-btn-amber[b-13ojc6rlyn], a.vs-btn-amber[b-13ojc6rlyn] { background: var(--vs-amber); color: #1B0A00; box-shadow: 0 0 0 1px rgba(255,138,31,.4), 0 10px 34px -8px rgba(255,138,31,.55); }
.vs-btn-amber:hover[b-13ojc6rlyn], a.vs-btn-amber:hover[b-13ojc6rlyn] { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,138,31,.6), 0 14px 42px -8px rgba(255,138,31,.7); }
.vs-btn-ghost[b-13ojc6rlyn] { background: transparent; color: var(--vs-ink); border-color: var(--vs-hair-3); }
.vs-btn-ghost:hover[b-13ojc6rlyn] { background: rgba(221,227,239,.05); border-color: var(--vs-platinum-2); }
.vs-btn[disabled][b-13ojc6rlyn] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ── SEVERITY TAGS ── */
.vs-tag[b-13ojc6rlyn] {
    display: inline-block; font-family: var(--vs-mono); font-size: 9px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px;
    white-space: nowrap;
}
.vs-tag.vs-crit[b-13ojc6rlyn] { background: var(--vs-critical-soft); color: var(--vs-critical); border: 1px solid rgba(255,51,88,.32); }
.vs-tag.vs-warn[b-13ojc6rlyn] { background: var(--vs-warn-soft); color: var(--vs-warn); border: 1px solid rgba(255,184,77,.32); }
.vs-tag.vs-pass[b-13ojc6rlyn] { background: var(--vs-ice-soft); color: var(--vs-ice); border: 1px solid rgba(125,211,252,.32); }
.vs-tag.vs-info[b-13ojc6rlyn] { background: var(--vs-indigo-soft); color: #9A90FF; border: 1px solid rgba(91,77,255,.32); }

@media (prefers-reduced-motion: reduce) {
    .vs-shell *[b-13ojc6rlyn], .vs-shell *[b-13ojc6rlyn]::before, .vs-shell *[b-13ojc6rlyn]::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
    }
}

/* ── STATUS RAIL ── */
.vs-rail[b-13ojc6rlyn] {
    border-bottom: 1px solid var(--vs-hair); background: rgba(6,7,10,.72);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-family: var(--vs-mono); font-size: 10px; letter-spacing: .06em; color: var(--vs-platinum-dim);
}
.vs-rail-in[b-13ojc6rlyn] { display: flex; align-items: center; gap: 26px; height: 34px; overflow: hidden; white-space: nowrap; }
.vs-rail-in .vs-sep[b-13ojc6rlyn] { color: var(--vs-platinum-ghost); }
.vs-rail-in .vs-live[b-13ojc6rlyn] { display: inline-flex; align-items: center; gap: 7px; color: var(--vs-ice); }
.vs-rail-strong[b-13ojc6rlyn] { color: var(--vs-platinum-2); }
.vs-blip[b-13ojc6rlyn] { width: 5px; height: 5px; border-radius: 50%; background: var(--vs-ice); box-shadow: 0 0 8px 2px rgba(125,211,252,.8); animation: vs-blip-b-13ojc6rlyn 1.9s ease-in-out infinite; }
@keyframes vs-blip-b-13ojc6rlyn { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .28; transform: scale(.8); } }
.vs-rail-in .vs-push[b-13ojc6rlyn] { margin-left: auto; color: var(--vs-platinum-ghost); }
@media (max-width: 820px) { .vs-rail-hide[b-13ojc6rlyn] { display: none; } }

/* ── NAV ── */
.vs-nav[b-13ojc6rlyn] {
    position: sticky; top: 0; z-index: 60;
    border-bottom: 1px solid var(--vs-hair);
    background: rgba(6,7,10,.80); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.vs-nav-in[b-13ojc6rlyn] { display: flex; align-items: center; gap: 20px; height: 66px; }
.vs-mark[b-13ojc6rlyn] { display: flex; align-items: center; gap: 11px; font-family: 'Syne', var(--vs-display); font-kerning: normal; font-weight: 800; font-size: clamp(15px, 3.6vw, 18px); letter-spacing: -.01em; white-space: nowrap; flex: none; }
.vs-mark-name[b-13ojc6rlyn] { color: var(--vs-ink); }
.vs-mark-tld[b-13ojc6rlyn] { color: var(--vs-platinum-dim); font-weight: 600; }
.vs-mark .vs-glyph[b-13ojc6rlyn] {
    width: 22px; height: 22px; position: relative; flex: none;
    border: 1.5px solid var(--vs-platinum-2); border-radius: 3px;
    display: grid; place-items: center;
}
.vs-mark .vs-glyph[b-13ojc6rlyn]::after {
    content: ''; width: 7px; height: 7px; background: var(--vs-amber); border-radius: 1px;
    box-shadow: 0 0 12px 3px rgba(255,138,31,.7); animation: vs-blip-b-13ojc6rlyn 2.4s ease-in-out infinite;
}
.vs-nav-links[b-13ojc6rlyn] { display: flex; gap: 20px; font-size: 14px; font-weight: 500; color: var(--vs-ink-2); }
.vs-nav-links a[b-13ojc6rlyn] { position: relative; padding-block: 4px; transition: color .15s; }
.vs-nav-links a:hover[b-13ojc6rlyn] { color: var(--vs-ink); }
.vs-nav-links a[b-13ojc6rlyn]::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--vs-amber); transition: right .22s ease; }
.vs-nav-links a:hover[b-13ojc6rlyn]::after { right: 0; }
.vs-nav-act[b-13ojc6rlyn] { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vs-nav-act .vs-btn[b-13ojc6rlyn] { padding: 9px 16px; font-size: 13px; }

/* ── MOBILE NAV (hamburger + dropdown menu) ── */
.vs-nav-burger[b-13ojc6rlyn] {
    display: none; flex: none; margin-left: auto;
    width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.vs-nav-burger span[b-13ojc6rlyn] { width: 20px; height: 1.5px; background: var(--vs-ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.vs-nav-burger--open span:nth-child(1)[b-13ojc6rlyn] { transform: translateY(6.5px) rotate(45deg); }
.vs-nav-burger--open span:nth-child(2)[b-13ojc6rlyn] { opacity: 0; }
.vs-nav-burger--open span:nth-child(3)[b-13ojc6rlyn] { transform: translateY(-6.5px) rotate(-45deg); }
.vs-mobile-menu[b-13ojc6rlyn] {
    display: none; flex-direction: column; gap: 2px;
    max-height: 0; overflow: hidden; transition: max-height .22s ease;
    border-top: 1px solid var(--vs-hair);
}
.vs-mobile-menu a[b-13ojc6rlyn] {
    padding: 14px var(--vs-gutter); font-size: 15px; font-weight: 500; color: var(--vs-ink-2);
    border-bottom: 1px solid var(--vs-hair);
}
.vs-mobile-menu-act[b-13ojc6rlyn] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px var(--vs-gutter) 18px; }
.vs-mobile-menu-act .nav-ctl[b-13ojc6rlyn] { width: 100%; }
.vs-mobile-menu a.vs-btn-amber[b-13ojc6rlyn] { color: #1B0A00; }
.vs-mobile-menu a.vs-btn-ghost[b-13ojc6rlyn] { color: var(--vs-ink); }

/* Header: full row >1180; links fold into the burger <=1180; the 4-button cluster folds into the menu <=700 (theme stays as an icon). */

@media (max-width: 960px) { .vs-nav-act[b-13ojc6rlyn] { display: none; } }
@media (max-width: 1240px) {
    .vs-nav-links[b-13ojc6rlyn] { display: none; }
    .vs-nav-burger[b-13ojc6rlyn] { display: flex; }
    /* overlay under the sticky header: opening it must not push the page (it broke #waitlist scroll targets) */
    .vs-mobile-menu[b-13ojc6rlyn] { display: flex; background: rgba(6,7,10,.97); position: absolute; top: 100%; left: 0; right: 0; border-bottom: 1px solid var(--vs-hair-2); }
    .vs-mobile-menu--open[b-13ojc6rlyn] { max-height: 420px; }
}

/* ── HERO ── */
.vs-hero[b-13ojc6rlyn] { position: relative; padding-block: clamp(56px, 8vw, 96px) clamp(48px, 7vw, 84px); }
.vs-hero-grid[b-13ojc6rlyn] { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 1040px) { .vs-hero-grid[b-13ojc6rlyn] { grid-template-columns: 1fr; } }

.vs-hero-chip[b-13ojc6rlyn] {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
    border: 1px solid rgba(255,138,31,.30); background: var(--vs-amber-soft);
    padding: 6px 12px 6px 9px; border-radius: var(--vs-radius);
    font-family: var(--vs-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-amber);
}
.vs-hero-chip .vs-blip[b-13ojc6rlyn] { background: var(--vs-amber); box-shadow: 0 0 8px 2px rgba(255,138,31,.8); }

.vs-hero h1[b-13ojc6rlyn] { font-size: clamp(36px, 4.6vw, 60px); line-height: .98; margin-bottom: 20px; }
.vs-hero h1 .vs-l2[b-13ojc6rlyn] { display: block; color: var(--vs-platinum-2); }
.vs-hero h1 .vs-flag[b-13ojc6rlyn] { color: var(--vs-critical); }
.vs-hero-sub[b-13ojc6rlyn] { color: var(--vs-ink-2); font-size: clamp(15.5px, 1.35vw, 18px); max-width: 520px; margin-bottom: 4px; }
.vs-hero-sub strong[b-13ojc6rlyn] { color: var(--vs-ink); font-weight: 600; }


/* Live favicon preview: pops in beside the input as soon as the typed text is host-like. */

/* GUEST WAITLIST — reserve-your-spot capture under the hero scan form */

.vs-proof[b-13ojc6rlyn] { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--vs-hair); }
.vs-proof .vs-n[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.vs-proof .vs-l[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-platinum-dim); line-height: 1.5; }
.vs-proof .vs-cellp[b-13ojc6rlyn] { display: flex; align-items: center; gap: 10px; }
.vs-proof .vs-vr[b-13ojc6rlyn] { width: 1px; height: 26px; background: var(--vs-hair-2); }

/* ── SIGNATURE: DIAGNOSTIC CONSOLE ── */
.vs-console[b-13ojc6rlyn] { background: linear-gradient(180deg, var(--vs-carbon-hi), var(--vs-carbon-lo)); border: 1px solid var(--vs-hair-2); border-radius: 5px; overflow: hidden; }
.vs-console-bar[b-13ojc6rlyn] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--vs-hair); background: rgba(221,227,239,.025); }
.vs-console-bar .vs-dots[b-13ojc6rlyn] { display: flex; gap: 5px; }
.vs-console-bar .vs-dots i[b-13ojc6rlyn] { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-platinum-ghost); }
.vs-console-bar .vs-ttl[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10px; letter-spacing: .08em; color: var(--vs-platinum-dim); }
.vs-console-bar .vs-st[b-13ojc6rlyn] { margin-left: auto; font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--vs-ice); display: flex; align-items: center; gap: 6px; }

.vs-radar[b-13ojc6rlyn] { position: relative; height: 212px; border-bottom: 1px solid var(--vs-hair); overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(91,77,255,.10), transparent 62%); }
.vs-radar svg[b-13ojc6rlyn] { position: absolute; inset: 0; width: 100%; height: 100%; }
.vs-sweep[b-13ojc6rlyn] { transform-origin: 50% 50%; animation: vs-spin-b-13ojc6rlyn 3.6s linear infinite; }
@keyframes vs-spin-b-13ojc6rlyn { to { transform: rotate(360deg); } }
.vs-radar .vs-ping[b-13ojc6rlyn] { animation: vs-ping-b-13ojc6rlyn 3.6s ease-out infinite; }
@keyframes vs-ping-b-13ojc6rlyn { 0%, 72% { opacity: 0; } 78% { opacity: 1; } 100% { opacity: 0; } }
.vs-radar-legend[b-13ojc6rlyn] { position: absolute; left: 14px; bottom: 12px; font-family: var(--vs-mono); font-size: 9px; letter-spacing: .1em; color: var(--vs-platinum-ghost); }
.vs-radar-count[b-13ojc6rlyn] { position: absolute; right: 14px; top: 12px; text-align: right; }
.vs-radar-count .vs-big[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.04em; color: var(--vs-critical); }
.vs-radar-count .vs-lbl[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-top: 4px; }

.vs-logstream[b-13ojc6rlyn] { height: 170px; overflow: hidden; padding: 12px 14px; font-family: var(--vs-mono); font-size: 10.5px; line-height: 1.85; color: var(--vs-platinum-dim); border-bottom: 1px solid var(--vs-hair); position: relative; }
.vs-logstream[b-13ojc6rlyn]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(transparent, var(--vs-carbon-lo)); pointer-events: none; }
.vs-logstream .vs-ln[b-13ojc6rlyn] { display: flex; gap: 10px; white-space: nowrap; }
.vs-logstream .vs-t[b-13ojc6rlyn] { color: var(--vs-platinum-ghost); flex: none; }
.vs-logstream .vs-ok[b-13ojc6rlyn] { color: var(--vs-ice); }
.vs-logstream .vs-bad[b-13ojc6rlyn] { color: var(--vs-critical); }
.vs-logstream .vs-wr[b-13ojc6rlyn] { color: var(--vs-warn); }

.vs-gauges[b-13ojc6rlyn] { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 540px) {
}
@media (max-width: 480px) {
    .vs-gauges[b-13ojc6rlyn] { grid-template-columns: repeat(2, 1fr); }
    .vs-gauge:nth-child(2n)[b-13ojc6rlyn] { border-right: 0; }
    .vs-gauge:nth-child(-n+2)[b-13ojc6rlyn] { border-bottom: 1px solid var(--vs-hair); }
}
.vs-gauge[b-13ojc6rlyn] { padding: 14px 12px; border-right: 1px solid var(--vs-hair); text-align: center; }
.vs-gauge:last-child[b-13ojc6rlyn] { border-right: 0; }
.vs-gauge .vs-v[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; font-size: 24px; letter-spacing: -.04em; line-height: 1; }
.vs-gauge .vs-k[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-top: 6px; }
.vs-gauge .vs-bar[b-13ojc6rlyn] { height: 2px; background: var(--vs-hair-2); margin-top: 9px; position: relative; overflow: hidden; }
.vs-gauge .vs-bar i[b-13ojc6rlyn] { position: absolute; inset: 0 auto 0 0; display: block; }

/* ── MARQUEE ── */
.vs-marq[b-13ojc6rlyn] { border-block: 1px solid var(--vs-hair); overflow: hidden; padding-block: 13px; background: rgba(221,227,239,.018); }
.vs-marq-track[b-13ojc6rlyn] { display: flex; gap: 0; width: max-content; animation: vs-slide-b-13ojc6rlyn 42s linear infinite; }
@keyframes vs-slide-b-13ojc6rlyn { to { transform: translateX(-50%); } }
.vs-marq-track span[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--vs-platinum-dim); padding-inline: 22px; border-right: 1px solid var(--vs-hair); white-space: nowrap; }
.vs-marq-track span em[b-13ojc6rlyn] { font-style: normal; color: var(--vs-platinum-2); }

/* ── PILLAR GRID ── */
.vs-pillars[b-13ojc6rlyn] { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); }
.vs-pil[b-13ojc6rlyn] { position: relative; padding: 26px 24px 24px; border-right: 1px solid var(--vs-hair); border-bottom: 1px solid var(--vs-hair); transition: background .2s ease; }
.vs-pillars .vs-pil:nth-child(3n)[b-13ojc6rlyn] { border-right: 0; }
.vs-pillars .vs-pil:nth-last-child(-n+3)[b-13ojc6rlyn] { border-bottom: 0; }
.vs-pil:hover[b-13ojc6rlyn] { background: rgba(221,227,239,.028); }
.vs-pil[b-13ojc6rlyn]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--vs-pc, var(--vs-indigo)); opacity: 0; transition: opacity .2s ease; }
.vs-pil:hover[b-13ojc6rlyn]::before { opacity: 1; }
.vs-pil-top[b-13ojc6rlyn] { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.vs-pil-id[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--vs-platinum-ghost); }
.vs-pil-score[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.05em; color: var(--vs-pc, var(--vs-indigo)); }
.vs-pil-score sup[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--vs-platinum-ghost); vertical-align: super; margin-left: 3px; }
.vs-pil h3[b-13ojc6rlyn] { font-family: var(--vs-display); font-size: 18px; font-weight: 700; margin-bottom: 7px; }
.vs-pil p[b-13ojc6rlyn] { font-size: 13.5px; color: var(--vs-ink-2); line-height: 1.55; margin-bottom: 16px; }
.vs-pil-meter[b-13ojc6rlyn] { height: 3px; background: rgba(221,227,239,.09); position: relative; margin-bottom: 14px; }
.vs-pil-meter i[b-13ojc6rlyn] { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vs-pc, var(--vs-indigo)); box-shadow: 0 0 12px var(--vs-pc, var(--vs-indigo)); }
.vs-pil-foot[b-13ojc6rlyn] { display: flex; align-items: center; justify-content: space-between; font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--vs-platinum-dim); }
@media (max-width: 900px) { .vs-pillars[b-13ojc6rlyn] { grid-template-columns: 1fr; } .vs-pillars .vs-pil[b-13ojc6rlyn] { border-right: 0; } .vs-pillars .vs-pil:nth-last-child(-n+3)[b-13ojc6rlyn] { border-bottom: 1px solid var(--vs-hair); } .vs-pillars .vs-pil:last-child[b-13ojc6rlyn] { border-bottom: 0; } }

/* ── FINDINGS TABLE ── */
.vs-tbl[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); overflow: hidden; }
.vs-tbl-head[b-13ojc6rlyn] { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--vs-hair-2); background: rgba(221,227,239,.03); }
.vs-tbl-head .vs-h[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-platinum-dim); }
.vs-tbl-head .vs-h.vs-push[b-13ojc6rlyn] { margin-left: auto; color: var(--vs-platinum-ghost); }
.vs-trow[b-13ojc6rlyn] { display: grid; grid-template-columns: 34px 96px minmax(0, 1fr) 118px 128px; align-items: center; border-bottom: 1px solid var(--vs-hair); transition: background .16s ease; }
.vs-trow:last-child[b-13ojc6rlyn] { border-bottom: 0; }
.vs-trow:hover[b-13ojc6rlyn] { background: rgba(221,227,239,.028); }
.vs-trow > div[b-13ojc6rlyn] { padding: 14px 16px; border-right: 1px solid var(--vs-hair); font-size: 13.5px; min-width: 0; }
.vs-trow > div:last-child[b-13ojc6rlyn] { border-right: 0; }
.vs-trow .vs-num[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; color: var(--vs-platinum-ghost); padding-inline: 10px; }
.vs-trow .vs-desc[b-13ojc6rlyn] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-trow .vs-desc code[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 11.5px; color: var(--vs-platinum-2); background: rgba(221,227,239,.06); padding: 2px 5px; border-radius: 2px; }
.vs-trow .vs-pil-n[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10.5px; color: var(--vs-platinum-dim); letter-spacing: .04em; }
.vs-trow .vs-act[b-13ojc6rlyn] { font-family: var(--vs-body); font-weight: 600; font-size: 12.5px; color: var(--vs-amber); white-space: nowrap; }
.vs-trow.vs-locked[b-13ojc6rlyn] { position: relative; }
.vs-trow.vs-locked .vs-desc[b-13ojc6rlyn], .vs-trow.vs-locked .vs-pil-n[b-13ojc6rlyn], .vs-trow.vs-locked .vs-act[b-13ojc6rlyn] { filter: blur(4.5px); opacity: .6; user-select: none; }
.vs-tbl-lock[b-13ojc6rlyn] { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border-top: 1px solid var(--vs-hair-2); background: linear-gradient(180deg, rgba(255,138,31,.05), transparent); }
.vs-tbl-lock .vs-txt[b-13ojc6rlyn] { font-size: 13.5px; color: var(--vs-ink-2); }
.vs-tbl-lock .vs-txt b[b-13ojc6rlyn] { color: var(--vs-ink); font-weight: 600; }
.vs-tbl-lock .vs-btn[b-13ojc6rlyn] { margin-left: auto; padding: 10px 18px; font-size: 13px; }
@media (max-width: 820px) {
    .vs-trow[b-13ojc6rlyn] { grid-template-columns: 70px minmax(0, 1fr); }
    .vs-trow .vs-num[b-13ojc6rlyn], .vs-trow .vs-pil-n[b-13ojc6rlyn] { display: none; }
    .vs-trow .vs-act[b-13ojc6rlyn] { border-top: 1px solid var(--vs-hair); grid-column: 1 / -1; }
}

/* ── SEQUENCE ── */
.vs-seq[b-13ojc6rlyn] { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); position: relative; }
.vs-step[b-13ojc6rlyn] { padding: 30px 26px; border-right: 1px solid var(--vs-hair); position: relative; }
.vs-seq .vs-step:last-child[b-13ojc6rlyn] { border-right: 0; }
.vs-step .vs-no[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10px; letter-spacing: .18em; color: var(--vs-indigo); margin-bottom: 20px; display: block; }
.vs-step .vs-ico[b-13ojc6rlyn] { width: 34px; height: 34px; border: 1px solid var(--vs-hair-3); border-radius: 3px; display: grid; place-items: center; margin-bottom: 18px; color: var(--vs-platinum-2); }
.vs-step h3[b-13ojc6rlyn] { font-family: var(--vs-display); font-size: 19px; font-weight: 700; margin-bottom: 9px; }
.vs-step p[b-13ojc6rlyn] { font-size: 14px; color: var(--vs-ink-2); }
.vs-step .vs-arrow[b-13ojc6rlyn] { position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; background: var(--vs-carbon); border: 1px solid var(--vs-hair-2); border-left: 0; border-bottom: 0; rotate: 45deg; z-index: 2; }
.vs-seq .vs-step:last-child .vs-arrow[b-13ojc6rlyn] { display: none; }
@media (max-width: 900px) { .vs-seq[b-13ojc6rlyn] { grid-template-columns: 1fr; } .vs-seq .vs-step[b-13ojc6rlyn] { border-right: 0; border-bottom: 1px solid var(--vs-hair); } .vs-seq .vs-step:last-child[b-13ojc6rlyn] { border-bottom: 0; } .vs-step .vs-arrow[b-13ojc6rlyn] { display: none; } }

/* ── COMPARISON MATRIX ── */
.vs-matrix[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); overflow-x: auto; }
.vs-matrix table[b-13ojc6rlyn] { width: 100%; border-collapse: collapse; min-width: 660px; }
.vs-matrix th[b-13ojc6rlyn], .vs-matrix td[b-13ojc6rlyn] { padding: 13px 16px; border-right: 1px solid var(--vs-hair); border-bottom: 1px solid var(--vs-hair); text-align: left; font-size: 13.5px; }
.vs-matrix th:last-child[b-13ojc6rlyn], .vs-matrix td:last-child[b-13ojc6rlyn] { border-right: 0; }
.vs-matrix tr:last-child td[b-13ojc6rlyn] { border-bottom: 0; }
.vs-matrix thead th[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--vs-platinum-dim); background: rgba(221,227,239,.03); font-weight: 500; }
.vs-matrix thead th.vs-us[b-13ojc6rlyn] { color: var(--vs-amber); background: rgba(255,138,31,.06); }
.vs-matrix tbody td.vs-us[b-13ojc6rlyn] { background: rgba(255,138,31,.035); }
.vs-matrix tbody tr:hover td[b-13ojc6rlyn] { background: rgba(221,227,239,.025); }
.vs-matrix tbody tr:hover td.vs-us[b-13ojc6rlyn] { background: rgba(255,138,31,.06); }
.vs-matrix .vs-lbl[b-13ojc6rlyn] { font-weight: 500; }
.vs-matrix .vs-lbl small[b-13ojc6rlyn] { display: block; font-family: var(--vs-mono); font-size: 9.5px; color: var(--vs-platinum-ghost); letter-spacing: .06em; margin-top: 3px; text-transform: uppercase; }
.vs-yes[b-13ojc6rlyn] { color: var(--vs-ice); font-family: var(--vs-mono); font-size: 12px; }
.vs-no[b-13ojc6rlyn] { color: var(--vs-platinum-ghost); font-family: var(--vs-mono); font-size: 12px; }
.vs-part[b-13ojc6rlyn] { color: var(--vs-warn); font-family: var(--vs-mono); font-size: 11px; }

/* ── TREND CHART ── */
.vs-tt-grid[b-13ojc6rlyn] { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
@media (max-width: 900px) { .vs-tt-grid[b-13ojc6rlyn] { grid-template-columns: 1fr; } }
.vs-trend[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); padding: 22px; }
.vs-trend-head[b-13ojc6rlyn] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.vs-trend-head .vs-v[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; font-size: 38px; letter-spacing: -.04em; line-height: 1; }
.vs-trend-head .vs-d[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-ice); }
.vs-trend-head .vs-k[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-left: auto; }
.vs-trend svg[b-13ojc6rlyn] { width: 100%; height: 150px; display: block; }
.vs-trend-x[b-13ojc6rlyn] { display: flex; justify-content: space-between; font-family: var(--vs-mono); font-size: 9px; color: var(--vs-platinum-ghost); letter-spacing: .08em; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--vs-hair); }

/* ── TERMINAL ── */
.vs-term[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: var(--vs-carbon-lo); overflow: hidden; }
.vs-term-bar[b-13ojc6rlyn] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--vs-hair); background: rgba(221,227,239,.025); }
.vs-term-bar .vs-dots[b-13ojc6rlyn] { display: flex; gap: 5px; }
.vs-term-bar .vs-dots i[b-13ojc6rlyn] { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-platinum-ghost); }
.vs-term-bar .vs-ttl[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10px; color: var(--vs-platinum-dim); letter-spacing: .08em; }
.vs-term-body[b-13ojc6rlyn] { padding: 18px; font-family: var(--vs-mono); font-size: 11.5px; line-height: 2; color: var(--vs-platinum-2); overflow-x: auto; }
.vs-term-body .vs-p[b-13ojc6rlyn] { color: var(--vs-indigo); }
.vs-term-body .vs-c[b-13ojc6rlyn] { color: var(--vs-ink); }
.vs-term-body .vs-ok[b-13ojc6rlyn] { color: var(--vs-ice); }
.vs-term-body .vs-dim[b-13ojc6rlyn] { color: var(--vs-platinum-ghost); }
.vs-term-body .vs-bad[b-13ojc6rlyn] { color: var(--vs-critical); }
.vs-caret[b-13ojc6rlyn] { display: inline-block; width: 7px; height: 14px; background: var(--vs-amber); vertical-align: -2px; animation: vs-blink-b-13ojc6rlyn 1.05s steps(2, start) infinite; }
@keyframes vs-blink-b-13ojc6rlyn { to { visibility: hidden; } }

/* ── PRICING ── */
.vs-plans[b-13ojc6rlyn] { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); }
.vs-plan[b-13ojc6rlyn] { padding: 30px 26px; border-right: 1px solid var(--vs-hair); display: flex; flex-direction: column; }
.vs-plans .vs-plan:last-child[b-13ojc6rlyn] { border-right: 0; }
.vs-plan.vs-hot[b-13ojc6rlyn] { background: linear-gradient(180deg, rgba(255,138,31,.055), transparent 60%); position: relative; }
.vs-plan.vs-hot[b-13ojc6rlyn]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--vs-amber); box-shadow: 0 0 18px var(--vs-amber); }
.vs-plan .vs-badge[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--vs-amber); margin-bottom: 14px; display: block; min-height: 14px; }
.vs-plan h3[b-13ojc6rlyn] { font-family: var(--vs-display); font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.vs-plan .vs-blurb[b-13ojc6rlyn] { font-size: 13px; color: var(--vs-ink-2); margin-bottom: 22px; min-height: 38px; }
.vs-plan .vs-price[b-13ojc6rlyn] { font-family: var(--vs-display); font-weight: 800; font-size: 44px; letter-spacing: -.05em; line-height: 1; margin-bottom: 4px; }
.vs-plan .vs-price span[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--vs-platinum-dim); margin-left: 5px; }
.vs-plan .vs-per[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--vs-platinum-ghost); text-transform: uppercase; margin-bottom: 24px; }
.vs-plan ul[b-13ojc6rlyn] { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; padding: 0; margin-top: 0; }
.vs-plan li[b-13ojc6rlyn] { font-size: 13.5px; color: var(--vs-ink-2); display: flex; gap: 10px; align-items: flex-start; }
.vs-plan li[b-13ojc6rlyn]::before { content: '—'; font-family: var(--vs-mono); font-size: 11px; color: var(--vs-platinum-ghost); flex: none; line-height: 1.6; }
.vs-plan li b[b-13ojc6rlyn] { color: var(--vs-ink); font-weight: 600; }
.vs-plan .vs-btn[b-13ojc6rlyn] { width: 100%; }
@media (max-width: 900px) { .vs-plans[b-13ojc6rlyn] { grid-template-columns: 1fr; } .vs-plans .vs-plan[b-13ojc6rlyn] { border-right: 0; border-bottom: 1px solid var(--vs-hair); } .vs-plans .vs-plan:last-child[b-13ojc6rlyn] { border-bottom: 0; } }

/* ── FAQ ── */
.vs-faq[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); }
.vs-faq details[b-13ojc6rlyn] { border-bottom: 1px solid var(--vs-hair); }
.vs-faq details:last-child[b-13ojc6rlyn] { border-bottom: 0; }
.vs-faq summary[b-13ojc6rlyn] {
    list-style: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: center; gap: 16px;
    font-family: var(--vs-display); font-weight: 700; font-size: 16.5px; letter-spacing: -.02em; transition: background .16s;
}
.vs-faq summary[b-13ojc6rlyn]::-webkit-details-marker { display: none; }
.vs-faq summary:hover[b-13ojc6rlyn] { background: rgba(221,227,239,.028); }
.vs-faq summary .vs-q[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--vs-indigo); flex: none; }
.vs-faq summary .vs-pm[b-13ojc6rlyn] { margin-left: auto; font-family: var(--vs-mono); font-size: 15px; color: var(--vs-platinum-dim); flex: none; transition: transform .2s ease; }
.vs-faq details[open] summary .vs-pm[b-13ojc6rlyn] { transform: rotate(45deg); }
.vs-faq .vs-a[b-13ojc6rlyn] { padding: 0 20px 20px 20px; font-size: 14px; color: var(--vs-ink-2); max-width: 760px; }

/* ── CLOSER + FOOTER ── */
.vs-closer-wrap[b-13ojc6rlyn] { padding-bottom: clamp(50px, 7vw, 90px); }
.vs-closer[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: linear-gradient(160deg, rgba(91,77,255,.09), transparent 55%), var(--vs-carbon); padding: clamp(38px, 6vw, 68px); text-align: center; position: relative; overflow: hidden; }
.vs-closer h2[b-13ojc6rlyn] { font-size: clamp(32px, 5.6vw, 62px); line-height: .98; margin-bottom: 18px; }
.vs-closer p[b-13ojc6rlyn] { color: var(--vs-ink-2); font-size: 16px; max-width: 440px; margin: 0 auto 30px; }
.vs-closer-btns[b-13ojc6rlyn] { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.vs-foot[b-13ojc6rlyn] { border-top: 1px solid var(--vs-hair-2); margin-top: clamp(60px, 8vw, 100px); }
.vs-foot-grid[b-13ojc6rlyn] { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 34px; padding-block: 48px; }
.vs-foot-brand p[b-13ojc6rlyn] { font-size: 13.5px; color: var(--vs-ink-2); max-width: 250px; margin-top: 14px; }
.vs-foot h4[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-bottom: 16px; font-weight: 500; }
.vs-foot ul[b-13ojc6rlyn] { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.vs-foot li a[b-13ojc6rlyn] { font-size: 13.5px; color: var(--vs-ink-2); transition: color .15s; }
.vs-foot li a:hover[b-13ojc6rlyn] { color: var(--vs-ink); }
.vs-foot-base[b-13ojc6rlyn] { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding-block: 20px; border-top: 1px solid var(--vs-hair); font-family: var(--vs-mono); font-size: 10px; letter-spacing: .06em; color: var(--vs-platinum-ghost); }
.vs-foot-base .vs-push[b-13ojc6rlyn] { margin-left: auto; display: flex; gap: 20px; }
@media (max-width: 900px) { .vs-foot-grid[b-13ojc6rlyn] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vs-foot-grid[b-13ojc6rlyn] { grid-template-columns: 1fr; gap: 28px; } }
.vs-btn-inert[b-13ojc6rlyn] { cursor: default; user-select: none; }
@media (max-width: 700px) { .vs-nav-in[b-13ojc6rlyn] { gap: 10px; } }
@media (max-width: 440px) {
    .vs-nav-in[b-13ojc6rlyn] { gap: 8px; }
    .vs-mark[b-13ojc6rlyn] { font-size: 13px; gap: 8px; }
    .vs-mark .vs-glyph[b-13ojc6rlyn] { width: 20px; height: 20px; }
    .vs-nav-burger[b-13ojc6rlyn] { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
    .vs-nav-in[b-13ojc6rlyn] { gap: 6px; }
    .vs-mark[b-13ojc6rlyn] { font-size: 12px; gap: 7px; }
}

.vs-ladder[b-13ojc6rlyn] { margin-top: 28px; text-align: center; }
.vs-ladder-head[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--vs-platinum-dim); margin-bottom: 14px; }
.vs-ladder-row[b-13ojc6rlyn] { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vs-ladder-chip[b-13ojc6rlyn] { border: 1px solid var(--vs-hair-2); background: var(--vs-carbon); padding: 10px 16px; font-size: 14px; color: var(--vs-ink); text-decoration: none; }
.vs-ladder-chip:hover[b-13ojc6rlyn] { border-color: var(--vs-amber); }
.vs-ladder-chip b[b-13ojc6rlyn] { font-weight: 600; margin-right: 6px; }
.vs-ladder-chip span[b-13ojc6rlyn] { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-platinum-dim); margin-left: 3px; }
.vs-ladder-note[b-13ojc6rlyn] { margin: 14px 0 18px; font-size: 13px; color: var(--vs-ink-2); }
.vs-ladder-new[b-13ojc6rlyn] { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--vs-ink-2); }
.vs-ladder-new li[b-13ojc6rlyn]::before { content: 'C6'; color: var(--vs-amber); margin-right: 8px; font-size: 9px; }
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* Pricing.razor — standalone /pricing page, restyled onto the same dark billing-surface palette
   used by VibeScan.Ui's BillingDialog (--billing-* tokens in VibeScan.Ui/tokens.css) so this page
   and the in-report "Unlock full report" dialog read as one design instead of two. Scoped to this
   page only via Blazor CSS isolation — nothing else on the (still light-themed) rest of the site
   is affected.

   Typography: TX-02 throughout (var(--vs-display) for large text — card names, prices, headings;
   var(--vs-body) for everything smaller — features, toggle, buttons, notes), same as the main
   page. This is one of only two surfaces that get TX-02 — BillingDialog and the rest of the app
   stay on --font-heading-regular / --font-body. */

.pricing-page[b-weezem7onz] {
    background: var(--billing-surface);
    color: var(--billing-text);
    min-height: 100vh;
}

.pricing-page .section__heading[b-weezem7onz] {
    color: var(--billing-text);
    font-family: var(--vs-display);
}

.pricing-page .section__subheading[b-weezem7onz] {
    color: var(--billing-muted);
    font-family: var(--vs-body);
}

.pricing-page .section--dark[b-weezem7onz] {
    background: var(--billing-card);
}

.pricing-page .section--dark h2[b-weezem7onz] {
    color: var(--billing-text);
}

.pricing-page .section--dark .text-secondary[b-weezem7onz] {
    color: var(--billing-muted);
}

/* ── Cadence toggle ── */
.pricing-toggle[b-weezem7onz] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--billing-border);
    border-radius: var(--radius-full);
    padding: 4px;
    margin-top: var(--space-lg);
}

.pricing-toggle__option[b-weezem7onz] {
    font-family: var(--vs-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--billing-muted);
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.pricing-toggle__option--active[b-weezem7onz] {
    background: rgba(255, 255, 255, .12);
    color: var(--billing-text);
}

.pricing-toggle__badge[b-weezem7onz] {
    font-size: var(--text-xs);
    color: var(--billing-success);
    font-weight: 700;
}

/* ── Card grid — stretch so all three cards share one row height regardless of feature count ── */
.pricing-grid[b-weezem7onz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.pricing-card[b-weezem7onz] {
    position: relative;
    background: var(--billing-card);
    border: 1px solid var(--billing-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
}

.pricing-card--popular[b-weezem7onz] {
    border-color: var(--color-coral-start);
    border-width: 2px;
    box-shadow: 0 0 24px -8px rgba(255, 107, 74, .3);
}

/* Premium tier (Accent="Aurora", e.g. Max) always carries its gradient header — unlike the
   selection-driven BillingDialog, this page has no "select a plan" state, so the treatment is
   keyed on the accent itself rather than a --selected modifier. */
.pricing-card--aurora[b-weezem7onz] {
    border-color: var(--color-violet-start);
}

.pricing-card--aurora .pricing-card__name[b-weezem7onz],
.pricing-card--aurora .pricing-card__audience[b-weezem7onz] {
    position: relative;
    z-index: 1;
}

.pricing-card--aurora[b-weezem7onz]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0 0 96px;
    background: var(--billing-premium-aurora);
    -webkit-mask: linear-gradient(#fff, transparent);
    mask: linear-gradient(#fff, transparent);
    pointer-events: none;
}

.pricing-card__badge[b-weezem7onz] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-coral-flame);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    z-index: 1;
}

.pricing-card__name[b-weezem7onz] {
    font-family: var(--vs-display);
    font-size: var(--text-xl);
    margin: var(--space-sm) 0 0;
    color: var(--billing-text);
}

.pricing-card__audience[b-weezem7onz] {
    font-family: var(--vs-body);
    color: var(--billing-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-md);
}

.pricing-card__price[b-weezem7onz] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

.pricing-card__strike[b-weezem7onz] {
    font-family: var(--vs-body);
    font-size: var(--text-lg);
    color: var(--billing-muted);
    text-decoration: line-through;
}

.pricing-card__amount[b-weezem7onz] {
    font-family: var(--vs-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--billing-text);
}

.pricing-card__period[b-weezem7onz] {
    font-family: var(--vs-body);
    color: var(--billing-muted);
    font-size: var(--text-sm);
}

.pricing-card__annual[b-weezem7onz] {
    font-family: var(--vs-body);
    font-size: var(--text-sm);
    color: var(--billing-muted);
    margin: 0 0 var(--space-md);
    position: relative;
    z-index: 1;
}

.pricing-card__features[b-weezem7onz] {
    list-style: none;
    margin: var(--space-md) 0;
    padding: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.pricing-card__feature[b-weezem7onz] {
    font-family: var(--vs-body);
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--billing-text);
    padding: 6px 0;
    border-top: 1px solid var(--billing-border);
}

.pricing-card__feature:first-child[b-weezem7onz] {
    border-top: none;
}

.pricing-card__check[b-weezem7onz] {
    color: var(--billing-success);
    flex-shrink: 0;
}

.pricing-card__cross[b-weezem7onz] {
    color: var(--billing-muted);
    opacity: .5;
    flex-shrink: 0;
}

.pricing-card__cta[b-weezem7onz] {
    width: 100%;
    margin-top: var(--space-md);
    position: relative;
    z-index: 1;
    font-family: var(--vs-body);
}

/* .btn--ghost/.btn--outline default to --color-text/--color-border, sized for the rest of the
   site's light background — override for this page's dark surface. */
.pricing-page .btn--ghost[b-weezem7onz],
.pricing-page .btn--outline[b-weezem7onz] {
    color: var(--billing-text);
    border-color: var(--billing-border-strong);
}

.pricing-page .btn--ghost:hover[b-weezem7onz],
.pricing-page .btn--outline:hover[b-weezem7onz] {
    border-color: var(--billing-text);
}

.pricing-grid__note[b-weezem7onz] {
    font-family: var(--vs-body);
    text-align: center;
    color: var(--billing-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-lg);
}

/* ── Group tabs (Solo / Teams / Enterprise) reuse the cadence-toggle pill styles ── */
.pricing-tabs[b-weezem7onz] {
    margin-top: var(--space-sm);
}

/* ── Compare table ── */
.pricing-compare__heading[b-weezem7onz] {
    font-family: var(--vs-display);
    color: var(--billing-text);
    margin-bottom: var(--space-md);
}

.pricing-compare[b-weezem7onz] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vs-body);
    color: var(--billing-text);
}

.pricing-compare th[b-weezem7onz],
.pricing-compare td[b-weezem7onz] {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--billing-border);
    font-size: var(--text-sm);
    font-weight: 400;
}

.pricing-compare thead th[b-weezem7onz] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--billing-muted);
    border-top: none;
}

.pricing-compare tbody th[b-weezem7onz] {
    color: var(--billing-muted);
}

.pricing-compare__check[b-weezem7onz] {
    color: var(--billing-success);
}

.pricing-compare__no[b-weezem7onz] {
    color: var(--billing-muted);
    opacity: .5;
}

.pricing-compare__soon[b-weezem7onz] {
    font-size: var(--text-xs);
    color: var(--billing-muted);
    border: 1px solid var(--billing-border);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    white-space: nowrap;
}

/* ── Enterprise contact card ── */
.pricing-enterprise[b-weezem7onz] {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.pricing-enterprise__actions[b-weezem7onz] {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

/* Deep-linked plan (/pricing/<slug>) gets a neutral highlight, distinct from Most Popular. */
.pricing-card--anchor[b-weezem7onz] {
    border-color: var(--billing-text);
    box-shadow: 0 0 0 1px var(--billing-text);
}

@media (max-width: 559px) {
    .pricing-compare[b-weezem7onz] {
        display: block;
        overflow-x: auto;
    }
}

/* Tablet: single column. Same trap BillingDialog.razor.css documents for its plan grid:
   the auto-fit grid resolves to TWO tracks in the 560-839px range (2x280px + gap fits),
   orphaning the third plan in a half-width cell on row two. One column chosen over
   horizontal snap cards for the same reason BillingDialog gives - snap cards need a
   position indicator and dots are explicitly ruled out by the design contract. */
@media (min-width: 560px) and (max-width: 839px) {
    .pricing-grid[b-weezem7onz] {
        grid-template-columns: 1fr;
    }
}

/* /Components/Pages/Report.razor.rz.scp.css */
/* Report page styles */

.report[b-l0y3v9l1bb] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    min-height: 100vh;
    background: var(--color-page);
    box-sizing: border-box;
}

.report__topbar[b-l0y3v9l1bb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-md);
    background: var(--color-page);
}

.report__brand[b-l0y3v9l1bb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
}

.report__brand-mark[b-l0y3v9l1bb] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--color-coral-start), var(--color-coral-end));
}

.report__newscan[b-l0y3v9l1bb] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-coral-start), var(--color-coral-end));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 10px 18px;
    border-radius: var(--radius-full);
}

.report__newscan:hover[b-l0y3v9l1bb] {
    filter: brightness(1.05);
}

.report__newscan:focus-visible[b-l0y3v9l1bb],
.report__brand:focus-visible[b-l0y3v9l1bb] {
    outline: 2px solid var(--color-violet-start);
    outline-offset: 2px;
}


.report__loading[b-l0y3v9l1bb] {
    text-align: center;
    padding: var(--space-3xl) 0;
}

.report__loading p[b-l0y3v9l1bb] {
    margin-top: var(--space-md);
    color: var(--color-secondary);
}

.report__status-pill[b-l0y3v9l1bb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
}

.report__pill-dot[b-l0y3v9l1bb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-leaf-green);
}

.report__viz-area[b-l0y3v9l1bb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.report__issue-count[b-l0y3v9l1bb] {
    font-size: var(--text-3xl);
    font-weight: 700;
    font-family: var(--font-heading);
    display: block;
}

.report__issue-label[b-l0y3v9l1bb] {
    font-size: var(--text-xs);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report__health-score[b-l0y3v9l1bb] {
    text-align: center;
}

.report__health-value[b-l0y3v9l1bb] {
    display: block;
    font-size: var(--text-4xl);
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--color-leaf-green);
}

.report__health-label[b-l0y3v9l1bb] {
    font-size: var(--text-xs);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report__tabs[b-l0y3v9l1bb] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-lg);
    margin-top: var(--space-lg);
}

.report__tab[b-l0y3v9l1bb] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-secondary);
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.report__tab--active[b-l0y3v9l1bb] {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
    font-weight: 600;
}

.report__tab:focus-visible[b-l0y3v9l1bb] {
    outline: 2px solid var(--color-violet-start);
    outline-offset: 2px;
}

.report__tab-count[b-l0y3v9l1bb] {
    font-size: var(--text-sm);
    background: var(--color-page);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-weight: 600;
}

.report__panel[hidden][b-l0y3v9l1bb] {
    display: none;
}

.report__severities[b-l0y3v9l1bb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.report__severity-badge[b-l0y3v9l1bb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.report__severity-badge--critical[b-l0y3v9l1bb] {
    background: rgba(230, 57, 80, 0.1);
    color: var(--severity-critical);
}

.report__severity-badge--high[b-l0y3v9l1bb] {
    background: rgba(255, 107, 74, 0.1);
    color: var(--severity-high);
}

.report__severity-badge--medium[b-l0y3v9l1bb] {
    background: rgba(255, 159, 69, 0.1);
    color: var(--severity-medium);
}

.report__severity-badge--low[b-l0y3v9l1bb] {
    background: rgba(255, 209, 102, 0.15);
    color: #a08220;
}

.report__categories[b-l0y3v9l1bb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-secondary);
}

.report__categories span[b-l0y3v9l1bb] {
    padding: 4px 10px;
    background: var(--color-page);
    border-radius: var(--radius-full);
}

.report__finding-card[b-l0y3v9l1bb] {
    margin-bottom: var(--space-md);
}

.report__finding-header[b-l0y3v9l1bb] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.report__severity-dot[b-l0y3v9l1bb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.report__severity-dot--critical[b-l0y3v9l1bb] { background: var(--severity-critical); }
.report__severity-dot--high[b-l0y3v9l1bb] { background: var(--severity-high); }
.report__severity-dot--medium[b-l0y3v9l1bb] { background: var(--severity-medium); }
.report__severity-dot--low[b-l0y3v9l1bb] { background: var(--severity-low); }

.report__finding-severity[b-l0y3v9l1bb] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report__finding-title[b-l0y3v9l1bb] {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-xs);
}

.report__finding-explanation[b-l0y3v9l1bb] {
    font-size: var(--text-base);
    color: var(--color-secondary);
    margin: 0 0 var(--space-sm);
    line-height: 1.6;
}

.report__finding-locked[b-l0y3v9l1bb] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-secondary);
    padding: var(--space-sm);
    background: var(--color-page);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.report__locked-section[b-l0y3v9l1bb] {
    text-align: center;
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-lg);
}

.report__locked-count[b-l0y3v9l1bb] {
    font-size: var(--text-base);
    color: var(--color-secondary);
    margin-bottom: var(--space-md);
}

.report__unlock-cta[b-l0y3v9l1bb] {
    font-size: var(--text-lg);
    padding: var(--space-sm) var(--space-xl);
}

/* Decorative five-dot narrative motif (conversion design contract, section 11). Non-interactive:
   pointer-events none and no cursor affordance so clicks do nothing, and the generous top spacing
   separates it from the unlock CTA and the Security/Others tabs so it never reads as pagination. */
.report__narrative-dots[b-l0y3v9l1bb] {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    pointer-events: none;
    user-select: none;
}

.report__narrative-dot[b-l0y3v9l1bb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    opacity: 0.7;
}

.report__narrative-dot--current[b-l0y3v9l1bb] {
    width: 10px;
    height: 10px;
    align-self: center;
    background: var(--color-violet-start);
    opacity: 1;
}

.report__celebration[b-l0y3v9l1bb] {
    text-align: center;
    padding: var(--space-xl) 0;
}

.report__celebration-icon[b-l0y3v9l1bb] {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-sm);
}

.report__celebration h3[b-l0y3v9l1bb] {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
}

.report__celebration p[b-l0y3v9l1bb] {
    color: var(--color-secondary);
}

.report__celebration-alt[b-l0y3v9l1bb] {
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-secondary);
}

.report__error[b-l0y3v9l1bb] {
    text-align: center;
    padding: var(--space-3xl) 0;
    color: var(--color-secondary);
}

@media (max-width: 479px) {
    .report__viz-area[b-l0y3v9l1bb] {
        flex-direction: column;
    }
}
/* /Components/Pages/ScanProgress.razor.rz.scp.css */
/* Conversion scan page: live scan theater over a blurred member dashboard (billing-conversion-design §2, §10). */

.sp__veil[b-wnwb96uzej] {
    position: fixed;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(60% 50% at 50% 30%, rgba(250,250,247,.25), rgba(250,250,247,.55) 75%),
        linear-gradient(180deg, rgba(139,92,246,.06), rgba(255,107,74,.05));
}

.sp[b-wnwb96uzej] {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 0 20px 64px;
    color: var(--color-text, #1F1B2D);
    font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.sp__topbar[b-wnwb96uzej] { display: flex; justify-content: space-between; align-items: center; max-width: 1120px; margin: 0 auto; padding: 18px 0; }
.sp__brand[b-wnwb96uzej] { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font: 700 18px var(--font-heading, inherit); }
.sp__mark[b-wnwb96uzej] { width: 24px; height: 24px; border-radius: 8px; background: var(--gradient-coral-flame, linear-gradient(135deg,#FF6B4A,#FF3D6E)); box-shadow: 0 4px 14px rgba(255,61,110,.35); }
.sp__newscan[b-wnwb96uzej] { text-decoration: none; color: #3B3548; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid rgba(31,27,45,.12); }
.sp__newscan:hover[b-wnwb96uzej] { border-color: rgba(31,27,45,.3); }

.sp__loading[b-wnwb96uzej] { display: grid; place-items: center; gap: 14px; padding: 18vh 0; color: #4B4558; }
.sp__spinner[b-wnwb96uzej] { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #E7E2F2; border-top-color: #8B5CF6; animation: sp-spin-b-wnwb96uzej .9s linear infinite; }

.sp__stage[b-wnwb96uzej] {
    max-width: 1120px;
    margin: 8px auto 0;
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 30px 80px rgba(46,30,92,.16), 0 2px 0 rgba(255,255,255,.9) inset;
}

/* ---- hero: ring + headline ---- */
.sp__hero[b-wnwb96uzej] { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.sp__ring[b-wnwb96uzej] {
    --p: 0;
    position: relative;
    width: 200px; height: 200px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(from -90deg, #8B5CF6, #C026D3 calc(var(--p) * .5%), #FF3D6E calc(var(--p) * .85%), #FFB627 calc(var(--p) * 1%), #EEEAF6 0);
    transition: background .6s var(--ease-out-expo, ease);
    box-shadow: 0 18px 50px rgba(139,92,246,.25);
}
.sp__ring[b-wnwb96uzej]::before {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 75%, rgba(139,92,246,.35) 90%, transparent);
    animation: sp-spin-b-wnwb96uzej 2.4s linear infinite;
}
.sp__stage--done .sp__ring[b-wnwb96uzej]::before { animation: none; opacity: 0; }
.sp__ring-inner[b-wnwb96uzej] { position: relative; width: 158px; height: 158px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; }
.sp__ring-inner b[b-wnwb96uzej] { font: 800 52px/1 var(--font-heading, inherit); color: #1F1B2D; }
.sp__ring-inner span[b-wnwb96uzej] { font-size: 13px; color: #6B6577; margin-top: 4px; }

.sp__headline h1[b-wnwb96uzej] { margin: 10px 0 6px; font: 800 clamp(26px, 4vw, 40px)/1.1 var(--font-heading, inherit); letter-spacing: -.02em; word-break: break-word; }
.sp__headline h1:focus[b-wnwb96uzej] { outline: none; }
.sp__headline p[b-wnwb96uzej] { margin: 0; color: #4B4558; font-size: 16px; max-width: 560px; }
.sp__pill[b-wnwb96uzej] { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #F3EEFF; color: #5B21B6; font-weight: 600; font-size: 13px; }
.sp__pill i[b-wnwb96uzej] { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.sp__pulse[b-wnwb96uzej] { animation: sp-pulse-b-wnwb96uzej 1.2s ease-in-out infinite; background: #8B5CF6 !important; }

.sp__stats[b-wnwb96uzej] { display: flex; gap: 28px; margin: 18px 0 0; flex-wrap: wrap; }
.sp__stats div[b-wnwb96uzej] { display: flex; flex-direction: column; }
.sp__stats dt[b-wnwb96uzej] { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6B6577; }
.sp__stats dd[b-wnwb96uzej] { margin: 2px 0 0; font: 700 24px var(--font-heading, inherit); font-variant-numeric: tabular-nums; }

.sp__actions[b-wnwb96uzej] { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.sp__cta[b-wnwb96uzej] {
    border: 0; cursor: pointer; min-height: 48px; padding: 0 26px; border-radius: 999px;
    font: 700 16px var(--font-body, inherit); color: #fff;
    background: var(--gradient-coral-flame, linear-gradient(135deg,#FF6B4A,#FF3D6E));
    box-shadow: 0 10px 30px rgba(255,61,110,.35);
    animation: sp-breathe-b-wnwb96uzej 2.6s ease-in-out infinite;
}
.sp__cta:hover[b-wnwb96uzej] { filter: brightness(1.06); }
.sp__ghost[b-wnwb96uzej] { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none; color: #2C2738; font-weight: 600; border: 1px solid rgba(31,27,45,.18); background: #fff; }
.sp__cta:focus-visible[b-wnwb96uzej], .sp__ghost:focus-visible[b-wnwb96uzej], .sp__newscan:focus-visible[b-wnwb96uzej] { outline: 2px solid #8B5CF6; outline-offset: 3px; }

/* ---- pillar lanes ---- */
.sp__lanes[b-wnwb96uzej] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sp__lane[b-wnwb96uzej] { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid rgba(31,27,45,.08); transition: border-color .3s, box-shadow .3s; min-width: 0; }
.sp__lane--run[b-wnwb96uzej] { border-color: rgba(139,92,246,.45); box-shadow: 0 0 0 4px rgba(139,92,246,.08); }
.sp__lane--done[b-wnwb96uzej] { border-color: rgba(61,220,132,.45); }
.sp__lane-head[b-wnwb96uzej] { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.sp__lane-count[b-wnwb96uzej] { font-variant-numeric: tabular-nums; color: #6B6577; }
.sp__lane-bar[b-wnwb96uzej] { height: 6px; margin: 10px 0 8px; border-radius: 99px; background: #EEEAF6; overflow: hidden; }
.sp__lane-bar i[b-wnwb96uzej] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8B5CF6, #C026D3, #FF3D6E); background-size: 200% 100%; animation: sp-flow-b-wnwb96uzej 1.6s linear infinite; transition: width .5s var(--ease-out-expo, ease); }
.sp__lane--done .sp__lane-bar i[b-wnwb96uzej] { background: #3DDC84; animation: none; }
.sp__lane-now[b-wnwb96uzej] { font-size: 12px; color: #4B4558; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.sp__dots[b-wnwb96uzej] { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #8B5CF6; animation: sp-pulse-b-wnwb96uzej 1s ease-in-out infinite; vertical-align: middle; }

/* ---- 127-check matrix ---- */
.sp__matrix-wrap[b-wnwb96uzej] { padding: 16px; border-radius: 18px; background: #1F1B2D; color: #EDEAF6; }
.sp__matrix-head[b-wnwb96uzej] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sp__matrix-head h2[b-wnwb96uzej] { margin: 0; font: 700 16px var(--font-heading, inherit); }
.sp__legend[b-wnwb96uzej] { display: inline-flex; gap: 6px 14px; align-items: center; font-size: 12px; color: #B8B3C3; flex-wrap: wrap; }
.sp__legend i[b-wnwb96uzej] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.t-pass[b-wnwb96uzej] { background: #3DDC84; } .t-flag[b-wnwb96uzej] { background: #FF6B4A; } .t-run[b-wnwb96uzej] { background: #8B5CF6; }
.sp__matrix[b-wnwb96uzej] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 5px; }
.sp__tile[b-wnwb96uzej] { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.08); transition: background .4s, transform .4s; }
.sp__tile--running[b-wnwb96uzej] { background: #8B5CF6; animation: sp-pulse-b-wnwb96uzej .9s ease-in-out infinite; }
.sp__tile--passed[b-wnwb96uzej] { background: #3DDC84; animation: sp-pop-b-wnwb96uzej .45s var(--ease-out-expo, ease); }
.sp__tile--flagged[b-wnwb96uzej] { background: #FFB627; animation: sp-pop-b-wnwb96uzej .45s var(--ease-out-expo, ease); }
.sp__tile--flagged.sev-high[b-wnwb96uzej] { background: #FF6B4A; }
.sp__tile--flagged.sev-critical[b-wnwb96uzej] { background: #FF3D6E; box-shadow: 0 0 8px rgba(255,61,110,.7); }
.sp__tile--flagged.sev-info[b-wnwb96uzej], .sp__tile--flagged.sev-low[b-wnwb96uzej] { background: #7DD3FC; }

/* ---- findings feed ---- */
.sp__feed h2[b-wnwb96uzej] { margin: 0 0 10px; font: 700 16px var(--font-heading, inherit); }
.sp__finding[b-wnwb96uzej] { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: #fff; border: 1px solid rgba(31,27,45,.08); animation: sp-in-b-wnwb96uzej .5s var(--ease-out-expo, ease) both; }
.sp__finding-title[b-wnwb96uzej] { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp__sev[b-wnwb96uzej] { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 99px; background: #EEEAF6; color: #4B4558; }
.sp__sev--critical[b-wnwb96uzej] { background: #FFE4EA; color: #B0103A; }
.sp__sev--high[b-wnwb96uzej] { background: #FFEADF; color: #B4380B; }
.sp__sev--medium[b-wnwb96uzej] { background: #FFF3D6; color: #8A5300; }
.sp__lock[b-wnwb96uzej] { flex: none; font-size: 12px; font-weight: 600; color: #6D28D9; background: #F3EEFF; padding: 4px 10px; border-radius: 99px; }
.sp__more[b-wnwb96uzej] { margin: 4px 0 0; color: #6B6577; font-size: 13px; }
.sp__error[b-wnwb96uzej] { padding: 16px; border-radius: 14px; background: #FFF1F2; color: #9F1239; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

@keyframes sp-spin-b-wnwb96uzej { to { transform: rotate(360deg); } }
@keyframes sp-pulse-b-wnwb96uzej { 50% { opacity: .45; transform: scale(.85); } }
@keyframes sp-flow-b-wnwb96uzej { to { background-position: -200% 0; } }
@keyframes sp-pop-b-wnwb96uzej { from { transform: scale(.4); } }
@keyframes sp-in-b-wnwb96uzej { from { opacity: 0; transform: translateY(8px); } }
@keyframes sp-breathe-b-wnwb96uzej { 50% { box-shadow: 0 14px 40px rgba(255,61,110,.5); } }

@media (max-width: 900px) {
    .sp__lanes[b-wnwb96uzej] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sp[b-wnwb96uzej] { padding: 0 12px 48px; }
    .sp__stage[b-wnwb96uzej] { padding: 18px; border-radius: 22px; }
    .sp__hero[b-wnwb96uzej] { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
    .sp__ring[b-wnwb96uzej] { width: 168px; height: 168px; }
    .sp__ring-inner[b-wnwb96uzej] { width: 132px; height: 132px; }
    .sp__ring-inner b[b-wnwb96uzej] { font-size: 42px; }
    .sp__stats[b-wnwb96uzej], .sp__actions[b-wnwb96uzej] { justify-content: center; }
    .sp__actions > *[b-wnwb96uzej] { flex: 1 1 100%; justify-content: center; }
    .sp__matrix[b-wnwb96uzej] { grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp__ring[b-wnwb96uzej]::before, .sp__pulse[b-wnwb96uzej], .sp__dots[b-wnwb96uzej], .sp__tile[b-wnwb96uzej], .sp__lane-bar i[b-wnwb96uzej], .sp__cta[b-wnwb96uzej], .sp__finding[b-wnwb96uzej], .sp__spinner[b-wnwb96uzej] { animation: none !important; transition: none !important; }
}