/**
 * File: /assets/css/cwv-tool.css
 * Module: Store Speed Test
 *
 * Light theme first, dark overrides at the bottom (html[data-theme="dark"]),
 * exactly as pdf-tools.css is organised. The token names, the surface ladder,
 * the notice grammar, the radius, the easing and the shadows are deliberately
 * the same system rather than a second one that happens to look similar.
 *
 * The first version of this file invented its own palette and painted the hero
 * as a permanently dark panel in both themes. That was wrong twice over: it
 * ignored the theme the visitor chose, and it made this page the only surface
 * on the site that does not answer to the global ladder. Everything here now
 * resolves through --ch-cwv-* tokens which mirror --ch-pdf-*, and the hero is a
 * surface like any other.
 *
 * Token scope note, the trap this project has already been bitten by: a
 * background-color reading a custom property that resolves to nothing is an
 * INVALID declaration. The browser drops it silently and the element renders
 * fully transparent, with no error anywhere. Every token below is declared on
 * .ch-page-cwv and nothing here is moved to <body> by JavaScript. If anything
 * ever is, its root goes in BOTH token blocks.
 *
 * Section map:
 *   1. Tokens, light
 *   2. Hero
 *   2.5. Real User Monitoring cross-sell
 *   3. Waiting, alerts, walls
 *   4. Report: summary, vitals, field data
 *   5. Report: locked teaser, findings, apps, Premium panel
 *   6. Static sections
 *   7. Responsive
 *   8. Tokens, dark
 *   9. Reduced motion
 */

/* ==========================================================================
   1. TOKENS, LIGHT
   ========================================================================== */

.ch-page-cwv {
    /* Surfaces, page well to panel to tile. A tile must never equal its panel
       or the controls inside it disappear. */
    --ch-cwv-surface:  #FFFFFF;
    --ch-cwv-well:     #F1F5F9;
    --ch-cwv-tile:     #F8FAFC;
    --ch-cwv-tile-hi:  #FFFFFF;

    /* Hairlines. Resting comes from the global --ch-border; these are the
       hover and pressed steps up the Slate ladder. */
    --ch-cwv-line-soft: #CBD5E1;
    --ch-cwv-line-hard: #94A3B8;

    /* Emerald at the darkness this theme needs to hold contrast AS TEXT.
       Emerald 500 fails on white, Emerald 600 fails on slate, so it flips. */
    --ch-cwv-accent:       #059669;
    --ch-cwv-accent-bg:    rgba(16, 185, 129, 0.09);
    --ch-cwv-accent-bg-hi: rgba(16, 185, 129, 0.16);
    --ch-cwv-accent-line:  rgba(16, 185, 129, 0.45);

    /* Verdict colours. Same grammar as the notices: wash, hairline, solid text.
       These carry meaning rather than decoration, so the text step is the one
       that has to hold contrast on every surface it can land on. */
    --ch-cwv-good:      #047857;
    --ch-cwv-good-bg:   rgba(16, 185, 129, 0.10);
    --ch-cwv-good-line: rgba(16, 185, 129, 0.40);

    --ch-cwv-warn:      #92400E;
    --ch-cwv-warn-bg:   rgba(245, 158, 11, 0.10);
    --ch-cwv-warn-line: rgba(245, 158, 11, 0.38);

    --ch-cwv-stop:      #B91C1C;
    --ch-cwv-stop-bg:   rgba(239, 68, 68, 0.07);
    --ch-cwv-stop-line: rgba(239, 68, 68, 0.34);

    --ch-cwv-info:      #1D4ED8;
    --ch-cwv-info-bg:   rgba(37, 99, 235, 0.08);
    --ch-cwv-info-line: rgba(37, 99, 235, 0.32);

    /* The deep surface. Used in DARK mode only, by the quota wall, the guest
       sign-up card and the Premium panel (section 8). In light mode those
       three are light cards that stand out through colour, wash and shadow:
       until 2026-10-04 they were this #0F172A in both themes, and Adrian ruled
       it out - a light page must not need a black box to make a block stand
       out. Section 8 resets these values for dark. */
    --ch-cwv-deep:      #0F172A;
    --ch-cwv-deep-2:    #1E293B;
    --ch-cwv-deep-ink:  #E2E8F0;
    --ch-cwv-deep-mute: #94A3B8;
    --ch-cwv-deep-line: #334155;

    /* Premium is royal blue across the site: the header "Pro" badge is Blue 800
       and the Premium link Blue 900. Emerald is the free action on this page,
       so the two tiers read apart by colour before a word is read. */
    --ch-cwv-pro:       #1E40AF;
    --ch-cwv-pro-bg:    rgba(37, 99, 235, 0.06);
    --ch-cwv-pro-bg-hi: rgba(37, 99, 235, 0.12);
    --ch-cwv-pro-line:  rgba(37, 99, 235, 0.38);
    --ch-cwv-pro-fill:  linear-gradient(180deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%);

    --ch-cwv-radius:      14px;
    --ch-cwv-radius-sm:   10px;
    --ch-cwv-shadow:      0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
    --ch-cwv-shadow-lift: 0 14px 26px -14px rgba(15, 23, 42, 0.24);
    --ch-cwv-ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --ch-cwv-mono:        'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
}

.ch-page-cwv { background-color: var(--ch-bg-main); color: var(--ch-text-main); }

.ch-page-cwv *,
.ch-page-cwv *::before,
.ch-page-cwv *::after { box-sizing: border-box; }

/* ==========================================================================
   2. HERO
   ========================================================================== */

.ch-cwvhero {
    position: relative;
    overflow: hidden;
    background-color: var(--ch-cwv-surface);
    border-bottom: 1px solid var(--ch-border);
    padding: clamp(2.25rem, 5.5vw, 4rem) 1.25rem clamp(2rem, 4.5vw, 3rem);
    isolation: isolate;
}

/* A grid this faint is texture, not pattern. It exists so the hero reads as a
   surface with depth rather than as a flat block, and it is masked so it never
   competes with the copy sitting on top of it. */
.ch-cwvhero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ch-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--ch-border) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .5;
    mask-image: radial-gradient(ellipse 75% 65% at 30% 20%, #000 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 30% 20%, #000 10%, transparent 70%);
    z-index: -1;
}

.ch-cwvhero-aurora {
    position: absolute;
    top: -45%;
    right: -10%;
    width: min(760px, 90%);
    aspect-ratio: 2 / 1;
    background: radial-gradient(closest-side, var(--ch-cwv-accent-bg-hi), transparent 72%);
    filter: blur(14px);
    z-index: -1;
    animation: chCwvDrift 16s var(--ch-cwv-ease) infinite alternate;
}

@keyframes chCwvDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-26px, 20px) scale(1.08); }
}

.ch-cwvhero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.ch-cwvhero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .7rem;
    border: 1px solid var(--ch-cwv-accent-line);
    border-radius: 99px;
    background-color: var(--ch-cwv-accent-bg);
    font-family: var(--ch-cwv-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ch-cwv-accent);
    margin-bottom: 1.1rem;
}

.ch-cwvhero-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    animation: chCwvPing 2.4s var(--ch-cwv-ease) infinite;
}

@keyframes chCwvPing {
    0%   { box-shadow: 0 0 0 0 var(--ch-cwv-accent-line); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ch-cwvhero-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.028em;
    color: var(--ch-text-main);
}

.ch-cwvhero-title span {
    display: block;
    margin-top: .5rem;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ch-text-muted);
}

.ch-cwvhero-sub {
    margin: 0 0 1.75rem;
    max-width: 62ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ch-text-muted);
}

.ch-cwvhero-sub strong { color: var(--ch-text-main); font-weight: 650; }

/* --- The form ------------------------------------------------------------
   The field is two layers rather than one. The wrapper owns the focus ring and
   the resting shadow so the ring sits OUTSIDE the border without clipping the
   input, and the inner row owns the border and the background. One element
   cannot do both without the ring landing underneath the button. */

.ch-cwv-form { margin: 0 0 1.5rem; max-width: 34rem; }

.ch-cwv-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .45rem .45rem 1rem;
    background-color: var(--ch-cwv-surface);
    border: 1.5px solid var(--ch-cwv-line-soft);
    border-radius: calc(var(--ch-cwv-radius) + 2px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px -22px rgba(15, 23, 42, .5);
    transition: border-color .2s var(--ch-cwv-ease), box-shadow .25s var(--ch-cwv-ease), background-color .2s;
}

.ch-cwv-field:hover { border-color: var(--ch-cwv-line-hard); }

.ch-cwv-field:focus-within {
    background-color: var(--ch-cwv-tile-hi);
    border-color: var(--ch-cta);
    box-shadow: 0 0 0 4px var(--ch-cwv-accent-bg), 0 12px 30px -20px rgba(16, 185, 129, .55);
}

.ch-cwv-field-ico {
    display: inline-flex;
    color: var(--ch-text-muted);
    flex-shrink: 0;
    transition: color .2s var(--ch-cwv-ease);
}

.ch-cwv-field:focus-within .ch-cwv-field-ico { color: var(--ch-cwv-accent); }

/* GeneratePress ships generic input rules that win on specificity, so colour,
   background and caret are stated rather than inherited. Same hard override the
   portal controls need. */
.ch-page-cwv .ch-cwv-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    background-color: transparent !important;
    color: var(--ch-text-main) !important;
    caret-color: var(--ch-cta);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -.005em;
    padding: .7rem .2rem !important;
    outline: none !important;
    box-shadow: none !important;
    text-overflow: ellipsis;
}

/* The placeholder shows a product URL rather than a bare domain, because the
   most common mistake this tool sees is a home page being tested and then read
   as the whole store. */
.ch-page-cwv .ch-cwv-input::placeholder {
    color: var(--ch-text-muted);
    opacity: 1;
}

.ch-page-cwv .ch-cwv-go {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .82rem 1.35rem;
    border: 0;
    border-radius: var(--ch-cwv-radius-sm);
    /* Emerald 700 to 800, the fill section 8 documents for every filled CTA:
       white on #047857 is 5.48:1. The #10B981 start (2.54:1) was missed here
       by the 2026-10-03 pass and caught by the contrast audit on 2026-10-10. */
    background-image: linear-gradient(180deg, #047857 0%, #065F46 100%);
    background-color: #047857;
    color: #FFFFFF !important;
    font-size: .93rem;
    font-weight: 750;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 18px -6px rgba(16, 185, 129, .55);
    transition: transform .2s var(--ch-cwv-ease), box-shadow .2s var(--ch-cwv-ease), filter .2s, opacity .2s;
}

/* The sheen runs once on hover rather than on a loop. A button that shimmers
   permanently is an advert; one that answers the pointer is a control. */
.ch-page-cwv .ch-cwv-go::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.ch-page-cwv .ch-cwv-go:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 24px -8px rgba(16, 185, 129, .6);
}

.ch-page-cwv .ch-cwv-go:hover:not(:disabled)::after { animation: chCwvSheen .7s var(--ch-cwv-ease) 1; }

@keyframes chCwvSheen {
    from { left: -60%; opacity: .9; }
    to   { left: 130%; opacity: 0; }
}

.ch-page-cwv .ch-cwv-go:active:not(:disabled) { transform: translateY(0); filter: brightness(.97); }

.ch-page-cwv .ch-cwv-go:focus-visible {
    outline: 2px solid var(--ch-cwv-accent);
    outline-offset: 3px;
}

.ch-page-cwv .ch-cwv-go:disabled { opacity: .62; cursor: progress; transform: none; box-shadow: none; }

.ch-cwv-go-ico { display: inline-flex; transition: transform .2s var(--ch-cwv-ease); }
.ch-page-cwv .ch-cwv-go:hover:not(:disabled) .ch-cwv-go-ico { transform: translateX(3px); }
.ch-cwv-form.is-busy .ch-cwv-go-ico { animation: chCwvSpin 1s linear infinite; }

@keyframes chCwvSpin { to { transform: rotate(360deg); } }

.ch-cwv-formnote { margin: .7rem 0 0; min-height: 1.2em; font-size: .86rem; color: var(--ch-text-muted); }
.ch-cwv-formnote.is-error { color: var(--ch-cwv-stop); }
.ch-cwv-formnote.is-ok    { color: var(--ch-cwv-good); font-weight: 600; }

/* --- Readout strip --------------------------------------------------------
   Three cells: who measured it, on what hardware, and what it costs the
   visitor. The third is the only per-account value on a cached page and is
   written by cwv-tool.js after load. See the note in the template.

   A grid, not a flex row with dividers. Dividers between wrapping flex cells
   leave a hairline hanging off the end of a short row, and this strip wraps at
   three separate widths. */

.ch-cwv-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    max-width: 40rem;
}

.ch-cwv-readout-cell {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .8rem .9rem .85rem;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius-sm);
    transition: border-color .2s var(--ch-cwv-ease), background-color .2s var(--ch-cwv-ease);
}

.ch-cwv-readout-cell:hover { border-color: var(--ch-cwv-line-soft); }

.ch-cwv-readout-k {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ch-cwv-mono);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-cwv-readout-ico { display: inline-flex; opacity: .85; }

.ch-cwv-readout-v {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.3;
    color: var(--ch-text-main);
}

.ch-cwv-readout-hint {
    display: block;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--ch-text-muted);
}

/* The plan cell. Emerald edge and an allowance meter, because this is the one
   cell whose number changes and the one a visitor is annoyed to find out about
   only after pressing the button. */
.ch-cwv-readout-cell.is-plan {
    background-color: var(--ch-cwv-accent-bg);
    border-color: var(--ch-cwv-accent-line);
}

.ch-cwv-readout-cell.is-plan .ch-cwv-readout-k { color: var(--ch-cwv-accent); }

.ch-cwv-readout-meter {
    display: block;
    height: 4px;
    margin: .1rem 0 .15rem;
    border-radius: 99px;
    background-color: var(--ch-cwv-well);
    overflow: hidden;
}

.ch-cwv-readout-meter i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 99px;
    background-color: var(--ch-cta);
    transition: width .5s var(--ch-cwv-ease), background-color .3s;
}

/* Amber at a fifth left, slate at nothing left. Red stays reserved for a failed
   measurement on this page, and a spent allowance is not a failure. */
.ch-cwv-readout-cell[data-left="low"]  .ch-cwv-readout-meter i { background-color: #F59E0B; }
.ch-cwv-readout-cell[data-left="none"] .ch-cwv-readout-meter i { background-color: var(--ch-cwv-line-hard); }

.ch-cwv-readout-cell[data-left="none"] {
    background-color: var(--ch-cwv-tile);
    border-color: var(--ch-border);
}
.ch-cwv-readout-cell[data-left="none"] .ch-cwv-readout-k { color: var(--ch-text-muted); }

/* --- Hero stage -----------------------------------------------------------
   A page filling in behind a measuring pass, not a finished phone mockup. The
   whole block is aria-hidden, so nothing in it carries meaning that is lost
   without it, and every animation stops under prefers-reduced-motion. */

.ch-cwvhero-stage { display: flex; justify-content: center; }

.ch-cwvhs {
    position: relative;
    width: min(268px, 80%);
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Emerald bloom behind the device, so the stage has a light source rather than
   floating on the hero background. */
.ch-cwvhs-glow {
    position: absolute;
    inset: -18% -22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ch-cwv-accent-bg-hi), transparent 70%);
    filter: blur(6px);
    z-index: 0;
    animation: chCwvBreathe 6s var(--ch-cwv-ease) infinite alternate;
}

@keyframes chCwvBreathe {
    from { opacity: .55; transform: scale(.94); }
    to   { opacity: 1;   transform: scale(1.06); }
}

.ch-cwvhs-phone {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 2px solid var(--ch-cwv-line-soft);
    border-radius: 26px;
    background-color: var(--ch-cwv-surface);
    padding: 1.5rem .95rem 1.1rem;
    overflow: hidden;
    box-shadow: var(--ch-cwv-shadow), 0 24px 48px -30px rgba(15, 23, 42, .55);
}

.ch-cwvhs-phone > span { display: block; border-radius: 6px; background-color: var(--ch-cwv-well); }

/* The notch is absolute so it does not take a row in the skeleton flow. */
.ch-cwvhs-notch {
    position: absolute !important;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 6px;
    border-radius: 99px !important;
    background-color: var(--ch-cwv-line-soft) !important;
    opacity: .7;
}

.ch-cwvhs-bar  { height: 10px; width: 55%; margin-bottom: .8rem; animation: chCwvFill 3.6s var(--ch-cwv-ease) infinite; }
.ch-cwvhs-hero { height: 40%; width: 100%; margin-bottom: .8rem; animation: chCwvFill 3.6s var(--ch-cwv-ease) .35s infinite; }
.ch-cwvhs-line { height: 8px; margin-bottom: .5rem; }
.ch-cwvhs-line.l1 { width: 92%; animation: chCwvFill 3.6s var(--ch-cwv-ease) .6s infinite; }
.ch-cwvhs-line.l2 { width: 74%; animation: chCwvFill 3.6s var(--ch-cwv-ease) .75s infinite; }

.ch-cwvhs-cta {
    height: 30px;
    width: 60%;
    margin-top: 1rem;
    background-image: linear-gradient(180deg, #34D399, var(--ch-cta)) !important;
    box-shadow: 0 6px 16px -8px rgba(16, 185, 129, .8);
    animation: chCwvFill 3.6s var(--ch-cwv-ease) 1s infinite;
}

@keyframes chCwvFill {
    0%, 12%  { opacity: .2; transform: translateY(5px); }
    38%, 88% { opacity: 1;  transform: translateY(0); }
    100%     { opacity: .2; transform: translateY(5px); }
}

/* The measuring pass. One emerald band travels down the screen on the same
   3.6s clock as the skeleton, so the page appears to fill in behind it rather
   than beside it. */
.ch-cwvhs-scan {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    height: 34% !important;
    border-radius: 0 !important;
    background-image: linear-gradient(180deg,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, .10) 55%,
        rgba(16, 185, 129, .30) 88%,
        var(--ch-cta) 99%) !important;
    background-color: transparent !important;
    pointer-events: none;
    animation: chCwvSweep 3.6s var(--ch-cwv-ease) infinite;
}

@keyframes chCwvSweep {
    0%        { transform: translateY(-110%); opacity: 0; }
    12%       { opacity: 1; }
    70%, 100% { transform: translateY(300%); opacity: 0; }
}

/* The pulse ring, top right of the device: the "still measuring" tell. */
.ch-cwvhs-ring {
    position: absolute;
    z-index: 2;
    top: 6%;
    right: -6%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--ch-cta);
    background-color: var(--ch-cwv-surface);
    box-shadow: 0 0 0 0 var(--ch-cwv-accent-line);
    animation: chCwvPulse 2.4s var(--ch-cwv-ease) infinite;
}

.ch-cwvhs-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background-color: var(--ch-cta);
}

@keyframes chCwvPulse {
    0%   { box-shadow: 0 0 0 0 var(--ch-cwv-accent-line); }
    70%  { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ch-cwvhs-ekg {
    position: absolute;
    z-index: 2;
    left: -14%;
    right: -14%;
    bottom: 9%;
    height: 44px;
    pointer-events: none;
}

.ch-cwvhs-ekg svg { width: 100%; height: 100%; }

.ch-cwvhs-ekg path {
    fill: none;
    stroke: var(--ch-cta);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px var(--ch-cwv-accent-line));
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: chCwvTrace 3.6s var(--ch-cwv-ease) infinite;
}

@keyframes chCwvTrace {
    0%       { stroke-dashoffset: 160; }
    45%, 70% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: -160; }
}

/* ==========================================================================
   2.5. STORE SPEED MONITORING CROSS-SELL
   Full-bleed band between the hero and the static body, same surface and
   texture language as the hero (aurora grid, mono kicker, accent tokens) so
   it reads as a second act of the same product moment instead of just
   another static section further down the page.

   Four stacked parts, in the order the reader asks: the pitch, the three
   setup steps, the four dashboard panels, and the two plans. The plans sit
   below a hairline and carry their own header, price line and button each,
   because the previous version put two near-identical lists side by side
   with the buttons outside both, and the tier split did not read at all.
   ========================================================================== */

.ch-cwv-rum {
    position: relative;
    overflow: hidden;
    background-color: var(--ch-cwv-surface);
    border-bottom: 1px solid var(--ch-border);
    padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
    isolation: isolate;
}

.ch-cwv-rum-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ch-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--ch-border) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .4;
    mask-image: radial-gradient(ellipse 70% 60% at 75% 100%, #000 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 100%, #000 10%, transparent 70%);
    z-index: -1;
}

.ch-cwv-rum-inner { position: relative; max-width: 1200px; margin: 0 auto; }

.ch-cwv-rum-head { max-width: 74ch; margin: 0 0 1.5rem; }

.ch-cwv-rum-head h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.6rem, 3.6vw, 2.15rem);
    font-weight: 780;
    letter-spacing: -.028em;
    line-height: 1.18;
    color: var(--ch-text-main);
}

.ch-cwv-rum-lead { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--ch-text-muted); }
.ch-cwv-rum-lead strong { color: var(--ch-text-main); font-weight: 650; }

/* --- Setup: three numbered steps in one well --------------------------- */

.ch-cwv-rum-setup {
    margin: 0;
    padding: 1rem 1.25rem 1.1rem;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
}

/* Same ping-dot the hero kicker uses (chCwvPing, defined in section 2), so
   the two "this is live" signals on the page share one visual vocabulary. */
.ch-cwv-rum-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .8rem;
    font-family: var(--ch-cwv-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ch-cwv-accent);
}

.ch-cwv-rum-label .ch-cwvhero-dot { flex-shrink: 0; }

.ch-cwv-rum-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem 1.5rem;
}

.ch-cwv-rum-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    margin: 0;
}

.ch-cwv-rum-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ch-cwv-accent-line);
    background-color: var(--ch-cwv-accent-bg);
    color: var(--ch-cwv-accent);
    font-family: var(--ch-cwv-mono);
    font-size: .78rem;
    font-weight: 700;
}

.ch-cwv-rum-step h3 { margin: .15rem 0 .15rem; font-size: .94rem; font-weight: 730; letter-spacing: -.01em; color: var(--ch-text-main); }
.ch-cwv-rum-step p  { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ch-text-muted); }
.ch-cwv-rum-step p strong { color: var(--ch-text-main); font-weight: 650; }

/* --- Setup status: where THIS visitor is in the three steps -------------
   One bar, five states set from PHP (guest, none, pending, paused, live).
   Neutral for the two that are a call to act, amber while the install is
   unconfirmed or paused, green once real visits are arriving. */

.ch-cwv-rum-status {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .75rem .85rem .75rem 1rem;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius-sm);
    background-color: var(--ch-cwv-surface);
}

.ch-cwv-rum-status-ico {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ch-cwv-accent);
}

.ch-cwv-rum-status p {
    flex: 1 1 auto;
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

.ch-cwv-rum-status p strong { color: var(--ch-text-main); font-weight: 650; }

.ch-page-cwv .ch-cwv-rum-status .ch-cwv-plan-cta { flex: 0 0 auto; padding: .62rem 1.1rem; }

.ch-cwv-rum-status.is-pending,
.ch-cwv-rum-status.is-paused {
    border-color: var(--ch-cwv-warn-line);
    background-color: var(--ch-cwv-warn-bg);
}

.ch-cwv-rum-status.is-pending .ch-cwv-rum-status-ico,
.ch-cwv-rum-status.is-paused .ch-cwv-rum-status-ico { color: var(--ch-cwv-warn); }

.ch-cwv-rum-status.is-live {
    border-color: var(--ch-cwv-good-line);
    background-color: var(--ch-cwv-good-bg);
}

.ch-cwv-rum-status.is-live .ch-cwv-rum-status-ico { color: var(--ch-cwv-good); }

/* --- The four dashboard panels: a question and one sentence each -------- */

.ch-cwv-rum-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.ch-cwv-rum-tile {
    padding: 1.1rem 1.15rem;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    transition: border-color .2s var(--ch-cwv-ease), transform .2s var(--ch-cwv-ease);
}

.ch-cwv-rum-tile:hover { border-color: var(--ch-cwv-line-soft); transform: translateY(-2px); }

.ch-cwv-rum-tile-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: .7rem;
    border-radius: 9px;
    background-color: var(--ch-cwv-accent-bg);
    color: var(--ch-cwv-accent);
}

.ch-cwv-rum-tile h4 { margin: 0 0 .35rem; font-size: .96rem; font-weight: 730; letter-spacing: -.012em; line-height: 1.3; color: var(--ch-text-main); }
.ch-cwv-rum-tile p  { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ch-text-muted); }
.ch-cwv-rum-tile p strong { color: var(--ch-text-main); font-weight: 650; }

/* --- Plans ------------------------------------------------------------- */

.ch-cwv-rum-subhead.is-ruled {
    margin-top: 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ch-border);
}

.ch-cwv-rum-subhead {
    margin: 1.75rem 0 .9rem;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    font-weight: 770;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--ch-text-main);
}

.ch-cwv-rum-delta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.ch-cwv-rum-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.3rem 1.4rem;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    overflow: hidden;
}

/* Premium gets the Pro blue wash, a heavier edge, a lift and a 3px blue bar
   across the top, so the two cards differ at a glance before a word of either
   is read: Emerald is Free, blue is Premium, as in the site header. */
.ch-cwv-rum-tier.is-premium {
    border: 1.5px solid var(--ch-cwv-pro-line);
    background-color: var(--ch-cwv-pro-bg);
    box-shadow: var(--ch-cwv-shadow);
}

.ch-cwv-rum-tier.is-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #3B82F6 0%, #1E40AF 100%);
}

.ch-cwv-rum-tier-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.ch-cwv-rum-tier-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ch-cwv-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-cwv-rum-tier.is-premium .ch-cwv-rum-tier-tag { color: var(--ch-cwv-pro); }
.ch-cwv-rum-tier.is-premium .ch-cwv-rum-tick      { color: var(--ch-cwv-pro); }
.ch-cwv-rum-tier.is-premium .ch-cwv-rum-tier-price { border-bottom-color: var(--ch-cwv-pro-line); }

.ch-cwv-rum-tier.is-premium .ch-cwv-rum-tier-badge {
    border-color: var(--ch-cwv-pro-line);
    background-color: var(--ch-cwv-pro-bg-hi);
    color: var(--ch-cwv-pro);
}
.ch-cwv-rum-tier-tag svg { flex-shrink: 0; }

.ch-cwv-rum-tier-badge {
    padding: .2rem .6rem;
    border: 1px solid var(--ch-cwv-accent-line);
    border-radius: 99px;
    background-color: var(--ch-cwv-accent-bg-hi);
    font-family: var(--ch-cwv-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ch-cwv-accent);
}

.ch-cwv-rum-tier-price {
    margin: .5rem 0 .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px dashed var(--ch-cwv-line-soft);
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    font-weight: 780;
    letter-spacing: -.022em;
    line-height: 1.2;
    color: var(--ch-text-main);
}

.ch-cwv-rum-tier-price span {
    margin-left: .35rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ch-text-muted);
}

.ch-cwv-rum-tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.ch-cwv-rum-tier-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ch-text-main);
}

.ch-cwv-rum-tier-list strong { font-weight: 700; }

.ch-cwv-rum-tick {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: .12em;
    color: var(--ch-cwv-accent);
}

/* margin-top:auto pins both buttons to the bottom edge, so they line up
   across the two cards whatever the list lengths are. */
.ch-cwv-rum-tier-cta { margin-top: auto; padding-top: 1.15rem; }

/* --- Speed Test vs Monitoring: the two products side by side -------------
   Two columns that read across: how often, what it measures, what you get.
   The test column is a plain tile; the monitoring column is the one this band
   sells, so it gets the Emerald wash, hairline, top bar and tinted shadow (a
   light card in light mode, the same tokens on slate in dark). No links and
   no buttons inside, so there is no hover state for GeneratePress to repaint.
   Chip and list text sit on an opaque surface or use --ch-text-main and
   --ch-cwv-good, the steps that hold AA on the wash in both themes. */

.ch-cwv-rum-vs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    margin: 0 0 2.25rem;
}

.ch-cwv-rum-vs-col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: 1.15rem 1.3rem 1.25rem;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    overflow: hidden;
}

.ch-cwv-rum-vs-col.is-monitor {
    background-color: var(--ch-cwv-accent-bg);
    border: 1.5px solid var(--ch-cwv-accent-line);
    box-shadow: var(--ch-cwv-shadow), 0 14px 30px -20px rgba(16, 185, 129, .5);
}

.ch-cwv-rum-vs-col.is-monitor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #34D399 0%, #047857 100%);
}

.ch-cwv-rum-vs-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .62rem;
    border: 1px solid var(--ch-border);
    border-radius: 99px;
    background-color: var(--ch-cwv-surface);
    font-family: var(--ch-cwv-mono);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-cwv-rum-vs-chip-ico { display: inline-flex; flex-shrink: 0; }

.ch-cwv-rum-vs-col.is-monitor .ch-cwv-rum-vs-chip {
    border-color: var(--ch-cwv-good-line);
    color: var(--ch-cwv-good);
}

.ch-cwv-rum-vs-name {
    margin: .2rem 0 .25rem;
    font-size: 1.08rem;
    font-weight: 780;
    letter-spacing: -.018em;
    line-height: 1.25;
    color: var(--ch-text-main);
}

.ch-cwv-rum-vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.ch-cwv-rum-vs-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ch-text-main);
}

.ch-cwv-rum-vs-list strong { font-weight: 700; }

.ch-cwv-rum-vs-tick {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: .12em;
    color: var(--ch-text-muted);
}

.ch-cwv-rum-vs-col.is-monitor .ch-cwv-rum-vs-tick { color: var(--ch-cwv-accent); }

/* ==========================================================================
   2.6. THE "OR" SEAM BETWEEN STORE SPEED TEST AND STORE SPEED MONITORING
   Two rails, a pulse running along each toward the middle, and a ring that
   pings when they arrive. Same EKG language as the hero stage, turned
   sideways into a divider. Pulse and ping share one 2.4s clock and start
   together, so the ping lands on the arrival every cycle without JavaScript.
   The reduced-motion block at the end of this file freezes all of it.
   ========================================================================== */

.ch-cwv-or {
    display: grid;
    grid-template-columns: auto minmax(24px, 1fr) 72px minmax(24px, 1fr) auto;
    grid-template-areas: "up rl core rr down";
    align-items: center;
    gap: 1rem;
    max-width: 1200px;
    margin: clamp(1.75rem, 4vw, 2.75rem) auto;
    padding: 0 .25rem;
}

.ch-cwv-or-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ch-cwv-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ch-text-muted);
}

.ch-cwv-or-label.is-up   { grid-area: up; }
.ch-cwv-or-label.is-down { grid-area: down; }

.ch-cwv-or-arrow { display: inline-flex; color: var(--ch-cwv-accent); }
.ch-cwv-or-label.is-up .ch-cwv-or-arrow   { transform: rotate(-90deg); }
.ch-cwv-or-label.is-down .ch-cwv-or-arrow { transform: rotate(90deg); }

/* The rail fades in toward the ring, so the eye is pulled to the middle. The
   right rail is the left rail mirrored, which is also what reverses its pulse. */
.ch-cwv-or-rail {
    position: relative;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background-image: linear-gradient(90deg, rgba(16, 185, 129, .08) 0%, rgba(16, 185, 129, .75) 100%);
}

/* A node at the outer end of each rail, like a trace leaving a pad. Sits on
   the rail's own box, so the mirrored right rail gets it on its outer end too. */
.ch-cwv-or-rail::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.ch-cwv-or-rail { overflow: visible; }
.ch-cwv-or-rail i { border-radius: 2px; }

.ch-cwv-or-rail.is-left  { grid-area: rl; }
.ch-cwv-or-rail.is-right { grid-area: rr; transform: scaleX(-1); }

.ch-cwv-or-rail i {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background-image: linear-gradient(90deg, transparent 0%, #10B981 70%, #6EE7B7 100%);
    box-shadow: 0 0 10px 1px rgba(16, 185, 129, .55);
    transform: translateX(0);
    opacity: 0;
    animation: chCwvOrRun 2.4s var(--ch-cwv-ease) infinite;
}

/* 0% to 150% of its own 40% width keeps the pulse inside the rail from the
   outer node to the ring, because the rail no longer clips (the node needs
   to overhang it). */
@keyframes chCwvOrRun {
    0%        { transform: translateX(0);    opacity: 0; }
    10%       { opacity: 1; }
    55%       { transform: translateX(150%); opacity: 1; }
    60%, 100% { transform: translateX(150%); opacity: 0; }
}

.ch-cwv-or-core {
    grid-area: core;
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--ch-cwv-accent-line);
    background-image: radial-gradient(circle at 50% 35%, #FFFFFF 0%, #ECFDF5 100%);
    background-color: #FFFFFF;
    box-shadow: var(--ch-cwv-shadow);
    animation: chCwvOrPing 2.4s var(--ch-cwv-ease) infinite;
}

@keyframes chCwvOrPing {
    0%, 52% { box-shadow: var(--ch-cwv-shadow), 0 0 0 0 rgba(16, 185, 129, .45); }
    100%    { box-shadow: var(--ch-cwv-shadow), 0 0 0 16px rgba(16, 185, 129, 0); }
}

/* A conic sweep masked down to a 2px ring, turning slower than the pulse
   clock so the two never visibly lock into one loop. */
.ch-cwv-or-ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background-image: conic-gradient(from 0deg, transparent 0 62%, rgba(16, 185, 129, .35) 80%, #34D399 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: chCwvSpin 3.6s linear infinite;
}

.ch-cwv-or-text {
    position: relative;
    font-family: var(--ch-cwv-mono);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding-left: .1em;
    color: #059669;
    text-shadow: 0 0 12px rgba(16, 185, 129, .35);
}

/* Dark: the terminal disc, a glowing Emerald 400 "OR" on Slate 950. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-or-core {
    border-color: var(--ch-cwv-deep-line);
    background-image: radial-gradient(circle at 50% 35%, #1E293B 0%, var(--ch-cwv-deep) 70%);
    background-color: var(--ch-cwv-deep);
}

html[data-theme="dark"] .ch-page-cwv .ch-cwv-or-text {
    color: #34D399;
    text-shadow: 0 0 10px rgba(52, 211, 153, .75), 0 0 22px rgba(16, 185, 129, .45);
}

/* Phone and small tablet: the labels leave the row and sit above and below
   the ring, which is also where the products they point at are. */
@media (max-width: 760px) {
    .ch-cwv-or {
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
        grid-template-areas:
            "up up up"
            "rl core rr"
            "down down down";
        row-gap: .7rem;
        column-gap: .75rem;
        padding: 0;
    }

    .ch-cwv-or-label { justify-self: center; white-space: normal; text-align: center; }
    .ch-cwv-or-core  { width: 60px; height: 60px; }
    .ch-cwv-or-text  { font-size: .9rem; }
}

/* ==========================================================================
   3. WAITING, ALERTS, WALLS
   ========================================================================== */

.ch-cwv-live { max-width: 1000px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem 0; }

.ch-cwv-wait {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    box-shadow: var(--ch-cwv-shadow);
}

.ch-cwv-wait-stage { position: relative; width: 74px; height: 74px; margin: 0 auto 1.4rem; }

.ch-cwv-wait-pulse {
    position: absolute;
    inset: 0;
    border: 2px solid var(--ch-cta);
    border-radius: 50%;
    opacity: 0;
    animation: chCwvRipple 2.1s var(--ch-cwv-ease) infinite;
}
.ch-cwv-wait-pulse.d2 { animation-delay: .7s; }
.ch-cwv-wait-pulse.d3 { animation-delay: 1.4s; }

@keyframes chCwvRipple {
    0%   { transform: scale(.35); opacity: .85; }
    100% { transform: scale(1);   opacity: 0; }
}

.ch-cwv-wait-title { margin: 0 0 .5rem; font-size: 1.32rem; font-weight: 750; letter-spacing: -.018em; }
.ch-cwv-wait-sub   { margin: 0 auto 1.6rem; max-width: 52ch; color: var(--ch-text-muted); font-size: .95rem; line-height: 1.6; }

.ch-cwv-wait-bar {
    max-width: 340px;
    margin: 0 auto;
    height: 4px;
    border-radius: 99px;
    background-color: var(--ch-cwv-well);
    overflow: hidden;
}

.ch-cwv-wait-bar span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 99px;
    background-color: var(--ch-cta);
    animation: chCwvSlide 1.5s var(--ch-cwv-ease) infinite;
}
.ch-cwv-wait-bar.is-running span { animation-duration: .95s; }

@keyframes chCwvSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(365%); }
}

.ch-cwv-alert {
    display: flex;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background-color: var(--ch-cwv-stop-bg);
    border: 1px solid var(--ch-cwv-stop-line);
    border-radius: var(--ch-cwv-radius);
}

.ch-cwv-alert-ico {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    margin-top: .15rem;
    border-radius: 50%;
    background-color: var(--ch-cwv-stop);
    position: relative;
}
.ch-cwv-alert-ico::after {
    content: "!";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-weight: 800;
    font-size: .85rem;
}

.ch-cwv-alert-title { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; color: var(--ch-cwv-stop); }
.ch-cwv-alert-body p { margin: 0; color: var(--ch-text-main); line-height: 1.6; }

/* The quota wall. A light card in light mode: white, a hairline, a soft
   shadow and an amber limit tag carry it. The deep panel it used to be in
   both themes now lives in section 8, dark only (Adrian, 2026-10-04: light
   mode must not need a black box to make a block stand out). */
.ch-cwv-wall {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(2.2rem, 5vw, 3.2rem) 1.5rem;
    background-color: var(--ch-cwv-surface);
    background-image: linear-gradient(180deg, #FFFBEB 0%, rgba(255, 251, 235, 0) 55%);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    box-shadow: var(--ch-cwv-shadow);
    color: var(--ch-text-main);
}

.ch-cwv-wall-tag {
    display: inline-block;
    padding: .28rem .7rem;
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: 99px;
    background-color: #FEF3C7;
    font-family: var(--ch-cwv-mono);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #92400E;
    margin-bottom: .9rem;
}

.ch-cwv-wall-title { margin: 0 0 .6rem; font-size: 1.5rem; font-weight: 750; color: var(--ch-text-main); }
.ch-cwv-wall-sub   { margin: 0 auto 1.6rem; max-width: 54ch; color: #334155; line-height: 1.65; }

.ch-page-cwv .ch-cwv-wall-cta,
.ch-page-cwv .ch-cwv-locked-btn,
.ch-page-cwv .ch-cwv-up-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .92rem 1.8rem;
    border-radius: var(--ch-cwv-radius-sm);
    /* Emerald 700 to 800: white on #047857 is 5.48:1. The old fill started at
       #10B981 (2.54:1) and passed through #059669 (3.77:1) behind the label. */
    background-image: linear-gradient(180deg, #047857 0%, #065F46 100%);
    background-color: #047857;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 780;
    letter-spacing: -.01em;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 10px 26px -8px rgba(16, 185, 129, .6);
    transition: transform .2s var(--ch-cwv-ease), box-shadow .2s var(--ch-cwv-ease), filter .2s;
}

.ch-page-cwv .ch-cwv-wall-cta::after,
.ch-page-cwv .ch-cwv-locked-btn::after,
.ch-page-cwv .ch-cwv-up-cta::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.ch-page-cwv .ch-cwv-wall-cta:hover,
.ch-page-cwv .ch-cwv-locked-btn:hover,
.ch-page-cwv .ch-cwv-up-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 16px 32px -10px rgba(16, 185, 129, .68);
}

.ch-page-cwv .ch-cwv-wall-cta:hover::after,
.ch-page-cwv .ch-cwv-locked-btn:hover::after,
.ch-page-cwv .ch-cwv-up-cta:hover::after { animation: chCwvSheen .7s var(--ch-cwv-ease) 1; }

.ch-page-cwv .ch-cwv-wall-cta:focus-visible,
.ch-page-cwv .ch-cwv-locked-btn:focus-visible,
.ch-page-cwv .ch-cwv-up-cta:focus-visible {
    /* Emerald 700 in light, 300 in dark (--ch-cwv-good): the old #6EE7B7
       ring was 1.6:1 against the light cards these buttons now sit on. */
    outline: 2px solid var(--ch-cwv-good);
    outline-offset: 3px;
}

/* The CTAs that sell Premium are the Premium button (style.css 7.0b tokens):
   the report's Premium panel, and the quota wall when it points at /premium/.
   White on Blue 600-800 is 5.17:1 or better in both themes. */
.ch-page-cwv .ch-cwv-up-cta,
.ch-page-cwv .ch-cwv-wall-cta.is-premium {
    border: 1px solid var(--ch-pro-line);
    background-color: #2563EB;
    background-image: var(--ch-pro-fill);
    box-shadow: var(--ch-pro-glow);
}

.ch-page-cwv .ch-cwv-up-cta:hover,
.ch-page-cwv .ch-cwv-up-cta:focus-visible,
.ch-page-cwv .ch-cwv-up-cta:active,
.ch-page-cwv .ch-cwv-wall-cta.is-premium:hover,
.ch-page-cwv .ch-cwv-wall-cta.is-premium:focus-visible,
.ch-page-cwv .ch-cwv-wall-cta.is-premium:active {
    background-color: #1D4ED8;
    background-image: var(--ch-pro-fill-hi);
    box-shadow: var(--ch-pro-glow-hi);
    color: #FFFFFF;
}

.ch-page-cwv .ch-cwv-up-cta:focus-visible,
.ch-page-cwv .ch-cwv-wall-cta.is-premium:focus-visible {
    outline-color: var(--ch-pro-ring);
}

.ch-cwv-locked-btn-ico { display: inline-flex; transition: transform .2s var(--ch-cwv-ease); }
.ch-page-cwv .ch-cwv-locked-btn:hover .ch-cwv-locked-btn-ico { transform: translateX(4px); }

/* ==========================================================================
   4. REPORT: SUMMARY, VITALS, FIELD DATA
   ========================================================================== */

.ch-cwv-report { animation: chCwvRise .5s var(--ch-cwv-ease) both; }

@keyframes chCwvRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ch-cwv-sum {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    padding: clamp(1.5rem, 4vw, 2.2rem);
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    box-shadow: var(--ch-cwv-shadow);
    margin-bottom: 1.1rem;
}

.ch-cwv-dial { position: relative; flex: 0 0 auto; width: clamp(96px, 22vw, 128px); aspect-ratio: 1; }
.ch-cwv-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.ch-cwv-dial-track { fill: none; stroke: var(--ch-cwv-well); stroke-width: 9; }

.ch-cwv-dial-arc {
    fill: none;
    stroke: var(--ch-text-muted);
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s var(--ch-cwv-ease);
}

.ch-cwv-sum.is-good .ch-cwv-dial-arc              { stroke: var(--ch-cta); }
.ch-cwv-sum.is-needs-improvement .ch-cwv-dial-arc { stroke: #F59E0B; }
.ch-cwv-sum.is-poor .ch-cwv-dial-arc              { stroke: #EF4444; }

.ch-cwv-dial-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(1.7rem, 4.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.ch-cwv-sum-body { min-width: 0; flex: 1 1 auto; }

.ch-cwv-sum-tag {
    display: block;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin-bottom: .4rem;
}

.ch-cwv-sum-title { margin: 0 0 .6rem; font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 700; letter-spacing: -.018em; word-break: break-word; }
.ch-cwv-sum-meta  { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }

.ch-cwv-chip {
    display: inline-block;
    padding: .22rem .6rem;
    border-radius: 99px;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    font-size: .76rem;
    font-weight: 650;
}
.ch-cwv-chip.is-quiet { color: var(--ch-text-muted); font-weight: 550; }

.ch-cwv-sum-line { margin: 0; color: var(--ch-text-muted); line-height: 1.55; }
.ch-cwv-sum-head { margin: .4rem 0 0; font-weight: 650; color: var(--ch-text-main); }

.ch-cwv-notice {
    padding: .9rem 1.1rem;
    margin-bottom: 1.1rem;
    background-color: var(--ch-cwv-warn-bg);
    border: 1px solid var(--ch-cwv-warn-line);
    border-radius: var(--ch-cwv-radius-sm);
}
.ch-cwv-notice p { margin: 0; font-size: .9rem; color: var(--ch-cwv-warn); }

.ch-cwv-block {
    padding: clamp(1.35rem, 3.5vw, 1.9rem);
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    margin-bottom: 1.1rem;
}

.ch-cwv-block-title { margin: 0 0 .35rem; font-size: 1.12rem; font-weight: 720; letter-spacing: -.018em; }
.ch-cwv-block-sub   { margin: 0 0 1.25rem; color: var(--ch-text-muted); font-size: .92rem; line-height: 1.6; max-width: 70ch; }

.ch-cwv-vitals,
.ch-cwv-fieldgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }

.ch-cwv-vital,
.ch-cwv-fieldcard {
    padding: 1.1rem;
    border: 1px solid var(--ch-border);
    border-left-width: 3px;
    border-radius: var(--ch-cwv-radius-sm);
    background-color: var(--ch-cwv-tile);
    min-width: 0;
    transition: border-color .2s var(--ch-cwv-ease), transform .2s var(--ch-cwv-ease);
}

.ch-cwv-vital:hover, .ch-cwv-fieldcard:hover { transform: translateY(-2px); }

.ch-cwv-vital.is-good, .ch-cwv-fieldcard.is-good { border-left-color: var(--ch-cta); }
.ch-cwv-vital.is-needs-improvement, .ch-cwv-fieldcard.is-needs-improvement { border-left-color: #F59E0B; }
.ch-cwv-vital.is-poor, .ch-cwv-fieldcard.is-poor { border-left-color: #EF4444; }
.ch-cwv-vital.is-none, .ch-cwv-fieldcard.is-none { border-left-color: var(--ch-cwv-line-soft); }

.ch-cwv-vital-label,
.ch-cwv-fieldcard-label {
    display: block;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin-bottom: .5rem;
}

.ch-cwv-vital-value,
.ch-cwv-fieldcard-value {
    display: block;
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    margin-bottom: .3rem;
}

.ch-cwv-vital-verdict,
.ch-cwv-fieldcard-verdict { display: inline-block; font-size: .78rem; font-weight: 700; margin-bottom: .5rem; }

.is-good .ch-cwv-vital-verdict, .is-good .ch-cwv-fieldcard-verdict { color: var(--ch-cwv-good); }
.is-needs-improvement .ch-cwv-vital-verdict, .is-needs-improvement .ch-cwv-fieldcard-verdict { color: var(--ch-cwv-warn); }
.is-poor .ch-cwv-vital-verdict, .is-poor .ch-cwv-fieldcard-verdict { color: var(--ch-cwv-stop); }

.ch-cwv-vital-plain { display: block; font-size: .82rem; color: var(--ch-text-muted); line-height: 1.45; margin-bottom: .6rem; }

.ch-page-cwv .ch-cwv-vital-more {
    font-size: .8rem;
    font-weight: 650;
    color: var(--ch-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.ch-page-cwv .ch-cwv-vital-more:hover { border-bottom-color: currentColor; }

.ch-cwv-dist {
    display: flex;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    background-color: var(--ch-cwv-well);
    margin: .6rem 0 .4rem;
}

.ch-cwv-dist-seg { display: block; height: 100%; transition: width .9s var(--ch-cwv-ease); }
.ch-cwv-dist-seg.is-good { background-color: var(--ch-cta); }
.ch-cwv-dist-seg.is-ni   { background-color: #F59E0B; }
.ch-cwv-dist-seg.is-poor { background-color: #EF4444; }

.ch-cwv-dist-legend { display: block; font-size: .76rem; color: var(--ch-text-muted); }

.ch-cwv-caveat {
    margin: 1.1rem 0 0;
    padding: .85rem 1rem;
    background-color: var(--ch-cwv-info-bg);
    border: 1px solid var(--ch-cwv-info-line);
    border-radius: var(--ch-cwv-radius-sm);
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ch-text-main);
}
.ch-cwv-caveat strong { color: var(--ch-cwv-info); }

.ch-cwv-nofield, .ch-cwv-clean { background-color: var(--ch-cwv-tile); }

/* ==========================================================================
   5. LOCKED TEASER, FINDINGS, APPS, PREMIUM PANEL
   ========================================================================== */

/* THE WALL.

   Three parts, and each one answers a different question. The stat tiles say
   how much was found. The shimmer says how much of it is being held back. The
   panel underneath says what the account contains and what it costs, which is
   the part the old flat slate box never said at all.

   The panel is a light card in light mode and a deep panel in dark, like the
   Premium panel: it reads as a different KIND of object through colour, wash
   and shadow, never through a black slab on a light page (Adrian,
   2026-10-04). */

.ch-cwv-locked-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .7rem;
    margin: 1.1rem 0 1.4rem;
}

.ch-cwv-locked-stat {
    padding: .85rem 1rem;
    background-color: var(--ch-cwv-tile);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius-sm);
}

.ch-cwv-locked-stat strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.1;
    color: var(--ch-text-main);
    font-variant-numeric: tabular-nums;
}

.ch-cwv-locked-stat span {
    display: block;
    margin-top: .15rem;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--ch-text-muted);
}

/* Only the two that carry a verdict get a colour. Painting all three made the
   colour decorative, and decorative colour on a number is how a reader learns
   to stop reading the colour. */
.ch-cwv-locked-stat.is-severe { border-left: 3px solid var(--ch-cwv-warn-line); }
.ch-cwv-locked-stat.is-severe strong { color: var(--ch-cwv-warn); }
.ch-cwv-locked-stat.is-cost   { border-left: 3px solid var(--ch-cwv-stop-line); }
.ch-cwv-locked-stat.is-cost   strong { color: var(--ch-cwv-stop); }

/* Ghost rows carry the real count and none of the content, because the content
   is not in the payload to leak. The shape says how much sits behind the wall. */
.ch-cwv-ghosts {
    display: grid;
    gap: .7rem;
    padding: .3rem 0 3rem;
    mask-image: linear-gradient(#000 22%, transparent 94%);
    -webkit-mask-image: linear-gradient(#000 22%, transparent 94%);
}

.ch-cwv-ghost {
    display: grid;
    grid-template-columns: 10px 1fr;
    grid-template-areas: "dot l1" "dot l2";
    gap: .45rem .8rem;
    align-items: center;
}

.ch-cwv-ghost-dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; }
.ch-cwv-ghost-l1  { grid-area: l1; height: 11px; width: 62%; border-radius: 4px; }
.ch-cwv-ghost-l2  { grid-area: l2; height: 8px;  width: 88%; border-radius: 4px; }

.ch-cwv-ghost > span {
    background-image: linear-gradient(90deg, var(--ch-cwv-well) 25%, var(--ch-cwv-tile-hi) 50%, var(--ch-cwv-well) 75%);
    background-color: var(--ch-cwv-well);
    background-size: 200% 100%;
    animation: chCwvShimmer 1.9s linear infinite;
}

.ch-cwv-ghost:nth-child(2) > span { animation-delay: .12s; }
.ch-cwv-ghost:nth-child(3) > span { animation-delay: .24s; }
.ch-cwv-ghost:nth-child(4) > span { animation-delay: .36s; }
.ch-cwv-ghost:nth-child(5) > span { animation-delay: .48s; }
.ch-cwv-ghost:nth-child(6) > span { animation-delay: .60s; }

@keyframes chCwvShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* The sign-up card. In light mode it is a white card with an emerald wash,
   an emerald hairline, a 3px emerald rule along the top and a green-tinted
   shadow: the free tier's colour does the work a black slab used to do. In
   dark it is the deep panel (section 8). The negative top margin pulls it
   over the fading ghost rows, so the shimmer runs into the offer. */
.ch-cwv-locked-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -2rem;
    padding: clamp(1.6rem, 4vw, 2.2rem) clamp(1.4rem, 4vw, 2.4rem);
    background-color: var(--ch-cwv-surface);
    background-image: linear-gradient(180deg, #ECFDF5 0%, rgba(236, 253, 245, 0) 62%);
    border: 1px solid rgba(16, 185, 129, .34);
    border-radius: var(--ch-cwv-radius);
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -30px rgba(4, 120, 87, .5);
}

.ch-cwv-locked-cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #10B981 0%, #047857 100%);
    z-index: -1;
}

/* One emerald bloom behind the heading: a single radial gradient on its own
   layer, no filter, no repaint. */
.ch-cwv-locked-aurora {
    position: absolute;
    top: -55%;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 120%);
    aspect-ratio: 2 / 1;
    background: radial-gradient(closest-side, rgba(16, 185, 129, .16), transparent 72%);
    z-index: -1;
    pointer-events: none;
}

.ch-cwv-locked-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .9rem;
    padding: .28rem .7rem;
    border-radius: 99px;
    border: 1px solid rgba(16, 185, 129, .4);
    background-color: #D1FAE5;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #065F46;
}

.ch-cwv-locked-chip svg { display: block; }

.ch-cwv-locked-cta h4 {
    max-width: 30ch;
    margin: 0 auto .6rem;
    text-wrap: balance;
    font-size: clamp(1.2rem, 2.8vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -.026em;
    line-height: 1.22;
    color: var(--ch-text-main);
}

.ch-cwv-locked-cta p {
    margin: 0 auto 1.3rem;
    max-width: 58ch;
    color: #334155;
    font-size: .95rem;
    line-height: 1.65;
}

.ch-cwv-locked-cta p strong { color: var(--ch-text-main); font-weight: 700; }

/* What the account adds, as three checked lines with their numbers. The lead
   above names what each finding contains; these are the rest. */
.ch-cwv-locked-gains {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .7rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.ch-cwv-locked-gains li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 99px;
    border: 1px solid rgba(16, 185, 129, .3);
    background-color: #FFFFFF;
    font-size: .82rem;
    font-weight: 550;
    line-height: 1.3;
    color: #1E293B;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.ch-cwv-locked-gain-ico { display: inline-flex; color: #059669; flex-shrink: 0; }

/* Doubled class: .ch-cwv-locked-cta p above is (0,1,1) and would otherwise
   hand this line the paragraph's width and bottom margin. */
.ch-cwv-locked-cta .ch-cwv-locked-micro {
    margin: .95rem auto 0;
    font-size: .84rem;
    color: #475569;
}

/* Colour declared on every state: GeneratePress paints its own link hover. */
.ch-page-cwv .ch-cwv-locked-login,
.ch-page-cwv .ch-cwv-locked-login:visited {
    color: #047857;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ch-page-cwv .ch-cwv-locked-login:hover,
.ch-page-cwv .ch-cwv-locked-login:focus-visible,
.ch-page-cwv .ch-cwv-locked-login:active {
    color: #065F46;
    background-color: transparent;
    text-decoration-thickness: 2px;
}

.ch-page-cwv .ch-cwv-locked-login:focus-visible {
    outline: 2px solid var(--ch-cwv-good);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Findings ------------------------------------------------------------ */

.ch-cwv-findings { display: grid; gap: .7rem; }

.ch-cwv-finding {
    border: 1px solid var(--ch-border);
    border-left-width: 3px;
    border-radius: var(--ch-cwv-radius-sm);
    background-color: var(--ch-cwv-surface);
    overflow: hidden;
    transition: border-color .2s var(--ch-cwv-ease), box-shadow .2s var(--ch-cwv-ease);
}

.ch-cwv-finding[open] { box-shadow: var(--ch-cwv-shadow); }

.ch-cwv-finding.is-critical { border-left-color: #EF4444; }
.ch-cwv-finding.is-high     { border-left-color: #F97316; }
.ch-cwv-finding.is-medium   { border-left-color: #F59E0B; }
.ch-cwv-finding.is-low      { border-left-color: var(--ch-cwv-line-hard); }

.ch-cwv-finding-head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "badges chev" "title chev";
    gap: .35rem .8rem;
    align-items: center;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color .2s;
}

.ch-cwv-finding-head::-webkit-details-marker { display: none; }
.ch-cwv-finding-head:hover { background-color: var(--ch-cwv-tile); }

.ch-cwv-finding-badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: .4rem; }

.ch-cwv-sev, .ch-cwv-cost, .ch-cwv-ctx {
    display: inline-block;
    padding: .16rem .5rem;
    border-radius: 5px;
    font-family: var(--ch-cwv-mono);
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.is-critical .ch-cwv-sev { background-color: var(--ch-cwv-stop-bg); border-color: var(--ch-cwv-stop-line); color: var(--ch-cwv-stop); }
.is-high .ch-cwv-sev     { background-color: rgba(249, 115, 22, .10); border-color: rgba(249, 115, 22, .36); color: #C2410C; }
.is-medium .ch-cwv-sev   { background-color: var(--ch-cwv-warn-bg); border-color: var(--ch-cwv-warn-line); color: var(--ch-cwv-warn); }
.is-low .ch-cwv-sev      { background-color: var(--ch-cwv-well); color: var(--ch-text-muted); }

.ch-cwv-cost { background-color: var(--ch-cwv-well); color: var(--ch-text-muted); }
.ch-cwv-ctx  { background-color: var(--ch-cwv-info-bg); border-color: var(--ch-cwv-info-line); color: var(--ch-cwv-info); }

.ch-cwv-finding-title { grid-area: title; font-size: 1rem; font-weight: 680; letter-spacing: -.014em; line-height: 1.4; }

.ch-cwv-finding-chev {
    grid-area: chev;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ch-text-muted);
    border-bottom: 2px solid var(--ch-text-muted);
    transform: rotate(45deg);
    transition: transform .25s var(--ch-cwv-ease);
}

.ch-cwv-finding[open] .ch-cwv-finding-chev { transform: rotate(-135deg); }

.ch-cwv-finding-body { padding: 0 1.1rem 1.2rem; animation: chCwvReveal .3s var(--ch-cwv-ease) both; }

@keyframes chCwvReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ch-cwv-finding-what { margin: 0 0 1rem; color: var(--ch-text-muted); line-height: 1.68; max-width: 72ch; }

.ch-cwv-evidence {
    display: grid;
    gap: 1px;
    background-color: var(--ch-border);
    border: 1px solid var(--ch-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.ch-cwv-evidence-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    background-color: var(--ch-cwv-surface);
}

.ch-cwv-evidence-name { font-weight: 650; font-size: .88rem; word-break: break-word; min-width: 0; }
.ch-cwv-evidence-figs { display: flex; gap: .5rem; flex-shrink: 0; }
.ch-cwv-evidence-fig  { font-family: var(--ch-cwv-mono); font-size: .74rem; color: var(--ch-text-main); }
.ch-cwv-evidence-fig.is-quiet { color: var(--ch-text-muted); }

.ch-cwv-fix {
    padding: 1rem 1.1rem;
    background-color: var(--ch-cwv-accent-bg);
    border: 1px solid var(--ch-cwv-accent-line);
    border-radius: 8px;
}

.ch-cwv-fix-tag {
    display: block;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ch-cwv-accent);
    margin-bottom: .4rem;
}

.ch-cwv-fix p { margin: 0; line-height: 1.68; max-width: 72ch; }

.ch-page-cwv .ch-cwv-finding-guide {
    display: inline-block;
    margin-top: .9rem;
    font-size: .88rem;
    font-weight: 650;
    color: var(--ch-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.ch-page-cwv .ch-cwv-finding-guide:hover { border-bottom-color: currentColor; }

/* --- App inventory -------------------------------------------------------- */

.ch-cwv-apps {
    display: grid;
    gap: 1px;
    background-color: var(--ch-border);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius-sm);
    overflow: hidden;
}

.ch-cwv-app {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    padding: .75rem .95rem;
    background-color: var(--ch-cwv-surface);
    transition: background-color .2s;
}
.ch-cwv-app:hover { background-color: var(--ch-cwv-tile); }
.ch-cwv-app.is-unknown { background-color: var(--ch-cwv-tile); }

.ch-cwv-app-main { min-width: 0; }
.ch-cwv-app-name { display: block; font-size: .92rem; font-weight: 680; word-break: break-word; }
.ch-cwv-app-note { display: block; font-size: .78rem; color: var(--ch-text-muted); }
.ch-cwv-app-figs { display: flex; gap: .85rem; flex-shrink: 0; }
.ch-cwv-app-fig  { font-family: var(--ch-cwv-mono); font-size: .78rem; font-weight: 600; color: var(--ch-text-main); }
.ch-cwv-app-fig.is-quiet { font-weight: 400; color: var(--ch-text-muted); }

/* Truncation notice sitting under a shortened inventory. */
.ch-cwv-apps-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .8rem;
    padding: .7rem .95rem;
    background-color: var(--ch-cwv-well);
    border-radius: var(--ch-cwv-radius-sm);
    font-size: .86rem;
    color: var(--ch-text-muted);
}

/* The link here sells Premium, so it is Premium blue (Blue 800 light, Blue 300
   dark, --ch-cwv-pro), with the colour declared on every state. */
.ch-page-cwv .ch-cwv-apps-more a,
.ch-page-cwv .ch-cwv-apps-more a:visited { color: var(--ch-cwv-pro); font-weight: 650; text-decoration: none; }
.ch-page-cwv .ch-cwv-apps-more a:hover,
.ch-page-cwv .ch-cwv-apps-more a:focus-visible,
.ch-page-cwv .ch-cwv-apps-more a:active { color: var(--ch-cwv-pro); background-color: transparent; text-decoration: underline; text-underline-offset: 3px; }

/* --- Premium panel -------------------------------------------------------- */

/* The free report's last block, and it has to read as a different KIND of
   thing from the findings above it, or it gets scrolled past with them.
   Until 2026-10-04 that was done with a #0F172A slab in both themes; now
   light mode does it with Premium's own colour: a white card, a blue wash
   from the top, a blue hairline, a 3px blue rule and a blue-tinted shadow.
   Every Premium mark on it is blue (CLAUDE.md, PREMIUM IS BLUE); the tag and
   bloom were emerald before. Dark mode keeps the deep panel (section 8). */
.ch-cwv-up {
    position: relative;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 2.4rem);
    background-color: var(--ch-cwv-surface);
    background-image: linear-gradient(180deg, #EFF6FF 0%, rgba(239, 246, 255, 0) 58%);
    border: 1px solid rgba(37, 99, 235, .28);
    border-radius: var(--ch-cwv-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -30px rgba(30, 64, 175, .45);
    margin-bottom: 1.1rem;
    isolation: isolate;
}

.ch-cwv-up::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -15%;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(37, 99, 235, .14), transparent 70%);
    z-index: -1;
    animation: chCwvDrift 18s var(--ch-cwv-ease) infinite alternate;
}

.ch-cwv-up::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #2563EB 0%, #1E40AF 100%);
    z-index: -1;
}

.ch-cwv-up-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .7rem;
    border: 1px solid rgba(37, 99, 235, .35);
    border-radius: 99px;
    background-color: #DBEAFE;
    font-family: var(--ch-cwv-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #1E40AF;
    margin-bottom: .9rem;
}

.ch-cwv-up-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    animation: chCwvPingPro 2.4s var(--ch-cwv-ease) infinite;
}

@keyframes chCwvPingPro {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
    70%  { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.ch-cwv-up-title { margin: 0 0 .55rem; max-width: 34ch; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800; letter-spacing: -.024em; line-height: 1.22; text-wrap: balance; color: var(--ch-text-main); }
.ch-cwv-up-sub   { margin: 0 0 1.5rem; max-width: 62ch; color: #334155; line-height: 1.65; }
.ch-cwv-up-sub strong { color: var(--ch-text-main); font-weight: 700; }

.ch-cwv-up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }

.ch-cwv-up-card {
    padding: 1rem 1.1rem;
    background-color: #FFFFFF;
    border: 1px solid #DBEAFE;
    border-radius: var(--ch-cwv-radius-sm);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .2s var(--ch-cwv-ease), transform .2s var(--ch-cwv-ease), box-shadow .2s var(--ch-cwv-ease);
}

.ch-cwv-up-card:hover { border-color: rgba(37, 99, 235, .45); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(30, 64, 175, .4); }

.ch-cwv-up-card-k {
    display: block;
    font-family: var(--ch-cwv-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: .45rem;
}

.ch-cwv-up-card-v { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: #1E40AF; margin-bottom: .3rem; }
.ch-cwv-up-card-d { display: block; font-size: .86rem; line-height: 1.55; color: #475569; }

/* "Also in CartHacker Premium" (style.css 7.0c) takes its own light palette
   here; the dark one is in section 8. */
.ch-cwv-up .ch-pro-also { margin: 0 0 1.25rem; }

.ch-cwv-up-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ch-cwv-up-note { font-size: .84rem; color: #475569; margin: 0; }

/* A text link in the "No real visitor data" block, pointing at the Store
   Speed Monitoring section by name. Colour on every state (GeneratePress). */
.ch-page-cwv .ch-cwv-nofield-link,
.ch-page-cwv .ch-cwv-nofield-link:visited {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ch-cwv-good);
    text-decoration: none;
}

.ch-page-cwv .ch-cwv-nofield-link:hover,
.ch-page-cwv .ch-cwv-nofield-link:focus-visible,
.ch-page-cwv .ch-cwv-nofield-link:active {
    color: var(--ch-cwv-good);
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ch-page-cwv .ch-cwv-nofield-link:focus-visible {
    outline: 2px solid var(--ch-cwv-good);
    outline-offset: 3px;
    border-radius: 3px;
}

.ch-page-cwv .ch-cwv-nofield-link .ch-cwv-ico { display: inline-flex; transition: transform .2s var(--ch-cwv-ease); }
.ch-page-cwv .ch-cwv-nofield-link:hover .ch-cwv-ico { transform: translateX(3px); }

/* ==========================================================================
   6. STATIC SECTIONS
   ========================================================================== */

.ch-cwv-body { max-width: 1000px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 1rem; }

.ch-cwv-section { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.ch-cwv-eyebrow {
    display: block;
    font-family: var(--ch-cwv-mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ch-cwv-accent);
    margin-bottom: .55rem;
}

.ch-cwv-section > h2 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 780; letter-spacing: -.028em; line-height: 1.2; }
.ch-cwv-lead { margin: 0 0 2rem; max-width: 72ch; font-size: 1.02rem; line-height: 1.7; color: var(--ch-text-muted); }
.ch-cwv-lead strong { color: var(--ch-text-main); font-weight: 650; }

/* --- Steps ---------------------------------------------------------------- */

.ch-cwv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.ch-cwv-step {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.15rem 1.25rem;
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius-sm);
    transition: border-color .25s var(--ch-cwv-ease), transform .25s var(--ch-cwv-ease), box-shadow .25s var(--ch-cwv-ease);
}

.ch-cwv-step:hover { border-color: var(--ch-cwv-accent-line); transform: translateX(4px); box-shadow: var(--ch-cwv-shadow); }

.ch-cwv-step-n {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--ch-cwv-radius-sm);
    background-color: var(--ch-cwv-accent-bg);
    border: 1px solid var(--ch-cwv-accent-line);
    color: var(--ch-cwv-accent);
    font-family: var(--ch-cwv-mono);
    font-size: .95rem;
    font-weight: 700;
}

.ch-cwv-step-body h3 { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 700; }
.ch-cwv-step-body p  { margin: 0; color: var(--ch-text-muted); line-height: 1.65; }
.ch-cwv-step-body strong { color: var(--ch-text-main); }

/* --- Metric explainers ----------------------------------------------------
   This section is five long reads stacked on each other, and the first version
   printed them as five identical blocks of grey body text. Nobody reads a wall.
   Four things break it up now and none of them removes a word:

     the rail        a rank number and a spine, so the eye has an anchor and
                     the order of the cards is visibly deliberate
     the impact chip three levels, one vocabulary, so a reader who only has
                     time for one card knows which one
     the sub-labels  What it measures / What it costs you, so the two
                     paragraphs stop looking like one paragraph
     the target pill the number to beat, pulled out of the prose entirely

   The caveat callout at the end of a card was amber. Amber on this page means
   "borderline result", and a permanent amber panel that is not a result taught
   the eye to ignore the colour. It is the info grammar now, the same one the
   report uses for exactly this sentence. */

.ch-cwv-metrics { display: grid; gap: 1.1rem; }

.ch-cwv-metric {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    padding: clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.25rem, 3.5vw, 1.9rem) clamp(1.25rem, 3.5vw, 1.8rem) 0;
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    scroll-margin-top: 110px;
    overflow: hidden;
    transition: box-shadow .25s var(--ch-cwv-ease), border-color .25s var(--ch-cwv-ease);
}

.ch-cwv-metric:hover {
    box-shadow: var(--ch-cwv-shadow);
    border-color: var(--ch-cwv-line-soft);
}

/* The left edge carries the classification instead of a top border, which read
   as a stray hairline once five cards were stacked. */
.ch-cwv-metric.is-vital { box-shadow: inset 3px 0 0 0 var(--ch-cta); }
.ch-cwv-metric.is-diag  { box-shadow: inset 3px 0 0 0 var(--ch-cwv-line-hard); }
.ch-cwv-metric.is-vital:hover { box-shadow: inset 3px 0 0 0 var(--ch-cta), var(--ch-cwv-shadow); }
.ch-cwv-metric.is-diag:hover  { box-shadow: inset 3px 0 0 0 var(--ch-cwv-line-hard), var(--ch-cwv-shadow); }

.ch-cwv-metric-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding-top: clamp(1.25rem, 3.5vw, 1.75rem);
}

.ch-cwv-metric-rank {
    font-family: var(--ch-cwv-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ch-cwv-line-hard);
}

.ch-cwv-metric.is-vital .ch-cwv-metric-rank { color: var(--ch-cwv-accent); }

.ch-cwv-metric-spine {
    flex: 1 1 auto;
    width: 1px;
    min-height: 2rem;
    background-image: linear-gradient(180deg, var(--ch-border), transparent);
}

.ch-cwv-metric-main { min-width: 0; }

.ch-cwv-metric-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .6rem;
    margin-bottom: .7rem;
}

.ch-cwv-metric-tag {
    font-family: var(--ch-cwv-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-cwv-metric-badge {
    padding: .18rem .5rem;
    border-radius: 5px;
    background-color: var(--ch-cwv-accent-bg);
    border: 1px solid var(--ch-cwv-accent-line);
    color: var(--ch-cwv-accent);
    font-family: var(--ch-cwv-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* IMPACT, IN THREE LEVELS AND ONE VOCABULARY.
   A signal-strength glyph plus a word, because the glyph is read at a glance
   and the word is what survives being described to somebody else. It is not a
   verdict colour: nothing here says the reader's store is bad, only which card
   is worth their afternoon. */
.ch-cwv-metric-impact {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .18rem .55rem .18rem .45rem;
    border-radius: 99px;
    border: 1px solid var(--ch-border);
    background-color: var(--ch-cwv-tile);
    font-family: var(--ch-cwv-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    white-space: nowrap;
}

.ch-cwv-metric-impact-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; }

.ch-cwv-metric-impact-bars i {
    display: block;
    width: 2.5px;
    border-radius: 1px;
    background-color: currentColor;
    opacity: .28;
}

.ch-cwv-metric-impact-bars i:nth-child(1) { height: 4px; }
.ch-cwv-metric-impact-bars i:nth-child(2) { height: 6.5px; }
.ch-cwv-metric-impact-bars i:nth-child(3) { height: 9px; }

.ch-cwv-metric-impact.is-l1 {
    color: var(--ch-cwv-accent);
    border-color: var(--ch-cwv-accent-line);
    background-color: var(--ch-cwv-accent-bg-hi);
}
.ch-cwv-metric-impact.is-l1 .ch-cwv-metric-impact-bars i { opacity: 1; }

.ch-cwv-metric-impact.is-l2 {
    color: var(--ch-cwv-accent);
    border-color: var(--ch-cwv-accent-line);
    background-color: var(--ch-cwv-accent-bg);
}
.ch-cwv-metric-impact.is-l2 .ch-cwv-metric-impact-bars i:nth-child(1),
.ch-cwv-metric-impact.is-l2 .ch-cwv-metric-impact-bars i:nth-child(2) { opacity: 1; }

.ch-cwv-metric-impact.is-l3 .ch-cwv-metric-impact-bars i:nth-child(1) { opacity: 1; }

.ch-cwv-metric-title {
    margin: 0 0 .25rem;
    font-size: clamp(1.15rem, 2.6vw, 1.38rem);
    font-weight: 750;
    letter-spacing: -.024em;
    line-height: 1.25;
    color: var(--ch-text-main);
}

.ch-cwv-metric-formal {
    margin: 0 0 1rem;
    font-family: var(--ch-cwv-mono);
    font-size: .78rem;
    letter-spacing: .01em;
    color: var(--ch-text-muted);
}

/* The number to beat, lifted out of the prose. Emerald wash rather than the
   old grey well, because this is the one line in the card a reader screenshots
   and sends to their developer. */
.ch-cwv-metric-target {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    margin: 0 0 1.2rem;
    padding: .5rem .85rem;
    background-color: var(--ch-cwv-accent-bg);
    border: 1px solid var(--ch-cwv-accent-line);
    border-radius: 99px;
}

.ch-cwv-metric-target dt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ch-cwv-accent);
}

.ch-cwv-metric-target-ico { display: inline-flex; }

.ch-cwv-metric-target dd {
    margin: 0;
    font-weight: 750;
    font-size: .95rem;
    letter-spacing: -.015em;
    color: var(--ch-text-main);
}

/* The two paragraphs, each under its own label. Same words as before, and now
   a reader looking only for the business consequence can find it without
   reading the mechanism first. */
.ch-cwv-metric-block { margin-bottom: 1.1rem; }

.ch-cwv-metric-blabel {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-cwv-metric-copy p { margin: 0; line-height: 1.72; color: var(--ch-text-muted); max-width: 72ch; }
.ch-cwv-metric-copy strong { color: var(--ch-text-main); font-weight: 660; }

.ch-cwv-metric-blame {
    display: block;
    padding: .8rem 1rem;
    background-color: var(--ch-cwv-well);
    border-radius: var(--ch-cwv-radius-sm);
    font-size: .92rem;
}

.ch-cwv-metric-blame span {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

/* THE CAVEAT CALLOUT.
   Three things were wrong with the amber box this replaces. The colour meant
   "borderline result" everywhere else on the page. The contrast on the brown
   text over the wash was marginal in light and worse in dark. And the whole
   thing was a flex container with raw kses output dropped into it, so the
   leading <strong> became its own flex item and the callout rendered as a
   narrow bold column beside a wide grey one. The template wraps the body now,
   which is what fixes the layout; the info grammar fixes the rest. */
.ch-cwv-metric-note {
    display: flex;
    gap: .8rem;
    margin-top: 1.2rem;
    padding: .95rem 1.1rem;
    background-color: var(--ch-cwv-info-bg);
    border: 1px solid var(--ch-cwv-info-line);
    border-left: 3px solid var(--ch-cwv-info);
    border-radius: var(--ch-cwv-radius-sm);
}

.ch-cwv-metric-note-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background-color: var(--ch-cwv-info-bg);
    border: 1px solid var(--ch-cwv-info-line);
    color: var(--ch-cwv-info);
}

.ch-cwv-metric-note-body { min-width: 0; }

.ch-cwv-metric-note-k {
    display: block;
    margin-bottom: .3rem;
    font-family: var(--ch-cwv-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ch-cwv-info);
}

.ch-cwv-metric-note p {
    margin: 0;
    font-size: .89rem;
    line-height: 1.65;
    color: var(--ch-text-muted);
}

.ch-cwv-metric-note strong { color: var(--ch-text-main); font-weight: 660; }

/* --- Limits --------------------------------------------------------------- */

.ch-cwv-limits { display: grid; gap: .85rem; }

.ch-cwv-limit {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-left: 3px solid var(--ch-cwv-warn-line);
    border-radius: var(--ch-cwv-radius-sm);
}

.ch-cwv-limit-ico { color: var(--ch-cwv-warn); display: inline-flex; margin-top: .15rem; }
.ch-cwv-limit h3 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; }
.ch-cwv-limit p  { margin: 0; color: var(--ch-text-muted); line-height: 1.65; }
.ch-cwv-limit strong { color: var(--ch-text-main); }

/* --- Plans ---------------------------------------------------------------- */

.ch-cwv-plangrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }

.ch-cwv-plan {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    background-color: var(--ch-cwv-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius);
    transition: transform .25s var(--ch-cwv-ease), box-shadow .25s var(--ch-cwv-ease);
}

.ch-cwv-plan:hover { transform: translateY(-3px); box-shadow: var(--ch-cwv-shadow-lift); }

.ch-cwv-plan.is-featured { border-color: var(--ch-cwv-accent-line); box-shadow: 0 0 0 3px var(--ch-cwv-accent-bg); }

.ch-cwv-plan-tag { font-family: var(--ch-cwv-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ch-text-muted); }
.ch-cwv-plan.is-featured .ch-cwv-plan-tag { color: var(--ch-cwv-accent); }

.ch-cwv-plan-line { margin: .45rem 0 1rem; font-size: 1.05rem; font-weight: 720; letter-spacing: -.018em; }

.ch-cwv-plan ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; flex: 1 1 auto; }

.ch-cwv-plan li { position: relative; padding-left: 1.4rem; font-size: .9rem; line-height: 1.55; color: var(--ch-text-muted); }
.ch-cwv-plan li strong { color: var(--ch-text-main); }

.ch-cwv-plan li::before {
    content: "";
    position: absolute;
    left: 0; top: .4em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--ch-cta);
    border-bottom: 2px solid var(--ch-cta);
    transform: rotate(-45deg);
}

.ch-cwv-plan li.is-off { color: var(--ch-cwv-line-hard); text-decoration: line-through; }
.ch-cwv-plan li.is-off::before {
    border: 0;
    top: .55em;
    width: 9px; height: 2px;
    background-color: var(--ch-cwv-line-hard);
    transform: none;
}

/* THE TWO PLAN BUTTONS ARE DIFFERENT OBJECTS, NOT ONE BUTTON WITH THE PAINT
   TURNED DOWN.

   The Premium card uses a "quiet" variant: transparent fill, a grey hairline,
   its own palette in both themes (below). It has no Emerald fill behind it,
   so it cannot share a single ink color with the filled variant here - a
   rule broad enough to cover both would eventually land the wrong color on
   one of them. Keep them declared separately. */

.ch-page-cwv .ch-cwv-plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .78rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    /* Emerald 700 to 800, same fill and same reason as .ch-cwv-go: white on
       #047857 is 5.48:1, on the old #10B981 start it was 2.54:1. */
    background-image: linear-gradient(180deg, #047857 0%, #065F46 100%);
    background-color: #047857;
    color: #FFFFFF;
    font-weight: 750;
    font-size: .92rem;
    letter-spacing: -.005em;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 18px -8px rgba(16, 185, 129, .55);
    transition: transform .2s var(--ch-cwv-ease), box-shadow .2s var(--ch-cwv-ease), background-color .2s, border-color .2s, color .2s;
}

.ch-page-cwv .ch-cwv-plan-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 24px -10px rgba(16, 185, 129, .6);
}

.ch-page-cwv .ch-cwv-plan-cta:focus-visible {
    outline: 2px solid var(--ch-cwv-accent);
    outline-offset: 3px;
}

/* Premium. The header's Pro blue rather than Emerald, because Emerald is the
   free action on this page and two identical green buttons make the tier
   split invisible. The first version was slate, which on a light card read
   as a dark hole rather than as the Premium offer. Same gradient build as the
   Emerald button, so the two read as one family in two tiers. */
.ch-page-cwv .ch-cwv-plan-cta.is-quiet {
    background-image: var(--ch-cwv-pro-fill);
    background-color: #1D4ED8;
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 20px -10px rgba(30, 64, 175, .65);
}

.ch-page-cwv .ch-cwv-plan-cta.is-quiet:hover {
    color: #FFFFFF;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 24px -10px rgba(37, 99, 235, .7);
}

.ch-cwv-plan-cta-ico {
    display: inline-flex;
    color: #FCD34D;
    transition: transform .25s var(--ch-cwv-ease);
}

.ch-page-cwv .ch-cwv-plan-cta.is-quiet:hover .ch-cwv-plan-cta-ico { transform: rotate(72deg) scale(1.08); }

/* The Premium card itself gets a top hairline in the same gold, so the tier is
   readable before anybody reaches the button. */
.ch-cwv-plan.is-premium { border-color: var(--ch-cwv-line-soft); }
.ch-cwv-plan.is-premium .ch-cwv-plan-tag { color: var(--ch-text-main); }

/* --- FAQ ------------------------------------------------------------------ */

.ch-cwv-faq { display: grid; gap: .6rem; }

.ch-cwv-faq-item {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-cwv-radius-sm);
    background-color: var(--ch-cwv-surface);
    overflow: hidden;
    transition: border-color .2s var(--ch-cwv-ease);
}

.ch-cwv-faq-item[open] { border-color: var(--ch-cwv-line-soft); }

.ch-cwv-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    font-weight: 660;
    font-size: 1rem;
    line-height: 1.45;
    list-style: none;
    user-select: none;
    transition: background-color .2s;
}

.ch-cwv-faq-item summary::-webkit-details-marker { display: none; }
.ch-cwv-faq-item summary:hover { background-color: var(--ch-cwv-tile); }

.ch-cwv-faq-chev {
    flex-shrink: 0;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ch-text-muted);
    border-bottom: 2px solid var(--ch-text-muted);
    transform: rotate(45deg);
    transition: transform .25s var(--ch-cwv-ease);
}

.ch-cwv-faq-item[open] .ch-cwv-faq-chev { transform: rotate(-135deg); }

.ch-cwv-faq-a { padding: 0 1.25rem 1.25rem; animation: chCwvReveal .3s var(--ch-cwv-ease) both; }
.ch-cwv-faq-a p { margin: 0; line-height: 1.72; color: var(--ch-text-muted); max-width: 75ch; }
.ch-cwv-faq-a strong { color: var(--ch-text-main); font-weight: 660; }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    /* The impact chip is pushed right by margin-left:auto on wide cards. Below
       this width the title row wraps and an auto margin leaves the chip alone
       on its own line hard against the right edge, which reads as a stray. */
    .ch-cwv-metric-impact { margin-left: 0; }
}

@media (max-width: 900px) {
    .ch-cwvhero-inner { grid-template-columns: minmax(0, 1fr); }
    .ch-cwvhero-stage { display: none; }
    .ch-cwv-plangrid  { grid-template-columns: minmax(0, 1fr); }
    .ch-cwv-up-grid   { grid-template-columns: minmax(0, 1fr); }
    .ch-cwv-rum-steps { grid-template-columns: minmax(0, 1fr); }
    .ch-cwv-rum-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-cwv-rum-delta { grid-template-columns: minmax(0, 1fr); }

    .ch-cwv-form    { max-width: none; }
    .ch-cwv-readout { max-width: none; }
}

/* The readout drops to two columns before it drops to one. Three cells at
   tablet width squeeze the plan sentence onto four lines, and one column at
   the same width wastes half the row. */
@media (max-width: 860px) {
    .ch-cwv-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-cwv-readout-cell.is-plan { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .ch-cwv-vitals,
    .ch-cwv-fieldgrid { grid-template-columns: minmax(0, 1fr); }

    .ch-cwv-sum { flex-direction: column; align-items: flex-start; }

    /* A flex item defaults to min-width: auto and refuses to shrink below its
       own content. On desktop there is always room; at 390px the field computed
       wider than the screen and pushed the button off the right edge. */
    .ch-cwv-field { flex-wrap: wrap; padding: .75rem; }
    .ch-page-cwv .ch-cwv-input { flex: 1 1 100%; min-width: 0; order: 1; }
    .ch-cwv-field-ico { order: 0; }
    .ch-page-cwv .ch-cwv-go { order: 2; width: 100%; justify-content: center; margin-top: .5rem; }

    .ch-cwv-readout { grid-template-columns: minmax(0, 1fr); }

    /* The rail becomes a top row rather than a left column. Keeping a 3.4rem
       column at 390px costs a tenth of the reading width to hold two digits. */
    .ch-cwv-metric {
        grid-template-columns: minmax(0, 1fr);
        padding: clamp(1.1rem, 5vw, 1.4rem);
    }
    .ch-cwv-metric-rail {
        flex-direction: row;
        align-items: center;
        gap: .7rem;
        padding: 0 0 .6rem;
    }
    .ch-cwv-metric-spine {
        flex: 1 1 auto;
        width: auto;
        height: 1px;
        min-height: 0;
        background-image: linear-gradient(90deg, var(--ch-border), transparent);
    }

    .ch-cwv-metric-note { flex-direction: column; gap: .6rem; }

    .ch-cwv-step { grid-template-columns: minmax(0, 1fr); }
    .ch-cwv-step:hover { transform: none; }
    .ch-cwv-step-n { margin-bottom: .3rem; }

    .ch-cwv-evidence-row,
    .ch-cwv-app { flex-direction: column; align-items: flex-start; }

    /* Three tiles stay on one row: auto-fit at 7.5rem dropped the delay
       tile onto a row of its own at 390px. */
    .ch-cwv-locked-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
    .ch-cwv-locked-stat  { padding: .6rem .65rem; }
    .ch-cwv-locked-stat strong { font-size: 1.3rem; }

    .ch-cwv-locked-gains { flex-direction: column; align-items: stretch; }
    .ch-cwv-locked-gains li { justify-content: flex-start; text-align: left; border-radius: 10px; }

    .ch-page-cwv .ch-cwv-locked-btn,
    .ch-page-cwv .ch-cwv-wall-cta,
    .ch-page-cwv .ch-cwv-up-cta { width: 100%; }

    .ch-cwv-rum-setup { padding: .95rem 1rem 1rem; }
    .ch-cwv-rum-status { flex-wrap: wrap; }
    .ch-cwv-rum-status p { flex-basis: calc(100% - 2rem); }
    .ch-page-cwv .ch-cwv-rum-status .ch-cwv-plan-cta { width: 100%; }
    .ch-cwv-rum-tiles { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .ch-cwv-rum-tile  { padding: .95rem 1rem; }
    .ch-cwv-rum-tier  { padding: 1.15rem 1.1rem; }
    .ch-cwv-rum-vs    { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .ch-cwv-rum-vs-col { padding: 1.05rem 1.1rem 1.15rem; }
}

/* ==========================================================================
   8. TOKENS, DARK
   ========================================================================== */

html[data-theme="dark"] .ch-page-cwv {
    --ch-cwv-surface:  #1E293B;
    --ch-cwv-well:     #0F172A;
    --ch-cwv-tile:     #263349;
    --ch-cwv-tile-hi:  #2F3D55;

    --ch-cwv-line-soft: #475569;
    --ch-cwv-line-hard: #64748B;

    /* Emerald 400 rather than 600: the darker step fails contrast on slate. */
    --ch-cwv-accent:       #34D399;
    --ch-cwv-accent-bg:    rgba(16, 185, 129, 0.14);
    --ch-cwv-accent-bg-hi: rgba(16, 185, 129, 0.22);
    --ch-cwv-accent-line:  rgba(52, 211, 153, 0.42);

    /* Every verdict colour flips to its 300-400 step for the same reason, and
       the washes carry more alpha because a 10% tint of a bright hue over a
       dark card is invisible where the same 10% over white is already a panel. */
    --ch-cwv-good:      #6EE7B7;
    --ch-cwv-good-bg:   rgba(16, 185, 129, 0.16);
    --ch-cwv-good-line: rgba(52, 211, 153, 0.42);

    --ch-cwv-warn:      #FCD34D;
    --ch-cwv-warn-bg:   rgba(245, 158, 11, 0.14);
    --ch-cwv-warn-line: rgba(245, 158, 11, 0.40);

    --ch-cwv-stop:      #FCA5A5;
    --ch-cwv-stop-bg:   rgba(239, 68, 68, 0.13);
    --ch-cwv-stop-line: rgba(239, 68, 68, 0.40);

    --ch-cwv-info:      #93C5FD;
    --ch-cwv-info-bg:   rgba(96, 165, 250, 0.13);
    --ch-cwv-info-line: rgba(96, 165, 250, 0.36);

    /* The deep panel is Slate 950 in dark, the only theme that uses it. The
       page is #0F172A here, so a panel at #0F172A dissolved into the page with
       no boundary at all - caught on a render, invisible when reading the
       file. #020617 is the deep accent step the global ladder already
       defines, and the hairline finishes the edge. */
    --ch-cwv-deep:      #020617;
    --ch-cwv-deep-line: #334155;

    /* Blue 300 for text on slate, the same step the header Premium link uses
       in dark (dark-mode.css). The fill stays a saturated blue: a pastel
       button on a dark card reads as disabled. */
    --ch-cwv-pro:       #93C5FD;
    --ch-cwv-pro-bg:    rgba(59, 130, 246, 0.10);
    --ch-cwv-pro-bg-hi: rgba(59, 130, 246, 0.18);
    --ch-cwv-pro-line:  rgba(96, 165, 250, 0.42);
    /* Same stops as light: white on Blue 500 (#3B82F6) is 3.68:1, on Blue 600
       5.17:1, so the fill starts at 600 in both themes (measured 2026-10-03). */
    --ch-cwv-pro-fill:  linear-gradient(180deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%);

    --ch-cwv-shadow:      0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.7);
    --ch-cwv-shadow-lift: 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}

/* THE DEEP PANELS, DARK ONLY. The quota wall, the guest sign-up card and the
   Premium panel are light cards in light mode (sections 3 and 5) and become
   the Slate 950 panel here, where a deep surface reads as depth rather than
   as a black box dropped on a light page. Every colour the light rules set
   on them is restated, so nothing light leaks through. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-wall,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-cta {
    background-color: var(--ch-cwv-deep);
    border: 1px solid var(--ch-cwv-deep-line);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7);
    color: var(--ch-cwv-deep-ink);
}

html[data-theme="dark"] .ch-page-cwv .ch-cwv-wall {
    background-image: radial-gradient(90% 120% at 50% -20%, rgba(245, 158, 11, .10), transparent 60%);
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-cta { background-image: none; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up { background-image: none; }

/* Quota wall */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-wall-tag {
    border-color: rgba(252, 211, 77, .35);
    background-color: rgba(245, 158, 11, .12);
    color: #FCD34D;
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-wall-title { color: #F8FAFC; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-wall-sub   { color: #CBD5E1; }

/* Guest sign-up card */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-aurora {
    background: radial-gradient(closest-side, rgba(16, 185, 129, .22), transparent 72%);
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-chip {
    border-color: rgba(52, 211, 153, .4);
    background-color: rgba(16, 185, 129, .14);
    color: #6EE7B7;
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-cta h4 { color: #F8FAFC; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-cta p { color: #CBD5E1; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-cta p strong { color: #F1F5F9; }

/* The gain chips sit ON the deep panel, and slate 800 is the hairline that
   holds against #020617. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-gains li {
    border-color: #1E293B;
    background-color: rgba(148, 163, 184, .08);
    color: #E2E8F0;
    box-shadow: none;
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-gain-ico { color: #34D399; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-cta .ch-cwv-locked-micro { color: #94A3B8; }

html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-login,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-login:visited { color: #6EE7B7; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-login:hover,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-login:focus-visible,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-locked-login:active { color: #A7F3D0; }

/* Premium panel: blue marks on the deep surface. Blue 300 text on #020617
   is about 11:1. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up::before {
    background: radial-gradient(closest-side, rgba(59, 130, 246, .22), transparent 70%);
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-tag {
    border-color: rgba(147, 197, 253, .35);
    background-color: rgba(59, 130, 246, .14);
    color: #93C5FD;
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-title { color: #F8FAFC; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-sub { color: #CBD5E1; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-sub strong { color: #F1F5F9; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-card {
    background-color: rgba(148, 163, 184, .08);
    border-color: var(--ch-cwv-deep-line);
    box-shadow: none;
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-card:hover { border-color: rgba(147, 197, 253, .45); }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-card-k { color: #94A3B8; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-card-v { color: #BFDBFE; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-card-d { color: #94A3B8; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up-note { color: #94A3B8; }

/* "Also in CartHacker Premium" on the deep panel. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up .ch-pro-also .ch-pro-also-label { color: #93C5FD; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up .ch-pro-also .ch-pro-also-item {
    border-color: rgba(147, 197, 253, .3);
    background-color: rgba(59, 130, 246, .12);
    color: #BFDBFE;
}
html[data-theme="dark"] .ch-page-cwv .ch-cwv-up .ch-pro-also .ch-pro-also-item svg { color: #93C5FD; }

/* Severity chips that are not driven by a token, because orange has no place in
   the four-notice grammar and exists here only as the step between critical and
   medium. It still has to flip. */
html[data-theme="dark"] .ch-page-cwv .is-high .ch-cwv-sev {
    background-color: rgba(249, 115, 22, .16);
    border-color: rgba(249, 115, 22, .40);
    color: #FDBA74;
}

/* The dial and the distribution bars paint raw hues rather than tokens, because
   they are data marks rather than surfaces. They take the lighter step so they
   hold against a slate card. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-sum.is-needs-improvement .ch-cwv-dial-arc,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-vital.is-needs-improvement,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-fieldcard.is-needs-improvement { border-left-color: #FBBF24; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-sum.is-needs-improvement .ch-cwv-dial-arc { stroke: #FBBF24; }

html[data-theme="dark"] .ch-page-cwv .ch-cwv-sum.is-poor .ch-cwv-dial-arc { stroke: #F87171; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-vital.is-poor,
html[data-theme="dark"] .ch-page-cwv .ch-cwv-fieldcard.is-poor { border-left-color: #F87171; }

html[data-theme="dark"] .ch-page-cwv .ch-cwv-dist-seg.is-ni   { background-color: #FBBF24; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-dist-seg.is-poor { background-color: #F87171; }

html[data-theme="dark"] .ch-page-cwv .ch-cwv-finding.is-critical { border-left-color: #F87171; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-finding.is-high     { border-left-color: #FB923C; }
html[data-theme="dark"] .ch-page-cwv .ch-cwv-finding.is-medium   { border-left-color: #FBBF24; }

/* The alert marker paints white type on a solid stop colour. In dark the stop
   token is a 300 step, so the ink has to flip to slate or it is unreadable -
   the same rule the PDF hero scenes follow for anything painted ON a tint. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-alert-ico::after { color: #0F172A; }

/* The FILLED CTA buttons (.ch-cwv-go, .ch-cwv-plan-cta filled variant,
   .ch-cwv-wall-cta, .ch-cwv-locked-btn, .ch-cwv-up-cta) now carry white text
   on an Emerald 700-800 fill in their base rules (5.48:1 or better, measured
   2026-10-03), which holds in both themes without a per-theme override - one
   fewer place for light and dark to drift apart. The two that sell Premium
   take the Premium button instead (section after the base CTA rules). */

/* Premium in dark. The fill comes from --ch-cwv-pro-fill, which steps up to
   Blue 500-700 in this theme; the hairline keeps its edge on a slate card. */
html[data-theme="dark"] .ch-page-cwv .ch-cwv-plan-cta.is-quiet {
    border-color: rgba(147, 197, 253, .28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 22px -10px rgba(37, 99, 235, .75);
}

/* ==========================================================================
   9. REDUCED MOTION
   ========================================================================== */

/* One rule over the whole page rather than a selector list that would rot the
   first time somebody adds an animation and forgets to come back here. */
@media (prefers-reduced-motion: reduce) {
    .ch-page-cwv *,
    .ch-page-cwv *::before,
    .ch-page-cwv *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}