/* ViperAI Shield identity (docs/IDENTITY.md). Loaded last on every page.
   White and near-black, SF Pro (Inter elsewhere), Viper Green as light only:
   #2FD86F glows, #0B7A3E is the green that text and links use on white.
   Red is only for scam, amber only for caution. Motion stays in motion.js. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root, .skin {
  --id-ink: #1D1D1F; --id-ink-2: #424245; --id-mute: #6E6E73; --id-faint: #86868B;
  --id-fill: #F5F5F7; --id-fill-2: #E8E8ED; --id-hair: #E5E5EA; --id-line: #D2D2D7;
  --id-black: #000000; --id-night: #0B0B0C; --id-night-2: #161618; --id-mist: #A1A1A6; --id-mist-2: #86868B;
  --id-viper: #2FD86F; --id-viper-deep: #0B7A3E; --id-viper-press: #075C2E; --id-viper-glow: rgba(47, 216, 111, .32);
  --id-scam: #E0362C; --id-scam-text: #C4271D; --id-scam-glow: rgba(224, 54, 44, .28);
  --id-caution: #965A00; --id-caution-light: #FFB224; --id-caution-glow: rgba(255, 178, 36, .3);
  --id-quiet: #AEAEB2;
  --id-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --id-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --id-r-control: 12px; --id-r-card: 20px; --id-r-surface: 28px; --id-pill: 980px;
  --id-surface: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04), 0 12px 24px -8px rgba(0, 0, 0, .06), 0 48px 96px -32px rgba(0, 0, 0, .18);
  --id-raise: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04), 0 10px 24px -14px rgba(0, 0, 0, .14);

  /* The older token families, pointed at the identity. */
  --sans: var(--id-font);
  --qa-stone: #FFFFFF; --qa-ink: var(--id-ink); --qa-white: #FFFFFF; --qa-on-forest: #F5F5F7; --qa-forest-body: var(--id-fill);
  --viper-forest: var(--id-viper-press); --viper-primary: var(--id-viper-deep); --viper-primary-hover: var(--id-viper-press); --viper-primary-active: var(--id-viper-press);
  --viper-muted: var(--id-mute); --viper-surface-green: var(--id-fill); --viper-border-green: var(--id-line);
  --c-canvas: #FFFFFF; --c-bg2: var(--id-fill); --c-raise: var(--id-fill); --c-line: var(--id-hair); --c-line2: var(--id-hair);
  --c-ink: var(--id-ink); --c-body: var(--id-ink-2); --c-mute: var(--id-mute); --c-ash: var(--id-mute);
  --ok: var(--id-viper-deep); --ok-soft: var(--id-fill); --warn: var(--id-caution); --warn-soft: var(--id-fill); --bad: var(--id-scam-text); --bad-soft: #FDECEB;
  --neutral: var(--id-mute); --neutral-soft: var(--id-fill); --qa-provider: #000000; --ui-focus: var(--id-viper-deep);
  --ap-ink: var(--id-ink); --ap-body: var(--id-ink-2); --ap-mute: var(--id-mute); --ap-rule: var(--id-hair); --ap-paper: #FFFFFF;
  --ap-green: var(--id-viper-deep); --ap-green-deep: var(--id-viper-press); --ap-tint: var(--id-fill);
  --ap-amber: var(--id-caution); --ap-amber-mark: var(--id-caution-light); --ap-amber-tint: var(--id-fill); --ap-red: var(--id-scam-text); --ap-red-tint: #FDECEB; --ap-grey: var(--id-quiet);
  --pg-ground: #FFFFFF; --pg-band: var(--id-fill); --pg-paper: #FFFFFF; --pg-ink: var(--id-ink); --pg-body: var(--id-ink-2); --pg-mute: var(--id-mute);
  --pg-rule: var(--id-hair); --pg-green: var(--id-viper-deep); --pg-green-deep: var(--id-viper-press); --pg-tint: var(--id-fill); --pg-warn: var(--id-caution); --pg-warn-tint: var(--id-fill);
  --depth-1: 0 0 0 1px rgba(0, 0, 0, .06); --depth-2: var(--id-raise); --depth-3: var(--id-surface);
  --radius-control: 12px; --radius-surface: 20px; --radius-sheet: 28px; --glow-protect: rgba(47, 216, 111, .18);
}

/* ── type ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--id-font); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:is(h1, .h1, h2, .mkh2, .qa-closing h2, h3) { font-family: var(--id-display); font-weight: 700; letter-spacing: -0.03em; }
time, .num, .pp, .wt-timeline time, .nrow time, .wl-meta, .vw-alert-meta { font-variant-numeric: tabular-nums; }
:is(input, textarea, select, button) { letter-spacing: -0.01em; }
::selection { background: rgba(47, 216, 111, .28); }
body :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--id-viper-deep); outline-offset: 3px; }

/* ── header: translucent white, quiet text, no underlines ──────────────── */
body .apphead { background: rgba(255, 255, 255, .8) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .07); color: var(--id-ink);
  --nav-ink: var(--id-ink); --nav-muted: var(--id-ink-2); --nav-active: var(--id-ink); transition: background-color var(--dur-micro, 150ms) var(--ease-out), box-shadow var(--dur-micro, 150ms); }
@media (min-width: 821px) { body .apphead { height: 56px; } }
body .apphead .brandlink { color: var(--id-ink) !important; gap: 8px; }
body .apphead .brandlink .mark { width: 24px; height: 24px; padding: 0; background: none; border-radius: 0; }
body .apphead .brandlink b, body .apphead .brandlink b span { font: 600 17px/1 var(--id-display) !important; letter-spacing: -0.02em !important; color: var(--id-ink) !important; }
body .apphead .tb { font: 400 14px/1.2 var(--id-font) !important; color: var(--id-ink-2) !important; letter-spacing: -0.01em; }
body .apphead .tb:hover { color: var(--id-ink) !important; }
body .apphead .tb.on { color: var(--id-ink) !important; font-weight: 600 !important; }
body .apphead :is(.acctbtn, #langbtn) { color: var(--id-ink) !important; }
body .apphead .acctbtn { border-radius: var(--id-pill); }
body .apphead .acctbtn .ico { width: 19px; height: 19px; }
body .apphead :is(.tb, .acctbtn)::after { display: none; }
/* Over the black sections of the homepage the header turns dark with them. */
html.hp-nav-dark body:has(#v-check.act) .apphead { background: rgba(0, 0, 0, .72) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
html.hp-nav-dark body:has(#v-check.act) .apphead :is(.brandlink, .brandlink b, .brandlink b span, .tb.on, .acctbtn, #langbtn) { color: #F5F5F7 !important; }
html.hp-nav-dark body:has(#v-check.act) .apphead .tb { color: #D2D2D7 !important; }
html.hp-nav-dark body:has(#v-check.act) .apphead :focus-visible { outline-color: var(--id-viper); }

/* ── actions: pills; ink is primary, fill is secondary, green is a link ─── */
body :is(.btn, .mkcta, .cta, .install, .uc-go, .navcta, .authbtn, .vw-btn, .vw-pill, .vr-act, .pg-cta) { border-radius: var(--id-pill); }
body :is(.btn, .mkcta, .cta, .install, .uc-go, .navcta) { transition: transform var(--dur-press, 90ms) var(--ease-out), background-color var(--dur-micro, 150ms) var(--ease-out); }
body .vr-act { background: var(--id-fill); border: 0; font-weight: 500; }
@media (hover: hover) { body .vr-act:hover { background: var(--id-fill-2); } }
body :is(.linkbtn, .flink, .vact button, .hp-link) { color: var(--id-viper-deep); }
body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) { border-color: var(--id-line); border-radius: var(--id-r-control); }
body :is(input, textarea, select):focus { border-color: var(--id-viper-deep); box-shadow: 0 0 0 3px rgba(11, 122, 62, .14); outline: none; }
body :is(input, textarea, select)::placeholder { color: var(--id-faint); }

/* ── the Viper result: verdict first, as light; then why; then what to do ─ */
.vr { --vr-ink: var(--id-ink); --vr-body: var(--id-ink-2); --vr-mute: var(--id-mute); --vr-line: var(--id-hair); --vr-green: var(--id-viper-deep); --vr-tint: var(--id-fill);
  --vr-red: var(--id-scam); --vr-amber: var(--id-caution-light); --vr-grey: var(--id-quiet);
  font-family: var(--id-font); border-radius: var(--id-r-surface); box-shadow: var(--id-surface); padding: 28px 32px 24px; }
.vr-head { gap: 8px; margin-bottom: 0 !important; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--id-ink); }
.vr-head .vr-mark { width: 18px; height: 18px; }
.vr-subject { margin-top: 6px !important; font-size: 14px; color: var(--id-mute); overflow-wrap: anywhere; }
.vr .vr-verdict, .vr h2.vr-verdict { margin: 22px 0 0 !important; gap: 16px; font: 700 clamp(28px, 3.6vw, 44px)/1.06 var(--id-display) !important; letter-spacing: -0.035em !important; color: var(--id-ink); }
.vr .vr-shape { width: 18px; height: 18px; flex: none; border-radius: 50%; }
[data-verdict="SCAM"] .vr-verdict, .vr[data-verdict="SCAM"] .vr-verdict { color: var(--id-scam-text) !important; }
[data-verdict="CAUTION"] .vr-verdict, .vr[data-verdict="CAUTION"] .vr-verdict { color: var(--id-caution) !important; }
[data-verdict="SCAM"] .vr-shape, [data-verdict="SCAM"] > .vr-shape { background: var(--id-scam) !important; box-shadow: 0 0 0 6px rgba(224, 54, 44, .12), 0 0 24px 4px var(--id-scam-glow) !important; }
[data-verdict="CAUTION"] .vr-shape, [data-verdict="CAUTION"] > .vr-shape { background: var(--id-caution-light) !important; box-shadow: 0 0 0 6px rgba(255, 178, 36, .16), 0 0 24px 4px var(--id-caution-glow) !important; }
[data-verdict="NO_KNOWN_THREAT_FOUND"] .vr-shape, [data-verdict="NO_KNOWN_THREAT_FOUND"] > .vr-shape { background: var(--id-quiet) !important; box-shadow: 0 0 0 6px rgba(0, 0, 0, .05) !important; }
[data-verdict="INCONCLUSIVE"] .vr-shape, [data-verdict="INCONCLUSIVE"] > .vr-shape { background: transparent !important; box-shadow: inset 0 0 0 2.5px var(--id-quiet) !important; }
[data-verdict="AI"] .vr-shape, [data-verdict="AI"] > .vr-shape { background: var(--id-ink) !important; box-shadow: none !important; }
.vr .vr-sure { margin: 12px 0 0 34px !important; font-size: 19px; line-height: 1.4; letter-spacing: -0.016em; color: var(--id-ink-2); }
.vr .vr-note { margin-left: 34px !important; }
.vr .vr-h, .vr .vr-why > h3, .vr .vr-do > h3 { margin: 0 0 12px !important; font: 600 14px/1.3 var(--id-font) !important; letter-spacing: -0.01em !important; color: var(--id-ink) !important; }
.vr .vr-why { margin-top: 32px; }
.vr .vr-why ul { display: grid; gap: 14px; margin-top: 0 !important; }
.vr .vr-why li { padding: 0 0 0 20px; border: 0; font-size: 17px; line-height: 1.45; color: var(--id-ink); }
.vr .vr-why li::before { top: .58em; left: 0; width: 7px; height: 7px; background: #C7C7CC; }
.vr .vr-why li[data-severity="high"]::before { background: var(--id-scam); }
.vr .vr-why li[data-severity="medium"]::before { background: var(--id-caution-light); }
.vr .vr-do { margin: 28px 0 0; padding: 20px 22px; border-radius: 18px; background: var(--id-fill); }
.vr .vr-do h3.vr-h, #v-check .vr .vr-do h3.vr-h, #uc-out .vr .vr-do h3.vr-h { color: var(--id-ink) !important; }
/* On black, caution is the light amber; the dark amber is for white only. */
.hp-dark [data-verdict="CAUTION"] .vr-verdict { color: var(--id-caution-light) !important; }
/* A Watch alert is a raised white card with the red light, not a red outline. */
body .vw-alert, body .vw-alert[data-example="true"] { box-shadow: var(--id-raise); border-radius: var(--id-r-card); }
/* Notices sit on the quiet fill with no outline; amber stays a light (dots, verdict text), never a wash. */
body .ap-note[data-kind="problem"], body .ap-note[data-kind="alert"] { background: var(--id-fill); box-shadow: none; }
body .pg .pg-card.is-note { border-color: transparent; }
body .vw-alert-next { border-radius: var(--id-r-control); background: var(--id-fill); }
.vr .vr-step { font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--id-ink); }
.vr .vr-steps { margin: 10px 0 0; padding-left: 1.1em; color: var(--id-ink-2); line-height: 1.45; }
.vr .vr-acts a { display: inline; min-height: 0; color: var(--id-viper-deep); font-weight: 500; text-decoration: none; line-height: 1.45; }
.vr .vr-acts li { padding: 6px 0; }
.vr .vr-acts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vr .vw-offer:not([hidden]) { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--id-hair); }
.vr .vr-foot { margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--id-hair); font-size: 14px; color: var(--id-mute); }
.vr-do + .vr-foot { border-top: 1px solid var(--id-hair) !important; }
.vr .vr-details summary, .vr .vr-more summary { font-weight: 500; color: var(--id-ink); }
.vr .vr-fb button { font-weight: 500; text-decoration-color: var(--id-line); }
.vr .vr-guard a, .vr .vr-keep a { color: var(--id-viper-deep); font-weight: 500; }
.vr :is(button, a, summary):focus-visible { outline: 2px solid var(--id-viper-deep); outline-offset: 2px; }
/* Wide answers put why and what to do side by side, as the identity's result card does. */
:is(#uc-out, .wd-now, #v-history .hdetail) { container-type: inline-size; }
@container (min-width: 680px) {
  .vr:has(> .vr-why) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .vr:has(> .vr-why) > * { grid-column: 1 / -1; }
  .vr:has(> .vr-why) > .vr-why { grid-column: 1; }
  .vr:has(> .vr-why) > .vr-do { grid-column: 2; margin-top: 32px; }
}
@media (max-width: 640px) {
  .vr { padding: 22px 20px 20px; border-radius: 22px; }
  .vr .vr-verdict { gap: 12px; margin-top: 18px; }
  .vr .vr-shape { width: 14px; height: 14px; }
  .vr .vr-sure, .vr .vr-note { margin-left: 0 !important; font-size: 17px; }
  .vr .vr-do { margin-inline: 0; padding: 18px; }
  .vr .vr-foot, .vr .vw-offer:not([hidden]) { margin-inline: 0; padding-inline: 0; }
}
.vr--compact, .vr--line { padding: 20px 22px; border-radius: var(--id-r-card); }
.vr--compact .vr-verdict, .vr--line .vr-verdict { margin-top: 0; font-size: 22px; gap: 12px; }
.vr--compact .vr-shape, .vr--line .vr-shape { width: 12px; height: 12px; }
.vr-pending { font: 500 15px/1 var(--id-font); color: var(--id-mute); gap: 12px; }
.vr-pending-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--id-viper); box-shadow: 0 0 0 4px rgba(47, 216, 111, .16), 0 0 16px 2px var(--id-viper-glow); }
@media (prefers-reduced-motion: no-preference) { .vr-pending-mark { animation: id-breathe 1.1s var(--ease-in-out, ease-in-out) infinite alternate; } }
@keyframes id-breathe { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: none; } }
.vr.vr-protected { box-shadow: var(--id-surface), 0 0 0 6px var(--glow-protect); }

@media (prefers-reduced-motion: reduce) {
  body .apphead { transition: none; }
}
/* Family: members are rows of one grouped surface, split by straight hairlines. */
#v-family .fam-people :is(.fam-person, .fam-self) { border-radius: 0 !important; }

/* Verified official homepage: the one result shown in green, with a check
   (contract `presentation.state === "verified_official"`). Every other result,
   calm ones included, keeps its verdict's own neutral treatment above. */
.vr[data-tone="verified"] .vr-shape, .vr[data-tone="verified"] > .vr-shape { position: relative; background: var(--id-viper-deep) !important; box-shadow: 0 0 0 6px rgba(11, 122, 62, .12) !important; }
.vr[data-tone="verified"] .vr-shape::after { content: ""; position: absolute; left: 36%; top: 17%; width: 22%; height: 44%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vr[data-tone="verified"] .vr-sure { color: var(--id-viper-deep); font-weight: 600; }
.vr .vr-verified-note { margin-top: 18px; font-size: 15px; line-height: 1.45; color: var(--id-mute); }
.vcard.verified { border-color: color-mix(in srgb, var(--id-viper-deep) 42%, transparent); }
.vcard.verified .vhead .ico, .vcard.verified .vbody > .ico { color: var(--id-viper-deep); stroke: var(--id-viper-deep); }
.vcard.verified .vsub { color: var(--id-viper-deep); font-weight: 600; }
.vcard .vnote { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--id-mute); }