/*
 * File: /assets/css/cwvm.css
 * Module: Core Web Vitals Monitoring product pages (/core-web-vitals-monitoring/
 *         and /core-web-vitals-monitoring/wordpress/)
 *
 * Prefix cwvm-. Tokens declared once for light and restated for dark on the
 * same root. Motion is transform and opacity only; script-only states sit
 * behind html.cwvm-js (set inline by the template) with a CSS failsafe, and
 * prefers-reduced-motion gets the finished picture.
 *
 * Sections:
 *   1. Tokens          5. Real numbers chart     9. Plans
 *   2. Layout, type    6. Tiles                 10. Steps, FAQ, close
 *   3. Buttons, chips  7. Screenshots           11. Motion and failsafes
 *   4. Hero picture    8. Platforms             12. Narrow screens
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.cwvm {
    --cwvm-ink: #0F172A;
    --cwvm-ink-2: #1E293B;
    --cwvm-body: #475569;
    --cwvm-line: #E2E8F0;
    --cwvm-line-soft: rgba(15, 23, 42, 0.08);
    --cwvm-card: #FFFFFF;
    --cwvm-tile: #F8FAFC;
    --cwvm-glass: rgba(255, 255, 255, 0.78);
    --cwvm-em: #047857;
    --cwvm-em-deep: #065F46;
    --cwvm-em-500: #10B981;
    --cwvm-em-wash: #ECFDF5;
    --cwvm-em-line: #A7F3D0;
    --cwvm-teal: #0E7490;
    --cwvm-good: #10B981;
    --cwvm-ni: #F59E0B;
    --cwvm-poor: #EF4444;
    --cwvm-good-ink: #047857;
    --cwvm-ni-ink: #92400E;
    --cwvm-poor-ink: #B91C1C;
    --cwvm-good-bg: #ECFDF5;
    --cwvm-ni-bg: #FFFBEB;
    --cwvm-poor-bg: #FEF2F2;
    --cwvm-pro: #1D4ED8;
    --cwvm-pro-wash: #EFF6FF;
    --cwvm-pro-line: #BFDBFE;
    --cwvm-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 24px 48px -28px rgba(15, 23, 42, 0.35);
    --cwvm-shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.06), 0 34px 70px -34px rgba(4, 120, 87, 0.45);
    --cwvm-dot: rgba(15, 23, 42, 0.07);
    --cwvm-aurora-a: rgba(16, 185, 129, 0.22);
    --cwvm-aurora-b: rgba(14, 116, 144, 0.16);
    --cwvm-aurora-c: rgba(37, 99, 235, 0.10);
    --cwvm-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
    --cwvm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cwvm-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--cwvm-ink);
}

html[data-theme="dark"] .cwvm {
    --cwvm-ink: #F1F5F9;
    --cwvm-ink-2: #E2E8F0;
    --cwvm-body: #CBD5E1;
    --cwvm-line: #26344F;
    --cwvm-line-soft: rgba(226, 232, 240, 0.08);
    --cwvm-card: #111B2E;
    --cwvm-tile: #0E1729;
    --cwvm-glass: rgba(17, 27, 46, 0.8);
    --cwvm-em: #34D399;
    --cwvm-em-deep: #10B981;
    --cwvm-em-500: #34D399;
    --cwvm-em-wash: rgba(16, 185, 129, 0.12);
    --cwvm-em-line: rgba(52, 211, 153, 0.35);
    --cwvm-teal: #67E8F9;
    --cwvm-good: #34D399;
    --cwvm-ni: #FBBF24;
    --cwvm-poor: #F87171;
    --cwvm-good-ink: #34D399;
    --cwvm-ni-ink: #FBBF24;
    --cwvm-poor-ink: #FCA5A5;
    --cwvm-good-bg: rgba(16, 185, 129, 0.14);
    --cwvm-ni-bg: rgba(245, 158, 11, 0.14);
    --cwvm-poor-bg: rgba(239, 68, 68, 0.14);
    --cwvm-pro: #93C5FD;
    --cwvm-pro-wash: rgba(37, 99, 235, 0.14);
    --cwvm-pro-line: rgba(147, 197, 253, 0.35);
    --cwvm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
    --cwvm-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 34px 70px -34px rgba(16, 185, 129, 0.35);
    --cwvm-dot: rgba(226, 232, 240, 0.06);
    --cwvm-aurora-a: rgba(16, 185, 129, 0.18);
    --cwvm-aurora-b: rgba(34, 211, 238, 0.10);
    --cwvm-aurora-c: rgba(96, 165, 250, 0.08);
}

/* ==========================================================================
   2. LAYOUT, TYPE
   ========================================================================== */

.cwvm-page .site-main { padding-top: 1.25rem; }
.cwvm, .cwvm *, .cwvm *::before, .cwvm *::after { box-sizing: border-box; }
.cwvm { position: relative; overflow-x: clip; }
.cwvm p { margin: 0; }
.cwvm ul, .cwvm ol { margin: 0; padding: 0; list-style: none; }

.cwvm-section { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }

.cwvm-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem !important;
    color: var(--cwvm-em);
    font-family: var(--cwvm-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cwvm-h1 {
    margin: 0.9rem 0 1.1rem;
    color: var(--cwvm-ink);
    font-size: clamp(2.35rem, 1.3rem + 3.6vw, 4.15rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-wrap: balance;
}
.cwvm-h1-accent {
    background: linear-gradient(100deg, #047857 0%, #0E7490 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-theme="dark"] .cwvm-h1-accent { background-image: linear-gradient(100deg, #34D399 0%, #67E8F9 100%); }

.cwvm-h2 {
    max-width: 22em;
    margin: 0 0 0.9rem;
    color: var(--cwvm-ink);
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    text-wrap: balance;
}
.cwvm-lead { max-width: 36em; color: var(--cwvm-body); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.6; }
.cwvm-sub { max-width: 40em; color: var(--cwvm-body); font-size: 1.05rem; line-height: 1.6; }
.cwvm-lead strong, .cwvm-sub strong { color: var(--cwvm-ink); font-weight: 700; }

.cwvm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.45rem 0.4rem 0.8rem;
    border: 1px solid var(--cwvm-em-line);
    border-radius: 999px;
    background-color: var(--cwvm-em-wash);
    color: var(--cwvm-em);
    font-family: var(--cwvm-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cwvm-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background-color: currentColor; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.cwvm-eyebrow-free { padding: 0.15rem 0.5rem; border-radius: 999px; background-color: var(--cwvm-em); color: #FFFFFF; letter-spacing: 0.04em; }
html[data-theme="dark"] .cwvm-eyebrow-free { background-color: #047857; }

/* ==========================================================================
   3. BUTTONS, CHIPS
   ========================================================================== */

.cwvm-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.cwvm-btn,
.cwvm-btn:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 50px;
    padding: 0 0.6rem 0 1.3rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.18s var(--cwvm-ease), box-shadow 0.2s ease, background-color 0.2s ease;
}
.cwvm-btn-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; transition: transform 0.25s var(--cwvm-ease); }
.cwvm-btn:hover .cwvm-btn-ico, .cwvm-btn:focus-visible .cwvm-btn-ico { transform: translateX(3px); }
.cwvm-btn:active { transform: translateY(1px) scale(0.99); }
.cwvm-btn:focus-visible { outline: 2px solid var(--cwvm-em); outline-offset: 3px; }

.cwvm-btn.is-primary,
.cwvm-btn.is-primary:visited {
    background-color: #047857;
    background-image: linear-gradient(180deg, #05845F 0%, #047857 50%, #065F46 100%);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px -12px rgba(4, 120, 87, 0.75);
}
.cwvm-btn.is-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.24) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--cwvm-ease); pointer-events: none; }
.cwvm-btn.is-primary:hover::after, .cwvm-btn.is-primary:focus-visible::after { transform: translateX(120%); }
.cwvm-btn.is-primary:hover,
.cwvm-btn.is-primary:focus,
.cwvm-btn.is-primary:active { background-color: #065F46; background-image: linear-gradient(180deg, #047857 0%, #065F46 100%); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 32px -12px rgba(4, 120, 87, 0.85); }
.cwvm-btn.is-primary .cwvm-btn-ico { background-color: rgba(255, 255, 255, 0.16); }

.cwvm-btn.is-ghost,
.cwvm-btn.is-ghost:visited { padding: 0 1.2rem; border-color: var(--cwvm-line); background-color: var(--cwvm-glass); color: var(--cwvm-ink); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.cwvm-btn.is-ghost svg { color: var(--cwvm-em); }
.cwvm-btn.is-ghost:hover,
.cwvm-btn.is-ghost:focus,
.cwvm-btn.is-ghost:active { border-color: var(--cwvm-em-line); background-color: var(--cwvm-em-wash); color: var(--cwvm-ink); }

.cwvm-btn.is-soft,
.cwvm-btn.is-soft:visited { border-color: var(--cwvm-em-line); background-color: var(--cwvm-em-wash); color: var(--cwvm-em); }
.cwvm-btn.is-soft .cwvm-btn-ico { background-color: var(--cwvm-card); }
.cwvm-btn.is-soft:hover,
.cwvm-btn.is-soft:focus,
.cwvm-btn.is-soft:active { border-color: var(--cwvm-em); background-color: var(--cwvm-card); color: var(--cwvm-em); }

.cwvm-btn.is-pro,
.cwvm-btn.is-pro:visited { background: var(--ch-pro-fill); color: #FFFFFF; box-shadow: var(--ch-pro-glow); }
.cwvm-btn.is-pro .cwvm-btn-ico { background-color: rgba(255, 255, 255, 0.16); }
.cwvm-btn.is-pro:hover,
.cwvm-btn.is-pro:focus,
.cwvm-btn.is-pro:active { background: var(--ch-pro-fill-hi); color: #FFFFFF; box-shadow: var(--ch-pro-glow-hi); }
.cwvm-btn.is-pro:focus-visible { outline-color: var(--cwvm-pro); }

.cwvm-btn.is-block { width: 100%; justify-content: space-between; }
.cwvm-btn.is-large { min-height: 58px; padding-left: 1.6rem; font-size: 1.08rem; }

.cwvm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem !important; }
.cwvm-chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.75rem; border: 1px solid var(--cwvm-line); border-radius: 999px; background-color: var(--cwvm-card); color: var(--cwvm-ink-2); font-size: 0.86rem; font-weight: 600; }
.cwvm-chips svg { flex: none; color: var(--cwvm-em); }

.cwvm-example { display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: 6px; background-color: #EEF2FF; color: #3730A3; font-family: var(--cwvm-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
html[data-theme="dark"] .cwvm-example { background-color: rgba(99, 102, 241, 0.2); color: #C7D2FE; }
.cwvm-pro-mark { display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border-radius: 6px; background: var(--ch-pro-fill); color: #FFFFFF; font-family: var(--cwvm-mono); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; }

/* ==========================================================================
   4. HERO PICTURE
   ========================================================================== */

.cwvm-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-top: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
@media (min-width: 1040px) { .cwvm-hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem; } }

.cwvm-hero-art { position: relative; container-type: inline-size; isolation: isolate; }
.cwvm-hero-art::before { content: ""; position: absolute; inset: -6% -4%; z-index: -2; background-image: radial-gradient(var(--cwvm-dot) 1.2px, transparent 1.3px); background-size: 18px 18px; mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%); }
.cwvm-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cwvm-aurora i { position: absolute; border-radius: 50%; filter: blur(42px); }
.cwvm-aurora i:nth-child(1) { top: 6%; left: 8%; width: 46%; height: 46%; background: var(--cwvm-aurora-a); }
.cwvm-aurora i:nth-child(2) { right: 4%; bottom: 10%; width: 40%; height: 42%; background: var(--cwvm-aurora-b); }
.cwvm-aurora i:nth-child(3) { top: 30%; right: 26%; width: 30%; height: 30%; background: var(--cwvm-aurora-c); }

@property --cwvm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cwvm-board {
    position: relative;
    margin: 6.75rem 0 5.5rem;
    padding: 1.1rem 1.15rem 2.1rem;
    border: 1px solid var(--cwvm-line);
    border-radius: 22px;
    background-color: var(--cwvm-glass);
    backdrop-filter: blur(14px);
    box-shadow: var(--cwvm-shadow-lift);
}
.cwvm-board::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--cwvm-angle), transparent 0 62%, rgba(16, 185, 129, 0.8) 80%, rgba(14, 116, 144, 0.6) 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cwvm-hero-art.is-play .cwvm-board::before { animation: cwvmRim 2.4s var(--cwvm-ease) 1 both; }
@keyframes cwvmRim { from { --cwvm-angle: 0deg; } to { --cwvm-angle: 360deg; } }
.cwvm-board-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.cwvm-board-site { display: inline-flex; align-items: center; gap: 0.4rem; overflow: hidden; color: var(--cwvm-ink); font-size: 0.88rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.cwvm-board-site svg { flex: none; color: var(--cwvm-em); }
.cwvm-week { margin-inline-start: auto; padding: 0.2rem 0.6rem; border: 1px solid var(--cwvm-em-line); border-radius: 999px; background-color: var(--cwvm-em-wash); color: var(--cwvm-em); font-family: var(--cwvm-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.cwvm-week b { font-weight: 800; }

.cwvm-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.cwvm-gauge { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0.85rem 0.55rem 0.8rem; border: 1px solid var(--cwvm-line-soft); border-radius: 16px; background-color: var(--cwvm-card); text-align: center; }
.cwvm-gauge-dial { position: relative; width: 100%; max-width: 150px; aspect-ratio: 120 / 70; }
.cwvm-gauge-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cwvm-gauge-band { fill: none; stroke-width: 9; stroke-linecap: round; }
.cwvm-gauge-band.is-good { stroke: var(--cwvm-good); }
.cwvm-gauge-band.is-ni { stroke: var(--cwvm-ni); }
.cwvm-gauge-band.is-poor { stroke: var(--cwvm-poor); }
.cwvm-gauge-mark { stroke: var(--cwvm-ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 2.6; opacity: 0.55; }
.cwvm-gauge-needle { position: absolute; left: calc(50% - 1.5px); bottom: 11.4%; width: 3px; height: 60%; border-radius: 3px; background-color: var(--cwvm-ink); transform: rotate(var(--deg-to)); transform-origin: 50% 100%; transition: transform 1.6s var(--cwvm-ease); }
.cwvm-gauge-hub { position: absolute; left: calc(50% - 6px); bottom: calc(11.4% - 6px); width: 12px; height: 12px; border: 3px solid var(--cwvm-ink); border-radius: 50%; background-color: var(--cwvm-card); }
.cwvm-gauge-v { display: inline-block; min-width: 4.4ch; margin-top: 0.35rem; color: var(--cwvm-ink); font-size: clamp(1.1rem, 0.7rem + 1.6cqi, 1.55rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cwvm-gauge-tag { width: 8em; margin-top: 0.3rem; padding: 0.12rem 0.4rem; text-align: center; white-space: nowrap; border: 1px solid transparent; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.cwvm-gauge-tag.is-good { border-color: rgba(16, 185, 129, 0.35); background-color: var(--cwvm-good-bg); color: var(--cwvm-good-ink); }
.cwvm-gauge-tag.is-ni { border-color: rgba(245, 158, 11, 0.4); background-color: var(--cwvm-ni-bg); color: var(--cwvm-ni-ink); }
.cwvm-gauge-tag.is-poor { border-color: rgba(239, 68, 68, 0.35); background-color: var(--cwvm-poor-bg); color: var(--cwvm-poor-ink); }
.cwvm-gauge-name { display: flex; flex-direction: column; margin-top: 0.55rem; color: var(--cwvm-ink); font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.cwvm-gauge-name small { color: var(--cwvm-body); font-size: 0.68rem; font-weight: 600; }
.cwvm-board-foot { margin-top: 0.8rem; color: var(--cwvm-body); font-size: 0.74rem; font-weight: 600; }

.cwvm-float { position: absolute; z-index: 2; padding: 0.8rem 0.95rem; border: 1px solid var(--cwvm-line); border-radius: 16px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.cwvm-float-k { display: flex; align-items: center; gap: 0.4rem; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.cwvm-float-big { display: block; margin-top: 0.2rem; color: var(--cwvm-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.cwvm-float-up { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; color: var(--cwvm-good-ink); font-size: 0.74rem; font-weight: 700; }
.cwvm-float.is-verdict { right: 0; bottom: 0.4rem; }
.cwvm-float.is-traffic { top: 0; right: 1.25rem; width: 13rem; }
.cwvm-float-num { display: block; margin: 0.2rem 0 0.45rem; color: var(--cwvm-ink); font-size: 1.15rem; font-weight: 800; }
.cwvm-float-num small { color: var(--cwvm-body); font-size: 0.72rem; font-weight: 600; }
.cwvm-minibars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.cwvm-minibars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background-color: var(--cwvm-em-500); opacity: 0.85; transform-origin: 50% 100%; }
.cwvm-float.is-feed { left: 1rem; bottom: 0; width: 16rem; }
.cwvm-live-dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--cwvm-good); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.cwvm-feed { display: grid; gap: 0.3rem; margin-top: 0.5rem !important; }
.cwvm-feed li { display: grid; height: 1.15rem; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; color: var(--cwvm-body); font-size: 0.74rem; font-weight: 600; }
.cwvm-feed code { overflow: hidden; padding: 0; background: none; color: var(--cwvm-ink); font-family: var(--cwvm-mono); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.cwvm-feed b { font-variant-numeric: tabular-nums; }
.cwvm-feed b.is-good { color: var(--cwvm-good-ink); }


/* ==========================================================================
   5. REAL NUMBERS CHART
   ========================================================================== */

.cwvm-data { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
@media (min-width: 980px) { .cwvm-data { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; } }
.cwvm-source { margin-top: 1rem !important; color: var(--cwvm-body); font-size: 0.86rem; line-height: 1.55; }
.cwvm-source a, .cwvm-source a:visited, .cwvm-plans-more a, .cwvm-plans-more a:visited, .cwvm-q a, .cwvm-q a:visited { color: var(--cwvm-em); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background-color: transparent; }
.cwvm-source a:hover, .cwvm-source a:focus, .cwvm-source a:active, .cwvm-plans-more a:hover, .cwvm-plans-more a:focus, .cwvm-plans-more a:active, .cwvm-q a:hover, .cwvm-q a:focus, .cwvm-q a:active { color: var(--cwvm-em-deep); background-color: transparent; }
html[data-theme="dark"] .cwvm-source a:hover, html[data-theme="dark"] .cwvm-plans-more a:hover, html[data-theme="dark"] .cwvm-q a:hover { color: #6EE7B7; }

.cwvm-chart { margin: 0; padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.cwvm-chart-cap { margin-bottom: 1rem; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cwvm-bars { display: grid; gap: 0.55rem; }
.cwvm-bar { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) 3.6rem; align-items: center; gap: 0.85rem; }
.cwvm-bar-name { overflow: hidden; color: var(--cwvm-ink-2); font-size: 0.92rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cwvm-bar-track { position: relative; height: 14px; overflow: hidden; border-radius: 999px; background-color: var(--cwvm-tile); box-shadow: inset 0 0 0 1px var(--cwvm-line-soft); }
.cwvm-bar-track i { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(90deg, #059669, #10B981); transform: scaleX(var(--v)); transform-origin: left center; transition: transform 1.1s var(--cwvm-ease); }
.cwvm-bar-v { color: var(--cwvm-ink); font-size: 0.95rem; font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.cwvm-bar.is-ref .cwvm-bar-name { color: var(--cwvm-body); font-style: italic; }
.cwvm-bar.is-ref .cwvm-bar-track i { background-image: repeating-linear-gradient(90deg, #94A3B8 0 6px, transparent 6px 10px); }
.cwvm-bar.is-focus .cwvm-bar-name, .cwvm-bar.is-focus .cwvm-bar-v { color: var(--cwvm-ni-ink); font-weight: 800; }
.cwvm-bar.is-focus .cwvm-bar-track i { background-image: linear-gradient(90deg, #D97706, #F59E0B); }

/* ==========================================================================
   6. TILES
   ========================================================================== */

.cwvm-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
@media (min-width: 900px) { .cwvm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.cwvm-tile { padding: 1.25rem 1.3rem 1.4rem; border: 1px solid var(--cwvm-line); border-radius: 20px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.cwvm-tile-art { position: relative; display: grid; place-items: center; height: 128px; margin-bottom: 1.1rem; overflow: hidden; border-radius: 14px; background-color: var(--cwvm-tile); background-image: radial-gradient(120% 90% at 0% 0%, var(--cwvm-em-wash), transparent 60%); }
.cwvm-tile-h { margin: 0 0 0.45rem; color: var(--cwvm-ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.cwvm-tile-p { color: var(--cwvm-body); font-size: 0.97rem; line-height: 1.6; }
.cwvm-tile-p strong { color: var(--cwvm-ink); }

.cwvm-tile-art.is-verdicts { display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: 0 1rem; }
.cwvm-mini { display: flex; justify-content: space-between; width: 100%; max-width: 15rem; padding: 0.35rem 0.6rem; border: 1px solid var(--cwvm-line); border-radius: 10px; background-color: var(--cwvm-card); color: var(--cwvm-ink-2); font-size: 0.8rem; font-weight: 600; }
.cwvm-mini b { color: var(--cwvm-good-ink); font-weight: 800; }

.cwvm-tile-art.is-line svg { position: absolute; inset: 14px 12px 22px; width: calc(100% - 24px); height: calc(100% - 36px); overflow: visible; }
.cwvm-line-band { fill: rgba(16, 185, 129, 0.12); }
.cwvm-line { fill: none; stroke: var(--cwvm-em); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cwvm-line-dot { fill: var(--cwvm-poor); }
.cwvm-alert { position: absolute; right: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border: 1px solid var(--cwvm-line); border-radius: 999px; background-color: var(--cwvm-card); color: var(--cwvm-ink-2); font-size: 0.7rem; font-weight: 700; }
.cwvm-alert svg { color: var(--cwvm-poor-ink); }

.cwvm-tile-art.is-traffic { display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem; padding: 0 1rem 1rem; }
.cwvm-tbars { display: flex; align-items: flex-end; gap: 5px; height: 84px; }
.cwvm-tbars i { position: relative; width: 14px; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background-color: rgba(16, 185, 129, 0.28); transform-origin: 50% 100%; }
.cwvm-tbars i::after { content: ""; position: absolute; right: 3px; bottom: 0; left: 3px; height: calc(var(--u) * 100%); border-radius: 2px 2px 1px 1px; background-color: #10B981; }
.cwvm-donut { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.cwvm-donut i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#10B981 0 77%, #60A5FA 77% 99%, #A78BFA 99% 100%); -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); mask: radial-gradient(circle, transparent 55%, #000 56%); }
.cwvm-donut b { position: relative; max-width: 3.5rem; color: var(--cwvm-ink); font-size: 0.62rem; font-weight: 800; line-height: 1.2; text-align: center; }

/* ==========================================================================
   7. SCREENSHOTS
   ========================================================================== */

.cwvm-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 900px) {
    .cwvm-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.62fr); }
    .cwvm-shot.is-main { grid-column: 1 / 3; }
    .cwvm-shot.is-phone { grid-column: 3; grid-row: 1 / 3; }
}
.cwvm-shot { margin: 0; }
.cwvm-shot figcaption { margin-top: 0.75rem; color: var(--cwvm-ink-2); font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.cwvm-frame { position: relative; overflow: hidden; border: 1px solid var(--cwvm-line); border-radius: 16px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.cwvm-frame img { display: block; width: 100%; height: auto; }
.cwvm-frame-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--cwvm-line); background-color: var(--cwvm-tile); }
.cwvm-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background-color: #CBD5E1; }
.cwvm-frame-bar i:nth-child(1) { background-color: #F87171; }
.cwvm-frame-bar i:nth-child(2) { background-color: #FBBF24; }
.cwvm-frame-bar i:nth-child(3) { background-color: #34D399; }
.cwvm-frame-bar em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-start: 0.5rem; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.66rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; }
.cwvm-frame.is-phone { max-width: 300px; margin: 0 auto; padding: 10px; border-radius: 34px; background-color: #0F172A; border-color: #1E293B; }
.cwvm-frame.is-phone img { aspect-ratio: 390 / 820; object-fit: cover; object-position: top; border-radius: 25px; }
.cwvm-example.is-on-shot, .cwvm-pro-mark.is-on-shot { position: absolute; top: 40px; right: 12px; box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.5); }
.cwvm-frame.is-phone .is-on-shot { top: 22px; right: 22px; }

/* ==========================================================================
   8. PLATFORMS
   ========================================================================== */

.cwvm-plats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
@media (min-width: 900px) { .cwvm-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.cwvm-plat-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem; border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.cwvm-plat-card.is-wp { border-color: var(--cwvm-em-line); background-image: radial-gradient(130% 100% at 0% 0%, var(--cwvm-em-wash), transparent 55%); box-shadow: var(--cwvm-shadow-lift); }
.cwvm-plat-logos { display: flex; align-items: center; gap: 0.6rem; min-height: 34px; }
.cwvm-plat-logos .ch-plat-logo { flex: none; color: var(--brand, var(--cwvm-ink)); }
html[data-theme="dark"] .cwvm-plat-logos .ch-plat-logo.is-bigcommerce,
html[data-theme="dark"] .cwvm-plat-logos .ch-plat-logo.is-squarespace { color: #F1F5F9; }
html[data-theme="dark"] .cwvm-plat-logos .ch-plat-logo.is-woocommerce { color: #C99BC2; }
.cwvm-plat-kind { align-self: flex-start; padding: 0.2rem 0.6rem; border: 1px solid var(--cwvm-line); border-radius: 999px; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cwvm-plat-kind.is-plugin { border-color: var(--cwvm-em-line); background-color: var(--cwvm-em-wash); color: var(--cwvm-em); }
.cwvm-plat-h { margin: 0; color: var(--cwvm-ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.cwvm-plat-p { flex: 1; color: var(--cwvm-body); font-size: 0.97rem; line-height: 1.6; }
.cwvm-plat-p strong { color: var(--cwvm-ink); }
.cwvm-plat-fact { padding: 0.6rem 0.75rem; border-radius: 12px; background-color: var(--cwvm-tile); color: var(--cwvm-body); font-size: 0.86rem; font-weight: 600; }
.cwvm-plat-fact b { color: var(--cwvm-ink); font-size: 1.05rem; font-weight: 800; }

/* ==========================================================================
   9. PLANS
   ========================================================================== */

.cwvm-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 820px) { .cwvm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cwvm-plan { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--cwvm-em-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.cwvm-plan.is-pro { border-color: var(--cwvm-pro-line); background-image: linear-gradient(160deg, var(--cwvm-pro-wash) 0%, transparent 60%); }
.cwvm-plan-k { display: flex; align-items: center; gap: 0.5rem; color: var(--cwvm-em); font-family: var(--cwvm-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cwvm-plan.is-pro .cwvm-plan-k { color: var(--cwvm-pro); }
.cwvm-plan-price { margin-top: 0.6rem !important; color: var(--cwvm-body); font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.cwvm-plan-price b { color: var(--cwvm-ink); font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.cwvm-plan-alt { display: block; margin-top: 0.1rem; font-size: 0.92rem; }
/* The Premium price arrives after load (/billing/prices). Its box has a fixed
   height and its text stays hidden behind a skeleton until cwvm.js marks it
   filled, so the arrival never moves the list under it (zero layout shift
   even where the card is above the fold, as on /pricing/). */
.cwvm-plan-price[data-cwvm-prices] { position: relative; height: 4.35rem; white-space: nowrap; }
.cwvm-js .cwvm-plan-price[data-cwvm-prices]:not(.is-filled) > * { visibility: hidden; }
.cwvm-js .cwvm-plan-price[data-cwvm-prices]:not(.is-filled)::before { content: ""; position: absolute; top: 0.35rem; left: 0; width: 9.5rem; height: 2.1rem; border-radius: 8px; background-color: var(--cwvm-tile); box-shadow: 0 2.75rem 0 -0.6rem var(--cwvm-tile); }
.cwvm-plan-price.is-fallback { color: var(--cwvm-ink); font-size: 1rem; font-weight: 700; line-height: 1.4; white-space: normal; }
.cwvm-plan-tax { min-height: 2.5em; margin-top: 0.15rem !important; color: var(--cwvm-body); font-size: 0.82rem; line-height: 1.25; }
.cwvm-plan-plus { margin-top: 1rem !important; color: var(--cwvm-ink); font-weight: 800; }
.cwvm-plan-list { display: grid; flex: 1; align-content: start; gap: 0.6rem; margin: 1rem 0 1.4rem !important; }
.cwvm-plan-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.6rem; color: var(--cwvm-ink-2); font-size: 0.97rem; line-height: 1.45; }
.cwvm-check { margin-top: 3px; color: var(--cwvm-em); }
.cwvm-plan.is-pro .cwvm-check { color: var(--cwvm-pro); }
.cwvm-plan-on { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 14px; background-color: var(--cwvm-pro-wash); color: var(--cwvm-pro); font-weight: 800; }
.cwvm-plans-more { margin-top: 1.1rem !important; text-align: center; }

/* ==========================================================================
   10. STEPS, FAQ, CLOSE
   ========================================================================== */

.cwvm-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem !important; counter-reset: none; }
@media (min-width: 820px) { .cwvm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cwvm-step { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.2rem; padding: 1.2rem; border: 1px solid var(--cwvm-line); border-radius: 18px; background-color: var(--cwvm-card); }
.cwvm-step-n { grid-row: 1 / 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background-color: var(--cwvm-em-wash); color: var(--cwvm-em); font-weight: 800; }
.cwvm-step b { color: var(--cwvm-ink); font-size: 1.02rem; font-weight: 800; }
.cwvm-step span:last-child { color: var(--cwvm-body); font-size: 0.93rem; line-height: 1.5; }
.cwvm-step span:last-child strong { color: var(--cwvm-ink); font-weight: 700; }

.cwvm-faq-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 1.75rem; }
@media (min-width: 900px) { .cwvm-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.cwvm-q { border: 1px solid var(--cwvm-line); border-radius: 16px; background-color: var(--cwvm-card); }
.cwvm-q summary { position: relative; padding: 1rem 2.75rem 1rem 1.1rem; color: var(--cwvm-ink); font-size: 1rem; font-weight: 700; list-style: none; cursor: pointer; }
.cwvm-q summary::-webkit-details-marker { display: none; }
.cwvm-q summary::after { content: ""; position: absolute; top: 50%; right: 1.1rem; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--cwvm-body); border-bottom: 2px solid var(--cwvm-body); transform: rotate(45deg); transition: transform 0.2s var(--cwvm-ease); }
.cwvm-q[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.cwvm-q summary:focus-visible { outline: 2px solid var(--cwvm-em); outline-offset: 2px; border-radius: 16px; }
.cwvm-q p { padding: 0 1.1rem 1.1rem; color: var(--cwvm-body); font-size: 0.96rem; line-height: 1.6; }

.cwvm-close { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: clamp(4rem, 3rem + 4vw, 7rem) 0 1rem; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) 1.5rem; border: 1px solid var(--cwvm-em-line); border-radius: 28px; background-color: var(--cwvm-card); background-image: radial-gradient(90% 120% at 50% 0%, var(--cwvm-em-wash), transparent 70%); box-shadow: var(--cwvm-shadow-lift); text-align: center; }
.cwvm-close .cwvm-h2 { margin: 0; }

/* ==========================================================================
   11. MOTION AND FAILSAFES
   ========================================================================== */

/* The hero story. With the script the board waits hidden until cwvm.js has
   set week 1, fades in, then plays; without it (or if it never arrives) a
   failsafe shows the finished picture after 3 s. */
.cwvm-board, .cwvm-float { transition: opacity 0.6s var(--cwvm-ease), transform 0.8s var(--cwvm-ease); }
.cwvm-float.is-verdict { transition: opacity 0.5s var(--cwvm-ease), transform 0.6s var(--cwvm-ease-pop); }
.cwvm-js .cwvm-hero-art:not(.is-armed):not(.is-static) .cwvm-board,
.cwvm-js .cwvm-hero-art:not(.is-armed):not(.is-static) .cwvm-float { opacity: 0; transform: translateY(16px); animation: cwvmSafe 0.5s ease 3s forwards; }
@keyframes cwvmSafe { to { opacity: 1; transform: none; } }
.cwvm-js .cwvm-hero-art.is-armed .cwvm-float.is-traffic { transition-delay: 0.15s; }
.cwvm-js .cwvm-hero-art.is-armed .cwvm-float.is-feed { transition-delay: 0.3s; }
.cwvm-js .cwvm-hero-art.is-armed:not(.is-play) .cwvm-gauge-needle { transform: rotate(var(--deg-from)); transition: none; }
.cwvm-js .cwvm-hero-art.is-armed:not(.is-play) .cwvm-float.is-verdict { opacity: 0; transform: translateY(14px) scale(0.96); }
.cwvm-hero-art.is-play .cwvm-float.is-verdict { transition-delay: 1.15s; }
.cwvm-hero-art.is-play .cwvm-minibars i { animation: cwvmGrowY 0.7s var(--cwvm-ease) calc(0.6s + var(--k, 0) * 60ms) backwards; }
@keyframes cwvmGrowY { from { transform: scaleY(0); } }
.cwvm-feed li.is-new { animation: cwvmFeedIn 0.5s var(--cwvm-ease) both; }
@keyframes cwvmFeedIn { from { opacity: 0; transform: translateY(-6px); } }

/* Reveal on scroll, only with the script; a failsafe shows everything if it never runs. */
.cwvm-js .cwvm [data-cwvm-reveal] { transition: opacity 0.7s var(--cwvm-ease), transform 0.7s var(--cwvm-ease); }
.cwvm-js .cwvm.is-ready [data-cwvm-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px); }
.cwvm-js .cwvm.is-ready .cwvm-data:not(.is-in) .cwvm-bar-track i { transform: scaleX(0); }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(2) .cwvm-bar-track i { transition-delay: 0.06s; }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(3) .cwvm-bar-track i { transition-delay: 0.12s; }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(4) .cwvm-bar-track i { transition-delay: 0.18s; }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(5) .cwvm-bar-track i { transition-delay: 0.24s; }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(6) .cwvm-bar-track i { transition-delay: 0.3s; }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(7) .cwvm-bar-track i { transition-delay: 0.36s; }
.cwvm-js .cwvm.is-ready .cwvm-bar:nth-child(8) .cwvm-bar-track i { transition-delay: 0.42s; }
.cwvm-tile:nth-child(2), .cwvm-plat-card:nth-child(2), .cwvm-step:nth-child(2) { transition-delay: 0.08s; }
.cwvm-tile:nth-child(3), .cwvm-plat-card:nth-child(3), .cwvm-step:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
    .cwvm *, .cwvm *::before, .cwvm *::after { animation: none !important; transition: none !important; }
    .cwvm-js .cwvm.is-ready [data-cwvm-reveal]:not(.is-in) { opacity: 1; transform: none; }
    .cwvm-js .cwvm.is-ready .cwvm-data:not(.is-in) .cwvm-bar-track i { transform: scaleX(var(--v)); }
    .cwvm-js .cwvm-hero-art .cwvm-board, .cwvm-js .cwvm-hero-art .cwvm-float { opacity: 1 !important; transform: none !important; }
    .cwvm-js .cwvm-hero-art .cwvm-gauge-needle { transform: rotate(var(--deg-to)) !important; }
}

/* ==========================================================================
   12. NARROW SCREENS
   ========================================================================== */

@container (max-width: 480px) {
    .cwvm-board { margin: 0; padding-bottom: 1rem; }
    .cwvm-gauges { grid-template-columns: minmax(0, 1fr); }
    .cwvm-gauge { display: grid; grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0, 1fr); grid-template-areas: "dial name" "dial v" "dial tag"; align-items: center; justify-items: start; column-gap: 0.9rem; row-gap: 0.15rem; padding: 0.7rem 0.8rem; text-align: start; }
    .cwvm-gauge-dial { grid-area: dial; align-self: center; max-width: none; }
    .cwvm-gauge-name { grid-area: name; margin: 0; }
    .cwvm-gauge-v { grid-area: v; min-width: 0; margin: 0; font-size: 1.35rem; }
    .cwvm-gauge-tag { grid-area: tag; margin: 0; }
    .cwvm-float.is-traffic, .cwvm-float.is-feed { display: none; }
    .cwvm-float.is-verdict { position: relative; right: auto; bottom: auto; margin-top: 0.75rem; }
}
@media (max-width: 1039px) { .cwvm-hero-art { min-height: 0; } }
@media (max-width: 600px) {
    .cwvm-bar { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 3.2rem; gap: 0.6rem; }
    .cwvm-bar-name { font-size: 0.84rem; }
    .cwvm-chart { padding: 1.1rem; }
    .cwvm-actions .cwvm-btn { flex: 1 1 100%; justify-content: space-between; }
    .cwvm-actions .cwvm-btn.is-ghost { justify-content: center; }
}

/* ==========================================================================
   13. BREADCRUMBS, WORDPRESS PAGE
   ========================================================================== */

.ch-crumbs { margin: 0 0 0.25rem; }
.ch-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 0; padding: 0; list-style: none; }
.ch-crumbs li { display: inline-flex; align-items: center; color: var(--cwvm-body); font-size: 0.8rem; font-weight: 600; }
.ch-crumbs li + li::before { content: "/"; margin: 0 0.55rem; color: #94A3B8; font-weight: 400; }
html[data-theme="dark"] .ch-crumbs li + li::before { color: #64748B; }
.ch-crumbs a, .ch-crumbs a:visited { color: var(--cwvm-body); text-decoration: none; background-color: transparent; }
.ch-crumbs a:hover, .ch-crumbs a:focus, .ch-crumbs a:active { color: var(--cwvm-em); text-decoration: underline; text-underline-offset: 3px; background-color: transparent; }
.ch-crumbs [aria-current] { color: var(--cwvm-ink); }

.cwvm-close-alt { margin-top: 0.4rem !important; color: var(--cwvm-body); font-size: 0.95rem; }
.cwvm-close-alt a, .cwvm-close-alt a:visited { color: var(--cwvm-em); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background-color: transparent; }
.cwvm-close-alt a:hover, .cwvm-close-alt a:focus, .cwvm-close-alt a:active { color: var(--cwvm-em-deep); background-color: transparent; }
html[data-theme="dark"] .cwvm-close-alt a:hover { color: #6EE7B7; }

/* Hero: the plugin's real report with the story played over it. The figure is
   the LCP and is never hidden or moved by layout. */
.cwvm-wpart-shot { margin: 1rem 1.25rem 4.25rem 1.75rem; }
.cwvm-wpart-shot .cwvm-frame { box-shadow: var(--cwvm-shadow-lift); }
.cwvm-connect { top: 58%; left: 0; width: 15rem; }
.cwvm-connect-stack { display: grid; margin-top: 0.5rem; }
.cwvm-connect-btn, .cwvm-connect-done { grid-area: 1 / 1; display: flex; align-items: center; height: 42px; border-radius: 12px; font-size: 0.88rem; font-weight: 800; transition: opacity 0.45s var(--cwvm-ease), transform 0.45s var(--cwvm-ease); }
.cwvm-connect-btn { justify-content: space-between; padding: 0 0.4rem 0 0.9rem; background-color: #047857; background-image: linear-gradient(180deg, #05845F, #065F46); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 20px -12px rgba(4, 120, 87, 0.8); opacity: 0; transform: scale(0.96); }
.cwvm-connect-btn i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.16); }
.cwvm-connect-done { gap: 0.5rem; padding: 0 0.85rem; border: 1px solid rgba(16, 185, 129, 0.35); background-color: var(--cwvm-good-bg); color: var(--cwvm-good-ink); }
.cwvm-widget { right: 0; bottom: 0; width: 16.5rem; }
.cwvm-widget .cwvm-float-k svg { color: var(--cwvm-body); }
.cwvm-widget-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.45rem 0 0.5rem; color: var(--cwvm-ink); font-size: 0.95rem; font-weight: 800; }
.cwvm-widget-pass { padding: 0.12rem 0.5rem; border-radius: 999px; background-color: var(--cwvm-good-bg); color: var(--cwvm-good-ink); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.cwvm-widget-rows { display: grid; gap: 0.3rem; }
.cwvm-widget-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4rem; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 9px; background-color: var(--cwvm-tile); color: var(--cwvm-ink-2); font-size: 0.78rem; font-weight: 600; }
.cwvm-widget-rows b { color: var(--cwvm-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.cwvm-widget-rows em { color: var(--cwvm-good-ink); font-size: 0.72rem; font-style: normal; font-weight: 800; text-align: end; }

/* The WordPress story: press, connected, the Dashboard widget rises. */
.cwvm-js .cwvm-wpart.is-armed:not(.is-play) .cwvm-connect-btn { opacity: 1; transform: none; }
.cwvm-js .cwvm-wpart.is-armed:not(.is-play) .cwvm-connect-done { opacity: 0; transform: translateY(6px); }
.cwvm-js .cwvm-wpart.is-armed:not(.is-play) .cwvm-widget { opacity: 0; transform: translateY(18px) scale(0.97); }
.cwvm-wpart.is-play .cwvm-connect-btn { animation: cwvmPress 0.9s var(--cwvm-ease) both; }
@keyframes cwvmPress { 0% { opacity: 1; transform: none; } 45% { opacity: 1; transform: scale(0.95); } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.98); } }
.cwvm-wpart.is-play .cwvm-connect-done { transition-delay: 0.8s; }
.cwvm-wpart.is-play .cwvm-widget { transition: opacity 0.6s var(--cwvm-ease) 1.3s, transform 0.8s var(--cwvm-ease-pop) 1.3s; }
.cwvm-wpart.is-play .cwvm-widget-rows li { animation: cwvmFeedIn 0.5s var(--cwvm-ease) backwards; }
.cwvm-wpart.is-play .cwvm-widget-rows li:nth-child(1) { animation-delay: 1.6s; }
.cwvm-wpart.is-play .cwvm-widget-rows li:nth-child(2) { animation-delay: 1.75s; }
.cwvm-wpart.is-play .cwvm-widget-rows li:nth-child(3) { animation-delay: 1.9s; }

/* WooCommerce numbers */
.cwvm-woo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
@media (min-width: 980px) { .cwvm-woo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } }
.cwvm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cwvm-stat { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1.1rem 1.3rem; border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); text-align: center; }
.cwvm-stat:nth-child(2) { transition-delay: 0.1s; }
.cwvm-ring { position: relative; display: grid; place-items: center; width: min(150px, 100%); aspect-ratio: 1; }
.cwvm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cwvm-ring-track { fill: none; stroke: #EEF2F7; stroke-width: 11; }
html[data-theme="dark"] .cwvm-ring-track { stroke: #1B2740; }
.cwvm-ring-fill { fill: none; stroke: var(--cwvm-good); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.4s var(--cwvm-ease) 0.15s; }
.cwvm-ring.is-ni .cwvm-ring-fill { stroke: var(--cwvm-ni); }
.cwvm-ring.is-poor .cwvm-ring-fill { stroke: var(--cwvm-poor); }
.cwvm-ring-v { position: relative; color: var(--cwvm-ink); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cwvm-stat-p { margin-top: 0.9rem !important; color: var(--cwvm-ink-2); font-size: 0.95rem; line-height: 1.45; }
.cwvm-stat-p strong { color: var(--cwvm-ink); }
.cwvm-stat-vs { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem !important; padding: 0.22rem 0.65rem; border-radius: 999px; background-color: var(--cwvm-good-bg); color: var(--cwvm-good-ink); font-size: 0.8rem; font-weight: 800; }
.cwvm-js .cwvm.is-ready .cwvm-stat:not(.is-in) .cwvm-ring-fill { stroke-dashoffset: 326.73; }

/* Tiles specific to the WordPress page */
.cwvm-tile-art.is-widget { padding: 1rem; }
.cwvm-wmini { display: grid; grid-template-columns: 1fr; gap: 0.35rem; width: 100%; max-width: 13.5rem; padding: 0.65rem 0.75rem; border: 1px solid var(--cwvm-line); border-radius: 12px; background-color: var(--cwvm-card); box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.5); }
.cwvm-wmini-k { color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.cwvm-wmini b { color: var(--cwvm-ink); font-size: 0.82rem; font-weight: 800; }
.cwvm-wmini i { display: block; height: 7px; border-radius: 999px; background-image: linear-gradient(90deg, #10B981 0 78%, var(--cwvm-tile) 78%); }
.cwvm-wmini i:nth-of-type(2) { background-image: linear-gradient(90deg, #10B981 0 84%, var(--cwvm-tile) 84%); }
.cwvm-wmini i:nth-of-type(3) { background-image: linear-gradient(90deg, #10B981 0 91%, var(--cwvm-tile) 91%); }
.cwvm-line-dot.is-good { fill: var(--cwvm-good); }
.cwvm-alert.is-good svg { color: var(--cwvm-good-ink); }

@media (min-width: 900px) {
    .cwvm-shots.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cwvm-shots.is-two .cwvm-shot.is-main { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .cwvm-steps.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 820px) and (max-width: 999px) { .cwvm-steps.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@container (max-width: 480px) {
    .cwvm-wpart-shot { margin: 0 0 0.9rem; }
    .cwvm-connect { display: none; }
    .cwvm-widget { position: relative; right: auto; bottom: auto; width: auto; }
}
@media (max-width: 480px) {
    .cwvm-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .cwvm-connect-btn { opacity: 0 !important; }
    .cwvm-connect-done, .cwvm-widget { opacity: 1 !important; transform: none !important; }
    .cwvm-js .cwvm.is-ready .cwvm-stat:not(.is-in) .cwvm-ring-fill { stroke-dashoffset: var(--off); }
}