/* /Components/Pages/AffiliateCheckInbox.razor.rz.scp.css */
/* /affiliates/check-inbox — a single-instruction page.
   Everything here exists to keep one button the most prominent thing on the screen: the card is
   centred and narrow, the supporting text is quieter than the action, and the troubleshooting is
   folded away until asked for. */

.ci-panel[b-7xcd6353dv] { text-align: center; }

/* The envelope, in the brand wash. Decorative — the heading carries the meaning. */
.ci-mark[b-7xcd6353dv] {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--brand-wash);
    color: var(--brand-strong);
}

/* The exact subject line, so it can be searched for by hand when the button cannot be drawn
   (company mailboxes) or when a filter has already moved the message. */
.ci-subject[b-7xcd6353dv] {
    margin: 1.35rem auto 0;
    max-width: 42ch;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.ci-subject strong[b-7xcd6353dv] {
    display: block;
    margin-top: .3rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 650;
    /* A quoted subject reads as a thing to look for, not as a sentence to read. */
    overflow-wrap: anywhere;
}

/* Where you are. Three fixed columns so the steps stay a row at every width instead of
   re-wrapping into a ragged two-and-one. */
.ci-track[b-7xcd6353dv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: 1.6rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--line-soft);
    list-style: none;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--muted);
}
.ci-track li[b-7xcd6353dv] {
    display: grid;
    justify-items: center;
    gap: .4rem;
    text-align: center;
}
.ci-dot[b-7xcd6353dv] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
}
.ci-track .is-done[b-7xcd6353dv] { color: var(--ink-soft); }
.ci-track .is-done .ci-dot[b-7xcd6353dv] { background: var(--brand); }
.ci-track .is-now[b-7xcd6353dv] { color: var(--brand-strong); font-weight: 650; }
.ci-track .is-now .ci-dot[b-7xcd6353dv] {
    background: var(--brand-strong);
    box-shadow: 0 0 0 4px var(--brand-wash);
}

/* Troubleshooting: present, quiet, and never in front of the button. */
.ci-help[b-7xcd6353dv] { margin-top: 1.25rem; text-align: left; }
.ci-help > summary[b-7xcd6353dv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    /* display:flex drops the native marker in every engine, so the affordance is drawn here —
       without it the summary reads as a stray bold line rather than something to open. */
    list-style: none;
}
.ci-help > summary[b-7xcd6353dv]::-webkit-details-marker { display: none; }
.ci-help > summary[b-7xcd6353dv]::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
}
.ci-help[open] > summary[b-7xcd6353dv]::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .ci-help > summary[b-7xcd6353dv]::before { transition: none; } }
.ci-help > summary:hover[b-7xcd6353dv] { color: var(--brand-strong); }
.ci-help-body[b-7xcd6353dv] {
    margin-top: .35rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--wash);
    font-size: var(--text-sm);
    line-height: 1.55;
}
.ci-help-body ul[b-7xcd6353dv] { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.ci-help-body p[b-7xcd6353dv] { margin: .7rem 0 0; color: var(--muted); }

.ci-back[b-7xcd6353dv] { margin: 1rem 0 0; text-align: center; font-size: var(--text-sm); }
.ci-back a[b-7xcd6353dv] { color: var(--muted); }
.ci-back a:hover[b-7xcd6353dv] { color: var(--brand-strong); }
/* /Components/Pages/Affiliates.razor.rz.scp.css */
/* /affiliates — scoped styles.

   Three visual levels, on purpose. DECISION sections (hero, which program, earnings) are light and
   tabular: the reader is choosing. DEMONSTRATION sections (the product proof, the dashboard) get the
   dark instrument canvas: the reader is looking at the thing. REFERENCE sections (specialist parts,
   rules, FAQ) are quiet and collapsed: the reader is checking.

   Progressive enhancement throughout. The channel picker and the earnings modeller are radios +
   :has(); without :has() every panel renders under its own heading. Scroll reveals only exist once
   affiliates.js has added html.js, and their base state is the finished state. No coins, no
   confetti, no fake live-sale toasts: the credibility of this page IS the product's credibility. */

/* ------------------------------------------------------------------ hero */
.af-hero[b-zyuhhqutlw] { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.af-hero-grid[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.af-h1[b-zyuhhqutlw] { margin: .35rem 0 .6rem; font-size: clamp(1.95rem, 4.2vw, 2.9rem); letter-spacing: -.02em; text-wrap: balance; }
.af-h1-money[b-zyuhhqutlw] { color: var(--brand-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-lede[b-zyuhhqutlw] { margin: 0; max-width: 54ch; font-size: 1.05rem; color: var(--ink-soft); }

/* The permanent-attribution claim, given its own weight: it is the one thing on this page a reader
   cannot get from another programme, and it would be lost as a third sentence in the lede. */
.af-lede-2[b-zyuhhqutlw] {
    margin: .85rem 0 0;
    max-width: 54ch;
    padding: .7rem .9rem;
    border-left: 3px solid var(--brand);
    background: var(--brand-wash);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .97rem;
    color: var(--ink);
}

.af-facts[b-zyuhhqutlw] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.af-facts li[b-zyuhhqutlw] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: .84rem;
    color: var(--ink-soft);
}
.af-facts li[b-zyuhhqutlw]::before { content: "✓"; color: var(--brand); font-weight: 700; }

/* The join form styles itself (AffiliateJoinForm.razor.css). Rules written here carried this
   page's scope id and never matched the component's markup. */

/* ------------------------------------------------------------------ payout eligibility */
.af-eligibility[b-zyuhhqutlw] {
    margin: 1rem 0 0;
    max-width: 40rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--wash);
}
.af-eligibility summary[b-zyuhhqutlw] {
    display: grid;
    gap: .1rem;
    padding: .7rem .9rem .7rem 2.2rem;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.af-eligibility summary[b-zyuhhqutlw]::-webkit-details-marker { display: none; }
.af-eligibility summary[b-zyuhhqutlw]::before {
    content: "";
    position: absolute;
    left: .95rem; top: 1.15rem;
    width: .45rem; height: .45rem;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.af-eligibility[open] summary[b-zyuhhqutlw]::before { transform: rotate(45deg); }
.af-eligibility-k[b-zyuhhqutlw] {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.af-eligibility-q[b-zyuhhqutlw] { font-weight: 600; font-size: .95rem; color: var(--ink); }
.af-eligibility-body[b-zyuhhqutlw] { padding: 0 .9rem .9rem; }
.af-eligibility-lede[b-zyuhhqutlw] { margin: 0 0 .75rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.af-eligibility-form[b-zyuhhqutlw] { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.af-eligibility-form .field[b-zyuhhqutlw] { flex: 1 1 14rem; }
.af-eligibility-form select[b-zyuhhqutlw] { width: 100%; min-height: 44px; }
.af-eligibility-form .btn[b-zyuhhqutlw] { min-height: 44px; }
.af-eligibility-result[b-zyuhhqutlw] {
    margin: .7rem 0 0;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink);
}
.af-eligibility-result.is-ok[b-zyuhhqutlw] { border-color: var(--good); background: var(--brand-wash); color: var(--brand-strong); font-weight: 600; }
.af-eligibility-result.is-no[b-zyuhhqutlw] { border-color: var(--bad); background: #fdf2f1; color: var(--bad); font-weight: 600; }
.af-eligibility-result.is-no a[b-zyuhhqutlw] { color: var(--bad); }
.af-eligibility-result.is-unknown[b-zyuhhqutlw] { color: var(--ink-soft); }
.af-eligibility-foot[b-zyuhhqutlw] { margin: .5rem 0 0 !important; }

/* ------------------------------------------------------------------ product proof */
.af-proof[b-zyuhhqutlw] {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 6px);
    background: var(--card);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.af-proof-top[b-zyuhhqutlw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--wash);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.af-proof-badge[b-zyuhhqutlw] { padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.af-proof-body[b-zyuhhqutlw] { padding: clamp(1rem, 2.5vw, 1.4rem); }

.af-dots[b-zyuhhqutlw] { display: flex; flex-wrap: wrap; gap: .38rem; margin-bottom: .9rem; }
.af-dot[b-zyuhhqutlw] { width: .85rem; height: .85rem; border-radius: 50%; }
.af-dot.is-real[b-zyuhhqutlw] { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.af-dot.is-noise[b-zyuhhqutlw] { background: var(--line); }

.af-proof-out[b-zyuhhqutlw] { margin: 0 0 .6rem; font-size: .95rem; }
.af-proof-out b[b-zyuhhqutlw] { font-family: var(--font-display); }
.af-proof-out b.ok[b-zyuhhqutlw] { color: var(--brand-strong); }

.af-proof-silent[b-zyuhhqutlw] {
    margin: 0 0 1rem;
    padding: .55rem .75rem;
    border: 1px solid var(--brand);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    font-size: .84rem;
}
.af-proof-silent span[b-zyuhhqutlw] {
    display: block;
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
}

.af-proof-list[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.af-proof-list li[b-zyuhhqutlw] { position: relative; padding-left: 1.15rem; margin-bottom: .3rem; }
.af-proof-list li[b-zyuhhqutlw]::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

.af-proof-foot[b-zyuhhqutlw] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .7rem .9rem;
    border-top: 1px solid var(--line-soft);
    background: var(--wash);
    font-size: .86rem;
}

/* ------------------------------------------------------------------ local navigation */
.af-nav[b-zyuhhqutlw] {
    border-block: 1px solid var(--line-soft);
    background: rgb(251 253 251 / .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.af-nav-row[b-zyuhhqutlw] {
    display: flex;
    align-items: center;
    gap: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.af-nav-row[b-zyuhhqutlw]::-webkit-scrollbar { display: none; }
.af-nav-row a[b-zyuhhqutlw] {
    flex: none;
    padding: .7rem .7rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.af-nav-row a:hover[b-zyuhhqutlw] { color: var(--ink); }
.af-nav-row a.is-active[b-zyuhhqutlw] { color: var(--brand-strong); border-bottom-color: var(--brand); }
.af-nav-cta[b-zyuhhqutlw] {
    margin-left: auto;
    color: var(--brand-strong) !important;
    border-bottom-color: transparent !important;
}
.af-nav-cta[b-zyuhhqutlw]::after { content: " →"; }
@media (min-width: 56rem) {
    /* Sticky under the site header (which is itself sticky at 50). Phones keep it in flow: the
       header wraps to two rows there and a second sticky bar would eat the viewport. */
    .af-nav[b-zyuhhqutlw] { position: sticky; top: var(--header-h, 58px); z-index: 40; }
}

/* ------------------------------------------------------------------ band furniture */
.af-band[b-zyuhhqutlw] { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.af-band-head[b-zyuhhqutlw] { max-width: 46rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.af-band-h[b-zyuhhqutlw] { margin: .35rem 0 .6rem; font-size: var(--text-2xl); max-width: 26ch; text-wrap: balance; }
.af-band-lede[b-zyuhhqutlw] { margin: 0; max-width: 68ch; color: var(--ink-soft); }
.af-band-link[b-zyuhhqutlw] { margin: 1.25rem 0 0; max-width: 72ch; font-size: .95rem; color: var(--muted); line-height: 1.6; }
.af-split-h[b-zyuhhqutlw] {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ------------------------------------------------------------------ which program */
.af-vs th:nth-child(2)[b-zyuhhqutlw] { color: var(--brand-strong); }
.af-vs-here[b-zyuhhqutlw] {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.af-vs td:nth-child(2)[b-zyuhhqutlw] { background: rgb(13 107 60 / .035); }
.af-pick[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.af-pick-card[b-zyuhhqutlw] {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.af-pick-card.is-here[b-zyuhhqutlw] { border-color: var(--brand); background: var(--brand-wash); }
.af-pick-k[b-zyuhhqutlw] {
    margin: 0 0 .35rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}
.af-pick-card p:not(.af-pick-k)[b-zyuhhqutlw] { margin: 0 0 .85rem; color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------------------------ earnings */
.af-earn-table td.num[b-zyuhhqutlw], .af-dash-table td.num[b-zyuhhqutlw] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The payout ladders: one track per method, the floor as a line, each sale as a marker at its
   running total. Widths are computed server-side from the real commission figures. */
.af-ladders[b-zyuhhqutlw] {
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.af-ladder-row[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) minmax(12rem, .8fr);
    gap: .75rem 1rem;
    align-items: center;
    padding: 1.35rem 0 .6rem;
    border-top: 1px solid var(--line-soft);
}
.af-ladder-row:first-of-type[b-zyuhhqutlw] { border-top: 0; padding-top: .9rem; }
.af-ladder-k[b-zyuhhqutlw] { font-weight: 600; font-size: .95rem; }
.af-ladder-track[b-zyuhhqutlw] {
    position: relative;
    height: 12px;
    margin: .9rem .9rem .9rem 0;
    border-radius: 999px;
    background: var(--line);
}
.af-ladder-line[b-zyuhhqutlw] {
    position: absolute;
    top: -.55rem; bottom: -.55rem;
    width: 2px;
    margin-left: -1px;
    background: var(--good);
}
.af-ladder-sale[b-zyuhhqutlw] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
}
.af-ladder-sale b[b-zyuhhqutlw] {
    display: grid;
    place-items: center;
    width: 1.35rem; height: 1.35rem;
    border-radius: 50%;
    border: 2px solid var(--card);
    background: var(--brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: .68rem;
    line-height: 1;
}
.af-ladder-sale.is-paid b[b-zyuhhqutlw] { background: var(--good); }
.af-ladder-sale i[b-zyuhhqutlw] {
    position: absolute;
    top: 1.45rem;
    font-style: normal;
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.af-ladder-out[b-zyuhhqutlw] { font-size: .86rem; color: var(--ink-soft); }
.af-ladder-legend[b-zyuhhqutlw] { margin: 1.25rem 0 0; font-size: .84rem; color: var(--muted); }
.af-ladder-swatch[b-zyuhhqutlw] { display: inline-block; width: 2px; height: .9rem; vertical-align: -.15rem; background: var(--good); margin-right: .2rem; }

/* The optional modeller, folded. */
.af-model[b-zyuhhqutlw] {
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.af-model > summary[b-zyuhhqutlw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    min-height: 52px;
    padding: .75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.af-model > summary[b-zyuhhqutlw]::-webkit-details-marker { display: none; }
.af-model > summary[b-zyuhhqutlw]::after {
    content: "";
    margin-left: auto;
    width: .45rem; height: .45rem;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.af-model[open] > summary[b-zyuhhqutlw]::after { transform: rotate(45deg); }
.af-model-k[b-zyuhhqutlw] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--wash);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.af-calc[b-zyuhhqutlw] { padding: .25rem 1rem 1rem; }

.af-methods[b-zyuhhqutlw], .af-counts[b-zyuhhqutlw], .af-persona-picker[b-zyuhhqutlw] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}
.af-counts[b-zyuhhqutlw] { gap: .4rem; }
.af-methods legend[b-zyuhhqutlw], .af-counts legend[b-zyuhhqutlw], .af-persona-picker legend[b-zyuhhqutlw] {
    width: 100%;
    margin-bottom: .5rem;
    padding: 0;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.af-methods label[b-zyuhhqutlw], .af-persona-picker label[b-zyuhhqutlw] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 1.1rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.af-methods label:hover[b-zyuhhqutlw], .af-persona-picker label:hover[b-zyuhhqutlw], .af-counts label:hover[b-zyuhhqutlw] { border-color: var(--brand); }
/* The radio is visually hidden but still focusable, so the ring has to land on its label. */
.af-radio:focus-visible + label[b-zyuhhqutlw] { outline: 3px solid var(--focus); outline-offset: 2px; }
.af-radio:checked + label[b-zyuhhqutlw] { border-color: var(--brand); background: var(--brand); color: #fff; }
.af-counts label[b-zyuhhqutlw] {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: .35rem .6rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.af-panel-h[b-zyuhhqutlw] { margin: 0 0 1rem; font-size: 1.05rem; color: var(--brand-strong); }
.af-panel[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: clamp(1.1rem, 3vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--wash);
    margin-bottom: 1rem;
}

/* Progressive enhancement across BOTH axes. Without :has(): every method panel renders under its
   own heading, each showing the default count. With :has(): 3 + 10 rules drive all 30 states. */
.af-out[b-zyuhhqutlw] { display: none; }
.af-out-3[b-zyuhhqutlw] { display: block; }
@supports selector(:has(*)) {
    .af-panel[b-zyuhhqutlw] { display: none; margin-bottom: 0; }
    .af-calc:has(#af-m-link:checked) .af-panel-link[b-zyuhhqutlw],
    .af-calc:has(#af-m-c5:checked) .af-panel-c5[b-zyuhhqutlw],
    .af-calc:has(#af-m-c10:checked) .af-panel-c10[b-zyuhhqutlw] { display: grid; }
    .af-panel-h[b-zyuhhqutlw] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .af-out-3[b-zyuhhqutlw] { display: none; }
    .af-calc:has(#af-n-1:checked) .af-out-1[b-zyuhhqutlw],
    .af-calc:has(#af-n-2:checked) .af-out-2[b-zyuhhqutlw],
    .af-calc:has(#af-n-3:checked) .af-out-3[b-zyuhhqutlw],
    .af-calc:has(#af-n-4:checked) .af-out-4[b-zyuhhqutlw],
    .af-calc:has(#af-n-5:checked) .af-out-5[b-zyuhhqutlw],
    .af-calc:has(#af-n-6:checked) .af-out-6[b-zyuhhqutlw],
    .af-calc:has(#af-n-7:checked) .af-out-7[b-zyuhhqutlw],
    .af-calc:has(#af-n-8:checked) .af-out-8[b-zyuhhqutlw],
    .af-calc:has(#af-n-9:checked) .af-out-9[b-zyuhhqutlw],
    .af-calc:has(#af-n-10:checked) .af-out-10[b-zyuhhqutlw] { display: block; }
}

.af-out-total[b-zyuhhqutlw] { display: grid; gap: .1rem; margin: 0 0 .75rem; }
.af-out-total b[b-zyuhhqutlw] {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    line-height: 1;
    color: var(--brand-strong);
    font-variant-numeric: tabular-nums;
}
.af-out-total span[b-zyuhhqutlw] { color: var(--muted); font-size: .88rem; }
.af-progress[b-zyuhhqutlw] { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: .5rem; }
.af-progress span[b-zyuhhqutlw] { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.af-progress span.is-paid[b-zyuhhqutlw] { background: var(--good); }
.af-out-state[b-zyuhhqutlw] { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
.af-out-state.is-paid[b-zyuhhqutlw] { color: var(--brand-strong); font-weight: 600; }

.af-bar[b-zyuhhqutlw] { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-bottom: .9rem; }
.af-bar-you[b-zyuhhqutlw] { background: var(--brand); }
.af-bar-buyer[b-zyuhhqutlw] { background: var(--signal); }
.af-bar-us[b-zyuhhqutlw] { background: var(--line); }
.af-legend[b-zyuhhqutlw] { margin: 0 0 .75rem; }
.af-legend > div[b-zyuhhqutlw] { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.af-legend dt[b-zyuhhqutlw] { color: var(--muted); display: flex; align-items: center; gap: .45rem; }
.af-legend dd[b-zyuhhqutlw] { margin: 0; font-variant-numeric: tabular-nums; }
.af-legend dt[b-zyuhhqutlw]::before { content: ""; width: .6rem; height: .6rem; border-radius: 2px; background: var(--line); }
.af-legend .is-you dt[b-zyuhhqutlw]::before { background: var(--brand); }
.af-legend .is-buyer dt[b-zyuhhqutlw]::before { background: var(--signal); }
.af-legend .is-you dd[b-zyuhhqutlw] { color: var(--brand-strong); font-weight: 700; }
.af-legend-total[b-zyuhhqutlw] { margin-top: .3rem; padding-top: .5rem !important; border-top: 1px solid var(--line-soft); font-weight: 600; }
.af-legend-total dt[b-zyuhhqutlw]::before { content: none !important; }
.af-split-note[b-zyuhhqutlw] { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* ------------------------------------------------------------------ attribution */
.af-life[b-zyuhhqutlw] { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.af-paths[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.af-path[b-zyuhhqutlw] {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.af-path.is-strong[b-zyuhhqutlw] { border-color: var(--brand); background: var(--brand-wash); }
.af-path-k[b-zyuhhqutlw] {
    margin: 0 0 .75rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.af-path-steps[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; counter-reset: afstep; }
.af-path-steps li[b-zyuhhqutlw] { position: relative; padding: 0 0 .85rem 1.75rem; font-size: .92rem; color: var(--ink-soft); }
.af-path-steps li[b-zyuhhqutlw]::before {
    counter-increment: afstep;
    content: counter(afstep);
    position: absolute;
    left: 0; top: 0;
    display: grid;
    place-items: center;
    width: 1.2rem; height: 1.2rem;
    border-radius: 50%;
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: .68rem;
    font-weight: 700;
}
.af-path.is-strong .af-path-steps li[b-zyuhhqutlw]::before { background: var(--card); }
.af-path-steps li:not(:last-child)[b-zyuhhqutlw]::after {
    content: "";
    position: absolute;
    left: .58rem; top: 1.3rem; bottom: .25rem;
    width: 2px;
    background: var(--line);
}
.af-path-steps li:last-child[b-zyuhhqutlw] { padding-bottom: 0; }

/* After the sale: four states in a row, joined. */
.af-money[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: .5rem;
    margin: 0;
    padding: clamp(.9rem, 2vw, 1.1rem);
    list-style: none;
    counter-reset: afmoney;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.af-money li[b-zyuhhqutlw] { position: relative; padding: .2rem .5rem .2rem 2rem; }
.af-money li[b-zyuhhqutlw]::before {
    counter-increment: afmoney;
    content: counter(afmoney);
    position: absolute;
    left: .35rem; top: .35rem;
    display: grid;
    place-items: center;
    width: 1.25rem; height: 1.25rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
}
.af-money li:last-child[b-zyuhhqutlw]::before { background: var(--good); }
.af-money b[b-zyuhhqutlw] { display: block; font-family: var(--font-display); font-size: .98rem; }
.af-money span[b-zyuhhqutlw] { display: block; font-size: .84rem; color: var(--muted); }

.af-attr-table td:nth-child(4)[b-zyuhhqutlw] { background: rgb(13 107 60 / .045); }
.af-attr-table th:nth-child(4)[b-zyuhhqutlw] { color: var(--brand-strong); }
.af-life + .table-wrap[b-zyuhhqutlw] { margin-top: clamp(1rem, 2.5vw, 1.5rem); }

.af-assets[b-zyuhhqutlw] { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.af-asset-grid[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: clamp(.75rem, 2vw, 1rem);
}
.af-asset[b-zyuhhqutlw] {
    display: grid;
    gap: .3rem;
    padding: clamp(.9rem, 2.2vw, 1.1rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.af-asset:hover[b-zyuhhqutlw] { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--brand); color: var(--ink); }
.af-asset b[b-zyuhhqutlw] { font-family: var(--font-display); font-size: 1rem; color: var(--brand-strong); }
.af-asset span[b-zyuhhqutlw] { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------------ promote */
.af-routes[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.af-route[b-zyuhhqutlw] {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.af-route.is-strong[b-zyuhhqutlw] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.af-route h3[b-zyuhhqutlw] { margin: 0 0 .6rem; font-size: 1.05rem; line-height: 1.35; }
.af-route-k[b-zyuhhqutlw] {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand);
}
.af-route-flow[b-zyuhhqutlw] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .9rem; }
.af-route-flow span[b-zyuhhqutlw] {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--wash);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.af-route-flow span:not(:last-child)[b-zyuhhqutlw]::after { content: " →"; color: var(--muted); font-weight: 400; margin-left: .3rem; }
.af-route.is-strong .af-route-flow span:last-child[b-zyuhhqutlw] { background: var(--brand); color: #fff; }
.af-kit[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; }
.af-kit li[b-zyuhhqutlw] { margin-bottom: .6rem; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.af-kit li:last-child[b-zyuhhqutlw] { margin-bottom: 0; }
.af-kit a[b-zyuhhqutlw] { font-weight: 600; }

/* The real kit. */
.af-personas[b-zyuhhqutlw] { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.af-persona-h[b-zyuhhqutlw] { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--brand-strong); }
.af-persona-panel[b-zyuhhqutlw] {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    margin-bottom: 1rem;
}
@supports selector(:has(*)) {
    .af-persona-panel[b-zyuhhqutlw] { display: none; margin-bottom: 0; }
    .af-personas:has(#af-p-newsletter:checked) .af-persona-newsletter[b-zyuhhqutlw],
    .af-personas:has(#af-p-blog:checked) .af-persona-blog[b-zyuhhqutlw],
    .af-personas:has(#af-p-video:checked) .af-persona-video[b-zyuhhqutlw],
    .af-personas:has(#af-p-consultant:checked) .af-persona-consultant[b-zyuhhqutlw],
    .af-personas:has(#af-p-paid:checked) .af-persona-paid[b-zyuhhqutlw] { display: block; }
    .af-persona-h[b-zyuhhqutlw] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.af-kit-grid[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}
.af-kit-list[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; }
.af-kit-list li[b-zyuhhqutlw] {
    padding: .55rem .7rem;
    border-left: 3px solid var(--line);
    margin-bottom: .4rem;
    font-size: .9rem;
}
.af-kit-list li.is-featured[b-zyuhhqutlw] { border-left-color: var(--brand); background: var(--brand-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.af-kit-list b[b-zyuhhqutlw] { display: block; }
.af-kit-list span[b-zyuhhqutlw] { display: block; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.af-kit-list em[b-zyuhhqutlw] { display: block; margin-top: .15rem; font-size: .78rem; font-style: normal; color: var(--warn); font-weight: 600; }
.af-asset-preview[b-zyuhhqutlw] {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--wash);
    overflow: hidden;
}
.af-asset-preview figcaption[b-zyuhhqutlw] { display: grid; gap: .1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); background: var(--card); }
.af-asset-preview-k[b-zyuhhqutlw] {
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.af-asset-preview figcaption b[b-zyuhhqutlw] { font-size: .98rem; }
.af-asset-preview figcaption span:not(.af-asset-preview-k)[b-zyuhhqutlw] { font-size: .84rem; color: var(--muted); }
.af-asset-body[b-zyuhhqutlw] {
    margin: 0;
    max-height: 22rem;
    overflow: auto;
    padding: .9rem 1rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
    background: var(--wash);
}
.af-asset-body:focus-visible[b-zyuhhqutlw] { outline: 3px solid var(--focus); outline-offset: -3px; }
.af-asset-note[b-zyuhhqutlw] { margin: 0; padding: .6rem .9rem; border-top: 1px solid var(--line-soft); background: var(--card); font-size: .8rem; color: var(--muted); line-height: 1.5; }
.af-asset-note code[b-zyuhhqutlw], .af-dash-text code[b-zyuhhqutlw], .af-faq code[b-zyuhhqutlw] {
    font-family: var(--font-mono);
    font-size: .88em;
    padding: .05em .3em;
    border-radius: 4px;
    background: rgb(13 107 60 / .08);
}

/* ------------------------------------------------------------------ dashboard walk-through (dark) */
.af-dash-band .af-band-lede[b-zyuhhqutlw] { color: var(--dark-soft); }
.af-dash[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    border: 1px solid var(--dark-line);
    border-radius: calc(var(--radius) + 4px);
    background: rgb(255 255 255 / .03);
    overflow: hidden;
}
.af-dash-side[b-zyuhhqutlw] { padding: 1rem .9rem; border-right: 1px solid var(--dark-line); background: rgb(0 0 0 / .18); }
.af-dash-brand[b-zyuhhqutlw] {
    margin: 0 0 .75rem;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--signal);
}
.af-dash-nav[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.af-dash-nav li[b-zyuhhqutlw] { padding: .38rem .55rem; border-radius: 7px; font-size: .84rem; color: var(--dark-soft); }
.af-dash-nav li.is-current[b-zyuhhqutlw] { background: rgb(141 240 166 / .14); color: var(--dark-ink); font-weight: 600; }
.af-dash-main[b-zyuhhqutlw] { min-width: 0; padding: clamp(.9rem, 2vw, 1.25rem); display: grid; gap: clamp(.9rem, 2vw, 1.25rem); }
.af-dash-panel[b-zyuhhqutlw] {
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    background: rgb(255 255 255 / .035);
}
.af-dash-panel-head[b-zyuhhqutlw] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .6rem; }
.af-dash-panel-head h3[b-zyuhhqutlw] { margin: 0; font-size: 1rem; }
.af-dash-panel-head span[b-zyuhhqutlw] { font-size: .78rem; color: var(--dark-soft); }
.af-dash-grid[b-zyuhhqutlw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: clamp(.9rem, 2vw, 1.25rem); }
.af-dash .table-wrap[b-zyuhhqutlw] { background: rgb(0 0 0 / .22); border-color: var(--dark-line); scrollbar-color: var(--dark-line) transparent; }
.af-dash-table[b-zyuhhqutlw] { color: var(--dark-ink); }
.af-dash-table thead th[b-zyuhhqutlw] { background: rgb(255 255 255 / .06); color: var(--dark-soft); border-bottom-color: var(--dark-line); }
.af-dash-table td[b-zyuhhqutlw] { background: transparent; color: var(--dark-ink); border-bottom-color: var(--dark-line); }
.af-dash-table tbody tr[b-zyuhhqutlw] { background: transparent; }
.af-dash-table tbody tr:hover[b-zyuhhqutlw] { background: rgb(255 255 255 / .05); }
/* Stacked on phones like every other table on the site — but the stacked cards paint a light
   card background, which the dark canvas has to override or the light text vanishes. */
@media (max-width: 40rem) {
    .af-dash-table tr[b-zyuhhqutlw], .af-dash-table tbody tr:hover[b-zyuhhqutlw] { background: rgb(255 255 255 / .05); border-color: var(--dark-line); }
    .af-dash-table td[b-zyuhhqutlw]::before { color: var(--dark-soft); }
    .af-dash-table td[b-zyuhhqutlw] { color: var(--dark-ink); }
}
.af-dash-sub[b-zyuhhqutlw] { display: block; font-size: .76rem; color: var(--dark-soft); font-weight: 400; }
.af-dash-note[b-zyuhhqutlw], .af-dash-text[b-zyuhhqutlw] { margin: .6rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--dark-soft); }
.af-dash-code[b-zyuhhqutlw] {
    display: block;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / .3);
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--signal);
    overflow-wrap: anywhere;
}
.af-dash-checks[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; font-size: .86rem; color: var(--dark-ink); }
.af-dash-checks li[b-zyuhhqutlw] { position: relative; padding-left: 1.2rem; }
.af-dash-checks li[b-zyuhhqutlw]::before { content: "✓"; position: absolute; left: 0; color: var(--signal); font-weight: 700; }
.af-dash-checks.is-plain li[b-zyuhhqutlw]::before { content: "·"; }
.af-dash-events[b-zyuhhqutlw] { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.af-dash-events li[b-zyuhhqutlw] { display: grid; grid-template-columns: .6rem auto 1fr; align-items: baseline; gap: .5rem; font-size: .84rem; color: var(--dark-soft); }
.af-dash-events i[b-zyuhhqutlw] { width: .6rem; height: .6rem; border-radius: 50%; align-self: center; }
.af-dash-events i.is-sale[b-zyuhhqutlw] { background: var(--warn-dark); }
.af-dash-events i.is-ok[b-zyuhhqutlw] { background: var(--good-dark); }
.af-dash-events i.is-rev[b-zyuhhqutlw] { background: var(--bad-dark); }
.af-dash-events code[b-zyuhhqutlw] { font-family: var(--font-mono); font-size: .8rem; color: var(--signal); background: rgb(0 0 0 / .3); border-color: var(--dark-line); }
.af-dash-text code[b-zyuhhqutlw] { background: rgb(0 0 0 / .3); border-color: var(--dark-line); color: var(--dark-ink); }
.af-dash-code[b-zyuhhqutlw] { border: 1px solid var(--dark-line); }

.af-rail[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.af-rail article[b-zyuhhqutlw] { padding: .9rem 1rem; border: 1px solid var(--dark-line); border-radius: var(--radius); }
.af-rail small[b-zyuhhqutlw] {
    display: block;
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--signal);
}
.af-rail h3[b-zyuhhqutlw] { margin: .2rem 0 .35rem; font-size: 1rem; }
.af-rail p[b-zyuhhqutlw] { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--dark-soft); }
.af-dash-foot[b-zyuhhqutlw] { margin: 1.5rem 0 0; font-size: .98rem; color: var(--dark-ink); }

/* ------------------------------------------------------------------ advanced + FAQ */
.af-faq[b-zyuhhqutlw] { display: grid; gap: .5rem; }
.af-faq details[b-zyuhhqutlw] { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.af-faq summary[b-zyuhhqutlw] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 52px;
    padding: .75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.af-faq summary[b-zyuhhqutlw]::-webkit-details-marker { display: none; }
.af-faq summary[b-zyuhhqutlw]::before {
    content: "";
    flex: none;
    width: .45rem; height: .45rem;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.af-faq details[open] summary[b-zyuhhqutlw]::before { transform: rotate(45deg); }
.af-faq summary:hover[b-zyuhhqutlw] { color: var(--brand-strong); }
.af-faq p[b-zyuhhqutlw] { margin: 0; padding: 0 1rem 1rem 2rem; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.af-faq p + p[b-zyuhhqutlw] { padding-top: 0; }
.af-faq-h[b-zyuhhqutlw] { margin: clamp(1.5rem, 4vw, 2.25rem) 0 .75rem; font-size: var(--text-lg); }
.af-chain-line[b-zyuhhqutlw] { display: flex; flex-wrap: wrap; gap: .35rem; }
.af-chain-line span[b-zyuhhqutlw] {
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--wash);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.af-chain-line span:not(:last-child)[b-zyuhhqutlw]::after { content: " →"; color: var(--muted); font-weight: 400; margin-left: .3rem; }
.af-chain-line span:last-child[b-zyuhhqutlw] { background: var(--brand-wash); color: var(--brand-strong); }

/* ------------------------------------------------------------------ rules */
.af-rules[b-zyuhhqutlw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: clamp(.75rem, 2vw, 1rem);
}
.af-rule[b-zyuhhqutlw] { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.af-rule small[b-zyuhhqutlw] {
    display: block;
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}
.af-rule b[b-zyuhhqutlw] { display: block; margin: .2rem 0 .3rem; font-family: var(--font-display); font-size: 1rem; line-height: 1.3; }
.af-rule p[b-zyuhhqutlw] { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------------ closing */
.af-final[b-zyuhhqutlw] { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.af-final-h[b-zyuhhqutlw] { margin: .35rem 0 .5rem; font-size: var(--text-2xl); }
.af-final-sub[b-zyuhhqutlw] { margin: 0 auto 1.5rem; max-width: 60ch; font-size: 1.05rem; }
.af-final-form[b-zyuhhqutlw] { max-width: 34rem; margin: 0 auto; text-align: left; }
/* The join form is a LIGHT card inside a dark section, so the section's on-dark link and hint
   colours would land on white. The card paints its own background; its contents use the light
   palette. ::deep is required — the form is a separate component with its own scope id. */
.af-final-form[b-zyuhhqutlw]  .card { color: var(--ink); }
.af-final-form[b-zyuhhqutlw]  .card a { color: var(--brand-strong); }
.af-final-form[b-zyuhhqutlw]  .card a:hover { color: var(--brand); }
.af-final-form[b-zyuhhqutlw]  .card .hint { color: var(--muted); }
.af-final-form[b-zyuhhqutlw]  .card label { color: var(--ink); }
.af-final-note[b-zyuhhqutlw] { margin: 1.25rem 0 0; font-size: .92rem; }

/* ------------------------------------------------------------------ reveals
   Base state is the finished state. Only once affiliates.js has run (html.js) do elements start
   hidden, and only if the reader has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    html.js .af-reveal[b-zyuhhqutlw] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
    html.js .af-reveal.is-visible[b-zyuhhqutlw] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 62rem) {
    .af-hero-grid[b-zyuhhqutlw] { grid-template-columns: minmax(0, 1fr); }
    /* The proof follows the decision on one column, so the form is not pushed below the fold. */
    .af-proof[b-zyuhhqutlw] { order: 2; }
    .af-kit-grid[b-zyuhhqutlw] { grid-template-columns: minmax(0, 1fr); }
    .af-dash[b-zyuhhqutlw] { grid-template-columns: minmax(0, 1fr); }
    .af-dash-side[b-zyuhhqutlw] { border-right: 0; border-bottom: 1px solid var(--dark-line); }
    .af-dash-nav[b-zyuhhqutlw] { display: flex; flex-wrap: wrap; gap: .3rem; }
}
@media (max-width: 40rem) {
    .af-methods label[b-zyuhhqutlw], .af-persona-picker label[b-zyuhhqutlw] { flex: 1 1 100%; justify-content: center; }
    .af-ladder-row[b-zyuhhqutlw] { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .af-ladder-track[b-zyuhhqutlw] { margin-right: 1.25rem; }
    .af-ladder-out[b-zyuhhqutlw] { margin-top: .9rem; }
    .af-eligibility-form .btn[b-zyuhhqutlw] { width: 100%; }
}

/* ------------------------------------------------------------------ print */
@media print {
    .af-nav[b-zyuhhqutlw], .af-dash-side[b-zyuhhqutlw] { display: none; }
    .af-proof[b-zyuhhqutlw], .af-panel[b-zyuhhqutlw], .af-persona-panel[b-zyuhhqutlw], .af-ladders[b-zyuhhqutlw] { box-shadow: none; break-inside: avoid; }
    @supports selector(:has(*)) {
        /* Print every method and every channel: a reader on paper cannot click a radio. */
        .af-panel[b-zyuhhqutlw] { display: grid !important; }
        .af-persona-panel[b-zyuhhqutlw] { display: block !important; }
        .af-panel-h[b-zyuhhqutlw], .af-persona-h[b-zyuhhqutlw] { position: static; width: auto; height: auto; clip-path: none; }
    }
    .af-methods[b-zyuhhqutlw], .af-counts[b-zyuhhqutlw], .af-persona-picker[b-zyuhhqutlw] { display: none; }
    .af-asset-body[b-zyuhhqutlw] { max-height: none; }
}
/* /Components/Pages/AffiliateTerms.razor.rz.scp.css */
/* ── The affiliate contract's own information-design layer ──────────────────────────
   A legal page is still a decision tool. Everything here exists to let someone answer
   "how do I get credited, when do I get paid, how can I lose it" without reading
   thirteen sections in order — while leaving every numbered clause intact and in the
   DOM, because the prose is what controls. */

/* Breadcrumb: the contract is a stop inside the affiliate journey, not a destination. */
.at-crumbs[b-t6rbwutbce] { margin: 0 0 .6rem; }
.at-crumbs ol[b-t6rbwutbce] {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  font-size: .88rem;
  color: var(--muted);
}
.at-crumbs li + li[b-t6rbwutbce]::before { content: "/"; margin-right: .4rem; color: var(--line); }
.at-crumbs [aria-current="page"][b-t6rbwutbce] { color: var(--ink-soft); font-weight: 600; }

/* Version metadata. A contract whose changes bind by continued participation has to say
   which version is doing the binding. */
.at-meta[b-t6rbwutbce] {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin: 0 0 .9rem;
  padding: .6rem .85rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--wash);
  font-size: .9rem;
}
.at-meta > div[b-t6rbwutbce] { display: flex; gap: .4rem; align-items: baseline; }
.at-meta dt[b-t6rbwutbce] { color: var(--muted); margin: 0; }
.at-meta dd[b-t6rbwutbce] { margin: 0; font-weight: 600; }

.at-changed[b-t6rbwutbce] { margin: 0 0 1.4rem; }
.at-changed > summary[b-t6rbwutbce] {
  cursor: pointer;
  font-weight: 600;
  padding: .4rem 0;
}
.at-changed ul[b-t6rbwutbce] { margin: .4rem 0 .6rem; }
.at-changed li[b-t6rbwutbce] { margin-bottom: .4rem; }

/* ── Program at a glance ───────────────────────────────────────────────────────────
   One controlled visual moment. Dark, because it is the instrument panel of the
   document and should read as precision rather than as a marketing card — and because
   a single dark surface is the only way to make it distinct without adding colour
   meaning the contract does not have. */
.at-glance[b-t6rbwutbce] {
  margin: 0 0 1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border-radius: var(--radius);
  background: var(--brand-deep, #06331d);
  color: #eaf5ee;
}
.at-glance h2[b-t6rbwutbce] { margin: 0; font-size: var(--text-lg); color: #fff; }
.at-glance__note[b-t6rbwutbce] {
  margin: .2rem 0 .9rem;
  font-size: .87rem;
  color: #a9c9b6;
}
.at-glance dl[b-t6rbwutbce] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .1rem 1.6rem;
  margin: 0;
}
.at-glance dl > div[b-t6rbwutbce] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgb(255 255 255 / .12);
}
.at-glance dt[b-t6rbwutbce] { margin: 0; color: #a9c9b6; font-size: .9rem; }
.at-glance dd[b-t6rbwutbce] { margin: 0; font-weight: 600; text-align: right; }

/* The two ways an affiliate loses money they expected to keep. A note, never an alert:
   it is information about the contract, not a live problem. */
.at-risk[b-t6rbwutbce] {
  margin: 0 0 1.4rem;
  padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line-soft));
  border-left-width: 4px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 6%, transparent);
}
.at-risk p[b-t6rbwutbce] { margin: 0 0 .35rem; }
.at-risk ul[b-t6rbwutbce] { margin: 0; }
.at-risk li[b-t6rbwutbce] { margin-bottom: .3rem; }
.at-risk li:last-child[b-t6rbwutbce] { margin-bottom: 0; }

/* Print: the glance panel must stay legible in black and white, and the disclosure
   must be open on paper — a printed contract cannot be expanded. */
@media print {
  .at-glance[b-t6rbwutbce] { background: #fff; color: #000; border: 1px solid #000; }
  .at-glance h2[b-t6rbwutbce], .at-glance dd[b-t6rbwutbce] { color: #000; }
  .at-glance__note[b-t6rbwutbce], .at-glance dt[b-t6rbwutbce] { color: #333; }
  .at-glance dl > div[b-t6rbwutbce] { border-bottom: 1px solid #bbb; }
  .at-risk[b-t6rbwutbce] { background: #fff; border-color: #000; }
  .at-changed[open] > summary[b-t6rbwutbce] { list-style: none; }
  .at-changed:not([open]) > *:not(summary)[b-t6rbwutbce] { display: revert; }
  .at-crumbs[b-t6rbwutbce] { display: none; }
}

/* ── Who receives credit ────────────────────────────────────────────────────────────
   A table rather than an interactive widget, deliberately: a contract has to give every
   reader the same answer, print, and work with no scripting. */
.at-resolver[b-t6rbwutbce] { margin: 1.2rem 0; }
.at-resolver h3[b-t6rbwutbce] { margin: 0 0 .2rem; font-size: var(--text-lg); }
.at-resolver .at-why[b-t6rbwutbce] {
  display: block;
  color: var(--muted);
  font-size: .85em;
  margin-top: .15rem;
}
/* Never colour alone — the word Yes/No carries the meaning and the colour reinforces it. */
.at-resolver .at-yes[b-t6rbwutbce] { color: var(--good); }
.at-resolver .at-no[b-t6rbwutbce] { color: var(--bad); }

@media print {
  .at-resolver .at-yes[b-t6rbwutbce], .at-resolver .at-no[b-t6rbwutbce] { color: #000; }
  .at-resolver .table-wrap[b-t6rbwutbce] { overflow: visible; }
}

/* ── Shell: document measure, plus a column for the rail ────────────────────────────
   The contract keeps the 46rem measure it always had — a legal document is read, and a
   90-character line is where people start skimming the thing that binds them. The rail
   lives in space that was empty margin, so nothing about the prose changes to make room
   for it. Below the breakpoint there is one column and the rail collapses in flow. */
.at-shell[b-t6rbwutbce] { --at-rail-w: 15.5rem; }
.at-shell-inner[b-t6rbwutbce] {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
}

@media (min-width: 68rem) {
  .at-shell-inner[b-t6rbwutbce] {
    width: min(100% - 3rem, calc(46rem + var(--at-rail-w) + 2.5rem));
    display: grid;
    grid-template-columns: minmax(0, 46rem) var(--at-rail-w);
    column-gap: 2.5rem;
    align-items: start;
  }
  /* Three children, so the rail's row is structural rather than a number that goes
     stale the next time something is inserted above it. The head stays in the document
     column: a summary panel wider than the clauses it summarises gives the contract two
     measures and two left edges, which reads as two documents. */
  .at-head[b-t6rbwutbce] { grid-column: 1; }
  .at-doc[b-t6rbwutbce] { grid-column: 1; }
  .at-rail[b-t6rbwutbce] {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── Contents rail ──────────────────────────────────────────────────────────────────
   One element, two behaviours: a disclosure on a phone, a plain list on a wide screen.
   On wide screens the <summary> is removed from the layout AND the accessibility tree,
   so no control announces an expanded/collapsed state that nothing can change. */
.at-rail[b-t6rbwutbce] {
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--wash);
}
.at-rail > summary[b-t6rbwutbce] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .9rem;
  cursor: pointer;
  font-weight: 650;
  font-size: .95rem;
}
.at-rail-hint[b-t6rbwutbce] { font-weight: 400; font-size: .84rem; color: var(--muted); }
.at-rail-body[b-t6rbwutbce] { padding: 0 .9rem .8rem; }
.at-rail-heading[b-t6rbwutbce] { display: none; }
.at-rail-group[b-t6rbwutbce] {
  margin: .9rem 0 .3rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.at-rail-group:first-of-type[b-t6rbwutbce] { margin-top: .2rem; }
.at-rail-list[b-t6rbwutbce] { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.at-rail-list a[b-t6rbwutbce] {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .1rem;
  padding: .3rem .4rem;
  border-radius: 6px;
  font-size: .88rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink-soft);
}
.at-rail-list a:hover[b-t6rbwutbce] { background: var(--card); color: var(--brand-strong); }
.at-rail-num[b-t6rbwutbce] { color: var(--muted); font-variant-numeric: tabular-nums; }
/* The section being read. Marked with weight, a rule and a background — never colour
   alone, and never only a colour change, so it survives both a monochrome screen and a
   reader who cannot distinguish the brand green from the body ink. */
.at-rail-list a[aria-current="location"][b-t6rbwutbce] {
  background: var(--card);
  color: var(--brand-strong);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--brand);
}

/* On a phone the index is capped and scrolls inside itself, so an open disclosure is a
   glance rather than a screenful of links between the reader and the contract. */
@media (max-width: 67.99rem) {
  .at-rail-body[b-t6rbwutbce] { max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; }
}

@media (min-width: 68rem) {
  .at-rail[b-t6rbwutbce] { margin: 0; background: transparent; border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; }
  .at-rail > summary[b-t6rbwutbce] { display: none; }
  /* Belt and braces for the one case `open` cannot cover: a reader who collapsed the
     rail on a phone and then widened the window, where the summary that would reopen it
     is gone. Supported browsers reveal it anyway; the rest still have `open`. */
  .at-rail > .at-rail-body[b-t6rbwutbce] { display: block; }
  .at-rail[b-t6rbwutbce]::details-content { content-visibility: visible; block-size: auto; }
  .at-rail-body[b-t6rbwutbce] { padding: 0 0 0 1rem; }
  .at-rail-heading[b-t6rbwutbce] {
    display: block;
    margin: 0 0 .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
  }
}

/* ── Clause patterns ────────────────────────────────────────────────────────────────
   Four treatments, and a rule that governs all of them: the label is words. A clause
   that costs an affiliate money says "Material risk" in text, so it survives print,
   monochrome, colour-blindness and a screen reader — the tint and the rule are the
   redundant second and third signals, never the only one.

   Standard clauses carry no marker at all. If everything is marked, nothing is. */
.at-tag[b-t6rbwutbce] {
  display: inline-block;
  margin-right: .45rem;
  padding: .05rem .4rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .08em;
  white-space: nowrap;
}
.at-tag--mechanic[b-t6rbwutbce] { border-color: var(--brand); color: var(--brand-strong); background: var(--wash); }
.at-tag--risk[b-t6rbwutbce] { border-color: #c08a20; color: #7a5200; background: #fdf6e6; }

/* The clause body itself, when it carries a tag. A left rule ties the marker to the
   text it qualifies, so the pattern reads as one clause rather than a badge floating
   above a paragraph. */
.at-clause[b-t6rbwutbce] { padding-left: .8rem; border-left: 3px solid var(--line); }
.at-clause--mechanic[b-t6rbwutbce] { border-left-color: var(--brand); }
.at-clause--risk[b-t6rbwutbce] { border-left-color: #c08a20; }
li.at-clause[b-t6rbwutbce] { margin-left: -.2rem; }

@media print {
  .at-rail[b-t6rbwutbce] { display: none; }
  .at-tag[b-t6rbwutbce] { border-color: #000; color: #000; background: transparent; }
  .at-clause[b-t6rbwutbce] { border-left-color: #000; }
}

/* ── Diagrams ───────────────────────────────────────────────────────────────────────
   Each figure is a pair: an SVG that shows the SHAPE (which branches exist, where a path
   terminates) and a list that carries every fact. Neither summarises the other, so a
   reader who cannot see the diagram loses nothing, and a reader who can gains the one
   thing prose cannot give them — the topology. Below the breakpoint the SVG steps aside
   rather than scrolling sideways: a diagram you pan is a diagram you do not read. */
.at-flow[b-t6rbwutbce], .at-override[b-t6rbwutbce] { margin: 1.5rem 0; padding: 0; }
.at-flow figcaption[b-t6rbwutbce], .at-override figcaption[b-t6rbwutbce] {
  margin: 0 0 .8rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.at-flow-svg[b-t6rbwutbce], .at-override-svg[b-t6rbwutbce] {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  background: var(--wash);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm, 8px);
}
/* Text styling for these diagrams lives in the SvgText helper, not here: scoped CSS cannot
   reach inside a MarkupString. Only the shapes below are real compiled markup. */
.at-flow-box[b-t6rbwutbce] { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.at-flow-box--good[b-t6rbwutbce] { fill: #e8f3ec; stroke: var(--brand); }
.at-flow-box--bad[b-t6rbwutbce] { fill: #fbeae9; stroke: #c0776f; }
.at-flow-box--you[b-t6rbwutbce] { fill: var(--brand-deep, #0a3d24); stroke: var(--brand-strong); }
.at-flow-line[b-t6rbwutbce] { stroke: var(--ink-soft); stroke-width: 1.5; fill: none; }
.at-flow-line--loop[b-t6rbwutbce] { stroke: var(--muted); stroke-dasharray: 4 3; }
.at-flow-line--bad[b-t6rbwutbce] { stroke: #b3574c; }
.at-flow-line--pay[b-t6rbwutbce] { stroke: var(--brand); stroke-width: 2; }
.at-flow-line--stop[b-t6rbwutbce] { stroke: var(--muted); }
.at-flow-stop-x[b-t6rbwutbce] { stroke: #b3261e; stroke-width: 2.5; fill: none; }
.at-flow-arrowhead[b-t6rbwutbce] { fill: var(--ink-soft); }
.at-flow-arrowhead--bad[b-t6rbwutbce] { fill: #b3574c; }
.at-flow-arrowhead--back[b-t6rbwutbce] { fill: var(--muted); }

.at-flow-steps[b-t6rbwutbce] { margin: 0 0 .9rem; padding-left: 1.2rem; display: grid; gap: .45rem; }
.at-flow-exits[b-t6rbwutbce] { margin: 1rem 0 .4rem; }
.at-flow-steps--bad li[b-t6rbwutbce]::marker { color: #b3574c; }
/* The only good news in this figure, so it is set apart from the red exits rather than
   appended to them as a fourth bullet the eye reads as a fourth way to lose money. */
.at-flow-back[b-t6rbwutbce] {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--brand);
  background: var(--wash);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-size: .94rem;
}
.at-override-notes[b-t6rbwutbce] { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }


@media (max-width: 46rem) {
  /* The list is the content, so losing the picture loses nothing. */
  .at-flow-svg[b-t6rbwutbce], .at-override-svg[b-t6rbwutbce] { display: none; }
}

/* ── Promotion, side by side ────────────────────────────────────────────────────────
   Not a table: three musts and six must-nots do not pair into rows. Two columns that
   collapse to two stacks, with the "Do"/"Never" word on every item so the distinction is
   never carried by the tint alone. */
.at-rules[b-t6rbwutbce] {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.at-rules-h[b-t6rbwutbce] {
  margin: 0;
  padding: .6rem .9rem;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.at-rules-grid[b-t6rbwutbce] { display: grid; grid-template-columns: minmax(0, 1fr); }
.at-rules-col[b-t6rbwutbce] { padding: .9rem; }
.at-rules-col h4[b-t6rbwutbce] { margin: 0 0 .5rem; font-size: 1rem; }
.at-rules-col ul[b-t6rbwutbce] { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .94rem; }
.at-rules-col--do[b-t6rbwutbce] { border-bottom: 1px solid var(--line-soft); }
.at-rules-col--do h4[b-t6rbwutbce] { color: var(--brand-strong); }
.at-rules-col--dont[b-t6rbwutbce] { background: #fdf7f6; }
.at-rules-col--dont h4[b-t6rbwutbce] { color: #8a2f26; }
.at-rules-k[b-t6rbwutbce] {
  display: inline-block;
  margin-right: .35rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.at-rules-col--do .at-rules-k[b-t6rbwutbce] { color: var(--brand-strong); }
.at-rules-col--dont .at-rules-k[b-t6rbwutbce] { color: #8a2f26; }
.at-rules-cost[b-t6rbwutbce] {
  margin: 0;
  padding: .8rem .9rem;
  border-top: 1px solid var(--line);
  background: var(--wash);
  font-size: .92rem;
}
@media (min-width: 52rem) {
  .at-rules-grid[b-t6rbwutbce] { grid-template-columns: 1fr 1fr; }
  .at-rules-col--do[b-t6rbwutbce] { border-bottom: 0; border-right: 1px solid var(--line-soft); }
}

@media print {
  .at-flow-svg[b-t6rbwutbce], .at-override-svg[b-t6rbwutbce] { display: none; }
  .at-rules-col--dont[b-t6rbwutbce] { background: transparent; }
}

/* ── Motion ─────────────────────────────────────────────────────────────────────────
   Three cues, each answering a question a static contract cannot: where am I, how much is
   left, and which clause did that link mean. All three degrade to something correct, and
   the reduced-motion rules are not an afterthought — they are where the cue becomes an
   instant state change rather than being removed, because the INFORMATION is not the
   motion.

   The progress bar is the exception: it is the one cue carrying nothing the scrollbar does
   not already carry, so under reduced motion the script removes it entirely. */
.at-progress[b-t6rbwutbce] {
  height: 3px;
  margin: 0 0 .8rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.at-progress > span[b-t6rbwutbce] {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--brand);
  transform: scaleX(var(--at-read, 0));
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .at-progress > span[b-t6rbwutbce] { transition: transform 120ms linear; }
}
/* Without JS there is no --at-read and the bar would sit at zero, reading as "you have made
   no progress" rather than "this is not measured". html.js is added by the script itself. */
html:not(.js) .at-progress[b-t6rbwutbce] { display: none; }

/* Arrival: a linked clause says which one it is for a moment, then stops. The class is added
   by script; whether it moves is decided here. */
/* An edge marker, not a wash. A whole <section> tinted yellow is a slab the eye reads as an
   alert; a rule down the side of it says "this one" and gets out of the way. */
.at-arrived[b-t6rbwutbce] {
  border-left: 3px solid transparent;
  padding-left: .9rem;
  margin-left: -1.2rem;
  animation: at-arrive-b-t6rbwutbce 1.8s ease-out 1;
}
@keyframes at-arrive-b-t6rbwutbce {
  0%, 45% { border-left-color: #c08a20; background: #fffaf0; }
  100% { border-left-color: transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  /* Not "no cue" — the same cue, held still. Someone who asked for less motion still needs
     to know which clause the link meant. */
  .at-arrived[b-t6rbwutbce] { animation: none; border-left-color: #c08a20; }
}

/* The rail's active entry when script is running. Weight, rule and background — the same
   three signals the no-JS aria-current styling uses, so nothing is colour alone. */
.at-rail-list a.is-active[b-t6rbwutbce] {
  background: var(--card);
  color: var(--brand-strong);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--brand);
}
/* /Components/Pages/AuditOpportunity.razor.rz.scp.css */
.lo-hero[b-5h0dau40iv]{padding:clamp(3rem,7vw,6rem) 0;background:radial-gradient(circle at 8% 10%,rgba(30,155,108,.13),transparent 30%),linear-gradient(180deg,var(--paper,#f7faf8),#fff)}
.lo-grid[b-5h0dau40iv]{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(22rem,.95fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.lo-copy h1[b-5h0dau40iv]{font-size:clamp(2.5rem,5vw,4.8rem);line-height:.98;letter-spacing:-.045em;max-width:15ch;margin:.45rem 0 1.25rem}
.lo-lede[b-5h0dau40iv]{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.62;max-width:60ch;color:var(--muted)}
.lo-process[b-5h0dau40iv]{list-style:none;padding:0;margin:2rem 0;display:grid;gap:.75rem;counter-reset:step}
.lo-process li[b-5h0dau40iv]{display:grid;grid-template-columns:2.25rem 1fr;gap:.8rem;padding:1rem 0;border-top:1px solid var(--line);counter-increment:step}
.lo-process li[b-5h0dau40iv]::before{content:counter(step);display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--dark);color:#fff;font-weight:800}
.lo-process b[b-5h0dau40iv],.lo-process span[b-5h0dau40iv]{grid-column:2}.lo-process b[b-5h0dau40iv]{font-size:1.02rem}.lo-process span[b-5h0dau40iv]{color:var(--muted);margin-top:-.45rem}
.lo-proof[b-5h0dau40iv]{margin-top:2rem;padding:1.25rem 1.4rem;border-left:4px solid var(--brand);background:rgba(30,155,108,.07)}
.lo-proof p[b-5h0dau40iv]{margin:.45rem 0 0}
.lo-card[b-5h0dau40iv]{padding:clamp(1.25rem,3vw,2rem);box-shadow:0 26px 70px rgba(12,35,27,.12);position:sticky;top:1rem}
.lo-card h2[b-5h0dau40iv]{font-size:1.7rem;margin:0 0 .25rem}
.lo-form[b-5h0dau40iv]{display:grid;gap:1rem;margin-top:1.25rem}.lo-form .field[b-5h0dau40iv]{margin:0}.lo-form label[b-5h0dau40iv]{font-weight:750}.lo-form input[b-5h0dau40iv],.lo-form select[b-5h0dau40iv]{width:100%}
.lo-two[b-5h0dau40iv]{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.lo-disclosure[b-5h0dau40iv]{font-size:.83rem;line-height:1.5;color:var(--muted);margin:1rem 0 0}
.lo-confirmed[b-5h0dau40iv]{padding-top:clamp(3rem,8vw,6rem);padding-bottom:5rem}.lo-confirmed h1[b-5h0dau40iv]{font-size:clamp(2.3rem,5vw,4rem);line-height:1.02;letter-spacing:-.035em;margin:.45rem 0 1rem}
.lo-summary[b-5h0dau40iv]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:2rem 0}
.lo-summary div[b-5h0dau40iv]{background:#fff;padding:1rem 1.15rem}.lo-summary dt[b-5h0dau40iv]{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:800;color:var(--muted)}.lo-summary dd[b-5h0dau40iv]{margin:.35rem 0 0;font-weight:700;overflow-wrap:anywhere}
.lo-note[b-5h0dau40iv]{padding:1.2rem 1.35rem;background:var(--soft,#eef6f2);border-radius:var(--radius);margin:1.25rem 0}.lo-note h2[b-5h0dau40iv]{font-size:1.15rem;margin:0}.lo-note p[b-5h0dau40iv]{margin:.45rem 0 0}
.lo-actions[b-5h0dau40iv]{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}.lo-privacy[b-5h0dau40iv]{font-size:.85rem;color:var(--muted);margin-top:1.25rem}
.hp-field[b-5h0dau40iv]{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:850px){.lo-grid[b-5h0dau40iv]{grid-template-columns:1fr}.lo-card[b-5h0dau40iv]{position:static}.lo-copy h1[b-5h0dau40iv]{max-width:none}.lo-two[b-5h0dau40iv]{grid-template-columns:1fr}}
@media(max-width:520px){.lo-summary[b-5h0dau40iv]{grid-template-columns:1fr}.lo-actions .btn[b-5h0dau40iv]{width:100%;justify-content:center}}
/* /Components/Pages/BudgetCalculatorPage.razor.rz.scp.css */
/* Performance budget calculator — /tools/performance-budget-calculator.

   The page is a console: inputs on the left, consequences on the right, one bounded frame. Every
   surface below exists to answer a question the previous surface raises — where the target goes,
   what fits in what is left, how you cut it, what the file you download actually says. */

/* ---------------------------------------------------------------- hero */
/* Compact on purpose. The full .hero padding pushed the first input below the fold on a 390 px
   viewport, so the reader met three paragraphs before the control they came for. */
.bc-hero[b-wn88ulh6aj] { padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 3vw, 1.75rem); }
.bc-hero h1[b-wn88ulh6aj] { font-size: var(--text-2xl); max-width: 22ch; margin-block: .35rem .5rem; }
.bc-hero .lede[b-wn88ulh6aj] { max-width: 62ch; font-size: var(--text-base); }

.bc-hero-meta[b-wn88ulh6aj] {
    display: flex; flex-wrap: wrap; gap: .4rem .5rem;
    margin: .9rem 0 0; padding: 0; list-style: none;
    font-size: var(--text-sm); color: var(--muted);
}
.bc-hero-meta span[b-wn88ulh6aj] {
    padding: .18rem .55rem;
    background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px;
}
.bc-hero-meta code[b-wn88ulh6aj] { font-size: .95em; }

/* ---------------------------------------------------------------- console */
.bc-block[b-wn88ulh6aj] { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

.bc-console[b-wn88ulh6aj] { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; }
@media (min-width: 62rem) {
    .bc-console[b-wn88ulh6aj] { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
    /* Inputs stay in view while the reader scrolls the consequences of them. */
    .bc-inputs[b-wn88ulh6aj] { position: sticky; top: calc(var(--header-h, 58px) + 1rem); }
}
.bc-console > *[b-wn88ulh6aj] { min-width: 0; }

.bc-h[b-wn88ulh6aj] { font-size: var(--text-lg); margin: 0 0 .6rem; }
.bc-optional[b-wn88ulh6aj] { font-weight: 400; color: var(--muted); }

.bc-url-row[b-wn88ulh6aj] { display: flex; gap: .5rem; flex-wrap: wrap; }
.bc-url-row input[b-wn88ulh6aj] { flex: 1; min-width: 11rem; }

.bc-advanced[b-wn88ulh6aj] { margin-bottom: 1rem; }
.bc-advanced > summary[b-wn88ulh6aj] { font-weight: 600; cursor: pointer; padding: .4rem 0; }
.bc-advanced > .field:first-of-type[b-wn88ulh6aj] { margin-top: .75rem; }
.bc-recalc[b-wn88ulh6aj] { width: 100%; }

/* A button that reads as a link: used for low-weight, reversible actions (dismiss, reset, switch
   profile) that would out-shout the page as buttons. */
.bc-link[b-wn88ulh6aj] {
    padding: 0; border: 0; background: none;
    font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
    cursor: pointer;
}
.bc-link:hover[b-wn88ulh6aj] { color: var(--brand-strong); }

/* ---------------------------------------------------------------- provenance */
.bc-prov[b-wn88ulh6aj] {
    margin-bottom: 1rem; padding: .75rem .9rem;
    background: var(--wash); border: 1px solid var(--line-soft);
    border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.bc-prov.is-stale[b-wn88ulh6aj] { border-left-color: var(--warn); background: #fdf8ee; }
.bc-prov p[b-wn88ulh6aj] { margin: 0; }
.bc-prov-head[b-wn88ulh6aj] { color: var(--ink); }
.bc-prov-url[b-wn88ulh6aj] { word-break: break-all; }
.bc-prov-meta[b-wn88ulh6aj] { margin-top: .2rem !important; color: var(--muted); }
.bc-prov-src[b-wn88ulh6aj] { white-space: nowrap; }
.bc-prov-gap[b-wn88ulh6aj], .bc-prov-warn[b-wn88ulh6aj] { margin-top: .45rem !important; color: var(--ink-soft); }
.bc-prov-warn[b-wn88ulh6aj] { color: #6b4400; font-weight: 500; }
.bc-prov-actions[b-wn88ulh6aj] { margin-top: .5rem !important; }

/* ---------------------------------------------------------------- readout */
.bc-readout[b-wn88ulh6aj] { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }

/* Grid items default to min-width:auto, and the panels share one column: the widest panel's
   min-content sized the track and every other panel stretched to match it, so a code block in the
   export panel pushed the LCP ledger 130 px past the viewport on a phone. */
.bc-readout > *[b-wn88ulh6aj], .bc-legend li > *[b-wn88ulh6aj], .bc-alloc-row > *[b-wn88ulh6aj] { min-width: 0; }

.bc-panel[b-wn88ulh6aj] {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.bc-panel > :last-child[b-wn88ulh6aj] { margin-bottom: 0; }
.bc-unreachable[b-wn88ulh6aj] { margin: 0 0 .4rem; }

/* ---------------------------------------------------------------- the LCP time ledger */
/* One bar the width of the target. Its point is proportion: a reader who sees that TTFB is already
   two-thirds of their budget stops arguing about image formats. */
.bc-ledger[b-wn88ulh6aj] {
    display: flex; overflow: hidden;
    height: 2.4rem; margin: .25rem 0 .85rem;
    border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--wash);
}
.bc-seg[b-wn88ulh6aj] {
    display: grid; place-items: center; min-width: 0;
    flex-basis: 0; flex-shrink: 1;
    font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff;
    transition: flex-grow .35s cubic-bezier(.2, .7, .3, 1);
}
.bc-seg-label[b-wn88ulh6aj] { padding-inline: .15rem; overflow: hidden; text-overflow: clip; white-space: nowrap; }
/* A 250 ms slice is ~30 px wide on a phone: its label bled into its neighbour and read as one
   nonsense number. The legend directly below carries every figure, so the in-bar labels go. */
@media (max-width: 34rem) { .bc-seg-label[b-wn88ulh6aj] { display: none; } }
/* A three-step ramp for the three terms that SPEND the target, then a pale band for what is left.
   Every white label on these clears 4.5:1 — the mid-green this replaces sat at 2.86:1, which is
   exactly the kind of "looks fine to me" contrast this site exists to catch. */
.bc-seg-ttfb[b-wn88ulh6aj]     { background: #07391f; }   /* 13.0:1 on white text */
.bc-seg-hops[b-wn88ulh6aj]     { background: #186b41; }   /*  6.5:1 */
.bc-seg-render[b-wn88ulh6aj]   { background: #3a7856; }   /*  5.3:1 */
.bc-seg-transfer[b-wn88ulh6aj] { background: #cfe6d8; color: var(--ink); }
.bc-seg-over[b-wn88ulh6aj]     { background: repeating-linear-gradient(45deg, #b3261e, #b3261e 6px, #9a2019 6px, #9a2019 12px); }

.bc-legend[b-wn88ulh6aj] { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--text-sm); }
.bc-legend li[b-wn88ulh6aj] {
    display: grid; gap: .1rem .5rem; align-items: baseline;
    grid-template-columns: auto 1fr auto auto;
}
.bc-legend-label[b-wn88ulh6aj] { font-weight: 600; color: var(--ink); }
.bc-legend-num[b-wn88ulh6aj], .bc-legend-pct[b-wn88ulh6aj] { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bc-legend-pct[b-wn88ulh6aj] { color: var(--muted); min-width: 3ch; text-align: right; }
.bc-legend-note[b-wn88ulh6aj] { grid-column: 2 / -1; color: var(--muted); }

.bc-dot[b-wn88ulh6aj] { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }

/* Three figures that must each stay on one line: "247.9 KiB" broken across two was the first
   thing a phone reader saw of the answer. */
.bc-stats[b-wn88ulh6aj] { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .7rem; }
.bc-stats .stat[b-wn88ulh6aj] { padding: .7rem .9rem; }
.bc-stats .num[b-wn88ulh6aj] { white-space: nowrap; font-size: var(--text-xl); }
.bc-stats span[b-wn88ulh6aj] { font-size: .82rem; }
.bc-naive-note[b-wn88ulh6aj] { margin-top: .75rem; }

/* ---------------------------------------------------------------- allocation editor */
.bc-presets[b-wn88ulh6aj] { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 .35rem; }
.bc-chip[b-wn88ulh6aj] {
    padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--card);
    font: inherit; font-size: var(--text-sm); color: var(--ink-soft);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bc-chip:hover[b-wn88ulh6aj] { border-color: var(--brand); color: var(--brand-strong); }
.bc-chip.is-on[b-wn88ulh6aj] { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-deep); font-weight: 600; }
.bc-chip.is-custom[b-wn88ulh6aj] { cursor: default; background: var(--wash); font-style: italic; }
.bc-preset-note[b-wn88ulh6aj] { margin-bottom: .9rem; }

.bc-alloc[b-wn88ulh6aj] { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .55rem; }
.bc-alloc-row[b-wn88ulh6aj] {
    display: grid; align-items: center; gap: .15rem .6rem;
    grid-template-columns: minmax(7rem, 1fr) minmax(6rem, 1.4fr) 3ch 6rem auto;
    padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft);
}
.bc-alloc-row:last-child[b-wn88ulh6aj] { border-bottom: 0; padding-bottom: 0; }
.bc-alloc-row.is-locked[b-wn88ulh6aj] { opacity: .72; }
.bc-alloc-label[b-wn88ulh6aj] { font-size: var(--text-sm); font-weight: 600; margin: 0; }
.bc-range[b-wn88ulh6aj] { width: 100%; accent-color: var(--brand); }
.bc-alloc-pct[b-wn88ulh6aj] { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.bc-alloc-bytes[b-wn88ulh6aj] { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--text-sm); text-align: right; }
.bc-lock[b-wn88ulh6aj] { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.bc-lock input[b-wn88ulh6aj] { accent-color: var(--brand); }

.bc-alloc-foot[b-wn88ulh6aj] {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: baseline;
    margin: 0 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--line);
    font-size: var(--text-sm); color: var(--ink-soft);
}

@media (max-width: 34rem) {
    .bc-alloc-row[b-wn88ulh6aj] { grid-template-columns: 1fr auto auto; }
    .bc-range[b-wn88ulh6aj] { grid-column: 1 / -1; order: 3; }
    .bc-alloc-bytes[b-wn88ulh6aj] { order: 2; }
    .bc-lock[b-wn88ulh6aj] { order: 4; grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- export */
.bc-note[b-wn88ulh6aj] {
    margin-bottom: .9rem; padding: .75rem .9rem;
    background: #fdf8ee; border: 1px solid #efdcb6; border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.bc-note p[b-wn88ulh6aj] { margin: 0; }

.bc-check[b-wn88ulh6aj] { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .8rem; font-weight: 500; cursor: pointer; }
.bc-check input[b-wn88ulh6aj] { margin-top: .2rem; accent-color: var(--brand); }
.bc-check-note[b-wn88ulh6aj] { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--muted); }

.bc-scope-line[b-wn88ulh6aj] {
    margin: 0 0 .75rem; padding: .55rem .75rem;
    background: var(--wash); border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--ink-soft);
}
.bc-preview[b-wn88ulh6aj] { margin-bottom: .9rem; }
.bc-preview > summary[b-wn88ulh6aj] { cursor: pointer; font-size: var(--text-sm); font-weight: 600; padding: .35rem 0; }
.bc-pre[b-wn88ulh6aj] {
    margin: .4rem 0 .5rem; padding: .7rem .9rem; max-height: 22rem;
    background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--radius);
    overflow: auto; font-size: .82rem; line-height: 1.5;
}
.bc-ci-lead[b-wn88ulh6aj] { margin-bottom: .4rem; }

/* ---------------------------------------------------------------- the model made visible */
.bc-model-grid[b-wn88ulh6aj] { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (min-width: 56rem) { .bc-model-grid[b-wn88ulh6aj] { grid-template-columns: 1fr 1fr; } }
.bc-model-grid > *[b-wn88ulh6aj] { min-width: 0; }

.bc-figure[b-wn88ulh6aj] { margin: 0; }
.bc-figure figcaption[b-wn88ulh6aj] { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: .5rem; }
.bc-curve[b-wn88ulh6aj] {
    width: 100%; height: clamp(9rem, 22vw, 13rem);
    background: linear-gradient(180deg, var(--card), var(--wash));
    border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.bc-curve polyline[b-wn88ulh6aj] { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bc-curve-naive[b-wn88ulh6aj] { stroke: #b3261e; stroke-dasharray: 6 5; }
.bc-curve-real[b-wn88ulh6aj] { stroke: var(--brand); }

.bc-curve-key[b-wn88ulh6aj] { list-style: none; margin: .6rem 0 .5rem; padding: 0; display: grid; gap: .25rem; font-size: var(--text-sm); }
.bc-curve-key li[b-wn88ulh6aj] { display: flex; gap: .45rem; align-items: baseline; }
.bc-dot-naive[b-wn88ulh6aj] { background: #b3261e; }
.bc-dot-real[b-wn88ulh6aj] { background: var(--brand); }

.bc-compare h3[b-wn88ulh6aj], .bc-sens h3[b-wn88ulh6aj] { font-size: var(--text-lg); margin-top: 0; }
.bc-caption[b-wn88ulh6aj] { padding: .6rem .9rem; color: var(--muted); font-size: var(--text-sm); text-align: left; }
.bc-compare tr.is-current[b-wn88ulh6aj] { background: var(--brand-wash); }
.bc-compare .bc-link[b-wn88ulh6aj] { white-space: nowrap; }
.bc-compare tr.is-current th[b-wn88ulh6aj] { color: var(--brand-deep); }

.bc-sens[b-wn88ulh6aj] { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.bc-sens-detail[b-wn88ulh6aj] { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--muted); }
.bc-up[b-wn88ulh6aj] { color: var(--good); font-weight: 600; }
.bc-down[b-wn88ulh6aj] { color: var(--bad); font-weight: 600; }

/* ---------------------------------------------------------------- closing blocks */
.bc-cta[b-wn88ulh6aj] { margin-top: 2rem; }
.bc-cta h3[b-wn88ulh6aj] { margin-top: 0; }
.bc-cta p[b-wn88ulh6aj] { margin-bottom: .75rem; }

.bc-watch h2[b-wn88ulh6aj] { font-size: var(--text-xl); margin-block: .35rem .6rem; }
.bc-watch .drip-form[b-wn88ulh6aj] { margin-top: 1rem; }
.bc-watch .hint[b-wn88ulh6aj] { flex-basis: 100%; margin: .35rem 0 0; }

/* Motion is only ever the ledger redistributing and a chip changing state. Both are the direct
   consequence of an input the reader just moved; neither is decoration. */
@media (prefers-reduced-motion: reduce) {
    .bc-seg[b-wn88ulh6aj], .bc-chip[b-wn88ulh6aj] { transition: none; }
}

/* Two groups, because the biggest number in the table — "promise a slower page" — is not an
   improvement to anything, and a flat list sorted by size recommends it first. */
.bc-sens-group th[b-wn88ulh6aj] {
    padding-top: .9rem;
    font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); background: var(--wash);
}
/* /Components/Pages/CheckoutApprovalBrief.razor.rz.scp.css */
/* /checkout/approval-brief — the forwardable artifact.
   Designed to survive being printed and emailed: no interactive affordance carries meaning, the
   commercial terms are a description list rather than a layout trick, and the print rules drop the
   chrome so the browser's "Save as PDF" produces something an approver can actually file. */

.ab[b-m6v0s3sx4a] { max-width: 58rem; }

.ab-head[b-m6v0s3sx4a] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--line);
}
.ab-head h1[b-m6v0s3sx4a] { margin: .3rem 0 0; font-size: clamp(1.6rem, 4vw, 2.25rem); }
.ab-head h1:focus-visible[b-m6v0s3sx4a] { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.ab-print[b-m6v0s3sx4a] { margin: 0; max-width: 28ch; color: var(--muted); font-size: .82rem; }

.ab-grid[b-m6v0s3sx4a] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}
.ab-grid h2[b-m6v0s3sx4a] { margin: 0 0 .5rem; font-size: var(--text-xl); }
.ab-grid h3[b-m6v0s3sx4a] { margin: 1.35rem 0 .45rem; font-size: 1rem; }
.ab-grid p[b-m6v0s3sx4a] { max-width: 62ch; color: var(--ink-soft); }

.ab-terms[b-m6v0s3sx4a] {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--wash);
}
.ab-terms-h[b-m6v0s3sx4a] { font-size: 1.05rem !important; }
.ab-dl[b-m6v0s3sx4a] { margin: 0 0 1rem; }
.ab-dl > div[b-m6v0s3sx4a] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .38rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .9rem;
}
.ab-dl > div:last-child[b-m6v0s3sx4a] { border-bottom: 0; }
.ab-dl dt[b-m6v0s3sx4a] { color: var(--muted); }
/* Money lines up on the decimal — an approver scans the column, not the sentence. */
.ab-dl dd[b-m6v0s3sx4a] { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ab-total[b-m6v0s3sx4a] { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem !important; }
.ab-total dt[b-m6v0s3sx4a] { color: var(--ink) !important; }

.ab-resume[b-m6v0s3sx4a] { margin: 0 0 .8rem; }
.ab-resume .btn[b-m6v0s3sx4a] { width: 100%; }
.ab-link-note[b-m6v0s3sx4a] { margin: 0 0 .35rem; color: var(--muted); font-size: .82rem; }
.ab-copy-label[b-m6v0s3sx4a] { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.ab-copy[b-m6v0s3sx4a] {
    width: 100%;
    min-height: 44px;
    margin-top: .25rem;
    padding: .5rem .65rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    font: inherit;
    font-size: .85rem;
    color: var(--ink-soft);
}

.ab-vendor[b-m6v0s3sx4a] {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.ab-vendor h2[b-m6v0s3sx4a] { margin: 0 0 .4rem; font-size: 1.05rem; }
.ab-vendor p[b-m6v0s3sx4a] { margin: 0; max-width: 70ch; color: var(--ink-soft); font-size: .92rem; }

.ab-back[b-m6v0s3sx4a] { margin: 1.75rem 0 0; }

@media (max-width: 52rem) {
    .ab-grid[b-m6v0s3sx4a] { grid-template-columns: minmax(0, 1fr); }
    /* The terms are what the approver opened this for — put them first once the columns collapse. */
    .ab-terms[b-m6v0s3sx4a] { order: -1; }
}

@media print {
    /* What a filed PDF should not contain: the instruction that told you to print it, the button
       that only works online, and the field holding a private link. */
    .ab-print[b-m6v0s3sx4a], .ab-resume[b-m6v0s3sx4a], .ab-copy[b-m6v0s3sx4a], .ab-copy-label[b-m6v0s3sx4a], .ab-link-note[b-m6v0s3sx4a], .ab-back[b-m6v0s3sx4a] { display: none; }
    .ab-grid[b-m6v0s3sx4a] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .ab-terms[b-m6v0s3sx4a] { background: none; border-color: #999; }
    .ab[b-m6v0s3sx4a] { max-width: none; }
    a[b-m6v0s3sx4a] { text-decoration: underline; }
}
/* /Components/Pages/CheckoutCancelled.razor.rz.scp.css */
/* /checkout/cancelled — scoped styles.
   Zero JavaScript: the objection resolver is six links and six server-rendered panels, so it works
   with scripting off, in a text browser and in print. The one animation is a short fade on the panel
   that just appeared, because a state change the reader caused is the only motion that earns its
   place here — no countdown, no pulsing CTA, no entry spectacle. */

.ck[b-oce9d5455r] { max-width: 62rem; }

/* ------------------------------------------------------------------ secure label */
.ck-secure[b-oce9d5455r] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: .86rem;
}
.ck-secure svg[b-oce9d5455r] { flex: none; color: var(--brand); }

/* ------------------------------------------------------------------ lifecycle track */
/* Confirms the earlier decision still stands and that the URL comes later — the two facts a
   hesitating buyer most often forgot while sitting in Stripe. */
.ck-track[b-oce9d5455r] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: var(--muted);
}
.ck-track li[b-oce9d5455r] { display: flex; align-items: center; gap: .45rem; }
.ck-dot[b-oce9d5455r] {
    width: .6rem; height: .6rem;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--card);
}
/* State is never colour alone: done carries a check glyph, current carries a ring and bold text. */
.ck-track .done[b-oce9d5455r] { color: var(--brand-strong); }
.ck-track .done .ck-dot[b-oce9d5455r] { background: var(--brand); border-color: var(--brand); }
.ck-track .done[b-oce9d5455r]::after { content: " ✓"; font-weight: 700; }
.ck-track .now[b-oce9d5455r] { color: var(--ink); font-weight: 600; }
.ck-track .now .ck-dot[b-oce9d5455r] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

/* ------------------------------------------------------------------ hero */
.ck-hero[b-oce9d5455r] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.ck-eyebrow[b-oce9d5455r] { margin: 0 0 .5rem; }
.ck-hero h1[b-oce9d5455r] { margin: 0 0 .75rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; }
/* The h1 receives programmatic focus so a screen reader announces the payment state first, but it
   is not an interactive control and is not in the tab order — a control-style ring around it reads
   as an error box, which is the exact opposite of the message. No visible indicator here; WCAG
   2.4.7 governs UI components that take keyboard focus, which this is not. */
.ck-hero h1:focus[b-oce9d5455r], .ck-hero h1:focus-visible[b-oce9d5455r] { outline: none; }
.ck-lead[b-oce9d5455r] { margin: 0 0 1rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; }

.ck-verified[b-oce9d5455r] {
    display: flex;
    align-items: start;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .7rem .9rem;
    border: 1px solid var(--good);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: #f2f9f4;
    color: var(--ink);
    font-size: .9rem;
    max-width: 46ch;
}
.ck-check[b-oce9d5455r] { flex: none; color: var(--good); font-weight: 700; }

.ck-alert[b-oce9d5455r] {
    margin: 1rem 0 0;
    padding: .7rem .9rem;
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: #fdf7ec;
    font-size: .9rem;
    max-width: 46ch;
}
.ck-ok[b-oce9d5455r] {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--good);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: #f2f9f4;
    font-size: .9rem;
}

/* One filled button in this region and one only — the MECLABS point about equally weighted
   options costing mental velocity toward the intended action. */
.ck-actions[b-oce9d5455r] { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.ck-resume-form[b-oce9d5455r] { margin: 0; }

/* No interpunct separators: they are rendered as leading pseudo-elements, so the moment the strip
   wraps one dangles at the start of the new line. Spacing alone carries the separation and cannot
   break. */
.ck-reassure[b-oce9d5455r] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.4rem;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}
.ck-reassure span[b-oce9d5455r] { display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ order summary */
.ck-order[b-oce9d5455r] {
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
}
.ck-order-h[b-oce9d5455r] { margin: 0 0 .7rem; font-size: 1.05rem; }
.ck-order-list[b-oce9d5455r] { margin: 0 0 1rem; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.ck-order-list li[b-oce9d5455r] { position: relative; padding-left: 1.15rem; margin-bottom: .28rem; }
.ck-order-list li[b-oce9d5455r]::before {
    content: "✓";
    position: absolute; left: 0;
    color: var(--brand);
    font-weight: 700;
}

.ck-price[b-oce9d5455r] { margin: 0 0 .9rem; padding: .8rem 0 0; border-top: 1px solid var(--line-soft); }
.ck-price > div[b-oce9d5455r] { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; font-size: .9rem; }
.ck-price dt[b-oce9d5455r] { color: var(--muted); }
/* Tabular figures so a column of money lines up on the decimal, which is what makes a total
   scannable rather than merely present. */
.ck-price dd[b-oce9d5455r] { margin: 0; font-variant-numeric: tabular-nums; }
.ck-discount dd[b-oce9d5455r] { color: var(--good); }
.ck-muted[b-oce9d5455r] { color: var(--muted); font-size: .84rem; }
.ck-total[b-oce9d5455r] {
    padding-top: .5rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-size: 1.05rem !important;
    font-weight: 700;
}
.ck-total dt[b-oce9d5455r] { color: var(--ink) !important; }

.ck-status[b-oce9d5455r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3rem 1rem;
    margin: 0 0 .8rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--wash);
    font-size: .85rem;
}
.ck-status-label[b-oce9d5455r] { color: var(--muted); }
.ck-status b.is-open[b-oce9d5455r] { color: var(--brand-strong); }
.ck-status b.is-unknown[b-oce9d5455r] { color: var(--muted); }

.ck-fulfil[b-oce9d5455r] { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* ------------------------------------------------------------------ objection resolver */
.ck-resolve[b-oce9d5455r] { margin-top: clamp(2.5rem, 6vw, 4rem); }
.ck-resolve:focus-visible[b-oce9d5455r] { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 8px; }
.ck-resolve h2[b-oce9d5455r] { margin: 0 0 .4rem; }
.ck-resolve-sub[b-oce9d5455r] { margin: 0 0 1.25rem; color: var(--muted); max-width: 62ch; }

.ck-reasons[b-oce9d5455r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: .6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.ck-reasons a[b-oce9d5455r] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;             /* comfortably past the 24px AA floor and the 44px touch target */
    padding: .75rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ck-reasons a:hover[b-oce9d5455r] { border-color: var(--brand); box-shadow: var(--shadow-1); }
/* The chosen question is marked by border, weight and aria-current — not by colour alone. */
.ck-reasons a.is-open[b-oce9d5455r] { border-color: var(--brand); background: var(--brand-wash); }
.ck-reasons a b[b-oce9d5455r] { display: block; font-size: .95rem; }
.ck-reason-sub[b-oce9d5455r] { display: block; margin-top: .1rem; color: var(--muted); font-size: .82rem; }
.ck-num[b-oce9d5455r] { flex: none; font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--brand); letter-spacing: .08em; }
.ck-reasons .arrow[b-oce9d5455r] { margin-left: auto; color: var(--muted); }

.ck-else[b-oce9d5455r] { margin: 0; color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------------ resolution panel */
.ck-panel[b-oce9d5455r] {
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    box-shadow: var(--shadow-1);
}
.ck-panel:focus-visible[b-oce9d5455r] { outline: 3px solid var(--focus); outline-offset: 4px; }
.ck-panel h2[b-oce9d5455r] { margin: 0 0 .6rem; font-size: var(--text-xl); }
.ck-panel h3[b-oce9d5455r] { margin: 0 0 .5rem; font-size: 1rem; }
.ck-panel > p[b-oce9d5455r] { max-width: 66ch; color: var(--ink-soft); }
.ck-panel-note[b-oce9d5455r] { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; max-width: 66ch; }
.ck-panel-actions[b-oce9d5455r] { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }

/* The anatomy of a finding: six named parts, in the order the audit produces them. */
.ck-anatomy[b-oce9d5455r], .ck-three[b-oce9d5455r] { margin: 1rem 0 0; padding: 0 0 0 1.2rem; display: grid; gap: .55rem; }
.ck-anatomy li[b-oce9d5455r], .ck-three li[b-oce9d5455r] { padding-left: .35rem; }
.ck-anatomy b[b-oce9d5455r], .ck-three b[b-oce9d5455r] { display: block; }
.ck-anatomy span[b-oce9d5455r], .ck-three span[b-oce9d5455r] { color: var(--muted); font-size: .9rem; }

.ck-fit[b-oce9d5455r] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1.25rem; margin-top: 1rem; }
.ck-x-list[b-oce9d5455r] { margin: 0; padding: 0; list-style: none; }
.ck-x-list li[b-oce9d5455r] { position: relative; padding-left: 1.3rem; margin-bottom: .35rem; color: var(--muted); font-size: .92rem; }
.ck-x-list li[b-oce9d5455r]::before { content: "—"; position: absolute; left: 0; color: var(--line); font-weight: 700; }

.ck-diag[b-oce9d5455r] { margin: 1rem 0 0; display: grid; gap: .7rem; }
.ck-diag > div[b-oce9d5455r] { padding-bottom: .7rem; border-bottom: 1px solid var(--line-soft); }
.ck-diag > div:last-child[b-oce9d5455r] { border-bottom: 0; padding-bottom: 0; }
.ck-diag dt[b-oce9d5455r] { font-weight: 600; margin-bottom: .15rem; }
.ck-diag dd[b-oce9d5455r] { margin: 0; color: var(--muted); font-size: .92rem; }

.ck-defer[b-oce9d5455r] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.ck-defer-card[b-oce9d5455r] { padding: 1rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--wash); }
.ck-defer-card p[b-oce9d5455r] { margin: 0 0 .75rem; color: var(--muted); font-size: .88rem; }
.ck-defer-form[b-oce9d5455r] { display: grid; gap: .4rem; }
.ck-defer-form label[b-oce9d5455r], .ck-copy-label[b-oce9d5455r] { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.ck-defer-form input[b-oce9d5455r], .ck-copy[b-oce9d5455r] {
    width: 100%;
    min-height: 44px;
    padding: .5rem .7rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    font: inherit;
    font-size: .9rem;
}
/* Readonly rather than a copy button: with no JavaScript the honest affordance is a field the
   reader can select. The link works whether or not anything is scripted. */
.ck-copy[b-oce9d5455r] { margin-top: .3rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 62rem) {
    /* The primary action must be reachable without scrolling past the order detail, so on one
       column the summary follows the decision instead of preceding it. */
    .ck-hero[b-oce9d5455r] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    .ck-actions .btn[b-oce9d5455r], .ck-resume-form[b-oce9d5455r], .ck-resume-form .btn[b-oce9d5455r] { width: 100%; }
    .ck-panel-actions .btn[b-oce9d5455r] { width: 100%; }
    .ck-reassure[b-oce9d5455r] { gap: .15rem 0; flex-direction: column; }
}

/* ------------------------------------------------------------------ motion */
/* 180ms, once, on the thing the reader just asked for. The base state is the finished state, so
   with reduced motion — or no animation support at all — the panel is simply present. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes ck-appear-b-oce9d5455r { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .ck-panel[b-oce9d5455r] { animation: ck-appear-b-oce9d5455r .18s ease-out both; }
}

@media print {
    .ck-resolve[b-oce9d5455r], .ck-actions[b-oce9d5455r], .ck-secure[b-oce9d5455r] { display: none; }
    .ck-panel[b-oce9d5455r], .ck-order[b-oce9d5455r] { box-shadow: none; break-inside: avoid; }
}
/* /Components/Pages/CloakingResultPage.razor.rz.scp.css */
/* The verdict, sized so it is the first thing read and the only thing read by someone skimming. */
.cr-verdict[b-mw8bkdwe98] {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    line-height: 1.3;
    margin: .6rem 0 .3rem;
}

/* Colour is never the only signal: the headline states the verdict in words, and the findings
   below carry their own labels. These only reinforce it. */
.cr-good[b-mw8bkdwe98] { color: var(--brand-deep); }
.cr-info[b-mw8bkdwe98] { color: var(--ink); }
.cr-bad[b-mw8bkdwe98]  { color: #8a3b12; }

/* One field and one button, side by side where there is room. This is the page's conversion
   mechanic, so it stays a single row rather than a form the visitor has to work through. */
.cr-check[b-mw8bkdwe98] { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; margin: 0; }
.cr-check input[b-mw8bkdwe98] { flex: 1 1 18rem; min-width: 0; }
.cr-check .btn[b-mw8bkdwe98] { flex: 0 0 auto; }

.cr-findings[b-mw8bkdwe98] { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .5rem; }

.cr-findings li[b-mw8bkdwe98] {
    padding: .55rem .7rem;
    border-inline-start: 3px solid var(--line);
    background: var(--card);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.cr-findings li.cr-good[b-mw8bkdwe98] { border-inline-start-color: var(--signal); color: inherit; }
.cr-findings li.cr-warn[b-mw8bkdwe98] { border-inline-start-color: #b86c1c; color: inherit; }
.cr-findings li.cr-bad[b-mw8bkdwe98]  { border-inline-start-color: #8a3b12; color: inherit; }
.cr-findings li.cr-info[b-mw8bkdwe98] { border-inline-start-color: var(--line); color: inherit; }

/* The scope of what follows, placed ABOVE the numbers it qualifies. A caveat under a table has
   already been overtaken by the table: the reader believed the comparison before reaching it. */
.cr-caveat[b-mw8bkdwe98] {
    margin: .75rem 0;
    padding: .6rem .75rem;
    border-inline-start: 3px solid #b86c1c;
    background: var(--card);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}
/* /Components/Pages/CloakingTestPage.razor.rz.scp.css */
/* PageSpeed cloaking test — the page-integrity comparison chamber.

   One contained instrument against the light page: visitor on the left, Google on the right, and
   the DIFFERENCE between them as the central object rather than something the reader has to work
   out from two columns. The palette stays the site's pine and signal green; red and amber are
   reserved for evidence states and never used decoratively. */
.ck[b-qjbptl1bvs]{
  --panel:var(--card);
  --line-2:var(--line);
  --ink-mid:var(--muted);
  --ink-dim:#55675e;      /* 5.3:1 on the wash */
  --ink-faint:#5f7268;    /* 4.6:1 on the wash */
  --accent:var(--brand);
  --accent-2:var(--brand-strong);
  --accent-deep:var(--brand-deep);
  --accent-soft:var(--brand-wash);
  --accent-line:#bcdcc8;
  --gauge-good:#1aa05a;
  --gauge-warn:#e0a52e;
  --gauge-poor:#e4524a;
  --mono:var(--font-mono);
  --disp:var(--font-display);
  --r:var(--radius);
  --r-sm:var(--radius-sm);
  --r-lg:18px;
  font-feature-settings:"tnum";
}
.ck *[b-qjbptl1bvs]{box-sizing:border-box;}

/* ---------------------------------------------------------------- hero */
.ck-hero[b-qjbptl1bvs]{padding-block:clamp(2rem,5vw,3.25rem) clamp(1.5rem,3.5vw,2.25rem);}
.ck-hero h1[b-qjbptl1bvs]{font-size:var(--text-2xl); max-width:24ch; margin-block:.35rem .6rem;}
.ck-hero .lede[b-qjbptl1bvs]{font-size:var(--text-base); max-width:60ch;}

/* The three named sources, before the form: what is being compared, in ten seconds. */
.ck-model[b-qjbptl1bvs]{list-style:none; display:flex; flex-wrap:wrap; align-items:stretch; gap:.5rem;
  margin:1.1rem 0 1.4rem; padding:0;}
.ck-model > li:not(.ck-model-op)[b-qjbptl1bvs]{flex:1 1 13rem; min-width:0; display:flex; flex-direction:column; gap:.15rem;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:.6rem .8rem;}
.ck-model .n[b-qjbptl1bvs]{font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--ink);}
.ck-model .d[b-qjbptl1bvs]{font-size:.78rem; color:var(--ink-dim); line-height:1.45;}
.ck-model-op[b-qjbptl1bvs]{display:flex; align-items:center; color:var(--ink-faint); font-size:1.1rem; padding-inline:.1rem;}
@media (max-width:52rem){ .ck-model-op[b-qjbptl1bvs]{display:none;} }

.ck-form[b-qjbptl1bvs]{max-width:44rem;}
.ck-field[b-qjbptl1bvs]{margin-bottom:.75rem;}
.ck-field label[b-qjbptl1bvs]{display:block; font-weight:600; font-size:.9rem; margin-bottom:.3rem;}
.ck-field input[b-qjbptl1bvs]{width:100%;}
.ck-field input[aria-invalid="true"][b-qjbptl1bvs]{border-color:var(--bad); box-shadow:0 0 0 3px rgba(179,38,30,.14);}
.ck-go[b-qjbptl1bvs]{width:100%;}
.ck-trust[b-qjbptl1bvs]{margin:.7rem 0 0; font-family:var(--mono); font-size:.7rem; letter-spacing:.02em; color:var(--ink-dim);}
.ck-trust a[b-qjbptl1bvs]{color:var(--accent-2);}

.ck-block[b-qjbptl1bvs]{padding-top:clamp(1rem,2vw,1.5rem);}
/* Nothing measured yet: the section is empty, so it must not take vertical space. */
.ck-block.is-idle[b-qjbptl1bvs]{padding-block:0;}

/* ---------------------------------------------------------------- the chamber */
.ck-chamber[b-qjbptl1bvs]{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1rem,2.5vw,1.5rem); box-shadow:0 1px 2px rgba(13,33,23,.05), 0 18px 44px -22px rgba(13,33,23,.26);
  margin-bottom:1.15rem;}
.ck-ch-head[b-qjbptl1bvs]{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid var(--line-soft);}
.ck-ch-title[b-qjbptl1bvs]{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid);}
.ck-ch-count[b-qjbptl1bvs]{font-family:var(--mono); font-size:.68rem; color:var(--ink-dim);}

/* ---------------------------------------------------------------- probe lanes */
.ck-lanes[b-qjbptl1bvs]{list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.5rem;}
.ck-lane[b-qjbptl1bvs]{display:grid; grid-template-columns:1.4rem minmax(0,1fr) auto; gap:.2rem .6rem; align-items:baseline;
  position:relative; padding:.5rem .7rem; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--wash);
  overflow:hidden;}
.ck-lane .mk[b-qjbptl1bvs]{font-family:var(--mono); font-size:.85rem; color:var(--ink-faint);}
.ck-lane .nm[b-qjbptl1bvs]{font-weight:600; font-size:.92rem; color:var(--ink);}
.ck-lane .st[b-qjbptl1bvs]{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); text-align:right;}
.ck-lane .dt[b-qjbptl1bvs]{grid-column:2 / -1; font-size:.78rem; color:var(--ink-dim); line-height:1.4;}
.ck-lane-complete[b-qjbptl1bvs]{background:var(--accent-soft); border-color:var(--accent-line);}
.ck-lane-complete .mk[b-qjbptl1bvs]{color:var(--good);}
.ck-lane-failed[b-qjbptl1bvs]{background:#fdf6f5; border-color:#f0d3d0;}
.ck-lane-failed .mk[b-qjbptl1bvs], .ck-lane-failed .st[b-qjbptl1bvs]{color:var(--bad);}
/* A scan line only while a lane is genuinely still waiting on its own request. */
.ck-lane-running[b-qjbptl1bvs]::after{content:""; position:absolute; left:-40%; top:0; width:40%; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:ck-scan-b-qjbptl1bvs 1.5s ease-in-out infinite;}
@keyframes ck-scan-b-qjbptl1bvs{from{left:-40%} to{left:100%}}
.ck-elapsed[b-qjbptl1bvs]{margin:0; font-family:var(--mono); font-size:.7rem; color:var(--ink-dim);}

/* ---------------------------------------------------------------- verdict */
.ck-verdict[b-qjbptl1bvs]{border-left:4px solid var(--line); padding:.15rem 0 .15rem 1rem; margin-bottom:1.2rem;}
.ck-v-band[b-qjbptl1bvs]{margin:0 0 .15rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);}
.ck-v-headline[b-qjbptl1bvs]{font-family:var(--disp); font-weight:650; font-size:clamp(1.25rem,3.4vw,1.75rem); line-height:1.15;
  letter-spacing:-.02em; margin:0 0 .35rem; color:var(--ink);}
.ck-v-headline:focus-visible[b-qjbptl1bvs]{outline:2px solid var(--focus); outline-offset:4px; border-radius:4px;}
.ck-v-url[b-qjbptl1bvs]{margin:0; font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); overflow-wrap:anywhere;}
.ck-v-good[b-qjbptl1bvs]{border-left-color:var(--gauge-good);} .ck-v-good .ck-v-band[b-qjbptl1bvs]{color:var(--good);}
.ck-v-warn[b-qjbptl1bvs]{border-left-color:var(--gauge-warn);} .ck-v-warn .ck-v-band[b-qjbptl1bvs]{color:var(--warn);}
.ck-v-bad[b-qjbptl1bvs]{border-left-color:var(--gauge-poor);}  .ck-v-bad .ck-v-band[b-qjbptl1bvs]{color:var(--bad);}
.ck-v-neutral[b-qjbptl1bvs]{border-left-color:var(--line);}

/* ---------------------------------------------------------------- difference matrix */
.ck-matrix[b-qjbptl1bvs]{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;}
.ck-mx-head[b-qjbptl1bvs], .ck-mx-row[b-qjbptl1bvs]{display:grid; gap:.35rem .9rem; background:var(--card); padding:.7rem .85rem;
  grid-template-columns:minmax(6rem,1fr) minmax(4rem,.7fr) minmax(4rem,.7fr) minmax(8rem,1.2fr) minmax(9rem,1.4fr);
  align-items:center;}
.ck-mx-head[b-qjbptl1bvs]{background:var(--wash); font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim);}
.ck-mx-row .k[b-qjbptl1bvs]{font-weight:600; font-size:.92rem; color:var(--ink);}
.ck-mx-row .a[b-qjbptl1bvs], .ck-mx-row .b[b-qjbptl1bvs]{font-family:var(--mono); font-size:.82rem; color:var(--ink-mid); overflow-wrap:anywhere;}
.ck-mx-row .d[b-qjbptl1bvs]{display:flex; flex-direction:column; gap:.3rem; min-width:0;}
.ck-mx-row .d .v[b-qjbptl1bvs]{font-family:var(--disp); font-weight:650; font-size:1.05rem; color:var(--ink);}
.ck-mx-row .m[b-qjbptl1bvs]{font-size:.78rem; color:var(--ink-dim); line-height:1.4;}
.ck-mx-row.is-crossed[b-qjbptl1bvs]{background:#fdf8ee;}
.ck-mx-row.is-crossed .d .v[b-qjbptl1bvs]{color:var(--bad);}
.ck-mx-row.is-crossed .m[b-qjbptl1bvs]{color:#6b4400;}

/* The bar is the judgement made visible: the mark is the line, the fill is the measurement. */
.ck-mx-row .bar[b-qjbptl1bvs]{position:relative; display:block; height:8px; border-radius:4px; background:var(--wash);
  border:1px solid var(--line-soft); overflow:visible;}
.ck-mx-row .fill[b-qjbptl1bvs]{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--accent);
  animation:ck-grow-b-qjbptl1bvs .42s cubic-bezier(.2,.7,.3,1) both;}
.ck-mx-row .fill.over[b-qjbptl1bvs]{background:var(--gauge-poor);}
.ck-mx-row .mark[b-qjbptl1bvs]{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:1px;}
@keyframes ck-grow-b-qjbptl1bvs{from{width:0}}

.ck-mx-legend[b-qjbptl1bvs]{display:flex; align-items:center; gap:.45rem; margin:.6rem 0 0; font-size:.76rem; color:var(--ink-dim); line-height:1.5;}
.ck-mx-legend .mark[b-qjbptl1bvs]{flex:none; display:inline-block; width:2px; height:.9em; background:var(--ink); border-radius:1px;}

.ck-nosignals[b-qjbptl1bvs]{margin:0; font-size:.88rem; color:var(--ink-mid); line-height:1.55;}

/* ---------------------------------------------------------------- why this verdict */
.ck-why[b-qjbptl1bvs]{display:grid; gap:1rem; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line-soft);}
@media (min-width:52rem){ .ck-why[b-qjbptl1bvs]{grid-template-columns:1.1fr .9fr;} }
.ck-why > *[b-qjbptl1bvs]{min-width:0;}
.ck-why h3[b-qjbptl1bvs]{margin:0 0 .5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid);}
.ck-cov[b-qjbptl1bvs]{list-style:none; margin:0; padding:0; display:grid; gap:.35rem;}
.ck-cov li[b-qjbptl1bvs]{display:grid; grid-template-columns:1.1rem minmax(0,1fr); gap:.1rem .5rem; align-items:baseline; font-size:.85rem;}
.ck-cov .mk[b-qjbptl1bvs]{font-family:var(--mono); color:var(--good);}
.ck-cov li.off .mk[b-qjbptl1bvs]{color:var(--ink-faint);}
.ck-cov .nm[b-qjbptl1bvs]{font-weight:600; color:var(--ink);}
.ck-cov li.off .nm[b-qjbptl1bvs]{color:var(--ink-dim); font-weight:500;}
.ck-cov .dt[b-qjbptl1bvs]{grid-column:2; font-size:.76rem; color:var(--ink-dim); line-height:1.4;}
.ck-rule[b-qjbptl1bvs]{margin:0 0 .5rem; padding:.7rem .85rem; background:var(--wash); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); font-size:.85rem; color:var(--ink); line-height:1.55;}
.ck-rule-note[b-qjbptl1bvs]{margin:0; font-size:.78rem; color:var(--ink-dim); line-height:1.5;}

/* ---------------------------------------------------------------- panels */
.ck-panel[b-qjbptl1bvs]{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(1rem,2.2vw,1.35rem); margin-bottom:1.15rem; box-shadow:0 1px 2px rgba(13,33,23,.04);}
.ck-panel > h3[b-qjbptl1bvs]{margin:0 0 .75rem; font-size:1.05rem;}
.ck-p-head[b-qjbptl1bvs]{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem;}
.ck-p-head h3[b-qjbptl1bvs]{margin:0; font-size:1.05rem;}
.ck-scope[b-qjbptl1bvs], .ck-scope-warn[b-qjbptl1bvs]{font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; padding:.22rem .6rem; border-radius:999px;}
.ck-scope[b-qjbptl1bvs]{background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-deep);}
.ck-scope-warn[b-qjbptl1bvs]{background:#fdf8ee; border:1px solid #efdcb6; color:#6b4400; font-weight:600;}

/* ---------------------------------------------------------------- lab vs field */
/* Both pin labels hang outside the 10px track: the lab label rises 52px above it and the
   real-user label drops 62px below. These two numbers are that clearance, so neither collides
   with the heading above or the axis below. */
.ck-lcp[b-qjbptl1bvs]{margin:3.6rem 0 .6rem;}
.ck-lcp-track[b-qjbptl1bvs]{position:relative; height:10px; border-radius:5px; overflow:visible;
  box-shadow:inset 0 0 0 1px rgba(13,33,23,.10);}
.ck-lcp-track .zone[b-qjbptl1bvs]{position:absolute; top:0; bottom:0;}
.ck-lcp-track .zone.good[b-qjbptl1bvs]{left:0; background:var(--gauge-good); border-radius:5px 0 0 5px;}
.ck-lcp-track .zone.warn[b-qjbptl1bvs]{background:var(--gauge-warn);}
.ck-lcp-track .zone.poor[b-qjbptl1bvs]{background:var(--gauge-poor); border-radius:0 5px 5px 0;}
.ck-lcp .pin[b-qjbptl1bvs]{position:absolute; top:-6px; bottom:-6px; width:2px; border-radius:1px; z-index:3;}
.ck-lcp .pin.lab[b-qjbptl1bvs]{background:var(--ink);}
.ck-lcp .pin.real[b-qjbptl1bvs]{background:var(--accent-deep);}
.ck-lcp .pin .lb[b-qjbptl1bvs]{position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; text-align:center;
  font-family:var(--disp); font-weight:600; font-size:.82rem; color:var(--ink);}
/* .62rem, matching the matrix header: at .54rem this was 8.6px, and it is not decoration —
   "GOOGLE RUN" versus "REAL USERS P75" is what makes the two marks mean different things. */
.ck-lcp .pin .lb b[b-qjbptl1bvs]{display:block; font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:.15rem;}
.ck-lcp .pin.lab .lb[b-qjbptl1bvs]{bottom:calc(100% + 8px);}
.ck-lcp .pin.real .lb[b-qjbptl1bvs]{top:calc(100% + 8px);} .ck-lcp .pin.real .lb b[b-qjbptl1bvs]{color:var(--accent-2);}
.ck-lcp-axis[b-qjbptl1bvs]{position:relative; height:1.1rem; margin-top:4rem;}
.ck-lcp-axis span[b-qjbptl1bvs]{position:absolute; transform:translateX(-50%); font-family:var(--mono); font-size:.6rem; color:var(--ink-faint); white-space:nowrap;}
.ck-lcp-axis span:first-child[b-qjbptl1bvs]{transform:none; left:0;}
.ck-lcp-note[b-qjbptl1bvs]{margin:.6rem 0 0; font-size:.85rem; color:var(--ink-mid); line-height:1.55;}
.ck-lcp-note a[b-qjbptl1bvs]{color:var(--accent-2);}

/* ---------------------------------------------------------------- screenshot + disclosure */
.ck-shot[b-qjbptl1bvs]{margin:0;}
.ck-shot img[b-qjbptl1bvs]{max-width:340px; margin-inline:auto; display:block; border:1px solid var(--line); border-radius:var(--r-sm);}
.ck-shot figcaption[b-qjbptl1bvs]{margin-top:.7rem; font-size:.82rem; color:var(--ink-dim); line-height:1.55;}
.ck-shot-limit[b-qjbptl1bvs]{display:block; margin-top:.4rem; color:var(--ink-faint);}

.ck-disclose[b-qjbptl1bvs]{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:.75rem clamp(1rem,2.2vw,1.35rem); margin-bottom:1.15rem;}
.ck-disclose > summary[b-qjbptl1bvs]{cursor:pointer; font-weight:600; font-size:.92rem; padding:.3rem 0;}
.ck-disclose[open] > summary[b-qjbptl1bvs]{margin-bottom:.7rem;}
.ck-psi-stats[b-qjbptl1bvs]{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); margin-top:1rem;}

/* ---------------------------------------------------------------- next actions */
.ck-next-lead[b-qjbptl1bvs]{margin:0 0 .9rem; font-size:.95rem; color:var(--ink-mid); line-height:1.6; max-width:62ch;}
.ck-next-row[b-qjbptl1bvs]{display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; align-items:center;}
/* Beside the primary button, so a standalone target: WCAG 2.2 AA wants 24x24 and the line box
   alone gave it 22. */
.ck-next-secondary[b-qjbptl1bvs]{font-size:.85rem; color:var(--accent-2); display:inline-flex; align-items:center;
  min-height:24px; padding-block:.15rem;}
.ck-census[b-qjbptl1bvs]{margin:.9rem 0 0; font-size:.8rem; color:var(--ink-dim);}

/* ---------------------------------------------------------------- sharing */
.ck-share-private[b-qjbptl1bvs]{margin:0 0 .9rem; padding:.8rem .95rem; background:#fdf8ee; border:1px solid #efdcb6;
  border-left:3px solid var(--warn); border-radius:var(--r-sm); font-size:.85rem; color:#6b4400; line-height:1.6;}
.ck-dest[b-qjbptl1bvs]{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem;}
.ck-dest-chip[b-qjbptl1bvs]{padding:.35rem .75rem; border-radius:999px; cursor:pointer; font:inherit; font-size:.8rem;
  background:var(--card); border:1px solid var(--line); color:var(--ink-mid); transition:background .15s, border-color .15s;}
.ck-dest-chip:hover[b-qjbptl1bvs]{border-color:var(--accent); color:var(--accent-2);}
.ck-dest-chip.on[b-qjbptl1bvs]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); font-weight:600;}
.ck-dest-note[b-qjbptl1bvs]{margin:0 0 .8rem; font-size:.82rem; color:var(--ink-dim); line-height:1.55;}
.ck-preview img[b-qjbptl1bvs]{width:100%; max-width:480px; height:auto; border:1px solid var(--line); border-radius:8px;}
.ck-preview-badge img[b-qjbptl1bvs]{width:auto; max-width:100%; border:0;}
.ck-actions[b-qjbptl1bvs]{display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 .6rem;}
.ck-permalink[b-qjbptl1bvs]{margin:0 0 .6rem; font-size:.8rem; color:var(--ink-dim); overflow-wrap:anywhere;}
.ck-permalink span[b-qjbptl1bvs]{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;}
.ck-share label[b-qjbptl1bvs]{display:block; font-weight:600; font-size:.85rem; margin:.6rem 0 .25rem;}
.ck-share textarea[b-qjbptl1bvs]{width:100%; font-family:var(--mono); font-size:.78rem;}

.ck-email h3[b-qjbptl1bvs]{margin:0 0 .7rem; font-size:1rem;}
.ck-email-row[b-qjbptl1bvs]{display:flex; gap:.5rem; flex-wrap:wrap;}
.ck-email-row input[b-qjbptl1bvs]{flex:1; min-width:12rem;}

@media (max-width:56rem){
  .ck-mx-head[b-qjbptl1bvs]{display:none;}
  .ck-mx-row[b-qjbptl1bvs]{grid-template-columns:1fr 1fr; gap:.3rem .7rem;}
  .ck-mx-row .k[b-qjbptl1bvs]{grid-column:1 / -1; font-size:1rem;}
  .ck-mx-row .a[b-qjbptl1bvs]::before{content:"Visitor: "; color:var(--ink-faint);}
  .ck-mx-row .b[b-qjbptl1bvs]::before{content:"Google: "; color:var(--ink-faint);}
  .ck-mx-row .d[b-qjbptl1bvs], .ck-mx-row .m[b-qjbptl1bvs]{grid-column:1 / -1;}
}

/* Motion is the method resolving: a lane scans only while its own request is open, a bar grows
   once to the measurement it found, and nothing loops after the answer arrives. */
@media (prefers-reduced-motion: reduce){
  .ck-lane-running[b-qjbptl1bvs]::after{animation:none;}
  .ck-mx-row .fill[b-qjbptl1bvs]{animation:none;}
  .ck-dest-chip[b-qjbptl1bvs]{transition:none;}
}

/* The method section: the ordered steps and the headings after them need room, or "Why we never
   just accuse" reads as the last step's caption rather than as the section it is. */
.ck .steps[b-qjbptl1bvs]{margin-block:1.5rem;}
.ck .steps + h3[b-qjbptl1bvs], .ck details + h3[b-qjbptl1bvs]{margin-top:2rem;}
.ck .container-narrow h3[b-qjbptl1bvs]{font-size:var(--text-lg);}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* /contact — a task page.

   The form is the primary object, so the hero is scoped down from the marketing default and the
   first input sits inside the first viewport on a phone. Everything interactive here is driven by
   radio state through :has(), so the page ships no script — the same claim the footer makes. */

/* ---------------------------------------------------------------- hero */
/* The marketing hero's padding pushed the first input past the fold at 390px. This is the same
   type scale, on a task page's budget. */
.ct-hero[b-a4u7yloa3j] {
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(.75rem, 2vw, 1.25rem);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent), transparent 70%),
        var(--bg);
    border-bottom: 1px solid var(--line-soft);
}

.ct-hero h1[b-a4u7yloa3j] {
    margin: .35rem 0 0;
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -.02em;
}

.ct-lede[b-a4u7yloa3j] {
    max-width: 62ch;
    margin: .8rem 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 2.4vw, 1.1rem);
    line-height: 1.6;
}

.ct-lede strong[b-a4u7yloa3j] { color: var(--ink); font-weight: 650; }

.ct-block[b-a4u7yloa3j] { padding-top: clamp(1.25rem, 3vw, 2rem); }

/* Phone: every vertical unit above the form is spent deliberately. The hero keeps its wording and
   loses its padding, and the form's own heading is folded into the visually-hidden one — the card
   below it says the same thing. */
@media (max-width: 30rem) {
    .ct-hero[b-a4u7yloa3j] { padding-top: 1rem; padding-bottom: .5rem; }
    .ct-hero h1[b-a4u7yloa3j] { font-size: 2.05rem; }
    .ct-lede[b-a4u7yloa3j] { margin-top: .55rem; font-size: .97rem; line-height: 1.5; }
    .ct-block[b-a4u7yloa3j] { padding-top: .9rem; }
    .ct-form-h[b-a4u7yloa3j] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ct-intent[b-a4u7yloa3j] { margin-bottom: .85rem; }
}

/* ---------------------------------------------------------------- layout */
.ct-grid[b-a4u7yloa3j] { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
.ct-grid > *[b-a4u7yloa3j] { min-width: 0; }

@media (min-width: 62rem) {
    .ct-grid[b-a4u7yloa3j] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .ct-side[b-a4u7yloa3j] { position: sticky; top: 5.5rem; }
}

.ct-form-h[b-a4u7yloa3j] { margin: 0 0 .85rem; font-size: var(--text-xl); }

.ct-card[b-a4u7yloa3j] { padding: clamp(1.1rem, 2.6vw, 1.6rem); }

.ct-card-h[b-a4u7yloa3j] { margin: 0 0 .6rem; font-size: 1.05rem; }

/* Off-screen honeypot. position:relative on the card keeps it from widening the page. */
.ct-card[b-a4u7yloa3j] { position: relative; }
.ct-trap[b-a4u7yloa3j] { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- intent chips */
/* min-width:0 is not optional on a fieldset: browsers give it an intrinsic min-width of
   min-content, so it refuses to shrink below its widest row and the chip strip's scroll container
   inside it is powerless — the fieldset itself became 479px wide in a 390px viewport. */
.ct-intent[b-a4u7yloa3j] { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }

.ct-intent-legend[b-a4u7yloa3j] {
    padding: 0;
    margin-bottom: .5rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
}

.ct-optional[b-a4u7yloa3j] {
    margin-left: .4rem;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .82rem;
}

/* Horizontally scrollable on a phone rather than three wrapped rows: the chips are a hint, and
   they must not push the email field down the page. */
.ct-chips[b-a4u7yloa3j] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

@media (max-width: 30rem) {
    .ct-chips[b-a4u7yloa3j] {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Both are load-bearing: a nowrap flex row defaults to min-width:auto, so without them the
           row's content width becomes the document's and the whole page scrolls sideways. */
        min-width: 0;
        max-width: 100%;
        scrollbar-width: none;
        padding-bottom: .2rem;
        scroll-snap-type: x proximity;
    }

    /* A strip that scrolls with a hard cut at the edge reads as a clipped bug. The fade is the
       standard affordance, and it is the whole of the hint — the chips are optional, so nobody is
       stranded if they miss it. */
    .ct-chips[b-a4u7yloa3j] {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }

    .ct-chips[b-a4u7yloa3j]::-webkit-scrollbar { display: none; }
    .ct-chip[b-a4u7yloa3j] { flex: 0 0 auto; scroll-snap-align: start; }
}

.ct-chip[b-a4u7yloa3j] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ct-chip:hover[b-a4u7yloa3j] { border-color: var(--brand); color: var(--ink); }

.ct-chip-input:checked + .ct-chip[b-a4u7yloa3j] {
    border-color: var(--brand-strong);
    background: var(--brand-strong);
    color: #fff;
}

.ct-chip-input:focus-visible + .ct-chip[b-a4u7yloa3j] { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- the per-intent copy */
/* One element per intent, exactly one shown. The default (nothing picked) is .ct-ask-none. */
.ct-ask[b-a4u7yloa3j], .ct-check[b-a4u7yloa3j] { display: none; }
.ct-ask-none[b-a4u7yloa3j], .ct-check-none[b-a4u7yloa3j] { display: inline; }

.ct-card:has(.ct-chip-input:checked) .ct-ask-none[b-a4u7yloa3j] { display: none; }
.ct-card:has(#intent-buying:checked) .ct-ask-buying[b-a4u7yloa3j],
.ct-card:has(#intent-report:checked) .ct-ask-report[b-a4u7yloa3j],
.ct-card:has(#intent-api:checked) .ct-ask-api[b-a4u7yloa3j],
.ct-card:has(#intent-volume:checked) .ct-ask-volume[b-a4u7yloa3j],
.ct-card:has(#intent-other:checked) .ct-ask-other[b-a4u7yloa3j] { display: inline; }

/* The routing panel reacts to the same radios from the other column. */
.ct-grid:has(.ct-chip-input:checked) .ct-check-none[b-a4u7yloa3j] { display: none; }
.ct-grid:has(#intent-buying:checked) .ct-check-buying[b-a4u7yloa3j],
.ct-grid:has(#intent-report:checked) .ct-check-report[b-a4u7yloa3j],
.ct-grid:has(#intent-api:checked) .ct-check-api[b-a4u7yloa3j],
.ct-grid:has(#intent-volume:checked) .ct-check-volume[b-a4u7yloa3j],
.ct-grid:has(#intent-other:checked) .ct-check-other[b-a4u7yloa3j] { display: inline; }

/* The one animation the selection earns: the step it changed is briefly marked, so the connection
   between chip and route is visible instead of asserted. */
.ct-grid:has(.ct-chip-input:checked) .ct-route-steps .ct-step:nth-child(2) .ct-n[b-a4u7yloa3j] {
    border-color: var(--brand-strong);
    background: var(--brand-strong);
    color: #fff;
}

.ct-checks[b-a4u7yloa3j] { transition: color 170ms ease; }

/* ---------------------------------------------------------------- field errors */
.ct-field-error[b-a4u7yloa3j] {
    display: flex;
    gap: .4rem;
    margin: .4rem 0 0;
    color: #8c211b;
    font-size: .9rem;
    line-height: 1.45;
}

.ct-field-error[b-a4u7yloa3j]::before { content: "!"; flex: 0 0 auto; font-weight: 700; }

[aria-invalid="true"][b-a4u7yloa3j] { border-color: #b3372e !important; background: #fdf6f5; }

.ct-privacy[b-a4u7yloa3j] { margin: .75rem 0 0; }

/* ---------------------------------------------------------------- routing panel */
.ct-route[b-a4u7yloa3j] {
    padding: clamp(1.1rem, 2.6vw, 1.5rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--wash);
}

.ct-route-h[b-a4u7yloa3j] { margin: 0; font-size: 1.05rem; }
.ct-route-sub[b-a4u7yloa3j] { margin: .3rem 0 1.1rem; color: var(--muted); font-size: .9rem; }

.ct-route-steps[b-a4u7yloa3j] { list-style: none; margin: 0; padding: 0; }

.ct-step[b-a4u7yloa3j] { display: flex; gap: .75rem; position: relative; padding-bottom: 1.1rem; }

/* The signal path: a hairline down the numbered nodes. Drawn with a pseudo-element so it never
   affects layout, and stopped after the last step. */
.ct-step[b-a4u7yloa3j]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 25%, transparent) 100%);
}

.ct-n[b-a4u7yloa3j] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--brand-strong);
    font-family: var(--font-display);
    font-weight: 650;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease;
}

.ct-step-h[b-a4u7yloa3j] { margin: .15rem 0 .2rem; font-size: .97rem; }
.ct-step p[b-a4u7yloa3j] { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.ct-fork-label[b-a4u7yloa3j] { margin: .1rem 0 .7rem; color: var(--muted); font-size: .86rem; }

.ct-fork[b-a4u7yloa3j] { display: grid; gap: .6rem; }

@media (min-width: 40rem) {
    .ct-fork[b-a4u7yloa3j] { grid-template-columns: 1fr 1fr; }
}

.ct-branch[b-a4u7yloa3j] {
    padding: .75rem .85rem;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--card);
}

.ct-branch p:last-child[b-a4u7yloa3j] { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

.ct-branch-tag[b-a4u7yloa3j] {
    margin: 0 0 .1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ct-branch-auto[b-a4u7yloa3j] { border-left: 3px solid var(--brand); }
.ct-branch-auto .ct-branch-tag[b-a4u7yloa3j] { color: var(--brand-strong); }
.ct-branch-human[b-a4u7yloa3j] { border-left: 3px solid #a8741f; }
.ct-branch-human .ct-branch-tag[b-a4u7yloa3j] { color: #8a5f16; }

.ct-route-foot[b-a4u7yloa3j] { margin: .9rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* ---------------------------------------------------------------- direct routes */
.ct-direct[b-a4u7yloa3j] {
    margin-top: 1rem;
    padding: clamp(1rem, 2.4vw, 1.35rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--card);
}

.ct-direct-list[b-a4u7yloa3j] { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.ct-direct-list a[b-a4u7yloa3j] {
    display: block;
    padding: .5rem .6rem;
    margin-inline: -.6rem;
    border-radius: 8px;
    text-decoration: none;
}

.ct-direct-list a:hover[b-a4u7yloa3j] { background: var(--wash); }
.ct-direct-list b[b-a4u7yloa3j] { display: block; color: var(--ink); font-size: .93rem; }
.ct-direct-list span[b-a4u7yloa3j] { display: block; color: var(--muted); font-size: .85rem; }

/* ---------------------------------------------------------------- success state */
.ct-done[b-a4u7yloa3j] {
    padding: clamp(1.25rem, 3vw, 1.9rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.ct-tick[b-a4u7yloa3j] { width: 46px; height: 46px; }
.ct-tick-ring[b-a4u7yloa3j] { fill: none; stroke: color-mix(in srgb, var(--brand) 35%, transparent); stroke-width: 2; }

.ct-tick-mark[b-a4u7yloa3j] {
    fill: none;
    stroke: var(--brand-strong);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 0;
}

.ct-done-h[b-a4u7yloa3j] { margin: .5rem 0 .2rem; font-size: clamp(1.4rem, 4vw, 1.85rem); }
.ct-done-sub[b-a4u7yloa3j] { margin: 0 0 1.1rem; color: var(--muted); }

.ct-done-steps[b-a4u7yloa3j] { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.ct-done-steps li[b-a4u7yloa3j] { display: flex; gap: .7rem; align-items: flex-start; }
.ct-done-steps span:last-child[b-a4u7yloa3j] { color: var(--muted); font-size: .92rem; line-height: 1.55; }

.ct-done-actions[b-a4u7yloa3j] { display: flex; flex-wrap: wrap; gap: .6rem; }
.ct-done-note[b-a4u7yloa3j] { margin: .9rem 0 0; }

/* Draw the mark once, then illuminate the three next-step nodes left to right. Both fire on a
   server-rendered state, both stop, neither loops — the task is finished, so the motion confirms
   completion rather than decorating it. Total under 700ms. */
@media (prefers-reduced-motion: no-preference) {
    .ct-tick-mark[b-a4u7yloa3j] {
        stroke-dashoffset: 40;
        animation: ct-draw-b-a4u7yloa3j 420ms cubic-bezier(.65, 0, .35, 1) 60ms forwards;
    }

    .ct-tick-ring[b-a4u7yloa3j] { animation: ct-fade-b-a4u7yloa3j 320ms ease forwards; }

    .ct-done-h[b-a4u7yloa3j], .ct-done-sub[b-a4u7yloa3j] { animation: ct-rise-b-a4u7yloa3j 380ms ease 200ms both; }

    .ct-done-steps li .ct-n[b-a4u7yloa3j] {
        border-color: var(--brand-strong);
        animation: ct-light-b-a4u7yloa3j 260ms ease both;
    }

    .ct-done-steps li:nth-child(1) .ct-n[b-a4u7yloa3j] { animation-delay: 300ms; }
    .ct-done-steps li:nth-child(2) .ct-n[b-a4u7yloa3j] { animation-delay: 420ms; }
    .ct-done-steps li:nth-child(3) .ct-n[b-a4u7yloa3j] { animation-delay: 540ms; }
}

@keyframes ct-draw-b-a4u7yloa3j { to { stroke-dashoffset: 0; } }
@keyframes ct-fade-b-a4u7yloa3j { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-rise-b-a4u7yloa3j { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ct-light-b-a4u7yloa3j {
    from { background: var(--card); color: var(--brand-strong); }
    to { background: var(--brand-strong); color: #fff; }
}

/* ---------------------------------------------------------------- you may not need to wait */
.ct-self h2[b-a4u7yloa3j] { margin: 0; font-size: clamp(1.35rem, 3.5vw, 1.9rem); }
.ct-self-sub[b-a4u7yloa3j] { margin: .4rem 0 1.4rem; color: var(--muted); max-width: 60ch; }

.ct-self-grid[b-a4u7yloa3j] { display: grid; gap: .7rem; }

@media (min-width: 44rem) { .ct-self-grid[b-a4u7yloa3j] { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .ct-self-grid[b-a4u7yloa3j] { grid-template-columns: repeat(3, 1fr); } }

.ct-self-card[b-a4u7yloa3j] {
    display: block;
    padding: .95rem 1.05rem;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--card);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ct-self-card:hover[b-a4u7yloa3j] {
    border-color: var(--brand);
    box-shadow: var(--shadow-1);
}

@media (prefers-reduced-motion: no-preference) {
    .ct-self-card:hover[b-a4u7yloa3j] { transform: translateY(-2px); }
}

.ct-self-card small[b-a4u7yloa3j] {
    display: block;
    margin-bottom: .3rem;
    color: var(--brand-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .69rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ct-self-card b[b-a4u7yloa3j] { display: block; color: var(--ink); font-size: .98rem; line-height: 1.35; }
.ct-self-card span[b-a4u7yloa3j] { display: block; margin-top: .3rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }

.ct-self-foot[b-a4u7yloa3j] {
    margin: 1.1rem 0 0;
    max-width: 70ch;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

/* Sole occupant of the column on the success state. */
.ct-side > .ct-direct:first-child[b-a4u7yloa3j] { margin-top: 0; }
/* /Components/Pages/FixSimulator.razor.rz.scp.css */
/* Fix Simulator — the tool's "measurement instrument" CSS, themed onto the PageSpeedAudit light
   palette. The :root variables are remapped onto site tokens on the .fsim wrapper; --ink/--line/
   --warn/--bad intentionally inherit the site's (same roles). Global resets/masthead/body from the
   original are dropped (the site layout owns those); the colliding .panel/.field/.cta are prefixed. */
.fsim[b-neisnn09iu] {
    --ink-2:      var(--muted);
    --ink-3:      #8a9b91;
    --canvas:     var(--paper);
    --paper:      var(--card);
    --paper-2:    var(--wash);
    --line-2:     var(--line);

    --signal:     var(--brand);
    --signal-2:   var(--brand-strong);
    --signal-bg:  var(--brand-wash);
    --warn-bg:    #f6ecd6;
    --bad-bg:     #fbe7e5;
    --flat:       var(--muted);
    --flat-bg:    var(--wash);

    --radius:     var(--radius);
    --radius-sm:  var(--radius-sm);
    --shadow:     0 1px 2px rgba(13,33,23,.04), 0 8px 28px -18px rgba(13,33,23,.22);

    --display: var(--font-display);
    --body: var(--font-body);
    --mono: var(--font-mono);

    font-family: var(--body);
}
.fsim em[b-neisnn09iu] { font-style: normal; }
.fsim .hero h1[b-neisnn09iu] { max-width: 16ch; }
.fsim .lede em[b-neisnn09iu] { color: var(--signal-2); font-weight: 500; }

/* ---- Panels & fields ---- */
.fs-panel[b-neisnn09iu] {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(18px, 3.5vw, 26px); margin-bottom: 18px;
}
.panel-head[b-neisnn09iu] { margin-bottom: 16px; }
.panel-head h2[b-neisnn09iu], .results-head h2[b-neisnn09iu] {
    font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0 0 4px;
}
.panel-sub[b-neisnn09iu], .field-hint[b-neisnn09iu] { color: var(--ink-3); font-size: 13.5px; margin: 0; }
.panel-sub em[b-neisnn09iu] { color: var(--ink-2); }

.fs-field[b-neisnn09iu] { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.fs-field:last-child[b-neisnn09iu] { margin-bottom: 0; }
.fs-field label[b-neisnn09iu] {
    font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em;
    display: flex; align-items: baseline; gap: 8px;
}
.label-aside[b-neisnn09iu] {
    font-family: var(--mono); font-weight: 500; font-size: 10.5px; color: var(--ink-3);
    letter-spacing: .04em; text-transform: uppercase;
}

.fsim input[type="url"][b-neisnn09iu] {
    font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--paper-2);
    border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 13px 14px; width: 100%;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.fsim input[type="url"][b-neisnn09iu]::placeholder { color: var(--ink-3); }
.fsim input[type="url"]:focus[b-neisnn09iu] {
    outline: none; background: var(--paper); border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-bg);
}
.field-hint[b-neisnn09iu] { margin-top: 1px; }
.field-row[b-neisnn09iu] { display: flex; gap: 22px; flex-wrap: wrap; }
.field-row .fs-field[b-neisnn09iu] { flex: 1 1 200px; margin-bottom: 18px; }

.segmented[b-neisnn09iu] { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.seg[b-neisnn09iu] {
    font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-2); background: transparent;
    border: none; border-radius: 5px; padding: 7px 16px; cursor: pointer; transition: background .12s, color .12s;
}
.seg:hover[b-neisnn09iu] { color: var(--ink); }
.seg-on[b-neisnn09iu] { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(13,33,23,.25); }
.seg-on:hover[b-neisnn09iu] { color: #fff; }

.fs-cta[b-neisnn09iu] {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 600; font-size: 15px; color: #fff; background: var(--brand);
    border: none; border-radius: var(--radius-sm); padding: 14px 24px; width: 100%; cursor: pointer; margin-top: 4px;
    transition: transform .08s, background .15s, box-shadow .15s; box-shadow: 0 1px 2px rgba(13,33,23,.2);
}
.fs-cta:hover:not(:disabled)[b-neisnn09iu] { background: var(--brand-strong); box-shadow: 0 6px 20px -10px rgba(13,33,23,.45); }
.fs-cta:active:not(:disabled)[b-neisnn09iu] { transform: translateY(1px); }
.fs-cta:disabled[b-neisnn09iu] { background: var(--line-2); color: #fff; cursor: not-allowed; box-shadow: none; }
.cta-note[b-neisnn09iu] { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; max-width: 60ch; }

.form-error[b-neisnn09iu] { color: var(--bad); font-size: 13px; font-weight: 500; margin: 0 0 14px; }

.ghost[b-neisnn09iu] {
    font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink-2); background: transparent;
    border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 14px; cursor: pointer; transition: border-color .12s, color .12s;
}
.ghost:hover[b-neisnn09iu] { color: var(--ink); border-color: var(--ink-3); }

.run-context[b-neisnn09iu] {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 18px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.rc-url[b-neisnn09iu] { font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.rc-meta[b-neisnn09iu] { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); display: flex; gap: 7px; flex: 0 0 auto; }
.rc-meta .dot[b-neisnn09iu] { opacity: .5; }

.notice[b-neisnn09iu] { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.notice p[b-neisnn09iu] { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.notice code[b-neisnn09iu] { font-family: var(--mono); font-size: 12px; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); }
.notice-key[b-neisnn09iu] { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; margin-top: 1px; }
.notice-info .notice-key[b-neisnn09iu] { background: var(--flat-bg); color: var(--ink-2); }
.notice-warn[b-neisnn09iu] { border-color: #ecd9b4; background: var(--warn-bg); }
.notice-warn .notice-key[b-neisnn09iu] { background: var(--warn); color: #fff; }
.notice-block[b-neisnn09iu] { border-color: #efc9c4; background: var(--bad-bg); }
.notice-block .notice-key[b-neisnn09iu] { background: var(--bad); color: #fff; }

.progress-head[b-neisnn09iu] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.progress-stage[b-neisnn09iu] { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.progress-pct[b-neisnn09iu] { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter[b-neisnn09iu] { height: 6px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.meter-fill[b-neisnn09iu] { height: 100%; background: linear-gradient(90deg, var(--signal-2), var(--signal)); border-radius: 100px; transition: width .4s cubic-bezier(.4,0,.1,1); }
.progress-label[b-neisnn09iu] { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; }

.changes[b-neisnn09iu] { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.change[b-neisnn09iu] { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .12s, background .12s; }
.change:hover[b-neisnn09iu] { border-color: var(--line-2); background: var(--paper-2); }
.change-on[b-neisnn09iu] { border-color: var(--signal); background: var(--signal-bg); box-shadow: 0 0 0 1px var(--signal) inset; }
.change-on:hover[b-neisnn09iu] { background: var(--signal-bg); }
.change input[type="checkbox"][b-neisnn09iu] { width: 17px; height: 17px; accent-color: var(--signal); flex: 0 0 auto; cursor: pointer; }
.change-body[b-neisnn09iu] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.change-label[b-neisnn09iu] { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.change-detail[b-neisnn09iu] { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.change-claim[b-neisnn09iu] { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid #ecd9b4; padding: 4px 9px; border-radius: 100px; }

.nonsim[b-neisnn09iu] { border-top: 1px dashed var(--line-2); padding-top: 16px; margin-bottom: 18px; }
.nonsim-key[b-neisnn09iu] { font-size: 12.5px; color: var(--ink-3); display: block; margin-bottom: 10px; }
.nonsim ul[b-neisnn09iu] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.nonsim li[b-neisnn09iu] { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; font-size: 13px; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line); }
.nonsim li:last-child[b-neisnn09iu] { border-bottom: none; }
.nonsim-label[b-neisnn09iu] { font-weight: 600; color: var(--ink); }
.nonsim-reason[b-neisnn09iu] { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
.nonsim-claim[b-neisnn09iu] { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.results[b-neisnn09iu] { margin-top: 4px; }
.results-head[b-neisnn09iu] { margin: 26px 0 14px; }
.results-head:first-child[b-neisnn09iu] { margin-top: 0; }

.calib[b-neisnn09iu] { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--flat); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 14px; }
.calib-overclaim[b-neisnn09iu] { border-left-color: var(--warn); }
.calib-match[b-neisnn09iu], .calib-underclaim[b-neisnn09iu] { border-left-color: var(--signal); }
.calib-unverifiable[b-neisnn09iu] { border-left-color: var(--flat); border-style: dashed; }
.calib-head[b-neisnn09iu] { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.calib-head h3[b-neisnn09iu] { font-family: var(--display); font-weight: 600; font-size: 16.5px; margin: 0; letter-spacing: -.01em; }
.calib-verdict[b-neisnn09iu] { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 100px; }
.calib-overclaim .calib-verdict[b-neisnn09iu] { color: var(--warn); background: var(--warn-bg); }
.calib-match .calib-verdict[b-neisnn09iu], .calib-underclaim .calib-verdict[b-neisnn09iu] { color: var(--signal-2); background: var(--signal-bg); }
.calib-track[b-neisnn09iu] { display: flex; flex-direction: column; gap: 10px; }
.calib-row[b-neisnn09iu] { display: grid; grid-template-columns: 116px 1fr 88px; align-items: center; gap: 14px; }
.calib-tag[b-neisnn09iu] { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.bar[b-neisnn09iu] { height: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.bar-fill[b-neisnn09iu] { height: 100%; border-radius: 4px 0 0 4px; transition: width .7s cubic-bezier(.34,1.2,.4,1); }
.bar-claim .bar-fill[b-neisnn09iu] { background: repeating-linear-gradient(135deg, var(--warn) 0 6px, #c08a36 6px 12px); }
.bar-measured .bar-fill[b-neisnn09iu] { background: linear-gradient(90deg, var(--signal-2), var(--signal)); }
.calib-num[b-neisnn09iu] { font-family: var(--mono); font-size: 14px; font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.calib-note[b-neisnn09iu] { font-size: 13.5px; color: var(--ink-2); margin: 16px 0 0; line-height: 1.55; }

.comp[b-neisnn09iu] { margin-top: 18px; }
.comp-grid[b-neisnn09iu] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.comp-cell[b-neisnn09iu] { background: var(--paper); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.comp-k[b-neisnn09iu] { font-size: 11.5px; color: var(--ink-3); }
.comp-v[b-neisnn09iu] { font-family: var(--mono); font-size: 21px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.comp-overlap[b-neisnn09iu] { color: var(--warn); }
.comp-note[b-neisnn09iu] { font-size: 13.5px; color: var(--ink-2); margin: 14px 0 0; }

.arm[b-neisnn09iu] { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px; }
.arm-head[b-neisnn09iu] { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.arm-head h3[b-neisnn09iu] { font-family: var(--display); font-weight: 600; font-size: 15.5px; margin: 0; }
.arm-failed[b-neisnn09iu] { font-family: var(--mono); font-size: 11px; color: var(--bad); }

.metric-table[b-neisnn09iu] { font-family: var(--mono); font-size: 12.5px; }
.mt-head[b-neisnn09iu], .mt-row[b-neisnn09iu] { display: grid; grid-template-columns: 1.3fr .9fr .9fr .9fr .9fr 1.5fr; align-items: center; gap: 8px; }
.mt-head[b-neisnn09iu] { color: var(--ink-3); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 0 0 9px; border-bottom: 1px solid var(--line); }
.mt-row[b-neisnn09iu] { padding: 9px 0; border-bottom: 1px solid var(--paper-2); }
.mt-row:last-child[b-neisnn09iu] { border-bottom: none; }
.mt-metric[b-neisnn09iu] { font-family: var(--body); font-weight: 600; font-size: 13px; color: var(--ink); }
.mt-num[b-neisnn09iu] { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mt-delta[b-neisnn09iu] { font-weight: 600; }
.mt-delta.pos[b-neisnn09iu] { color: var(--signal-2); }
.mt-delta.neg[b-neisnn09iu] { color: var(--bad); }
.mt-floor[b-neisnn09iu] { color: var(--ink-3); }
.mt-verdict[b-neisnn09iu] { text-align: right; }

.chip[b-neisnn09iu] { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 100px; white-space: nowrap; }
.chip-good[b-neisnn09iu] { color: var(--signal-2); background: var(--signal-bg); }
.chip-bad[b-neisnn09iu] { color: var(--bad); background: var(--bad-bg); }
.chip-flat[b-neisnn09iu] { color: var(--warn); background: var(--warn-bg); }
.chip-unknown[b-neisnn09iu] { color: var(--ink-2); background: var(--flat-bg); }

.tracks[b-neisnn09iu] { margin-top: 2px; }

.synthesis[b-neisnn09iu] { font-size: 14.5px; color: var(--ink); line-height: 1.55; margin: 0 0 18px; }

details.advanced[b-neisnn09iu] { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
details.detail[b-neisnn09iu] { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
details.advanced > summary[b-neisnn09iu], details.detail > summary[b-neisnn09iu] { cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: .03em; list-style: none; user-select: none; }
.fsim details > summary[b-neisnn09iu]::-webkit-details-marker { display: none; }
details.advanced > summary[b-neisnn09iu]::before, details.detail > summary[b-neisnn09iu]::before { content: "+ "; color: var(--ink-3); }
details[open].advanced > summary[b-neisnn09iu]::before, details[open].detail > summary[b-neisnn09iu]::before { content: "– "; }
details.detail .metric-table[b-neisnn09iu] { margin-top: 14px; }

.fsim code[b-neisnn09iu] { font-family: var(--mono); }

@media (max-width: 560px) {
    .calib-row[b-neisnn09iu] { grid-template-columns: 92px 1fr 72px; gap: 9px; }
    .calib-tag[b-neisnn09iu] { font-size: 10px; }
    .comp-grid[b-neisnn09iu] { grid-template-columns: 1fr; }
    .mt-head[b-neisnn09iu], .mt-row[b-neisnn09iu] { grid-template-columns: 1.2fr .9fr .9fr 1.4fr; }
    .mt-head span:nth-child(5)[b-neisnn09iu], .mt-row .mt-floor[b-neisnn09iu],
    .mt-head span:nth-child(2)[b-neisnn09iu], .mt-row span:nth-child(2)[b-neisnn09iu] { display: none; }
    .field-row[b-neisnn09iu] { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .fsim *[b-neisnn09iu], .fsim *[b-neisnn09iu]::before, .fsim *[b-neisnn09iu]::after { animation: none !important; transition: none !important; }
}

/* ---- CrUX field data, run provenance, and PSI diagnostics (read-only context) ---- */
.rating[b-neisnn09iu] { font-weight: 600; }
.rating-good[b-neisnn09iu] { color: var(--signal-2); }
.rating-ni[b-neisnn09iu]   { color: var(--warn); }
.rating-poor[b-neisnn09iu] { color: var(--bad); }
.rating-flat[b-neisnn09iu] { color: var(--ink-3); }

.field-data[b-neisnn09iu] { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.fd-row[b-neisnn09iu] { display: flex; flex-direction: column; gap: 7px; background: var(--paper); padding: 11px 14px; }
.fd-head[b-neisnn09iu] { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; }
.fd-metric[b-neisnn09iu] { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fd-value[b-neisnn09iu] { font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.fd-cat[b-neisnn09iu] { font-size: 10.5px; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.fd-cat.rating-good[b-neisnn09iu] { background: var(--signal-bg); }
.fd-cat.rating-ni[b-neisnn09iu]   { background: var(--warn-bg); }
.fd-cat.rating-poor[b-neisnn09iu] { background: var(--bad-bg); }
.fd-cat.rating-flat[b-neisnn09iu] { background: var(--flat-bg); }
.fd-dist[b-neisnn09iu] { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--flat-bg); }
.fd-seg[b-neisnn09iu] { height: 100%; }
.fd-seg.fd-good[b-neisnn09iu] { background: var(--signal-2); }
.fd-seg.fd-ni[b-neisnn09iu]   { background: var(--warn); }
.fd-seg.fd-poor[b-neisnn09iu] { background: var(--bad); }

.run-meta[b-neisnn09iu] { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: -8px 2px 16px; }

.diag[b-neisnn09iu] { margin: 4px 0 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.diag > summary[b-neisnn09iu] { cursor: pointer; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); list-style: none; }
.diag > summary[b-neisnn09iu]::-webkit-details-marker { display: none; }
.diag > summary[b-neisnn09iu]::before { content: "▸ "; color: var(--ink-3); }
.diag[open] > summary[b-neisnn09iu]::before { content: "▾ "; }
.diag-body[b-neisnn09iu] { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--line); }
.diag-row[b-neisnn09iu] { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 14px; }
.diag-title[b-neisnn09iu] { font-size: 12.5px; color: var(--ink-2); }
.diag-val[b-neisnn09iu] { font-family: var(--mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- "How loading actually changed" wrapper (the TimelineCompare component styles itself) ---- */
.tlc-section-head[b-neisnn09iu] { margin-top: 36px; }
.tlc-wrap[b-neisnn09iu] { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); margin-bottom: 12px; }
.tlc-wrap > summary[b-neisnn09iu] { cursor: pointer; padding: 13px 16px; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); list-style: none; }
.tlc-wrap > summary[b-neisnn09iu]::-webkit-details-marker { display: none; }
.tlc-wrap > summary[b-neisnn09iu]::before { content: "▸"; color: var(--ink-3); margin-right: 9px; font-size: 11px; }
.tlc-wrap[open] > summary[b-neisnn09iu]::before { content: "▾"; }
/* /Components/Pages/Framework.razor.rz.scp.css */
/* Framework page — the explanatory visual system layered onto the site design tokens.
   Rules of the house apply: light-only, site palette, Space Grotesk display face, no external
   assets. All interactivity is progressive enhancement — `.js` lands on <html> from
   /js/framework.js, so without JavaScript every element below renders in its final, legible
   state. Dark panels use literal deep-green values (the site's dark-section family). */

/* ---------- shared figure grammar ---------- */
.fw-figure[b-99ob93wowg] { margin: 2rem 0; padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1); }
.fw-figure-head[b-99ob93wowg] { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.fw-figure-head h3[b-99ob93wowg], .fw-figure-head h4[b-99ob93wowg] { font-size: 1.12rem; margin: 0; }
.fw-figure-head p[b-99ob93wowg] { margin: 0; font-size: .82rem; color: var(--muted); max-width: 35ch; text-align: right; }
.fw-figcaption[b-99ob93wowg] { margin: .85rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.fw-reveal[b-99ob93wowg] { opacity: 1; transform: none; }
html.js .fw-reveal[b-99ob93wowg] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
html.js .fw-reveal.is-visible[b-99ob93wowg] { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.fw-hero-grid[b-99ob93wowg] { display: grid; grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.fw-hero-art[b-99ob93wowg] { position: relative; min-height: 570px; border-radius: 22px; background: radial-gradient(32rem 22rem at 50% -8%, rgb(141 240 166 / .14), transparent 62%), linear-gradient(180deg, #0e2418, #08170f); border: 1px solid #214533; box-shadow: 0 32px 70px -38px rgb(4 26 14 / .7); overflow: hidden; color: #f2f8f4; }
.fw-hero-art[b-99ob93wowg]::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(141 240 166 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(141 240 166 / .05) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.fw-art-top[b-99ob93wowg] { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: .95rem 1.1rem; border-bottom: 1px solid #254734; font-size: .74rem; color: #b6cbbd; letter-spacing: .04em; }
.fw-art-status[b-99ob93wowg] { display: inline-flex; align-items: center; gap: .45rem; }
.fw-art-status i[b-99ob93wowg] { width: 7px; height: 7px; border-radius: 50%; background: var(--signal, #8df0a6); box-shadow: 0 0 0 5px rgb(141 240 166 / .09); }
.fw-case-file[b-99ob93wowg] { position: absolute; z-index: 2; left: 26px; top: 70px; width: 240px; padding: .95rem; border-radius: 14px; background: #f9fcfa; color: var(--ink); box-shadow: 0 22px 50px -28px #000; border: 1px solid #cbdad1; transform: rotate(-1.2deg); }
.fw-case-label[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: .6rem; }
.fw-case-head[b-99ob93wowg] { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.fw-score-bubble[b-99ob93wowg] { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 6px solid #c67a22; color: #8a5508; font-family: var(--font-display); font-weight: 700; background: #fff8ef; }
.fw-case-copy[b-99ob93wowg] { font-size: .74rem; color: var(--muted); line-height: 1.35; text-align: right; }
.fw-warning-list[b-99ob93wowg] { display: grid; gap: 5px; }
.fw-warning-row[b-99ob93wowg] { position: relative; display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; min-height: 21px; padding: 3px 5px; border-radius: 6px; background: #eef2ef; font-size: .68rem; line-height: 1.2; transition: opacity .28s ease, transform .35s ease, background .35s ease; }
.fw-warning-row[b-99ob93wowg]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ca7a1d; }
.fw-warning-row b[b-99ob93wowg] { font-size: .62rem; color: var(--muted); font-weight: 600; }
.fw-warning-row.is-muted[b-99ob93wowg] { opacity: .3; transform: translateX(-5px); }
.fw-warning-row.is-real[b-99ob93wowg] { background: #dff3e6; box-shadow: inset 3px 0 0 var(--brand); }
.fw-warning-row.is-real[b-99ob93wowg]::before { background: var(--brand); }
.fw-warning-row.is-active[b-99ob93wowg] { background: #fff3ce; transform: translateX(3px); }
.fw-hero-art-wrap[b-99ob93wowg] { position: relative; container-type: inline-size; }
.fw-hero-art-wrap > .fw-replay[b-99ob93wowg] { position: absolute; z-index: 6; right: 12px; top: 52px; }
.fw-adjudicate[b-99ob93wowg] { position: absolute; z-index: 3; left: 282px; right: 22px; top: 96px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 12px; align-items: start; }
.fw-gate-flow[b-99ob93wowg] { display: grid; gap: 13px; margin-top: 10px; }
.fw-gate[b-99ob93wowg] { position: relative; padding: .68rem .68rem .68rem 1.75rem; border: 1px solid #335745; border-radius: 11px; background: rgb(16 45 29 / .88); font-size: .74rem; font-weight: 700; color: #f2f8f4; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.fw-gate[b-99ob93wowg]::before { content: ""; position: absolute; left: .68rem; top: 50%; translate: 0 -50%; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #73907f; }
.fw-gate[b-99ob93wowg]::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: #335745; }
.fw-gate:last-child[b-99ob93wowg]::after { display: none; }
.fw-gate.is-active[b-99ob93wowg] { border-color: var(--signal, #8df0a6); background: rgb(31 77 48 / .96); transform: translateX(4px); }
.fw-gate.is-active[b-99ob93wowg]::before { background: var(--signal, #8df0a6); border-color: var(--signal, #8df0a6); }
.fw-verdict-stack[b-99ob93wowg] { display: grid; gap: 8px; }
.fw-stamp[b-99ob93wowg] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 52px; padding: .65rem .78rem; border: 1px solid #335745; border-radius: 12px; background: rgb(9 30 18 / .74); font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: #b6cbbd; transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease; }
.fw-stamp span[b-99ob93wowg] { font-size: .68rem; font-weight: 600; color: #87a493; }
.fw-stamp.is-active[b-99ob93wowg] { transform: scale(1.04); background: #153d27; border-color: var(--signal, #8df0a6); color: var(--signal, #8df0a6); }
.fw-stamp.is-real[b-99ob93wowg] { background: linear-gradient(135deg, #185b35, var(--brand)); border-color: #4ca46b; color: #fff; }
.fw-hero-outcome[b-99ob93wowg] { position: absolute; z-index: 4; left: 26px; right: 22px; bottom: 22px; display: grid; grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: 14px; }
.fw-outcome[b-99ob93wowg] { padding: .9rem; border: 1px solid #315440; border-radius: 13px; background: rgb(8 28 17 / .78); }
.fw-outcome b[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: 1.6rem; color: #f2f8f4; line-height: 1; }
.fw-outcome span[b-99ob93wowg] { display: block; margin-top: .3rem; font-size: .72rem; color: #b6cbbd; }
.fw-outcome-arrow[b-99ob93wowg] { color: var(--signal, #8df0a6); font-size: 1.5rem; }
.fw-outcome.after[b-99ob93wowg] { border-color: #2d7250; background: linear-gradient(135deg, rgb(16 61 37 / .95), rgb(8 38 23 / .92)); }
.fw-outcome.after b[b-99ob93wowg] { color: var(--signal, #8df0a6); }
.fw-silent-signal[b-99ob93wowg] { position: absolute; z-index: 5; right: 30px; bottom: 122px; width: 250px; padding: .75rem .8rem .75rem 2.55rem; border: 1px dashed #d9944c; border-radius: 12px; background: #2a1f14; color: #ffe2bd; font-size: .74rem; line-height: 1.35; transition: opacity .45s ease, transform .45s ease; }
html.js .fw-silent-signal[b-99ob93wowg] { opacity: 0; transform: translateY(14px); }
html.js .fw-silent-signal.is-visible[b-99ob93wowg] { opacity: 1; transform: none; }
.fw-silent-signal[b-99ob93wowg]::before { content: "!"; position: absolute; left: .8rem; top: 50%; translate: 0 -50%; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #b66a1a; color: #fff; font-weight: 800; }
.fw-replay[b-99ob93wowg] { border: 1px solid #315440; background: rgb(8 28 17 / .75); color: #b6cbbd; border-radius: 999px; padding: .38rem .7rem; font-size: .72rem; font-weight: 700; cursor: pointer; }
html:not(.js) .fw-replay[b-99ob93wowg] { display: none; }
.fw-replay:hover[b-99ob93wowg] { border-color: var(--signal, #8df0a6); color: var(--signal, #8df0a6); }

/* ---------- reading shell + chapter rail ---------- */
.fw-shell[b-99ob93wowg] { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start; }
.fw-rail[b-99ob93wowg] { position: sticky; top: 84px; }
.fw-rail-title[b-99ob93wowg] { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.fw-rail-list[b-99ob93wowg] { position: relative; display: grid; gap: 4px; margin: 0; padding: 0 0 0 17px; list-style: none; }
.fw-rail-list[b-99ob93wowg]::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.fw-rail-list a[b-99ob93wowg] { position: relative; display: block; padding: .42rem .55rem; color: var(--muted); font-size: .82rem; line-height: 1.25; text-decoration: none; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.fw-rail-list a[b-99ob93wowg]::before { content: ""; position: absolute; left: -16px; top: 50%; translate: 0 -50%; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); }
.fw-rail-list a:hover[b-99ob93wowg] { background: var(--wash); color: var(--ink); }
.fw-rail-list a.is-active[b-99ob93wowg] { background: var(--brand-strong); color: #fff; }
.fw-rail-list a.is-active[b-99ob93wowg]::before { background: var(--signal, #8df0a6); border-color: var(--brand-strong); }
.fw-main[b-99ob93wowg] { min-width: 0; }
.fw-chapter-head[b-99ob93wowg] { margin: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2rem); }
.fw-chapter-head:first-child[b-99ob93wowg] { margin-top: 0; }
.fw-chapter-kicker[b-99ob93wowg] { display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-strong); margin: 0 0 .6rem; }
.fw-chapter-kicker[b-99ob93wowg]::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 3px; }

/* ---------- framework map ---------- */
.fw-map[b-99ob93wowg] { padding: clamp(1rem, 2vw, 1.4rem); border-radius: var(--radius); background: linear-gradient(180deg, var(--card), #f5faf7); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.fw-map-title[b-99ob93wowg] { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: .3rem .3rem 1rem; border-bottom: 1px solid var(--line); }
.fw-map-title h3[b-99ob93wowg] { font-size: 1.15rem; margin: 0; }
.fw-map-title p[b-99ob93wowg] { margin: 0; font-size: .8rem; color: var(--muted); max-width: 37ch; text-align: right; }
.fw-map-grid[b-99ob93wowg] { display: grid; grid-template-columns: 185px 185px 1fr; gap: clamp(1rem, 3vw, 2.25rem); align-items: center; padding: 1.6rem .25rem 0; }
.fw-map-box[b-99ob93wowg] { position: relative; padding: .95rem; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-1); }
.fw-map-box h4[b-99ob93wowg] { margin: 0 0 .35rem; font-size: .95rem; }
.fw-map-box p[b-99ob93wowg] { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.fw-map-report[b-99ob93wowg]::after, .fw-map-gates[b-99ob93wowg]::after { content: ""; position: absolute; left: 100%; top: 50%; width: clamp(1rem, 3vw, 2.25rem); border-top: 2px solid var(--brand); translate: 0 -50%; }
.fw-map-gates[b-99ob93wowg] { display: grid; gap: 8px; background: #0e2418; border-color: #173425; }
.fw-map-gates h4[b-99ob93wowg] { color: #f2f8f4; }
.fw-map-gate[b-99ob93wowg] { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid #315440; border-radius: 9px; background: rgb(255 255 255 / .04); font-size: .76rem; color: #f2f8f4; }
.fw-map-gate i[b-99ob93wowg] { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 7px; background: var(--signal, #8df0a6); color: #06371f; font-style: normal; font-weight: 800; font-size: .72rem; }
.fw-map-outcomes[b-99ob93wowg] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.fw-map-verdict[b-99ob93wowg] { min-height: 100px; padding: .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.fw-map-verdict b[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: .95rem; }
.fw-map-verdict span[b-99ob93wowg] { display: block; margin-top: .28rem; font-size: .72rem; color: var(--muted); line-height: 1.35; }
.fw-map-verdict.real[b-99ob93wowg] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.fw-map-verdict.real b[b-99ob93wowg] { color: var(--signal, #8df0a6); }
.fw-map-verdict.real span[b-99ob93wowg] { color: #c5dbce; }
.fw-map-unresolved[b-99ob93wowg] { margin: .8rem .25rem 0; padding: .6rem .75rem; border: 1px dashed var(--line); border-radius: 10px; font-size: .78rem; color: var(--muted); background: var(--wash); }
.fw-map-silence[b-99ob93wowg] { display: grid; grid-template-columns: 185px 1fr; gap: clamp(1rem, 3vw, 2.25rem); align-items: center; margin: 1.1rem .25rem 0; }
.fw-map-silence .fw-map-box[b-99ob93wowg] { border: 1.5px dashed #c47822; background: #fffaf2; }
.fw-map-silence .fw-map-box[b-99ob93wowg]::after { content: ""; position: absolute; left: 100%; top: 50%; width: clamp(1rem, 3vw, 2.25rem); border-top: 2px dashed #c47822; translate: 0 -50%; }
.fw-silent-output[b-99ob93wowg] { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem; border-radius: 13px; background: #2b2115; color: #ffe5c5; border: 1px solid #87551f; }
.fw-silent-output i[b-99ob93wowg] { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: #b86c1c; color: #fff; font-style: normal; font-weight: 800; }
.fw-silent-output b[b-99ob93wowg] { display: block; font-family: var(--font-display); color: #fff2dc; }
.fw-silent-output span[b-99ob93wowg] { display: block; font-size: .74rem; color: #e7c79f; }
.fw-map-verify[b-99ob93wowg] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 1.1rem .25rem .25rem; }
.fw-verify-step[b-99ob93wowg] { padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: .76rem; }
.fw-verify-step b[b-99ob93wowg] { display: block; font-family: var(--font-display); color: var(--brand-strong); }
.fw-verify-step span[b-99ob93wowg] { color: var(--muted); }

/* ---------- accordions ---------- */
.fw-accordions[b-99ob93wowg] { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.fw-accordions details[b-99ob93wowg] { border-bottom: 1px solid var(--line); }
.fw-accordions summary[b-99ob93wowg] { position: relative; list-style: none; cursor: pointer; padding: 1rem 2.2rem 1rem 0; font-family: var(--font-display); font-weight: 600; min-height: 44px; }
.fw-accordions summary[b-99ob93wowg]::-webkit-details-marker { display: none; }
.fw-accordions summary[b-99ob93wowg]::after { content: "+"; position: absolute; right: .25rem; top: 50%; translate: 0 -50%; font-size: 1.35rem; color: var(--brand); transition: rotate .18s ease; }
.fw-accordions details[open] summary[b-99ob93wowg]::after { rotate: 45deg; }
.fw-accordions summary:hover[b-99ob93wowg] { color: var(--brand-strong); }
.fw-accordions .fw-details-body[b-99ob93wowg] { padding: 0 0 1rem; }
.fw-accordions .fw-details-body p:last-child[b-99ob93wowg] { margin-bottom: 0; }
.fw-blindness-grid[b-99ob93wowg] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1); padding: .5rem 1.25rem; margin: 1.5rem 0; }
.fw-blindness[b-99ob93wowg] { display: grid; grid-template-columns: 56px 1fr; gap: .85rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.fw-blindness:nth-last-child(-n+2)[b-99ob93wowg] { border-bottom: 0; }
.fw-blind-icon[b-99ob93wowg] { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: #fff2e4; color: #9a5b13; border: 1px solid #ebcda7; font-family: var(--font-display); font-weight: 800; }
.fw-blindness h3[b-99ob93wowg] { margin: 0 0 .25rem; font-size: .95rem; }
.fw-blindness p[b-99ob93wowg] { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* ---------- verdict lab ---------- */
.fw-lab[b-99ob93wowg] { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: clamp(1.25rem, 3vw, 2.75rem); align-items: start; margin: 1.5rem 0; }
.fw-sample-list[b-99ob93wowg] { display: grid; gap: 8px; }
.fw-sample-btn[b-99ob93wowg] { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; text-align: left; padding: .8rem .85rem; border: 1px solid var(--line); border-radius: 11px; background: var(--card); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; font: inherit; color: inherit; }
.fw-sample-btn:hover[b-99ob93wowg] { border-color: var(--brand); transform: translateX(2px); }
.fw-sample-btn.is-active[b-99ob93wowg] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.fw-sample-btn b[b-99ob93wowg] { font-size: .84rem; line-height: 1.35; }
.fw-sample-btn span[b-99ob93wowg] { font-size: .68rem; color: var(--muted); }
.fw-sample-btn.is-active span[b-99ob93wowg] { color: #c7dacd; }
.fw-sample-btn[b-99ob93wowg]::after { content: "\203A"; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--brand); line-height: 1; transition: translate .15s ease; }
.fw-sample-btn:hover[b-99ob93wowg]::after { translate: 3px 0; }
.fw-sample-btn.is-active[b-99ob93wowg]::after { content: "\2713"; color: var(--signal, #8df0a6); translate: none; }
html:not(.js) .fw-sample-list[b-99ob93wowg] { display: none; }
.fw-lab-stage[b-99ob93wowg] { position: relative; padding: 1.1rem; border-radius: var(--radius); background: linear-gradient(180deg, #0e2418, #08170f); border: 1px solid #173425; color: #b6cbbd; overflow: hidden; }
.fw-lab-stage[b-99ob93wowg]::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(141 240 166 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(141 240 166 / .05) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; }
.fw-lab-claim[b-99ob93wowg] { position: relative; z-index: 2; padding: .9rem; border: 1px solid #315440; border-radius: 12px; background: rgb(6 25 14 / .66); }
.fw-lab-claim span[b-99ob93wowg] { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--signal, #8df0a6); margin-bottom: .35rem; }
.fw-lab-claim b[b-99ob93wowg] { display: block; color: #f2f8f4; font-family: var(--font-display); font-size: .98rem; }
.fw-lab-gates[b-99ob93wowg] { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: .9rem; }
.fw-lab-gate[b-99ob93wowg] { position: relative; padding: .8rem; border: 1px solid #315440; border-radius: 12px; background: rgb(8 31 18 / .72); opacity: .55; transition: opacity .25s ease, border-color .25s ease, background .25s ease; }
.fw-lab-gate.is-reached[b-99ob93wowg] { opacity: 1; }
.fw-lab-gate.is-stop[b-99ob93wowg] { border-color: #e09545; background: #302317; }
.fw-lab-gate.is-pass[b-99ob93wowg] { border-color: #4d9568; background: #113923; }
html:not(.js) .fw-lab-gate[b-99ob93wowg] { opacity: 1; }
.fw-gate-n[b-99ob93wowg] { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #244b34; color: var(--signal, #8df0a6); font-family: var(--font-display); font-weight: 800; font-size: .78rem; margin-bottom: .55rem; }
.fw-lab-gate h4[b-99ob93wowg] { color: #f2f8f4; margin: 0 0 .35rem; font-size: .92rem; }
.fw-lab-gate p[b-99ob93wowg] { margin: 0; font-size: .74rem; color: #b6cbbd; line-height: 1.45; }
.fw-lab-result[b-99ob93wowg] { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: center; margin-top: .9rem; padding: .85rem; border-radius: 12px; background: #f7fbf8; color: var(--ink); border-left: 5px solid var(--brand); }
.fw-result-stamp[b-99ob93wowg] { display: grid; place-items: center; min-width: 92px; padding: .5rem .7rem; border-radius: 9px; background: var(--brand-strong); color: #fff; font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.fw-lab-result p[b-99ob93wowg] { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ---------- metric pair ---------- */
.fw-metric-pair[b-99ob93wowg] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.fw-metric-card[b-99ob93wowg] { position: relative; min-height: 290px; padding: 1.2rem; border-radius: var(--radius); overflow: hidden; }
.fw-metric-card.noise[b-99ob93wowg] { background: linear-gradient(180deg, #f9fcfa, var(--card)); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.fw-metric-card.silent[b-99ob93wowg] { background: linear-gradient(180deg, #2c2115, #21180f); border: 1px solid #74491c; color: #ffe4c2; }
.fw-metric-card h4[b-99ob93wowg] { font-size: 1.12rem; margin: 0 0 .35rem; }
.fw-metric-card.silent h4[b-99ob93wowg] { color: #fff3df; }
.fw-metric-card > p[b-99ob93wowg] { font-size: .8rem; color: var(--muted); margin: 0; }
.fw-metric-card.silent > p[b-99ob93wowg] { color: #e0bd91; }
.fw-noise-ring[b-99ob93wowg] { width: 168px; height: 168px; margin: 1.1rem auto 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--card) 73%, transparent 74%), conic-gradient(var(--brand-strong) 0 19%, var(--bad) 19% 52.3%, #737869 52.3% 90.4%, #3c4a41 90.4% 100%); box-shadow: inset 0 0 0 1px var(--line); }
.fw-noise-ring b[b-99ob93wowg] { display: block; text-align: center; font-family: var(--font-display); font-size: 2.5rem; color: var(--brand-strong); letter-spacing: -.05em; }
.fw-noise-ring span[b-99ob93wowg] { display: block; text-align: center; font-size: .72rem; color: var(--muted); max-width: 12ch; }
.fw-silent-line[b-99ob93wowg] { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.3rem; height: 118px; }
.fw-silent-line[b-99ob93wowg]::before { content: ""; position: absolute; left: 0; right: 0; top: 63px; border-top: 1px solid #6f4e2d; }
.fw-silent-report[b-99ob93wowg] { position: absolute; left: 0; top: 4px; width: 50%; padding: .55rem; border: 1px solid #5f4329; border-radius: 10px; background: #21180f; font-size: .72rem; color: #d9b98f; line-height: 1.4; }
.fw-silent-spike[b-99ob93wowg] { position: absolute; right: 0; bottom: 0; width: 44%; padding: .6rem; border: 1px solid #bc741f; border-radius: 10px; background: #3b2815; color: #ffe5c5; font-size: .72rem; line-height: 1.4; }
.fw-silent-spike[b-99ob93wowg]::before { content: ""; position: absolute; left: -30px; top: 50%; width: 30px; border-top: 2px dashed #bc741f; }

/* ---------- procedure selector ---------- */
.fw-procedure[b-99ob93wowg] { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0 0; }
.fw-proc-step[b-99ob93wowg] { position: relative; flex: 1 1 128px; min-width: 128px; padding: .8rem 1.5rem .8rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; font: inherit; color: inherit; text-align: left; }
.fw-proc-step:hover[b-99ob93wowg], .fw-proc-step.is-active[b-99ob93wowg] { transform: translateY(-3px); border-color: var(--brand); background: var(--brand-wash); }
.fw-proc-step[b-99ob93wowg]::after { content: "\25BE"; position: absolute; right: .6rem; top: .7rem; font-size: .8rem; color: var(--muted); transition: color .15s ease, translate .15s ease; }
.fw-proc-step:hover[b-99ob93wowg]::after { color: var(--brand); translate: 0 2px; }
.fw-proc-step.is-active[b-99ob93wowg]::after { color: var(--brand-strong); translate: 0 2px; }
.fw-proc-step b[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: .78rem; line-height: 1.25; }
.fw-proc-step span[b-99ob93wowg] { display: block; margin-top: .3rem; font-size: .7rem; color: var(--muted); }
html:not(.js) .fw-procedure[b-99ob93wowg] { display: none; }
.fw-proc-details[b-99ob93wowg] { margin-top: 1rem; display: grid; gap: .75rem; }
.fw-proc-detail[b-99ob93wowg] { padding: 1rem 1.1rem; border-left: 4px solid var(--brand); background: var(--card); border-radius: 0 12px 12px 0; box-shadow: var(--shadow-1); font-size: .88rem; }
html.js .fw-proc-detail:not(.is-active)[b-99ob93wowg] { display: none; }

/* ---------- evidence ladder ---------- */
.fw-ladder[b-99ob93wowg] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.fw-stage[b-99ob93wowg] { position: relative; padding: 1.15rem 1.15rem 1.4rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.fw-stage[b-99ob93wowg]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--line); }
.fw-stage:nth-child(1)[b-99ob93wowg]::after { background: #b9d9c5; }
.fw-stage:nth-child(2)[b-99ob93wowg]::after { background: #58a874; }
.fw-stage:nth-child(3)[b-99ob93wowg]::after { background: var(--brand-strong); }
.fw-stage-kicker[b-99ob93wowg] { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fw-stage-kicker i[b-99ob93wowg] { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--wash); font-style: normal; color: var(--brand-strong); font-family: var(--font-display); font-weight: 800; }
.fw-stage h4[b-99ob93wowg] { margin: .9rem 0 .4rem; font-size: 1.08rem; }
.fw-stage p[b-99ob93wowg] { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.fw-mini-evidence[b-99ob93wowg] { margin: .9rem 0; padding: .8rem; border-radius: 11px; background: var(--wash); }
.fw-mini-evidence .range[b-99ob93wowg] { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #b6d8c1 20%, var(--brand) 20% 65%, #b6d8c1 65%); }
.fw-mini-evidence .distribution[b-99ob93wowg] { display: flex; align-items: end; justify-content: center; gap: 5px; height: 52px; }
.fw-mini-evidence .distribution i[b-99ob93wowg] { width: 7px; border-radius: 4px 4px 0 0; background: var(--brand); opacity: .85; }
.fw-mini-evidence .distribution i:nth-child(1)[b-99ob93wowg], .fw-mini-evidence .distribution i:nth-child(7)[b-99ob93wowg] { height: 11px; }
.fw-mini-evidence .distribution i:nth-child(2)[b-99ob93wowg], .fw-mini-evidence .distribution i:nth-child(6)[b-99ob93wowg] { height: 24px; }
.fw-mini-evidence .distribution i:nth-child(3)[b-99ob93wowg], .fw-mini-evidence .distribution i:nth-child(5)[b-99ob93wowg] { height: 42px; }
.fw-mini-evidence .distribution i:nth-child(4)[b-99ob93wowg] { height: 52px; }
.fw-stage-links[b-99ob93wowg] { display: grid; gap: .3rem; font-size: .8rem; }
.fw-tool-callout[b-99ob93wowg] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-1); margin: 1rem 0; }
.fw-tool-callout b[b-99ob93wowg] { font-family: var(--font-display); font-size: .84rem; display: block; }
.fw-tool-callout span[b-99ob93wowg] { font-size: .74rem; color: var(--muted); display: block; }
.fw-tool-callout a[b-99ob93wowg] { flex: none; font-size: .8rem; font-weight: 700; }

/* ---------- 28-day ramp ---------- */
.fw-ramp-layout[b-99ob93wowg] { max-width: 34rem; display: grid; gap: .9rem; }
.fw-ramp-chart[b-99ob93wowg] { position: relative; padding: .75rem .75rem 1.9rem; border-radius: 13px; background: linear-gradient(180deg, var(--card), #f7faf8); border: 1px solid var(--line); }
.fw-ramp-chart svg[b-99ob93wowg] { width: 100%; height: auto; display: block; overflow: visible; }
.fw-ramp-marker[b-99ob93wowg] { position: absolute; left: 0; top: .75rem; bottom: 1.9rem; width: 2px; background: var(--brand); box-shadow: 0 0 0 5px rgb(13 107 60 / .1); pointer-events: none; transition: left .18s ease; }
html:not(.js) .fw-ramp-marker[b-99ob93wowg] { display: none; }
.fw-ramp-marker[b-99ob93wowg]::after { content: attr(data-day); position: absolute; left: 50%; top: 2px; translate: -50% -100%; padding: .28rem .5rem; border-radius: 999px; background: var(--brand-strong); color: #fff; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.fw-ramp-day[b-99ob93wowg] { min-width: 3.4rem; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--brand-strong); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.fw-ramp-side[b-99ob93wowg] { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); min-height: 8.25rem; }
.fw-ramp-side h4[b-99ob93wowg] { margin: 0 0 .3rem; font-size: 1.05rem; }
.fw-ramp-side p[b-99ob93wowg] { font-size: .8rem; color: var(--muted); }
.fw-ramp-label[b-99ob93wowg] { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--brand-strong); margin: .9rem 0 .45rem; }
.fw-ramp-label .drag-hint[b-99ob93wowg] { font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .06em; }
.fw-range-input[b-99ob93wowg] { width: 100%; height: 10px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--brand) 0%, var(--line) 0%); border-radius: 999px; cursor: pointer; outline-offset: 4px; }
.fw-range-input[b-99ob93wowg]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .35), 0 0 0 1px var(--brand-strong); cursor: grab; }
.fw-range-input:active[b-99ob93wowg]::-webkit-slider-thumb { cursor: grabbing; }
.fw-range-input[b-99ob93wowg]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .35), 0 0 0 1px var(--brand-strong); cursor: grab; }
.fw-range-input[b-99ob93wowg]::-moz-range-track { height: 10px; background: transparent; }
html:not(.js) .fw-ramp-side[b-99ob93wowg], html:not(.js) .fw-ramp-controls[b-99ob93wowg] { display: none; }
.fw-range-labels[b-99ob93wowg] { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-top: .25rem; }

/* ---------- calibration scatter ---------- */
.fw-scatter[b-99ob93wowg] { position: relative; min-height: 300px; padding: 1rem 1rem 2.2rem 2.9rem; overflow: hidden; }
.fw-scatter .note[b-99ob93wowg] { position: absolute; left: 3.6rem; top: 1rem; max-width: 21ch; margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.fw-scatter .axis-x[b-99ob93wowg] { position: absolute; left: 2.9rem; right: 1rem; bottom: 2.1rem; border-top: 1px solid var(--line); }
.fw-scatter .axis-y[b-99ob93wowg] { position: absolute; left: 2.9rem; top: 1rem; bottom: 2.1rem; border-left: 1px solid var(--line); }
.fw-scatter .diagonal[b-99ob93wowg] { position: absolute; left: 2.9rem; bottom: 2.1rem; width: calc(100% - 3.9rem); border-top: 2px dashed #9fb1a5; transform-origin: left center; transform: rotate(-33deg); }
.fw-scatter .dot[b-99ob93wowg] { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .22); translate: -50% 50%; }
.fw-scatter .dot-label[b-99ob93wowg] { position: absolute; font-size: .7rem; color: var(--muted); translate: 9px -1px; white-space: nowrap; }
.fw-scatter .axis-label[b-99ob93wowg] { position: absolute; font-size: .74rem; color: var(--muted); }
.fw-scatter .axis-label.x[b-99ob93wowg] { right: 1rem; bottom: .3rem; }
.fw-scatter .axis-label.y[b-99ob93wowg] { left: .3rem; top: .8rem; writing-mode: vertical-rl; rotate: 180deg; }

/* ---------- worked-example sorter ---------- */
.fw-sorter-wrap[b-99ob93wowg] { position: relative; }
.fw-sorter[b-99ob93wowg] { position: relative; padding: 1.05rem; border-radius: var(--radius); background: linear-gradient(180deg, #0e2418, #08170f); border: 1px solid #173425; color: #f2f8f4; overflow: hidden; margin: 1.25rem 0; }
.fw-sorter[b-99ob93wowg]::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(141 240 166 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(141 240 166 / .045) 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; }
.fw-sorter-head[b-99ob93wowg] { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-right: 8.5rem; }
.fw-sorter-head h3[b-99ob93wowg] { color: #f2f8f4; font-size: 1.1rem; margin: 0; }
.fw-sorter-head p[b-99ob93wowg] { margin: 0; max-width: 40ch; text-align: right; font-size: .74rem; color: #b6cbbd; }
.fw-sorter-grid[b-99ob93wowg] { position: relative; z-index: 2; display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 12px; margin-top: 1rem; align-items: stretch; }
.fw-token-source[b-99ob93wowg] { padding: .95rem; border: 1px solid #315440; border-radius: 14px; background: rgb(7 29 17 / .7); }
.fw-token-source b[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: 2.5rem; color: #fff; line-height: 1; }
.fw-token-source span[b-99ob93wowg] { font-size: .72rem; color: #b6cbbd; }
.fw-tokens[b-99ob93wowg] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: .9rem; }
.fw-token[b-99ob93wowg] { width: 19px; height: 19px; border-radius: 6px; background: #d78725; border: 1px solid #f0ad61; transition: transform .55s cubic-bezier(.2, .9, .2, 1), opacity .35s ease, background .35s ease, border-color .35s ease; }
.fw-bins[b-99ob93wowg] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.fw-bin[b-99ob93wowg] { min-height: 150px; padding: .75rem; border: 1px solid #315440; border-radius: 13px; background: rgb(7 29 17 / .65); }
.fw-bin b[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: .86rem; color: #fff; }
.fw-bin span[b-99ob93wowg] { display: block; font-size: .68rem; color: #b6cbbd; line-height: 1.3; }
.fw-bin-tokens[b-99ob93wowg] { min-height: 56px; margin-top: .55rem; border-top: 1px dashed rgb(255 255 255 / .09); padding-top: .5rem; }
.fw-bin-count[b-99ob93wowg] { margin-top: .55rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: #fff; }
.fw-bin.real[b-99ob93wowg] { border-color: #3f9860; background: rgb(16 65 38 / .7); }
.fw-bin.real .fw-bin-count[b-99ob93wowg] { color: var(--signal, #8df0a6); }
.fw-bin.wrong .fw-bin-count[b-99ob93wowg] { color: #ffb1aa; }
.fw-bin.trivial .fw-bin-count[b-99ob93wowg] { color: #d1d6d2; }
.fw-bin.locked .fw-bin-count[b-99ob93wowg] { color: #aeb9b1; }
.fw-sorter-bottom[b-99ob93wowg] { position: relative; z-index: 2; display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.fw-sorter-summary[b-99ob93wowg] { padding: .85rem; border-radius: 13px; background: #f7fbf8; color: var(--ink); }
.fw-sorter-summary b[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: 1.65rem; color: var(--brand-strong); line-height: 1; }
.fw-sorter-summary span[b-99ob93wowg] { display: block; margin-top: .3rem; font-size: .7rem; color: var(--muted); line-height: 1.35; }
.fw-roadmap[b-99ob93wowg] { padding: .95rem; border: 1px solid #3f9860; border-radius: 14px; background: linear-gradient(135deg, rgb(13 76 43 / .8), rgb(6 44 24 / .82)); }
.fw-roadmap h4[b-99ob93wowg] { color: var(--signal, #8df0a6); margin: 0 0 .7rem; font-family: var(--font-display); font-size: .9rem; }
.fw-roadmap-items[b-99ob93wowg] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fw-roadmap-item[b-99ob93wowg] { min-height: 80px; padding: .65rem; border: 1px solid #4e8864; border-radius: 11px; background: rgb(7 37 21 / .58); font-size: .7rem; color: #d6e7dc; line-height: 1.35; }
.fw-roadmap-item b[b-99ob93wowg] { display: block; color: #fff; font-family: var(--font-display); font-size: .74rem; margin-bottom: .2rem; }
.fw-roadmap-item.silent[b-99ob93wowg] { border: 1px dashed #d48d3b; background: #302316; color: #e8cba7; transition: opacity .45s ease, transform .45s ease; }
.fw-roadmap-item.silent b[b-99ob93wowg] { color: #ffe9ce; }
html.js .fw-roadmap-item.silent[b-99ob93wowg] { opacity: 0; }
html.js .fw-roadmap-item.silent.is-visible[b-99ob93wowg] { opacity: 1; transform: translateY(-6px); }
.fw-sorter-wrap > .fw-sort-replay[b-99ob93wowg] { position: absolute; z-index: 4; right: 14px; top: 14px; }
.fw-sort-replay[b-99ob93wowg] { border: 1px solid #315440; border-radius: 999px; background: rgb(7 29 17 / .78); color: #b6cbbd; padding: .38rem .7rem; font-size: .72rem; font-weight: 700; cursor: pointer; }
html:not(.js) .fw-sort-replay[b-99ob93wowg] { display: none; }

/* ---------- DIY checklist ---------- */
.fw-diy[b-99ob93wowg] { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; margin: 1.25rem 0; }
.fw-diy-list[b-99ob93wowg] { display: grid; gap: 10px; }
.fw-diy-step[b-99ob93wowg] { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-1); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
html.js .fw-diy-step:hover[b-99ob93wowg] { border-color: var(--brand); background: #f4faf6; }
html:not(.js) .fw-diy-step[b-99ob93wowg] { cursor: auto; }
.fw-diy-step input[b-99ob93wowg] { width: 21px; height: 21px; margin-top: .2rem; accent-color: var(--brand); }
html:not(.js) .fw-diy-step input[b-99ob93wowg] { display: none; }
.fw-diy-title[b-99ob93wowg] { display: block; font-family: var(--font-display); font-weight: 600; margin: 0 0 .25rem; font-size: .97rem; color: var(--ink); }
.fw-diy-step p[b-99ob93wowg] { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.48; }
.fw-diy-step.is-done[b-99ob93wowg] { background: #ecf8f0; border-color: #9bcaaa; }
.fw-diy-side[b-99ob93wowg] { position: sticky; top: 84px; padding: 1.15rem; border-radius: var(--radius); background: #0e2418; color: #b6cbbd; border: 1px solid #173425; }
.fw-diy-side h3[b-99ob93wowg] { color: #f2f8f4; margin: 0; font-size: 1.05rem; }
.fw-diy-progress[b-99ob93wowg] { height: 10px; border-radius: 999px; background: #244433; overflow: hidden; margin: .9rem 0 .6rem; }
.fw-diy-progress span[b-99ob93wowg] { display: block; height: 100%; width: 0; background: var(--signal, #8df0a6); transition: width .25s ease; }
.fw-diy-count[b-99ob93wowg] { font-family: var(--font-display); font-size: 2.3rem; color: var(--signal, #8df0a6); font-weight: 700; letter-spacing: -.04em; }
.fw-diy-side p[b-99ob93wowg] { font-size: .76rem; color: #b6cbbd; }
html:not(.js) .fw-diy-count[b-99ob93wowg], html:not(.js) .fw-diy-progress[b-99ob93wowg] { display: none; }
.fw-diy-links[b-99ob93wowg] { display: grid; gap: 8px; margin-top: .9rem; }
.fw-diy-links a[b-99ob93wowg] { display: flex; justify-content: space-between; gap: .6rem; padding: .6rem .7rem; border: 1px solid #315440; border-radius: 10px; color: #f2f8f4; font-size: .74rem; text-decoration: none; }
.fw-diy-links a:hover[b-99ob93wowg] { border-color: var(--signal, #8df0a6); color: var(--signal, #8df0a6); }

/* ---------- worksheet ---------- */
.fw-worksheet[b-99ob93wowg] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 1.2rem; align-items: start; margin: 1.25rem 0; }
.fw-ws-editor[b-99ob93wowg] { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1); }
.fw-ws-head[b-99ob93wowg] { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .9rem; }
.fw-ws-head h3[b-99ob93wowg] { margin: 0; font-size: 1.05rem; }
.fw-ws-head p[b-99ob93wowg] { margin: .15rem 0 0; font-size: .76rem; color: var(--muted); }
.fw-flag-rows[b-99ob93wowg] { display: grid; gap: 8px; }
.fw-flag-row[b-99ob93wowg] { display: grid; grid-template-columns: minmax(160px, 1fr) 150px auto; gap: 8px; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: 11px; background: #f9fbfa; }
.fw-flag-row .evidence[b-99ob93wowg] { grid-column: 1 / -1; }
.fw-flag-row input[b-99ob93wowg], .fw-flag-row select[b-99ob93wowg] { width: 100%; min-height: 42px; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; }
.fw-remove-flag[b-99ob93wowg] { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--bad); cursor: pointer; font-weight: 800; font-size: 1rem; transition: background .15s ease, border-color .15s ease; }
.fw-remove-flag:hover[b-99ob93wowg] { background: #fdecea; border-color: var(--bad); }
.fw-ws-actions[b-99ob93wowg] { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
html:not(.js) .fw-ws-actions[b-99ob93wowg], html:not(.js) .fw-remove-flag[b-99ob93wowg] { display: none; }
.fw-ws-summary[b-99ob93wowg] { position: sticky; top: 84px; padding: 1.2rem; border-radius: var(--radius); background: linear-gradient(180deg, #0e2418, #08170f); color: #b6cbbd; border: 1px solid #173425; box-shadow: var(--shadow-2); }
.fw-ws-summary h3[b-99ob93wowg] { color: #f2f8f4; margin: 0; font-size: 1.05rem; }
.fw-noise-output[b-99ob93wowg] { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; color: var(--signal, #8df0a6); letter-spacing: -.06em; line-height: 1; margin: .8rem 0 .2rem; }
.fw-ws-counts[b-99ob93wowg] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: .9rem 0; }
.fw-ws-count[b-99ob93wowg] { padding: .6rem; border: 1px solid #315440; border-radius: 9px; background: rgb(255 255 255 / .03); font-size: .7rem; }
.fw-ws-count b[b-99ob93wowg] { display: block; color: #f2f8f4; font-family: var(--font-display); font-size: 1.15rem; }
.fw-silent-input[b-99ob93wowg] { width: 100%; min-height: 82px; padding: .65rem; border: 1px solid #4c6959; border-radius: 9px; background: #0e2819; color: #f2f8f4; resize: vertical; font: inherit; font-size: .82rem; }
.fw-verdict-line[b-99ob93wowg] { margin-top: .85rem; padding: .8rem; border: 1px solid #315440; border-radius: 11px; background: #0a1f13; color: #f2f8f4; font-size: .76rem; line-height: 1.5; }
.fw-copy-status[b-99ob93wowg] { min-height: 1.3em; margin-top: .4rem; font-size: .7rem; color: var(--signal, #8df0a6); }
.fw-ws-label[b-99ob93wowg] { display: block; font-size: .74rem; font-weight: 700; color: #f2f8f4; margin-bottom: .3rem; }

/* ---------- boundaries + limitations ---------- */
.fw-boundary-grid[b-99ob93wowg] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.fw-boundary[b-99ob93wowg] { padding: 1.05rem; border-top: 3px solid var(--brand); background: var(--card); border-radius: 0 0 13px 13px; box-shadow: var(--shadow-1); }
.fw-boundary h3[b-99ob93wowg] { font-size: 1.02rem; margin: 0 0 .4rem; }
.fw-boundary p[b-99ob93wowg] { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.fw-limitations[b-99ob93wowg] { display: grid; border-top: 1px solid var(--line); margin-top: 1.25rem; }
.fw-limitation[b-99ob93wowg] { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.fw-limitation b[b-99ob93wowg] { font-family: var(--font-display); font-size: .82rem; color: var(--brand-strong); }
.fw-limitation p[b-99ob93wowg] { margin: 0; font-size: .84rem; color: var(--ink-soft); }

/* ---------- CTA + references ---------- */
.fw-cta[b-99ob93wowg] { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(1.3rem, 4vw, 2rem); border-radius: var(--radius); background: radial-gradient(35rem 15rem at 90% 0%, rgb(141 240 166 / .12), transparent 70%), linear-gradient(135deg, #0e2418, #08170f); color: #b6cbbd; box-shadow: var(--shadow-2); margin: 2rem 0; }
.fw-cta h3[b-99ob93wowg] { color: #f2f8f4; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.fw-cta p[b-99ob93wowg] { margin: .7rem 0 0; font-size: .86rem; color: #b6cbbd; }
.fw-references[b-99ob93wowg] { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1); margin: 1.25rem 0; }
.fw-references > summary[b-99ob93wowg] { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.15rem; font-family: var(--font-display); font-weight: 700; position: relative; min-height: 44px; }
.fw-references > summary[b-99ob93wowg]::-webkit-details-marker { display: none; }
.fw-references > summary[b-99ob93wowg]::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; font-size: 1.45rem; color: var(--brand); transition: rotate .18s ease; }
.fw-references[open] > summary[b-99ob93wowg]::after { rotate: 45deg; }
.fw-references > summary:hover[b-99ob93wowg] { color: var(--brand-strong); }
.fw-references .ref-list[b-99ob93wowg] { margin: 0; padding: 0 1.25rem 1.25rem 2.5rem; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
    .fw-hero-grid[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-shell[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-rail[b-99ob93wowg] { position: sticky; z-index: 40; top: 0; margin: 0 -20px; padding: .55rem 20px; background: rgb(250 250 248 / .95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); overflow-x: auto; }
    .fw-rail-title[b-99ob93wowg] { display: none; }
    .fw-rail-list[b-99ob93wowg] { display: flex; gap: 6px; padding: 0; }
    .fw-rail-list[b-99ob93wowg]::before, .fw-rail-list a[b-99ob93wowg]::before { display: none; }
    .fw-rail-list a[b-99ob93wowg] { white-space: nowrap; border: 1px solid var(--line); background: var(--card); min-height: 44px; display: inline-flex; align-items: center; padding: .55rem .85rem; }
    .fw-rail-list a.is-active[b-99ob93wowg] { border-color: var(--brand-strong); }
    .fw-map-grid[b-99ob93wowg] { grid-template-columns: 1fr 1fr; }
    .fw-map-outcomes[b-99ob93wowg] { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
    .fw-map-gates[b-99ob93wowg]::after { display: none; }
}
@media (max-width: 820px) {
    .fw-map-grid[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-map-report[b-99ob93wowg]::after { display: none; }
    .fw-map-silence[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-map-silence .fw-map-box[b-99ob93wowg]::after { display: none; }
    .fw-map-verify[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-blindness-grid[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-blindness:nth-last-child(-n+2)[b-99ob93wowg] { border-bottom: 1px solid var(--line); }
    .fw-blindness:last-child[b-99ob93wowg] { border-bottom: 0; }
    .fw-lab[b-99ob93wowg], .fw-worksheet[b-99ob93wowg], .fw-diy[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-ws-summary[b-99ob93wowg], .fw-diy-side[b-99ob93wowg] { position: static; }
    .fw-lab-gates[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-ladder[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-metric-pair[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-sorter-grid[b-99ob93wowg], .fw-sorter-bottom[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-sorter-head[b-99ob93wowg] { display: block; }
    .fw-sorter-head p[b-99ob93wowg] { text-align: left; margin-top: .4rem; max-width: none; }
    .fw-sorter-wrap > .fw-sort-replay[b-99ob93wowg] { position: static; display: inline-flex; margin: 0 0 .6rem; }
    .fw-sorter-head[b-99ob93wowg] { padding-right: 0; }
    .fw-bins[b-99ob93wowg] { grid-template-columns: repeat(2, 1fr); }
    .fw-roadmap-items[b-99ob93wowg] { grid-template-columns: repeat(2, 1fr); }
    .fw-boundary-grid[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-limitation[b-99ob93wowg] { grid-template-columns: 1fr; gap: .25rem; }
    .fw-cta[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-figure-head[b-99ob93wowg] { display: block; }
    .fw-figure-head p[b-99ob93wowg] { text-align: left; margin-top: .35rem; max-width: none; }
    .fw-map-title[b-99ob93wowg] { display: block; }
    .fw-map-title p[b-99ob93wowg] { text-align: left; margin-top: .4rem; }
}
@media (max-width: 620px) {
    .fw-hero-outcome[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-outcome-arrow[b-99ob93wowg] { display: none; }
    .fw-flag-row[b-99ob93wowg] { grid-template-columns: 1fr; }
    .fw-flag-row .evidence[b-99ob93wowg] { grid-column: auto; }
    .fw-remove-flag[b-99ob93wowg] { width: 100%; }
    .fw-roadmap-items[b-99ob93wowg] { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .fw-reveal[b-99ob93wowg], .fw-silent-signal[b-99ob93wowg], .fw-roadmap-item.silent[b-99ob93wowg], .fw-token[b-99ob93wowg], .fw-warning-row[b-99ob93wowg], .fw-gate[b-99ob93wowg], .fw-stamp[b-99ob93wowg] { transition: none !important; }
    html.js .fw-reveal[b-99ob93wowg] { opacity: 1; transform: none; }
}

/* ---------- 2x2 detection matrix ---------- */
.fw-matrix[b-99ob93wowg] { display: grid; grid-template-columns: 150px 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-1); margin: 1.5rem 0 0; max-width: 44rem; }
.fw-matrix > div[b-99ob93wowg] { min-height: 96px; padding: .9rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fw-matrix > div:nth-child(3n)[b-99ob93wowg] { border-right: 0; }
.fw-matrix > div:nth-last-child(-n+3)[b-99ob93wowg] { border-bottom: 0; }
.fw-matrix .head[b-99ob93wowg] { min-height: auto; background: var(--wash); font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.fw-matrix .axis[b-99ob93wowg] { font-family: var(--font-display); font-size: .84rem; font-weight: 700; background: #f8faf9; }
.fw-matrix .hit[b-99ob93wowg] { background: var(--brand-wash); }
.fw-matrix .noise[b-99ob93wowg], .fw-matrix .silence[b-99ob93wowg] { background: #fdf3ec; }
.fw-matrix strong[b-99ob93wowg] { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: .2rem; }
.fw-matrix span[b-99ob93wowg] { display: block; font-size: .74rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 620px) {
    .fw-matrix[b-99ob93wowg] { grid-template-columns: 96px 1fr 1fr; }
    .fw-matrix > div[b-99ob93wowg] { padding: .6rem; min-height: 112px; }
}


/* Hero scene: stack vertically whenever the art itself gets narrow — the gates and stamps must
   never collide, at any viewport or zoom. */
@container (max-width: 659px) {
    .fw-hero-art[b-99ob93wowg] { min-height: 0; padding-bottom: 1.05rem; }
    .fw-case-file[b-99ob93wowg] { position: static; width: auto; margin: 1rem 22px 0; transform: none; }
    .fw-warning-list[b-99ob93wowg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-adjudicate[b-99ob93wowg] { position: static; margin: 1rem 22px 0; }
    /* relative, not static: the '!' badge is absolutely positioned against this box and
       must never escape to the hero wrap when the scene stacks. */
    .fw-silent-signal[b-99ob93wowg] { position: relative; width: auto; margin: 1rem 22px 0; }
    .fw-hero-outcome[b-99ob93wowg] { position: static; margin: 1rem 22px 0; }
}


/* ---------- print ---------- */
@media print {
    .fw-rail[b-99ob93wowg], .fw-replay[b-99ob93wowg], .fw-sort-replay[b-99ob93wowg], .fw-ws-actions[b-99ob93wowg], .fw-copy-status[b-99ob93wowg] { display: none !important; }
    html.js .fw-reveal[b-99ob93wowg], html.js .fw-silent-signal[b-99ob93wowg], html.js .fw-roadmap-item.silent[b-99ob93wowg] { opacity: 1 !important; transform: none !important; }
    html.js .fw-proc-detail:not(.is-active)[b-99ob93wowg] { display: block !important; }
    .fw-hero-art-wrap[b-99ob93wowg], .fw-map[b-99ob93wowg], .fw-sorter-wrap[b-99ob93wowg], .fw-figure[b-99ob93wowg] { break-inside: avoid; }
    .fw-shell[b-99ob93wowg] { display: block; }
}

/* /Components/Pages/Home.razor.rz.scp.css */
/* Homepage-only components. The page is static SSR with zero JavaScript, so every
   interactive-looking element here is either a link, a form, or pure CSS — and the
   scroll-driven motion at the bottom of this file is gated behind @supports so its
   absence IS the base state. Global vocabulary (.hero, .card, .panel, .btn, tables)
   stays in site.css; this file only adds what no other page uses. */

/* ---------------------------------------------------------------- hero */
.hp-hero[b-mm8avwcdtr] {
    align-items: start;
}

.hp-hero-copy[b-mm8avwcdtr] {
    min-width: 0;
}

/* The hero eyebrow mixes text nodes and a <dfn>; as inline-flex each run is its own
   flex item and narrow phones wrap them into broken columns. Block flow with the dash
   pinned to the first line lets the label wrap like the sentence it is. */
.hp-hero-copy .eyebrow[b-mm8avwcdtr] {
    display: block;
    position: relative;
    padding-left: 2rem;
}

.hp-hero-copy .eyebrow[b-mm8avwcdtr]::before {
    position: absolute;
    left: 0;
    top: .5em;
}

.hp-hero-tertiary-row[b-mm8avwcdtr] {
    margin: .9rem 0 0;
}

/* Inline-block so a wrapped second line keeps the arrow glued to the final word;
   the padding/negative-margin pair keeps a >=24px hit area without moving the text. */
.hp-hero-tertiary[b-mm8avwcdtr] {
    display: inline-block;
    padding-block: .6rem;
    margin-block: -.35rem;
    font-weight: 600;
    text-decoration: none;
}

.hp-hero-tertiary:hover[b-mm8avwcdtr] {
    text-decoration: underline;
}

/* The two hero-note lines became a scannable fact list: same facts, one per glance. */
.hp-facts[b-mm8avwcdtr] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1.1rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--text-sm);
}

.hp-facts li[b-mm8avwcdtr] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.hp-facts svg[b-mm8avwcdtr] {
    flex: none;
    color: var(--brand-strong);
}

.hp-facts strong[b-mm8avwcdtr] {
    color: var(--ink-soft);
}

/* The product preview: one adjudicated finding, typeset as a report specimen.
   Dark like the site's other "instrument" surfaces (quote block, CTA band). */
.hp-sample[b-mm8avwcdtr] {
    min-width: 0;
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    color: var(--dark-soft);
    background:
        radial-gradient(30rem 16rem at 90% -10%, rgb(141 240 166 / .1), transparent 70%),
        linear-gradient(180deg, var(--dark-bg), var(--dark-bg-2));
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.hp-sample strong[b-mm8avwcdtr] {
    color: var(--dark-ink);
}

.hp-sample-chrome[b-mm8avwcdtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--dark-line);
    background: rgb(0 0 0 / .25);
}

.hp-sample-id[b-mm8avwcdtr] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dark-soft);
}

.hp-sample-status[b-mm8avwcdtr] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 650;
    color: var(--signal);
}

.hp-sample-status[b-mm8avwcdtr]::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 4px rgb(141 240 166 / .12);
}

.hp-sample-body[b-mm8avwcdtr] {
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.hp-sample-kicker[b-mm8avwcdtr] {
    margin: 0 0 .55rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--dark-soft);
}

.hp-sample-claim[b-mm8avwcdtr] {
    margin: 0;
    color: var(--dark-ink);
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 620;
    line-height: 1.25;
}

.hp-sample-saving[b-mm8avwcdtr] {
    display: block;
    margin-top: .3rem;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 450;
    color: var(--dark-soft);
}

.hp-verdict-row[b-mm8avwcdtr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    margin: .9rem 0 0;
}

.hp-stamp[b-mm8avwcdtr] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .26rem .66rem;
    border: 1px solid rgb(141 240 166 / .55);
    border-radius: 999px;
    color: var(--signal);
    background: rgb(141 240 166 / .09);
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hp-stamp[b-mm8avwcdtr]::before {
    content: "✓";
}

.hp-verdict-note[b-mm8avwcdtr] {
    font-size: .84rem;
    color: var(--dark-soft);
}

.hp-panel-label[b-mm8avwcdtr] {
    margin: 0 0 .6rem;
    font-family: var(--font-mono);
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dark-soft);
}

.hp-evidence[b-mm8avwcdtr],
.hp-falsify[b-mm8avwcdtr] {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--dark-line);
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / .22);
}

.hp-falsify p:last-child[b-mm8avwcdtr] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--dark-soft);
}

.hp-chain[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: .45rem;
}

.hp-chain-node[b-mm8avwcdtr] {
    padding: .4rem .55rem;
    border: 1px solid #3a5a49;
    border-radius: 7px;
    color: var(--dark-ink);
    background: rgb(141 240 166 / .06);
    font-family: var(--font-mono);
    font-size: .7rem;
    text-align: center;
}

.hp-chain-line[b-mm8avwcdtr] {
    position: relative;
    height: 2px;
    background: #3a5a49;
    overflow: hidden;
}

.hp-chain-line[b-mm8avwcdtr]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--signal);
}

.hp-evidence-stat[b-mm8avwcdtr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: .8rem 0 0;
    font-size: .8rem;
    color: var(--dark-soft);
}

.hp-evidence-stat b[b-mm8avwcdtr] {
    color: var(--dark-ink);
    font-family: var(--font-display);
    font-size: .95rem;
}

.hp-verify-line[b-mm8avwcdtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--dark-line);
    font-size: .78rem;
    color: var(--dark-soft);
}

.hp-reruns[b-mm8avwcdtr] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.hp-rerun-dots[b-mm8avwcdtr] {
    display: inline-flex;
    gap: .3rem;
}

.hp-rerun-dot[b-mm8avwcdtr] {
    width: .68rem;
    height: .68rem;
    border: 1px solid var(--signal);
    border-radius: 3px;
    background: rgb(141 240 166 / .12);
}

.hp-sample-caption[b-mm8avwcdtr] {
    margin: 0;
    padding: .7rem 1rem .85rem;
    border-top: 1px solid var(--dark-line);
    font-size: .74rem;
    text-align: center;
    color: var(--dark-soft);
}

.hp-sample-caption a[b-mm8avwcdtr] {
    color: var(--signal);
}

.hp-sample-caption a:hover[b-mm8avwcdtr] {
    color: #c6f8d3;
}

/* ------------------------------------------------- plain-words strip */
.hp-plain[b-mm8avwcdtr] {
    position: relative;
    z-index: 2;
    margin-top: -1.3rem;
}

.hp-plain-strip[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    margin: 0;
    max-width: 72ch;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.hp-plain-strip svg[b-mm8avwcdtr] {
    color: var(--brand);
    margin-top: .12rem;
}

.hp-tight-top[b-mm8avwcdtr] {
    padding-top: clamp(2.2rem, 4vw, 3.2rem);
}

/* ------------------------------------------------- section 01 micro-visuals */
.hp-viz[b-mm8avwcdtr] {
    min-height: 6.4rem;
    display: grid;
    align-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--wash);
}

.hp-viz-note[b-mm8avwcdtr] {
    font-size: .74rem;
    color: var(--muted);
}

.hp-slope-row[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: 5.6rem 1fr auto;
    align-items: center;
    gap: .55rem;
    font-size: .76rem;
    color: var(--muted);
}

.hp-slope-row > b[b-mm8avwcdtr] {
    font-size: .78rem;
    color: var(--ink-soft);
}

.hp-slope-track[b-mm8avwcdtr] {
    height: .7rem;
    border-radius: 999px;
    background: var(--wash-deep);
    overflow: hidden;
}

.hp-slope-bar[b-mm8avwcdtr] {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.hp-slope-marketed[b-mm8avwcdtr] { width: 88%; background: #d48c79; }
.hp-slope-anchor[b-mm8avwcdtr] { width: 14%; background: var(--brand); }
.hp-run-five[b-mm8avwcdtr] { width: 31%; background: var(--bad); }
.hp-run-sixteen[b-mm8avwcdtr] { width: 100%; background: var(--brand); }
.hp-byte-js[b-mm8avwcdtr] { width: 100%; background: var(--brand); }
.hp-byte-css[b-mm8avwcdtr] { width: 97%; background: var(--brand); }
.hp-byte-img[b-mm8avwcdtr] { width: 96%; background: var(--brand); }

.hp-orbit-wrap[b-mm8avwcdtr] {
    justify-items: center;
}

.hp-orbit[b-mm8avwcdtr] {
    width: 6.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--bad) 0 43%, var(--good) 43% 100%);
    box-shadow: inset 0 0 0 1.05rem var(--wash), 0 0 0 1px var(--line-soft);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.hp-orbit[b-mm8avwcdtr]::after {
    content: "90+";
}

.hp-orbit-legend[b-mm8avwcdtr] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    font-size: .74rem;
    color: var(--muted);
}

.hp-orbit-legend span[b-mm8avwcdtr]::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .32rem;
    border-radius: 50%;
    background: var(--good);
}

.hp-orbit-legend .hp-orbit-fail[b-mm8avwcdtr]::before {
    background: var(--bad);
}

.hp-tickets[b-mm8avwcdtr] {
    position: relative;
    min-height: 6.4rem;
}

.hp-ticket-note[b-mm8avwcdtr] {
    position: absolute;
    width: 9.2rem;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-1);
    font-family: var(--font-mono);
    font-size: .62rem;
    color: var(--muted);
}

.hp-tickets .hp-ticket-note:nth-child(1)[b-mm8avwcdtr] { left: .3rem; top: .5rem; transform: rotate(-3deg); }
.hp-tickets .hp-ticket-note:nth-child(2)[b-mm8avwcdtr] { left: 34%; top: 2.3rem; transform: rotate(2deg); }
.hp-tickets .hp-ticket-note:nth-child(3)[b-mm8avwcdtr] { right: .3rem; top: .9rem; transform: rotate(4deg); z-index: 2; }

.hp-ticket-real[b-mm8avwcdtr] {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-wash);
}

.hp-context-link[b-mm8avwcdtr] {
    margin: .75rem 0 0;
    font-weight: 600;
}

.hp-context-link a[b-mm8avwcdtr] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* ------------------------------------------------- section 02 flow instrument */
.hp-flow[b-mm8avwcdtr] {
    margin-top: 1.5rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    color: var(--dark-soft);
    background: linear-gradient(180deg, var(--dark-bg), var(--dark-bg-2));
    box-shadow: var(--shadow-2);
}

.hp-flow-row[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr) 11rem;
    gap: 1rem;
    align-items: center;
}

.hp-flow-row + .hp-flow-row[b-mm8avwcdtr] {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--dark-line);
}

.hp-flow-label[b-mm8avwcdtr] {
    margin: 0;
    color: var(--dark-ink);
    font-family: var(--font-display);
    font-weight: 650;
    line-height: 1.3;
}

.hp-flow-label small[b-mm8avwcdtr] {
    display: block;
    margin-top: .3rem;
    color: var(--dark-soft);
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 450;
    line-height: 1.4;
}

.hp-flow-mid[b-mm8avwcdtr] {
    min-width: 0;
}

.hp-ticket-field[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: repeat(21, minmax(4px, 1fr));
    gap: .22rem;
}

.hp-tk[b-mm8avwcdtr] {
    height: 1.3rem;
    border-radius: 4px;
    border: 1px solid transparent;
}

/* Every verdict tile holds >=3:1 against the dark panel (1.4.11) — Trivial is the
   dimmest of the four on purpose, but still perceivable, not camouflage. */
.hp-tk-real[b-mm8avwcdtr] { background: var(--signal); border-color: var(--signal); }
.hp-tk-wrong[b-mm8avwcdtr] { background: rgb(255 177 170 / .8); border-color: #6b4a46; }
.hp-tk-triv[b-mm8avwcdtr] { background: #78907f; border-color: #8aa392; }
.hp-tk-lock[b-mm8avwcdtr] { background: rgb(255 210 138 / .75); border-color: #6b5a35; }

.hp-tk-legend[b-mm8avwcdtr] {
    margin: .5rem 0 0;
    font-size: .76rem;
    color: var(--dark-soft);
}

.hp-tk-legend b[b-mm8avwcdtr] {
    color: var(--dark-ink);
}

.hp-lg-real[b-mm8avwcdtr] { color: var(--signal); font-weight: 650; }
.hp-lg-wrong[b-mm8avwcdtr] { color: var(--bad-dark); font-weight: 650; }
.hp-lg-triv[b-mm8avwcdtr] { color: #b8c4bc; font-weight: 650; }
.hp-lg-lock[b-mm8avwcdtr] { color: var(--warn-dark); font-weight: 650; }

.hp-field-trace[b-mm8avwcdtr] {
    position: relative;
    height: 2.2rem;
}

.hp-field-line[b-mm8avwcdtr] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #49685a;
}

.hp-field-line[b-mm8avwcdtr]::before {
    content: "";
    position: absolute;
    left: 0;
    top: -.23rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--signal);
}

.hp-field-line[b-mm8avwcdtr]::after {
    content: "";
    position: absolute;
    right: 13%;
    top: -.4rem;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background: var(--bad);
    box-shadow: 0 0 0 6px rgb(179 38 30 / .16);
}

.hp-field-caption[b-mm8avwcdtr] {
    margin: .15rem 0 0;
    text-align: right;
    font-size: .74rem;
    color: var(--dark-soft);
}

.hp-field-caption b[b-mm8avwcdtr] {
    color: var(--dark-ink);
}

.hp-flow-result[b-mm8avwcdtr] {
    margin: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--dark-line);
    border-radius: var(--radius-sm);
    background: rgb(141 240 166 / .05);
    text-align: center;
}

.hp-flow-result b[b-mm8avwcdtr] {
    display: block;
    color: var(--signal);
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
}

.hp-flow-result span[b-mm8avwcdtr] {
    display: block;
    margin-top: .35rem;
    font-size: .73rem;
    line-height: 1.35;
    color: var(--dark-soft);
}

.hp-flow-caption[b-mm8avwcdtr] {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--dark-line);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--dark-soft);
}

.hp-flow-caption strong[b-mm8avwcdtr],
.hp-flow-caption b[b-mm8avwcdtr] {
    color: var(--dark-ink);
}

.hp-flow-caption a[b-mm8avwcdtr] {
    color: var(--signal);
}

.hp-flow-caption a:hover[b-mm8avwcdtr] {
    color: #c6f8d3;
}

/* The definitional panel pair: equal heights, and each concept carries its own
   evidence visual — without this the shorter panel left a bare gap beside its
   charted sibling that read as missing content. */
.hp-panels[b-mm8avwcdtr] {
    align-items: stretch;
}

.hp-noise[b-mm8avwcdtr] {
    margin: 0 0 .9rem;
}

.hp-noise-bar[b-mm8avwcdtr] {
    display: flex;
    height: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .7rem;
    line-height: 1.5rem;
    color: #fff;
    text-align: center;
}

.hp-noise-cut[b-mm8avwcdtr] {
    background: #737869;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: .3rem;
}

.hp-noise-keep[b-mm8avwcdtr] {
    background: var(--brand-strong);
}

.hp-noise-scale[b-mm8avwcdtr] {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .3rem;
    font-size: .72rem;
    color: var(--muted);
}

.hp-noise-scale b[b-mm8avwcdtr] {
    color: var(--ink-soft);
}

/* Silent Bottleneck chart replaces the two-bar sketch: same facts, now labeled on axes. */
.hp-silent[b-mm8avwcdtr] {
    margin: 0 0 .9rem;
}

.hp-silent-svg[b-mm8avwcdtr] {
    display: block;
    width: 100%;
    height: auto;
}

/* In a narrow column the SVG's axis labels would render around 6px — swap to the bar
   sketch, whose type is real CSS pixels. The panel hosting this chart can be narrow at
   TWO viewport ranges (phones, and the ~680-900px band where .grid-2 runs two slim
   columns), so the swap keys on the figure's own width via a container query; the
   media query below stays as the fallback for engines without container queries. */
.hp-silent[b-mm8avwcdtr] {
    container-type: inline-size;
}

.hp-silent-bars[b-mm8avwcdtr] {
    display: none;
}

@container (max-width: 27rem) {
    .hp-silent-svg[b-mm8avwcdtr] {
        display: none;
    }

    .hp-silent-bars[b-mm8avwcdtr] {
        display: block;
    }
}

@media (max-width: 40rem) {
    .hp-silent-svg[b-mm8avwcdtr] {
        display: none;
    }

    .hp-silent-bars[b-mm8avwcdtr] {
        display: block;
    }
}

/* ------------------------------------------------- section 03 coverage map */
.hp-map[b-mm8avwcdtr] {
    margin-top: 1.6rem;
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.hp-life[b-mm8avwcdtr] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .5rem;
}

.hp-life[b-mm8avwcdtr]::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 1.2rem;
    height: 2px;
    background: var(--line);
}

.hp-life-node[b-mm8avwcdtr] {
    position: relative;
    min-width: 0;
    text-align: center;
}

.hp-life-dot[b-mm8avwcdtr] {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--brand-strong);
    background: var(--card);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    box-shadow: 0 0 0 5px var(--card);
}

.hp-life-node > span:last-child[b-mm8avwcdtr] {
    display: block;
    margin-top: .45rem;
    font-size: .7rem;
    line-height: 1.25;
    color: var(--muted);
}

.hp-band[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .8rem;
    align-items: center;
    margin-top: 1.2rem;
}

.hp-band-label[b-mm8avwcdtr] {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 650;
    color: var(--ink-soft);
}

.hp-band-track[b-mm8avwcdtr] {
    position: relative;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--wash);
    overflow: hidden;
}

.hp-band-fill[b-mm8avwcdtr] {
    position: absolute;
    inset-block: 0;
    border-radius: inherit;
}

/* #737869 (the site's trivial-gray) holds >=3:1 against the wash track (1.4.11);
   the earlier pale fill measured 1.44:1 — invisible to low-vision readers. */
.hp-band-psi[b-mm8avwcdtr] {
    left: 58%;
    width: 36%;
    background: #737869;
}

.hp-band-audit[b-mm8avwcdtr] {
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, var(--brand-strong), #2c9159);
}

.hp-band-note[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .8rem;
    margin: .3rem 0 0;
    font-size: .74rem;
    color: var(--muted);
}

.hp-band-note[b-mm8avwcdtr]::before {
    content: "";
}

.hp-chips[b-mm8avwcdtr] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .7rem 0 0;
    padding-left: 9.8rem;
}

.hp-chip[b-mm8avwcdtr] {
    padding: .4rem .7rem;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--wash);
    font-size: .8rem;
    color: var(--ink-soft);
}

.hp-cats[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-top: 1rem;
}

.hp-cat[b-mm8avwcdtr] {
    min-width: 0;
    padding: .95rem 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--wash);
}

.hp-cat h3[b-mm8avwcdtr] {
    margin: 0;
    font-size: .98rem;
}

.hp-cat ul[b-mm8avwcdtr] {
    margin: .6rem 0 0;
    padding-left: 1.05rem;
    font-size: .82rem;
    color: var(--muted);
}

.hp-cat li + li[b-mm8avwcdtr] {
    margin-top: .3rem;
}

/* The 11-row source table folds away; the map and categories carry the shape, the
   table carries the receipts for whoever wants them. */
.hp-disclosure[b-mm8avwcdtr] {
    margin-top: 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.hp-disclosure summary[b-mm8avwcdtr] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: .8rem 1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
}

.hp-disclosure summary[b-mm8avwcdtr]::-webkit-details-marker {
    display: none;
}

.hp-disclosure summary[b-mm8avwcdtr]::after {
    content: "+";
    flex: none;
    color: var(--brand);
    font-size: 1.45rem;
    font-weight: 400;
    transition: rotate .15s ease;
}

.hp-disclosure[open] summary[b-mm8avwcdtr]::after {
    rotate: 45deg;
}

.hp-disclosure summary:hover[b-mm8avwcdtr] {
    color: var(--brand-strong);
}

.hp-disclosure[open] summary[b-mm8avwcdtr] {
    border-bottom: 1px solid var(--line-soft);
}

.hp-disclosure .table-wrap[b-mm8avwcdtr] {
    margin: 0;
    padding: 0 1rem .5rem;
}

/* ------------------------------------------------- section 04 anatomy + calibration */
.hp-standard[b-mm8avwcdtr] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hp-standard;
}

.hp-standard li[b-mm8avwcdtr] {
    counter-increment: hp-standard;
    position: relative;
    padding: .6rem 0 .6rem 2.6rem;
    border-top: 1px solid var(--line-soft);
}

.hp-standard li:first-child[b-mm8avwcdtr] {
    border-top: 0;
    padding-top: .1rem;
}

.hp-standard li[b-mm8avwcdtr]::before {
    content: counter(hp-standard, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .68rem;
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
}

.hp-standard li:first-child[b-mm8avwcdtr]::before {
    top: .18rem;
}

.hp-standard strong[b-mm8avwcdtr] {
    display: block;
}

.hp-standard span[b-mm8avwcdtr] {
    color: var(--muted);
    font-size: .88rem;
}

/* Same swap rationale as .hp-silent: in a narrow column (phones, or the two-column
   .grid-2 band around 680-900px) the scatter's labels fall under 7px — the bar list
   below takes over, keyed on the figure's own width. */
.hp-cal[b-mm8avwcdtr] {
    container-type: inline-size;
}

.hp-cal-svg[b-mm8avwcdtr] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: .4rem;
}

.hp-cal-bars[b-mm8avwcdtr] {
    display: none;
}

@container (max-width: 27rem) {
    .hp-cal-svg[b-mm8avwcdtr] {
        display: none;
    }

    .hp-cal-bars[b-mm8avwcdtr] {
        display: block;
    }
}

.hp-cal-group[b-mm8avwcdtr] {
    margin: .6rem 0 .15rem;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.hp-cal-row[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr) 2.9rem;
    gap: .5rem;
    align-items: center;
    margin: .3rem 0 0;
    font-size: .74rem;
    color: var(--muted);
}

.hp-cal-track[b-mm8avwcdtr] {
    position: relative;
    height: .65rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2e7e3 0 50%, var(--brand-wash) 50% 100%);
    overflow: hidden;
}

.hp-cal-track[b-mm8avwcdtr]::after {
    content: "";
    position: absolute;
    left: 50%;
    inset-block: 0;
    width: 2px;
    background: var(--warn);
}

.hp-cal-fill[b-mm8avwcdtr] {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: var(--q);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-strong), #2c9159);
}

.hp-cal-row b[b-mm8avwcdtr] {
    text-align: right;
    color: var(--brand-strong);
}

/* ------------------------------------------------- section 05 dual clock */
.hp-clocks[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
}

.hp-clock[b-mm8avwcdtr] {
    min-width: 0;
    padding: clamp(1rem, 2.5vw, 1.3rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.hp-clock-title[b-mm8avwcdtr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 650;
}

.hp-clock-title svg[b-mm8avwcdtr] {
    flex: none;
    color: var(--brand);
}

.hp-tl[b-mm8avwcdtr] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-tl[b-mm8avwcdtr]::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: .5rem;
    height: 2px;
    background: var(--line);
}

.hp-tl li[b-mm8avwcdtr] {
    position: relative;
    min-width: 0;
    padding-top: 1.3rem;
    text-align: center;
    font-size: .76rem;
    line-height: 1.3;
    color: var(--muted);
}

.hp-tl li[b-mm8avwcdtr]::before {
    content: "";
    position: absolute;
    top: .06rem;
    left: 50%;
    translate: -50% 0;
    width: .85rem;
    height: .85rem;
    border: 2px solid var(--brand);
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 0 0 4px var(--card);
}

.hp-clock-result[b-mm8avwcdtr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--line-soft);
    font-size: .8rem;
    color: var(--muted);
}

.hp-clock-result b[b-mm8avwcdtr] {
    color: var(--brand-strong);
    font-family: var(--font-display);
}

/* ------------------------------------------------- section 06 research cards */
.hp-research[b-mm8avwcdtr] {
    display: flex;
    flex-direction: column;
}

.hp-research .hp-viz[b-mm8avwcdtr] {
    min-height: 5rem;
    margin: .35rem 0 .9rem;
}

.hp-research .hp-context-link[b-mm8avwcdtr] {
    margin-top: auto;
    padding-top: .8rem;
    border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------- course panel: copy + form side by side */
.hp-course[b-mm8avwcdtr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, .62fr);
    gap: clamp(1.4rem, 4vw, 2.8rem);
    align-items: start;
}

.hp-course-form[b-mm8avwcdtr] {
    margin-top: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.hp-course-form .field[b-mm8avwcdtr] {
    flex: 1 1 100%;
    max-width: none;
}

.hp-course-form .btn[b-mm8avwcdtr] {
    width: 100%;
}

/* ------------------------------------------------- responsive */
@media (max-width: 68rem) {
    .hp-flow-row[b-mm8avwcdtr] {
        grid-template-columns: 10rem minmax(0, 1fr) 9.5rem;
    }
}

@media (max-width: 60rem) {
    .hp-cats[b-mm8avwcdtr] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 56rem) {
    .hp-sample[b-mm8avwcdtr] {
        max-width: 42rem;
    }

    .hp-plain[b-mm8avwcdtr] {
        margin-top: -.9rem;
    }

    .hp-flow-row[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .hp-flow-result[b-mm8avwcdtr] {
        display: flex;
        align-items: baseline;
        gap: .6rem;
        text-align: left;
    }

    .hp-flow-result span[b-mm8avwcdtr] {
        margin-top: 0;
    }

    .hp-life[b-mm8avwcdtr] {
        grid-template-columns: repeat(4, 1fr);
        gap: .9rem .45rem;
    }

    .hp-life[b-mm8avwcdtr]::before {
        content: none;
    }

    .hp-life-dot[b-mm8avwcdtr] {
        box-shadow: none;
    }

    .hp-clocks[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
    }

    .hp-course[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
    }

    .hp-chips[b-mm8avwcdtr] {
        padding-left: 0;
    }

    .hp-band[b-mm8avwcdtr],
    .hp-band-note[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
        gap: .3rem;
    }

    .hp-band-note[b-mm8avwcdtr]::before {
        content: none;
    }

    .hp-band-note[b-mm8avwcdtr] {
        margin-top: .2rem;
    }
}

@media (max-width: 40rem) {
    .hp-cats[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
    }

    /* Fallback for engines without container queries (primary swap is above). */
    .hp-cal-svg[b-mm8avwcdtr] {
        display: none;
    }

    .hp-cal-bars[b-mm8avwcdtr] {
        display: block;
    }

    .hp-chain[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .hp-chain-line[b-mm8avwcdtr] {
        width: 2px;
        height: .9rem;
        margin-inline: auto;
    }

    .hp-evidence-stat[b-mm8avwcdtr] {
        flex-direction: column;
        gap: .25rem;
    }

    .hp-facts[b-mm8avwcdtr] {
        display: grid;
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .hp-tl[b-mm8avwcdtr] {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .hp-tl[b-mm8avwcdtr]::before {
        left: .4rem;
        right: auto;
        top: 5%;
        bottom: 5%;
        width: 2px;
        height: auto;
    }

    .hp-tl li[b-mm8avwcdtr] {
        padding: 0 0 0 1.7rem;
        text-align: left;
        min-height: 1.4rem;
    }

    .hp-tl li[b-mm8avwcdtr]::before {
        left: 0;
        top: .06rem;
        translate: 0 0;
    }

    .hp-life[b-mm8avwcdtr] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------- scroll-driven motion (CSS only)
   Gated: browsers without scroll timelines render the finished state — nothing is
   hidden behind the animation, so the page's zero-JavaScript claim stays intact. */
@supports (animation-timeline: view()) {
    .hp-reveal[b-mm8avwcdtr] {
        animation: hp-rise-b-mm8avwcdtr .9s cubic-bezier(.2, .8, .2, 1) both;
        animation-timeline: view();
        animation-range: entry 0% cover 24%;
    }

    .hp-sample[b-mm8avwcdtr] {
        animation: hp-report-in-b-mm8avwcdtr 1s cubic-bezier(.2, .8, .2, 1) both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .hp-chain-line[b-mm8avwcdtr]::after {
        transform: translateX(-100%);
        animation: hp-trace-b-mm8avwcdtr .8s cubic-bezier(.2, .8, .2, 1) both;
        animation-timeline: view();
        animation-range: entry 10% cover 45%;
    }

    .hp-tk[b-mm8avwcdtr] {
        transform-origin: bottom;
        animation: hp-sort-b-mm8avwcdtr .7s cubic-bezier(.2, .8, .2, 1) both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
    }

    .hp-field-line[b-mm8avwcdtr]::after {
        animation: hp-land-b-mm8avwcdtr .7s cubic-bezier(.2, .8, .2, 1) both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }
}

/* Opacity only: several .hp-reveal hosts are .card.lift, whose hover translates the
   card — a filled transform animation would override that hover for good. */
@keyframes hp-rise-b-mm8avwcdtr {
    from { opacity: .001; }
    to { opacity: 1; }
}

@keyframes hp-report-in-b-mm8avwcdtr {
    from { opacity: .25; transform: translateY(24px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hp-trace-b-mm8avwcdtr {
    to { transform: translateX(0); }
}

@keyframes hp-sort-b-mm8avwcdtr {
    from { opacity: .15; transform: scaleY(.3); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes hp-land-b-mm8avwcdtr {
    from { opacity: .2; transform: translateY(-10px) scale(.55); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hp-reveal[b-mm8avwcdtr],
    .hp-sample[b-mm8avwcdtr],
    .hp-chain-line[b-mm8avwcdtr]::after,
    .hp-tk[b-mm8avwcdtr],
    .hp-field-line[b-mm8avwcdtr]::after {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* ------------------------------------------------- print */
@media print {
    /* Scroll-driven reveals never progress on paper — print the finished state. */
    .hp-reveal[b-mm8avwcdtr],
    .hp-sample[b-mm8avwcdtr],
    .hp-tk[b-mm8avwcdtr],
    .hp-chain-line[b-mm8avwcdtr]::after,
    .hp-field-line[b-mm8avwcdtr]::after {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .hp-sample[b-mm8avwcdtr],
    .hp-flow[b-mm8avwcdtr] {
        color: #000;
        background: #fff;
        border: 1px solid #999;
        box-shadow: none;
    }

    .hp-sample strong[b-mm8avwcdtr],
    .hp-sample-claim[b-mm8avwcdtr],
    .hp-sample-id[b-mm8avwcdtr],
    .hp-sample-status[b-mm8avwcdtr],
    .hp-sample-kicker[b-mm8avwcdtr],
    .hp-sample-saving[b-mm8avwcdtr],
    .hp-verdict-note[b-mm8avwcdtr],
    .hp-panel-label[b-mm8avwcdtr],
    .hp-falsify p:last-child[b-mm8avwcdtr],
    .hp-evidence-stat[b-mm8avwcdtr],
    .hp-evidence-stat b[b-mm8avwcdtr],
    .hp-chain-node[b-mm8avwcdtr],
    .hp-verify-line[b-mm8avwcdtr],
    .hp-sample-caption[b-mm8avwcdtr],
    .hp-flow-label[b-mm8avwcdtr],
    .hp-flow-label small[b-mm8avwcdtr],
    .hp-flow-caption[b-mm8avwcdtr],
    .hp-flow-caption b[b-mm8avwcdtr],
    .hp-flow-caption strong[b-mm8avwcdtr],
    .hp-tk-legend[b-mm8avwcdtr],
    .hp-tk-legend b[b-mm8avwcdtr],
    .hp-field-caption[b-mm8avwcdtr],
    .hp-field-caption b[b-mm8avwcdtr],
    .hp-flow-result span[b-mm8avwcdtr] {
        color: #000;
    }

    .hp-stamp[b-mm8avwcdtr],
    .hp-flow-result b[b-mm8avwcdtr] {
        color: #0d6b3c;
    }

    /* Child selectors beat the parent remaps above, so the legend's verdict words and
       the two dark-surface links need their own print-legible colors — their screen
       values are dark-panel accents that sit near-invisible on the white print ground. */
    .hp-lg-real[b-mm8avwcdtr] { color: #0d6b3c; }
    .hp-lg-wrong[b-mm8avwcdtr] { color: #b3261e; }
    .hp-lg-triv[b-mm8avwcdtr] { color: #000; }
    .hp-lg-lock[b-mm8avwcdtr] { color: #8a5800; }

    .hp-sample-caption a[b-mm8avwcdtr],
    .hp-flow-caption a[b-mm8avwcdtr] {
        color: #0d6b3c;
    }
}
/* /Components/Pages/LighthouseSampleSizePage.razor.rz.scp.css */
/* The comparability gate.

   These checks decide whether a verdict is allowed to exist, so they are a checklist a person can
   scan in one pass — not a stack of red banners sitting above a table of green results, which is
   what they were. Status is carried by a mark, a word and a colour together: colour alone would
   fail the one reader who most needs the blocker to register. */
.lh-checks[b-ipzg0cz7x4] {
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}

.lh-checks li[b-ipzg0cz7x4] {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .5rem;
  align-items: start;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  background: var(--wash);
  font-size: .92rem;
}

.lh-checks li > span:first-child[b-ipzg0cz7x4] {
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.lh-checks .is-ok[b-ipzg0cz7x4] { border-left-color: var(--good); }
.lh-checks .is-ok > span:first-child[b-ipzg0cz7x4] { color: var(--good); }

.lh-checks .is-warn[b-ipzg0cz7x4] { border-left-color: #b8860b; }
.lh-checks .is-warn > span:first-child[b-ipzg0cz7x4] { color: #8a5a10; }

/* A blocker is the loudest thing in this region, because it is the reason there is no verdict. */
.lh-checks .is-blocked[b-ipzg0cz7x4] {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 7%, transparent);
}
.lh-checks .is-blocked > span:first-child[b-ipzg0cz7x4] { color: var(--bad); }

.lh-check-detail[b-ipzg0cz7x4] {
  display: block;
  color: var(--muted);
  font-size: .88em;
  margin-top: .1rem;
}

/* ── The proof curve ─────────────────────────────────────────────────────────────
   Server-rendered SVG, so it needs no script and survives the strict CSP. Nothing
   animates: the chart is a statement about arithmetic, and arithmetic does not
   need an entrance. */
.lh-proof[b-ipzg0cz7x4] {
  margin: 1rem 0 0;
  padding: 0;
}

.lh-proof svg[b-ipzg0cz7x4] {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.lh-proof figcaption[b-ipzg0cz7x4] {
  margin-top: .45rem;
}

.lh-proof-axis[b-ipzg0cz7x4] { stroke: var(--line); stroke-width: 1; }
.lh-proof-grid[b-ipzg0cz7x4] { stroke: var(--line-soft); stroke-width: 1; }
.lh-proof-tick[b-ipzg0cz7x4] { fill: var(--muted); font-size: 10px; }
.lh-proof-label[b-ipzg0cz7x4] { fill: var(--ink-soft); font-size: 11px; font-weight: 600; }

/* The region where the plan actually has the power the user asked for. */
.lh-proof-enough[b-ipzg0cz7x4] { fill: color-mix(in srgb, var(--good) 12%, transparent); }

.lh-proof-line[b-ipzg0cz7x4] { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }

/* The conservative curve is dashed, not just paler: on a greyscale print the two
   must still be distinguishable. */
.lh-proof-line--conservative[b-ipzg0cz7x4] {
  stroke: var(--muted);
  stroke-width: 1.75;
  stroke-dasharray: 5 4;
}

.lh-proof-target[b-ipzg0cz7x4] { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lh-proof-required[b-ipzg0cz7x4] { stroke: var(--brand-strong); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lh-proof-dot[b-ipzg0cz7x4] { fill: var(--brand); stroke: var(--paper); stroke-width: 2; }

/* ── The evidence ladder ─────────────────────────────────────────────────────────
   Three rungs, always all three visible. A tool that quietly swaps a typical
   figure for a measured one leaves the reader unable to say which kind of number
   they are looking at, and that distinction is the whole point of the page. So the
   rungs are a fixed scale with a marker on it, not a status line that changes text. */
.lh-ladder[b-ipzg0cz7x4] {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3rem;
  margin: 0 0 .85rem;
  padding: 0;
  counter-reset: rung;
}

.lh-ladder li[b-ipzg0cz7x4] {
  position: relative;
  /* The answer card is centred; a three-item scale is not. Left-aligning keeps the leading
     numeral and the rung name on one reading line instead of stacking them. */
  text-align: left;
  padding: .4rem .55rem .45rem;
  border-radius: var(--radius);
  background: var(--wash);
  border: 1px solid var(--line-soft);
  /* The rungs are a ladder: each one sits a little higher than the last, so the
     direction of "better evidence" is legible before a single word is read. */
  align-self: end;
  /* Not opacity: it composites the text with its background and dropped the detail line to
     2.36:1. A rung not yet reached is quieter by colour and border, and still readable. */
  background: transparent;
  border-style: dashed;
}

.lh-ladder li:nth-child(2)[b-ipzg0cz7x4] { margin-bottom: .3rem; }
.lh-ladder li:nth-child(3)[b-ipzg0cz7x4] { margin-bottom: .6rem; }

.lh-ladder li[b-ipzg0cz7x4]::before {
  counter-increment: rung;
  content: counter(rung);
  display: inline-block;
  min-width: 1.1rem;
  margin-right: .3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.lh-ladder li span[b-ipzg0cz7x4] {
  font-weight: 600;
  font-size: .84rem;
  line-height: 1.2;
}

.lh-ladder li small[b-ipzg0cz7x4] {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
  margin-top: .1rem;
}

/* Rungs already climbed stay legible — the reader can see how far the answer has
   come, not just where it stands. */
.lh-ladder .is-done[b-ipzg0cz7x4] {
  opacity: 1;
  background: color-mix(in srgb, var(--good) 8%, transparent);
  border-color: color-mix(in srgb, var(--good) 35%, var(--line-soft));
}

.lh-ladder .is-done[b-ipzg0cz7x4]::before { content: "✓"; color: var(--good); }

.lh-ladder .is-now[b-ipzg0cz7x4] {
  opacity: 1;
  background: var(--paper);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.lh-ladder .is-now[b-ipzg0cz7x4]::before { color: var(--brand); }

@media (max-width: 30rem) {
  .lh-ladder[b-ipzg0cz7x4] { grid-template-columns: 1fr; gap: .25rem; }
  .lh-ladder li[b-ipzg0cz7x4],
  .lh-ladder li:nth-child(2)[b-ipzg0cz7x4],
  .lh-ladder li:nth-child(3)[b-ipzg0cz7x4] { margin-bottom: 0; }
  .lh-ladder li small[b-ipzg0cz7x4] { display: inline; margin-left: .25rem; }
}

/* ── The pilot strip plot ────────────────────────────────────────────────────────
   Drawn while the runs are still landing. The wait is several minutes; a progress
   bar spends it saying nothing, while the same minutes spent watching dots scatter
   teach the reader what σ is before the number is quoted at them. */
.lh-strip[b-ipzg0cz7x4] {
  margin: .85rem 0 0;
  padding: 0;
}

.lh-strip svg[b-ipzg0cz7x4] {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.lh-strip figcaption[b-ipzg0cz7x4] { margin-top: .4rem; }

.lh-strip-band[b-ipzg0cz7x4] { fill: color-mix(in srgb, var(--brand) 10%, transparent); }
.lh-strip-median[b-ipzg0cz7x4] { stroke: var(--brand); stroke-width: 1.75; }
.lh-strip-axis[b-ipzg0cz7x4] { stroke: var(--line); stroke-width: 1; }
.lh-strip-tick[b-ipzg0cz7x4] { fill: var(--muted); font-size: 10px; }
.lh-strip-label[b-ipzg0cz7x4] { fill: var(--ink-soft); font-size: 11px; font-weight: 600; }

.lh-strip-dot[b-ipzg0cz7x4] {
  fill: var(--brand-strong);
  stroke: var(--paper);
  stroke-width: 1.5;
}

/* Each dot fades in where it lands as its run completes. This is the one place on
   the page where motion carries information: it marks WHICH run just arrived, which
   a static redraw cannot say. It is a single 220 ms fade, not a loop. */
.lh-strip-dot[b-ipzg0cz7x4] { animation: lh-dot-in-b-ipzg0cz7x4 .22s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .lh-strip-dot[b-ipzg0cz7x4] { animation: none; }
}

@keyframes lh-dot-in-b-ipzg0cz7x4 {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── The forest plot ─────────────────────────────────────────────────────────────
   Small multiples, one row per metric, each on its own scale with zero at the
   centre and RIGHT ALWAYS BETTER. The table beside it carries the numbers; this
   carries the shape of the evidence — which is what tells a reader at a glance
   whether an interval clears zero or merely leans. */
.lh-forest[b-ipzg0cz7x4] {
  margin: 1rem 0 0;
  padding: 0;
}

.lh-forest-rows[b-ipzg0cz7x4] {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: .1rem .6rem;
  align-items: center;
}

.lh-forest-name[b-ipzg0cz7x4] {
  font-size: .84rem;
  font-weight: 600;
  text-align: right;
}

.lh-forest-rows svg[b-ipzg0cz7x4] {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.lh-forest-zero[b-ipzg0cz7x4] { stroke: var(--line); stroke-width: 1; }
.lh-forest-noise[b-ipzg0cz7x4] { fill: color-mix(in srgb, var(--muted) 16%, transparent); }
.lh-forest-ci[b-ipzg0cz7x4] { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.lh-forest-ci.is-real[b-ipzg0cz7x4] { stroke: var(--good); }
.lh-forest-ci.is-worse[b-ipzg0cz7x4] { stroke: var(--bad); }

.lh-forest-point[b-ipzg0cz7x4] {
  fill: var(--paper);
  stroke: var(--muted);
  stroke-width: 2.5;
}

.lh-forest-point.is-real[b-ipzg0cz7x4] { stroke: var(--good); }
.lh-forest-point.is-worse[b-ipzg0cz7x4] { stroke: var(--bad); }

.lh-forest-legend[b-ipzg0cz7x4] {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .8rem;
}

/* The run budget the visitor named, drawn on the same curve as the requirement. Solid rather
   than dashed, because it is a fact about their constraints and not a derived quantity. */
.lh-proof-budget[b-ipzg0cz7x4] { stroke: var(--ink-soft); stroke-width: 1.5; }
.lh-proof-dot--budget[b-ipzg0cz7x4] { fill: var(--ink-soft); }

/* ── The three doors ─────────────────────────────────────────────────────────────
   Not a nav: three statements of intent in the reader's own words, each landing on
   the part of the page that answers it. Plain anchors, so they work with the strict
   CSP, with JavaScript off, and with the browser's own find-on-page. */
.lh-journeys[b-ipzg0cz7x4] {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
}

.lh-journeys a[b-ipzg0cz7x4] {
  display: block;
  height: 100%;
  padding: .85rem .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lh-journeys a:hover[b-ipzg0cz7x4] {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -12px rgb(0 0 0 / .35);
}

/* Focus gets the lift and the border, never a box-shadow: the site's focus ring is itself a
   box-shadow, and overriding it here left keyboard users with no ring on these three cards. */
.lh-journeys a:focus-visible[b-ipzg0cz7x4] {
  border-color: var(--brand);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .lh-journeys a[b-ipzg0cz7x4] { transition: none; }
  .lh-journeys a:hover[b-ipzg0cz7x4],
  .lh-journeys a:focus-visible[b-ipzg0cz7x4] { transform: none; }
}

.lh-journeys__q[b-ipzg0cz7x4] {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
  margin-bottom: .1rem;
}

.lh-journeys strong[b-ipzg0cz7x4] {
  display: block;
  font-size: 1.02rem;
  line-height: 1.25;
}

/* The arrow is decorative and generated, so it never lands in the accessible name or in a
   copied selection. */
.lh-journeys strong[b-ipzg0cz7x4]::after {
  content: " →";
  color: var(--brand);
}

.lh-journeys small[b-ipzg0cz7x4] {
  display: block;
  margin-top: .3rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

/* ── The experiment kit ──────────────────────────────────────────────────────────
   Four files, each with one line saying what it is for. A bare list of filenames
   makes the reader open all four to find out which one they want. */
.lh-kit[b-ipzg0cz7x4] {
  list-style: none;
  margin: .75rem 0 .5rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.lh-kit li[b-ipzg0cz7x4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .65rem;
  background: var(--paper);
}

.lh-kit li + li[b-ipzg0cz7x4] { border-top: 1px solid var(--line-soft); }

.lh-kit code[b-ipzg0cz7x4] {
  font-size: .85rem;
  font-weight: 600;
}

.lh-kit small[b-ipzg0cz7x4] {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  margin-top: .1rem;
}

.lh-kit .btn[b-ipzg0cz7x4] { flex: none; }

@media (max-width: 26rem) {
  .lh-kit li[b-ipzg0cz7x4] { flex-direction: column; align-items: flex-start; }
}

/* A metric whose arms are too thin to bootstrap gets a sentence, not a chart. */
.lh-forest-thin[b-ipzg0cz7x4] {
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
}

/* The forest is an SVG scaled by its container, so a fixed name column starves it on a phone:
   at 320px the label took most of the width and the zero tick — the reference the whole plot is
   read against — rendered thinner than a pixel. Below this width the name sits above its row. */
@media (max-width: 32rem) {
  .lh-forest-rows[b-ipzg0cz7x4] {
    grid-template-columns: 1fr;
    gap: .1rem;
  }

  .lh-forest-name[b-ipzg0cz7x4] {
    text-align: left;
    margin-top: .35rem;
  }
}

/* What the same claim would cost comparing means, on the curve drawn for the median the verdict
   actually compares. Dotted rather than dashed, so it reads as a third thing beside the target and
   the requirement. */
.lh-proof-mean[b-ipzg0cz7x4] { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 2 3; }

/* The verdict's second condition: a change below this line is not proven at any n. Dashed and in
   the failure colour, because it is the one line on the figure that more runs never move. */
.lh-proof-floor[b-ipzg0cz7x4] { stroke: var(--bad); stroke-width: 1.25; stroke-dasharray: 6 4; opacity: .85; }

/* The pre-registered outcome. Marked structurally rather than only by the word in its Role cell,
   so the row the claim rests on is findable at a glance in a five-row table. */
.is-primary-outcome > td:first-child[b-ipzg0cz7x4] { box-shadow: inset 3px 0 0 var(--brand); }
.is-primary-outcome[b-ipzg0cz7x4] { background: var(--brand-wash); }

/* ── the provenance chain ─────────────────────────────────────────────────────────────────────
   Six links between a plan and a claim. State is carried by the mark and the label, never by
   colour alone — the whole point is that it survives being printed or read aloud. */
.lh-chain[b-ipzg0cz7x4]{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 0 0; padding:0;}
.lh-chain li[b-ipzg0cz7x4]{flex:1 1 9rem; min-width:0; display:grid; grid-template-columns:1.1rem 1fr; gap:.1rem .45rem;
  align-items:start; padding:.5rem .6rem; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  background:var(--card); font-size:.82rem;}
.lh-chain li b[b-ipzg0cz7x4]{grid-column:2; font-size:.86rem;}
.lh-chain-mark[b-ipzg0cz7x4]{grid-row:span 2; font-family:var(--font-mono); font-size:.9rem; line-height:1.25;}
.lh-chain-note[b-ipzg0cz7x4]{grid-column:2; color:var(--muted); font-size:.76rem; line-height:1.4; overflow-wrap:anywhere;}
.lh-chain-ok[b-ipzg0cz7x4]{background:var(--brand-wash); border-color:#bcdcc8;}
.lh-chain-ok .lh-chain-mark[b-ipzg0cz7x4]{color:var(--good);}
.lh-chain-broken[b-ipzg0cz7x4]{background:#fdf6f5; border-color:#f0d3d0;}
.lh-chain-broken .lh-chain-mark[b-ipzg0cz7x4]{color:var(--bad);}
.lh-chain-unknown .lh-chain-mark[b-ipzg0cz7x4]{color:var(--warn);}

/* ── the three questions the verdict answers ───────────────────────────────────────────────── */
.lh-reading[b-ipzg0cz7x4]{display:grid; gap:.5rem; margin:.85rem 0 0;}
.lh-reading > div[b-ipzg0cz7x4]{display:grid; gap:.15rem; padding:.55rem .7rem; border-left:3px solid var(--line);
  background:var(--wash); border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.lh-reading dt[b-ipzg0cz7x4]{font-weight:650; font-size:.9rem;}
.lh-reading dd[b-ipzg0cz7x4]{margin:0; color:var(--muted); font-size:.85rem; line-height:1.55;}

/* ── run order and drift ───────────────────────────────────────────────────────────────────── */
.lh-order[b-ipzg0cz7x4]{margin:1rem 0 0;}
.lh-order svg[b-ipzg0cz7x4]{display:block; max-width:100%;}
.lh-order-dot--before[b-ipzg0cz7x4]{fill:var(--ink); }
.lh-order-dot--after[b-ipzg0cz7x4]{fill:var(--brand-strong);}
.lh-order-med[b-ipzg0cz7x4]{stroke-width:1.5;}
.lh-order-med--before[b-ipzg0cz7x4]{stroke:var(--ink); stroke-dasharray:2 3; opacity:.55;}
.lh-order-med--after[b-ipzg0cz7x4]{stroke:var(--brand-strong); opacity:.55;}
.lh-order-boundary[b-ipzg0cz7x4]{stroke:var(--bad); stroke-width:1.5; stroke-dasharray:4 3;}
.lh-order-tick[b-ipzg0cz7x4]{font-family:var(--font-mono); font-size:9px; fill:var(--muted);}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* /pricing — scoped styles.

   Zero JavaScript. Every animation here is scroll-driven CSS behind @supports, and — as on the
   research and tools pages — the BASE state is the FINISHED state. A browser without scroll
   timelines, the global prefers-reduced-motion rule in site.css, and print all render the completed
   composition; the motion only replays the reasoning for someone who scrolls to it.

   Nothing loops, nothing pulses, nothing counts up, and the CTA never moves. On a page selling
   measurement rigour, decorative motion is a claim against the product. */

/* ------------------------------------------------------------------ purchase hero */
.pr-hero[b-vgo7avmrln] { padding-bottom: clamp(2rem, 4vw, 3rem); }
.pr-hero-grid[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.pr-h1[b-vgo7avmrln] { margin: .35rem 0 .6rem; font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.02em; }
.pr-lede[b-vgo7avmrln] { margin: 0 0 1.25rem; max-width: 52ch; color: var(--ink-soft); font-size: 1.05rem; }

.pr-price[b-vgo7avmrln] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 .9rem; }
.pr-price b[b-vgo7avmrln] { font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.pr-price span[b-vgo7avmrln] { color: var(--muted); font-size: .92rem; }

.pr-form[b-vgo7avmrln] { margin: 0 0 1.25rem; }
/* The decision comes before the specification: this button is reachable without reading anything
   below it, which is the single structural change the whole redesign turns on. */
.pr-cta[b-vgo7avmrln] { width: 100%; }
.pr-cta-sub[b-vgo7avmrln] { margin: .55rem 0 0; text-align: center; color: var(--muted); font-size: .84rem; }
.pr-terms[b-vgo7avmrln] { margin: .55rem 0 0; text-align: center; }

.pr-prefill[b-vgo7avmrln] { margin: .85rem 0 0; }
.pr-prefill > summary[b-vgo7avmrln] {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    min-height: 44px;
    padding: .35rem 0;
    color: var(--muted);
    font-size: .86rem;
    list-style: none;            /* the UA triangle sits flush to the container edge and misaligns
                                    with the button above it; a rotating caret we control does not */
}
.pr-prefill > summary[b-vgo7avmrln]::-webkit-details-marker { display: none; }
.pr-prefill > summary[b-vgo7avmrln]::before {
    content: "";
    width: .45rem; height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.pr-prefill[open] > summary[b-vgo7avmrln]::before { transform: rotate(45deg); }
.pr-prefill > summary:hover[b-vgo7avmrln] { color: var(--brand-strong); }

.pr-summary[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: .4rem 1.5rem;
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 .6rem;
    padding: clamp(.9rem, 2vw, 1.2rem) 0 0;
    border-top: 1px solid var(--line-soft);
    list-style: none;
}
.pr-summary li[b-vgo7avmrln] { position: relative; padding-left: 1.4rem; font-size: .95rem; }
.pr-summary li[b-vgo7avmrln]::before {
    content: "✓";
    position: absolute; left: 0;
    color: var(--brand);
    font-weight: 700;
}
.pr-more[b-vgo7avmrln] { margin: 0; font-size: .9rem; }

/* The terms of the deal, sat where the decision is made. A neutral marker, not a checkmark: these
   are conditions, not features being sold. */
.buy-facts[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: .5rem 2rem;
    margin: 1.25rem 0 0;
    padding: .9rem 1.1rem;
    list-style: none;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--wash);
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted);
}
.buy-facts li[b-vgo7avmrln] { position: relative; padding-left: 1.15rem; }
.buy-facts li[b-vgo7avmrln]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--brand);
}
.buy-facts b[b-vgo7avmrln] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ the signature visualization */
.pr-viz[b-vgo7avmrln] {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 6px);
    background: var(--card);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.pr-viz-top[b-vgo7avmrln] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--wash);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.pr-viz-badge[b-vgo7avmrln] { padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.pr-viz-body[b-vgo7avmrln] { padding: clamp(1rem, 2.5vw, 1.5rem); }

.pr-dots[b-vgo7avmrln] { display: flex; flex-wrap: wrap; gap: .42rem; margin-bottom: 1.1rem; }
.pr-dot[b-vgo7avmrln] { width: .95rem; height: .95rem; border-radius: 50%; }
/* The four that survive stay saturated; the seventeen recede. Never colour alone — the counts and
   their labels are stated in words directly beneath, and the whole figure carries an aria-label. */
.pr-dot.is-real[b-vgo7avmrln] { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.pr-dot.is-noise[b-vgo7avmrln] { background: var(--line); }

.pr-viz-out[b-vgo7avmrln] { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; margin-bottom: .9rem; }
.pr-out[b-vgo7avmrln] { display: contents; }
.pr-out b[b-vgo7avmrln] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.pr-out.is-real b[b-vgo7avmrln] { color: var(--brand-strong); }
.pr-out span[b-vgo7avmrln] { color: var(--muted); font-size: .88rem; }
.pr-out.is-real span[b-vgo7avmrln] { color: var(--ink); font-weight: 600; }

.pr-noise[b-vgo7avmrln] {
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--wash);
    color: var(--muted);
    font-size: .84rem;
}
.pr-noise b[b-vgo7avmrln] { color: var(--ink); font-family: var(--font-display); font-size: 1rem; margin-right: .3rem; }

/* The bottleneck enters from OUTSIDE the dot field, because that is the actual claim: it was never
   in the warning list at all. */
.pr-silent[b-vgo7avmrln] {
    display: grid;
    gap: .15rem;
    padding: .7rem .85rem;
    border: 1px solid var(--brand);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
}
.pr-silent-tag[b-vgo7avmrln] {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.pr-silent b[b-vgo7avmrln] { font-size: 1rem; }
.pr-silent span:last-child[b-vgo7avmrln] { color: var(--muted); font-size: .84rem; }

.pr-viz-foot[b-vgo7avmrln] {
    margin: 0;
    padding: .7rem .9rem;
    border-top: 1px solid var(--line-soft);
    background: var(--wash);
    color: var(--muted);
    font-size: .84rem;
}

/* ------------------------------------------------------------------ shared band furniture */
.pr-band[b-vgo7avmrln] { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pr-band-h[b-vgo7avmrln] { margin: .35rem 0 .6rem; font-size: var(--text-2xl); max-width: 24ch; }
.pr-band-lede[b-vgo7avmrln] { margin: 0 0 clamp(1.25rem, 3vw, 2rem); max-width: 66ch; color: var(--ink-soft); }
.pr-band-link[b-vgo7avmrln] { margin: 1.25rem 0 0; font-size: .95rem; }

/* ------------------------------------------------------------------ the artifact */
.pr-spec-band[b-vgo7avmrln] { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pr-spec-h[b-vgo7avmrln] { margin: .35rem 0 .6rem; font-size: var(--text-2xl); max-width: 26ch; }
.pr-spec-lede[b-vgo7avmrln] { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); max-width: 66ch; }

.pr-spec[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.pr-finding[b-vgo7avmrln] {
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    background: rgb(4 15 10 / .45);
    overflow: hidden;
}
.pr-finding-head[b-vgo7avmrln] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--dark-line);
}
.pr-verdict[b-vgo7avmrln] {
    padding: .18rem .6rem;
    border-radius: 999px;
    background: var(--signal);
    color: #06301a;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pr-finding-meta[b-vgo7avmrln] { color: var(--dark-soft); font-size: .76rem; }

.pr-layers[b-vgo7avmrln] { margin: 0; padding: 0; list-style: none; }
.pr-layers li[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) 1fr;
    gap: .35rem 1rem;
    padding: .65rem .9rem;
    border-top: 1px solid rgb(255 255 255 / .06);
}
.pr-layers li:first-child[b-vgo7avmrln] { border-top: 0; }
.pr-layer-k[b-vgo7avmrln] {
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--signal);
}
.pr-layer-v[b-vgo7avmrln] { color: var(--dark-ink); font-size: .92rem; line-height: 1.5; }

.pr-spec-points[b-vgo7avmrln] { margin: 0; padding: 0; list-style: none; }
.pr-spec-points li[b-vgo7avmrln] { margin-bottom: 1rem; color: var(--dark-soft); font-size: .95rem; line-height: 1.55; }
.pr-spec-points b[b-vgo7avmrln] { display: block; color: var(--dark-ink); }

/* ------------------------------------------------------------------ outcomes */
.pr-outcomes[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.pr-outcome[b-vgo7avmrln] { display: flex; flex-direction: column; }
.pr-outcome-n[b-vgo7avmrln] {
    margin: 0 0 .2rem;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--brand);
}
.pr-outcome h3[b-vgo7avmrln] { margin: 0 0 .7rem; font-size: var(--text-lg); }
.pr-outcome .check-list[b-vgo7avmrln] { flex: 1; }
.pr-outcome-link[b-vgo7avmrln] { margin: 1rem 0 0; font-size: .88rem; line-height: 1.7; }

.pr-details[b-vgo7avmrln] { margin: 1rem 0 0; }
.pr-details > summary[b-vgo7avmrln] {
    cursor: pointer;
    padding: .4rem 0;
    color: var(--brand-strong);
    font-size: .86rem;
    font-weight: 600;
}
.pr-details > p[b-vgo7avmrln] { margin: .4rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }

/* ------------------------------------------------------------------ comparison */
/* A matrix, not a ratio bar: the old graphic drew a 9% bar with no axis and no value, which is
   exactly the kind of decoration this site's research pages exist to criticise. */
.pr-compare td:first-child[b-vgo7avmrln] { white-space: nowrap; }

/* ------------------------------------------------------------------ calibration */
.pr-calib[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.pr-calib-copy p[b-vgo7avmrln] { max-width: 60ch; color: var(--ink-soft); }

.pr-cases[b-vgo7avmrln] {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
}
.pr-case-dots[b-vgo7avmrln] { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
/* Filled, because all eight cases met the bar. Hollow rings would read as empty slots — the
   opposite of what the pilot found. */
.pr-case-dot[b-vgo7avmrln] {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-wash);
}
.pr-cases figcaption[b-vgo7avmrln] { display: grid; gap: .25rem; }
.pr-cases figcaption b[b-vgo7avmrln] { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.pr-cases figcaption span[b-vgo7avmrln] { color: var(--muted); font-size: .86rem; }
/* The scope limit is part of the claim, not a disclaimer bolted on: same block, same weight class. */
.pr-cases figcaption em[b-vgo7avmrln] { margin-top: .35rem; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------------ timeline */
.pr-timeline[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.pr-timeline li[b-vgo7avmrln] { position: relative; padding-top: 2.6rem; }
.pr-step-n[b-vgo7avmrln] {
    position: absolute;
    top: 0; left: 0;
    display: grid;
    place-items: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
}
/* The connector is drawn between steps, so the four cards read as one sequence rather than four
   unrelated cards. It is decorative: the ordered list already carries the sequence semantically. */
.pr-timeline li[b-vgo7avmrln]::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 2.4rem;
    right: -1rem;
    height: 2px;
    background: var(--line);
    transform-origin: left center;
}
.pr-timeline li:last-child[b-vgo7avmrln]::before { display: none; }
.pr-timeline h3[b-vgo7avmrln] { margin: 0 0 .4rem; font-size: 1.05rem; }
.pr-timeline p[b-vgo7avmrln] { margin: 0; color: var(--muted); font-size: .92rem; }

.pr-agency[b-vgo7avmrln] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.pr-agency h3[b-vgo7avmrln] { margin: 0 0 .3rem; font-size: 1.05rem; }
.pr-agency p[b-vgo7avmrln] { margin: 0; color: var(--muted); font-size: .92rem; max-width: 62ch; }
.pr-agency-links[b-vgo7avmrln] { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .9rem; }

/* ------------------------------------------------------------------ not ready */
.pr-notready[b-vgo7avmrln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.pr-notready-card h3[b-vgo7avmrln] { margin: .3rem 0 .6rem; font-size: var(--text-lg); }
.pr-notready-card p[b-vgo7avmrln] { color: var(--muted); }
.pr-notready-cta[b-vgo7avmrln] { margin: 1rem 0 0; }

/* ------------------------------------------------------------------ closing */
.pr-final[b-vgo7avmrln] { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pr-final-h[b-vgo7avmrln] { margin: 0 0 .5rem; font-size: var(--text-2xl); }
.pr-final-sub[b-vgo7avmrln] { margin: 0 0 1.5rem; font-size: 1.05rem; }
.pr-final-form[b-vgo7avmrln] { margin: 0 0 1.25rem; }
.pr-final-strip[b-vgo7avmrln] { justify-content: center; }
.pr-final-note[b-vgo7avmrln] { margin: 1.5rem auto 0; max-width: 62ch; font-size: .9rem; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 62rem) {
    .pr-hero-grid[b-vgo7avmrln], .pr-spec[b-vgo7avmrln], .pr-calib[b-vgo7avmrln] { grid-template-columns: minmax(0, 1fr); }
    /* The visualization is the argument for the price, so on one column it follows the decision
       rather than pushing the button below the fold. */
    .pr-viz[b-vgo7avmrln] { order: 2; }
    .pr-timeline li[b-vgo7avmrln]::before { display: none; }
}
@media (max-width: 40rem) {
    .pr-layers li[b-vgo7avmrln] { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .pr-agency-links[b-vgo7avmrln] { flex-direction: column; gap: .35rem; }
    .pr-final-form .btn[b-vgo7avmrln] { width: 100%; }
}

/* ------------------------------------------------------------------ motion
   Three animations, each explaining one state change the reader just scrolled to. All of them are
   additive: remove every rule below and the page still reads correctly, because the base state is
   the final state. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        /* 1. Adjudication. The seventeen recede and the four hold — the mechanism, in one gesture. */
        @keyframes pr-recede-b-vgo7avmrln { from { background: var(--brand); opacity: 1; } to { background: var(--line); opacity: 1; } }
        @keyframes pr-hold-b-vgo7avmrln { from { box-shadow: 0 0 0 0 var(--brand-wash); } to { box-shadow: 0 0 0 3px var(--brand-wash); } }
        @keyframes pr-rise-b-vgo7avmrln { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

        .pr-dot.is-noise[b-vgo7avmrln] {
            animation: pr-recede-b-vgo7avmrln .5s ease-out both;
            animation-timeline: view();
            animation-range: entry 10% entry 55%;
        }
        .pr-dot.is-real[b-vgo7avmrln] {
            animation: pr-hold-b-vgo7avmrln .5s ease-out both;
            animation-timeline: view();
            animation-range: entry 20% entry 65%;
        }
        /* The outcome and the bottleneck arrive after the sort, not with it. */
        .pr-viz-out[b-vgo7avmrln], .pr-noise[b-vgo7avmrln] {
            animation: pr-rise-b-vgo7avmrln .45s ease-out both;
            animation-timeline: view();
            animation-range: entry 30% entry 75%;
        }
        .pr-silent[b-vgo7avmrln] {
            animation: pr-rise-b-vgo7avmrln .5s cubic-bezier(.2,.75,.2,1) both;
            animation-timeline: view();
            animation-range: entry 40% entry 90%;
        }

        /* 2. The finding builds a case: each layer arrives in the order the audit produces it. */
        @keyframes pr-layer-b-vgo7avmrln { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
        .pr-layers li[b-vgo7avmrln] {
            animation: pr-layer-b-vgo7avmrln .4s ease-out both;
            animation-timeline: view();
            animation-range: entry 5% entry 40%;
        }
        .pr-layers li:nth-child(2)[b-vgo7avmrln] { animation-range: entry 10% entry 45%; }
        .pr-layers li:nth-child(3)[b-vgo7avmrln] { animation-range: entry 15% entry 50%; }
        .pr-layers li:nth-child(4)[b-vgo7avmrln] { animation-range: entry 20% entry 55%; }
        .pr-layers li:nth-child(5)[b-vgo7avmrln] { animation-range: entry 25% entry 60%; }
        .pr-layers li:nth-child(6)[b-vgo7avmrln] { animation-range: entry 30% entry 65%; }
        .pr-layers li:nth-child(7)[b-vgo7avmrln] { animation-range: entry 35% entry 70%; }

        /* 3. The process connector draws once, left to right, so four cards read as one path. */
        @keyframes pr-draw-b-vgo7avmrln { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .pr-timeline li[b-vgo7avmrln]::before {
            animation: pr-draw-b-vgo7avmrln .5s ease-out both;
            animation-timeline: view();
            animation-range: entry 15% entry 70%;
        }
    }
}

@media print {
    .pr-viz[b-vgo7avmrln], .pr-cases[b-vgo7avmrln], .pr-finding[b-vgo7avmrln] { box-shadow: none; break-inside: avoid; }
    .pr-prefill[b-vgo7avmrln], .pr-details[b-vgo7avmrln] { display: block; }
    .pr-prefill[open] > summary[b-vgo7avmrln], .pr-details > summary[b-vgo7avmrln] { list-style: none; }
}
/* /Components/Pages/Research.razor.rz.scp.css */
/* /research — scoped styles.
   Everything here is CSS only: this page renders under ExcludeFromInteractiveRouting and ships
   no JavaScript, so the decision filter is driven by radio inputs and sibling selectors, and the
   two animations are scroll-driven (animation-timeline) behind @supports. In every case the BASE
   state is the FINISHED state, so a browser without scroll timelines — and the global
   prefers-reduced-motion rule in site.css, which kills all animation — still shows the full chart. */

/* ---------------------------------------------------------------- hero */
.rsx-proof[b-my1beebi86] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}
.rsx-proof li[b-my1beebi86] {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .3rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: .88rem;
    font-weight: 500;
}
.rsx-proof b[b-my1beebi86] { color: var(--brand-strong); font-family: var(--font-display); font-size: 1rem; }

/* ---------------------------------------------------------------- featured study */
.rsx-lead[b-my1beebi86] { padding-block: 0 clamp(1.5rem, 4vw, 2.5rem); }
.rsx-featured[b-my1beebi86] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    border: 1px solid var(--dark-line);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: var(--shadow-2);
}
.rsx-featured-copy p[b-my1beebi86] { color: var(--dark-soft); }
.rsx-featured-copy strong[b-my1beebi86], .rsx-featured-copy em[b-my1beebi86] { color: var(--dark-ink); }
.rsx-featured h2[b-my1beebi86] { font-size: var(--text-2xl); margin: 0 0 .6rem; }
.rsx-featured h2 a[b-my1beebi86] { color: var(--dark-ink); text-decoration: none; }
.rsx-featured h2 a:hover[b-my1beebi86] { color: var(--signal); text-decoration: underline; }

.rsx-flabel[b-my1beebi86] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.rsx-flabel span[b-my1beebi86] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--signal);
}
.rsx-flabel span[b-my1beebi86]::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 .28rem rgb(141 240 166 / .12);
}
.rsx-flabel time[b-my1beebi86] { color: var(--dark-soft); letter-spacing: .06em; text-transform: none; font-weight: 500; }
.rsx-fkicker[b-my1beebi86] { margin: 0 0 .35rem; color: var(--dark-soft); font-size: .92rem; }

.rsx-assets[b-my1beebi86] { color: var(--muted); font-size: .92rem; }
.rsx-featured .rsx-assets[b-my1beebi86] { color: var(--dark-soft); opacity: .8; }
.rsx-sibling[b-my1beebi86] { margin: 1.1rem 0 0; font-size: .92rem; color: var(--dark-soft); }

.rsx-fchart[b-my1beebi86] { margin: 0; }
.rsx-fchart .rsx-svg[b-my1beebi86] {
    width: 100%;
    height: auto;
    padding: .6rem;
    border: 1px solid rgb(255 255 255 / .09);
    border-radius: var(--radius);
    background: rgb(4 15 10 / .42);
}
.rsx-fchart figcaption[b-my1beebi86] {
    margin-top: .7rem;
    color: var(--dark-soft);
    font-size: .85rem;
    line-height: 1.5;
}
.rsx-src[b-my1beebi86] { display: block; opacity: .72; font-size: .8rem; margin-top: .2rem; }

/* featured chart text */
.rsx-svg-h[b-my1beebi86] { fill: var(--dark-ink); font-size: 14px; font-weight: 700; }
.rsx-svg-ax[b-my1beebi86] { fill: var(--dark-soft); font-size: 11px; }
.rsx-svg-v[b-my1beebi86] { fill: var(--dark-ink); font-size: 13px; font-weight: 700; }
.rsx-svg-sm[b-my1beebi86] { fill: var(--dark-soft); font-size: 9.5px; }
.rsx-svg-lg[b-my1beebi86] { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
.rsx-svg-rule[b-my1beebi86] { stroke: #234338; stroke-width: 1; }
.rsx-svg-split[b-my1beebi86] { stroke: #29463a; stroke-dasharray: 3 5; }
.rsx-svg .rsx-good[b-my1beebi86] { fill: var(--signal); }
.rsx-svg .rsx-bad[b-my1beebi86] { fill: var(--bad-dark); }

/* ---------------------------------------------------------------- publishing standard strip */
.rsx-standard[b-my1beebi86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: .75rem;
    margin-bottom: clamp(1rem, 3vw, 2rem);
}
.rsx-standard a[b-my1beebi86] {
    display: block;
    padding: .9rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rsx-standard a:hover[b-my1beebi86] { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.rsx-num[b-my1beebi86] {
    display: block;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--brand);
}
.rsx-standard strong[b-my1beebi86] { display: block; margin: .15rem 0 .1rem; font-size: .98rem; }
.rsx-standard a > span:last-child[b-my1beebi86] { display: block; color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* ---------------------------------------------------------------- library + decision filter */
.rsx-lib-head[b-my1beebi86] { margin-bottom: clamp(1.1rem, 3vw, 1.6rem); }

/* The radios live in the flow so `:checked ~` can reach the chips and the grid; they stay
   focusable (clip-path, not display:none) so the filter is fully keyboard-operable. */
.rsx-radio[b-my1beebi86] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.rsx-chips[b-my1beebi86] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: clamp(1.25rem, 3vw, 1.9rem);
}
.rsx-chips label[b-my1beebi86] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .4rem 1.05rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-soft);
    font-size: .93rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.rsx-chips label:hover[b-my1beebi86] { border-color: var(--brand); color: var(--brand-strong); }
.rsx-chips label span[b-my1beebi86] {
    min-width: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--wash-deep);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

#rsx-t-all:checked ~ .rsx-chips label[for="rsx-t-all"][b-my1beebi86],
#rsx-t-measure:checked ~ .rsx-chips label[for="rsx-t-measure"][b-my1beebi86],
#rsx-t-change:checked ~ .rsx-chips label[for="rsx-t-change"][b-my1beebi86],
#rsx-t-worth:checked ~ .rsx-chips label[for="rsx-t-worth"][b-my1beebi86] {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: #fff;
}
#rsx-t-all:checked ~ .rsx-chips label[for="rsx-t-all"] span[b-my1beebi86],
#rsx-t-measure:checked ~ .rsx-chips label[for="rsx-t-measure"] span[b-my1beebi86],
#rsx-t-change:checked ~ .rsx-chips label[for="rsx-t-change"] span[b-my1beebi86],
#rsx-t-worth:checked ~ .rsx-chips label[for="rsx-t-worth"] span[b-my1beebi86] {
    background: rgb(255 255 255 / .2);
    color: #fff;
}
#rsx-t-all:focus-visible ~ .rsx-chips label[for="rsx-t-all"][b-my1beebi86],
#rsx-t-measure:focus-visible ~ .rsx-chips label[for="rsx-t-measure"][b-my1beebi86],
#rsx-t-change:focus-visible ~ .rsx-chips label[for="rsx-t-change"][b-my1beebi86],
#rsx-t-worth:focus-visible ~ .rsx-chips label[for="rsx-t-worth"][b-my1beebi86] {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* display:none removes a filtered-out card from the tab order and the a11y tree too. */
#rsx-t-measure:checked ~ .rsx-grid .rsx-card:not([data-topics~="measure"])[b-my1beebi86],
#rsx-t-change:checked ~ .rsx-grid .rsx-card:not([data-topics~="change"])[b-my1beebi86],
#rsx-t-worth:checked ~ .rsx-grid .rsx-card:not([data-topics~="worth"])[b-my1beebi86] {
    display: none;
}

.rsx-grid[b-my1beebi86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}
.rsx-card[b-my1beebi86] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rsx-card:hover[b-my1beebi86] { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line); }
.rsx-viz[b-my1beebi86] {
    margin: 0;
    padding: .9rem 1rem .5rem;
    background: linear-gradient(180deg, var(--wash), var(--card));
    border-bottom: 1px solid var(--line-soft);
}
.rsx-viz svg[b-my1beebi86] { width: 100%; height: auto; }
.rsx-body[b-my1beebi86] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem clamp(1rem, 2.5vw, 1.4rem) 1.2rem;
}
.rsx-body p[b-my1beebi86] { margin: 0; }
.rsx-body h3[b-my1beebi86] { margin: 0; font-size: var(--text-xl); }
.rsx-body h3 a[b-my1beebi86] { color: var(--ink); text-decoration: none; }
.rsx-body h3 a:hover[b-my1beebi86] { color: var(--brand-strong); text-decoration: underline; }
.rsx-meta[b-my1beebi86] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .7rem;
    font-size: .78rem;
}
.rsx-tag[b-my1beebi86] {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-weight: 700;
    letter-spacing: .02em;
}
.rsx-meta time[b-my1beebi86] { color: var(--muted); }
.rsx-links[b-my1beebi86] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .95rem;
    padding-top: .35rem;
    font-size: .92rem;
}
/* Pins the link row to the bottom so every card's actions line up across a row. Written as a
   descendant selector, not !important, so it out-specifies `.rsx-body p { margin: 0 }`. */
.rsx-body .rsx-links[b-my1beebi86], .rsx-tool .rsx-links[b-my1beebi86] { margin-top: auto; }
.rsx-links a[b-my1beebi86] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 34px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.rsx-links a:hover[b-my1beebi86] { border-bottom-color: currentColor; }
.rsx-links .rsx-primary[b-my1beebi86] { color: var(--brand-strong); }
.rsx-links a:not(.rsx-primary)[b-my1beebi86] { color: var(--muted); font-weight: 500; }
.rsx-links a:not(.rsx-primary):hover[b-my1beebi86] { color: var(--brand-strong); }
.rsx-links .arrow[b-my1beebi86] { transition: transform .15s ease; }
.rsx-links a:hover .arrow[b-my1beebi86] { transform: translateX(3px); }

/* card chart text — one type scale for all nine visuals */
.rsx-viz .rsx-vt[b-my1beebi86] { font-size: 9.5px; font-weight: 700; }
.rsx-viz .rsx-vs[b-my1beebi86] { font-size: 8.5px; fill: var(--muted); }
.rsx-viz .rsx-vnum[b-my1beebi86] { font-size: 12px; font-weight: 750; }
.rsx-viz .rsx-vbig[b-my1beebi86] { font-size: 15px; font-weight: 800; }
.rsx-viz .rsx-vb[b-my1beebi86] { fill: var(--ink-soft); }
.rsx-viz .rsx-good[b-my1beebi86] { fill: var(--good); }
.rsx-viz .rsx-warn[b-my1beebi86] { fill: var(--warn); }
.rsx-viz .rsx-bad[b-my1beebi86] { fill: var(--bad); }
.rsx-viz .rsx-info[b-my1beebi86] { fill: #2563a5; }
.rsx-viz .rsx-accent[b-my1beebi86] { fill: #6b4a8a; }
.rsx-viz .rsx-mutec[b-my1beebi86] { fill: var(--muted); }
.rsx-viz .rsx-vaxis[b-my1beebi86] { stroke: #9aac9f; fill: none; }
.rsx-viz .rsx-vdash[b-my1beebi86] { stroke: var(--muted); stroke-dasharray: 4 4; }
.rsx-viz .rsx-vdash-bad[b-my1beebi86] { stroke: var(--bad); stroke-dasharray: 5 4; }
.rsx-viz .rsx-vdash-accent[b-my1beebi86] { stroke: #6b4a8a; stroke-width: 2; stroke-dasharray: 5 4; }
.rsx-viz .rsx-vgap[b-my1beebi86] { stroke: var(--bad); stroke-width: 1.5; fill: none; }
.rsx-viz .rsx-varrow[b-my1beebi86] { stroke: var(--muted); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rsx-viz .rsx-q-ok[b-my1beebi86] { fill: #e5f2e9; stroke: var(--good); }
.rsx-viz .rsx-q-bad[b-my1beebi86] { fill: #f7e3e1; stroke: var(--bad); stroke-width: 1.6; }
.rsx-viz .rsx-q-warn[b-my1beebi86] { fill: #faf0dc; stroke: var(--warn); }
.rsx-viz .rsx-q-mute[b-my1beebi86] { fill: #edf2ef; stroke: #8b9c92; }
.rsx-viz .rsx-q-info[b-my1beebi86] { fill: #e7eff8; stroke: #2563a5; }
.rsx-viz .rsx-q-accent[b-my1beebi86] { fill: #efe6f4; stroke: #6b4a8a; stroke-width: 2; }

/* Hovering a card lifts its emphasised shape — the one element that carries the finding. */
.rsx-pulse[b-my1beebi86] { transition: stroke-width .2s ease, filter .2s ease; }
.rsx-card:hover .rsx-pulse[b-my1beebi86] { stroke-width: 2.6; filter: drop-shadow(0 2px 6px rgb(13 33 23 / .2)); }

/* ---------------------------------------------------------------- tools */
.rsx-tools-head[b-my1beebi86] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.rsx-tool-grid[b-my1beebi86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
/* Five tools into an auto-fit three-column grid strands the fifth card alone on its own row.
   A six-track grid takes 3+3 then 2+2+2, so both rows are full. */
@media (min-width: 62rem) {
    .rsx-tool-grid[b-my1beebi86] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rsx-tool:nth-child(-n+2)[b-my1beebi86] { grid-column: span 3; }
    .rsx-tool:nth-child(n+3)[b-my1beebi86] { grid-column: span 2; }
}
.rsx-tool[b-my1beebi86] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rsx-tool:hover[b-my1beebi86] { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.rsx-tool p[b-my1beebi86] { margin: 0; }
.rsx-tool h3[b-my1beebi86] { margin: 0; font-size: var(--text-lg); }
.rsx-tool h3 a[b-my1beebi86] { color: var(--ink); text-decoration: none; }
.rsx-tool h3 a:hover[b-my1beebi86] { color: var(--brand-strong); text-decoration: underline; }
.rsx-grounded[b-my1beebi86] {
    padding-top: .5rem;
    border-top: 1px dashed var(--line);
    color: var(--muted);
    font-size: .87rem;
}

/* ---------------------------------------------------------------- how we publish */
.rsx-pub-head[b-my1beebi86] { margin-bottom: clamp(1.1rem, 3vw, 1.6rem); }
.rsx-principles[b-my1beebi86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.rsx-principles li[b-my1beebi86] {
    margin-bottom: 0;
    padding: 1rem 1.2rem 1rem 3rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--card);
    max-width: none;
}
.rsx-principles li strong[b-my1beebi86] { display: block; margin-bottom: .15rem; color: var(--ink); }
.rsx-principles li[b-my1beebi86]::before { top: 1.15rem; left: 1.1rem; }
.rsx-pub-foot[b-my1beebi86] {
    display: grid;
    gap: .6rem;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--wash);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 62rem) {
    .rsx-featured[b-my1beebi86] { grid-template-columns: minmax(0, 1fr); }
    .rsx-fchart[b-my1beebi86] { order: -1; }
}
@media (max-width: 40rem) {
    .rsx-tools-head[b-my1beebi86] { align-items: start; }
    .rsx-proof li[b-my1beebi86] { font-size: .82rem; }
}

/* ---------------------------------------------------------------- motion
   Two animations, both tied to the content:
   1. the featured chart DRAWS the paradox — the green field line and the red lab line
      extend in opposite directions, which is the study's entire argument;
   2. each card's bars GROW from their baseline as the card arrives, so the quantity a
      reader is being asked to compare is the thing that moves.
   Both are scroll-driven (no timers, no JS) and both start from the finished state so that
   without @supports, without scroll timelines, in print, or under the global
   prefers-reduced-motion rule, the full chart is what renders. */
@keyframes rsx-draw-b-my1beebi86 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rsx-pop-b-my1beebi86 { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes rsx-grow-b-my1beebi86 { from { transform: scaleY(.04); } to { transform: scaleY(1); } }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .rsx-draw[b-my1beebi86] {
            stroke-dasharray: 1;
            animation: rsx-draw-b-my1beebi86 1s cubic-bezier(.2, .75, .2, 1) both;
            animation-timeline: view();
            animation-range: entry 15% cover 32%;
        }
        .rsx-draw.rsx-d2[b-my1beebi86] { animation-range: entry 20% cover 38%; }
        .rsx-draw.rsx-d3[b-my1beebi86] { animation-range: entry 26% cover 46%; }
        .rsx-draw.rsx-band[b-my1beebi86] { animation-range: entry 10% cover 34%; }

        .rsx-dot[b-my1beebi86] {
            transform-box: fill-box;
            transform-origin: center;
            animation: rsx-pop-b-my1beebi86 1s linear both;
            animation-timeline: view();
            animation-range: entry 28% cover 40%;
        }
        .rsx-dot.rsx-d2[b-my1beebi86] { animation-range: entry 34% cover 46%; }
        .rsx-dot.rsx-d3[b-my1beebi86] { animation-range: entry 40% cover 52%; }

        /* Bars and funnel bands grow from their own baseline, so the shape stays anchored. */
        .rsx-grow[b-my1beebi86] {
            transform-box: fill-box;
            transform-origin: bottom;
            animation: rsx-grow-b-my1beebi86 1s cubic-bezier(.2, .75, .2, 1) both;
            animation-timeline: view();
            animation-range: entry 12% cover 30%;
        }
        .rsx-grow.rsx-g2[b-my1beebi86] { animation-range: entry 17% cover 35%; }
        .rsx-grow.rsx-g3[b-my1beebi86] { animation-range: entry 22% cover 40%; }
        .rsx-grow.rsx-g4[b-my1beebi86] { animation-range: entry 27% cover 45%; }
    }
}

@media print {
    .rsx-draw[b-my1beebi86] { stroke-dasharray: none; stroke-dashoffset: 0; }
    .rsx-dot[b-my1beebi86], .rsx-grow[b-my1beebi86] { opacity: 1; transform: none; }
    .rsx-chips[b-my1beebi86], .rsx-standard[b-my1beebi86] { display: none; }
    .rsx-card[b-my1beebi86], .rsx-tool[b-my1beebi86], .rsx-featured[b-my1beebi86] { break-inside: avoid; box-shadow: none; }
}
/* /Components/Pages/ResellerBook.razor.rz.scp.css */
/* The totals strip: four numbers a reseller reads before any individual line. */
.rb-totals[b-wv8yflripi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: .75rem;
    margin: 1.25rem 0 0;
}

.rb-totals > div[b-wv8yflripi] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

/* The one number that costs money if ignored: re-runs already paid for, about to lapse. Colour is
   never the only signal — the label says "Expiring within 7 days" on its own. */
.rb-totals > div.is-warn[b-wv8yflripi] { border-color: var(--warn-line, #b86c1c); }

.rb-totals dt[b-wv8yflripi] {
    font-size: .82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

.rb-totals dd[b-wv8yflripi] {
    margin: .2rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    line-height: 1.05;
}

.rb-totals .hint[b-wv8yflripi] { margin: .35rem 0 0; font-size: .8rem; line-height: 1.45; }

/* A client is a host first and a URL second: the host is what a reseller calls them, the full URL
   is what was actually audited and has to stay visible to be verifiable. */
.rb-host[b-wv8yflripi] { display: block; overflow-wrap: anywhere; }

.rb-url[b-wv8yflripi] {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    overflow-wrap: anywhere;
    margin-top: .1rem;
}

.rb-rate[b-wv8yflripi] { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }

.rb-sub[b-wv8yflripi] { display: block; font-size: .8rem; color: var(--muted); line-height: 1.45; }

.rb-soon[b-wv8yflripi] { font-weight: 600; }

@media (max-width: 40rem) {
    .rb-totals[b-wv8yflripi] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/SpeedRevenueCalculator.razor.rz.scp.css */
/* Speed → Revenue · scoped styles, themed to the PageSpeedAudit design system.
   The whole component is wrapped in .psa, which remaps the tool's internal variables onto the
   site's light tokens. --ink / --line / --good / --warn are intentionally NOT redefined here, so
   they inherit the site's :root values (dark ink, light border, brand green, amber). */
.psa[b-qcerjzw6gg]{
  --bg:var(--card);
  --panel:var(--card);
  --panel-2:var(--wash);
  --raise:var(--wash-deep);
  --line-2:var(--line);
  --line-strong:#c6d5cc;
  --ink-mid:var(--muted);
  /* Both of these were below AA wherever they carried meaning: #6a7c72 measured 4.34:1 on the
     wash and #93a69b 3.97:1, and between them they render every legend, every axis label, every
     unselected segment option and the equation's own field names. Hierarchy comes from size,
     weight and letter-spacing instead — contrast is not a design lever this site gets to spend. */
  --ink-dim:#55675e;    /* 5.3:1 on the wash, 6.0:1 on card */
  --ink-faint:#5f7268;  /* 4.6:1 on the wash, 5.2:1 on card */
  --accent:var(--brand);
  --accent-2:var(--brand-strong);
  --accent-deep:var(--brand-deep);
  --accent-soft:var(--brand-wash);
  --accent-line:#bcdcc8;
  --good-soft:#e3f2e8;
  --warn-soft:#f6ecd6;
  --poor:var(--bad);
  --poor-soft:#fbe7e5;
  /* Vivid data-viz palette for the CWV gauge + dots (decorative; rating *text* keeps the
     accessible site colors). Bright but harmonised with the brand green. */
  --gauge-good:#1aa05a;
  --gauge-warn:#e0a52e;
  --gauge-poor:#e4524a;
  --mono:var(--font-mono);
  --disp:var(--font-display);
  --body:var(--font-body);
  --r:var(--radius);
  --r-sm:var(--radius-sm);
  --r-lg:18px;
  font-feature-settings:"tnum";
}
.psa *[b-qcerjzw6gg]{box-sizing:border-box;}

/* ---------- hero accents (the rest of the hero uses site .hero/.eyebrow/.lede) ---------- */
.sr-em[b-qcerjzw6gg]{position:relative; white-space:nowrap;}
.sr-em[b-qcerjzw6gg]::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.34em; background:var(--accent-soft); border-bottom:2px solid var(--accent-line); z-index:-1; border-radius:2px;}

/* ---------- input ---------- */
.sr-inputrow[b-qcerjzw6gg]{margin-top:clamp(1.4rem,3vw,1.9rem); display:flex; gap:.6rem; max-width:42rem;}
.sr-field[b-qcerjzw6gg]{flex:1; display:flex; align-items:center; gap:.7rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:0 1.1rem; box-shadow:0 1px 2px rgba(13,33,23,.04); transition:border-color .15s, box-shadow .15s;}
.sr-field:focus-within[b-qcerjzw6gg]{border-color:var(--accent); box-shadow:0 0 0 4px rgba(13,107,60,.14);}
.sr-field .pre[b-qcerjzw6gg]{color:var(--ink-faint); flex:none; display:block;}
.sr-field input[b-qcerjzw6gg]{flex:1; background:transparent; border:0; outline:0; color:var(--ink); font-family:var(--mono); font-size:1.02rem; padding:1.05rem 0; letter-spacing:-.01em; min-width:0;}
.sr-field input[b-qcerjzw6gg]::placeholder{color:var(--ink-faint);}
.sr-go[b-qcerjzw6gg]{flex:none; white-space:nowrap;}
.sr-go .arrow[b-qcerjzw6gg]{margin-left:.15rem;}

.sr-meta[b-qcerjzw6gg]{display:flex; align-items:center; gap:1rem; margin-top:.9rem; flex-wrap:wrap;}
.sr-seg[b-qcerjzw6gg]{display:inline-flex; padding:3px; gap:2px; background:var(--wash); border:1px solid var(--line); border-radius:999px;}
.sr-seg button[b-qcerjzw6gg]{appearance:none; border:0; background:transparent; color:var(--ink-dim); font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; padding:.4rem .85rem; border-radius:999px; cursor:pointer; transition:.15s;}
.sr-seg button.on[b-qcerjzw6gg]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(13,33,23,.08);}
.sr-tiny[b-qcerjzw6gg]{font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); letter-spacing:.01em;}

/* ---------- loading ---------- */
.sr-loading[b-qcerjzw6gg]{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-1); padding:2.4rem 1.75rem; position:relative; overflow:hidden;}
.sr-loading .scan[b-qcerjzw6gg]{position:absolute; top:0; left:-40%; width:40%; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:psa-scan-b-qcerjzw6gg 1.5s ease-in-out infinite;}
@keyframes psa-scan-b-qcerjzw6gg{0%{left:-40%}100%{left:100%}}
.lmsg[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1.25rem; color:var(--ink);}
.lsub[b-qcerjzw6gg]{font-family:var(--mono); font-size:.75rem; color:var(--ink-dim); margin-top:.5rem; letter-spacing:.01em;}

/* ---------- results scaffold ---------- */
.results[b-qcerjzw6gg]{display:flex; flex-direction:column; gap:1.15rem;}
.sr-panel[b-qcerjzw6gg]{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:1.7rem 1.9rem; box-shadow:0 1px 2px rgba(13,33,23,.04), 0 14px 36px -18px rgba(13,33,23,.22); position:relative;}
.phead[b-qcerjzw6gg]{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; gap:.9rem; flex-wrap:wrap;}
.ptag[b-qcerjzw6gg]{display:flex; align-items:center; gap:.75rem;}
.pnum[b-qcerjzw6gg]{font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); letter-spacing:.14em;}
.ptitle[b-qcerjzw6gg]{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid);}
.pill[b-qcerjzw6gg]{font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; padding:.3rem .7rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-mid); background:var(--wash); display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;}
.pill .d[b-qcerjzw6gg]{width:6px;height:6px;border-radius:50%;}
.d.good[b-qcerjzw6gg]{background:var(--gauge-good);} .d.warn[b-qcerjzw6gg]{background:var(--gauge-warn);} .d.poor[b-qcerjzw6gg]{background:var(--gauge-poor);}

/* ---------- rating text (used by the evidence columns) ---------- */
.rate[b-qcerjzw6gg]{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;}
.rate .d[b-qcerjzw6gg]{width:7px;height:7px;border-radius:50%;}
.rate.rgood[b-qcerjzw6gg]{color:var(--good);} .rate.rgood .d[b-qcerjzw6gg]{background:var(--gauge-good);}
.rate.rwarn[b-qcerjzw6gg]{color:var(--warn);} .rate.rwarn .d[b-qcerjzw6gg]{background:var(--gauge-warn);}
.rate.rpoor[b-qcerjzw6gg]{color:var(--poor);} .rate.rpoor .d[b-qcerjzw6gg]{background:var(--gauge-poor);}

.chips[b-qcerjzw6gg]{display:flex; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap;}
.chip[b-qcerjzw6gg]{flex:1; min-width:112px; background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm); padding:.75rem .85rem;}
.chip .k[b-qcerjzw6gg]{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--ink-dim); text-transform:uppercase; display:flex; align-items:center; gap:.45rem;}
.chip .v[b-qcerjzw6gg]{font-family:var(--disp); font-size:1.5rem; font-weight:600; margin-top:.4rem; color:var(--ink);}
.chip.muted[b-qcerjzw6gg]{opacity:.85;}
.chip .ex[b-qcerjzw6gg]{font-family:var(--mono); font-size:.58rem; color:var(--ink-faint); letter-spacing:.02em; margin-top:.3rem; text-transform:uppercase;}

.ladder-cap[b-qcerjzw6gg]{font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);letter-spacing:.03em;}
.revhint[b-qcerjzw6gg]{font-size:.82rem;color:var(--ink-dim);line-height:1.45;}

/* ---------- slope explorer ---------- */
.slope[b-qcerjzw6gg]{display:grid; grid-template-columns:1fr; gap:.25rem;}
.slope-hud[b-qcerjzw6gg]{display:flex; align-items:center; justify-content:space-between; gap:1.25rem; margin-bottom:1.1rem; padding:1rem 1.25rem; background:var(--wash); border:1px solid var(--line); border-radius:var(--r); flex-wrap:wrap;}
.slope-hud .blk .k[b-qcerjzw6gg]{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:.3rem;}
.slope-hud .tval[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1.75rem; color:var(--ink); line-height:1;}
.slope-hud .tval-delta[b-qcerjzw6gg]{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);font-weight:400;}
.slope-hud .rhs[b-qcerjzw6gg]{text-align:right; margin-left:auto;}
.slope-hud .mval[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:2.1rem; color:var(--ink); line-height:1; letter-spacing:-.02em;}
.slope-hud .mval .un[b-qcerjzw6gg]{font-family:var(--mono); font-size:.8rem; color:var(--ink-dim); font-weight:400; margin-left:.25rem;}
.slope-hud .pct[b-qcerjzw6gg]{font-family:var(--mono); font-size:.72rem; color:var(--accent-2); margin-top:.45rem;}
.slope-hud .pct .hint-inline[b-qcerjzw6gg]{color:var(--ink-dim);}
.curvebox[b-qcerjzw6gg]{position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--wash); padding:1.1rem 1.1rem .6rem;}
.curve-area[b-qcerjzw6gg]{position:relative; height:188px;}
.curve-pts[b-qcerjzw6gg]{position:absolute; inset:0; pointer-events:none;}
.cpt[b-qcerjzw6gg]{position:absolute; transform:translate(-50%,-50%);}
.cpt .cdot[b-qcerjzw6gg]{display:block; width:9px; height:9px; border-radius:50%; background:var(--card); border:2px solid var(--ink-dim); margin:0 auto; box-shadow:0 0 0 3px var(--card), 0 1px 2px rgba(13,33,23,.25);}
.cpt.acc .cdot[b-qcerjzw6gg]{border-color:var(--accent); box-shadow:0 0 0 3px var(--card), 0 1px 4px rgba(13,107,60,.45);}
.cpt .clab[b-qcerjzw6gg]{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.6rem; white-space:nowrap; color:var(--ink-dim);}
.cpt.acc .clab[b-qcerjzw6gg]{color:var(--accent-2); font-weight:600;}
.cpt.below .clab[b-qcerjzw6gg]{bottom:auto; top:calc(100% + 6px);}
.curve-yhint[b-qcerjzw6gg]{position:absolute; left:1.1rem; top:.85rem; font-family:var(--mono); font-size:.62rem; color:var(--ink-dim); letter-spacing:.03em;}
.curve-x[b-qcerjzw6gg]{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.62rem; color:var(--ink-faint); margin-top:.4rem;}
.sliderrow[b-qcerjzw6gg]{margin-top:1rem;}
.slope-cap[b-qcerjzw6gg]{margin-top:1rem; font-size:.78rem; color:var(--ink-dim); line-height:1.55; max-width:680px;}
.slope-cap b[b-qcerjzw6gg]{color:var(--ink-mid); font-weight:600;}

/* ---------- opportunities ---------- */
.opp[b-qcerjzw6gg]{display:flex; flex-direction:column; gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; border:1px solid var(--line);}
.opp-row[b-qcerjzw6gg]{display:grid; grid-template-columns:1fr auto auto; gap:1.1rem; align-items:center; padding:.9rem 1.1rem; background:var(--card);}
.opp-row .name[b-qcerjzw6gg]{font-size:.9rem; color:var(--ink);}
.opp-row .by[b-qcerjzw6gg]{font-family:var(--mono); font-size:.72rem; color:var(--ink-dim);}
.opp-row .ms[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1rem; color:var(--accent-2); min-width:86px; text-align:right;}
.opp-foot[b-qcerjzw6gg]{margin-top:.9rem; font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); letter-spacing:.01em;}

/* ---------- honesty ---------- */
.honest[b-qcerjzw6gg]{background:radial-gradient(600px 300px at 100% 0%, var(--brand-wash), transparent 60%), var(--wash); border:1px solid var(--line);}
.honest h2[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1.6rem; letter-spacing:-.02em; margin:.1rem 0 .5rem; color:var(--ink);}
.honest .sub[b-qcerjzw6gg]{color:var(--ink-mid); font-size:.95rem; max-width:680px; line-height:1.55; margin-bottom:1.5rem;}
.hgrid[b-qcerjzw6gg]{display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.75rem; margin-bottom:1.6rem;}
.hitem[b-qcerjzw6gg]{display:flex; gap:.8rem; align-items:flex-start;}
.hitem .ic[b-qcerjzw6gg]{flex:none; width:26px;height:26px;border-radius:8px; background:var(--accent-soft); border:1px solid var(--accent-line); display:grid;place-items:center; color:var(--accent-2); font-family:var(--mono); font-size:.78rem; font-weight:600;}
.hitem .tx[b-qcerjzw6gg]{font-size:.85rem; color:var(--ink-mid); line-height:1.5;}
.hitem .tx b[b-qcerjzw6gg]{color:var(--ink); font-weight:600; display:block; margin-bottom:.15rem; font-size:.85rem;}
.sr-cta[b-qcerjzw6gg]{display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--line);}
.sr-cta .links[b-qcerjzw6gg]{display:flex; gap:1.1rem; font-family:var(--mono); font-size:.75rem; flex-wrap:wrap;}
.sr-cta .links a[b-qcerjzw6gg]{color:var(--ink-mid); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px;}
.sr-cta .links a:hover[b-qcerjzw6gg]{color:var(--accent-2); border-color:var(--accent-line);}

.foot[b-qcerjzw6gg]{margin-top:1.75rem; text-align:center; font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); letter-spacing:.02em; line-height:1.7;}
.foot a[b-qcerjzw6gg]{color:var(--ink-dim);text-decoration:none;}

@media (max-width:780px){
  .baseline[b-qcerjzw6gg]{grid-template-columns:1fr; gap:1.6rem;}
  .lad-row[b-qcerjzw6gg]{grid-template-columns:1fr; gap:.65rem;}
  .axis[b-qcerjzw6gg]{margin-left:0;}
  .hgrid[b-qcerjzw6gg]{grid-template-columns:1fr;}
  .lcpbig .sr-num[b-qcerjzw6gg]{font-size:3.9rem;}
  .sr-inputrow[b-qcerjzw6gg]{flex-wrap:wrap;}
  .sr-go[b-qcerjzw6gg]{width:100%; justify-content:center;}
}

@media (prefers-reduced-motion: reduce){
  .sr-loading .scan[b-qcerjzw6gg]{animation:none;}
  .sm-move[b-qcerjzw6gg]{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE CONSOLE — one object dominates
   The decision card holds the same slot as an illustrative example, as the loading state, and as
   the reader's own answer. That continuity is the whole point: the page is one instrument
   changing state, not a report that materialises somewhere below the fold.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.sr-hero[b-qcerjzw6gg]{padding-block:clamp(2rem,5vw,3.25rem) clamp(1.5rem,4vw,2.5rem);}
.sr-hero-grid[b-qcerjzw6gg]{display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;}
@media (min-width:64rem){
  .sr-hero-grid[b-qcerjzw6gg]{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
  .sr-answer-slot[b-qcerjzw6gg]{position:sticky; top:calc(var(--header-h,58px) + 1rem);}
}
.sr-hero-grid > *[b-qcerjzw6gg]{min-width:0;}
.sr-pitch h1[b-qcerjzw6gg]{font-size:var(--text-2xl); max-width:20ch; margin-block:.35rem .6rem;}
.sr-pitch .lede[b-qcerjzw6gg]{font-size:var(--text-base); max-width:52ch;}

/* ---------- form semantics ---------- */
.sr-fs[b-qcerjzw6gg]{border:0; margin:0 0 .9rem; padding:0; display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;}
.sr-fs legend[b-qcerjzw6gg]{float:left; width:100%; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:.4rem; padding:0;}
.sr-vis[b-qcerjzw6gg]{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); flex:none;}
.sr-suffix[b-qcerjzw6gg]{font-family:var(--mono); font-size:.8rem; color:var(--ink-faint); flex:none;}
.sr-inputnote[b-qcerjzw6gg]{margin:.6rem 0 0; max-width:46ch;}

/* Radios styled as a segmented control. They were plain buttons with an "on" class, so nothing
   told an assistive technology which of the four groups was in effect — or that they were groups. */
.sr-seg[b-qcerjzw6gg]{display:inline-flex; padding:3px; gap:2px; background:var(--wash); border:1px solid var(--line); border-radius:999px;}
.sr-seg label[b-qcerjzw6gg]{position:relative; display:inline-flex; align-items:center; margin:0; cursor:pointer;}
.sr-seg input[b-qcerjzw6gg]{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.sr-seg span[b-qcerjzw6gg]{padding:.5rem .9rem; border-radius:999px; font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--ink-dim); transition:background .15s, color .15s;}
.sr-seg label.on span[b-qcerjzw6gg]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(13,33,23,.08);}
.sr-seg input:focus-visible + span[b-qcerjzw6gg]{outline:2px solid var(--focus); outline-offset:2px;}
.sr-seg-sm span[b-qcerjzw6gg]{padding:.34rem .6rem; font-size:.66rem;}
.sr-seg-sm[b-qcerjzw6gg]{background:var(--card);}

.sr-trust[b-qcerjzw6gg]{list-style:none; margin:1.1rem 0 .5rem; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .45rem;}
.sr-trust li[b-qcerjzw6gg]{font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; color:var(--ink-dim); background:var(--card); border:1px solid var(--line-soft); border-radius:999px; padding:.2rem .6rem;}
.sr-method-link[b-qcerjzw6gg]{margin:.35rem 0 0; font-size:.82rem;}
.sr-method-link a[b-qcerjzw6gg]{color:var(--accent-2);}

.sr-link[b-qcerjzw6gg]{appearance:none; border:0; background:none; padding:0; font:inherit; font-size:.82rem; color:var(--accent-2); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.sr-link:hover[b-qcerjzw6gg]{color:var(--accent-deep);}

/* ---------- the card, in all three states ---------- */
.sr-card[b-qcerjzw6gg]{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.15rem,2.5vw,1.6rem); box-shadow:0 1px 2px rgba(13,33,23,.05), 0 18px 44px -22px rgba(13,33,23,.28);}
.sr-card-answer[b-qcerjzw6gg]{border:2px solid var(--accent); box-shadow:0 1px 2px rgba(13,33,23,.05), 0 22px 52px -22px rgba(13,107,60,.34);}
.sr-card-example[b-qcerjzw6gg]{border-style:dashed; background:linear-gradient(180deg,var(--card),var(--wash));}
.sr-card-eyebrow[b-qcerjzw6gg]{margin:0 0 .35rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);}
.sr-card-head[b-qcerjzw6gg]{font-family:var(--disp); font-weight:650; font-size:clamp(1.5rem,4.4vw,2.15rem); line-height:1.08; letter-spacing:-.025em; margin:0 0 .4rem; color:var(--ink);}
.sr-card-head:focus-visible[b-qcerjzw6gg]{outline:2px solid var(--focus); outline-offset:4px; border-radius:4px;}
.sr-card-head .per[b-qcerjzw6gg]{font-family:var(--mono); font-size:.8rem; font-weight:400; letter-spacing:.04em; color:var(--ink-dim); white-space:nowrap;}
.sr-card-path[b-qcerjzw6gg]{margin:0 0 .9rem; font-family:var(--mono); font-size:.76rem; color:var(--accent-2); letter-spacing:.01em;}
.sr-card-why[b-qcerjzw6gg]{margin:0 0 .9rem; font-size:.9rem; color:var(--ink-mid); line-height:1.55;}
.sr-card-orders[b-qcerjzw6gg]{margin:.55rem 0 0; font-size:.86rem; color:var(--ink-mid);}
.sr-card-prov[b-qcerjzw6gg]{display:flex; flex-wrap:wrap; gap:.3rem .7rem; margin:1rem 0 .35rem; padding-top:.8rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; color:var(--ink-dim);}
.sr-card-prov .mod[b-qcerjzw6gg]{color:var(--accent-2); font-weight:600;}
.sr-card-limit[b-qcerjzw6gg]{margin:0; font-size:.76rem; color:var(--ink-dim); line-height:1.5;}
.sr-card-alt[b-qcerjzw6gg]{margin:.7rem 0 0;}
.sr-card-actions[b-qcerjzw6gg]{display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-top:1rem;}

/* The equation is the CFO's first question, answered on the card. */
.sr-eq[b-qcerjzw6gg]{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:.4rem .55rem;
  padding:.75rem .85rem; background:var(--wash); border:1px solid var(--line-soft); border-radius:var(--r-sm);}
.sr-eq .t[b-qcerjzw6gg]{display:flex; flex-direction:column; gap:.2rem; min-width:0;}
.sr-eq .k[b-qcerjzw6gg]{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.sr-eq .v[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--ink); overflow-wrap:anywhere;}
.sr-eq .op[b-qcerjzw6gg]{font-family:var(--disp); font-size:1.1rem; color:var(--ink-faint);}
@media (max-width:34rem){
  .sr-eq[b-qcerjzw6gg]{grid-template-columns:1fr; gap:.5rem;}
  .sr-eq .op[b-qcerjzw6gg]{display:none;}
  .sr-eq .t[b-qcerjzw6gg]{flex-direction:row; justify-content:space-between; align-items:baseline; gap:.75rem;}
}

/* Revenue lives inside the answer: it is what turns a percentage into the meeting's number. */
.sr-rev[b-qcerjzw6gg]{margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-soft);}
.sr-rev-head[b-qcerjzw6gg]{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem;}
.sr-rev-head > label[b-qcerjzw6gg]{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);}
.sr-rev-row[b-qcerjzw6gg]{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;}
.sr-rev-row > input[b-qcerjzw6gg]{flex:1; min-width:7rem; background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.5rem .7rem; font-family:var(--disp); font-weight:600; font-size:1.15rem; color:var(--ink); outline:0;}
.sr-rev-row > input:focus-visible[b-qcerjzw6gg]{border-color:var(--accent); box-shadow:0 0 0 3px rgba(13,107,60,.16);}
.sr-cur[b-qcerjzw6gg]{flex:0 0 auto; width:auto; min-width:5.2rem; background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .4rem; font-family:var(--mono); font-size:.78rem; color:var(--ink);}
.sr-rev-detail select[b-qcerjzw6gg]{background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .4rem; font-family:var(--mono); font-size:.78rem; color:var(--ink);}
.sr-cur-code[b-qcerjzw6gg]{width:5rem; text-transform:uppercase; background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm); padding:.45rem .6rem; font-family:var(--mono);}
.sr-rev-echo[b-qcerjzw6gg]{margin:.5rem 0 0; font-size:.76rem; color:var(--ink-dim); line-height:1.5;}
.sr-rev-detail[b-qcerjzw6gg]{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.6rem;}
.sr-rev-detail .field[b-qcerjzw6gg]{margin:0;}

/* Truthful stages: each one advances when the operation it names actually starts. */
.sr-stages[b-qcerjzw6gg]{list-style:none; margin:.4rem 0 .8rem; padding:0; display:grid; gap:.45rem;}
.sr-stages li[b-qcerjzw6gg]{display:flex; gap:.55rem; align-items:baseline; font-size:.88rem; color:var(--ink-faint);}
.sr-stages li .mk[b-qcerjzw6gg]{font-family:var(--mono); font-size:.8rem; flex:none;}
.sr-stages li.done[b-qcerjzw6gg]{color:var(--ink-mid);} .sr-stages li.done .mk[b-qcerjzw6gg]{color:var(--good);}
.sr-stages li.now[b-qcerjzw6gg]{color:var(--ink); font-weight:600;} .sr-stages li.now .mk[b-qcerjzw6gg]{color:var(--accent); animation:psa-pulse-b-qcerjzw6gg 1.4s ease-in-out infinite;}
@keyframes psa-pulse-b-qcerjzw6gg{0%,100%{opacity:1} 50%{opacity:.35}}

.sr-compare-cta[b-qcerjzw6gg]{display:flex; flex-wrap:wrap; gap:.35rem .7rem; align-items:baseline; margin:.85rem 0 0;}
.sr-compare[b-qcerjzw6gg]{display:flex; gap:.5rem; margin-top:.85rem; flex-wrap:wrap;}
.sr-devtab[b-qcerjzw6gg]{flex:1; min-width:7rem; display:flex; flex-direction:column; gap:.15rem; align-items:flex-start; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .75rem; font:inherit;}
.sr-devtab .d[b-qcerjzw6gg]{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);}
.sr-devtab .v[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1.05rem; color:var(--ink);}
.sr-devtab.on[b-qcerjzw6gg]{border-color:var(--accent); background:var(--accent-soft);}

/* ---------- report ---------- */
.sr-report[b-qcerjzw6gg]{padding-top:clamp(1rem,2vw,1.5rem);}

/* Two evidence systems, two named columns. */
.sr-evidence[b-qcerjzw6gg]{display:grid; gap:1rem; align-items:start;}
@media (min-width:52rem){ .sr-evidence[b-qcerjzw6gg]{grid-template-columns:1fr 1fr;} }
.sr-evidence > *[b-qcerjzw6gg]{min-width:0;}
.sr-ev[b-qcerjzw6gg]{padding:1rem 1.1rem; background:var(--wash); border:1px solid var(--line-soft); border-radius:var(--r); }
.sr-ev.primary[b-qcerjzw6gg]{background:var(--accent-soft); border-color:var(--accent-line);}
.sr-ev h3[b-qcerjzw6gg]{margin:0 0 .2rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid);}
.sr-ev-src[b-qcerjzw6gg]{margin:0 0 .7rem; font-family:var(--mono); font-size:.66rem; color:var(--ink-dim);}
.sr-ev-lcp[b-qcerjzw6gg]{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;}
.sr-ev-lcp .sr-num[b-qcerjzw6gg]{font-family:var(--disp); font-weight:650; font-size:clamp(2.2rem,6vw,3rem); line-height:1; letter-spacing:-.035em; color:var(--ink);}
.sr-ev-lcp .unit[b-qcerjzw6gg]{font-family:var(--disp); font-size:1.1rem; color:var(--ink-dim);}
.sr-ev-score[b-qcerjzw6gg]{font-family:var(--mono); font-size:.72rem; margin-left:.35rem;}
.sr-ev-note[b-qcerjzw6gg]{margin:.5rem 0 .8rem; font-size:.82rem; color:var(--ink-mid); line-height:1.5;}
.sr-ev-note b[b-qcerjzw6gg]{color:var(--ink);}
.sr-ev-empty[b-qcerjzw6gg]{margin:.3rem 0 0; font-size:.85rem; color:var(--ink-mid); line-height:1.55;}

.sr-diverge[b-qcerjzw6gg]{margin-top:1.2rem; padding:1rem 1.1rem; background:#fdf8ee; border:1px solid #efdcb6; border-left:3px solid var(--warn); border-radius:var(--r-sm);}
.sr-dv-scale[b-qcerjzw6gg]{position:relative; height:6px; margin:2.4rem 0 2.2rem; background:var(--line); border-radius:3px;}
.sr-dv-span[b-qcerjzw6gg]{position:absolute; top:0; height:6px; background:var(--gauge-warn); border-radius:3px;}
.sr-dv-tick[b-qcerjzw6gg]{position:absolute; top:-2px; width:2px; height:10px; background:var(--ink); transform:translateX(-50%);}
.sr-dv-tick b[b-qcerjzw6gg]{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; font-weight:500;}
.sr-dv-tick[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:.8rem; color:var(--ink); white-space:nowrap;}
.sr-dv-tick.alt[b-qcerjzw6gg]{background:var(--accent-deep);}
.sr-dv-note[b-qcerjzw6gg]{margin:0; font-size:.85rem; color:#6b4400; line-height:1.6;}
.sr-dv-note b[b-qcerjzw6gg]{color:#4a2f00;}
.sr-dv-note a[b-qcerjzw6gg]{margin-left:.4rem; color:var(--accent-2);}

/* The impact ribbon: one scale for time, scenarios and money. */
.sr-ribbon[b-qcerjzw6gg]{margin-bottom:1.4rem;}
.sr-rb-head[b-qcerjzw6gg]{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2.9rem;}
.sr-rb-wrap[b-qcerjzw6gg]{position:relative; height:14px; margin-bottom:4.4rem;}
.sr-rb-track[b-qcerjzw6gg]{position:absolute; inset:0; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(13,33,23,.10);}
.sr-rb-bound[b-qcerjzw6gg]{position:absolute; top:-2px; bottom:-2px; width:1px; background:rgba(13,33,23,.32); z-index:2;}
.sr-rb-bl[b-qcerjzw6gg]{position:absolute; top:calc(100% + 44px); transform:translateX(-50%); font-family:var(--mono); font-size:.6rem; color:var(--ink-faint); white-space:nowrap;}
.sr-rb-move[b-qcerjzw6gg]{position:absolute; top:50%; height:8px; transform:translateY(-50%); border-radius:4px;
  background:var(--accent-deep); box-shadow:0 0 0 2px var(--card); z-index:3;
  transition:left .14s cubic-bezier(.2,.7,.3,1), width .14s cubic-bezier(.2,.7,.3,1);}
.sr-rb-move[b-qcerjzw6gg]::before{content:""; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:8px solid var(--accent-deep);}
.sr-rb-wrap .dot[b-qcerjzw6gg]{position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background:var(--card); border:2px solid var(--accent-deep); transform:translate(-50%,-50%); z-index:4;}
/* NOW rides above the track, TARGET below it: at a small delta the two flags would otherwise
   land on top of each other, which is exactly when the reader is looking hardest at both. */
.sr-rb-now[b-qcerjzw6gg], .sr-rb-target[b-qcerjzw6gg]{position:absolute; top:-7px; bottom:-7px; width:2px; border-radius:2px; z-index:6;}
.sr-rb-now[b-qcerjzw6gg]{background:var(--ink); box-shadow:0 0 0 3px var(--card);}
.sr-rb-target[b-qcerjzw6gg]{background:var(--accent); box-shadow:0 0 0 3px var(--card); transition:left .14s cubic-bezier(.2,.7,.3,1);}
.sr-rb-now .lab[b-qcerjzw6gg], .sr-rb-target .lab[b-qcerjzw6gg]{position:absolute; left:50%; transform:translateX(-50%); text-align:center;
  font-family:var(--disp); font-weight:600; font-size:.86rem; color:var(--ink); white-space:nowrap;}
.sr-rb-now .lab b[b-qcerjzw6gg], .sr-rb-target .lab b[b-qcerjzw6gg]{display:block; font-family:var(--mono); font-size:.54rem; font-weight:500; letter-spacing:.16em; color:var(--ink-dim); margin-bottom:.2rem;}
.sr-rb-now .lab[b-qcerjzw6gg]{bottom:calc(100% + 9px);}
.sr-rb-target .lab[b-qcerjzw6gg]{top:calc(100% + 9px); color:var(--accent-2);}
.sr-rb-target .lab b[b-qcerjzw6gg]{color:var(--accent-2); margin:0 0 .1rem;}
.sr-rb-value[b-qcerjzw6gg]{margin:0; font-family:var(--disp); font-weight:600; font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--ink);}

.sr-scen[b-qcerjzw6gg]{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin-bottom:1.4rem;}
.sr-scen-card[b-qcerjzw6gg]{text-align:left; display:flex; flex-direction:column; gap:.25rem; cursor:pointer; font:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.85rem .95rem; transition:border-color .15s, background .15s;}
.sr-scen-card:hover[b-qcerjzw6gg]{border-color:var(--accent-line);}
.sr-scen-card.on[b-qcerjzw6gg]{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);}
.sr-scen-card .n[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1.02rem; color:var(--ink);}
.sr-scen-card .t[b-qcerjzw6gg]{font-family:var(--mono); font-size:.68rem; color:var(--ink-dim);}
.sr-scen-card .m[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:1.18rem; color:var(--accent-2); margin-top:.15rem;}
.sr-scen-card .r[b-qcerjzw6gg]{font-size:.78rem; color:var(--ink-dim); line-height:1.45; margin-top:.25rem;}

/* WCAG 2.2 target size: the control was a 4 px track with an 18 px thumb. */
.sr-slider[b-qcerjzw6gg]{display:flex; align-items:center; gap:.5rem; margin-top:1rem;}
.sr-slider-track[b-qcerjzw6gg]{flex:1; min-width:0; display:flex; align-items:center; height:44px;}
.sr-slider-track > input[b-qcerjzw6gg]{min-width:0;}
.sr-step[b-qcerjzw6gg]{flex:none; min-width:44px; min-height:44px; padding:0 .6rem; cursor:pointer; font:inherit;
  font-family:var(--mono); font-size:.7rem; color:var(--ink-mid); background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);}
.sr-step:hover[b-qcerjzw6gg]{border-color:var(--accent); color:var(--accent-2);}
.psa input[type=range][b-qcerjzw6gg]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; outline:0; margin:0; cursor:pointer;}
.psa input[type=range][b-qcerjzw6gg]::-webkit-slider-runnable-track{height:6px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0 var(--fill,0%), var(--line) var(--fill,0%) 100%);}
.psa input[type=range][b-qcerjzw6gg]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%;
  background:var(--card); border:3px solid var(--accent); box-shadow:0 1px 5px rgba(13,33,23,.28);}
.psa input[type=range][b-qcerjzw6gg]::-moz-range-track{height:6px; border-radius:3px; background:var(--line);}
.psa input[type=range][b-qcerjzw6gg]::-moz-range-progress{height:6px; border-radius:3px; background:var(--accent);}
.psa input[type=range][b-qcerjzw6gg]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--card); border:3px solid var(--accent); box-shadow:0 1px 5px rgba(13,33,23,.28);}
.psa input[type=range]:focus-visible[b-qcerjzw6gg]{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px;}
.sr-slider-say[b-qcerjzw6gg]{margin:.55rem 0 0; font-size:.84rem; color:var(--ink-mid); line-height:1.55;}

.sr-payback[b-qcerjzw6gg]{margin-top:1.3rem; border-top:1px solid var(--line-soft); padding-top:.9rem;}
.sr-payback > summary[b-qcerjzw6gg]{cursor:pointer; font-weight:600; font-size:.9rem; padding:.35rem 0;}
.sr-pb-row[b-qcerjzw6gg]{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.6rem 0;}
.sr-pb-row label[b-qcerjzw6gg]{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim);}
.sr-pb-row input[b-qcerjzw6gg]{width:9rem; background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .7rem; font-family:var(--disp); font-weight:600; font-size:1.05rem;}
.sr-pb-out[b-qcerjzw6gg]{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem; margin:.7rem 0 .5rem;}
.sr-pb-out > div[b-qcerjzw6gg]{background:var(--wash); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:.6rem .75rem;}
.sr-pb-out .k[b-qcerjzw6gg]{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.sr-pb-out .v[b-qcerjzw6gg]{display:block; font-family:var(--disp); font-weight:600; font-size:1.1rem; color:var(--ink); margin-top:.2rem;}

.sr-noprice[b-qcerjzw6gg]{margin-top:.6rem;}
.sr-next[b-qcerjzw6gg]{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:1.2rem;}
.sr-nextcard[b-qcerjzw6gg]{display:flex; flex-direction:column; gap:.3rem; text-decoration:none; background:var(--wash);
  border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; transition:border-color .15s, transform .15s;}
.sr-nextcard:hover[b-qcerjzw6gg]{border-color:var(--accent); transform:translateY(-1px);}
.sr-nextcard.accent[b-qcerjzw6gg]{background:var(--accent-soft); border-color:var(--accent-line);}
.sr-nextcard .n[b-qcerjzw6gg]{font-family:var(--disp); font-weight:600; font-size:.98rem; color:var(--ink);}
.sr-nextcard .d[b-qcerjzw6gg]{font-size:.8rem; color:var(--ink-dim); line-height:1.5;}

.sr-disclose[b-qcerjzw6gg]{margin-top:1.2rem; border-top:1px solid var(--line); padding-top:.9rem;}
.sr-disclose > summary[b-qcerjzw6gg]{cursor:pointer; font-weight:600; font-size:.92rem; padding:.35rem 0; color:var(--ink);}
.sr-disclose .sub[b-qcerjzw6gg]{margin-top:.7rem;}

.sr-email[b-qcerjzw6gg]{max-width:44rem;}
.sr-email h2[b-qcerjzw6gg]{font-family:var(--disp); font-size:1.15rem; margin:0 0 .7rem;}
.sr-email-row[b-qcerjzw6gg]{display:flex; gap:.5rem; flex-wrap:wrap;}
.sr-email-row input[b-qcerjzw6gg]{flex:1; min-width:12rem;}

@media (max-width:780px){
  .hgrid[b-qcerjzw6gg]{grid-template-columns:1fr;}
  .sr-inputrow[b-qcerjzw6gg]{flex-wrap:wrap;}
  .sr-go[b-qcerjzw6gg]{width:100%; justify-content:center;}
  .sr-panel[b-qcerjzw6gg]{padding:1.15rem 1.1rem;}
}

/* Below this the two step buttons and the track cannot share a row without the track collapsing
   to nothing — so the track takes its own row and gets wider, not narrower, on a phone. */
@media (max-width:34rem){
  .sr-slider[b-qcerjzw6gg]{flex-wrap:wrap;}
  .sr-slider-track[b-qcerjzw6gg]{flex-basis:100%; order:-1;}
  .sr-step[b-qcerjzw6gg]{flex:1;}
}

/* Motion is object continuity, never decoration: the card keeps its slot through example →
   loading → answer, and the target marker slides rather than teleporting when a scenario is
   picked. Nothing loops except the one stage that is genuinely still running. */
@media (prefers-reduced-motion: reduce){
  .sr-loading .scan[b-qcerjzw6gg], .sr-stages li.now .mk[b-qcerjzw6gg]{animation:none;}
  .sr-rb-move[b-qcerjzw6gg], .sr-rb-target[b-qcerjzw6gg], .sr-nextcard[b-qcerjzw6gg], .sr-scen-card[b-qcerjzw6gg], .sr-seg span[b-qcerjzw6gg]{transition:none;}
}
/* /Components/Pages/SpeedTrack.razor.rz.scp.css */
/* Speed track — its own scoped styles. The --signal/--warn/--paper… variables cascade from the
   page's .fsim wrapper (CSS custom properties inherit through the DOM regardless of scope). */
.track[b-n633sqw7jf] { margin-bottom: 20px; }
.track:last-child[b-n633sqw7jf] { margin-bottom: 0; }
.track-head[b-n633sqw7jf] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.track-metric[b-n633sqw7jf] { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.track-readout[b-n633sqw7jf] { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rating[b-n633sqw7jf] { font-family: var(--mono); font-weight: 600; }
.rating-good[b-n633sqw7jf] { color: var(--signal-2); }
.rating-ni[b-n633sqw7jf] { color: var(--warn); }
.rating-poor[b-n633sqw7jf] { color: var(--bad); }
.rating-flat[b-n633sqw7jf] { color: var(--ink-3); }
.rating-word[b-n633sqw7jf] { color: var(--ink-3); }
.track-arrow[b-n633sqw7jf] { color: var(--ink-3); }
.delta-chip[b-n633sqw7jf] { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 100px; margin-left: 2px; }
.delta-good[b-n633sqw7jf] { color: var(--signal-2); background: var(--signal-bg); }
.delta-bad[b-n633sqw7jf] { color: var(--bad); background: var(--bad-bg); }
.delta-flat[b-n633sqw7jf] { color: var(--ink-2); background: var(--flat-bg); }
.track-band-wrap[b-n633sqw7jf] { position: relative; height: 24px; }
.track-band[b-n633sqw7jf] { position: absolute; top: 8px; left: 0; right: 0; height: 8px; display: flex; border-radius: 5px; overflow: hidden; }
.zone[b-n633sqw7jf] { height: 100%; }
.zone-good[b-n633sqw7jf] { background: var(--signal-bg); }
.zone-ni[b-n633sqw7jf] { background: var(--warn-bg); }
.zone-poor[b-n633sqw7jf] { background: var(--bad-bg); }
.connector[b-n633sqw7jf] { position: absolute; top: 11px; height: 2px; border-radius: 2px; }
.connector-good[b-n633sqw7jf] { background: var(--signal); }
.connector-bad[b-n633sqw7jf] { background: var(--bad); }
.connector-flat[b-n633sqw7jf] { background: var(--ink-3); }
.marker[b-n633sqw7jf] { position: absolute; top: 5px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--paper); }
.marker-base[b-n633sqw7jf] { background: var(--paper); border: 2px solid var(--ink-3); }
.marker-after[b-n633sqw7jf] { background: var(--signal); border: 2px solid var(--paper); }
/* /Components/Pages/TimelineCompare.razor.rz.scp.css */
/* Side-by-side loading timeline. Colour tokens (--ink, --line, --mono, …) cascade in from the
   .fsim wrapper of the Fix Simulator page that hosts this component. */
.tlc[b-ntz87jtc30] { padding: 4px 16px 18px; }
.tlc-warn[b-ntz87jtc30] { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius-sm); color: var(--ink); font-size: 12.5px; line-height: 1.5; padding: 10px 13px; margin-bottom: 14px; }

.tlc-cols[b-ntz87jtc30] { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tlc-col[b-ntz87jtc30] { min-width: 0; }
.tlc-head[b-ntz87jtc30] { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tlc-arm[b-ntz87jtc30] { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); }
.tlc-var[b-ntz87jtc30] { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Filmstrip — both arms sampled at identical tick times */
.tlc-film[b-ntz87jtc30] { display: grid; gap: 3px; margin-bottom: 14px; }
.tlc-frame[b-ntz87jtc30] { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.tlc-frame img[b-ntz87jtc30] { width: 100%; height: auto; max-height: 150px; object-fit: contain; border: 1px solid var(--line); border-radius: 2px; background: var(--canvas); }
.tlc-frame-blank[b-ntz87jtc30] { width: 100%; padding-top: 130%; border: 1px dashed var(--line); border-radius: 2px; background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 4px, var(--paper-2) 4px, var(--paper-2) 8px); }
.tlc-frame-t[b-ntz87jtc30] { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }

/* Shared ruler */
.tlc-ruler[b-ntz87jtc30] { position: relative; height: 15px; border-top: 1px solid var(--line-2); margin-bottom: 3px; }
.tlc-tick[b-ntz87jtc30] { position: absolute; top: 1px; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); white-space: nowrap; }

/* Waterfall */
.tlc-wf[b-ntz87jtc30] { position: relative; }
.tlc-wf-rows[b-ntz87jtc30] { display: flex; flex-direction: column; gap: 2px; }
.tlc-row[b-ntz87jtc30] { display: grid; grid-template-columns: 132px 1fr; gap: 8px; align-items: center; height: 14px; }
.tlc-row-label[b-ntz87jtc30] { font-family: var(--mono); font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlc-row.is-block .tlc-row-label[b-ntz87jtc30] { color: var(--bad); }
.tlc-row.is-block .tlc-row-label[b-ntz87jtc30]::before { content: "●"; font-size: 7px; vertical-align: middle; margin-right: 4px; }
.tlc-track[b-ntz87jtc30] { position: relative; height: 10px; background: var(--flat-bg); border-radius: 2px; }
.tlc-bar[b-ntz87jtc30] { position: absolute; top: 1px; height: 8px; min-width: 2px; display: flex; border-radius: 2px; overflow: hidden; }
.tlc-bar-wait[b-ntz87jtc30] { height: 100%; background: var(--ink-3); opacity: 0.35; flex: 0 0 auto; }
.tlc-bar-dl[b-ntz87jtc30] { height: 100%; flex: 1 1 auto; background: var(--ink-2); }
.tlc-script .tlc-bar-dl[b-ntz87jtc30] { background: var(--warn); }
.tlc-css .tlc-bar-dl[b-ntz87jtc30] { background: var(--signal); }
.tlc-img .tlc-bar-dl[b-ntz87jtc30] { background: #3E8E6E; }
.tlc-font .tlc-bar-dl[b-ntz87jtc30] { background: #7C5CF0; }
.tlc-doc .tlc-bar-dl[b-ntz87jtc30] { background: var(--ink-2); }
.tlc-other .tlc-bar-dl[b-ntz87jtc30] { background: #9AA0A6; }

/* FCP / LCP markers, overlaid on the track area (which starts at 140px = 132 label + 8 gap) */
.tlc-lines[b-ntz87jtc30] { position: absolute; top: 0; bottom: 0; left: 140px; right: 0; pointer-events: none; }
.tlc-line[b-ntz87jtc30] { position: absolute; top: 0; bottom: 0; width: 0; }
.tlc-fcp[b-ntz87jtc30] { border-left: 1px dashed #2E8B6F; }
.tlc-lcp[b-ntz87jtc30] { border-left: 1px dashed #4F6BED; }

.tlc-wf-foot[b-ntz87jtc30] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.tlc-legend[b-ntz87jtc30] { display: flex; gap: 11px; flex-wrap: wrap; }
.tlc-key[b-ntz87jtc30] { display: inline-flex; align-items: center; gap: 4px; }
.tlc-sw[b-ntz87jtc30] { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tlc-fcp-sw[b-ntz87jtc30] { background: #2E8B6F; }
.tlc-lcp-sw[b-ntz87jtc30] { background: #4F6BED; }
.tlc-wait-sw[b-ntz87jtc30] { background: var(--ink-3); opacity: 0.4; }
.tlc-dl-sw[b-ntz87jtc30] { background: var(--signal); }

/* Main-thread occupancy */
.tlc-mt[b-ntz87jtc30] { display: grid; grid-template-columns: 132px 1fr; gap: 8px; align-items: center; height: 14px; margin-top: 12px; }
.tlc-mt .tlc-track[b-ntz87jtc30] { height: 11px; }
.tlc-mt-label[b-ntz87jtc30] { font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.tlc-task[b-ntz87jtc30] { position: absolute; top: 1px; height: 9px; min-width: 2px; border-radius: 2px; background: var(--warn); opacity: 0.55; }
.tlc-task.is-mid[b-ntz87jtc30] { opacity: 0.9; }
.tlc-task.is-heavy[b-ntz87jtc30] { background: var(--bad); opacity: 0.9; }

.tlc-empty[b-ntz87jtc30] { font-size: 12px; color: var(--ink-3); padding: 10px 0; }
.tlc-mt-empty[b-ntz87jtc30] { padding: 4px 0 0; }
.tlc-note[b-ntz87jtc30] { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .tlc-cols[b-ntz87jtc30] { grid-template-columns: 1fr; gap: 26px; }
}
/* /Components/Pages/Tools.razor.rz.scp.css */
/* /tools — scoped styles.
   Zero JavaScript: the page renders under ExcludeFromInteractiveRouting, so the decision navigator is
   plain anchors and the one animation is scroll-driven CSS behind @supports. As on the research pages,
   the BASE state is the FINISHED state, so a browser without scroll timelines, a print stylesheet, and
   the global prefers-reduced-motion rule in site.css all still show the completed composition. */

/* ---------------------------------------------------------------- hero */
.tp-hero-grid[b-xvjuoli24u] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
.tp-hero-copy .lede[b-xvjuoli24u] { max-width: 60ch; }
.tp-trust[b-xvjuoli24u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.1rem;
    margin: 1.1rem 0 0;
}
.tp-trust-link[b-xvjuoli24u] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.tp-trust-link:hover[b-xvjuoli24u] { color: var(--brand-strong); border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- the decision console */
.tp-deck[b-xvjuoli24u] {
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid var(--dark-line);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: var(--shadow-2);
}
.tp-deck-top[b-xvjuoli24u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tp-deck-status[b-xvjuoli24u] { display: inline-flex; align-items: center; gap: .45rem; color: var(--signal); }
.tp-deck-status[b-xvjuoli24u]::before {
    content: "";
    width: .45rem; height: .45rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 .28rem rgb(141 240 166 / .12);
}
.tp-deck-badge[b-xvjuoli24u] {
    padding: .18rem .6rem;
    border: 1px solid var(--dark-line);
    border-radius: 999px;
    color: var(--dark-soft);
    letter-spacing: .08em;
}
.tp-deck-url[b-xvjuoli24u] {
    margin: 0 0 .8rem;
    padding: .5rem .8rem;
    border: 1px solid rgb(255 255 255 / .09);
    border-radius: var(--radius-sm);
    background: rgb(4 15 10 / .42);
}
.tp-deck-url code[b-xvjuoli24u] { background: none; border: 0; padding: 0; color: var(--dark-ink); font-size: .9rem; }

.tp-deck-list[b-xvjuoli24u] { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tp-row[b-xvjuoli24u] {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: .6rem .2rem;
    border-top: 1px solid rgb(255 255 255 / .07);
}
.tp-row:first-child[b-xvjuoli24u] { border-top: 0; }
/* The tap marks where the single measurement branches into this decision — the deck's whole point. */
.tp-row-tap[b-xvjuoli24u] {
    position: relative;
    display: block;
    width: 1.5rem; height: 1px;
    background: rgb(141 240 166 / .35);
}
.tp-row-tap[b-xvjuoli24u]::after {
    content: "";
    position: absolute; right: -1px; top: -2.5px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
}
.tp-row-task[b-xvjuoli24u] { display: block; color: var(--dark-soft); font-size: .78rem; }
.tp-row-tool[b-xvjuoli24u] { display: block; color: var(--dark-ink); font-weight: 600; font-size: .95rem; }
.tp-row b[b-xvjuoli24u] {
    font-family: var(--font-display);
    font-size: .98rem;
    color: var(--signal);
    text-align: right;
    white-space: nowrap;
}
.tp-deck-note[b-xvjuoli24u] { margin: .85rem 0 0; color: var(--dark-soft); font-size: .82rem; opacity: .85; }

/* ---------------------------------------------------------------- proof strip */
.tp-proof[b-xvjuoli24u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: .75rem;
    margin-bottom: clamp(1rem, 3vw, 2rem);
}
.tp-proof span[b-xvjuoli24u] {
    display: block;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}
.tp-proof b[b-xvjuoli24u] { display: block; margin-bottom: .1rem; color: var(--ink); font-size: .95rem; }

/* ---------------------------------------------------------------- shared section head */
.tp-section-head[b-xvjuoli24u] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* ---------------------------------------------------------------- decision navigator */
.tp-chooser[b-xvjuoli24u] { padding-block: 0 clamp(1.5rem, 4vw, 2.5rem); }
.tp-decisions[b-xvjuoli24u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: .6rem;
}
.tp-decisions a[b-xvjuoli24u] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 52px;
    padding: .6rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tp-decisions a:hover[b-xvjuoli24u] { border-color: var(--brand); color: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.tp-decisions a .arrow[b-xvjuoli24u] { margin-left: auto; transition: transform .15s ease; }
.tp-decisions a:hover .arrow[b-xvjuoli24u] { transform: translateX(3px); }
.tp-num[b-xvjuoli24u] { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--brand); }

/* ---------------------------------------------------------------- featured tool */
.tp-featured-wrap[b-xvjuoli24u] { padding-block: 0 clamp(1.5rem, 4vw, 2.5rem); }
.tp-featured[b-xvjuoli24u] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    box-shadow: var(--shadow-1);
}
.tp-featured h2[b-xvjuoli24u] { font-size: var(--text-2xl); }
.tp-featured h2 a[b-xvjuoli24u], .tp-card h3 a[b-xvjuoli24u] { color: var(--ink); text-decoration: none; }
.tp-featured h2 a:hover[b-xvjuoli24u], .tp-card h3 a:hover[b-xvjuoli24u] { color: var(--brand-strong); text-decoration: underline; }

/* ---------------------------------------------------------------- input/output metadata */
.tp-meta[b-xvjuoli24u] { display: grid; gap: .35rem; margin: 0 0 1rem; }
.tp-meta > div[b-xvjuoli24u] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.tp-meta dt[b-xvjuoli24u] {
    flex: none;
    min-width: 4.5rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.tp-meta dd[b-xvjuoli24u] { margin: 0; color: var(--muted); font-size: .92rem; }

.tp-free[b-xvjuoli24u] {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
}
.tp-free[b-xvjuoli24u]::before { content: none; }

.tp-links[b-xvjuoli24u] { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; }
.tp-evidence[b-xvjuoli24u] { margin: 0; color: var(--muted); font-size: .86rem; }
.tp-evidence a[b-xvjuoli24u] { font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.tp-evidence a:hover[b-xvjuoli24u] { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- previews */
.tp-preview[b-xvjuoli24u] {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--wash), var(--card));
    overflow: hidden;
}
.tp-preview-bar[b-xvjuoli24u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--card);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .74rem;
}
.tp-badge[b-xvjuoli24u] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--wash-deep);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
.tp-preview-body[b-xvjuoli24u] { padding: .9rem 1rem 1rem; }
.tp-preview-h[b-xvjuoli24u] { margin: .7rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.tp-preview-note[b-xvjuoli24u] { margin: 0; padding: .6rem 1rem .8rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.tp-kpis[b-xvjuoli24u] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); gap: .5rem; margin-bottom: .8rem; }
.tp-kpis.two[b-xvjuoli24u] { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.tp-kpis > div[b-xvjuoli24u] { padding: .45rem .6rem; border-left: 2px solid var(--line); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tp-kpis span[b-xvjuoli24u] { display: block; color: var(--muted); font-size: .72rem; }
.tp-kpis b[b-xvjuoli24u] { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; }
.tp-kpis b.ok[b-xvjuoli24u] { color: var(--good); }

/* the LCP position map: good / needs-improvement / poor, with the two pins */
.tp-track[b-xvjuoli24u] { position: relative; display: flex; height: 12px; margin-bottom: 1.75rem; }
.tp-track-good[b-xvjuoli24u] { flex: 50; background: #cfe9d9; border-radius: 999px 0 0 999px; }
.tp-track-ni[b-xvjuoli24u] { flex: 30; background: #f6e4bd; }
.tp-track-poor[b-xvjuoli24u] { flex: 20; background: #f3d3d0; border-radius: 0 999px 999px 0; }
.tp-pin[b-xvjuoli24u] { position: absolute; top: -4px; width: 2px; height: 20px; border-radius: 2px; }
.tp-pin i[b-xvjuoli24u] { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.tp-pin-target[b-xvjuoli24u] { left: 50%; background: var(--good); }
.tp-pin-target i[b-xvjuoli24u] { color: var(--good); }
.tp-pin-now[b-xvjuoli24u] { left: 84%; background: var(--bad); }
.tp-pin-now i[b-xvjuoli24u] { color: var(--bad); }
.tp-zones[b-xvjuoli24u] { display: flex; align-items: start; margin: 0; color: var(--muted); font-size: .66rem; text-align: center; }
.tp-zones span[b-xvjuoli24u] { min-width: 0; }
.tp-zones span:nth-child(1)[b-xvjuoli24u] { flex: 50; }
.tp-zones span:nth-child(2)[b-xvjuoli24u] { flex: 30; }
.tp-zones span:nth-child(3)[b-xvjuoli24u] { flex: 20; }

.tp-bar-row[b-xvjuoli24u] { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr auto; align-items: center; gap: .55rem; margin: 0 0 .4rem; font-size: .78rem; color: var(--muted); }
.tp-bar-row.compact[b-xvjuoli24u] { grid-template-columns: 1fr auto; }
/* Every row in a panel is its own grid, so an "auto" label column and an "auto" value column
   resolve per row -- the bar tracks then start and end at different x for every row, and a
   reader compares lengths that share no baseline. One grid for the whole panel fixes the
   comparison: the rows dissolve into it so all three columns are measured across the set.
   Without display:contents the wrapper stays a plain block and each row keeps its own grid,
   which is exactly the previous rendering -- degraded, never broken. */
@supports (display: contents) {
    .tp-bars[b-xvjuoli24u] { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr auto; align-items: center; column-gap: .55rem; row-gap: .4rem; }
    .tp-bars.compact[b-xvjuoli24u] { grid-template-columns: 1fr auto; }
    .tp-bar-row[b-xvjuoli24u] { display: contents; }
}
.tp-bar-row b[b-xvjuoli24u] { color: var(--ink); font-family: var(--font-display); font-size: .85rem; white-space: nowrap; }
.tp-bar[b-xvjuoli24u] { display: block; height: 8px; border-radius: 999px; background: var(--wash-deep); overflow: hidden; }
.tp-bar i[b-xvjuoli24u] { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.tp-bar.ok i[b-xvjuoli24u] { background: var(--good); }
.tp-bar.warn i[b-xvjuoli24u] { background: var(--warn); }

.tp-split[b-xvjuoli24u] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: .5rem; margin-bottom: .6rem; }
.tp-split > div[b-xvjuoli24u] { padding: .45rem .6rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.tp-split span[b-xvjuoli24u] { display: block; color: var(--muted); font-size: .7rem; }
.tp-split b[b-xvjuoli24u] { display: block; color: var(--ink); font-size: .88rem; }

/* ---------------------------------------------------------------- the two-up card grid */
.tp-band[b-xvjuoli24u] { padding-block: clamp(2rem, 5vw, 3.5rem); }
.tp-grid[b-xvjuoli24u] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.tp-card[b-xvjuoli24u] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* :focus-within as well as :hover — the lift must not be mouse-only. */
.tp-card:hover[b-xvjuoli24u], .tp-card:focus-within[b-xvjuoli24u] { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand); }
.tp-card .tp-preview[b-xvjuoli24u] { border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.tp-card-body[b-xvjuoli24u] { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem clamp(1rem, 2.5vw, 1.4rem) 1.2rem; }
.tp-card-body p[b-xvjuoli24u] { margin: 0; }
.tp-card h3[b-xvjuoli24u] { margin: 0; font-size: var(--text-xl); }
.tp-card-body .tp-links[b-xvjuoli24u] { margin-top: auto; padding-top: .35rem; }

/* ---------------------------------------------------------------- evidence bases */
.tp-methods[b-xvjuoli24u] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: .75rem; }
.tp-methods a[b-xvjuoli24u] {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tp-methods a:hover[b-xvjuoli24u] { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.tp-methods b[b-xvjuoli24u] { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--brand-strong); letter-spacing: -.02em; }
.tp-methods span[b-xvjuoli24u] { display: block; margin-top: .2rem; color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* ---------------------------------------------------------------- the audit contrast */
.tp-audit[b-xvjuoli24u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    border: 1px solid var(--dark-line);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: var(--shadow-2);
}
.tp-audit-copy p[b-xvjuoli24u] { color: var(--dark-soft); }
.tp-audit .table-wrap[b-xvjuoli24u] { border-color: var(--dark-line); background: rgb(4 15 10 / .35); }
.tp-audit table.data[b-xvjuoli24u] { background: transparent; color: var(--dark-soft); }
.tp-audit table.data th[b-xvjuoli24u] { background: rgb(255 255 255 / .05); color: var(--dark-ink); border-color: var(--dark-line); }
.tp-audit table.data td[b-xvjuoli24u] { border-color: var(--dark-line); }
.tp-audit table.data td:last-child[b-xvjuoli24u] { color: var(--dark-ink); }
.tp-audit caption[b-xvjuoli24u] { color: var(--dark-soft); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 62rem) {
    .tp-hero-grid[b-xvjuoli24u], .tp-featured[b-xvjuoli24u], .tp-audit[b-xvjuoli24u] { grid-template-columns: minmax(0, 1fr); }
    .tp-featured .tp-preview[b-xvjuoli24u], .tp-audit .table-wrap[b-xvjuoli24u] { order: -1; }
}
@media (max-width: 40rem) {
    .tp-section-head[b-xvjuoli24u] { align-items: start; }
    .tp-links .btn[b-xvjuoli24u] { width: 100%; }
    .tp-row[b-xvjuoli24u] { grid-template-columns: 1rem 1fr; row-gap: .2rem; }
    .tp-row b[b-xvjuoli24u] { grid-column: 2; text-align: left; }
    .tp-preview-bar[b-xvjuoli24u] { flex-direction: column; align-items: start; gap: .3rem; }
    .tp-preview-bar > span:first-child[b-xvjuoli24u] { white-space: nowrap; }
}

/* ---------------------------------------------------------------- motion
   One animation, and it carries the page's argument: the console's five taps light up in sequence,
   so a reader sees a single measurement branching into five different decisions. Scroll-driven, no
   timers, no JS; the finished state is the base state, so without scroll timelines — or under the
   global reduced-motion rule, or in print — the completed deck is what renders. */
@keyframes tp-tap-b-xvjuoli24u { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .tp-row[b-xvjuoli24u] {
            animation: tp-tap-b-xvjuoli24u .55s cubic-bezier(.2, .75, .2, 1) both;
            animation-timeline: view();
            animation-range: entry 12% cover 26%;
        }
        .tp-row.tp-d2[b-xvjuoli24u] { animation-range: entry 16% cover 30%; }
        .tp-row.tp-d3[b-xvjuoli24u] { animation-range: entry 20% cover 34%; }
        .tp-row.tp-d4[b-xvjuoli24u] { animation-range: entry 24% cover 38%; }
        .tp-row.tp-d5[b-xvjuoli24u] { animation-range: entry 28% cover 42%; }
    }
}

@media print {
    .tp-row[b-xvjuoli24u] { opacity: 1; transform: none; }
    .tp-card[b-xvjuoli24u], .tp-featured[b-xvjuoli24u], .tp-audit[b-xvjuoli24u], .tp-preview[b-xvjuoli24u] { break-inside: avoid; box-shadow: none; }
    .tp-decisions[b-xvjuoli24u], .tp-proof[b-xvjuoli24u] { display: none; }
}
/* /Components/Pages/WhiteLabel.razor.rz.scp.css */
/* /white-label — scoped styles.

   Three visual levels. DECISION surfaces (hero, economics, reseller-or-affiliate) are light and
   tabular. DEMONSTRATION surfaces (the deliverable, the method, the workspace) are the largest
   objects on the page, one of them on the dark canvas. REFERENCE surfaces (fulfilment detail,
   FAQ, the playbook) are quiet or folded.

   Progressive enhancement throughout: the artifact tabs, the brand switch, the workspace tabs,
   the economics presets and the program decision are radios + :has(); without :has() every panel
   renders under its own heading. whitelabel.js adds the live parts (brand editing, a custom
   price) and marks html.js so the enhanced-only controls appear. The visitor's identity travels
   as two custom properties, --wl-accent and --wl-ink, set on every [data-wl-brand-root]. */

/* ------------------------------------------------------------------ hero */
.wl-hero[b-bp2lsoy00n] { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.wl-hero-grid[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.wl-h1[b-bp2lsoy00n] { margin: .35rem 0 .6rem; font-size: clamp(1.95rem, 4.1vw, 2.85rem); letter-spacing: -.02em; text-wrap: balance; }
.wl-lede[b-bp2lsoy00n] { margin: 0 0 1rem; max-width: 54ch; font-size: 1.05rem; color: var(--ink-soft); }

.wl-econ-strip[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 1px;
    margin: 0 0 1.25rem;
    max-width: 40rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
    overflow: hidden;
}
.wl-econ-strip > div[b-bp2lsoy00n] { padding: .7rem .9rem; background: var(--card); }
.wl-econ-strip dt[b-bp2lsoy00n] { margin: 0 0 .15rem; font-size: .76rem; color: var(--muted); }
.wl-econ-strip dd[b-bp2lsoy00n] { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.wl-econ-strip dd b[b-bp2lsoy00n] { font-size: 1.35rem; color: var(--brand-strong); }
.wl-econ-strip dd span[b-bp2lsoy00n] { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--muted); }

.wl-form[b-bp2lsoy00n] { margin: 0 0 1rem; }
.wl-form-row[b-bp2lsoy00n] { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }
.wl-form-row input[b-bp2lsoy00n] { flex: 1 1 16rem; }

.wl-facts[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }
.wl-facts li[b-bp2lsoy00n] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: .84rem;
    color: var(--ink-soft);
}
.wl-facts li[b-bp2lsoy00n]::before { content: "✓"; color: var(--brand); font-weight: 700; }
.wl-hero-secondary[b-bp2lsoy00n] { margin: 1rem 0 0; font-size: .92rem; }

/* ------------------------------------------------------------------ brand preview */
.wl-brand-form[b-bp2lsoy00n] {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand-wash);
}
.wl-brand-k[b-bp2lsoy00n] {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.wl-brand-fields[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
    gap: .6rem;
    align-items: end;
}
.wl-brand-fields label[b-bp2lsoy00n] { font-size: .84rem; }
.wl-brand-fields input[type="text"][b-bp2lsoy00n] { width: 100%; min-height: 44px; }
.wl-brand-colour input[b-bp2lsoy00n] { width: 3.2rem; height: 44px; padding: .2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.wl-brand-fields .btn[b-bp2lsoy00n] { min-height: 44px; }
.wl-brand-hint[b-bp2lsoy00n] { margin: .55rem 0 0 !important; font-size: .8rem; line-height: 1.45; }

.wl-switch[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; border: 0; }
.wl-switch legend[b-bp2lsoy00n], .wl-chips legend[b-bp2lsoy00n], .wl-art-tabs legend[b-bp2lsoy00n], .wl-ws-tabs legend[b-bp2lsoy00n], .wl-decide-q legend[b-bp2lsoy00n] {
    width: 100%;
    margin-bottom: .45rem;
    padding: 0;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.wl-switch label[b-bp2lsoy00n], .wl-chips label[b-bp2lsoy00n], .wl-ws-tabs label[b-bp2lsoy00n], .wl-decide-q label[b-bp2lsoy00n] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.wl-switch label:hover[b-bp2lsoy00n], .wl-chips label:hover[b-bp2lsoy00n], .wl-ws-tabs label:hover[b-bp2lsoy00n], .wl-decide-q label:hover[b-bp2lsoy00n], .wl-art-tabs label:hover[b-bp2lsoy00n] { border-color: var(--brand); }
/* The radio is visually hidden but focusable, so the ring lands on its label. */
.wl-radio:focus-visible + label[b-bp2lsoy00n] { outline: 3px solid var(--focus); outline-offset: 2px; }
.wl-radio:checked + label[b-bp2lsoy00n] { border-color: var(--brand); background: var(--brand); color: #fff; }

/* The report faces: both render; :has() picks one. Without :has() both show, each self-labelled. */
.wl-report[b-bp2lsoy00n] {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 6px);
    background: var(--card);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
@supports selector(:has(*)) {
    .wl-report[b-bp2lsoy00n] { display: none; }
    .wl-preview:has(#wl-b-std:checked) .wl-report-std[b-bp2lsoy00n],
    .wl-preview:has(#wl-b-agency:checked) .wl-report-agency[b-bp2lsoy00n] { display: block; }
}
.wl-report-head[b-bp2lsoy00n], .wl-doc-head[b-bp2lsoy00n] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    background: var(--wl-accent, var(--brand));
    color: var(--wl-ink, #fff);
}
.wl-logo[b-bp2lsoy00n] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.1rem; height: 2.1rem;
    border-radius: 6px;
    background: rgb(255 255 255 / .2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
}
.wl-report-id[b-bp2lsoy00n] { min-width: 0; }
.wl-report-id b[b-bp2lsoy00n] { display: block; font-family: var(--font-display); font-size: 1rem; overflow-wrap: anywhere; }
.wl-report-id span[b-bp2lsoy00n] { display: block; font-size: .76rem; opacity: .85; overflow-wrap: anywhere; }
.wl-report-stamp[b-bp2lsoy00n], .wl-doc-badge[b-bp2lsoy00n] {
    margin-left: auto;
    flex: none;
    padding: .15rem .5rem;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .95;
}
.wl-report-body[b-bp2lsoy00n] { padding: clamp(.9rem, 2.5vw, 1.2rem); }
.wl-report-meta[b-bp2lsoy00n] { margin: 0 0 .8rem; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); }
.wl-kpis[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr));
    gap: .4rem;
    margin: 0 0 .8rem;
}
.wl-kpis > div[b-bp2lsoy00n], .wl-doc-stats > div[b-bp2lsoy00n] {
    padding: .5rem .6rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--wash);
}
.wl-kpis b[b-bp2lsoy00n], .wl-doc-stats b[b-bp2lsoy00n] { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.wl-kpis span[b-bp2lsoy00n], .wl-doc-stats span[b-bp2lsoy00n] { display: block; font-size: .72rem; color: var(--muted); line-height: 1.3; }
.wl-kpis > .is-accent[b-bp2lsoy00n], .wl-doc-stats > .is-accent[b-bp2lsoy00n] { border-color: var(--wl-accent, var(--brand)); }
.wl-kpis > .is-accent b[b-bp2lsoy00n], .wl-doc-stats > .is-accent b[b-bp2lsoy00n] { color: var(--wl-accent, var(--brand-strong)); }
.wl-report-silent[b-bp2lsoy00n] {
    margin: 0 0 .8rem;
    padding: .5rem .7rem;
    border-left: 3px solid var(--wl-accent, var(--brand));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--wash);
    font-size: .82rem;
}
.wl-report-silent b[b-bp2lsoy00n] { display: block; }
.wl-report-fix[b-bp2lsoy00n] { display: grid; gap: .15rem; padding: .55rem .7rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.wl-report-k[b-bp2lsoy00n] {
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wl-accent, var(--brand));
}
.wl-report-fix span:last-child[b-bp2lsoy00n] { color: var(--muted); font-size: .84rem; }
.wl-report-foot[b-bp2lsoy00n] { margin: 0; padding: .6rem 1rem; border-top: 1px solid var(--line-soft); background: var(--wash); color: var(--muted); font-size: .78rem; }
.wl-preview-note[b-bp2lsoy00n] { margin: .8rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* ------------------------------------------------------------------ local navigation */
.wl-nav[b-bp2lsoy00n] {
    border-block: 1px solid var(--line-soft);
    background: rgb(251 253 251 / .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.wl-nav-row[b-bp2lsoy00n] { display: flex; align-items: center; gap: .15rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wl-nav-row[b-bp2lsoy00n]::-webkit-scrollbar { display: none; }
.wl-nav-row a[b-bp2lsoy00n] {
    flex: none;
    padding: .7rem .7rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.wl-nav-row a:hover[b-bp2lsoy00n] { color: var(--ink); }
.wl-nav-row a.is-active[b-bp2lsoy00n] { color: var(--brand-strong); border-bottom-color: var(--brand); }
.wl-nav-cta[b-bp2lsoy00n] { margin-left: auto; color: var(--brand-strong) !important; border-bottom-color: transparent !important; }
.wl-nav-cta[b-bp2lsoy00n]::after { content: " →"; }
@media (min-width: 56rem) {
    .wl-nav[b-bp2lsoy00n] { position: sticky; top: var(--header-h, 58px); z-index: 40; }
}

/* ------------------------------------------------------------------ band furniture */
.wl-band[b-bp2lsoy00n] { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.wl-band-head[b-bp2lsoy00n] { max-width: 48rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.wl-band-h[b-bp2lsoy00n] { margin: .35rem 0 .6rem; font-size: var(--text-2xl); max-width: 26ch; text-wrap: balance; }
.wl-band-lede[b-bp2lsoy00n] { margin: 0; max-width: 68ch; color: var(--ink-soft); }
.wl-band-link[b-bp2lsoy00n] { margin: 1.25rem 0 0; max-width: 74ch; font-size: .93rem; color: var(--muted); line-height: 1.6; }
.wl-band-link a + a[b-bp2lsoy00n] { margin-left: 1.25rem; }
.section-dark .wl-band-lede[b-bp2lsoy00n] { color: var(--dark-soft); }
.section-dark .wl-band-link[b-bp2lsoy00n] { color: var(--dark-soft); }
.wl-sub-h[b-bp2lsoy00n] { margin: clamp(1.75rem, 4vw, 2.5rem) 0 .4rem; font-size: var(--text-lg); }
.wl-split-h[b-bp2lsoy00n] {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ------------------------------------------------------------------ the deliverable */
.wl-lab[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: start;
}
.wl-art-tabs[b-bp2lsoy00n] { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; }
.wl-art-tabs label[b-bp2lsoy00n] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.wl-art-n[b-bp2lsoy00n] { font-family: var(--font-display); font-size: .74rem; font-weight: 700; color: var(--brand); padding-top: .15rem; }
.wl-art-tabs label b[b-bp2lsoy00n] { display: block; font-size: .95rem; }
.wl-art-tabs label small[b-bp2lsoy00n] { display: block; font-size: .78rem; color: var(--muted); }
/* The shared checked rule paints white text; the tab keeps ink on its pale wash. */
.wl-art-tabs .wl-radio:checked + label[b-bp2lsoy00n] { border-color: var(--brand); background: var(--brand-wash); color: var(--ink); }
.wl-art-tabs .wl-radio:checked + label .wl-art-n[b-bp2lsoy00n] { color: var(--brand-strong); }

.wl-docs[b-bp2lsoy00n] { display: grid; gap: 1rem; }
.wl-doc[b-bp2lsoy00n] {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.wl-doc-h[b-bp2lsoy00n] { margin: 0; padding: .6rem 1rem 0; font-size: .82rem; color: var(--muted); }
@supports selector(:has(*)) {
    .wl-doc[b-bp2lsoy00n] { display: none; }
    .wl-lab:has(#wl-a-exec:checked) .wl-doc-exec[b-bp2lsoy00n],
    .wl-lab:has(#wl-a-evidence:checked) .wl-doc-evidence[b-bp2lsoy00n],
    .wl-lab:has(#wl-a-plan:checked) .wl-doc-plan[b-bp2lsoy00n],
    .wl-lab:has(#wl-a-verify:checked) .wl-doc-verify[b-bp2lsoy00n] { display: block; }
    /* One panel at a time: its own heading duplicates the selected tab. */
    .wl-doc-h[b-bp2lsoy00n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.wl-doc-body[b-bp2lsoy00n] { padding: clamp(1rem, 2.5vw, 1.4rem); }
.wl-doc-body h4[b-bp2lsoy00n] { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.3; }
.wl-doc-body p[b-bp2lsoy00n] { margin: 0 0 .75rem; font-size: .95rem; line-height: 1.6; }
.wl-doc-stats[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .5rem; margin: 0 0 1rem; }
.wl-doc-note[b-bp2lsoy00n] { padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .86rem !important; color: var(--muted); }

.wl-verdict-bar[b-bp2lsoy00n] { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 0 0 .5rem; }
.wl-verdict-bar span.is-real[b-bp2lsoy00n], .wl-legend i.is-real[b-bp2lsoy00n], .wl-stamp.is-real[b-bp2lsoy00n] { background: var(--wl-accent, var(--brand)); }
.wl-verdict-bar span.is-wrong[b-bp2lsoy00n], .wl-legend i.is-wrong[b-bp2lsoy00n], .wl-stamp.is-wrong[b-bp2lsoy00n] { background: #7d8a83; }
.wl-verdict-bar span.is-trivial[b-bp2lsoy00n], .wl-legend i.is-trivial[b-bp2lsoy00n], .wl-stamp.is-trivial[b-bp2lsoy00n] { background: #b9c4bd; }
.wl-verdict-bar span.is-locked[b-bp2lsoy00n], .wl-legend i.is-locked[b-bp2lsoy00n], .wl-stamp.is-locked[b-bp2lsoy00n] { background: #3b4a42; }
.wl-legend[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 1rem !important; font-size: .82rem !important; color: var(--muted); }
.wl-legend i[b-bp2lsoy00n] { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -.05rem; }
.wl-stamp[b-bp2lsoy00n] {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
.wl-stamp.is-real[b-bp2lsoy00n] { color: var(--wl-ink, #fff); }
.wl-stamp.is-trivial[b-bp2lsoy00n] { color: var(--ink); }
.wl-rows[b-bp2lsoy00n] { font-size: .88rem; }
.wl-rows td[b-bp2lsoy00n] { vertical-align: top; }
.wl-rows td:first-child[b-bp2lsoy00n] { min-width: 12rem; }

.wl-chain[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.wl-chain span[b-bp2lsoy00n] { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--wash); font-family: var(--font-mono); font-size: .8rem; }
.wl-chain i[b-bp2lsoy00n] { flex: 1 1 1.5rem; max-width: 3rem; height: 2px; background: var(--wl-accent, var(--brand)); }
.wl-plan[b-bp2lsoy00n] { display: grid; gap: .6rem; margin: 0 0 1rem; }
.wl-plan > div[b-bp2lsoy00n] { padding: .7rem .9rem; border-left: 3px solid var(--wl-accent, var(--brand)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--wash); }
.wl-plan dt[b-bp2lsoy00n] { margin: 0 0 .15rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wl-accent, var(--brand-strong)); }
.wl-plan dd[b-bp2lsoy00n] { margin: 0; font-size: .92rem; line-height: 1.55; }
.wl-ppc[b-bp2lsoy00n] { display: grid; gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: ppc; }
.wl-ppc li[b-bp2lsoy00n] { position: relative; padding: .6rem .9rem .6rem 2.6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.wl-ppc li[b-bp2lsoy00n]::before {
    counter-increment: ppc;
    content: counter(ppc);
    position: absolute;
    left: .8rem; top: .75rem;
    display: grid;
    place-items: center;
    width: 1.3rem; height: 1.3rem;
    border-radius: 50%;
    background: var(--wl-accent, var(--brand));
    color: var(--wl-ink, #fff);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
}
.wl-ppc b[b-bp2lsoy00n] { display: block; font-family: var(--font-display); }
.wl-ppc span[b-bp2lsoy00n] { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.wl-json-k[b-bp2lsoy00n] { margin: 1rem 0 .4rem !important; font-size: .8rem !important; color: var(--muted); }
.wl-json[b-bp2lsoy00n] {
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--dark-bg);
    color: var(--dark-ink);
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.55;
    overflow: auto;
    max-height: 22rem;
}
.wl-json:focus-visible[b-bp2lsoy00n] { outline: 3px solid var(--focus); outline-offset: 2px; }

.wl-changes[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.wl-changes > div[b-bp2lsoy00n] { padding: .9rem 1rem; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); background: var(--card); }
.wl-changes > div.is-agency[b-bp2lsoy00n] { border-top-color: var(--wl-accent, #3b4ea8); }
.wl-changes b[b-bp2lsoy00n] { display: block; margin: 0 0 .3rem; font-family: var(--font-display); }
.wl-changes p[b-bp2lsoy00n] { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------------ the method (dark) */
.wl-lanes[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: clamp(.9rem, 2vw, 1.25rem);
}
.wl-lane[b-bp2lsoy00n] {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    background: rgb(4 15 10 / .45);
}
.wl-lane.is-result[b-bp2lsoy00n] { border-color: rgb(141 240 166 / .45); }
.wl-lane-k[b-bp2lsoy00n] {
    margin: 0 0 .35rem;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--signal);
}
.wl-lane h3[b-bp2lsoy00n] { margin: 0 0 .75rem; font-size: 1.05rem; }
.wl-dots[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.wl-dot[b-bp2lsoy00n] { width: .9rem; height: .9rem; border-radius: 50%; }
.wl-dot.is-real[b-bp2lsoy00n] { background: var(--signal); box-shadow: 0 0 0 3px rgb(141 240 166 / .18); }
.wl-dot.is-noise[b-bp2lsoy00n] { background: #2c4437; }
.wl-lane-out[b-bp2lsoy00n] { margin: 0; font-size: .9rem; color: var(--dark-soft); }
.wl-lane-out b[b-bp2lsoy00n] { color: var(--dark-ink); font-family: var(--font-display); }
.wl-gauge[b-bp2lsoy00n] { position: relative; display: grid; gap: .35rem; margin: 1.6rem 0 .9rem; }
.wl-gauge-pin[b-bp2lsoy00n] { position: absolute; right: 0; top: -1.45rem; font-size: .78rem; color: var(--dark-ink); }
.wl-gauge-pin[b-bp2lsoy00n]::after { content: ""; position: absolute; right: 1rem; top: 1.25rem; width: 2px; height: 1.1rem; background: var(--bad-dark); }
.wl-gauge-track[b-bp2lsoy00n] { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--good-dark) 0 40%, var(--warn-dark) 40% 72%, var(--bad-dark) 72% 100%); }
.wl-gauge-labels[b-bp2lsoy00n] { display: flex; justify-content: space-between; font-size: .7rem; color: var(--dark-soft); }
.wl-plan-stack[b-bp2lsoy00n] { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.wl-plan-stack li[b-bp2lsoy00n] { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .6rem; border-radius: var(--radius-sm); background: rgb(255 255 255 / .05); }
.wl-plan-stack b[b-bp2lsoy00n] { flex: none; min-width: 3.4rem; font-family: var(--font-display); font-size: .8rem; color: var(--signal); }
.wl-plan-stack span[b-bp2lsoy00n] { font-size: .88rem; color: var(--dark-ink); }
.wl-plan-stack li.is-quiet[b-bp2lsoy00n] { opacity: .7; }
.wl-plan-stack li.is-quiet b[b-bp2lsoy00n] { color: var(--dark-soft); }
.wl-verdicts-legend[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: .6rem;
    margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
}
.wl-verdicts-legend > div[b-bp2lsoy00n] { padding: .7rem .9rem; border: 1px solid var(--dark-line); border-radius: var(--radius-sm); }
.wl-verdicts-legend dt[b-bp2lsoy00n] { font-family: var(--font-display); font-weight: 700; color: var(--dark-ink); }
.wl-verdicts-legend dd[b-bp2lsoy00n] { margin: .15rem 0 0; font-size: .84rem; color: var(--dark-soft); line-height: 1.5; }

/* ------------------------------------------------------------------ economics */
.wl-calc[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.wl-chips[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; }
.wl-chips label[b-bp2lsoy00n] { min-width: 44px; justify-content: center; font-variant-numeric: tabular-nums; }
.wl-custom[b-bp2lsoy00n] { display: none; width: 100%; margin-top: .4rem; }
html.js .wl-custom[b-bp2lsoy00n] { display: block; }
/* Plain labels, not chips: they sit inside the chip fieldsets, so the chip rule has to be undone. */
.wl-custom label[b-bp2lsoy00n], .wl-own label[b-bp2lsoy00n] { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: default; font-size: .84rem; font-weight: 600; margin-bottom: .3rem; }
.wl-custom-input[b-bp2lsoy00n] { display: inline-flex; align-items: center; gap: .35rem; }
.wl-custom-input > span[b-bp2lsoy00n] { color: var(--muted); font-weight: 600; }
.wl-custom-input input[b-bp2lsoy00n] { width: 9rem; min-height: 44px; font-variant-numeric: tabular-nums; }
.wl-own[b-bp2lsoy00n] { display: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); }
html.js .wl-own[b-bp2lsoy00n] { display: block; }
.wl-own > summary[b-bp2lsoy00n] { padding: .6rem .9rem; cursor: pointer; font-weight: 600; font-size: .9rem; }
.wl-own-grid[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .6rem; padding: 0 .9rem .9rem; }
.wl-own-grid input[b-bp2lsoy00n] { width: 100%; min-height: 40px; }

/* Two independent axes, server-rendered: the price rules are generated inline from the same
   list as the controls; the four volume rules are fixed. */
.wl-out-price[b-bp2lsoy00n] { display: none; }
.wl-out-vol[b-bp2lsoy00n] { display: none; }
@supports selector(:has(*)) {
    .wl-calc:has(#wl-v-1:checked) .wl-out-vol-1[b-bp2lsoy00n],
    .wl-calc:has(#wl-v-2:checked) .wl-out-vol-2[b-bp2lsoy00n],
    .wl-calc:has(#wl-v-5:checked) .wl-out-vol-5[b-bp2lsoy00n],
    .wl-calc:has(#wl-v-10:checked) .wl-out-vol-10[b-bp2lsoy00n] { display: grid; }
}
@supports not selector(:has(*)) {
    /* One honest default renders instead of every panel: the list price at two a month. */
    .wl-calc-controls + .wl-out-price[b-bp2lsoy00n] { display: block; }
    .wl-out-vol-2[b-bp2lsoy00n] { display: grid; }
}
/* Once the script runs, the live output is the single panel. */
html.js .wl-calc.is-live .wl-out-price[b-bp2lsoy00n] { display: none !important; }
.wl-live[b-bp2lsoy00n] { display: none; }
html.js .wl-calc.is-live .wl-live[b-bp2lsoy00n] { display: block; }

.wl-margin[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: 1px; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.wl-margin > div[b-bp2lsoy00n] { padding: .8rem 1rem; background: var(--card); }
.wl-margin dt[b-bp2lsoy00n] { margin-bottom: .15rem; color: var(--muted); font-size: .8rem; }
.wl-margin dd[b-bp2lsoy00n] { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wl-margin .is-profit dd[b-bp2lsoy00n] { color: var(--brand-strong); }
.wl-out-vol[b-bp2lsoy00n] { gap: .1rem; }
.wl-out-vol b[b-bp2lsoy00n] { font-family: var(--font-display); font-size: clamp(1.7rem, 3.5vw, 2.2rem); line-height: 1; color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.wl-out-vol span[b-bp2lsoy00n] { color: var(--muted); font-size: .88rem; }

.wl-live-head[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.wl-live-head .wl-split-h[b-bp2lsoy00n] { margin: 0; }
.wl-margin-chip[b-bp2lsoy00n] { padding: .2rem .6rem; border-radius: 999px; background: var(--brand-wash); color: var(--brand-strong); font-size: .8rem; font-weight: 700; }
.wl-water[b-bp2lsoy00n] { display: grid; gap: .45rem; }
.wl-water-row[b-bp2lsoy00n] { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 6.5rem; align-items: center; gap: .6rem; font-size: .9rem; }
.wl-water-row > span:first-child[b-bp2lsoy00n] { color: var(--muted); }
.wl-water-row b[b-bp2lsoy00n] { text-align: right; font-variant-numeric: tabular-nums; }
.wl-water-track[b-bp2lsoy00n] { display: block; height: 12px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.wl-water-track i[b-bp2lsoy00n] { display: block; height: 100%; border-radius: 999px; transition: width .2s ease; }
.wl-water-track i.is-client[b-bp2lsoy00n] { background: var(--ink-soft); }
.wl-water-track i.is-cost[b-bp2lsoy00n] { background: var(--line); }
.wl-water-track i.is-profit[b-bp2lsoy00n] { background: var(--brand); }
.wl-water-track i.is-net[b-bp2lsoy00n] { background: var(--good); }
.wl-water-row.is-net[b-bp2lsoy00n] { padding-top: .45rem; border-top: 1px solid var(--line-soft); font-weight: 600; }
.wl-live-month[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); }
.wl-live-month > span[b-bp2lsoy00n] { color: var(--muted); font-size: .9rem; }
.wl-live-big[b-bp2lsoy00n] { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.1rem); color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.wl-live-loss[b-bp2lsoy00n], .wl-live-thin[b-bp2lsoy00n] { display: none; margin: .75rem 0 0; padding: .55rem .8rem; border-radius: var(--radius-sm); font-size: .86rem; line-height: 1.5; }
.wl-live.is-loss .wl-live-loss[b-bp2lsoy00n] { display: block; background: #fdf2f1; color: var(--bad); }
.wl-live.is-loss .wl-live-big[b-bp2lsoy00n], .wl-live.is-loss .wl-water-row.is-net b[b-bp2lsoy00n] { color: var(--bad); }
.wl-live.is-thin .wl-live-thin[b-bp2lsoy00n] { display: block; background: #fff6e5; color: var(--warn); }

.wl-matrix[b-bp2lsoy00n] { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.wl-matrix > summary[b-bp2lsoy00n], .wl-compare > summary[b-bp2lsoy00n], .wl-playbook > summary[b-bp2lsoy00n] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 52px;
    padding: .75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.wl-matrix > summary[b-bp2lsoy00n]::-webkit-details-marker, .wl-compare > summary[b-bp2lsoy00n]::-webkit-details-marker, .wl-playbook > summary[b-bp2lsoy00n]::-webkit-details-marker { display: none; }
.wl-matrix > summary[b-bp2lsoy00n]::before, .wl-compare > summary[b-bp2lsoy00n]::before, .wl-playbook > summary[b-bp2lsoy00n]::before, .wl-faq summary[b-bp2lsoy00n]::before {
    content: "";
    flex: none;
    width: .45rem; height: .45rem;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.wl-matrix[open] > summary[b-bp2lsoy00n]::before, .wl-compare[open] > summary[b-bp2lsoy00n]::before, .wl-playbook[open] > summary[b-bp2lsoy00n]::before, .wl-faq details[open] summary[b-bp2lsoy00n]::before { transform: rotate(45deg); }
.wl-matrix-body[b-bp2lsoy00n] { padding: 0 1rem 1rem; }
.wl-matrix-table td.num[b-bp2lsoy00n], .wl-matrix-table th[b-bp2lsoy00n] { font-variant-numeric: tabular-nums; }
.wl-matrix-table tr.is-custom td[b-bp2lsoy00n] { background: var(--brand-wash); }
.wl-matrix-tag[b-bp2lsoy00n] { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* ------------------------------------------------------------------ the workspace */
.wl-ws[b-bp2lsoy00n] {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.wl-ws-side[b-bp2lsoy00n] { padding: 1rem .9rem; border-right: 1px solid var(--line-soft); background: var(--wash); }
.wl-ws-brand[b-bp2lsoy00n] { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.wl-ws-brand .wl-logo[b-bp2lsoy00n] { width: 1.8rem; height: 1.8rem; font-size: .72rem; background: var(--wl-accent, var(--brand)); color: var(--wl-ink, #fff); }
.wl-ws-nav[b-bp2lsoy00n] { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.wl-ws-nav li[b-bp2lsoy00n] { padding: .38rem .55rem; border-radius: 7px; font-size: .86rem; color: var(--muted); }
.wl-ws-nav li.is-current[b-bp2lsoy00n] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--wl-accent, var(--brand)); }
.wl-ws-side-note[b-bp2lsoy00n] { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.wl-ws-main[b-bp2lsoy00n] { min-width: 0; padding: clamp(.9rem, 2vw, 1.25rem); display: grid; gap: clamp(.9rem, 2vw, 1.25rem); }
.wl-ws-panel[b-bp2lsoy00n] { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.wl-ws-panel-head[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .5rem; }
.wl-ws-panel-head h3[b-bp2lsoy00n] { margin: 0; font-size: 1rem; }
.wl-ws-panel-head span[b-bp2lsoy00n] { font-size: .76rem; color: var(--muted); }
.wl-ws-text[b-bp2lsoy00n] { margin: 0 0 .75rem; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
.wl-ws-foot[b-bp2lsoy00n] { margin: .75rem 0 0; color: var(--muted); }
.wl-opp[b-bp2lsoy00n] { margin: 0 0 .9rem; padding: .7rem .9rem; border-left: 3px solid var(--wl-accent, var(--brand)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--wash); }
.wl-opp-name[b-bp2lsoy00n] { margin: 0; font-family: var(--font-display); font-weight: 700; }
.wl-opp-src[b-bp2lsoy00n] { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); }
.wl-ws-tabs[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; border: 0; }
.wl-ws-tabs label[b-bp2lsoy00n] { min-height: 40px; font-size: .86rem; }
.wl-ws-asset[b-bp2lsoy00n] { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.wl-ws-asset figcaption[b-bp2lsoy00n] { display: grid; gap: .1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line-soft); background: var(--wash); }
.wl-ws-asset figcaption b[b-bp2lsoy00n] { font-size: .92rem; }
.wl-ws-asset figcaption span[b-bp2lsoy00n] { font-size: .8rem; color: var(--muted); }
.wl-ws-body[b-bp2lsoy00n] {
    margin: 0;
    max-height: 18rem;
    overflow: auto;
    padding: .8rem .9rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
    background: var(--card);
}
.wl-ws-body:focus-visible[b-bp2lsoy00n] { outline: 3px solid var(--focus); outline-offset: -3px; }
.wl-ws-asset + .wl-ws-asset[b-bp2lsoy00n] { margin-top: .6rem; }
@supports selector(:has(*)) {
    .wl-ws-asset[b-bp2lsoy00n] { display: none; }
    .wl-ws:has(#wl-w-proposal:checked) .wl-ws-asset-proposal[b-bp2lsoy00n],
    .wl-ws:has(#wl-w-email:checked) .wl-ws-asset-email[b-bp2lsoy00n],
    .wl-ws:has(#wl-w-objections:checked) .wl-ws-asset-objections[b-bp2lsoy00n] { display: block; }
}
.wl-ws-grid[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: clamp(.9rem, 2vw, 1.25rem); }
.wl-ws-list[b-bp2lsoy00n] { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .88rem; }
.wl-ws-list li[b-bp2lsoy00n] { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding-bottom: .35rem; border-bottom: 1px solid var(--line-soft); }
.wl-ws-list li:last-child[b-bp2lsoy00n] { border-bottom: 0; }
.wl-ws-list b[b-bp2lsoy00n] { flex: none; font-family: var(--font-display); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.wl-ws-list b.is-client[b-bp2lsoy00n] { color: var(--brand-strong); }
.wl-ws-list.is-plain li[b-bp2lsoy00n] { display: block; padding-left: 1rem; position: relative; color: var(--ink-soft); }
.wl-ws-list.is-plain li[b-bp2lsoy00n]::before { content: "·"; position: absolute; left: .2rem; color: var(--brand); font-weight: 700; }
.wl-ws-captions[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.wl-ws-captions b[b-bp2lsoy00n] { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: .95rem; }
.wl-ws-captions p[b-bp2lsoy00n] { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.wl-tools[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .6rem; }
.wl-tool[b-bp2lsoy00n] { display: grid; gap: .2rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wl-tool:hover[b-bp2lsoy00n] { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--brand); color: var(--ink); }
.wl-tool b[b-bp2lsoy00n] { font-family: var(--font-display); color: var(--brand-strong); }
.wl-tool span[b-bp2lsoy00n] { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.wl-tool em[b-bp2lsoy00n] { font-style: normal; color: var(--ink-soft); }

/* ------------------------------------------------------------------ fulfilment */
.wl-swim td[b-bp2lsoy00n] { vertical-align: top; font-size: .9rem; }
.wl-swim td:first-child[b-bp2lsoy00n] { white-space: nowrap; }
.wl-swim th:nth-child(3)[b-bp2lsoy00n], .wl-swim td:nth-child(3)[b-bp2lsoy00n] { background: rgb(13 107 60 / .045); }
.wl-swim td em[b-bp2lsoy00n] { color: var(--brand-strong); font-style: normal; font-weight: 600; }
.wl-api[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(1rem, 2.5vw, 1.5rem); padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.wl-api h3[b-bp2lsoy00n] { margin: 0 0 .35rem; font-size: 1.05rem; }
.wl-api p[b-bp2lsoy00n] { margin: 0; max-width: 62ch; font-size: .92rem; color: var(--muted); line-height: 1.55; }
.wl-api code[b-bp2lsoy00n], .wl-faq code[b-bp2lsoy00n] { font-family: var(--font-mono); font-size: .88em; padding: .05em .3em; border-radius: 4px; background: rgb(13 107 60 / .08); }

/* ------------------------------------------------------------------ reseller or affiliate */
.wl-decide[b-bp2lsoy00n] { display: grid; gap: 1rem; }
.wl-decide-q[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; }
.wl-decide-q legend[b-bp2lsoy00n] { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.wl-programs[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.wl-program[b-bp2lsoy00n] { display: flex; flex-direction: column; padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.wl-program h3[b-bp2lsoy00n] { margin: 0 0 .6rem; font-size: 1.15rem; }
.wl-program p:last-child[b-bp2lsoy00n] { margin: auto 0 0; padding-top: .9rem; }
.wl-program-k[b-bp2lsoy00n] { margin: 0 0 .35rem; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
@supports selector(:has(*)) {
    .wl-decide:has(#wl-d-yes:checked) .wl-program-reseller[b-bp2lsoy00n],
    .wl-decide:has(#wl-d-no:checked) .wl-program-affiliate[b-bp2lsoy00n] { border-color: var(--brand); background: var(--brand-wash); }
    .wl-decide:has(#wl-d-yes:checked) .wl-program-reseller .wl-program-k[b-bp2lsoy00n],
    .wl-decide:has(#wl-d-no:checked) .wl-program-affiliate .wl-program-k[b-bp2lsoy00n] { color: var(--brand-strong); }
    .wl-decide:has(#wl-d-yes:checked) .wl-program-affiliate[b-bp2lsoy00n],
    .wl-decide:has(#wl-d-no:checked) .wl-program-reseller[b-bp2lsoy00n] { opacity: .72; }
}
.wl-vs-here[b-bp2lsoy00n] { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.wl-fit[b-bp2lsoy00n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.wl-fit h3[b-bp2lsoy00n] { margin: 0 0 .6rem; font-size: var(--text-lg); }
.wl-x-list[b-bp2lsoy00n] { margin: 0; padding: 0; list-style: none; }
.wl-x-list li[b-bp2lsoy00n] { position: relative; padding-left: 1.3rem; margin-bottom: .45rem; color: var(--muted); font-size: .93rem; }
.wl-x-list li[b-bp2lsoy00n]::before { content: "—"; position: absolute; left: 0; color: var(--line); font-weight: 700; }
.wl-compare[b-bp2lsoy00n] { margin-top: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.wl-compare .table-wrap[b-bp2lsoy00n] { margin: 0 1rem 1rem; }
.wl-vs td[b-bp2lsoy00n] { vertical-align: top; }
.wl-vs td:first-child[b-bp2lsoy00n] { width: 1%; white-space: nowrap; color: var(--muted); }
.wl-vs thead th:nth-child(2)[b-bp2lsoy00n] { background: var(--brand-wash); }
.wl-vs tbody td:nth-child(2)[b-bp2lsoy00n] { background: color-mix(in srgb, var(--brand-wash) 45%, transparent); }

/* ------------------------------------------------------------------ FAQ */
.wl-faq[b-bp2lsoy00n] { display: grid; gap: .5rem; }
.wl-faq details[b-bp2lsoy00n] { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.wl-faq summary[b-bp2lsoy00n] { display: flex; align-items: center; gap: .55rem; min-height: 52px; padding: .75rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
.wl-faq summary[b-bp2lsoy00n]::-webkit-details-marker { display: none; }
.wl-faq summary:hover[b-bp2lsoy00n] { color: var(--brand-strong); }
.wl-faq p[b-bp2lsoy00n] { margin: 0; padding: 0 1rem 1rem 2rem; color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* ------------------------------------------------------------------ close */
.wl-close[b-bp2lsoy00n] { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.wl-close-panel[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-color: var(--brand); }
.wl-close-panel > div[b-bp2lsoy00n] { max-width: 60ch; }
.wl-close-h[b-bp2lsoy00n] { margin: .35rem 0 .5rem; font-size: var(--text-xl); }
.wl-close-panel p:not(.eyebrow)[b-bp2lsoy00n] { margin: 0; color: var(--muted); }
.wl-close-cta[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 !important; }
.wl-playbook[b-bp2lsoy00n] { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.wl-playbook-body[b-bp2lsoy00n] { padding: 0 1rem 1rem; }

/* ------------------------------------------------------------------ reveals */
@media (prefers-reduced-motion: no-preference) {
    html.js .wl-reveal[b-bp2lsoy00n] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
    html.js .wl-reveal.is-visible[b-bp2lsoy00n] { opacity: 1; transform: none; }
    .wl-report-head[b-bp2lsoy00n], .wl-doc-head[b-bp2lsoy00n], .wl-stamp.is-real[b-bp2lsoy00n], .wl-report-k[b-bp2lsoy00n] { transition: background .2s ease, color .2s ease, border-color .2s ease; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 62rem) {
    .wl-hero-grid[b-bp2lsoy00n], .wl-calc[b-bp2lsoy00n], .wl-lab[b-bp2lsoy00n], .wl-ws[b-bp2lsoy00n] { grid-template-columns: minmax(0, 1fr); }
    /* The preview follows the decision on one column, so the form is not pushed below the fold. */
    .wl-preview[b-bp2lsoy00n] { order: 2; }
    .wl-art-tabs[b-bp2lsoy00n] { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
    .wl-ws-side[b-bp2lsoy00n] { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .wl-ws-nav[b-bp2lsoy00n] { display: flex; flex-wrap: wrap; gap: .3rem; }
    .wl-brand-fields[b-bp2lsoy00n] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wl-brand-fields .btn[b-bp2lsoy00n] { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
    .wl-form-row .btn[b-bp2lsoy00n] { width: 100%; }
    .wl-band-link a + a[b-bp2lsoy00n] { margin-left: 0; display: block; margin-top: .4rem; }
    .wl-water-row[b-bp2lsoy00n] { grid-template-columns: minmax(0, 1fr) 6rem; }
    .wl-water-row .wl-water-track[b-bp2lsoy00n] { grid-column: 1 / -1; order: 3; }
    .wl-brand-fields[b-bp2lsoy00n] { grid-template-columns: minmax(0, 1fr); }
    .wl-swim td:first-child[b-bp2lsoy00n] { white-space: normal; }
    .wl-close-cta .btn[b-bp2lsoy00n] { width: 100%; }
    /* Three cells in two columns leaves an empty tile; one column reads as a list instead. */
    .wl-econ-strip[b-bp2lsoy00n] { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ print */
@media print {
    .wl-nav[b-bp2lsoy00n], .wl-brand-form[b-bp2lsoy00n], .wl-switch[b-bp2lsoy00n], .wl-art-tabs[b-bp2lsoy00n], .wl-ws-tabs[b-bp2lsoy00n], .wl-chips[b-bp2lsoy00n], .wl-custom[b-bp2lsoy00n], .wl-own[b-bp2lsoy00n], .wl-decide-q[b-bp2lsoy00n] { display: none; }
    @supports selector(:has(*)) {
        /* Paper has no radio: every face, artifact, asset and outcome prints. */
        .wl-report[b-bp2lsoy00n], .wl-doc[b-bp2lsoy00n], .wl-ws-asset[b-bp2lsoy00n] { display: block !important; margin-bottom: 1rem; }
        .wl-doc-h[b-bp2lsoy00n] { position: static; width: auto; height: auto; clip-path: none; }
        .wl-calc-controls + .wl-out-price[b-bp2lsoy00n] { display: block !important; }
        .wl-out-vol-2[b-bp2lsoy00n] { display: grid !important; }
    }
    .wl-report[b-bp2lsoy00n], .wl-doc[b-bp2lsoy00n], .wl-ws[b-bp2lsoy00n], .wl-calc[b-bp2lsoy00n] { box-shadow: none; break-inside: avoid; }
    .wl-json[b-bp2lsoy00n], .wl-ws-body[b-bp2lsoy00n] { max-height: none; }
}
/* /Components/Shared/AffiliateJoinForm.razor.rz.scp.css */
/* The join form owns its own styles. It used to borrow them from Affiliates.razor.css, where
   .af-form-row was written without ::deep — so the rules carried the PAGE's scope id and never
   matched the form's markup. The row never laid out, on either instance. Styles for a component
   belong to the component; here they are guaranteed to match. */

.af-form[b-tacfs2gv47] { margin-top: 1.5rem; display: grid; gap: 1rem; }

/* Address, consent, action — one column, in the order they are done. The email and the button
   shared a row before there was a box to tick; welding them together now would put a required
   checkbox after the submit control in the tab order. */
.af-form .field input[b-tacfs2gv47] { width: 100%; }

.af-error[b-tacfs2gv47] { margin: 1.5rem 0 .6rem; }

/* Consent is a decision, so it is given the weight of one: its own panel, full-height target,
   and the version it accepts written out rather than implied. */
.af-terms[b-tacfs2gv47] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .6rem;
    align-items: start;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    background: var(--wash);
}
.af-terms input[type="checkbox"][b-tacfs2gv47] {
    width: 1.1rem;
    height: 1.1rem;
    margin: .15rem 0 0;      /* optical alignment with the first line of the label */
    accent-color: var(--brand);
    flex: none;
}
.af-terms label[b-tacfs2gv47] {
    margin: 0;
    font-size: .92rem;
    font-weight: 450;
    line-height: 1.5;
    cursor: pointer;
}
.af-terms.is-invalid[b-tacfs2gv47] {
    border-color: var(--bad);
    background: #fbeae9;
}

.af-submit[b-tacfs2gv47] { width: 100%; justify-content: center; }

.af-form .hint[b-tacfs2gv47] { margin: 0; }
.af-returning[b-tacfs2gv47] { margin: 0 !important; }