.skip-nav {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 9999;
    padding: 8px 16px;
    /* Fixed green (not the theme var): white text needs the dark shade in BOTH themes */
    background: #17804a;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.1s;
}
.skip-nav:focus {
    top: 0;
}

/* Top "Your IP" utility bar — surfaces the visitor's public IP at the top of every page with a
   one-tap copy button. Hidden until the IP is fetched (best-effort, client-side). Theme-aware. */
.ip-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .3rem 1rem;
    font-size: .82rem;
    background: var(--safecheck-bg-soft);
    border-bottom: 1px solid var(--safecheck-border);
    color: var(--safecheck-muted);
}
.ip-bar-label { white-space: nowrap; }
.ip-bar-value {
    font-weight: 600;
    color: var(--safecheck-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    word-break: break-all;
}
.ip-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--safecheck-border);
    border-radius: 7px;
    background: transparent;
    color: var(--safecheck-muted);
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.ip-copy:hover { color: var(--cactus-accent); border-color: var(--cactus-accent); }
.ip-copy svg { width: 15px; height: 15px; }
.ip-copied { color: var(--cactus-accent); font-weight: 600; white-space: nowrap; }

/* Global, on-brand keyboard focus for every interactive element (nav links, both dropdown
   toggles + items, the EN|FR switcher, theme toggle, FAQ summaries, footer links, cards).
   Pointer/click and programmatic focus stay ring-free; only keyboard focus shows the outline. */
:focus-visible {
    outline: 2px solid var(--cactus-accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* Respect reduced-motion: neutralize the busy spinner, card lifts, and skip-nav slide. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Buttons/inputs use the global focus-visible outline above; don't stack Bootstrap's glow. */
.btn:focus-visible, .form-control:focus-visible, .form-check-input:focus-visible {
  box-shadow: none;
}

/* (Old sticky-footer scaffolding removed; the footer is now in normal document flow.) */

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Language switcher in the nav */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    font-size: 0.85rem;
    font-weight: 800;
}

.language-switcher .lang-link {
    color: var(--safecheck-muted, #6b7280);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
}

.language-switcher .lang-link:hover {
    color: var(--safecheck-text, #111827);
    background: var(--safecheck-code-bg);
}

.language-switcher .lang-link.active {
    color: var(--safecheck-text, #111827);
    background: #e5e7eb;
}

.language-switcher .lang-sep {
    color: #d1d5db;
}

/* Cactus shared design tokens */
:root {
    /* Muted/link/code/accent-strong values are tuned for >=4.5:1 (WCAG AA) against the
       #eef1f4 body — the soft-gray background eats the margin Bootstrap's defaults
       were designed with for pure white (axe audit 2026-06-11). */
    --safecheck-muted: #5d6674;
    --safecheck-border: #e5e7eb;
    --safecheck-bg-soft: #f6f7f9;
    --safecheck-text: #111827;
    --safecheck-surface: #ffffff;
    --safecheck-surface-alt: #fbfdff;
    --safecheck-code-bg: #f3f4f6;
    --safecheck-link: #0066b3;
    --bs-link-color: #0a58ca;
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
    --bs-code-color: #c02670;

    /* Light mode page background: a soft cool gray instead of Bootstrap's pure white,
       so the white cards read as gentle elevation rather than white-on-white glare. */
    --bs-body-bg: #eef1f4;
    --bs-body-color: var(--safecheck-text);

    /* Cactus brand accent (green) + elevation + radius scale */
    --cactus-accent: #1f9d57;
    --cactus-accent-strong: #146e40;
    --cactus-accent-soft: #e8f6ee;
    --cactus-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --cactus-shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
    --cactus-shadow-lg: 0 14px 36px rgba(16, 24, 40, .14);
    --cactus-radius: 14px;
    --cactus-radius-sm: 10px;

    /* Re-point Bootstrap's primary at the cactus green so buttons/links follow the brand */
    --bs-primary: #1f9d57;
    --bs-primary-rgb: 31, 157, 87;

    /* Verdict/risk scale - one source of truth so the score circle, the per-link pills and
       the TLS grade all use the SAME colour for a given band. Previously 'low' was blue in
       one component and olive-green in two others, and 'high'/'critical' also diverged. */
    --verdict-safe: #16a34a;
    --verdict-low: #65a30d;
    --verdict-suspicious: #d97706;
    --verdict-high: #ea580c;
    --verdict-critical: #dc2626;

    /* RGB triplets of the above, for rgba() tints (e.g. risk-band backgrounds) without
       repeating literal channel values. Keep in sync with the hex tokens. */
    --verdict-safe-rgb: 22, 163, 74;
    --verdict-suspicious-rgb: 217, 119, 6;
    --verdict-critical-rgb: 220, 38, 38;

    /* Text-on-tint for warning surfaces (the amber --verdict-suspicious is fine as a fill but
       too light for small text on a pale tint; this darker amber keeps WCAG contrast). */
    --warn-text: #92400e;
}

/* WCAG contrast: white text on the brand green #1f9d57 is only ~3.6:1. Use the darker brand
   green for solid button fills (white text -> ~5.3:1) in both themes, and the theme-aware
   strong green for outline-button text (which sits on the page, not on a green fill). */
.btn-primary {
    --bs-btn-bg: #17804a;
    --bs-btn-border-color: #17804a;
    --bs-btn-hover-bg: #136138;
    --bs-btn-hover-border-color: #136138;
    --bs-btn-active-bg: #136138;
    --bs-btn-active-border-color: #136138;
    --bs-btn-disabled-bg: #17804a;
    --bs-btn-disabled-border-color: #17804a;
}

.btn-outline-primary {
    --bs-btn-color: var(--cactus-accent-strong);
    --bs-btn-border-color: var(--cactus-accent-strong);
    --bs-btn-hover-bg: #17804a;
    --bs-btn-hover-border-color: #17804a;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #17804a;
    --bs-btn-active-border-color: #17804a;
    --bs-btn-active-color: #fff;
}

/* Bootstrap's stock outline grays/colors miss 4.5:1 on our soft surfaces (axe audit):
   secondary gray fails in both themes; danger/success fail on dark cards (quiz). */
.btn-outline-secondary {
    --bs-btn-color: #5a6268;
    --bs-btn-border-color: #5a6268;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #9aa4b2;
    --bs-btn-border-color: #9aa4b2;
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #ea868f;
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #75b798;
    --bs-btn-border-color: #75b798;
}

/* Cactus result UI polish */
.input-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.form-hint {
    color: var(--safecheck-muted);
    font-size: 0.95rem;
    margin-top: 12px;
    margin-bottom: 0;
}

.privacy-notice {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    color: #1e3a8a;
    font-size: 0.95rem;
}

.privacy-notice-title {
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #1e40af;
}

.privacy-notice ul {
    margin: 0;
    padding-left: 18px;
}

.privacy-notice li + li {
    margin-top: 6px;
}

.privacy-notice code {
    background: #dbeafe;
    color: #1e3a8a;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Tool page heading merged into the checker card (input-first layout) */
.checker-head {
    margin-bottom: 1.25rem;
}

.checker-head h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.checker-head .hero-copy {
    margin-bottom: 0;
}

/* Collapsible "Technical details" on the result card (open for risky verdicts) */
.tech-details {
    margin: 18px 0;
}

.tech-details > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--safecheck-muted);
    padding: 8px 0;
    list-style-position: inside;
}

.tech-details[open] > summary {
    margin-bottom: 8px;
}

/* Privacy notice collapsed by default; full detail on demand */
.privacy-notice-collapsible {
    margin-bottom: 1.25rem;
}

.privacy-notice-collapsible > summary {
    cursor: pointer;
    list-style-position: inside;
}

.privacy-notice-collapsible:not([open]) > summary {
    margin-bottom: 0;
}

.analyzed-target {
    margin: 18px 0;
    border: 1px solid var(--safecheck-border, #e5e7eb);
    background: var(--safecheck-bg-soft);
    border-radius: 12px;
    padding: 14px 18px;
}

.analyzed-target .eyebrow {
    margin-bottom: 8px;
}

.analyzed-target dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}

.analyzed-target dl > div {
    display: contents;
}

.analyzed-target dt {
    font-weight: 600;
    color: #374151;
}

.analyzed-target dd {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.analyzed-target code {
    background: #e5e7eb;
    color: #111827;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.95rem;
}

.analyzed-target-hint {
    margin: 10px 0 0 0;
    font-size: 0.9rem;
    color: #4b5563;
}

.analyzed-target-hint code {
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .analyzed-target dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .analyzed-target dl > div {
        display: block;
        margin-bottom: 6px;
    }
}

/* Container cards for the input form and the result, matching the homepage cards. */
.checker-card,
.result-card {
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-md);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
}

.result-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    border-bottom: 1px solid var(--safecheck-border);
    padding-bottom: 24px;
    margin-bottom: 18px;
}

.result-header h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    margin: 0;
}

.score-panel {
    text-align: center;
}

.score-panel p {
    color: var(--safecheck-muted);
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 0;
}

.score-circle {
    width: 132px;
    height: 132px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 8px solid currentColor;
    background: var(--safecheck-surface);
}

.score-circle span {
    font-size: 2rem;
    font-weight: 900;
}

.score-meter {
    width: 100%;
    height: 14px;
    background: var(--safecheck-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 22px;
}

.score-meter-fill {
    height: 100%;
    border-radius: 999px;
}

.verdict-bg-safe {
    background: var(--verdict-safe);
}

.verdict-bg-low {
    background: var(--verdict-low);
}

.verdict-bg-suspicious {
    background: var(--verdict-suspicious);
}

.verdict-bg-high {
    background: var(--verdict-high);
}

.verdict-bg-critical {
    background: var(--verdict-critical);
}

.result-sections {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.finding-section {
    border: 1px solid var(--safecheck-border);
    border-radius: 18px;
    padding: 22px;
    background: var(--safecheck-surface-alt);
}

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-heading-row h3 {
    font-size: 1.35rem;
    font-weight: 900;
    margin: 0;
}

.count-pill {
    border: 1px solid var(--safecheck-border);
    background: var(--safecheck-surface);
    color: var(--safecheck-muted);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 0.85rem;
    white-space: nowrap;
}

.finding-source {
    color: var(--safecheck-muted);
    font-weight: 600;
    font-size: 0.85rem;
    margin-left: 4px;
}

.finding-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.severity-pill {
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 800;
    font-size: 0.75rem;
}

.severity-info {
    background: #dbeafe;
    color: #1e40af;
}

.severity-low {
    background: #fef9c3;
    color: #854d0e;
}

.severity-medium {
    background: #ffedd5;
    color: #9a3412;
}

.severity-high {
    background: #fee2e2;
    color: #991b1b;
}

.severity-critical {
    background: #7f1d1d;
    color: #ffffff;
}

.score-impact {
    align-self: center;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--safecheck-border);
    color: #111827;
    padding: 6px 10px;
    font-weight: 900;
    min-width: 48px;
    text-align: center;
}

.empty-intel {
    background: var(--safecheck-surface);
    border: 1px dashed var(--safecheck-border);
    border-radius: 14px;
    padding: 16px;
    color: var(--safecheck-muted);
}

.form-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.headers-disclosure {
    margin-top: 14px;
    border: 1px solid var(--safecheck-border);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--safecheck-bg-soft);
}

.headers-disclosure[open] {
    background: var(--safecheck-surface);
}

.headers-disclosure summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--safecheck-text);
    padding: 4px 0;
}

.headers-help {
    margin: 10px 0;
    color: var(--safecheck-muted);
    font-size: 0.9rem;
}

.headers-help code {
    background: var(--safecheck-code-bg);
    color: var(--safecheck-text);
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.headers-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0 0 14px 0;
}

.headers-grid > div {
    display: contents;
}

.headers-grid dt {
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

.headers-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.headers-grid code {
    background: var(--safecheck-code-bg);
    color: var(--safecheck-text);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.header-display-name {
    font-weight: 700;
    margin-right: 6px;
}

.auth-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 6px 0;
}

.auth-pill {
    font-weight: 800;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #1f2937;
}

.auth-pill.auth-pass,
.auth-pill.auth-bestguesspass {
    background: #d1fae5;
    color: #065f46;
}

.auth-pill.auth-fail {
    background: #fee2e2;
    color: #991b1b;
}

.auth-pill.auth-softfail,
.auth-pill.auth-neutral,
.auth-pill.auth-policy {
    background: #fef9c3;
    color: #854d0e;
}

.auth-pill.auth-none,
.auth-pill.auth-temperror,
.auth-pill.auth-permerror {
    background: #e5e7eb;
    color: #4b5563;
}

@media (max-width: 600px) {
    .headers-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .headers-grid > div {
        display: block;
        margin-bottom: 6px;
    }
}

textarea.form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
}

.email-url-list {
    display: grid;
    gap: 14px;
}

.email-url-card {
    border: 1px solid var(--safecheck-border);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--safecheck-surface);
}

.email-url-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.email-url-input code {
    background: var(--safecheck-code-bg);
    color: #111827;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}

.email-url-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.score-pill {
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 900;
    color: #ffffff;
    background: #6b7280;
}

.score-pill.verdict-safe { background: var(--verdict-safe); }
.score-pill.verdict-low { background: var(--verdict-low); }
.score-pill.verdict-suspicious { background: var(--verdict-suspicious); }
.score-pill.verdict-high { background: var(--verdict-high); }
.score-pill.verdict-critical { background: var(--verdict-critical); }

.email-url-verdict {
    font-size: 0.85rem;
    color: var(--safecheck-muted, #6b7280);
    font-weight: 600;
}

.email-url-analyzed {
    margin: 10px 0 0 0;
    color: var(--safecheck-muted, #6b7280);
    font-size: 0.9rem;
}

.email-url-analyzed code {
    background: var(--safecheck-code-bg);
    color: #111827;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.email-url-domain-age {
    margin: 6px 0 0 0;
    color: var(--safecheck-muted);
    font-size: 0.85rem;
}

.email-url-domain-age .email-url-registrar {
    opacity: 0.85;
}

.email-url-findings {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.email-url-findings li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.email-url-empty {
    margin: 10px 0 0 0;
    color: var(--safecheck-muted, #6b7280);
    font-size: 0.9rem;
    font-style: italic;
}

.email-url-truncated {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--safecheck-muted, #6b7280);
}

.safety-note {
    margin-top: 24px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 16px;
    padding: 18px;
}

.safety-note p {
    color: #92400e;
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .input-action-row {
        grid-template-columns: 1fr;
    }

    .result-header {
        grid-template-columns: 1fr;
    }

    .score-panel {
        text-align: left;
    }

    .score-circle {
        width: 112px;
        height: 112px;
    }
}

.privacy-page h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-top: 24px;
    margin-bottom: 8px;
}

.privacy-page h2:first-of-type {
    margin-top: 8px;
}

.privacy-page ul {
    padding-left: 22px;
}

.privacy-page li + li {
    margin-top: 6px;
}

.privacy-page code {
    background: var(--safecheck-bg-soft);
    color: var(--safecheck-text);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.api-docs h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-top: 28px;
    margin-bottom: 8px;
}

.api-docs h2:first-of-type {
    margin-top: 8px;
}

.api-docs h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: 18px;
    margin-bottom: 6px;
    color: var(--safecheck-text);
}

.api-docs h3 code {
    background: #1f2937;
    color: #f9fafb;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.95rem;
}

.api-docs code {
    background: var(--safecheck-bg-soft);
    color: var(--safecheck-text);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.api-docs pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

.api-docs pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.api-docs ul {
    padding-left: 22px;
}

.api-docs li + li {
    margin-top: 6px;
}

.privacy-updated {
    margin-top: 24px;
    color: var(--safecheck-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.domain-age {
    margin: 18px 0;
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid var(--safecheck-border);
    background: var(--safecheck-bg-soft);
}

.domain-age .eyebrow {
    margin-bottom: 8px;
}

.domain-age-headline {
    margin: 0;
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.domain-age-headline code {
    background: var(--safecheck-surface);
    color: var(--safecheck-text);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.95rem;
    border: 1px solid var(--safecheck-border);
}

.domain-age-headline span {
    font-weight: 700;
}

.domain-age-meta {
    color: var(--safecheck-muted);
    font-size: 0.9rem;
}

.domain-age-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 16px;
    margin: 10px 0 0 0;
    font-size: 0.9rem;
}

.domain-age-details > div {
    display: contents;
}

.domain-age-details dt {
    font-weight: 600;
    opacity: 0.7;
    white-space: nowrap;
}

.domain-age-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 600px) {
    .domain-age-details {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .domain-age-details > div {
        display: block;
        margin-bottom: 6px;
    }
}

.domain-age-very-new {
    background: #fee2e2;
    border-color: #fecaca;
}

.domain-age-very-new .domain-age-headline span,
.domain-age-very-new .domain-age-meta {
    color: #991b1b;
}

.domain-age-new {
    background: #ffedd5;
    border-color: #fed7aa;
}

.domain-age-new .domain-age-headline span,
.domain-age-new .domain-age-meta {
    color: #9a3412;
}

.domain-age-young {
    background: #fef9c3;
    border-color: #fde68a;
}

.domain-age-young .domain-age-headline span,
.domain-age-young .domain-age-meta {
    color: #854d0e;
}

.domain-age-recent {
    background: var(--safecheck-code-bg);
    border-color: var(--safecheck-border);
}

.domain-age-recent .domain-age-headline span,
.domain-age-recent .domain-age-meta {
    color: #374151;
}

.domain-age-established {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.domain-age-established .domain-age-headline span,
.domain-age-established .domain-age-meta {
    color: #065f46;
}

.redirect-chain {
    margin: 18px 0;
    border: 1px solid var(--safecheck-border);
    background: var(--safecheck-surface);
    border-radius: 12px;
    padding: 14px 18px;
}

.redirect-chain .eyebrow {
    margin-bottom: 10px;
}

.redirect-hop-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.redirect-hop {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid var(--safecheck-border);
    border-radius: 8px;
    background: var(--safecheck-bg-soft);
}

.redirect-hop-final {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.redirect-hop-index {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #1f2937;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 800;
}

.redirect-hop-final .redirect-hop-index {
    background: #047857;
}

.redirect-hop-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.redirect-hop-url {
    background: var(--safecheck-surface);
    color: var(--safecheck-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    word-break: break-all;
    border: 1px solid var(--safecheck-border);
}

.redirect-hop-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.scheme-pill {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}

.scheme-pill.scheme-secure {
    background: #d1fae5;
    color: #065f46;
}

.scheme-pill.scheme-insecure {
    background: #fee2e2;
    color: #991b1b;
}

.status-pill {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
}

.redirect-chain-error {
    margin: 10px 0 0 0;
    color: #92400e;
    font-size: 0.9rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
}

.redirect-chain-empty {
    margin: 0;
    color: var(--safecheck-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.qr-message {
    margin-top: 20px;
    border-radius: 12px;
    padding: 14px 18px;
}

.qr-error {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.qr-decoded {
    background: var(--safecheck-bg-soft);
    border: 1px solid var(--safecheck-border);
}

.qr-decoded .eyebrow {
    margin-bottom: 6px;
}

.qr-decoded-content {
    background: #1f2937;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 10px 0 0 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.qr-decoded-content code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.share-result {
    margin-top: 20px;
    padding: 14px 18px;
    border: 1px solid var(--safecheck-border);
    border-radius: 12px;
    background: var(--safecheck-bg-soft);
}

.share-label {
    font-weight: 700;
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

.share-url-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.share-url-input {
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--safecheck-muted);
    background: var(--safecheck-surface);
}

@media (max-width: 600px) {
    .share-url-row {
        grid-template-columns: 1fr;
    }
}

.share-friend {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--safecheck-border);
}

.share-friend-hint {
    margin: 8px 0 0 0;
    font-size: 0.85rem;
    color: var(--safecheck-muted);
}

.feedback-widget {
    margin-top: 16px;
    padding: 14px 18px;
    border: 1px solid var(--safecheck-border);
    border-radius: 12px;
    background: var(--safecheck-bg-soft);
}

.feedback-question {
    font-weight: 700;
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

.feedback-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.feedback-btn {
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--safecheck-border);
    background: var(--safecheck-surface);
    cursor: pointer;
    font-weight: 600;
    color: var(--safecheck-text);
}

.feedback-btn:hover {
    background: var(--safecheck-code-bg);
    border-color: #9ca3af;
}

.feedback-comment {
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.feedback-thanks {
    color: #065f46;
    font-weight: 700;
    margin: 0;
    font-size: 0.95rem;
}

.batch-table-wrapper {
    overflow-x: auto;
    margin-top: 16px;
}

.batch-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.batch-results-table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--safecheck-border);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--safecheck-muted);
    white-space: nowrap;
}

.batch-results-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--safecheck-border);
    vertical-align: middle;
}

.batch-results-table tr:last-child td {
    border-bottom: none;
}

.batch-url-cell {
    max-width: 240px;
}

.batch-url-cell code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.batch-finding-title {
    font-size: 0.85rem;
    margin-left: 6px;
}

.batch-no-finding {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    font-style: italic;
}

.batch-col-details {
    width: 1%;
    white-space: nowrap;
}

.batch-details-link {
    font-size: 0.8rem;
    white-space: nowrap;
}

.batch-truncated-notice {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    font-style: italic;
}

/* ── QR camera capture ───────────────────────────────────────────────── */

.input-or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--safecheck-muted);
    font-size: 0.9rem;
}

.input-or-divider::before,
.input-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--safecheck-border);
}

.qr-camera-start-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.qr-camera-video {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    display: block;
    margin-top: 16px;
    background: #000;
}

.qr-camera-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

.code-block {
    position: relative;
}

.code-block pre {
    padding-top: 36px;
}

.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 10px;
    font-size: 0.75rem;
    background: var(--safecheck-bg-soft);
    border: 1px solid var(--safecheck-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--safecheck-muted);
    line-height: 1.5;
    z-index: 1;
}

.code-copy-btn:hover {
    background: var(--safecheck-border);
    color: inherit;
}

.api-try-it {
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--safecheck-bg-soft);
    border: 1px solid var(--safecheck-border);
    border-radius: 12px;
}

.api-try-it h2 {
    margin-top: 0;
}

.api-try-it pre {
    margin-top: 16px;
    max-height: 420px;
    overflow-y: auto;
}

/* ── Scan history (Index page) ─────────────────────────────────────────── */

#scan-history {
    margin-top: 32px;
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.history-header .eyebrow {
    margin: 0;
}

.history-list {
    display: grid;
    gap: 8px;
}

.history-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--safecheck-border);
    border-radius: 10px;
    background: var(--safecheck-surface);
}

.history-type-pill {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.history-type-url {
    background: #dbeafe;
    color: #1e40af;
}

.history-type-email {
    background: #ede9fe;
    color: #4c1d95;
}

.history-entry-input {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--safecheck-text);
}

.history-entry-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.history-entry-date {
    font-size: 0.8rem;
    color: var(--safecheck-muted);
    white-space: nowrap;
}

.history-view-link {
    font-size: 0.8rem;
    white-space: nowrap;
}

.history-clear-btn {
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .history-entry-date {
        display: none;
    }
}

.shared-banner {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--safecheck-bg-soft);
    border: 1px solid var(--safecheck-border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--safecheck-muted);
    margin-bottom: 16px;
}

/* ── Theme (light/dark) ────────────────────────────────────────────────── */

.navbar {
    background-color: var(--safecheck-surface);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    margin-left: 10px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--safecheck-border);
    border-radius: 6px;
    color: var(--safecheck-muted);
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--safecheck-text);
    border-color: var(--safecheck-muted);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
}

.theme-toggle .icon-sun {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-bs-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* Buy Me a Coffee button — brand yellow, stays the same in light and dark (it's a
   recognizable brand color). Inline SVG cup keeps it within the CSP (no external
   image or widget script). */
.bmc-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 5px 12px;
    background: transparent;
    color: var(--cactus-accent);
    border: 1px solid var(--cactus-accent);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.bmc-button:hover,
.bmc-button:focus {
    color: var(--cactus-accent-strong);
    background: var(--cactus-accent-soft);
    text-decoration: none;
    transform: translateY(-1px);
}

.bmc-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Homepage FAQ accordion (native <details>, no JS). */
.faq-section {
    margin-top: 2.5rem;
}

.faq-section h2 {
    margin-bottom: 1rem;
}

.faq-item {
    border: 1px solid var(--safecheck-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}

.faq-item > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--safecheck-text);
    list-style: none;
}

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

.faq-item > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    color: var(--safecheck-muted);
}

.faq-item[open] > summary::after {
    content: "\2013";
}

.faq-item > p {
    margin: 0.6rem 0 0;
    color: var(--safecheck-muted);
}

/* Collapsed navbar (below the lg breakpoint): stack the donate button, language
   switcher, and theme toggle left-aligned so nothing overflows off-screen on mobile. */
@media (max-width: 991.98px) {
    .navbar-collapse .bmc-button {
        margin: 0.6rem 0 0.25rem;
        width: -moz-fit-content;
        width: fit-content;
    }

    .navbar-collapse .language-switcher {
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .navbar-collapse .theme-toggle {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    /* Comfortable tap targets + visible grouping when the menu is stacked on touch. */
    .navbar-collapse .dropdown-item {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1.25rem;
    }

    .navbar-collapse .dropdown-header {
        padding-left: 0.75rem;
    }
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    --safecheck-text: #e2e8f0;
    --safecheck-muted: #94a3b8;
    --safecheck-border: #334155;
    --safecheck-bg-soft: #172033;
    --safecheck-surface: #1e293b;
    --safecheck-surface-alt: #172033;
    --safecheck-code-bg: #0b1220;
    --safecheck-link: #6ea8fe;
    /* Re-assert Bootstrap's dark link/code colors: our :root AA overrides above are
       declared after Bootstrap's [data-bs-theme="dark"] block and would bleed in here. */
    --bs-link-color: #6ea8fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;

    /* Brighter green reads better on the dark surface; soft tint goes translucent.
       accent-strong matches accent here: #10b981 missed 4.5:1 on the soft tint. */
    --cactus-accent: #34d399;
    --cactus-accent-strong: #34d399;
    --cactus-accent-soft: rgba(52, 211, 153, .14);
    --cactus-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --cactus-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --cactus-shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);

    /* Brighter amber for warning-surface text on dark tints. */
    --warn-text: #fbbf24;
}

/* Language switcher hovers */
[data-bs-theme="dark"] .language-switcher .lang-link:hover,
[data-bs-theme="dark"] .language-switcher .lang-link.active {
    background: #334155;
}

[data-bs-theme="dark"] .language-switcher .lang-sep {
    color: #475569;
}

/* Neutral structural text/surfaces */
[data-bs-theme="dark"] .analyzed-target dt,
[data-bs-theme="dark"] .headers-grid dt {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .analyzed-target-hint {
    color: #94a3b8;
}

[data-bs-theme="dark"] .analyzed-target code {
    background: #0b1220;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .email-url-input code,
[data-bs-theme="dark"] .email-url-analyzed code {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .score-impact {
    background: #1e293b;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .score-meter {
    background: #334155;
}

[data-bs-theme="dark"] .feedback-thanks {
    color: #6ee7b7;
}

/* Privacy notice (blue) */
[data-bs-theme="dark"] .privacy-notice {
    background: #172554;
    border-color: #1e3a8a;
    color: #bfdbfe;
}

[data-bs-theme="dark"] .privacy-notice-title {
    color: #93c5fd;
}

[data-bs-theme="dark"] .privacy-notice code {
    background: #1e3a8a;
    color: #dbeafe;
}

/* Severity pills */
[data-bs-theme="dark"] .severity-info {
    background: #172554;
    color: #93c5fd;
}

[data-bs-theme="dark"] .severity-low {
    background: #2e2410;
    color: #fde047;
}

[data-bs-theme="dark"] .severity-medium {
    background: #3a1d09;
    color: #fdba74;
}

[data-bs-theme="dark"] .severity-high {
    background: #3f1212;
    color: #fca5a5;
}

/* Auth pills */
[data-bs-theme="dark"] .auth-pill {
    background: #334155;
    color: #cbd5e1;
}

[data-bs-theme="dark"] .auth-pill.auth-pass,
[data-bs-theme="dark"] .auth-pill.auth-bestguesspass {
    background: #0c2e22;
    color: #6ee7b7;
}

[data-bs-theme="dark"] .auth-pill.auth-fail {
    background: #3f1212;
    color: #fca5a5;
}

[data-bs-theme="dark"] .auth-pill.auth-softfail,
[data-bs-theme="dark"] .auth-pill.auth-neutral,
[data-bs-theme="dark"] .auth-pill.auth-policy {
    background: #2e2410;
    color: #fde047;
}

[data-bs-theme="dark"] .auth-pill.auth-none,
[data-bs-theme="dark"] .auth-pill.auth-temperror,
[data-bs-theme="dark"] .auth-pill.auth-permerror {
    background: #334155;
    color: #94a3b8;
}

/* Scheme + status pills */
[data-bs-theme="dark"] .scheme-pill.scheme-secure {
    background: #0c2e22;
    color: #6ee7b7;
}

[data-bs-theme="dark"] .scheme-pill.scheme-insecure {
    background: #3f1212;
    color: #fca5a5;
}

[data-bs-theme="dark"] .status-pill {
    background: #1e1b4b;
    color: #a5b4fc;
}

/* Safety note + errors (amber) */
[data-bs-theme="dark"] .safety-note {
    background: #2e2410;
    border-color: #92400e;
}

[data-bs-theme="dark"] .safety-note p {
    color: #fcd34d;
}

[data-bs-theme="dark"] .redirect-chain-error {
    background: #2e2410;
    border-color: #92400e;
    color: #fcd34d;
}

[data-bs-theme="dark"] .qr-error {
    background: #3a1d09;
    border-color: #9a3412;
    color: #fdba74;
}

[data-bs-theme="dark"] .redirect-hop-final {
    background: #0c2e22;
    border-color: #065f46;
}

/* Domain-age bands */
[data-bs-theme="dark"] .domain-age-very-new {
    background: #3f1212;
    border-color: #991b1b;
}

[data-bs-theme="dark"] .domain-age-very-new .domain-age-headline span,
[data-bs-theme="dark"] .domain-age-very-new .domain-age-meta {
    color: #fca5a5;
}

[data-bs-theme="dark"] .domain-age-new {
    background: #3a1d09;
    border-color: #9a3412;
}

[data-bs-theme="dark"] .domain-age-new .domain-age-headline span,
[data-bs-theme="dark"] .domain-age-new .domain-age-meta {
    color: #fdba74;
}

[data-bs-theme="dark"] .domain-age-young {
    background: #2e2410;
    border-color: #854d0e;
}

[data-bs-theme="dark"] .domain-age-young .domain-age-headline span,
[data-bs-theme="dark"] .domain-age-young .domain-age-meta {
    color: #fde047;
}

[data-bs-theme="dark"] .domain-age-recent {
    background: #1e293b;
    border-color: #334155;
}

[data-bs-theme="dark"] .domain-age-recent .domain-age-headline span,
[data-bs-theme="dark"] .domain-age-recent .domain-age-meta {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .domain-age-established {
    background: #0c2e22;
    border-color: #065f46;
}

[data-bs-theme="dark"] .domain-age-established .domain-age-headline span,
[data-bs-theme="dark"] .domain-age-established .domain-age-meta {
    color: #6ee7b7;
}

/* History type pills */
[data-bs-theme="dark"] .history-type-url {
    background: #172554;
    color: #93c5fd;
}

[data-bs-theme="dark"] .history-type-email {
    background: #2e1065;
    color: #c4b5fd;
}

/* ── SSL/TLS checker ───────────────────────────────────────────────────── */

/* The verdict ring is drawn with `border: 8px solid currentColor`, so the score circle only
   takes on its verdict colour if something sets `color`. These rules key off .score-circle
   (not .tls-grade-circle) because /CheckUrl and /CheckEmail — the two most-used tools — emit
   the circle WITHOUT the tls class, so their ring rendered body-coloured and a score of 8
   looked identical to a 92. Keying off the shared class covers every page that draws one. */
.score-circle.verdict-safe { color: var(--verdict-safe); }
.score-circle.verdict-low { color: var(--verdict-low); }
.score-circle.verdict-suspicious { color: var(--verdict-suspicious); }
.score-circle.verdict-high { color: var(--verdict-high); }
.score-circle.verdict-critical { color: var(--verdict-critical); }
.score-circle.verdict-unknown { color: var(--safecheck-muted); }

.tls-grade-circle span {
    font-size: 2.6rem;
    letter-spacing: -1px;
}

.tls-grade-circle-sm {
    width: 64px;
    height: 64px;
    border-width: 5px;
    flex-shrink: 0;
}

.tls-grade-circle-sm span {
    font-size: 1.5rem;
}

.tls-grade-notes {
    margin: 16px 0 0 0;
    padding: 14px 18px;
    border: 1px solid var(--safecheck-border);
    border-radius: 12px;
    background: var(--safecheck-bg-soft);
}

.tls-grade-notes ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.tls-grade-notes li + li {
    margin-top: 4px;
}

.tls-flag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
}

.tls-flag-good { background: #d1fae5; color: #065f46; }
.tls-flag-warn { background: #fef9c3; color: #854d0e; }
.tls-flag-bad { background: #fee2e2; color: #991b1b; }
.tls-flag-neutral { background: #e5e7eb; color: #374151; }

/* ── Spot-the-Scam quiz ─────────────────────────────────────────────────── */

.quiz-progress {
    font-weight: 700;
    color: var(--safecheck-muted);
    margin-bottom: 0.75rem;
}

.quiz-context {
    color: var(--safecheck-muted);
    margin-bottom: 0.5rem;
}

.quiz-message {
    border: 1px solid var(--safecheck-border);
    border-left: 4px solid var(--cactus-accent);
    background: var(--safecheck-bg-soft);
    border-radius: var(--cactus-radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.quiz-message p { margin: 0; }

.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.quiz-choice-answer {
    outline: 3px solid var(--cactus-accent);
    outline-offset: 1px;
}

.quiz-feedback {
    border-top: 1px solid var(--safecheck-border);
    padding-top: 1rem;
}

.quiz-feedback-headline {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.quiz-correct { color: #16a34a; }
.quiz-wrong { color: #dc2626; }

.quiz-feedback-explanation {
    margin-bottom: 1rem;
}

.quiz-results .quiz-score {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    margin: 0 0 0.5rem;
}

.quiz-band {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
}

.quiz-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Drop zone for local (in-browser) file hashing on /CheckHash */
.hash-dropzone {
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border: 2px dashed var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
    background: var(--safecheck-bg-soft);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.hash-dropzone:hover,
.hash-dropzone:focus-visible,
.hash-dropzone-active {
    border-color: var(--cactus-accent);
    background: var(--cactus-accent-soft);
}

.hash-dropzone-title {
    margin: 0;
    font-weight: 700;
}

.hash-dropzone-sub {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--safecheck-muted);
}

.hash-dropzone-status {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cactus-accent-strong);
    overflow-wrap: anywhere;
}

/* Decoded non-URL QR payload (Wi-Fi join, dial, crypto, …) with a tailored warning */
.qr-payload {
    margin: 0.5rem 0 0.75rem;
}

.qr-payload-warning {
    margin: 0.5rem 0 0;
    font-weight: 600;
}

.qr-payload-high .qr-payload-warning { color: #dc2626; }
.qr-payload-warn .qr-payload-warning { color: #d97706; }

.tls-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.tls-chain li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--safecheck-border);
    border-radius: 8px;
    background: var(--safecheck-bg-soft);
}

.tls-chain-role {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--safecheck-muted);
    white-space: nowrap;
    min-width: 88px;
}

.tls-chain-subject {
    overflow-wrap: anywhere;
}

.tls-fingerprint {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
    word-break: break-all;
}

[data-bs-theme="dark"] .tls-flag { background: #334155; color: #cbd5e1; }
[data-bs-theme="dark"] .tls-flag-good { background: #0c2e22; color: #6ee7b7; }
[data-bs-theme="dark"] .tls-flag-warn { background: #2e2410; color: #fde047; }
[data-bs-theme="dark"] .tls-flag-bad { background: #3f1212; color: #fca5a5; }
[data-bs-theme="dark"] .tls-flag-neutral { background: #334155; color: #cbd5e1; }

/* ── Email authentication (SPF/DKIM/DMARC) ─────────────────────────────── */

.email-auth-record {
    margin: 12px 0 0 0;
}

.email-auth-record code {
    display: block;
    background: var(--safecheck-code-bg);
    color: var(--safecheck-text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.email-auth-empty {
    margin: 10px 0 0 0;
    color: var(--safecheck-muted);
    font-size: 0.9rem;
}

/* ============================================================
   Homepage refresh (Slice 1): hero, tool-card grid, info grid.
   All token-driven, so light/dark follow the theme variables.
   ============================================================ */
.brand-logo {
    width: 28px;
    height: 28px;
    color: var(--cactus-accent);
    flex: 0 0 auto;
    /* Lets the bloom escape the 24x24 viewBox as it grows on hover - without this,
       anything past ~1.25x gets clipped at the top edge. */
    overflow: visible;
}

/* The little pink flower on the cactus logo gives a quiet pop of colour, and
   blooms a touch bigger when you hover the wordmark — a small wink on an
   otherwise serious security site. */
.brand-bloom {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s ease;
}

.navbar-brand:hover .brand-bloom,
.footer-wordmark:hover .brand-bloom {
    transform: scale(1.55);
}

@media (prefers-reduced-motion: reduce) {
    .brand-bloom {
        transition: none;
    }
}

.navbar .dropdown-menu {
    border-radius: var(--cactus-radius-sm);
    border-color: var(--safecheck-border);
    box-shadow: var(--cactus-shadow-md);
}

/* ===== Redesigned primary nav: search pill · Tools mega-menu · Learn · Get help ===== */

/* "Check or ask…" pill → the /Start smart box. Degrades to just the icon on tight widths. */
/* A real search box in the bar: type a link/message/question and Enter routes you to the
   right tool via /Dispatch (the same HeroRouter the homepage uses). POSTs, so raw input
   never lands in a URL or access log — only safe artifacts reach the redirect target. */
.nav-search-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 15rem;
    padding: 0.2rem 0.5rem 0.2rem 0.35rem;
    border: 1px solid var(--safecheck-border);
    border-radius: 999px;
    background: var(--safecheck-bg-soft);
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.nav-search-form:focus-within {
    border-color: var(--cactus-accent);
    background: var(--safecheck-surface);
    box-shadow: 0 0 0 3px var(--cactus-accent-soft);
}
.nav-search-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0.15rem;
    border: none;
    background: transparent;
    color: var(--safecheck-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.12s;
}
.nav-search-go:hover, .nav-search-go:focus-visible { color: var(--cactus-accent-strong); }
.nav-search-go svg { width: 15px; height: 15px; flex: none; }
.nav-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 8.5rem;
    border: none;
    background: transparent;
    outline: none;
    color: var(--safecheck-text);
    font-size: 0.92rem;
    padding: 0.15rem 0.1rem;
}
.nav-search-input::placeholder { color: var(--safecheck-muted); opacity: 1; }
/* Live "-> destination" hint shown under the nav search box as you type. */
.nav-search-hint {
    font-size: 0.85rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--cactus-accent);
    border-radius: 10px;
    max-width: 15rem;
    overflow: hidden;
}
.nav-search-hint-link {
    display: block;
    padding: 0.35rem 0.7rem;
    color: var(--cactus-accent-strong);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-search-hint-link:hover, .nav-search-hint-link:focus-visible {
    background: var(--cactus-accent-soft);
    text-decoration: none;
}
@media (min-width: 992px) {
    .nav-search { position: relative; }
    .nav-search-hint {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 1050;
        box-shadow: var(--cactus-shadow-sm);
    }
}
@media (max-width: 991.98px) {
    .nav-search-hint { max-width: none; margin: 0.25rem 0 0.3rem; }
}

/* Emergency "Get help" — a warm amber standout that reads as a button, never buried. */
.nav-gethelp {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #f2d19c;
    background: #fdf3e6;
    color: var(--warn-text);
    text-decoration: none;
    font-weight: 650;
    white-space: nowrap;
    transition: filter 0.12s;
}
.nav-gethelp svg { width: 15px; height: 15px; }
.nav-gethelp:hover, .nav-gethelp:focus-visible, .nav-gethelp.active { filter: brightness(0.97); text-decoration: none; }
[data-bs-theme="dark"] .nav-gethelp { background: #2a2312; border-color: #5b4b1f; }

/* Shared column-header styling for both menus (the group labels are full plain-language questions). */
.mega-col .dropdown-header,
.learn-menu .dropdown-header {
    color: var(--cactus-accent-strong);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    white-space: normal;
    padding: 0.3rem 0.5rem 0.4rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--safecheck-border);
}
.mega-col .dropdown-item { white-space: normal; padding: 0.32rem 0.5rem; border-radius: 6px; }

/* The everyday↔technical divider inside the "Websites & domains" column. */
.mega-adv {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--safecheck-muted);
    margin: 0.55rem 0.5rem 0.3rem;
}
.mega-adv::before, .mega-adv::after { content: ""; flex: 1; height: 1px; background: var(--safecheck-border); }

.mega-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.5rem; }
.mega-foot .mega-cta { color: var(--cactus-accent-strong); font-weight: 600; white-space: normal; }

/* Desktop: three columns. Below lg the menu stacks (grouped) inside the collapsed navbar. */
@media (min-width: 992px) {
    .navbar .dropdown-menu.mega-menu {
        width: min(680px, 94vw);
        max-width: 94vw;
        padding: 1rem 1.1rem 0.85rem;
    }
    .navbar .dropdown-menu.mega-menu.show {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1.75rem;
        row-gap: 0;
    }
    .mega-foot {
        grid-column: 1 / -1;
        margin-top: 0.85rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--safecheck-border);
    }
    .learn-menu { min-width: 15rem; }
    .nav-redesign > .nav-item { margin-right: 0.15rem; }
    .nav-search { margin-right: 0.35rem; }
    .nav-help-item { margin-left: 0.15rem; }
}

/* Mobile / collapsed: pin the pill and Get-help to the top; menus become grouped stacks. */
@media (max-width: 991.98px) {
    .nav-redesign { align-items: stretch; }
    .nav-search { order: -3; }
    .nav-help-item { order: -2; }
    .nav-search-form, .nav-gethelp {
        display: flex;
        max-width: none;
        justify-content: flex-start;
        margin: 0.3rem 0;
    }
    .nav-search-input { width: auto; }
    .mega-foot { flex-direction: column; margin-top: 0.4rem; }
    .mega-col + .mega-col { margin-top: 0.35rem; }
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cactus-accent-strong);
    margin-bottom: 0.5rem;
}

.hero-panel {
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-md);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 2rem;
}

.hero-panel h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 0.65rem;
}

.hero-copy {
    font-size: 1.05rem;
    color: var(--safecheck-muted);
    max-width: 60ch;
    margin-bottom: 1.1rem;
}

/* One-line "what the whole site does" orientation for first-time visitors. */
.hero-intro {
    font-size: 1.1rem;
    max-width: 62ch;
    margin: 0 0 0.7rem;
}

/* Inline link checker embedded in the homepage hero (primary action). */
.hero-check-form {
    margin-bottom: 0.75rem;
}

.hero-secondary {
    font-size: 0.95rem;
    color: var(--safecheck-muted);
    margin: 0;
}

.hero-detect {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin: 0.45rem 0 0;
}

/* Smart-box "did you mean" disambiguation + secondary-option chips. */
.hero-suggest {
    margin: 0.6rem 0 0;
}

.hero-suggest-label {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin: 0 0 0.4rem;
}

.hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hero-chip {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cactus-accent-strong);
    background: var(--cactus-accent-soft);
    border: 1px solid var(--cactus-accent);
    border-radius: 999px;
}

.hero-chip:hover,
.hero-chip:focus-visible {
    background: var(--cactus-accent);
    color: #fff;
}

/* The passive "or {label}" option that sits inside the live hint line. */
.hero-detect .hero-chip {
    font-size: 0.8rem;
    padding: 2px 9px;
}

/* The Daily Scam */
.daily-number {
    color: var(--cactus-accent-strong);
    font-weight: 800;
}

.daily-after {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.daily-streak {
    font-weight: 700;
    margin: 0;
}

.daily-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.daily-comeback {
    font-size: 0.9rem;
    color: var(--safecheck-muted);
    margin: 0;
}

/* Security Checkup */
.checkup-cat {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
    color: var(--cactus-accent-strong);
}

.checkup-q {
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
    padding: 1rem;
    margin: 0 0 0.85rem;
}

.checkup-q legend {
    font-size: 1rem;
    font-weight: 700;
    float: none;
    width: auto;
    margin: 0 0 0.5rem;
}

.checkup-q-missing {
    border-color: var(--verdict-high);
}

.checkup-option {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    padding: 0.25rem 0;
    cursor: pointer;
}

.checkup-unanswered {
    color: var(--verdict-high);
    font-weight: 600;
}

.checkup-results {
    margin-top: 1.5rem;
    border-top: 1px solid var(--safecheck-border);
    padding-top: 1.25rem;
}

.checkup-pct {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.checkup-band {
    color: var(--safecheck-muted);
    max-width: 46ch;
}

.checkup-advice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.checkup-advice {
    border-left: 3px solid var(--cactus-accent-strong);
    padding: 0.15rem 0 0.15rem 0.85rem;
}

.checkup-advice p {
    margin: 0 0 0.2rem;
}

.checkup-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.checkup-previous {
    font-size: 0.92rem;
    color: var(--safecheck-muted);
}

@media print {
    .navbar, .footer, .checkup-ctas, .scam-banner, .privacy-notice, #checkupSubmit,
    .ip-bar, .pwa-install, .share-result, .report-actions {
        display: none !important;
    }

    /* Dark is this site's DEFAULT theme, and only the FamilyKit sheet forced print colours - so
       printing anything else (a scam result to take to the bank, the emergency steps) put pale
       text on white paper and came out effectively blank. Force legible ink for every page;
       the FamilyKit block later in this file still refines its own sheet. */
    html, body {
        background: #fff !important;
        color: #111 !important;
    }
    body *:not(.familykit-sheet):not(.familykit-sheet *) {
        color: #111 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    a {
        color: #111 !important;
        text-decoration: underline;
    }
    /* Keep the outlined shapes visible now that their colour is forced to ink. */
    .score-circle, .checker-card, .result-card, .safety-note, .recommendation, .finding-section {
        border-color: #666 !important;
    }
}

/* Scam Radar */
.radar-updated {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin: 0 0 1rem;
}

.radar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.radar-tag {
    background: var(--cactus-accent-soft);
    color: var(--cactus-accent-strong);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.radar-sample-label {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin: 0.75rem 0 0.4rem;
}

.radar-table-wrap {
    overflow-x: auto;
}

.radar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.radar-table th,
.radar-table td {
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--safecheck-border);
    vertical-align: top;
}

.radar-domain {
    font-size: 0.8rem;
    color: var(--safecheck-muted);
}

.radar-lookalike {
    display: inline-block;
    background: var(--safecheck-code-bg);
    border: 1px solid var(--safecheck-border);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    margin: 0 0.3rem 0.3rem 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.radar-disclaimer {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin-top: 0.75rem;
}

.radar-alert-cta {
    margin-top: 1.5rem;
    border-top: 1px solid var(--safecheck-border);
    padding-top: 1.25rem;
}

.radar-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

/* Family scam sheet */
.familykit-sheet {
    border: 2px solid var(--cactus-accent-strong);
    border-radius: var(--cactus-radius-sm);
    padding: 1.5rem;
    background: var(--safecheck-surface);
}

.familykit-brand {
    font-weight: 700;
    color: var(--cactus-accent-strong);
    font-size: 0.9rem;
}

.familykit-sheet-head h2 {
    margin: 0.25rem 0 1rem;
    font-size: 1.5rem;
}

.familykit-rules {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.familykit-rules li strong {
    display: block;
}

.familykit-emergency {
    border-top: 2px dashed var(--safecheck-border);
    padding-top: 1rem;
}

.familykit-emergency ol {
    margin: 0.4rem 0 0;
    padding-left: 1.4rem;
}

.familykit-footer {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--safecheck-muted);
}

@media print {
    /* The sheet must print clean even from dark mode: force light-on-white. */
    .familykit-noprint { display: none !important; }
    .familykit { box-shadow: none !important; border: none !important; padding: 0 !important; background: #fff !important; }
    .familykit-sheet { background: #fff !important; border-color: #17804a !important; }
    .familykit-sheet, .familykit-sheet * { color: #111 !important; }
    .familykit-brand { color: #17804a !important; }
}

/* Photo metadata remover */
.exif-dropzone {
    border: 2px dashed var(--safecheck-border);
    border-radius: var(--cactus-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.exif-dropzone:hover,
.exif-dropzone:focus-visible,
.exif-dropzone.is-drag {
    border-color: var(--cactus-accent-strong);
    background: var(--cactus-accent-soft);
}

.exif-drop-text {
    font-weight: 700;
    margin: 0 0 0.3rem;
}

.exif-drop-hint {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin: 0;
}

.exif-result {
    margin-top: 1.5rem;
}

.exif-found {
    border-radius: var(--cactus-radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.exif-found-hit {
    background: rgba(var(--verdict-suspicious-rgb), 0.12);
    border: 1px solid var(--verdict-suspicious);
}

.exif-found-clean {
    background: rgba(var(--verdict-safe-rgb), 0.12);
    border: 1px solid var(--verdict-safe);
}

.exif-found h2 {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}

.exif-found-list {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.exif-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.exif-sizes {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    margin: 0.6rem 0 0;
}

/* Password generator */
.gen-output-row {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    margin-bottom: 0.5rem;
}

.gen-output {
    flex: 1;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 1.35rem;
    word-break: break-all;
    padding: 0.9rem 1rem;
    background: var(--safecheck-code-bg);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
    min-height: 3.4rem;
    display: flex;
    align-items: center;
}

.gen-strength {
    font-weight: 600;
    margin: 0 0 1.25rem;
}

.gen-weak { color: var(--verdict-critical); }
.gen-fair { color: var(--verdict-suspicious); }
.gen-strong { color: var(--cactus-accent-strong); }
.gen-vstrong { color: var(--cactus-accent-strong); }

.gen-mode {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gen-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gen-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

/* DNS lookup records */
.dns-records {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dns-records li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    background: var(--safecheck-code-bg);
    border: 1px solid var(--safecheck-border);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
}

.dns-records code {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.dns-ttl {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--safecheck-muted);
    white-space: nowrap;
}

/* DMARC section on /CheckDns (looked up at the _dmarc subdomain, shown separately). */
.dns-subname { font-size: 0.75rem; color: var(--safecheck-muted); white-space: nowrap; }
.dns-dmarc-none { color: var(--warn-text); }

/* Professional services */
.services-body h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.6rem;
}

.services-list {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.services-cta {
    margin: 1.5rem 0;
}

.hero-secondary a {
    font-weight: 600;
}

.hero-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}

@media (max-width: 480px) {
    .hero-secondary a {
        display: inline-block;
        margin-top: 0.35rem;
    }

    .hero-sep {
        display: none;
    }
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.trust-band {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--safecheck-muted);
}

.trust-band span {
    display: inline-flex;
    align-items: center;
}

.trust-band span::before {
    content: "\2713";
    color: var(--cactus-accent);
    font-weight: 700;
    margin-right: 0.4rem;
}

.section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 2.5rem;
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
    color: var(--safecheck-text);
    text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.tool-card:hover,
.tool-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--cactus-shadow-lg);
    border-color: var(--cactus-accent);
    color: var(--safecheck-text);
    text-decoration: none;
}

.tool-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--cactus-radius-sm);
    background: var(--cactus-accent-soft);
    color: var(--cactus-accent);
}

.tool-card-icon svg {
    width: 22px;
    height: 22px;
}

.tool-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.tool-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--safecheck-muted);
}

/* Homepage grids are a scan surface: descriptions are written as one short sentence and
   clamped at two lines as a guard, so a future longer string can never rebuild the old
   wall of text. The /Tools catalog keeps full descriptions for deliberate browsing. */
.tool-grid-compact .tool-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subtle per-group icon tints so the three tool groups read as distinct bands instead of
   one long green wall. Links & messages keeps the brand green; card hover stays green. */
.tool-grid-site .tool-card-icon {
    background: rgba(14, 165, 233, .13);
    color: #0284c7;
}

.tool-grid-accounts .tool-card-icon {
    background: rgba(139, 92, 246, .13);
    color: #7c3aed;
}

[data-bs-theme="dark"] .tool-grid-site .tool-card-icon {
    background: rgba(14, 165, 233, .16);
    color: #38bdf8;
}

[data-bs-theme="dark"] .tool-grid-accounts .tool-card-icon {
    background: rgba(139, 92, 246, .18);
    color: #a78bfa;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0;
}

.info-grid article h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.info-grid article p {
    color: var(--safecheck-muted);
    margin: 0;
}

/* Password-breach result badge: self-contained colored ring (✓ or !). */
.pw-badge {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 8px solid currentColor;
    background: var(--safecheck-surface);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

.pw-badge.is-breached {
    color: #dc2626;
}

.pw-badge.is-safe {
    color: #16a34a;
}

/* ===== Learn hub: index grid + article typography ===== */
.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.learn-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
    color: var(--safecheck-text);
    text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.learn-card:hover,
.learn-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--cactus-shadow-lg);
    border-color: var(--cactus-accent);
    color: var(--safecheck-text);
    text-decoration: none;
}

.learn-card h2,
.learn-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.learn-card p {
    margin: 0;
    color: var(--safecheck-muted);
    font-size: 0.95rem;
}

.learn-meta {
    color: var(--safecheck-muted);
    font-size: 0.85rem;
    margin: 0 0 0.25rem;
}

.learn-more {
    max-width: 720px;
    margin: 3rem auto 0;
}

/* Submit feedback: busy spinner + status line for the server-rendered checker forms */
.form-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    color: var(--safecheck-muted);
    font-size: 0.95rem;
}

.form-status::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid var(--safecheck-border);
    border-top-color: var(--cactus-accent);
    border-radius: 50%;
    animation: cactus-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes cactus-spin {
    to { transform: rotate(360deg); }
}

/* "See all tools" / start links under a tool grid */
.tools-all-link,
.tools-foot {
    text-align: center;
    margin: 1.25rem 0 0;
}

.tools-all-link a,
.tools-foot a {
    font-weight: 600;
    color: var(--cactus-accent-strong);
}

/* ===== Scam of the Week ===== */
/* Scam of the Week is a warning about an active scam, so it wears the amber warning
   tint (matching the emergency banner and the risk bands), not the brand green. */
.scam-spotlight {
    margin: 2.5rem 0;
    padding: 1.75rem;
    background: rgba(var(--verdict-suspicious-rgb), .10);
    border: 1px solid rgba(var(--verdict-suspicious-rgb), .40);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
}

.scam-spotlight-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.scam-spotlight-eyebrow {
    margin: 0;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warn-text);
}

.scam-spotlight h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.scam-spotlight-summary {
    margin: 0 0 1.25rem;
    color: var(--safecheck-text);
    max-width: 62ch;
}

.scam-spotlight-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.scam-spotlight-all {
    font-weight: 600;
    color: var(--warn-text);
}

/* Category tag pill - shared by the spotlight, archive cards, and article header. */
.scam-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cactus-accent-soft);
    color: var(--cactus-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.scam-cat svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* On the soft-green spotlight panel, lift the pill off the background. */
.scam-spotlight .scam-cat {
    background: var(--safecheck-surface);
}

.scam-meta-date {
    color: var(--safecheck-muted);
    font-size: 0.85rem;
}

.scam-article-tags {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
}

.scam-learnmore {
    margin-top: 1.5rem;
    font-size: 0.98rem;
}

/* ===== Newsletter CTA (external sign-up link) ===== */
.newsletter-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 2.5rem 0;
    padding: 1.75rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
}

.newsletter-cta-text {
    flex: 1 1 320px;
}

.newsletter-cta-text h2 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
}

.newsletter-cta-text p {
    margin: 0;
    color: var(--safecheck-muted);
    max-width: 60ch;
}

.newsletter-cta-action {
    flex: 0 0 auto;
}

.newsletter-cta-action .btn {
    white-space: nowrap;
}

.newsletter-cta-fine {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--safecheck-muted);
    max-width: 36ch;
}

/* ===== Safe Software directory ===== */
.software-disclaimer-body {
    margin: 0;
}

.software-jump {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
}

.software-jump-label {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
    color: var(--safecheck-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.software-jump-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.software-jump-list a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cactus-accent-soft);
    color: var(--cactus-accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color .15s ease, background .15s ease;
}

.software-jump-list a:hover,
.software-jump-list a:focus-visible {
    border-color: var(--cactus-accent);
}

.software-category {
    margin-bottom: 2.5rem;
    scroll-margin-top: 84px;
}

.software-category h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.software-cat-intro {
    color: var(--safecheck-muted);
    margin: 0 0 1rem;
    max-width: 70ch;
}

.software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.software-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
}

.software-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.software-card-head h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.sw-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.sw-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: contain;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--safecheck-border);
    box-sizing: border-box;
}

.sw-logo-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--cactus-accent);
    background: var(--cactus-accent-soft);
}

/* Scam-text (smishing) checker */
.msg-textarea {
    resize: vertical;
    min-height: 150px;
}

.msg-submit-row {
    margin-top: 1rem;
}

.risk-banner {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Risk bands derive from the same --verdict-* tokens as the score circle so severity
   colours stay identical across every tool (3-band low/medium/high maps to safe/suspicious/critical).
   Backgrounds use the --verdict-*-rgb triplets so the tint follows the same source of truth. */
.risk-banner-high { background: rgba(var(--verdict-critical-rgb), .10); border-color: rgba(var(--verdict-critical-rgb), .35); }
.risk-banner-medium { background: rgba(var(--verdict-suspicious-rgb), .12); border-color: rgba(var(--verdict-suspicious-rgb), .40); }
.risk-banner-low { background: rgba(var(--verdict-safe-rgb), .12); border-color: rgba(var(--verdict-safe-rgb), .35); }

.risk-tag {
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
.risk-tag-high { background: var(--verdict-critical); }
.risk-tag-medium { background: var(--verdict-suspicious); }
.risk-tag-low { background: var(--verdict-safe); }

.risk-headline {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
}
.risk-sub {
    margin: 0;
    color: var(--safecheck-muted);
}

.risk-meter {
    height: 8px;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: rgba(128, 128, 128, .25);
    overflow: hidden;
}
.risk-meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.risk-meter-high { background: var(--verdict-critical); }
.risk-meter-medium { background: var(--verdict-suspicious); }
.risk-meter-low { background: var(--verdict-safe); }

.msg-signal-list,
.msg-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.msg-signal {
    padding: 0.75rem 0.9rem;
    border-left: 4px solid var(--safecheck-border);
    background: var(--safecheck-bg-soft);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.msg-signal-title { font-weight: 700; }
.msg-signal-detail { font-size: 0.92rem; color: var(--safecheck-muted); }
.msg-signal-high { border-left-color: #dc2626; }
.msg-signal-medium { border-left-color: #d97706; }
.msg-signal-low { border-left-color: var(--cactus-accent); }
.msg-no-signals { color: var(--safecheck-muted); margin: 0; }

.msg-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    background: var(--safecheck-bg-soft);
    border: 1px solid var(--safecheck-border);
    border-radius: 8px;
}
.msg-link-url { word-break: break-all; font-size: 0.9rem; }

/* Extra DNS hygiene rows (email-auth tool) */
.hygiene-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.hygiene-item {
    padding: 0.75rem 0.9rem;
    background: var(--safecheck-bg-soft);
    border: 1px solid var(--safecheck-border);
    border-radius: 8px;
}
.hygiene-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.hygiene-name { font-weight: 700; }
.hygiene-note { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--safecheck-muted); }

.tool-methodology-link {
    margin-top: 1.25rem;
    font-size: 0.95rem;
}

.risk-tag-unknown { background: var(--safecheck-muted); }
.ip-dnsbl-zone { color: var(--safecheck-muted); font-weight: 400; font-size: 0.82rem; }

.ipclass-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.ipclass-badge-public { background: #d1fae5; color: #065f46; }
.ipclass-badge-special { background: #e0e7ff; color: #3730a3; }
.ipclass-desc { color: var(--safecheck-muted); margin-top: 0.5rem; }

[data-bs-theme="dark"] .ipclass-badge-public { background: #0c2e22; color: #6ee7b7; }
[data-bs-theme="dark"] .ipclass-badge-special { background: #1e1b4b; color: #c7d2fe; }

.whois-status-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.whois-age { color: var(--safecheck-muted); font-size: 0.9rem; }

/* A full SHA-256 is 64 chars with no break opportunities — let it wrap instead of overflowing on mobile. */
.filehash-value { word-break: break-all; }

/* /Scammed "right now" steps as a check-off list with localStorage progress. */
.scam-checklist { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.scam-checklist li label { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; }
.scam-checklist input[type="checkbox"] { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--verdict-safe); }
.scam-checklist li.done span { text-decoration: line-through; color: var(--safecheck-muted); }

/* /CheckEmail "how to find your headers" per-provider mini-tutorials (no JS, inside the disclosure). */
.header-howto { margin: 0.75rem 0; }
.header-howto-title { font-weight: 600; margin-bottom: 0.5rem; }
.header-howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem 1.25rem; }
.header-howto-provider h4 { font-size: 0.95rem; margin: 0 0 0.25rem; }
.header-howto-provider ol { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--safecheck-muted); }
.header-howto-provider li { margin-bottom: 0.2rem; }

/* Inline glossary term: looks like the surrounding label but tappable for a plain-language popover. */
.glossary-term { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: help; border-bottom: 1px dotted currentColor; }

/* "Buy me a coffee is optional / we never ask for payment" clarification under the footer donate link. */
.footer-donate-note { font-size: 0.8rem; color: var(--safecheck-muted); margin: 0.4rem 0 0; max-width: 22rem; }

/* Homepage glossary entry point for non-technical users (under the FAQ). */
.index-glossary-cta { text-align: center; margin: 1.5rem auto 0; color: var(--safecheck-muted); }

/* Homepage tool-grid category subheadings (mirror the nav / Tools page grouping). */
.tool-group-heading { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 0.8rem; }

/* "Report this scam" block on high-risk URL results (8.5). */
.report-scam { margin-top: 1.4rem; }
.report-scam h3 { margin: 0.2rem 0 0.45rem; }
.report-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; margin: 0.75rem 0; }
.report-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.report-note { font-size: 0.85rem; color: var(--safecheck-muted); margin: 0.75rem 0 0; }

.software-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sw-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.sw-badge-oss {
    background: var(--cactus-accent-soft);
    color: var(--cactus-accent);
}

.sw-badge-free {
    background: rgba(22, 163, 74, .14);
    color: #16a34a;
}

.sw-badge-freemium {
    background: rgba(2, 132, 199, .14);
    color: #0284c7;
}

.sw-badge-paid {
    background: var(--safecheck-code-bg);
    color: var(--safecheck-muted);
}

.software-desc {
    margin: 0;
    font-size: 0.95rem;
}

.software-note {
    margin: 0;
    color: var(--safecheck-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.software-link {
    margin-top: auto;
    align-self: flex-start;
}

.sw-partner {
    font-size: 0.7rem;
    color: var(--safecheck-muted);
}

.learn-card-more {
    margin-top: auto;
    color: var(--cactus-accent-strong);
    font-weight: 700;
    font-size: 0.9rem;
}

/* "I've been scammed" triage page */
.scam-steps {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.25rem 1.25rem 2.75rem;
    background: var(--cactus-accent-soft);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
}

.scam-steps li + li {
    margin-top: 0.6rem;
}

.scam-contact {
    margin: 0;
    font-size: 0.95rem;
}

.scam-contact a {
    font-weight: 600;
    white-space: nowrap;
}

/* Service status page (/Status) */
.status-overall {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}

.status-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--safecheck-border);
}

.status-name {
    flex: 1;
    font-weight: 600;
}

.status-state {
    font-size: 0.85rem;
    font-weight: 700;
}

.status-latency {
    font-size: 0.8rem;
    color: var(--safecheck-muted);
    min-width: 4rem;
    text-align: right;
}

.status-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--safecheck-muted);
}

.status-up .status-dot, .status-dot.status-up { background: #16a34a; }
.status-slow .status-dot, .status-dot.status-slow { background: #d97706; }
.status-down .status-dot, .status-dot.status-down { background: #dc2626; }

.status-text-up { color: #16a34a; }
.status-text-slow { color: #d97706; }
.status-text-down { color: #dc2626; }

.status-checked, .status-note {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
}

/* "Start here" guided chooser (/Start) */
.start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.start-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.start-card:hover {
    border-color: var(--cactus-accent);
    transform: translateY(-3px);
    box-shadow: var(--cactus-shadow-lg);
    text-decoration: none;
}

.start-card h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cactus-accent);
}

.start-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--safecheck-muted);
}

/* The emergency "I've been scammed" card — warm amber (matching the nav Get-help standout)
   so it reads as urgent help, not as a permanently-selected/hovered green card. */
.start-card-alert {
    border-color: #f2d19c;
    background: #fdf3e6;
}
.start-card-alert h3 { color: var(--warn-text); }
.start-card-alert:hover { border-color: #e0a94a; }
[data-bs-theme="dark"] .start-card-alert { border-color: #5b4b1f; background: #2a2312; }
[data-bs-theme="dark"] .start-card-alert:hover { border-color: #7a6529; }

/* /SubnetCalculator reference content: CIDR/IPv6 tables + how-to + uses. */
.subnet-reference { margin-top: 2rem; }
.subnet-reference h2 { margin-bottom: 0.5rem; }
.ref-table-wrap { overflow-x: auto; margin-top: 0.75rem; }
.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.ref-table th,
.ref-table td {
    text-align: left;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--safecheck-border);
    white-space: nowrap;
}
.ref-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--safecheck-muted);
    border-bottom: 2px solid var(--safecheck-border);
}
.ref-table tbody th { font-weight: 700; }
.ref-table td:last-child, .ref-table th:last-child { white-space: normal; color: var(--safecheck-muted); }
.ref-table tbody tr:target { background: var(--cactus-accent-soft); }
.subnet-howto, .subnet-uses { padding-left: 1.2rem; }
.subnet-howto li, .subnet-uses li { margin-bottom: 0.4rem; }

/* /WhatIsMyIp: the visitor's own IP, shown prominently as the answer. */
.myip-hero { margin-top: 1rem; text-align: center; padding: 1.5rem 1rem; }
.myip-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--safecheck-muted); margin-bottom: 0.4rem; }
.myip-address { font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.myip-address code { background: none; padding: 0; color: var(--cactus-accent-strong); }
.myip-version { color: var(--safecheck-muted); margin-top: 0.35rem; }
.myip-unknown { color: var(--safecheck-muted); font-size: 1.1rem; font-weight: 500; }
.myip-muted { color: var(--safecheck-muted); }

.hero-start-link {
    margin-top: 0.85rem;
    font-weight: 600;
}

/* Certificate Transparency lookup (/CheckCerts) */
.cert-subdomains {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 22rem;
    overflow: auto;
}

.cert-subdomains li {
    background: var(--safecheck-code-bg);
    border: 1px solid var(--safecheck-border);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
}

.cert-subdomains code {
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.cert-truncated {
    font-size: 0.8rem;
    color: var(--safecheck-muted);
    margin: 0.5rem 0 0;
}

.cert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cert-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.85rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
}

.cert-source {
    font-size: 0.8rem;
    color: var(--safecheck-muted);
    margin-top: 0.25rem;
}

.embed-preview {
    padding: 1.25rem;
    background: var(--safecheck-bg-soft);
    border: 1px dashed var(--safecheck-border);
    border-radius: var(--cactus-radius);
    margin: 0.75rem 0 1.25rem;
}

.embed-preview-inline {
    padding: 1rem 1.25rem;
}

.embed-snippet {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.embed-code {
    width: 100%;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre;
    overflow-wrap: normal;
    resize: vertical;
}

.breach-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.breach-item {
    padding: 0.85rem 1rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
}

.breach-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breach-name {
    font-weight: 700;
    font-size: 1rem;
}

.breach-domain {
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
}

.breach-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--safecheck-muted);
    margin: 0.35rem 0 0;
}

.breach-data {
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
    overflow-wrap: anywhere;
}

.action-list {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    line-height: 1.5;
}

.bookmarklet-row {
    margin: 0.5rem 0;
}

.bookmarklet-btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: #17804a;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--cactus-radius-sm);
    text-decoration: none;
    cursor: grab;
}

.bookmarklet-btn:hover {
    background: #146e40;
}

.cert-cn {
    font-weight: 700;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.cert-issuer {
    font-size: 0.8rem;
    color: var(--safecheck-muted);
    margin-right: auto;
}

.cert-date {
    font-size: 0.78rem;
    color: var(--safecheck-muted);
    white-space: nowrap;
}

/* Typosquat / look-alike domain finder (/CheckTyposquat) */
.typo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.typo-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.85rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
}

.typo-domain {
    font-weight: 700;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.typo-tech {
    font-size: 0.78rem;
    color: var(--safecheck-muted);
    margin-right: auto;
}

/* Tool FAQ + related guides (shared _ToolSeo partial) */
.tool-faq {
    margin-top: 2rem;
}

.tool-related {
    margin-top: 2rem;
}

.tool-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.tool-related-list a {
    font-weight: 600;
}

/* Security-headers analyzer (/CheckHeaders) */
.header-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.header-item {
    padding: 0.85rem 1rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
}

.header-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.header-desc {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--safecheck-muted);
}

.header-weak-reason {
    color: #d97706;
    font-weight: 600;
}

.header-value {
    display: block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: var(--safecheck-code-bg);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

/* winget install-script generator (Safe Software page) */
.winget-builder {
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    background: var(--safecheck-surface);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius);
    box-shadow: var(--cactus-shadow-sm);
}

.winget-builder h2 {
    margin-top: 0;
}

.winget-count {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.winget-output {
    margin: 0 0 0.75rem;
    padding: 1rem;
    max-height: 18rem;
    overflow: auto;
    background: var(--safecheck-code-bg);
    border: 1px solid var(--safecheck-border);
    border-radius: var(--cactus-radius-sm);
    white-space: pre;
}

.winget-output code {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    color: inherit;
    background: none;
    padding: 0;
}

.winget-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.winget-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--safecheck-muted);
}

.sw-pick {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--safecheck-muted);
    cursor: pointer;
}

.sw-pick input {
    accent-color: var(--cactus-accent);
}

/* Security glossary */
.glossary-az {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 2rem;
}

.glossary-az a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--cactus-accent);
    background: var(--cactus-accent-soft);
    border-radius: var(--cactus-radius-sm);
}

.glossary-az a:hover {
    background: var(--cactus-accent);
    color: #fff;
}

.glossary-section {
    margin-bottom: 2rem;
    scroll-margin-top: 5rem;
}

.glossary-list {
    margin: 0;
}

.glossary-term {
    padding: 1rem 0;
    border-top: 1px solid var(--safecheck-border);
    scroll-margin-top: 5rem;
}

.glossary-term dt {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.glossary-term dd {
    margin: 0;
    color: var(--safecheck-text);
}

.glossary-permalink {
    margin-left: 0.4rem;
    color: var(--safecheck-muted);
    text-decoration: none;
    opacity: 0;
    font-weight: 400;
    transition: opacity 0.15s ease;
}

.glossary-term:hover .glossary-permalink,
.glossary-permalink:focus {
    opacity: 1;
}

.glossary-more {
    display: inline-block;
    margin-left: 0.4rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Homepage callout linking to the triage page. Amber, not brand green: this is the
   emergency strip for people who think they've just been scammed - green whispers
   "everything's fine", which is the opposite of its job. Same --verdict-suspicious
   tokens as the risk banners, so warning means one colour everywhere. */
.scam-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 1.1rem;
    margin-bottom: 1rem;
    background: rgba(var(--verdict-suspicious-rgb), .12);
    border: 1px solid rgba(var(--verdict-suspicious-rgb), .45);
    border-radius: var(--cactus-radius);
}

.scam-banner p {
    margin: 0;
    font-weight: 600;
}

.learn-article {
    max-width: 720px;
    margin: 0 auto;
}

.learn-article h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.25rem 0 0.75rem;
}

.learn-lede {
    font-size: 1.15rem;
    color: var(--safecheck-muted);
    margin-bottom: 1.5rem;
}

.learn-body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.learn-body h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
}

.learn-body p {
    margin: 0 0 1rem;
}

.learn-body ul,
.learn-body ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.learn-body li {
    margin-bottom: 0.5rem;
}

.learn-body a {
    color: var(--safecheck-link);
    text-decoration: underline;
}

.learn-body code {
    background: var(--safecheck-code-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

.learn-cta {
    margin-top: 2rem;
}

/* Comparison ("alternative to X") pages: feature-map tables + the tool-link row */
.comparison-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}

.comparison-body th,
.comparison-body td {
    border: 1px solid var(--safecheck-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.comparison-body thead th {
    background: var(--safecheck-bg-soft);
    font-weight: 700;
}

.compare-tool-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

/* Per-term glossary pages: the term-name link on the index + the related-terms list */
.glossary-term-link {
    color: var(--safecheck-text);
    text-decoration: none;
    font-weight: 700;
}

.glossary-term-link:hover {
    color: var(--cactus-accent-strong);
    text-decoration: underline;
}

.glossary-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.glossary-related-list a {
    font-weight: 600;
    color: var(--cactus-accent-strong);
}

/* ===== Footer (multi-column; replaces the old single hyphen-separated run) ===== */
.footer {
    margin-top: 3rem;
    padding: 2.5rem 0 1.75rem;
    border-top: 1px solid var(--safecheck-border);
    color: var(--safecheck-muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 1.5rem 2rem;
}

.footer-brand .footer-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--safecheck-text);
    text-decoration: none;
}

.footer-brand .brand-logo {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--cactus-accent);
}

.footer-tagline {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.9rem;
    max-width: 30ch;
}

.footer-col-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--safecheck-text);
    margin: 0 0 0.7rem;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin-bottom: 0.45rem;
}

.footer-col a,
.footer-brand .footer-link {
    color: var(--safecheck-muted);
    text-decoration: none;
    font-size: 0.92rem;
}

.footer-col a:hover,
.footer-brand .footer-link:hover {
    color: var(--cactus-accent-strong);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--safecheck-border);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
}
.footer-ip {
    color: var(--safecheck-muted);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.footer-ip:hover, .footer-ip:focus-visible { color: var(--cactus-accent-strong); text-decoration: underline; }

@media (max-width: 720px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Payment-rail check (/PaymentCheck) ─────────────────────────────────── */

.pay-picker-heading {
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.pay-picker ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Big, unmissable tap targets: whoever needs this page may be panicking, elderly, or both. */
.pay-pick {
    display: block;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid var(--safecheck-border);
    border-left-width: 5px;
    border-radius: var(--cactus-radius-sm);
    background: var(--safecheck-surface);
    color: var(--safecheck-text);
    font-weight: 600;
    text-decoration: none;
}

.pay-pick:hover {
    border-color: var(--cactus-accent);
    border-left-color: var(--cactus-accent);
    color: var(--cactus-accent-strong);
}

/* The left edge previews how bad the news is before the reader commits to a tap. */
.verdict-border-critical { border-left-color: var(--verdict-critical); }
.verdict-border-high { border-left-color: var(--verdict-high); }
.verdict-border-suspicious { border-left-color: var(--verdict-suspicious); }
.verdict-border-low { border-left-color: var(--verdict-safe); }

.pay-notyet {
    margin: 20px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--cactus-accent);
    background: var(--cactus-accent-soft);
    border-radius: var(--cactus-radius-sm);
    color: var(--safecheck-text);
}

.pay-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pay-rail-head h2 {
    margin: 0;
    font-size: 1.35rem;
}

.pay-verdict {
    font-size: 1.05rem;
    margin-bottom: 18px;
}

.pay-never {
    margin: 0;
    padding-left: 1.2rem;
}

.pay-never li {
    margin-bottom: 10px;
}

.pay-never li:last-child {
    margin-bottom: 0;
}

.pay-more {
    margin: 20px 0 0;
    font-weight: 600;
}