/*
Theme Name: WhoAmI Online
Theme URI: https://whoamionline.com
Author: WhoAmI Online
Author URI: https://whoamionline.com
Description: Custom theme for whoamionline.com — a network diagnostic and privacy audit dashboard. Includes 25 client-side tests, hardened PHP endpoints for WHOIS/DNS/reputation lookups, feature-flag admin panel, and CSP-hardened Google Ads integration.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whoami
Tags: dark-mode, custom-menu, translation-ready, one-column
*/

/* =========================================================================
   TOKENS — All design decisions live here. Change the variable, not the rule.
   ========================================================================= */
:root {
    /* Base surfaces (mature aquamarine dark theme) */
    --wm-bg:            #060b09;
    --wm-surface:       #0d1a14;
    --wm-surface-alt:   #112018;
    --wm-surface-hi:    #182a20;
    --wm-border:        #1e3829;
    --wm-border-hi:     #2c5240;

    /* Text */
    --wm-text:          #dff0e8;
    --wm-text-muted:    #8aab97;
    --wm-text-faint:    #4a6b58;

    /* Accents */
    --wm-accent:        #26a69a;   /* mature aquamarine — WCAG AAA 7.2:1 on --wm-bg */
    --wm-accent-hi:     #4dd0c0;
    --wm-accent-dim:    #1c7a72;

    /* Cocomelon-saturated status primaries (dopamine reward moments) */
    --wm-safe:          #00e676;
    --wm-info:          #4fc3f7;
    --wm-warning:       #ffca28;
    --wm-leak:          #ff5252;
    --wm-disabled:      #4a6b58;

    /* Semantic status backgrounds (soft tinted panels) */
    --wm-safe-bg:       rgba(0, 230, 118, 0.09);
    --wm-info-bg:       rgba(79, 195, 247, 0.09);
    --wm-warning-bg:    rgba(255, 202, 40, 0.09);
    --wm-leak-bg:       rgba(255, 82, 82, 0.10);
    --wm-disabled-bg:   rgba(74, 107, 88, 0.10);

    /* Rounded shapes */
    --wm-r-card:        14px;
    --wm-r-btn:         10px;
    --wm-r-pill:        999px;
    --wm-r-input:       10px;

    /* Motion */
    --wm-t-fast:        140ms cubic-bezier(.2,.7,.3,1);
    --wm-t-med:         260ms cubic-bezier(.2,.7,.3,1);
    --wm-t-slow:        640ms cubic-bezier(.2,.7,.3,1);

    /* Elevation */
    --wm-shadow-1:      0 1px 2px rgba(0,0,0,.35), 0 0 0 1px var(--wm-border);
    --wm-shadow-2:      0 4px 16px rgba(0,0,0,.45), 0 0 0 1px var(--wm-border-hi);
    --wm-shadow-3:      0 14px 38px rgba(0,0,0,.5);

    /* Typography */
    --wm-font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wm-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --wm-container:     1200px;
    --wm-container-pad: clamp(16px, 4vw, 32px);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--wm-font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--wm-text);
    background: radial-gradient(1200px 800px at 15% -10%, rgba(38,166,154,.09), transparent 55%),
                radial-gradient(900px 700px at 90% 110%, rgba(0,230,118,.05), transparent 60%),
                var(--wm-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}
body.wm-modal-open { overflow: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--wm-accent); text-decoration: none; transition: color var(--wm-t-fast); }
a:hover, a:focus-visible { color: var(--wm-accent-hi); text-decoration: underline; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--wm-accent-hi); outline-offset: 3px; border-radius: 4px; }

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    height: 1px; width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* Skip-link (visible on focus for keyboard users) */
.wm-skip-link {
    position: absolute; top: -100px; left: 8px;
    background: var(--wm-accent); color: var(--wm-bg);
    padding: 10px 16px; border-radius: var(--wm-r-btn);
    font-weight: 600; z-index: 9999;
    transition: top var(--wm-t-fast);
}
.wm-skip-link:focus { top: 8px; text-decoration: none; }

/* Utility container */
.wm-container {
    max-width: var(--wm-container);
    margin-inline: auto;
    padding-inline: var(--wm-container-pad);
}

/* =========================================================================
   TOP BAR / NAV
   ========================================================================= */
.wm-topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(6,11,9,.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--wm-border);
}
.wm-topbar__inner {
    max-width: var(--wm-container);
    margin-inline: auto;
    padding: 12px var(--wm-container-pad);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
}
.wm-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; letter-spacing: -0.01em;
    color: var(--wm-text);
    text-decoration: none;
}
.wm-brand:hover { text-decoration: none; }
.wm-brand__mark {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--wm-r-pill);
    background: linear-gradient(140deg, var(--wm-accent), var(--wm-safe));
    color: var(--wm-bg); font-size: 18px; line-height: 1;
    box-shadow: 0 0 0 1px var(--wm-border), 0 4px 12px rgba(38,166,154,.25);
}
.wm-brand__name { font-size: 1.05rem; }
.wm-brand__accent { color: var(--wm-accent); }

.wm-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    justify-content: center;
}
.wm-tabs__item {
    padding: 8px 14px;
    color: var(--wm-text-muted);
    font-weight: 500; font-size: 0.92rem;
    border-radius: var(--wm-r-pill);
    transition: color var(--wm-t-fast), background-color var(--wm-t-fast);
    text-decoration: none;
    white-space: nowrap;
}
.wm-tabs__item:hover { color: var(--wm-text); background: var(--wm-surface-alt); text-decoration: none; }
.wm-tabs__item.is-active {
    color: var(--wm-bg);
    background: var(--wm-accent);
    box-shadow: 0 4px 14px rgba(38,166,154,.28);
}
.wm-tabs__item.is-active:hover { color: var(--wm-bg); background: var(--wm-accent-hi); }

/* Each tab is wrapped so it can host a hover sub-menu of that page's checks. */
.wm-tabs__item-wrap { position: relative; display: inline-flex; }
/* "Tools" is a general utility set, not one of the report-card tests -- set it apart. */
.wm-tabs__item-wrap--sep { margin-left: 18px; }
.wm-tabs__item-wrap--sep::before {
    content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 16px; background: var(--wm-line, #1d3b44);
}

/* ---- Hover sub-menu: the individual checks on each tab's page ---- */
.wm-tabs__submenu {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 206px;
    margin-top: 6px;
    padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.2);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--wm-t-fast), transform var(--wm-t-fast);
    z-index: 60;
}
/* Invisible bridge so the cursor can cross the gap from tab to menu without
   the menu collapsing. */
.wm-tabs__submenu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.wm-tabs__item-wrap:hover .wm-tabs__submenu,
.wm-tabs__item-wrap:focus-within .wm-tabs__submenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(2px);
}
.wm-tabs__subitem {
    padding: 11px 16px;
    border-radius: 8px;
    color: var(--wm-text-muted);
    font-size: 0.88rem; font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--wm-t-fast), background-color var(--wm-t-fast);
}
.wm-tabs__subitem:hover,
.wm-tabs__subitem:focus-visible {
    color: var(--wm-text); background: var(--wm-surface-alt); text-decoration: none;
}

.wm-mode-toggle {
    position: relative;
    display: inline-flex;
    background: var(--wm-surface);
    padding: 3px;
    border-radius: var(--wm-r-pill);
    border: 1px solid var(--wm-border);
}
.wm-mode-toggle__btn {
    padding: 6px 12px;
    border: 0; background: transparent;
    color: var(--wm-text-muted);
    font-weight: 500; font-size: 0.85rem;
    border-radius: var(--wm-r-pill);
    cursor: pointer;
    transition: color var(--wm-t-fast), background-color var(--wm-t-fast);
}
.wm-mode-toggle__btn:hover { color: var(--wm-text); }
.wm-mode-toggle__btn.is-active {
    background: var(--wm-accent);
    color: var(--wm-bg);
}

/* Hover / focus tooltip explaining Normal vs Advanced in plain English.
   Right-aligned under the toggle (which sits toward the right of the bar)
   so it never spills off the screen edge. */
.wm-mode-tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    transform: translateY(-4px);
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 11px 13px;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border-hi);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--wm-text);
    text-align: left;
    line-height: 1.5;
    box-shadow: var(--wm-shadow-3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 60;
}
.wm-mode-tip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--wm-accent);
    font-weight: 700;
}
.wm-mode-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-bottom-color: var(--wm-border-hi);
}
.wm-mode-tip::after {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    right: 20px;
    border: 6px solid transparent;
    border-bottom-color: var(--wm-bg);
}
.wm-mode-toggle:hover .wm-mode-tip,
.wm-mode-toggle:focus-within .wm-mode-tip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Mode-conditional visibility */
body.whoami-mode-normal   .wm-mode-advanced-only { display: none; }
body.whoami-mode-advanced .wm-mode-normal-only   { display: none; }

/* =========================================================================
   MAIN / HERO
   ========================================================================= */
.wm-main { padding-block: 32px 64px; }

.wm-hero { padding-block: 24px 8px; }
.wm-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(24px, 5vw, 60px);
    align-items: center;
}
.wm-hero__ident { min-width: 0; }
.wm-hero__eyebrow {
    color: var(--wm-text-muted);
    font-size: 0.85rem; font-weight: 500;
    letter-spacing: 0.02em; text-transform: uppercase;
    margin: 0 0 8px;
}
.wm-hero__ip {
    font-family: var(--wm-font-mono);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 600;
    color: var(--wm-text);
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    letter-spacing: -0.01em;
}
.wm-hero__geo, .wm-hero__asn {
    color: var(--wm-text-muted);
    margin: 4px 0;
    font-size: 1rem;
}
.wm-hero__cta {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 24px;
}

/* Skeleton shimmer for values while loading */
.wm-skeleton {
    display: inline-block;
    color: var(--wm-text-faint);
    background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.04) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: wm-shimmer 1.4s linear infinite;
    border-radius: 4px;
    padding: 0 4px;
}
@keyframes wm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.wm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    border-radius: var(--wm-r-btn);
    border: 1px solid transparent;
    font-weight: 600; font-size: 0.95rem;
    cursor: pointer;
    transition: background-color var(--wm-t-fast), color var(--wm-t-fast),
                border-color var(--wm-t-fast), transform var(--wm-t-fast);
    text-decoration: none;
    line-height: 1;
    min-height: 44px;
}
.wm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wm-btn:not(:disabled):hover { transform: translateY(-1px); text-decoration: none; }
.wm-btn:not(:disabled):active { transform: translateY(0); }

.wm-btn--primary {
    background: var(--wm-accent);
    color: var(--wm-bg);
    box-shadow: 0 4px 14px rgba(38,166,154,.32);
}
.wm-btn--primary:not(:disabled):hover { background: var(--wm-accent-hi); color: var(--wm-bg); }

.wm-btn--ghost {
    background: transparent;
    color: var(--wm-text);
    border-color: var(--wm-border-hi);
}
.wm-btn--ghost:not(:disabled):hover {
    background: var(--wm-surface-alt);
    border-color: var(--wm-accent);
    color: var(--wm-text);
}

/* =========================================================================
   SCORE RING (Overview)
   ========================================================================= */
.wm-score {
    position: relative;
    width: clamp(180px, 26vw, 240px);
    height: clamp(180px, 26vw, 240px);
    justify-self: end;
}
.wm-score__svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.wm-score__track {
    fill: none;
    stroke: var(--wm-surface-hi);
    stroke-width: 8;
}
.wm-score__fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--wm-t-slow);
    filter: drop-shadow(0 0 8px rgba(38,166,154,.35));
}
.wm-score__center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}
.wm-score__val {
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    font-weight: 700;
    color: var(--wm-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.wm-score__label {
    margin-top: 6px;
    color: var(--wm-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.wm-score.score-poor  .wm-score__val { color: var(--wm-leak); }
.wm-score.score-mid   .wm-score__val { color: var(--wm-warning); }
.wm-score.score-good  .wm-score__val { color: var(--wm-info); }
.wm-score.score-great .wm-score__val { color: var(--wm-safe); }

/* Confetti burst on score ≥ 90 */
.wm-confetti {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px;
    background: var(--c, var(--wm-accent));
    border-radius: 2px;
    pointer-events: none;
    animation: wm-confetti-fly 1.4s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes wm-confetti-fly {
    from { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
    to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; }
}

/* =========================================================================
   SNAPSHOT TILES (Overview grid)
   ========================================================================= */
.wm-snapshot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 32px;
}
.wm-tile {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-card);
    padding: 18px;
    transition: border-color var(--wm-t-fast), transform var(--wm-t-fast);
}
.wm-tile:hover { border-color: var(--wm-border-hi); transform: translateY(-2px); }
.wm-tile__label {
    margin: 0 0 6px;
    color: var(--wm-text-muted);
    font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.03em; text-transform: uppercase;
}
.wm-tile__value {
    margin: 0;
    font-family: var(--wm-font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wm-text);
    overflow-wrap: anywhere;
}
.wm-tile__meta {
    margin: 4px 0 0;
    color: var(--wm-text-muted);
    font-size: 0.82rem;
}
/* "Visit [Tab] →" hint shown until JS populates the tile value. */
.wm-tile__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wm-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--wm-accent);
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(38, 166, 154, 0.35);
    transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.wm-tile__hint:hover,
.wm-tile__hint:focus-visible {
    color: var(--wm-safe);
    border-bottom-color: var(--wm-safe);
    outline: none;
}
.wm-tile__hint-arrow {
    display: inline-block;
    transition: transform 160ms ease;
}
.wm-tile__hint:hover .wm-tile__hint-arrow,
.wm-tile__hint:focus-visible .wm-tile__hint-arrow {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .wm-tile__hint,
    .wm-tile__hint-arrow { transition: none; }
    .wm-tile__hint:hover .wm-tile__hint-arrow,
    .wm-tile__hint:focus-visible .wm-tile__hint-arrow { transform: none; }
}
.wm-tile[data-status="safe"]     { border-color: rgba(0,230,118,.35);  background: linear-gradient(var(--wm-safe-bg), var(--wm-safe-bg)) padding-box, var(--wm-surface); }
.wm-tile[data-status="warning"]  { border-color: rgba(255,202,40,.35); background: linear-gradient(var(--wm-warning-bg), var(--wm-warning-bg)) padding-box, var(--wm-surface); }
.wm-tile[data-status="leak"]     { border-color: rgba(255,82,82,.4);   background: linear-gradient(var(--wm-leak-bg), var(--wm-leak-bg)) padding-box, var(--wm-surface); }
.wm-tile[data-status="info"]     { border-color: rgba(79,195,247,.3);  }
.wm-tile[data-status="disabled"] { opacity: 0.55; }

/* =========================================================================
   TAB HERO (shared by /speed/, /privacy/, /fingerprint/, /device/, /tools/)
   ========================================================================= */
.wm-tab-hero { padding-block: 32px 8px; }
.wm-tab-hero__title {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: -0.01em;
}
.wm-tab-hero__lede {
    margin: 0;
    color: var(--wm-text-muted);
    max-width: 60ch;
    font-size: 1.05rem;
}

/* =========================================================================
   TEST CARDS (grid inside each tab)
   ========================================================================= */
.wm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}
.wm-card {
    position: relative;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-card);
    padding: 20px;
    transition: border-color var(--wm-t-fast), transform var(--wm-t-fast), box-shadow var(--wm-t-fast);
    min-height: 140px;
}
.wm-card:hover { border-color: var(--wm-border-hi); transform: translateY(-2px); box-shadow: var(--wm-shadow-2); }

.wm-card__head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
}
.wm-card__head .wm-card__badge { margin-left: auto; }
.wm-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wm-text);
    letter-spacing: -0.005em;
}
.wm-card__badge {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: var(--wm-r-pill);
    background: var(--wm-text-faint);
    transition: background-color var(--wm-t-fast), box-shadow var(--wm-t-fast);
}
.wm-card__value {
    margin: 4px 0 6px;
    font-family: var(--wm-font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wm-text);
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.wm-card__detail {
    margin: 0;
    color: var(--wm-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    /* Modules may embed \n in the detail string to force a line break
       between logically distinct sentences (e.g. Plugins & MIME lists
       standard vs non-standard entries). pre-line preserves those breaks
       while still collapsing normal runs of whitespace. */
    white-space: pre-line;
}

/* Card status colors */
.wm-card[data-status="safe"]     { border-color: rgba(0,230,118,.35); }
.wm-card[data-status="safe"] .wm-card__badge     { background: var(--wm-safe);    box-shadow: 0 0 8px rgba(0,230,118,.6); }
.wm-card[data-status="info"]     { border-color: rgba(79,195,247,.3); }
.wm-card[data-status="info"] .wm-card__badge     { background: var(--wm-info);    box-shadow: 0 0 8px rgba(79,195,247,.5); }
.wm-card[data-status="warning"]  { border-color: rgba(255,202,40,.4); }
.wm-card[data-status="warning"] .wm-card__badge  { background: var(--wm-warning); box-shadow: 0 0 8px rgba(255,202,40,.55); }
.wm-card[data-status="leak"]     { border-color: rgba(255,82,82,.45);  }
.wm-card[data-status="leak"] .wm-card__badge     { background: var(--wm-leak);    box-shadow: 0 0 10px rgba(255,82,82,.6); }
.wm-card[data-status="disabled"] { opacity: 0.55; }
.wm-card[data-status="disabled"] .wm-card__badge { background: var(--wm-disabled); }
.wm-card[data-status="pending"] .wm-card__badge  { background: var(--wm-text-faint); animation: wm-pulse 1.6s ease-in-out infinite; }

@keyframes wm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.wm-card.is-loading .wm-card__value::after {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-left: 8px;
    border-radius: 50%;
    border: 2px solid var(--wm-border-hi);
    border-top-color: var(--wm-accent);
    vertical-align: middle;
    animation: wm-spin 0.9s linear infinite;
}
@keyframes wm-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   TOOLS TAB (interactive forms)
   ========================================================================= */
.wm-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.wm-tools-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.wm-tools-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    background: var(--wm-surface);
    color: var(--wm-text-muted);
    border: 1px solid var(--wm-border-hi);
    border-radius: var(--wm-r-pill);
    font: 0.9rem var(--wm-font-body);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.wm-tools-filter__btn:hover { border-color: var(--wm-accent); color: var(--wm-text); }
.wm-tools-filter__btn.is-active {
    background: var(--wm-accent);
    color: var(--wm-bg);
    border-color: var(--wm-accent);
}
.wm-tools-filter__count { font-size: 0.75rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.wm-tool[hidden] { display: none; }
.wm-tool {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-card);
    padding: 22px;
}
.wm-tool[data-status="disabled"] { opacity: 0.55; }
.wm-tool h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 10px;
}
.wm-tool__coming {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    background: var(--wm-surface-hi);
    color: var(--wm-text-muted);
    border-radius: var(--wm-r-pill);
    letter-spacing: 0.03em; text-transform: uppercase;
}
.wm-tool__note {
    margin: 0 0 14px;
    color: var(--wm-text-muted);
    font-size: 0.9rem;
}
.wm-tool__form {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.wm-tool__form input {
    flex: 1 1 200px;
    padding: 10px 14px;
    background: var(--wm-surface-alt);
    color: var(--wm-text);
    border: 1px solid var(--wm-border-hi);
    border-radius: var(--wm-r-input);
    font: 0.95rem var(--wm-font-mono);
    min-height: 44px;
}
.wm-tool__form input:focus-visible {
    outline: none;
    border-color: var(--wm-accent);
    box-shadow: 0 0 0 2px rgba(38,166,154,.28);
}
.wm-tool__output {
    margin: 0;
    padding: 14px;
    background: var(--wm-surface-alt);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-btn);
    font: 0.85rem/1.55 var(--wm-font-mono);
    color: var(--wm-text-muted);
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.wm-tool__output:empty::before {
    content: 'Results will appear here.';
    color: var(--wm-text-faint);
    font-style: italic;
}
/* Rich output overrides the mono/preformatted look of the base <pre>. */
.wm-tool__output--rich {
    font-family: var(--wm-font-body);
    color: var(--wm-text);
    white-space: normal;
    max-height: 480px;
}
.wm-tool__h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wm-text);
    letter-spacing: 0.01em;
}
.wm-tool__h4 {
    margin: 14px 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wm-accent);
}
.wm-tool__meta {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--wm-text-faint);
}

/* Key/value row shared by whois + IP whois. */
.wm-kv {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 10px 16px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.wm-kv:last-child { border-bottom: none; }
.wm-kv__k {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wm-text-muted);
    align-self: start;
    padding-top: 3px;
}
.wm-kv__v {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--wm-text);
    font-family: var(--wm-font-mono);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}
.wm-chip {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(38, 166, 154, 0.12);
    border: 1px solid rgba(38, 166, 154, 0.25);
    border-radius: 999px;
    font-family: var(--wm-font-mono);
    font-size: 0.78rem;
    color: var(--wm-accent);
}

/* DNS record list */
.wm-dns-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wm-dns-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
}
.wm-dns-list code {
    font-family: var(--wm-font-mono);
    font-size: 0.85rem;
    color: var(--wm-text);
    overflow-wrap: anywhere;
}
.wm-dns-ttl {
    flex-shrink: 0;
    font-family: var(--wm-font-mono);
    font-size: 0.72rem;
    color: var(--wm-text-faint);
}

/* Port scan grid */
.wm-port-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin: 8px 0;
}
.wm-port {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--wm-border);
    background: rgba(255,255,255,0.02);
}
.wm-port--open {
    border-color: rgba(0,230,118,0.45);
    background: linear-gradient(var(--wm-safe-bg), var(--wm-safe-bg)) padding-box, var(--wm-surface);
}
.wm-port--closed { opacity: 0.75; }
.wm-port__num {
    font-family: var(--wm-font-mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wm-text);
}
.wm-port--open .wm-port__num { color: var(--wm-safe); }
.wm-port__state {
    font-family: var(--wm-font-mono);
    font-size: 0.72rem;
    color: var(--wm-text-muted);
}

/* Result badges (breach check, etc.) */
.wm-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.wm-badge--safe {
    background: rgba(0,230,118,0.14);
    color: var(--wm-safe);
    border: 1px solid rgba(0,230,118,0.35);
}
.wm-badge--leak {
    background: rgba(255,82,82,0.14);
    color: var(--wm-leak);
    border: 1px solid rgba(255,82,82,0.4);
}
.wm-badge--warning {
    background: rgba(255,202,40,0.14);
    color: var(--wm-warning);
    border: 1px solid rgba(255,202,40,0.4);
}
.wm-tool__code {
    display: block;
    margin: 4px 0 10px;
    padding: 6px 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    word-break: break-all;
    color: var(--wm-text-muted);
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
}

/* Password strength & breach check (client-side) */
.wm-pw__inputrow { display: flex; gap: 8px; margin-bottom: 10px; }
.wm-pw__input {
    flex: 1; font: inherit; font-size: 0.95rem; color: var(--wm-text);
    background: var(--wm-surface); border: 1px solid var(--wm-border);
    border-radius: 10px; padding: 10px 12px;
}
.wm-pw__input:focus { outline: none; border-color: var(--wm-accent); }
.wm-pw__meter { height: 8px; border-radius: 999px; background: var(--wm-surface);
    border: 1px solid var(--wm-border); overflow: hidden; margin-bottom: 12px; }
.wm-pw__bar { height: 100%; width: 0; transition: width .2s ease, background-color .2s ease; background: var(--wm-leak); }
.wm-pw__bar.is-weak { background: var(--wm-leak); }
.wm-pw__bar.is-fair { background: var(--wm-warning); }
.wm-pw__bar.is-strong { background: var(--wm-safe); }

/* Email header analyzer */
.wm-tool__form--stack { flex-direction: column; align-items: stretch; }
.wm-tool__textarea {
    width: 100%; box-sizing: border-box; font-size: 0.82rem;
    font-family: var(--wm-font-mono, ui-monospace, monospace); color: var(--wm-text);
    background: var(--wm-surface); border: 1px solid var(--wm-border);
    border-radius: 10px; padding: 10px 12px; resize: vertical; margin-bottom: 10px; line-height: 1.5;
}
.wm-tool__textarea:focus { outline: none; border-color: var(--wm-accent); }
.wm-hops { list-style: none; margin: 6px 0 0; padding: 0; }
.wm-hop { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--wm-border); font-size: 0.86rem; }
.wm-hop__n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--wm-surface);
    border: 1px solid var(--wm-border); display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; color: var(--wm-text-muted); }
.wm-hop__host { flex: 1; min-width: 0; color: var(--wm-text); word-break: break-all; }
.wm-hop__ip { color: var(--wm-text-muted); }
.wm-hop__delay { flex: 0 0 auto; color: var(--wm-accent); font-variant-numeric: tabular-nums; }

/* --- Analyst / IOC utilities ------------------------------------------- */
.wm-tools__divider {
    grid-column: 1 / -1;
    margin: 20px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--wm-border);
}
.wm-tools__divider h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
}
.wm-tools__divider p {
    margin: 0;
    color: var(--wm-text-muted);
    font-size: 0.9rem;
    max-width: 62ch;
}
.wm-tool__btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wm-tool__select {
    width: 100%; box-sizing: border-box; min-height: 44px;
    padding: 10px 14px; margin-bottom: 10px;
    background: var(--wm-surface-alt); color: var(--wm-text);
    border: 1px solid var(--wm-border-hi); border-radius: var(--wm-r-input);
    font: 0.92rem var(--wm-font-body); cursor: pointer;
}
.wm-tool__select:focus-visible { outline: none; border-color: var(--wm-accent); box-shadow: 0 0 0 2px rgba(38,166,154,.28); }
.wm-tool__filebtn { position: relative; cursor: pointer; }
.wm-tool__pre {
    margin: 10px 0 0; padding: 12px 14px;
    background: var(--wm-surface-alt); border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-btn);
    font: 0.82rem/1.55 var(--wm-font-mono); color: var(--wm-text);
    white-space: pre-wrap; word-break: break-word;
    max-height: 300px; overflow: auto;
}
.wm-tool__copy {
    margin-top: 10px; padding: 5px 12px;
    background: var(--wm-surface-hi); color: var(--wm-text);
    border: 1px solid var(--wm-border-hi); border-radius: var(--wm-r-pill);
    font-size: 0.78rem; cursor: pointer;
}
.wm-tool__copy:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-tool__desc { margin: 12px 0 0; color: var(--wm-text); font-size: 0.9rem; line-height: 1.55; }
.wm-ioc__head {
    margin: 12px 0 2px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--wm-accent);
}
.wm-kv--hash .wm-kv__k { font-family: var(--wm-font-mono); }
.wm-kv__hashv {
    font-family: var(--wm-font-mono); font-size: 0.82rem; color: var(--wm-text);
    word-break: break-all; overflow-wrap: anywhere; user-select: all;
}
.wm-footer__sub { color: var(--wm-text-faint); font-size: 0.8rem; list-style: none; }

/* --- Per-tool "?" help: button + hover tooltip + slide-in drawer ------ */
.wm-tool--has-help { position: relative; }
.wm-tool--has-help > h2 { padding-right: 30px; }
.wm-help-btn {
    position: absolute; top: 14px; right: 14px;
    width: 24px; height: 24px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--wm-border-hi);
    background: var(--wm-surface-alt); color: var(--wm-text-muted);
    font: 600 0.8rem var(--wm-font-body); cursor: pointer; z-index: 3;
}
.wm-help-btn:hover, .wm-help-btn:focus-visible { border-color: var(--wm-accent); color: var(--wm-accent); outline: none; }
.wm-help-btn__q { pointer-events: none; }
.wm-help-tip {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 240px; max-width: 70vw; padding: 8px 10px;
    background: var(--wm-surface-hi); color: var(--wm-text);
    border: 1px solid var(--wm-border-hi); border-radius: 8px;
    font: 400 0.78rem/1.45 var(--wm-font-body); text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s; z-index: 6;
}
.wm-help-btn:hover .wm-help-tip, .wm-help-btn:focus-visible .wm-help-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.wm-help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1200; }
.wm-help-drawer {
    position: fixed; top: 0; right: 0; height: 100%;
    width: min(460px, 94vw);
    background: var(--wm-surface); border-left: 1px solid var(--wm-border);
    transform: translateX(100%); transition: transform .26s ease;
    z-index: 1210; display: flex; flex-direction: column;
    box-shadow: -8px 0 30px rgba(0,0,0,.35);
}
.wm-help-drawer.is-open { transform: translateX(0); }
.wm-help-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid var(--wm-border);
}
.wm-help-drawer__title { margin: 0; font-size: 1.15rem; }
.wm-help-drawer__close {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--wm-border-hi); background: var(--wm-surface-alt);
    color: var(--wm-text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.wm-help-drawer__close:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-help-drawer__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wm-help-drawer__copy {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--wm-border-hi); background: var(--wm-surface-alt);
    color: var(--wm-text-muted); font: 0.78rem var(--wm-font-body); cursor: pointer;
}
.wm-help-drawer__copy:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-help-drawer__body { padding: 18px 20px 48px; overflow: auto; flex: 1; }
.wm-help-drawer__body p { margin: 0 0 12px; color: var(--wm-text); font-size: 0.92rem; line-height: 1.6; }
.wm-help-drawer__body code { font-family: var(--wm-font-mono); font-size: 0.85em; background: var(--wm-surface-alt); padding: 1px 5px; border-radius: 4px; }
.wm-help-h { margin: 18px 0 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wm-accent); }
.wm-help-h:first-child { margin-top: 0; }
body.wm-help-open { overflow: hidden; }

/* --- Export bar (TXT / CSV / XML / JSON) ------------------------------ */
.wm-export { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wm-export__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wm-text-muted); margin-right: 2px; }
.wm-export__btn {
    padding: 3px 10px; background: var(--wm-surface-alt); color: var(--wm-text-muted);
    border: 1px solid var(--wm-border-hi); border-radius: var(--wm-r-pill);
    font: 0.74rem var(--wm-font-mono); cursor: pointer;
}
.wm-export__btn:hover { border-color: var(--wm-accent); color: var(--wm-accent); }

/* --- Resizable output panel (e.g. email header analyzer) -------------- */
/* resize: both -> drag the corner grip vertically, horizontally or diagonally.
   max-width keeps it from overflowing its card and breaking the grid. */
.wm-tool__output--resize { resize: both; overflow: auto; max-height: none; height: 340px; min-height: 140px; max-width: 100%; min-width: 220px; }

/* --- QR code generator ------------------------------------------------ */
.wm-qr__field { position: relative; }
.wm-qr__count { text-align: right; font-size: 0.72rem; color: var(--wm-text-faint); margin: -4px 0 6px; font-variant-numeric: tabular-nums; }
.wm-qr__struct { display: grid; gap: 8px; margin-bottom: 10px; }
.wm-qr__struct input, .wm-qr__struct select { width: 100%; box-sizing: border-box; margin: 0; }
.wm-qr__canvas {
    display: block; margin: 4px auto 0; max-width: 100%; height: auto;
    background: #fff; border-radius: 8px; padding: 8px;
    image-rendering: pixelated; image-rendering: crisp-edges;
}
.wm-qr__export { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* `hidden` must win over the display rules above. */
.wm-qr__struct[hidden], .wm-qr__export[hidden], .wm-qr__field[hidden] { display: none; }

/* --- Test-tab "?" routed to the drawer (Speed/Privacy/Media/etc.) ------ */
/* With JS active, the inline card panel is suppressed; the drawer shows it. */
.wm-help-drawers .wm-card__learn { display: none !important; }
/* Style the cloned inline explanation consistently inside the drawer. */
.wm-help-drawer__body .wm-learn__inner { display: block; }
.wm-help-drawer__body .wm-learn__section { margin: 0 0 18px; padding: 0; border: 0; background: none; }
.wm-help-drawer__body .wm-learn__h {
    margin: 0 0 6px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--wm-accent);
}
.wm-help-drawer__body .wm-learn__section p { margin: 0 0 10px; color: var(--wm-text); font-size: 0.92rem; line-height: 1.6; }
/* ui-gauge-info still adds `wm-card--is-open` on hover (to open the now-hidden
   inline panel), which the base CSS uses to suppress the tooltip — causing a
   flash-then-vanish. Keep the hover tooltip visible while the "?" is hovered. */
.wm-help-drawers .wm-card--is-open .wm-card__info:hover .wm-card__tooltip,
.wm-help-drawers .wm-card--is-open .wm-card__info:focus-visible .wm-card__tooltip {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* =========================================================================
   AD ZONES
   ========================================================================= */
.wm-ad {
    max-width: var(--wm-container);
    margin: 32px auto;
    padding: 12px var(--wm-container-pad);
}
.wm-ad__label {
    margin: 0 0 6px;
    color: var(--wm-text-faint);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}
.wm-ad__slot {
    min-height: 90px;
    background: var(--wm-surface-alt);
    border: 1px dashed var(--wm-border);
    border-radius: var(--wm-r-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wm-text-faint);
    font-size: 0.85rem;
}
.wm-ad__slot:empty::before {
    content: '(ad slot)';
}

/* =========================================================================
   EXPLAIN / OVERVIEW LINK GRID
   ========================================================================= */
.wm-explain {
    margin-top: 48px;
    padding-block: 12px;
}
.wm-explain h2 {
    margin: 0 0 8px;
    font-size: 1.4rem;
}
.wm-explain p {
    color: var(--wm-text-muted);
    max-width: 60ch;
    margin: 0 0 20px;
}
.wm-explain__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.wm-explain__grid li a {
    display: block;
    padding: 14px 16px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-btn);
    color: var(--wm-text);
    font-weight: 500;
    transition: border-color var(--wm-t-fast), color var(--wm-t-fast), transform var(--wm-t-fast);
}
.wm-explain__grid li a:hover {
    border-color: var(--wm-accent);
    color: var(--wm-accent-hi);
    text-decoration: none;
    transform: translateX(2px);
}

/* =========================================================================
   ARTICLE / PAGE
   ========================================================================= */
.wm-article {
    padding-block: 24px 48px;
    max-width: 70ch;
}
.wm-article__title {
    margin: 0 0 20px;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}
.wm-article__body { color: var(--wm-text); }
.wm-article__body h2 { margin-top: 2em; }
.wm-article__body p  { color: var(--wm-text); }

/* =========================================================================
   MODAL (Share)
   ========================================================================= */
.wm-modal {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    padding: 20px;
}
.wm-modal[hidden] { display: none !important; }
.wm-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(4,8,6,.72);
    backdrop-filter: blur(6px);
}
.wm-modal__panel {
    position: relative;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border-hi);
    border-radius: var(--wm-r-card);
    padding: 28px;
    width: min(560px, 100%);
    box-shadow: var(--wm-shadow-2);
    max-height: 90vh;
    overflow: auto;
}
.wm-modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    border: 0; background: var(--wm-surface-alt);
    color: var(--wm-text);
    border-radius: var(--wm-r-pill);
    font-size: 20px;
    cursor: pointer;
    display: grid; place-items: center;
}
.wm-modal__close:hover { background: var(--wm-surface-hi); }
.wm-modal__title { margin: 0 0 16px; font-size: 1.25rem; }

.wm-share__preview {
    background: var(--wm-surface-alt);
    border-radius: var(--wm-r-card);
    padding: 12px;
    margin-bottom: 20px;
    min-height: 160px;
    display: grid; place-items: center;
}
.wm-share__actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.wm-share__hint {
    margin: 14px 0 0;
    color: var(--wm-text-faint);
    font-size: 0.8rem;
}

/* =========================================================================
   TOAST
   ========================================================================= */
.wm-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translate(-50%, 20px);
    padding: 12px 18px;
    background: var(--wm-surface-hi);
    border: 1px solid var(--wm-border-hi);
    border-radius: var(--wm-r-pill);
    color: var(--wm-text);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--wm-t-med), opacity var(--wm-t-med);
    max-width: calc(100% - 40px);
    box-shadow: var(--wm-shadow-2);
}
.wm-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.wm-toast[data-kind="safe"] { border-color: var(--wm-safe); }
.wm-toast[data-kind="leak"] { border-color: var(--wm-leak); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.wm-footer {
    margin-top: 80px;
    border-top: 1px solid var(--wm-border);
    background: rgba(6,11,9,.6);
    padding-block: 40px 32px;
}
.wm-footer__inner {
    max-width: var(--wm-container);
    margin-inline: auto;
    padding-inline: var(--wm-container-pad);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
}
.wm-footer__col h3.wm-footer__heading {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--wm-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wm-footer__brand {
    margin: 0 0 6px;
    font-weight: 700; font-size: 1.1rem;
}
.wm-footer__tag {
    margin: 0;
    color: var(--wm-text-muted);
    font-size: 0.9rem;
    max-width: 40ch;
}
.wm-footer__col ul {
    list-style: none; margin: 0; padding: 0;
}
.wm-footer__col ul li { margin: 4px 0; }
.wm-footer__col ul li a {
    color: var(--wm-text-muted);
    font-size: 0.9rem;
}
.wm-footer__col ul li a:hover { color: var(--wm-accent); }
.wm-footer__copy {
    max-width: var(--wm-container);
    margin: 32px auto 0;
    padding-inline: var(--wm-container-pad);
    color: var(--wm-text-faint);
    font-size: 0.8rem;
}

/* =========================================================================
   SHARE PAGE (/r/<hash>)
   ========================================================================= */
.wm-share-page {
    padding-block: 40px 60px;
    max-width: 900px;
}
.wm-share-page__eyebrow {
    margin: 0 0 12px;
    color: var(--wm-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.wm-share-page__score {
    display: inline-grid;
    place-items: center;
    padding: 24px 32px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border-hi);
    border-radius: var(--wm-r-card);
    margin: 12px 0 20px;
}
.wm-share-page__score-val {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--wm-accent);
    line-height: 1;
}
.wm-share-page__score-lbl {
    margin-top: 4px;
    color: var(--wm-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.wm-share-page__meta {
    margin: 0 0 20px;
    color: var(--wm-text-muted);
    font-size: 0.9rem;
}
.wm-share-page__meta code {
    font-family: var(--wm-font-mono);
    background: var(--wm-surface);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--wm-text);
}
.wm-share-page__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--wm-surface);
    border-radius: var(--wm-r-card);
    overflow: hidden;
    border: 1px solid var(--wm-border);
}
.wm-share-page__table th,
.wm-share-page__table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--wm-border);
    font-size: 0.9rem;
}
.wm-share-page__table th {
    background: var(--wm-surface-alt);
    color: var(--wm-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
}
.wm-share-page__table tr:last-child td { border-bottom: 0; }
.wm-share-page__table tr[data-status="safe"]    td:nth-child(2) { color: var(--wm-safe); }
.wm-share-page__table tr[data-status="warning"] td:nth-child(2) { color: var(--wm-warning); }
.wm-share-page__table tr[data-status="leak"]    td:nth-child(2) { color: var(--wm-leak); font-weight: 600; }
.wm-share-page__cta { margin-top: 28px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
    .wm-topbar__inner {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
    .wm-tabs {
        order: 3;
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--wm-container-pad));
        padding: 4px var(--wm-container-pad) 8px;
        scrollbar-width: none;
    }
    .wm-tabs::-webkit-scrollbar { display: none; }
    .wm-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .wm-hero__ident { order: 2; }
    .wm-score { justify-self: center; order: 1; }
    .wm-footer__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
@media (max-width: 500px) {
    .wm-btn { width: 100%; }
    .wm-hero__cta { flex-direction: column; }
    .wm-tool__form { flex-direction: column; }
    .wm-tool__form input,
    .wm-tool__form button { width: 100%; }
}

/* =========================================================================
   REDUCED MOTION — respect user preferences
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .wm-confetti { display: none; }
    .wm-skeleton { animation: none; }
    .wm-card__badge { animation: none !important; }
}

/* =========================================================================
   SPEED TAB — hero card, gauge, info tooltip, learn-more panel
   ========================================================================= */

/* --- Compact card grid variant (secondary tests on speed tab) --- */
.wm-cards--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.wm-cards--compact .wm-card {
    padding: 16px;
    min-height: 120px;
}
.wm-cards--compact .wm-card__value {
    font-size: 1.05rem;
}

/* --- Hero speed test card --- */
.wm-speed-hero {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 24px;
}
.wm-card--hero {
    padding: 32px 36px;
    min-height: 340px;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(38, 166, 154, 0.09), transparent 55%),
        var(--wm-surface);
    border-width: 1px;
    border-color: rgba(38, 166, 154, 0.25);
    box-shadow: var(--wm-shadow-2), 0 0 0 1px rgba(38, 166, 154, 0.08) inset;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "head  gauge"
        "value gauge"
        "detail gauge"
        "learn learn";
    grid-template-rows: auto auto 1fr auto;
    gap: 8px 32px;
    align-items: start;
}
.wm-card--hero .wm-card__head    { grid-area: head; margin-bottom: 4px; }
/* Hero card: hide the status badge dot — the giant gauge already tells the
 * story, and the extra dot in the top-left just looks like an orphaned pixel. */
.wm-card--hero .wm-card__badge   { display: none; }
.wm-card--hero .wm-card__value   { grid-area: value; margin: 0; }
.wm-card--hero .wm-card__detail  { grid-area: detail; }
.wm-card--hero .wm-gauges        { grid-area: gauge; align-self: center; justify-self: center; }
.wm-card--hero .wm-gauge         { align-self: center; justify-self: center; }
.wm-card--hero .wm-card__learn   { grid-area: learn; }

.wm-card--hero .wm-card__title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wm-text-muted);
    font-weight: 700;
}
.wm-card--hero .wm-card__value {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--wm-text);
}
.wm-card--hero .wm-card__detail {
    font-size: 0.92rem;
    color: var(--wm-text-muted);
    max-width: 46ch;
}

@media (max-width: 780px) {
    .wm-card--hero {
        padding: 24px 20px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "gauge"
            "value"
            "detail"
            "learn";
        gap: 12px;
    }
    .wm-card--hero .wm-card__value { font-size: 2rem; text-align: center; }
    .wm-card--hero .wm-card__title { text-align: center; }
    .wm-card--hero .wm-card__detail { text-align: center; max-width: 100%; }
}

/* --- SVG gauge --- */
.wm-gauge {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 200 / 135;
    position: relative;
}
.wm-gauge svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.wm-gauge__track {
    stroke: rgba(255, 255, 255, 0.06);
}
.wm-gauge__fill {
    stroke: url(#wm-gauge-gradient); /* fallback below if SVG lacks defs */
    stroke: var(--wm-accent);
    transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1),
                stroke 400ms ease;
    filter: drop-shadow(0 0 6px rgba(38, 166, 154, 0.35));
}
.wm-gauge__fill--tier-slow { stroke: var(--wm-leak); filter: drop-shadow(0 0 6px rgba(255, 82, 82, 0.35)); }
.wm-gauge__fill--tier-ok   { stroke: var(--wm-warning); filter: drop-shadow(0 0 6px rgba(255, 202, 40, 0.35)); }
.wm-gauge__fill--tier-good { stroke: var(--wm-accent); filter: drop-shadow(0 0 6px rgba(38, 166, 154, 0.4)); }
.wm-gauge__fill--tier-fast { stroke: var(--wm-safe); filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.45)); }

.wm-gauge__ticks line {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Needle rotation is driven by requestAnimationFrame in ui-gauge-info.js.
 * The rotation is applied inline as SVG transform="rotate(deg 100 100)" —
 * which already includes the pivot — so we deliberately set NO CSS
 * transform-origin here. Setting one causes a double-transform in some
 * browsers and detaches the needle from the hub. */
.wm-gauge__needle {
    transform-origin: 0 0;
}
.wm-gauge__needle line {
    stroke: var(--wm-text);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Center hub — rendered outside the rotating group so it stays perfectly
 * anchored on the arc's geometric center. Two concentric circles create a
 * "screw head" look with the accent color. */
.wm-gauge__hub-outer {
    fill: var(--wm-accent);
    stroke: var(--wm-surface);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(38, 166, 154, 0.5));
}
.wm-gauge__hub-inner {
    fill: var(--wm-bg);
    stroke: none;
}

/* Live digital readout inside the gauge, under the hub */
.wm-gauge__readout {
    fill: var(--wm-text);
    font-family: var(--wm-font-mono);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.wm-gauge__unit {
    fill: var(--wm-text-faint);
    font-family: var(--wm-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* Rendered as authored: "Mbps" — mixed case is the SI-correct form. */
    text-transform: none;
}
/* End-of-arc labels (0 / mid / max). Positioned absolutely under the arc
 * endpoints so they never overlap the centered MBPS unit text. */
.wm-gauge__labels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    display: flex;
    justify-content: space-between;
    padding: 0 4%;
    font-family: var(--wm-font-mono);
    font-size: 0.7rem;
    color: var(--wm-text-faint);
    pointer-events: none;
}
/* Hide the mid label — it sits behind the needle/readout anyway */
.wm-gauge__labels span:nth-child(2) { visibility: hidden; }

/* When the test is running, pulse the needle subtly */
.wm-card[data-status="pending"].is-loading .wm-gauge__needle {
    animation: wm-needle-pulse 1.2s ease-in-out infinite;
}
@keyframes wm-needle-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* --- Info button + tooltip --- */
.wm-card__info {
    background: transparent;
    border: 1px solid var(--wm-border);
    color: var(--wm-text-muted);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    position: relative;
    transition: color var(--wm-t-fast), border-color var(--wm-t-fast), background var(--wm-t-fast);
    flex-shrink: 0;
    margin-left: 4px;
}
.wm-card__info:hover,
.wm-card__info:focus-visible {
    color: var(--wm-accent);
    border-color: var(--wm-accent);
    background: rgba(38, 166, 154, 0.08);
    outline: none;
}
.wm-card__info[aria-expanded="true"] {
    color: var(--wm-bg);
    background: var(--wm-accent);
    border-color: var(--wm-accent);
}
.wm-card__info-icon { pointer-events: none; }

.wm-card__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: -8px;
    width: 260px;
    padding: 10px 12px;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border-hi);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wm-text);
    text-align: left;
    line-height: 1.45;
    box-shadow: var(--wm-shadow-3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 20;
}
.wm-card__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 14px;
    border: 6px solid transparent;
    border-top-color: var(--wm-border-hi);
}
.wm-card__info:hover .wm-card__tooltip,
.wm-card__info:focus-visible .wm-card__tooltip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Once the full learn-more panel is open (hover or click), suppress the
 * short tooltip so the two info surfaces don't fight for attention. */
.wm-card--is-open .wm-card__tooltip {
    opacity: 0 !important;
    pointer-events: none !important;
}
.wm-card__tooltip-cta {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--wm-accent);
    letter-spacing: 0.02em;
}

/* Cards need overflow visible so the tooltip can escape */
.wm-card { overflow: visible; }

/* --- Learn more expandable panel --- */
.wm-card__learn {
    grid-column: 1 / -1;
    margin-top: 16px;
    border-top: 1px solid var(--wm-border);
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms cubic-bezier(0.22, 1, 0.36, 1), padding-top 400ms ease;
}
.wm-card__learn[hidden] {
    display: block; /* keep it in the flow so max-height animates */
}
.wm-card--is-open .wm-card__learn {
    max-height: 2000px;
    padding-top: 16px;
}
.wm-learn__inner {
    display: grid;
    gap: 14px;
    color: var(--wm-text);
    font-size: 0.9rem;
    line-height: 1.6;
}
.wm-learn__section h4.wm-learn__h {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wm-accent);
}
.wm-learn__section p {
    margin: 0;
    color: var(--wm-text);
}
.wm-learn__inner .wm-ad {
    margin-top: 8px;
}

/* ==============================================================
 * Affiliate product card (inside Learn-more panels)
 * ============================================================== */
.wm-affiliate {
    margin: 20px 0 8px;
    padding: 14px 16px;
    background: rgba(38, 166, 154, 0.05);
    border: 1px solid rgba(38, 166, 154, 0.25);
    border-radius: 10px;
}
.wm-affiliate__label {
    margin: 0 0 10px;
    font-family: var(--wm-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wm-accent);
}
.wm-affiliate__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) {
    .wm-affiliate__list { grid-template-columns: 1fr 1fr; }
}
.wm-affiliate__item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    transition: border-color var(--wm-t-fast), transform var(--wm-t-fast);
}
.wm-affiliate__item:hover {
    border-color: var(--wm-accent);
    transform: translateY(-1px);
}
.wm-affiliate__img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 4px;
}
.wm-affiliate__body { flex: 1; min-width: 0; }
.wm-affiliate__title {
    margin: 0 0 4px;
    font-weight: 600;
    line-height: 1.25;
}
.wm-affiliate__link {
    color: var(--wm-text);
    text-decoration: none;
}
.wm-affiliate__link:hover { color: var(--wm-accent); }
.wm-affiliate__blurb {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--wm-text-muted);
    line-height: 1.4;
}
.wm-affiliate__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}
.wm-affiliate__price {
    font-family: var(--wm-font-mono);
    font-size: 0.8rem;
    color: var(--wm-text-faint);
}
.wm-affiliate__cta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wm-accent);
    text-decoration: none;
}
.wm-affiliate__cta:hover { text-decoration: underline; }
.wm-affiliate__disclosure {
    margin: 10px 0 0;
    font-size: 0.7rem;
    color: var(--wm-text-faint);
    font-style: italic;
}

/* ==============================================================
 * Speed page round-3 polish
 * ============================================================== */

/* Thicker card borders \u2014 stronger visual separation between sections. */
.wm-card {
    border-width: 2px;
}
.wm-card:hover { border-width: 2px; }
.wm-card[data-status="safe"]    { border-color: var(--wm-safe); }
.wm-card[data-status="info"]    { border-color: var(--wm-info); }
.wm-card[data-status="warning"] { border-color: var(--wm-warn); }
.wm-card[data-status="leak"]    { border-color: var(--wm-leak); }

/* Two-line speed_test value: "875 Mbps Download Speed" per line */
.wm-card__value:has(.wm-speed-line) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.15;
}
.wm-speed-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.wm-speed-line__num {
    font-family: var(--wm-font-mono);
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    font-weight: 700;
    color: var(--wm-text);
    letter-spacing: -0.02em;
}
.wm-speed-line__unit {
    font-family: var(--wm-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wm-text-muted);
    /* Render "Mbps" and "ms" as authored (mixed case is SI-correct). */
    text-transform: none;
    letter-spacing: 0.02em;
}
.wm-speed-line__what {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--wm-text-muted);
}
.wm-speed-line--muted { color: var(--wm-text-faint); font-family: var(--wm-font-mono); font-size: 1rem; }

/* "Go / Run again" button on the hero card */
.wm-card__run {
    grid-area: run;
    justify-self: start;
    align-self: start;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 10px 16px;
    background: var(--wm-accent);
    color: var(--wm-bg);
    border: 2px solid var(--wm-accent);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform var(--wm-t-fast), box-shadow var(--wm-t-fast), background var(--wm-t-fast);
    box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.4);
}
.wm-card__run:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(38, 166, 154, 0.4);
}
.wm-card__run:active { transform: translateY(0); }
.wm-card__run:disabled,
.wm-card__run.is-running {
    background: var(--wm-surface);
    color: var(--wm-text-muted);
    border-color: var(--wm-border);
    cursor: wait;
    box-shadow: none;
}
.wm-card__run.is-running .wm-card__run-icon {
    animation: wm-spin 0.9s linear infinite;
}
@keyframes wm-spin { to { transform: rotate(360deg); } }
.wm-card__run-icon { flex-shrink: 0; }

/* Hero grid: add a "run" area under the value column so the button sits
 * right under the numbers on desktop, and just below on mobile.
 * Keeps head in the left column (matches original layout) with the gauge
 * spanning the full right column. */
.wm-card--hero {
    grid-template-areas:
        "head  gauge"
        "value gauge"
        "run   gauge"
        "detail gauge"
        "learn learn";
}
.wm-card--hero .wm-card__run { grid-area: run; }
@media (max-width: 720px) {
    .wm-card--hero {
        grid-template-areas:
            "head"
            "gauge"
            "value"
            "run"
            "detail"
            "learn";
    }
}

/* Color-key tooltip on the status badge */
.wm-card__badge {
    position: relative;
    cursor: help;
    outline: none;
}
.wm-card__badge:focus-visible { box-shadow: 0 0 0 2px var(--wm-accent); border-radius: 50%; }
.wm-card__badge-tip {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    padding: 12px 14px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border-hi);
    border-radius: 8px;
    box-shadow: var(--wm-shadow-2);
    font-size: 0.78rem;
    color: var(--wm-text);
    line-height: 1.35;
    z-index: 30;
    text-align: left;
}
.wm-card__badge-tip strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wm-text-faint);
    font-weight: 700;
}
.wm-card__badge-tip span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wm-card__badge:hover .wm-card__badge-tip,
.wm-card__badge:focus-visible .wm-card__badge-tip {
    display: flex;
}
.wm-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wm-dot--safe    { background: var(--wm-safe); }
.wm-dot--info    { background: var(--wm-info); }
.wm-dot--warning { background: var(--wm-warn); }
.wm-dot--leak    { background: var(--wm-leak); }
.wm-dot--pending { background: var(--wm-border-hi); }

/* ==============================================================
 * Speed page round-4: sparklines + area compare
 * ============================================================== */

/* Speed lines: allow inline sparkline placement */
.wm-speed-line--ping .wm-speed-line__num {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);  /* ping is a smaller number */
    color: var(--wm-text-muted);
}
.wm-speed-line--ping .wm-speed-line__unit { font-size: 0.75rem; }

/* Sparkline pair beside the value column */
.wm-sparklines {
    grid-area: sparks;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
    margin-top: 4px;
}
.wm-spark {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wm-accent);  /* currentColor for path + gradient */
}
.wm-spark[data-spark-phase="upload"] { color: var(--wm-info); }
.wm-spark svg {
    width: 100%;
    max-width: 260px;
    height: 34px;
    display: block;
    overflow: visible;
}
.wm-spark__label {
    font-family: var(--wm-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wm-text-faint);
    min-width: 62px;
}
.wm-spark__dot {
    filter: drop-shadow(0 0 4px currentColor);
}

/* "vs. your area" pill */
.wm-area-compare {
    grid-area: compare;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 999px;
    margin-top: 4px;
    align-self: start;
    justify-self: start;
    font-size: 0.85rem;
}
.wm-area-compare[hidden] { display: none; }
.wm-area-compare__label {
    color: var(--wm-text-faint);
    font-family: var(--wm-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.wm-area-compare__value {
    font-weight: 700;
    color: var(--wm-text);
}
.wm-area-compare__note {
    color: var(--wm-text-muted);
    font-size: 0.75rem;
}
.wm-area-compare.is-good    .wm-area-compare__value { color: var(--wm-safe); }
.wm-area-compare.is-warning .wm-area-compare__value { color: var(--wm-warn); }
.wm-area-compare.is-info    .wm-area-compare__value { color: var(--wm-info); }

/* Hero card grid: add sparks + compare rows.
 * Desktop layout:
 *   head    | gauge
 *   value   | gauge
 *   sparks  | gauge
 *   compare | gauge
 *   run     | gauge
 *   detail  | gauge
 *   learn   | learn
 */
.wm-card--hero {
    grid-template-areas:
        "head    gauge"
        "value   gauge"
        "sparks  gauge"
        "compare gauge"
        "run     gauge"
        "detail  gauge"
        "learn   learn";
}
@media (max-width: 720px) {
    .wm-card--hero {
        grid-template-areas:
            "head"
            "gauge"
            "value"
            "sparks"
            "compare"
            "run"
            "detail"
            "learn";
    }
    .wm-spark svg { max-width: 100%; }
}

/* ==============================================================
 * Speed page round-5: dual gauges (Download + Upload)
 *
 * The hero card renders TWO gauges side-by-side inside the "gauge"
 * grid area. Download sits on the left, Upload on the right. Each
 * has its own title above the arc so users know which is which.
 *
 * During the test, whichever gauge's phase is currently measuring
 * gets .is-active (full color); the other dims to .is-idle so
 * attention flows naturally left -> right as the test progresses.
 * ============================================================== */

.wm-gauges {
    grid-area: gauge;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.wm-gauges--dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
}

/* When rendered as a dual pair, each gauge caps at half the row width
 * so both fit comfortably. Base .wm-gauge (single) keeps its 340px max. */
.wm-gauge--dual {
    max-width: 100%;
}

/* Per-gauge title (Download / Upload) sits above the arc */
.wm-gauge__title {
    text-align: center;
    font-family: var(--wm-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wm-text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}

/* Active/idle color hint. When a gauge's phase is currently being
 * measured, the title brightens to accent; the sibling dims so the
 * eye lands on the moving needle. Falls back gracefully if a browser
 * doesn't support :has(). */
.wm-gauge.is-active .wm-gauge__title {
    color: var(--wm-accent);
}
.wm-gauge[data-gauge-phase="upload"].is-active .wm-gauge__title {
    color: var(--wm-info);
}
.wm-gauges--dual .wm-gauge:not(.is-active):not(:only-child) {
    opacity: 0.55;
    transition: opacity 260ms ease;
}
.wm-gauges--dual .wm-gauge.is-active {
    opacity: 1;
    transition: opacity 260ms ease;
}

/* Tighten sub-gauge internal typography a touch since two are packed
 * into the space one used to occupy. */
.wm-gauge--dual .wm-gauge__readout { font-size: 1.6rem; }
.wm-gauge--dual .wm-gauge__unit    { font-size: 0.72rem; }
.wm-gauge--dual .wm-gauge__labels  { font-size: 0.66rem; }

/* Mobile: stack the two gauges vertically so each stays legible */
@media (max-width: 720px) {
    .wm-gauges--dual {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .wm-gauge--dual .wm-gauge__title { font-size: 0.7rem; }
}

/* ==============================================================
 * Speed page round-7: persistent info strip below compact cards
 *
 * Replaces the per-card "?" hover panels with a single 4-column
 * strip that mirrors the cards above it. On mobile, stacks to one
 * column so each explanation stays readable.
 * ============================================================== */

.wm-speed-info {
    margin-top: 40px;
    margin-bottom: 40px;
}
.wm-speed-info__heading {
    font-size: 1.1rem;
    font-family: var(--wm-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wm-text-muted);
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wm-border);
}
.wm-speed-info__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 1100px) {
    .wm-speed-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .wm-speed-info__grid { grid-template-columns: 1fr; }
}
.wm-speed-info__card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wm-speed-info__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wm-text);
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wm-border);
    letter-spacing: -0.005em;
}
.wm-speed-info__short {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--wm-text-muted);
    margin: -6px 0 0;
    font-style: italic;
}
.wm-speed-info__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wm-speed-info__h {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wm-accent);
    font-family: var(--wm-font-mono);
    font-weight: 700;
    margin: 0;
}
.wm-speed-info__section p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--wm-text-muted);
    margin: 0;
}

/* ==============================================================
 * Recommendations panel
 * ============================================================== */
.wm-recs {
    margin-top: 40px;
    margin-bottom: 40px;
}
.wm-recs__header {
    margin-bottom: 20px;
}
.wm-recs__h {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--wm-text);
    letter-spacing: -0.01em;
}
.wm-recs__sub {
    margin: 0;
    color: var(--wm-text-muted);
    font-size: 0.95rem;
}
.wm-recs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.wm-recs__card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.wm-recs__card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--wm-info);
}
.wm-recs__card[data-rec-id*="webrtc"]::before,
.wm-recs__card[data-rec-id*="dns"]::before,
.wm-recs__card[data-rec-id*="bufferbloat"]::before {
    background: var(--wm-warning, #ff8c42);
}
.wm-recs__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.wm-recs__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-family: var(--wm-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
}
.wm-recs__badge--high {
    background: rgba(255, 90, 90, 0.15);
    color: #ff7a7a;
    border: 1px solid rgba(255, 90, 90, 0.3);
}
.wm-recs__badge--med {
    background: rgba(255, 165, 0, 0.12);
    color: #ffb74d;
    border: 1px solid rgba(255, 165, 0, 0.25);
}
.wm-recs__badge--low {
    background: rgba(100, 220, 255, 0.1);
    color: var(--wm-info);
    border: 1px solid rgba(100, 220, 255, 0.2);
}
.wm-recs__group {
    font-size: 0.7rem;
    color: var(--wm-text-muted);
    font-family: var(--wm-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.wm-recs__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--wm-text);
    line-height: 1.3;
}
.wm-recs__why {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--wm-text-muted);
    margin: 0;
}
.wm-recs__steps {
    margin: 0;
    padding-left: 22px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--wm-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wm-recs__steps li::marker {
    color: var(--wm-accent);
    font-family: var(--wm-font-mono);
    font-weight: 700;
}
.wm-recs__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.wm-recs__links a {
    font-size: 0.8rem;
    color: var(--wm-accent);
    text-decoration: none;
    font-family: var(--wm-font-mono);
    border-bottom: 1px dashed rgba(100, 255, 218, 0.3);
    padding-bottom: 1px;
}
.wm-recs__links a:hover {
    border-bottom-style: solid;
}
.wm-recs__empty {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-left: 3px solid var(--wm-accent);
    border-radius: 12px;
    padding: 22px 26px;
}
.wm-recs__empty h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--wm-accent);
}
.wm-recs__empty p {
    margin: 0;
    color: var(--wm-text-muted);
    font-size: 0.9rem;
}
@media (max-width: 640px) {
    .wm-recs__grid { grid-template-columns: 1fr; }
    .wm-recs__card { padding: 16px 18px; }
}

/* ==============================================================
 * Status-aware "Now what?" variants
 * The visible variant gets a status-colored left accent bar so
 * green findings look encouraging and red findings look urgent.
 * ============================================================== */
.wm-learn__section--now .wm-learn__nowvariant {
    border-left: 3px solid var(--wm-accent);
    padding: 6px 0 6px 12px;
    margin-top: 4px;
    background: linear-gradient(90deg, rgba(0,255,209,0.05), transparent 60%);
}
.wm-learn__section--now .wm-learn__nowvariant[data-status="safe"] {
    border-left-color: #4ade80; /* green */
    background: linear-gradient(90deg, rgba(74,222,128,0.08), transparent 60%);
}
.wm-learn__section--now .wm-learn__nowvariant[data-status="leak"] {
    border-left-color: #f87171; /* red */
    background: linear-gradient(90deg, rgba(248,113,113,0.10), transparent 60%);
}
.wm-learn__section--now .wm-learn__nowvariant[data-status="warning"] {
    border-left-color: #fbbf24; /* amber */
    background: linear-gradient(90deg, rgba(251,191,36,0.10), transparent 60%);
}
.wm-learn__section--now .wm-learn__nowvariant[data-status="info"] {
    border-left-color: #67e8f9; /* cyan */
    background: linear-gradient(90deg, rgba(103,232,249,0.08), transparent 60%);
}
.wm-learn__section--now .wm-learn__nowvariant p {
    margin: 0;
}

/* ==============================================================
 * Connection identity strip (below tab title)
 * Shows IP, City/Region/Country, and ISP+ASN as soon as they land.
 * Deliberately compact and quiet so the primary content still wins.
 * ============================================================== */
.wm-connid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 255, 209, 0.16);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0,255,209,0.03), transparent);
    font-family: var(--wm-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 13px;
}
.wm-connid__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.wm-connid__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
}
.wm-connid__val {
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60ch;
}
.wm-connid__val[data-loading="1"] {
    color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 640px) {
    .wm-connid { font-size: 12px; padding: 8px 10px; gap: 2px 16px; }
    .wm-connid__val { max-width: 26ch; }
}

/* ==============================================================
 * VPN / Proxy Signal card -- stacked ISP + ASN display
 * ISP on line 1 (matches the card's value size), ASN on line 2
 * (smaller, mono, muted), verdict paragraph on line 3.
 * ============================================================== */
.wm-card .wm-vpn-isp {
    display: block;
    line-height: 1.15;
    /* let long ISP names wrap gracefully instead of ellipsizing */
    word-break: break-word;
}
.wm-card .wm-vpn-asn {
    display: block;
    margin-top: 4px;
    font-family: var(--wm-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 0.62em;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 500;
}

/* =====================================================================
   Device & System -- Screen & Display card sub-sections (DISPLAY / PLATFORM)
   The screen_info module returns value.html with .wm-devsys-sub__label and
   .wm-devsys-sub__value spans. Lay them out as a two-row mini-grid so both
   sub-sections read cleanly inside a single card.
   ===================================================================== */
[data-test="screen_info"] .wm-card__value {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0.15rem;
    align-items: baseline;
    font-family: var(--wm-font-mono, ui-monospace, monospace);
}
.wm-devsys-sub__label {
    grid-column: 1;
    font-family: var(--wm-font, system-ui, sans-serif);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    line-height: 1;
    align-self: center;
}
.wm-devsys-sub__label--second { margin-top: 0.35rem; }
.wm-devsys-sub__value {
    grid-column: 2;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wm-text, #f4f9ff);
    line-height: 1.15;
}

/* =====================================================================
   Device & System -- always-expanded learn-more panels below the ad.
   Three columns on desktop, one column on mobile. Each panel is a full
   What / So What / Now What block, permanently visible.
   ===================================================================== */
.wm-learn-panel-section {
    margin: 2.5rem auto 3.5rem;
    padding: 0 1rem;
}
.wm-learn-panel-section__head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 1.5rem;
}
.wm-learn-panel-section__title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--wm-text, #f4f9ff);
}
.wm-learn-panel-section__lede {
    margin: 0;
    color: var(--wm-text-muted, rgba(255,255,255,0.65));
    font-size: 0.98rem;
    line-height: 1.5;
}
.wm-learn-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 960px) {
    .wm-learn-panel-grid { grid-template-columns: 1fr; }
}
.wm-learn-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.25rem 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.wm-learn-panel__head {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wm-learn-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--wm-text, #f4f9ff);
}
.wm-learn-panel__section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.wm-learn-panel__h {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wm-accent, #64d2c9);
    margin: 0;
}
.wm-learn-panel__section p {
    margin: 0;
    color: var(--wm-text, #f4f9ff);
    font-size: 0.9rem;
    line-height: 1.55;
    opacity: 0.88;
}
.wm-learn-panel__section--now {
    padding-top: 0.5rem;
    margin-top: 0.15rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
/* Status-tinted accent on the Now What box based on the card's current status.
   The JS toggles [hidden] on each variant; here we just style whichever is
   visible with a colored left rule. */
.wm-learn-panel__nowvariant[data-status="safe"]    { border-left: 3px solid var(--wm-safe,    #4ade80); padding-left: 0.75rem; }
.wm-learn-panel__nowvariant[data-status="leak"]    { border-left: 3px solid var(--wm-leak,    #f87171); padding-left: 0.75rem; }
.wm-learn-panel__nowvariant[data-status="warning"] { border-left: 3px solid var(--wm-warning, #fbbf24); padding-left: 0.75rem; }
.wm-learn-panel__nowvariant[data-status="info"]    { border-left: 3px solid var(--wm-info,    #67e8f9); padding-left: 0.75rem; }
.wm-learn-panel__nowvariant--default               { border-left: 3px solid rgba(255,255,255,0.15); padding-left: 0.75rem; }

/* "Now what?" heading takes the finding's color (JS mirrors the card status
   onto the panel via data-status). Matches the card badge/border mapping so
   the fix heading reads as red for a leak, amber for a warning, etc. */
.wm-learn-panel[data-status="safe"]    .wm-learn-panel__section--now .wm-learn-panel__h { color: var(--wm-safe,    #4ade80); }
.wm-learn-panel[data-status="info"]    .wm-learn-panel__section--now .wm-learn-panel__h { color: var(--wm-info,    #67e8f9); }
.wm-learn-panel[data-status="warning"] .wm-learn-panel__section--now .wm-learn-panel__h { color: var(--wm-warning, #fbbf24); }
.wm-learn-panel[data-status="leak"]    .wm-learn-panel__section--now .wm-learn-panel__h { color: var(--wm-leak,    #f87171); }

/* =========================================================================
   ROUND 17: Rescan hero pill, tutorial CTAs, tutorial pages, breach details
   ========================================================================= */

/* --- Hero-level Rescan button (Privacy, Multimedia, Fingerprint, Device) --- */
/* Visually mirrors .wm-card__run so the whole site speaks one CTA language. */
.wm-hero-rescan {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px 12px 20px;
    background: var(--wm-accent);
    color: var(--wm-bg);
    border: 2px solid var(--wm-accent);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--wm-t-fast), box-shadow var(--wm-t-fast), background var(--wm-t-fast);
    box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.4);
}
.wm-hero-rescan:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(38, 166, 154, 0.4);
    text-decoration: none;
}
.wm-hero-rescan:active { transform: translateY(0); }
.wm-hero-rescan:disabled,
.wm-hero-rescan.is-running {
    background: var(--wm-surface);
    color: var(--wm-text-muted);
    border-color: var(--wm-border);
    cursor: wait;
    box-shadow: none;
}
.wm-hero-rescan.is-running .wm-hero-rescan__icon {
    animation: wm-spin 0.9s linear infinite;
}
.wm-hero-rescan__icon { flex-shrink: 0; }

/* --- Learn-panel "Deep dive tutorial" CTA (bottom of each learn-panel) --- */
.wm-learn-panel__cta {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "eyebrow arrow"
        "title   arrow";
    gap: 4px 12px;
    align-items: center;
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.12), rgba(38, 166, 154, 0.04));
    border: 1px solid rgba(38, 166, 154, 0.28);
    border-radius: 12px;
    color: var(--wm-text);
    text-decoration: none;
    transition: border-color var(--wm-t-fast), background var(--wm-t-fast), transform var(--wm-t-fast);
}
.wm-learn-panel__cta:hover {
    border-color: var(--wm-accent);
    background: linear-gradient(135deg, rgba(38, 166, 154, 0.22), rgba(38, 166, 154, 0.08));
    transform: translateY(-1px);
    text-decoration: none;
}
.wm-learn-panel__cta-eyebrow {
    grid-area: eyebrow;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wm-accent);
}
.wm-learn-panel__cta-title {
    grid-area: title;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wm-text);
}
.wm-learn-panel__cta-arrow {
    grid-area: arrow;
    color: var(--wm-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--wm-t-fast);
}
.wm-learn-panel__cta:hover .wm-learn-panel__cta-arrow { transform: translateX(3px); }

/* Learn-panel grid layouts.  --five variant packs 5 cards on Speed & Privacy. */
.wm-learn-panel-section { margin-top: 32px; }
.wm-learn-panel-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wm-learn-panel-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) {
    .wm-learn-panel-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .wm-learn-panel-grid,
    .wm-learn-panel-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .wm-learn-panel-grid,
    .wm-learn-panel-grid--five { grid-template-columns: 1fr; }
}

/* --- Tutorials hub + tutorial-single --- */
.wm-tutorials { padding-block: 32px 48px; display: grid; gap: 48px; }
.wm-tutorials__group-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--wm-text);
    letter-spacing: -0.01em;
}
.wm-tutorials__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.wm-tutorial-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--wm-text);
    transition: border-color var(--wm-t-fast), transform var(--wm-t-fast), box-shadow var(--wm-t-fast);
}
.wm-tutorial-card:hover {
    border-color: var(--wm-accent);
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}
.wm-tutorial-card__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--wm-accent);
}
.wm-tutorial-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.wm-tutorial-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wm-accent);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 4px;
}

/* Tutorial-single */
.wm-tutorial-hero__eyebrow {
    font-size: 0.85rem;
    color: var(--wm-text-muted);
    margin-bottom: 8px;
}
.wm-tutorial-hero__eyebrow a { color: var(--wm-accent); }
.wm-tutorial-hero__cta { margin-top: 20px; }
.wm-tutorial { padding-block: 32px; display: grid; gap: 32px; max-width: 820px; margin-inline: auto; }
.wm-tutorial__h {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wm-text);
    margin-bottom: 10px;
    letter-spacing: -0.005em;
}
.wm-tutorial__section p { line-height: 1.7; color: var(--wm-text); }
.wm-tutorial__section--body .wm-tutorial__body {
    line-height: 1.75;
}
.wm-tutorial__section--body .wm-tutorial__body p { margin-block: 1em; }
.wm-tutorial__section--body .wm-tutorial__body h2,
.wm-tutorial__section--body .wm-tutorial__body h3 {
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}
.wm-tutorial-related { padding-block: 32px 48px; }
.wm-tutorial-related__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* --- HIBP breach details (Tools tab) --- */
.wm-breach-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
    display: grid;
    gap: 12px;
}
.wm-breach {
    padding: 14px 16px;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-left: 3px solid var(--wm-leak, #f87171);
    border-radius: 8px;
}
.wm-breach--sensitive { border-left-color: var(--wm-warning, #fbbf24); }
.wm-breach__head { font-size: 1rem; color: var(--wm-text); margin-bottom: 4px; }
.wm-breach__data,
.wm-breach__count {
    font-size: 0.85rem;
    color: var(--wm-text-muted);
    margin-top: 4px;
}
.wm-breach-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--wm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.wm-breach-foot__cta { white-space: nowrap; }
.wm-tool__error { color: var(--wm-leak, #f87171); font-weight: 600; }

/* =========================================================================
   ROUND 18 -- MOBILE-FIRST + PWA
   Bottom nav, install pill, mobile-anchor ad slot, hero share button,
   thumb-safe touch targets, safe-area insets for notched devices.
   ========================================================================= */

/* Body pad so the mobile-anchor ad doesn't cover footer content on mobile.
   Uses env(safe-area-inset-bottom) for iPhone home-indicator space. */
@media (max-width: 720px) {
    body:has(.wm-mobile-anchor .adsbygoogle[data-ad-status="filled"]) {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 8px);
    }
}

/* ---------- Bottom nav (retired -- kept hidden as a no-op) ------------ */
.wm-bottomnav { display: none !important; }

/* ---------- Mobile top tabs ------------------------------------------- */
/* On mobile the desktop .wm-tabs strip becomes a second row directly under
   the brand + mode toggle, with the six items sized as a 3x2 grid so every
   label stays fully readable without horizontal scrolling. */
@media (max-width: 900px) {
    /* Tighten the topbar padding on mobile so the two rows sit close.
       This block intentionally targets 900px to override the older responsive
       rule at line ~1063 that set gap:12px on .wm-topbar__inner and gave
       .wm-tabs vertical padding. Without matching that same 900px breakpoint
       and using !important on the collapse values, the older rule wins on
       cascade order. */
    .wm-topbar { padding-top: 6px !important; padding-bottom: 4px !important; }
    /* Row 1: brand on the left, install pill + mode toggle on the right.
       Row 2: full-width tabs strip spanning both columns. */
    .wm-topbar__inner {
        grid-template-columns: 1fr auto !important;
        row-gap: 0 !important;
        column-gap: 8px !important;
        gap: 0 8px !important;
    }
    /* Kill any inherited bottom margin so the tabs sit flush under row 1. */
    .wm-brand, .wm-mode-toggle, .wm-install-pill { margin-bottom: 0 !important; }
    .wm-tabs {
        order: 3 !important;
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px 8px !important;
        justify-content: stretch !important;
        overflow: visible !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    /* The hover sub-menus are a desktop/pointer affordance; the grid cells are
       now the item wrappers, so make each wrapper fill its cell and let the
       link stretch to fill the wrapper. */
    .wm-tabs__item-wrap { display: flex !important; width: 100%; }
    .wm-tabs__item-wrap .wm-tabs__item { width: 100%; }
    .wm-tabs__item-wrap--sep { margin-left: 0 !important; }
    .wm-tabs__item-wrap--sep::before { display: none !important; }
    .wm-tabs__submenu { display: none !important; }
    .wm-tabs__item {
        text-align: center;
        padding: 8px 6px !important;
        font-size: 0.88rem;
        min-height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* Collapse the huge dead band between the tab menu and the page H1.
       Two stacked paddings were creating a ~64px empty gap on mobile:
         .wm-main       padding-block: 32px 64px  (top-of-content padding)
         .wm-tab-hero   padding-block: 32px 8px   (above every tab title)
       On mobile we cut both to ~8px so the H1 sits right under the tabs. */
    .wm-main     { padding-block: 8px 40px !important; }
    .wm-tab-hero { padding-block: 8px 4px  !important; }
    .wm-tab-hero__title { margin-top: 0 !important; margin-bottom: 6px !important; }
}

/* ---------- Install pill ---------------------------------------------- */
.wm-install-pill {
    display: none;
    position: relative;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--wm-accent);
    background: transparent;
    color: var(--wm-accent);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--wm-r-pill);
    cursor: pointer;
    transition: background-color var(--wm-t-fast), color var(--wm-t-fast);
    font-family: inherit;
}
.wm-install-pill:hover { background: var(--wm-accent); color: var(--wm-bg); }

/* Hover / focus tooltip explaining what Install does. */
.wm-install-tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 272px;
    padding: 11px 13px;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border-hi);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--wm-text);
    text-align: left;
    line-height: 1.5;
    box-shadow: var(--wm-shadow-3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 60;
}
.wm-install-tip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--wm-accent);
    font-weight: 700;
}
.wm-install-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 16px;
    border: 6px solid transparent;
    border-bottom-color: var(--wm-border-hi);
}
.wm-install-tip::after {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    right: 16px;
    border: 6px solid transparent;
    border-bottom-color: var(--wm-bg);
}
.wm-install-pill:hover .wm-install-tip,
.wm-install-pill:focus-visible .wm-install-tip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/* Only show once the browser has fired beforeinstallprompt (Chrome/Edge/Android). */
html.wm-can-install .wm-install-pill { display: inline-flex; }
/* Hide once the app is installed (browser fires appinstalled). */
@media (display-mode: standalone) { .wm-install-pill, .wm-mobile-anchor { display: none !important; } }

/* ---------- Hero share button (Privacy, Multimedia, FP, Device) ------- */
.wm-hero-share {
    display: none; /* revealed by html.wm-can-share -- progressive enhancement */
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin-top: 10px;
    background: transparent;
    color: var(--wm-text);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-r-pill);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--wm-t-fast), background-color var(--wm-t-fast), color var(--wm-t-fast);
}
.wm-hero-share:hover {
    border-color: var(--wm-accent);
    color: var(--wm-accent);
    background: rgba(38, 166, 154, 0.08);
}
html.wm-can-share .wm-hero-share { display: inline-flex; }

/* ---------- Mobile-anchor ad slot ------------------------------------- */
.wm-mobile-anchor { display: none; }
@media (max-width: 720px) {
    .wm-mobile-anchor {
        display: block;
        position: fixed;
        left: 0; right: 0;
        bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 39;
        background: var(--wm-bg);
        border-top: 1px solid var(--wm-border);
        min-height: 0; /* collapses if AdSense doesn't fill */
        text-align: center;
    }
    .wm-mobile-anchor .adsbygoogle { display: block; margin: 0 auto; max-width: 100%; }
}

/* ---------- Thumb-safe touch targets + typography tightening ---------- */
@media (max-width: 720px) {
    /* Bigger tap targets across primary CTAs. Apple + Material both call for
       44x44 minimum; we go a hair beyond. */
    .wm-btn,
    .wm-hero-rescan,
    .wm-hero-share,
    .wm-card__run,
    .wm-install-pill,
    .wm-mode-toggle__btn,
    .wm-tool__form button { min-height: 44px; }
    .wm-hero-rescan { padding: 12px 22px; font-size: 0.98rem; }

    /* Stack the learn-panel grids to a single column below 720px. Speed and
       Privacy use --five variant which becomes 1 col here. Others stay 1 col
       from their default. */
    .wm-learn-panel-grid,
    .wm-learn-panel-grid--five { grid-template-columns: 1fr !important; }

    /* Give the hero identity room and stop the connid values overflowing. */
    .wm-connid__val { max-width: 100%; word-break: break-word; }

    /* Slightly tighter body copy on small screens. */
    html { font-size: 15px; }
    .wm-brand__name { font-size: 0.98rem; }
}

/* Safe-area inset for landscape notched devices. */
@supports (padding: max(0px)) {
    .wm-container { padding-left: max(var(--wm-container-pad, 20px), env(safe-area-inset-left));
                    padding-right: max(var(--wm-container-pad, 20px), env(safe-area-inset-right)); }
}

/* =========================================================================
   "Fix this" jump-links on result cards + full-width explanation articles
   + per-section back-to-top. (Tab pages.)
   ========================================================================= */
html { scroll-behavior: smooth; }

.wm-card--has-fix { padding-bottom: 46px; }
.wm-card__fix {
    position: absolute; bottom: 14px; right: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: .02em;
    color: var(--wm-accent, #7fffd4); text-decoration: none; opacity: .92;
}
.wm-card__fix:hover { opacity: 1; text-decoration: underline; }
.wm-card__fix svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Explanations read as full-width stacked articles (was a 3-up grid). */
.wm-learn-panel-grid,
.wm-learn-panel-grid--five { grid-template-columns: 1fr; gap: 1.5rem; }
.wm-learn-panel { scroll-margin-top: 84px; }
.wm-learn-panel:target {
    border-color: var(--wm-accent, #7fffd4);
    box-shadow: 0 0 0 1px var(--wm-accent, #7fffd4);
}
.wm-learn-panel__backtop {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 1rem; font-size: 0.82rem; font-weight: 700;
    color: var(--wm-accent, #7fffd4); text-decoration: none; opacity: .9;
}
.wm-learn-panel__backtop:hover { opacity: 1; text-decoration: underline; }
.wm-learn-panel__backtop svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =========================================================================
   Two-version tutorials (Simple / Advanced toggle) + gated gear strip
   ========================================================================= */
.wm-tut-wrap { padding: 8px 0 4px; }
.wm-tut__switch {
    display: inline-flex; gap: 4px; margin: 0 0 24px;
    background: var(--wm-panel-2, #122735); border: 1px solid var(--wm-line, #1d3b44);
    border-radius: 999px; padding: 4px;
}
.wm-tut__pill {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    color: var(--wm-text-dim, #9db1ae); font: inherit; font-weight: 700; font-size: 14px;
    padding: 8px 22px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.wm-tut__pill:hover { color: var(--wm-text, #e6f2ee); }
.wm-tut__pill.is-active { background: var(--wm-aqua, #7fffd4); color: #06121a; }
.wm-tut__pane[hidden] { display: none; }
.wm-tut__body { max-width: 72ch; }
.wm-tut__body h2 { font-size: clamp(20px, 3vw, 27px); font-weight: 800; letter-spacing: -.01em; margin: 30px 0 10px; }
.wm-tut__body h2:first-child { margin-top: 0; }
.wm-tut__body h3 { font-size: clamp(16px, 2.4vw, 19px); font-weight: 700; margin: 24px 0 8px; color: var(--wm-aqua, #7fffd4); }
.wm-tut__body p { line-height: 1.7; margin: 0 0 14px; color: var(--wm-text, #e6f2ee); }
.wm-tut__body ul, .wm-tut__body ol { line-height: 1.7; margin: 0 0 16px; padding-left: 24px; }
.wm-tut__body li { margin: 0 0 7px; }
.wm-tut__body strong { color: #fff; }
.wm-tut__body a { color: var(--wm-aqua, #7fffd4); }

.wm-tgear { margin: 36px auto; max-width: var(--wm-container, 1120px); }
.wm-tgear__title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.wm-tgear__group { margin: 18px 0; }
.wm-tgear__h { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.wm-tgear__look { font-size: 14px; color: var(--wm-text-dim, #9db1ae); margin: 0 0 12px; }
.wm-tgear__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wm-tgear__card {
    display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border: 1px solid var(--wm-line, #1d3b44); border-radius: 14px;
    background: var(--wm-panel, #0d1e2a); color: var(--wm-text, #e6f2ee);
    text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.wm-tgear__card:hover { border-color: rgba(127,255,212,.55); transform: translateY(-2px); }
.wm-tgear__name { font-weight: 700; font-size: 15px; }
.wm-tgear__price { color: var(--wm-aqua, #7fffd4); font-weight: 700; font-size: 14px; }
.wm-tgear__cta { font-size: 13px; font-weight: 700; color: var(--wm-aqua, #7fffd4); margin-top: 4px; }
.wm-tgear__disc { font-size: 12px; color: var(--wm-text-dim, #9db1ae); margin: 14px 0 0; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .wm-tut__pill, .wm-tgear__card { transition: none; } }

/* ===== "Save as PDF" button (screen) ===== */
.wm-print-only { display: none; }
.wm-pdf-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: transparent; border: 1px solid var(--wm-line, #1d3b44);
    color: var(--wm-aqua, #7fffd4); border-radius: 999px;
    padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 700;
    transition: border-color .15s ease, transform .12s ease;
}
.wm-pdf-btn:hover { border-color: rgba(127,255,212,.55); transform: translateY(-1px); }
.wm-pdf-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* =========================================================================
   PRINT / "Save as PDF" -- premium branded, light editorial document.
   Appended last so it wins the cascade for print without heavy !important.
   ========================================================================= */
@media print {
    @page { size: A4; margin: 12mm 0 14mm; }

    html, body { background: #fff !important; color: #16293f !important; }
    /* Side margins live in body padding so they survive even a "Margins: None"
       print setting (where @page side margins get zeroed). */
    body { font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 11pt; line-height: 1.55; padding: 0 14mm !important; }

    /* Hide all chrome + interactive controls */
    .wm-topbar, .wm-footer, .wm-ad, .wm-skip-link, #wm-top,
    .wm-tut__switch, .wm-tutorial-related, .wm-tutorial-hero,
    .wm-pdf-btn, .wm-report__rescan, .wm-report__meta,
    .wm-speed-more, .wm-speed-detail, .wm-home-hero__speed, .wm-home-top,
    .wm-report__title, .wm-report__sub, .wm-tgear__cta,
    [data-wm-toggle], .wm-mode-toggle, #wm-toast { display: none !important; }

    .wm-print-only { display: block !important; }

    .wm-container, .wm-tut-wrap, .wm-home-hero, .wm-report, .wm-report--home-tiles {
        max-width: none !important; width: auto !important;
        margin: 0 !important; padding: 0 !important;
    }
    .wm-home-hero { display: block !important; }

    /* Masthead */
    .wm-print-head { margin: 0 0 16pt; }
    .wm-print-head__bar {
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 2.5pt solid #0e7c66; padding-bottom: 7pt;
    }
    .wm-print-brand { font-weight: 800; font-size: 15pt; letter-spacing: -.01em; color: #0e2233; }
    .wm-print-brand__mark { color: #0e9f82; font-size: 15pt; margin-right: 3pt; }
    .wm-print-brand__accent { color: #0e9f82; }
    .wm-print-head__kicker {
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #5b7183;
        text-align: right; line-height: 1.7;
    }
    .wm-print-head__eyebrow {
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 8.5pt; letter-spacing: .16em; text-transform: uppercase;
        color: #0e7c66; margin: 13pt 0 4pt;
    }
    .wm-print-head__kicker strong, .wm-print-head__url { display: block; color: #0e7c66; font-weight: 700; font-size: 8.5pt; }
    .wm-print-head__title { font-size: 21pt; font-weight: 800; line-height: 1.14; letter-spacing: -.02em; color: #0e2233; margin: 0 0 6pt; }
    .wm-print-head__lede { font-size: 11.5pt; color: #42566a; margin: 0; max-width: 64ch; }

    /* Closing brand footer (end of document) -- a clickable link to the homepage. */
    .wm-print-foot {
        margin-top: 22pt; border-top: .75pt solid #cdd8df; padding-top: 6pt;
        display: flex; justify-content: space-between; align-items: flex-end; gap: 12pt;
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 7.5pt; letter-spacing: .06em; color: #5b7183;
        text-decoration: none; page-break-inside: avoid;
    }
    .wm-print-foot__who { display: flex; flex-direction: column; gap: 1.5pt; }
    .wm-print-foot__brand { color: #0e7c66; font-weight: 700; font-size: 9pt; letter-spacing: .02em; }
    .wm-print-foot__tag { text-transform: uppercase; }
    .wm-print-foot__cta { white-space: nowrap; color: #0e7c66; font-weight: 700; }
    .wm-print-head__date { display: block; color: #5b7183; margin-top: 2pt; }

    /* Article body */
    .wm-tut__pane[hidden] { display: none !important; }
    .wm-tut__body { max-width: none; color: #16293f; }
    .wm-tut__body h2 { font-size: 15pt; font-weight: 800; color: #0e2233; margin: 16pt 0 6pt; page-break-after: avoid; border-bottom: .75pt solid #e3eaef; padding-bottom: 3pt; }
    .wm-tut__body h2:first-child { margin-top: 0; }
    .wm-tut__body h3 { font-size: 12pt; font-weight: 700; color: #0e7c66; margin: 12pt 0 4pt; page-break-after: avoid; }
    .wm-tut__body, .wm-tut__body p, .wm-tut__body li, .wm-tut__body ul, .wm-tut__body ol { color: #16293f; }
    .wm-tut__body p { margin: 0 0 8pt; }
    .wm-tut__body ul, .wm-tut__body ol { margin: 0 0 9pt; padding-left: 18pt; }
    .wm-tut__body li { margin: 0 0 4pt; page-break-inside: avoid; }
    .wm-tut__body strong { color: #0e2233; }
    .wm-tut__body a { color: #0e7c66; text-decoration: none; }
    p, li { orphans: 3; widows: 3; }

    /* Gear (only if affiliate enabled) */
    .wm-tgear { margin: 14pt 0 0; page-break-inside: avoid; }
    .wm-tgear__title { font-size: 14pt; color: #0e2233; }
    .wm-tgear__card { border: .75pt solid #cdd8df !important; background: #f6f9fa !important; color: #16293f !important; }
    .wm-tgear__name, .wm-tgear__price { color: #0e2233 !important; }

    /* Report card print layout */
    .wm-report__card, .wm-home-hero__grade { width: 100% !important; border: 0 !important; background: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
    .wm-report__hero { flex-direction: column !important; align-items: center !important; justify-content: center; gap: 12pt !important; text-align: center; margin: 6pt 0 0; }
    .wm-report__say-lede { color: #16293f !important; font-size: 12.5pt; max-width: 60ch; }
    .wm-rc-strip { justify-content: center; gap: 10pt; margin-top: 10pt; }
    .wm-rc-chip { border: .75pt solid #cdd8df !important; background: #f6f9fa !important; color: #16293f !important; }
    .wm-rc-chip__ico { color: #0e7c66 !important; }
    .wm-score__val { fill: #0e2233 !important; color: #0e2233 !important; }
    .wm-score__label { fill: #5b7183 !important; }

    /* Per-section detailed breakdown (second page of the report card PDF) */
    .wm-rd { display: block !important; page-break-before: always; }
    .wm-rd__title { font-size: 16pt; font-weight: 800; color: #0e2233; border-bottom: 2.5pt solid #0e7c66; padding-bottom: 5pt; margin: 0 0 3pt; }
    .wm-rd__intro { font-size: 10pt; color: #5b7183; margin: 0 0 13pt; }
    .wm-rd__section { margin: 0 0 13pt; page-break-inside: avoid; }
    .wm-rd__sechead { display: flex; align-items: baseline; justify-content: space-between; border-bottom: .75pt solid #d9e2e8; padding-bottom: 3pt; margin: 0 0 6pt; }
    .wm-rd__secname { font-size: 13pt; font-weight: 800; color: #0e2233; }
    .wm-rd__secgrade { font-size: 15pt; font-weight: 800; color: #5b7183; }
    .wm-rd__secgrade.g-a, .wm-rd__secgrade.g-b { color: #2e9e6e; }
    .wm-rd__secgrade.g-c { color: #c77d0a; }
    .wm-rd__secgrade.g-d { color: #cf6a2a; }
    .wm-rd__secgrade.g-f { color: #c23b3b; }
    .wm-rd__item { margin: 0 0 8pt; padding: 0 0 0 9pt; border-left: 2.5pt solid #d9e2e8; page-break-inside: avoid; }
    .wm-rd__item[data-rd-status="leak"]    { border-left-color: #e2a3a3; }
    .wm-rd__item[data-rd-status="warning"] { border-left-color: #e6c58a; }
    .wm-rd__item[data-rd-status="safe"], .wm-rd__item[data-rd-status="info"] { border-left-color: #9fd8c4; }
    .wm-rd__itemhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8pt; }
    .wm-rd__itemname { font-weight: 700; font-size: 10.5pt; color: #0e2233; }
    .wm-rd__badge { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7pt; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
    .wm-rd__badge.is-good  { color: #2e9e6e; }
    .wm-rd__badge.is-warn  { color: #c77d0a; }
    .wm-rd__badge.is-leak  { color: #c23b3b; }
    .wm-rd__badge.is-muted { color: #9aa7b2; }
    .wm-rd__fix { margin-top: 2pt; }
    .wm-rd__fixbody { font-size: 9.5pt; line-height: 1.5; color: #40535f; }
    .wm-rd__fixbody a { color: #0e7c66; text-decoration: none; }
    .wm-rd__good { font-size: 9.5pt; color: #2e9e6e; font-style: italic; }
    .wm-rd__fix > [hidden] { display: none !important; }

    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* =========================================================================
   Home-page editorial section (intro + privacy pledge + compare + guides).
   Lives below the tool; gives the front page real, readable content and
   surfaces the full tutorial library one click from home.
   ========================================================================= */
.wm-home-about { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--wm-border); display: grid; gap: 40px; }
.wm-home-about__h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 14px; color: var(--wm-text); }
.wm-home-about__intro { max-width: 72ch; }
.wm-home-about__intro p { color: var(--wm-text-muted); line-height: 1.7; margin: 0 0 14px; }

.wm-home-pledge { list-style: none; margin: 0; padding: 20px 22px; display: grid; gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--wm-safe-bg); border: 1px solid var(--wm-border); border-radius: var(--wm-r-card); }
.wm-home-pledge li { display: flex; align-items: flex-start; gap: 10px; color: var(--wm-text); font-weight: 600; line-height: 1.4; }
.wm-home-pledge__mark { flex: 0 0 auto; color: var(--wm-safe); font-weight: 800; }

.wm-home-compare__lede { color: var(--wm-text-muted); max-width: 72ch; line-height: 1.7; margin: 0 0 18px; }
.wm-home-compare__wrap { overflow-x: auto; }
.wm-home-compare__table { width: 100%; border-collapse: collapse; min-width: 440px; }
.wm-home-compare__table th, .wm-home-compare__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--wm-border); }
.wm-home-compare__table thead th { font-size: 0.82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--wm-text-muted); }
.wm-home-compare__table thead th:last-child { color: var(--wm-accent); }
.wm-home-compare__table tbody th { font-weight: 600; color: var(--wm-text); }
.wm-home-compare__table td { text-align: center; width: 22%; }
.wm-cmp { font-weight: 800; font-size: 1.05rem; }
.wm-cmp--yes { color: var(--wm-safe); }
.wm-cmp--no { color: var(--wm-disabled); }

.wm-home-guides__lede,
.wm-fixhub__more-lede { color: var(--wm-text-muted); max-width: 72ch; line-height: 1.7; margin: 0 0 22px; }
.wm-home-guides__group,
.wm-fixhub__more-group { margin-bottom: 22px; }
.wm-home-guides__group-title,
.wm-fixhub__more-group-title { font-size: 0.82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wm-accent); margin: 0 0 10px; }
.wm-home-guides__list,
.wm-fixhub__more-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-home-guides__list a,
.wm-fixhub__more-list a { color: var(--wm-text); text-decoration: none; line-height: 1.5; border-bottom: 1px solid transparent; }
.wm-home-guides__list a:hover,
.wm-fixhub__more-list a:hover { color: var(--wm-accent); border-bottom-color: var(--wm-accent); }
/* Fix hub: three rotating "featured guide" cards that advance once per day. */
.wm-fixhub-featured { margin-top: 8px; }
.wm-fixhub-featured__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--wm-text-muted); margin: 0 0 14px; }
.wm-fixhub-featured__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wm-fixhub-feat { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-height: 148px;
    background: var(--wm-surface); border: 1px solid var(--wm-border-hi); border-radius: var(--wm-r-card);
    text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.wm-fixhub-feat:hover { border-color: var(--wm-accent); transform: translateY(-2px); }
.wm-fixhub-feat__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--wm-accent); }
.wm-fixhub-feat__title { font-size: 1.06rem; line-height: 1.35; color: var(--wm-text); margin: 0; font-weight: 600; flex: 1; }
.wm-fixhub-feat__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--wm-accent); margin-top: auto; }
@media (max-width: 860px) { .wm-fixhub-featured__grid { grid-template-columns: 1fr; } }

.wm-fixhub__more { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--wm-border); }
.wm-fixhub__more-title { font-size: 1.35rem; margin: 0 0 12px; color: var(--wm-text); }
.wm-home-guides__more { margin: 8px 0 0; }
.wm-home-guides__more a { color: var(--wm-accent); font-weight: 700; text-decoration: none; }
.wm-home-guides__more a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .wm-home-pledge,
    .wm-home-guides__list,
    .wm-fixhub__more-list { grid-template-columns: 1fr; }
}

/* Editorial section is screen-only; it must not print inside the report card. */
@media print { .wm-home-about { display: none !important; } }

/* Six-card learn-panel grid (Speed tab gained the DNS Lookup card). Mirrors
   --five; the global single-column rule still governs the actual layout. */
.wm-learn-panel-grid--six { grid-template-columns: 1fr; }

/* Test-server transparency readout on the speed hero (CNET gap #2). */
.wm-test-server { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0;
    font-size: 0.86rem; color: var(--wm-text-muted); flex-wrap: wrap; }
.wm-test-server__icon { flex: 0 0 auto; opacity: .7; }
.wm-test-server__label { text-transform: uppercase; letter-spacing: .04em; font-size: 0.7rem; font-weight: 700; color: var(--wm-disabled); }
.wm-test-server__val { color: var(--wm-text); font-weight: 600; }