/* Website-Check (/website-check)
   Premium Alzag-Bühne: Eingabe-Konsole links, gezeichneter "Prüfstand" (SVG)
   rechts. Der Prüfstand spiegelt echte Zustände: getippte Adresse, gewählter
   Kontext, Abruf, Weiterleitungen, Auswertung und am Ende die Befunde als
   Markierungen. Alles unter .wc / .wc-*; Farben nur aus --ogency-*.
   website-check.js setzt html.wc-live; ohne JS bzw. mit reduzierter Bewegung
   bleibt alles statisch und lesbar. */

.wc {
    --wc-ground: var(--ogency-black, #050506);
    --wc-surface: var(--ogency-black2, #111214);
    --wc-raised: var(--ogency-black3, #1d1f23);
    --wc-text: var(--ogency-white, #fff);
    --wc-muted: rgba(var(--ogency-white-rgb, 255, 255, 255), .76);
    --wc-faint: rgba(var(--ogency-white-rgb, 255, 255, 255), .62);
    --wc-line: rgba(var(--ogency-white-rgb, 255, 255, 255), .12);
    --wc-line-strong: rgba(var(--ogency-white-rgb, 255, 255, 255), .22);
    --wc-control: rgba(var(--ogency-white-rgb, 255, 255, 255), .26);
    --wc-accent: var(--ogency-base, #b5a886);
    --wc-accent-ink: var(--ogency-base-light, #c4baa0);
    --wc-accent-rgb: var(--ogency-base-rgb, 181, 168, 134);
    --wc-negative: #fca5a5;
    --wc-ease: cubic-bezier(.22, 1, .36, 1);
    display: block;
    color: var(--wc-text);
    font-size: 16px;
    line-height: 1.6;
}

/* alzag.css paints every `.page-wrapper main` with the page grey. */
.page-wrapper main.wc {
    background-color: var(--wc-ground);
}

/* The sticky stage in the report needs clip instead of hidden. */
.wc-page .page-wrapper {
    overflow: clip;
}

.wc *,
.wc *::before,
.wc *::after {
    box-sizing: border-box;
}

.wc [hidden] {
    display: none !important;
}

.wc :focus-visible {
    outline: 2px solid var(--wc-accent);
    outline-offset: 3px;
}

.wc a:not(.ogency-btn) {
    color: var(--wc-text);
    text-decoration: underline;
    text-decoration-color: var(--wc-accent);
    text-underline-offset: 3px;
    transition: color .25s ease;
}

.wc a:not(.ogency-btn):hover {
    color: var(--wc-accent-ink);
}

.wc-break {
    overflow-wrap: anywhere;
}

/* ---------- shared type ---------- */

.wc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--wc-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.wc-kicker::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.wc-h2 {
    margin: 0;
    color: var(--wc-text);
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.wc-h2:focus,
.wc-h3:focus {
    outline: none;
}

.wc-h3 {
    margin: 0;
    color: var(--wc-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.wc-accent {
    color: var(--wc-accent);
}

.wc-rise {
    display: inline-block;
}

/* ---------- buttons ---------- */

/* Dark label on Sandgold keeps the primary action readable (white on gold is ~2.4:1). */
.wc .ogency-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 30px;
    min-height: 56px;
    border: 0;
    color: var(--wc-ground);
    font-size: 16px;
    cursor: pointer;
}

.wc .ogency-btn:hover {
    color: var(--wc-ground);
}

.wc .ogency-btn:focus-visible {
    /* taste-skill-ignore: focus ring; alzag.css forces outline:none !important on .ogency-btn */
    box-shadow: 0 0 0 2px var(--wc-ground), 0 0 0 4px var(--wc-text);
}

.wc .ogency-btn[disabled] {
    opacity: .6;
    cursor: progress;
}

.wc-arrow {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: square;
    transition: transform .4s var(--wc-ease);
}

.wc .ogency-btn:hover .wc-arrow,
.wc .ogency-btn:focus-visible .wc-arrow {
    transform: translateX(4px);
}

.wc-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--wc-control);
    border-radius: 0;
    background: transparent;
    color: var(--wc-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .3s var(--wc-ease), color .3s var(--wc-ease);
}

.wc-btn:hover,
.wc-btn:focus-visible {
    border-color: var(--wc-accent);
    color: var(--wc-accent-ink);
}

.wc-text-btn {
    padding: 6px 0 4px;
    border: 0;
    border-bottom: 1px solid var(--wc-accent);
    background: none;
    color: var(--wc-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: color .25s ease;
}

.wc-text-btn:hover,
.wc-text-btn:focus-visible {
    color: var(--wc-accent-ink);
}

/* ---------- corner marks (viewfinder) ---------- */

.wc-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 0 solid var(--wc-accent);
    pointer-events: none;
    transition: width .5s var(--wc-ease), height .5s var(--wc-ease);
}

.wc-corner--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.wc-corner--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.wc-corner--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.wc-corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.wc-console:focus-within .wc-corner,
.wc-stage.is-busy .wc-corner {
    width: 26px;
    height: 26px;
}

/* ---------- hero ---------- */

.wc-hero {
    position: relative;
    padding: clamp(136px, 13vw, 180px) 0 clamp(72px, 8vw, 120px);
}

.wc-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 56px clamp(40px, 5vw, 88px);
    align-items: start;
}

.wc-stage-slot {
    margin-top: 42px;
}

.wc-title {
    margin: 0;
    color: var(--wc-text);
    font-size: clamp(40px, 4.6vw, 66px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.05em;
}

.wc-title__line {
    display: block;
    clip-path: inset(-.2em -1em -.14em -1em);
}

.wc-title__line > span {
    display: inline-block;
}

@media (min-width: 992px) {
    .wc-title__line {
        white-space: nowrap;
    }
}

.wc-title__line--accent {
    color: var(--wc-accent);
}

.wc-lead {
    max-width: 50ch;
    margin: 26px 0 0;
    color: rgba(var(--ogency-white-rgb, 255, 255, 255), .78);
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.65;
}

.wc-note {
    margin: 28px 0 0;
    color: var(--wc-muted);
}

/* load sequence */
html.wc-live .wc-load {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--wc-ease), transform .9s var(--wc-ease);
    transition-delay: calc(var(--load, 0) * 90ms + 120ms);
}

html.wc-live .wc-load--rise {
    opacity: 1;
    transform: translateY(108%);
}

html.wc-live .wc-hero.is-loaded .wc-load {
    opacity: 1;
    transform: none;
}

/* compact hero once the work starts */
.wc-hero.is-compact .wc-title {
    font-size: clamp(34px, 3.4vw, 48px);
}

.wc-hero.is-compact .wc-lead {
    display: none;
}

.wc-hero.is-result {
    padding-bottom: 40px;
}

.wc-hero.is-result .wc-title {
    font-size: clamp(28px, 2.6vw, 36px);
}

.wc-hero.is-result .wc-hero__grid {
    grid-template-columns: minmax(0, 1fr);
}

.wc-hero.is-result .wc-console,
.wc-hero.is-result .wc-stage-slot {
    display: none;
}

/* ---------- console ---------- */

.wc-console {
    position: relative;
    margin-top: 38px;
    padding: 30px;
    border: 1px solid var(--wc-line);
    background: rgba(var(--ogency-black2-rgb, 17, 18, 20), .7);
}

.wc-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--wc-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.wc-optional {
    color: var(--wc-faint);
    font-weight: 500;
}

.wc-input {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--wc-control);
    border-radius: 0;
    background: #0b0c0e;
    color: var(--wc-text);
    font: inherit;
    font-size: 16px;
    transition: border-color .3s var(--wc-ease), box-shadow .3s var(--wc-ease);
}

.wc-input::placeholder {
    color: rgba(var(--ogency-white-rgb, 255, 255, 255), .48);
}

.wc-input:hover {
    border-color: rgba(var(--ogency-white-rgb, 255, 255, 255), .42);
}

.wc-input:focus {
    outline: none;
    border-color: var(--wc-accent);
    /* taste-skill-ignore: brand focus ring for form fields (DESIGN.md, contact-form--refined) */
    box-shadow: 0 0 0 3px rgba(var(--wc-accent-rgb), .18);
}

.wc-input[aria-invalid="true"] {
    border-color: var(--wc-negative);
}

.wc-textarea {
    min-height: 96px;
    resize: vertical;
}

/* address row: scheme prefix + field + button share one frame */
.wc-url__row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--wc-control);
    background: #0b0c0e;
    transition: border-color .3s var(--wc-ease), box-shadow .3s var(--wc-ease);
}

.wc-url__row:focus-within {
    border-color: var(--wc-accent);
    /* taste-skill-ignore: brand focus ring for form fields */
    box-shadow: 0 0 0 3px rgba(var(--wc-accent-rgb), .18);
}

.wc-url__row.is-invalid {
    border-color: var(--wc-negative);
}

.wc-url__scheme {
    display: flex;
    align-items: center;
    padding-left: 18px;
    color: var(--wc-faint);
    font-size: 19px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity .3s ease, color .3s ease;
}

.wc-url__scheme.is-hidden {
    width: 0;
    padding-left: 12px;
    overflow: hidden;
    opacity: 0;
}

.wc-url__scheme.is-http {
    color: var(--wc-negative);
}

.wc-input--url {
    min-width: 0;
    min-height: 66px;
    padding-left: 2px;
    border: 0;
    background: transparent;
    font-size: 19px;
    font-weight: 600;
}

.wc-input--url:focus {
    box-shadow: none;
}

.wc-url__submit {
    flex: none;
    min-height: 66px !important;
}

.wc-hint {
    margin: 12px 0 0;
    color: var(--wc-faint);
    font-size: 14px;
    line-height: 1.55;
}

.wc-field-error {
    margin: 12px 0 0;
    color: #fecaca;
    font-size: 15px;
    line-height: 1.5;
}

.wc-field-error::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: var(--wc-negative);
    vertical-align: 1px;
}

.wc-status {
    margin: 12px 0 0;
    color: var(--wc-muted);
    font-size: 15px;
}

.wc-status:empty {
    display: none;
}

.wc-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--wc-line);
    list-style: none;
    color: var(--wc-muted);
    font-size: 14px;
    font-weight: 600;
}

.wc-facts li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wc-facts li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--wc-accent);
}

.wc-view.is-entering {
    animation: wc-view-in .5s var(--wc-ease) both;
}

@keyframes wc-view-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* context step */
.wc-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--wc-line);
    font-size: 15px;
}

.wc-chosen__label {
    color: var(--wc-faint);
}

.wc-chosen__url {
    min-width: 0;
    color: var(--wc-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wc-chosen .wc-text-btn {
    margin-left: auto;
}

.wc-step-title {
    margin: 24px 0 0;
    color: var(--wc-text);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.wc-view > .wc-step-title:first-child,
.wc-progress__head .wc-step-title {
    margin-top: 0;
}

.wc-step-title:focus {
    outline: none;
}

.wc-step-text {
    max-width: 60ch;
    margin: 8px 0 0;
    color: var(--wc-muted);
    font-size: 16px;
}

.wc-context {
    margin-top: 22px;
}

.wc-context__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.wc-field {
    display: block;
    margin: 0;
}

.wc-field--wide {
    grid-column: 1 / -1;
}

.wc-goals {
    min-width: 0;
    margin: 22px 0 0;
    padding: 0;
    border: 0;
}

.wc-goals__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wc-goal {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.wc-goal input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.wc-goal span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--wc-control);
    color: var(--wc-muted);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .3s var(--wc-ease), color .3s var(--wc-ease), padding .3s var(--wc-ease);
}

.wc-goal span::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--wc-accent);
    opacity: 0;
    transform: translateY(-50%) scale(.5);
    transition: transform .3s var(--wc-ease), opacity .3s ease;
}

.wc-goal:hover span {
    border-color: rgba(var(--ogency-white-rgb, 255, 255, 255), .5);
    color: var(--wc-text);
}

.wc-goal input:checked + span {
    padding-left: 30px;
    border-color: var(--wc-accent);
    color: var(--wc-text);
}

.wc-goal input:checked + span::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.wc-goal input:focus-visible + span {
    outline: 2px solid var(--wc-accent);
    outline-offset: 3px;
}

.wc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: 26px;
}

/* progress */
.wc-progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.wc-elapsed {
    color: var(--wc-accent-ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wc-phases {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.wc-phase {
    position: relative;
    padding: 0 0 22px 38px;
    color: var(--wc-faint);
}

.wc-phase::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--wc-control);
    border-radius: 50%;
}

.wc-phase::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 28px;
    bottom: 4px;
    width: 1px;
    background: var(--wc-line);
}

.wc-phase:last-child::after {
    display: none;
}

.wc-phase__label {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
}

.wc-phase__detail {
    display: block;
    margin-top: 2px;
    color: var(--wc-faint);
    font-size: 14px;
    overflow-wrap: anywhere;
    animation: wc-view-in .4s var(--wc-ease) both;
}

.wc-phase.is-current {
    color: var(--wc-text);
}

.wc-phase.is-current::before {
    border-color: rgba(var(--wc-accent-rgb), .25);
    border-top-color: var(--wc-accent);
    animation: wc-spin .9s linear infinite;
}

.wc-phase.is-done {
    color: var(--wc-muted);
}

.wc-phase.is-done::before {
    border-color: var(--wc-accent);
    background: var(--wc-accent);
}

/* check mark inside a finished phase */
.wc-phase.is-done .wc-phase__label::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--wc-ground);
    border-bottom: 2px solid var(--wc-ground);
    transform: rotate(45deg);
}

.wc-phase.is-done::after {
    background: var(--wc-accent);
}

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

/* ---------- stage (SVG Prüfstand) ---------- */

.wc-stage {
    position: relative;
    margin: 0;
    padding: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) 18px;
    border: 1px solid var(--wc-line);
    background: rgba(var(--ogency-black2-rgb, 17, 18, 20), .5);
}

.wc-stage__canvas {
    position: relative;
    aspect-ratio: 600 / 412;
}

.wc-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.wc-svg text {
    font-family: var(--ogency-font, "Plus Jakarta Sans", sans-serif);
}

.wc-s-frame,
.wc-s-box,
.wc-s-line,
.wc-s-rule,
.wc-s-ring {
    fill: none;
    stroke: rgba(var(--ogency-white-rgb, 255, 255, 255), .24);
    stroke-width: 1;
    transition: stroke .4s var(--wc-ease), fill .4s var(--wc-ease), opacity .4s var(--wc-ease);
}

.wc-s-cardbg {
    fill: var(--wc-surface);
    stroke: rgba(var(--ogency-white-rgb, 255, 255, 255), .24);
}

.wc-s-phonebg {
    fill: #0b0c0e;
    stroke: rgba(var(--ogency-white-rgb, 255, 255, 255), .3);
}

.wc-s-fill {
    fill: rgba(var(--ogency-white-rgb, 255, 255, 255), .16);
    transition: fill .4s var(--wc-ease), opacity .4s var(--wc-ease);
}

.wc-s-bar {
    fill: rgba(var(--ogency-white-rgb, 255, 255, 255), .1);
    transition: fill .4s var(--wc-ease);
}

.wc-s-dot {
    fill: rgba(var(--ogency-white-rgb, 255, 255, 255), .2);
}

.wc-s-cta {
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 1;
    transition: fill .4s var(--wc-ease);
}

.wc-s-cta__label {
    fill: var(--wc-accent);
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    transition: fill .4s var(--wc-ease);
}

.wc-s-url {
    fill: rgba(var(--ogency-white-rgb, 255, 255, 255), .86);
    font-size: 11px;
    font-weight: 600;
}

.wc-s-url.is-placeholder {
    fill: rgba(var(--ogency-white-rgb, 255, 255, 255), .4);
}

.wc-s-lock rect {
    fill: var(--wc-accent);
    transition: fill .3s ease;
}

.wc-s-lock__shackle {
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: 100% 100%;
    transition: transform .4s var(--wc-ease), stroke .3s ease;
}

.wc-stage[data-scheme="http"] .wc-s-lock rect {
    fill: var(--wc-negative);
}

.wc-stage[data-scheme="http"] .wc-s-lock__shackle {
    stroke: var(--wc-negative);
    transform: rotate(-35deg);
}

.wc-s-spin {
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 1.6;
    stroke-dasharray: .3 .7;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.wc-s-h1text {
    fill: var(--wc-text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    opacity: 0;
    transition: opacity .35s ease;
}

.wc-stage.has-h1 .wc-s-h1text {
    opacity: 1;
}

.wc-stage.has-h1 .wc-s-h1bar {
    opacity: 0;
}

.wc-s-serptext {
    fill: var(--wc-text);
    font-size: 11.5px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .35s ease;
}

.wc-stage.has-serp .wc-s-serptext {
    opacity: 1;
}

.wc-stage.has-serp .wc-s-serpbar {
    opacity: 0;
}

.wc-s-stars path {
    fill: none;
    stroke: rgba(var(--ogency-white-rgb, 255, 255, 255), .3);
    stroke-width: 1;
    transition: fill .4s var(--wc-ease), stroke .4s var(--wc-ease);
}

.wc-s-node {
    fill: var(--wc-accent);
}

.wc-s-wire__base {
    fill: none;
    stroke: rgba(var(--ogency-white-rgb, 255, 255, 255), .2);
    stroke-width: 1;
    stroke-dasharray: .015 .015;
}

.wc-s-wire__pulse {
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 2;
    stroke-dasharray: .16 1;
    stroke-dashoffset: .16;
    opacity: 0;
}

.wc-s-loadbar {
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.wc-s-scan {
    display: none;
    pointer-events: none;
}

.wc-s-scan__band {
    fill: rgba(var(--wc-accent-rgb), .07);
}

.wc-s-scan__line {
    fill: var(--wc-accent);
}

/* highlight: hovered finding, goal choice, active pin */
.wc-s-region.is-hot .wc-s-box,
.wc-s-region.is-hot .wc-s-frame,
.wc-s-region.is-hot .wc-s-line,
.wc-s-region.is-hot .wc-s-ring,
.wc-s-region.is-hot .wc-s-rule,
.wc-s-region.is-hot .wc-s-cardbg,
.wc-s-region.is-hot .wc-s-phonebg,
.wc-stage[data-goal="trust"] .wc-s-box.wc-s-goal[data-goal="trust"],
.wc-stage[data-goal="local"] .wc-s-goal[data-goal="local"] .wc-s-line {
    stroke: var(--wc-accent);
}

.wc-s-region.is-hot .wc-s-fill,
.wc-s-region.is-hot .wc-s-bar,
.wc-stage[data-goal="recruiting"] .wc-s-bar[data-goal="recruiting"],
.wc-stage[data-goal="local"] .wc-s-goal[data-goal="local"] .wc-s-bar {
    fill: rgba(var(--wc-accent-rgb), .7);
}

.wc-s-region.is-hot .wc-s-cta,
.wc-stage[data-goal="leads"] .wc-s-cta {
    fill: var(--wc-accent);
}

.wc-s-region.is-hot .wc-s-cta__label,
.wc-stage[data-goal="leads"] .wc-s-cta__label {
    fill: var(--wc-ground);
}

.wc-stage[data-goal="trust"] .wc-s-stars path,
.wc-s-region.is-hot .wc-s-stars path {
    fill: var(--wc-accent);
    stroke: var(--wc-accent);
}

.wc-stage[data-goal="mobile"] .wc-s-phonebg {
    stroke: var(--wc-accent);
}

.wc-s-region.is-hot .wc-s-phonebg {
    fill: rgba(var(--wc-accent-rgb), .06);
}

/* result: flagged areas carry the gold, unchecked ones recede */
.wc-stage.is-result .wc-s-region {
    transition: opacity .5s var(--wc-ease);
}

.wc-stage.is-result .wc-s-region.is-improve .wc-s-box,
.wc-stage.is-result .wc-s-region.is-improve .wc-s-cardbg,
.wc-stage.is-result .wc-s-region.is-improve .wc-s-phonebg,
.wc-stage.is-result .wc-s-region.is-improve .wc-s-ring {
    stroke: rgba(var(--wc-accent-rgb), .8);
}

.wc-stage.is-result .wc-s-region.is-unchecked {
    opacity: .5;
}

/* state: request / fetching */
.wc-stage[data-state="fetching"] .wc-s-wire__pulse,
.wc-stage[data-state="request"] .wc-s-wire__pulse {
    opacity: 1;
    animation: wc-pulse-wire 1.1s linear infinite;
}

.wc-stage[data-state="fetching"] .wc-s-spin,
.wc-stage[data-state="request"] .wc-s-spin {
    opacity: 1;
    animation: wc-spin .8s linear infinite;
}

@keyframes wc-pulse-wire {
    from { stroke-dashoffset: .16; }
    to { stroke-dashoffset: -1; }
}

/* state: analyzing */
.wc-stage[data-state="analyzing"] .wc-s-browser .wc-s-scan {
    display: block;
    animation: wc-scan 1.7s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes wc-scan {
    from { transform: translateY(0); }
    to { transform: translateY(292px); }
}

/* state: measuring */
.wc-stage[data-state="measuring"] .wc-s-scan--phone {
    display: block;
    animation: wc-scan-phone 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}

.wc-stage[data-state="measuring"] .wc-s-loadbar {
    animation: wc-load 2.4s var(--wc-ease) infinite;
}

@keyframes wc-scan-phone {
    from { transform: translateY(0); }
    to { transform: translateY(176px); }
}

@keyframes wc-load {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* state: error */
.wc-stage[data-state="error"] .wc-s-url {
    fill: var(--wc-negative);
}

.wc-stage[data-state="error"] .wc-s-browser {
    opacity: .55;
}

/* draw-in on load */
html.wc-live .wc-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s var(--wc-ease), stroke .4s var(--wc-ease);
}

html.wc-live .wc-svg .wc-s-fill,
html.wc-live .wc-svg .wc-s-bar,
html.wc-live .wc-svg .wc-s-cta,
html.wc-live .wc-svg .wc-s-ring,
html.wc-live .wc-svg .wc-s-dot,
html.wc-live .wc-svg .wc-s-stars,
html.wc-live .wc-svg .wc-s-url,
html.wc-live .wc-svg .wc-s-cta__label,
html.wc-live .wc-svg .wc-s-lock {
    opacity: 0;
    transition: opacity .6s ease .9s, fill .4s var(--wc-ease);
}

html.wc-live .wc-stage.is-drawn .wc-draw {
    stroke-dashoffset: 0;
}

html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-fill,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-bar,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-cta,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-ring,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-dot,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-stars,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-url,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-cta__label,
html.wc-live .wc-stage.is-drawn .wc-svg .wc-s-lock {
    opacity: 1;
}

html.wc-live .wc-stage.is-drawn.has-h1 .wc-s-h1bar,
html.wc-live .wc-stage.is-drawn.has-serp .wc-s-serpbar {
    opacity: 0;
}

/* ticker */
.wc-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--wc-line);
    color: var(--wc-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.wc-ticker__dot {
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--wc-accent);
}

.wc-stage.is-busy .wc-ticker__dot {
    animation: wc-blink 1s steps(2, jump-none) infinite;
}

@keyframes wc-blink {
    50% { opacity: .2; }
}

/* pins on the stage */
.wc-pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wc-pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--wc-text);
    border-radius: 50%;
    background: var(--wc-ground);
    color: var(--wc-text);
    font: 700 13px/1 var(--ogency-font, "Plus Jakarta Sans", sans-serif);
    font-variant-numeric: tabular-nums;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(var(--s, 1));
    transition: transform .35s var(--wc-ease), background-color .3s ease;
}

.wc-pin--improve {
    border-color: var(--wc-accent);
    background: var(--wc-accent);
    color: var(--wc-ground);
}

.wc-pin--improve::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid var(--wc-accent);
    border-radius: 50%;
    opacity: 0;
    animation: wc-ping 2.4s var(--wc-ease) 3;
}

.wc-pin--unchecked {
    border-style: dashed;
    border-color: var(--wc-control);
    color: var(--wc-faint);
}

.wc-pin svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.wc-pin:hover,
.wc-pin:focus-visible,
.wc-pin.is-hot {
    --s: 1.18;
}

.wc-stage.is-result .wc-pin {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.wc-stage.is-result .wc-pin svg {
    width: 12px;
    height: 12px;
}

.wc-pin__tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    padding: 6px 10px;
    background: var(--wc-text);
    color: var(--wc-ground);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .25s ease, transform .25s var(--wc-ease);
    pointer-events: none;
}

.wc-pin:hover .wc-pin__tip,
.wc-pin:focus-visible .wc-pin__tip,
.wc-pin.is-hot .wc-pin__tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

html.wc-live .wc-pin {
    animation: wc-pin-in .55s var(--wc-ease) both;
    animation-delay: calc(var(--i, 0) * 70ms + 200ms);
}

@keyframes wc-pin-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)); }
}

@keyframes wc-ping {
    0% { opacity: .9; transform: scale(.8); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- scope section ---------- */

.wc-scope {
    padding: clamp(80px, 9vw, 140px) 0;
    border-top: 1px solid var(--wc-line);
}

.wc-scope__head {
    max-width: 760px;
}

.wc-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 32px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

.wc-point {
    position: relative;
    padding: 28px 0 34px;
    border-top: 1px solid var(--wc-line);
}

.wc-point::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--wc-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s var(--wc-ease);
}

.wc-point.is-in::before {
    transform: scaleX(.18);
}

.wc-point:hover::before {
    transform: scaleX(1);
}

.wc-icon {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wc-point h3 {
    margin: 18px 0 0;
    color: var(--wc-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.wc-point p {
    margin: 8px 0 0;
    color: var(--wc-muted);
    font-size: 15px;
    line-height: 1.6;
}

.wc-scope__notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px clamp(40px, 6vw, 96px);
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--wc-line);
}

.wc-scope__notes h3 {
    margin: 0;
    color: var(--wc-text);
    font-size: 18px;
    font-weight: 700;
}

.wc-scope__notes p {
    margin: 10px 0 0;
    color: var(--wc-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* icon draw */
html.wc-live .wc-icon * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--wc-ease);
    transition-delay: calc(var(--i, 0) * 80ms + 200ms);
}

html.wc-live .is-in .wc-icon * {
    stroke-dashoffset: 0;
}

/* generic reveals */
html.wc-live [data-wc-reveal],
html.wc-live [data-wc-item] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--wc-ease), transform 1s var(--wc-ease);
    transition-delay: calc(var(--i, 0) * 80ms);
}

html.wc-live [data-wc-reveal].is-in,
html.wc-live [data-wc-item].is-in {
    opacity: 1;
    transform: none;
}

html.wc-live [data-wc-reveal] .wc-rise {
    clip-path: inset(0 0 100% 0);
    transform: translateY(40%);
    transition: clip-path 1s var(--wc-ease), transform 1s var(--wc-ease);
}

html.wc-live [data-wc-reveal] .wc-rise + .wc-rise {
    transition-delay: .12s;
}

html.wc-live [data-wc-reveal].is-in .wc-rise {
    clip-path: inset(-.2em -.2em -.2em -.2em);
    transform: none;
}

/* ---------- report ---------- */

.wc-report {
    padding: 0 0 clamp(80px, 9vw, 140px);
}

.wc-report__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 48px clamp(40px, 5vw, 80px);
    align-items: start;
}

.wc-report__aside {
    position: sticky;
    top: 110px;
}

.wc-report__aside .wc-stage {
    background: rgba(var(--ogency-black2-rgb, 17, 18, 20), .6);
}

.wc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: var(--wc-faint);
    font-size: 13px;
}

.wc-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wc-mark {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--wc-text);
    border-radius: 50%;
}

.wc-mark--improve {
    border-color: var(--wc-accent);
    background: var(--wc-accent);
}

.wc-mark--unchecked {
    border-style: dashed;
    border-color: var(--wc-control);
}

.wc-block {
    margin-top: clamp(64px, 7vw, 104px);
}

.wc-block__head {
    margin-bottom: 26px;
}

.wc-block__note {
    margin: 12px 0 0;
    color: var(--wc-faint);
    font-size: 15px;
}

/* report head */
.wc-rhead__title {
    margin: 0;
    color: var(--wc-text);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
    overflow-wrap: break-word;
    word-break: break-word;
}

.wc-rhead__title:focus {
    outline: none;
}

.wc-rhead__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 22px;
}

.wc-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 30px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--wc-line);
}

.wc-meta div {
    min-width: 0;
}

.wc-meta dt {
    color: var(--wc-faint);
    font-size: 13px;
    font-weight: 500;
}

.wc-meta dd {
    margin: 3px 0 0;
    color: var(--wc-text);
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wc-summary {
    margin: 36px 0 0;
    color: var(--wc-text);
    font-size: clamp(19px, 1.55vw, 23px);
    font-weight: 500;
    line-height: 1.55;
}

/* balance: three counts + proportional bar */
.wc-balance {
    margin-top: 36px;
}

.wc-balance__counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wc-balance__count {
    display: block;
    padding-top: 16px;
    border-top: 1px solid var(--wc-line);
}

.wc-balance__value {
    display: block;
    color: var(--wc-text);
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.wc-balance__count--improve .wc-balance__value {
    color: var(--wc-accent);
}

.wc-balance__count--unchecked .wc-balance__value {
    color: var(--wc-faint);
}

.wc-balance__label {
    display: block;
    margin-top: 10px;
    color: var(--wc-muted);
    font-size: 14px;
}

.wc-balance__bar {
    display: block;
    width: 100%;
    height: 14px;
    margin-top: 24px;
    overflow: visible;
}

.wc-balance__bar rect {
    transform-box: fill-box;
    transform-origin: left center;
}

.wc-bar--improve { fill: var(--wc-accent); }
.wc-bar--ok { fill: rgba(var(--ogency-white-rgb, 255, 255, 255), .72); }
.wc-bar--unchecked { fill: none; stroke: var(--wc-control); stroke-dasharray: 3 3; }

html.wc-live .wc-balance__bar rect {
    transform: scaleX(0);
    transition: transform 1.1s var(--wc-ease);
    transition-delay: calc(var(--i, 0) * 160ms + 150ms);
}

html.wc-live .is-in .wc-balance__bar rect {
    transform: none;
}

/* pills */
.wc-pill {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.wc-pill--improve {
    background: rgba(var(--wc-accent-rgb), .16);
    color: var(--wc-accent-ink);
}

.wc-pill--ok,
.wc-pill--partial {
    background: rgba(var(--ogency-white-rgb, 255, 255, 255), .08);
    color: var(--wc-text);
}

.wc-pill--unchecked {
    border: 1px dashed var(--wc-control);
    color: var(--wc-muted);
}

.wc-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    color: var(--wc-faint);
    font-size: 14px;
    list-style: none;
}

/* SERP preview + length meters */
.wc-serp {
    position: relative;
    padding: clamp(20px, 2.4vw, 32px);
    border: 1px solid var(--wc-line);
    background: var(--wc-surface);
}

.wc-serp__url {
    margin: 0;
    color: var(--wc-faint);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.wc-serp__title {
    margin: 6px 0 0;
    color: var(--wc-text);
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.wc-serp__desc {
    margin: 8px 0 0;
    color: var(--wc-muted);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.wc-serp .is-missing {
    color: var(--wc-negative);
    font-weight: 600;
}

.wc-meters {
    display: grid;
    gap: 22px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--wc-line);
}

.wc-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.wc-meter__head span {
    color: var(--wc-faint);
}

.wc-meter__head strong {
    color: var(--wc-text);
    font-variant-numeric: tabular-nums;
}

.wc-meter__track {
    position: relative;
    height: 22px;
    margin-top: 8px;
}

.wc-meter__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--wc-line-strong);
}

.wc-meter__band {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: var(--from);
    width: var(--span);
    border-left: 1px solid rgba(var(--wc-accent-rgb), .6);
    border-right: 1px solid rgba(var(--wc-accent-rgb), .6);
    background: rgba(var(--wc-accent-rgb), .2);
}

.wc-meter__marker {
    /* full-width carrier: translateX(%) then equals % of the track */
    position: absolute;
    inset: 0;
    color: var(--wc-text);
    transform: translateX(var(--at));
    pointer-events: none;
}

.wc-meter.is-off .wc-meter__marker {
    color: var(--wc-accent);
}

.wc-meter__marker::before,
.wc-meter__marker::after {
    content: "";
    position: absolute;
    left: -1px;
    background: currentColor;
}

.wc-meter__marker::before {
    top: 0;
    bottom: 0;
    width: 2px;
}

.wc-meter__marker::after {
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
}

html.wc-live .wc-meter__marker {
    transform: translateX(0);
    transition: transform 1.3s var(--wc-ease) .2s;
}

html.wc-live .is-in .wc-meter__marker {
    transform: translateX(var(--at));
}

.wc-meter__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: var(--wc-faint);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.wc-h1row {
    margin-top: 16px;
    padding: 18px clamp(20px, 2.4vw, 32px);
    border: 1px solid var(--wc-line);
}

.wc-h1row span {
    display: block;
    color: var(--wc-faint);
    font-size: 13px;
}

.wc-h1row strong {
    display: block;
    margin-top: 4px;
    color: var(--wc-text);
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wc-context-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 16px;
    padding: 18px clamp(20px, 2.4vw, 32px);
    background: var(--wc-surface);
    font-size: 15px;
}

.wc-context-note h3 {
    margin: 0 0 6px;
    color: var(--wc-text);
    font-size: 15px;
    font-weight: 700;
}

.wc-context-note p,
.wc-context-note ul {
    margin: 0;
    padding: 0;
    color: var(--wc-muted);
    list-style: none;
}

/* top findings */
.wc-top {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-top > li + li {
    margin-top: 16px;
}

.wc-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--wc-line);
    background: var(--wc-surface);
    transition: border-color .35s var(--wc-ease);
}

.wc-card:hover,
.wc-card:focus-within,
.wc-card.is-hot {
    border-color: rgba(var(--wc-accent-rgb), .55);
}

.wc-card__num {
    margin-bottom: 14px;
    color: transparent;
    font-size: 76px;
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.06em;
    -webkit-text-stroke: 1px var(--wc-accent);
    font-variant-numeric: tabular-nums;
}

.wc-card__title {
    margin: 0;
    color: var(--wc-text);
    font-size: clamp(21px, 1.8vw, 26px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
}

.wc-card .wc-tags {
    margin-top: 12px;
}

.wc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 36px;
    margin: 22px 0 0;
}

.wc-grid > div {
    min-width: 0;
}

.wc-grid dt {
    color: var(--wc-faint);
    font-size: 13px;
    font-weight: 600;
}

.wc-grid dd {
    margin: 4px 0 0;
    color: var(--wc-text);
    font-size: 16px;
    line-height: 1.6;
}

.wc-grid .is-recommendation {
    position: relative;
    grid-column: 1 / -1;
    padding: 16px 0 0 20px;
}

.wc-grid .is-recommendation::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--wc-accent);
    transform-origin: top;
}

html.wc-live .wc-grid .is-recommendation::before {
    transform: scaleY(0);
    transition: transform .9s var(--wc-ease) .35s;
}

html.wc-live .is-in .wc-grid .is-recommendation::before,
html.wc-live .wc-row[open] .wc-grid .is-recommendation::before {
    transform: none;
}

.wc-grid .is-recommendation dd {
    font-size: 17px;
    font-weight: 600;
}

.wc-evidence {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-evidence li {
    overflow-wrap: anywhere;
}

.wc-evidence li + li {
    margin-top: 4px;
}

.wc-evidence span {
    color: var(--wc-faint);
}

.wc-source {
    display: block;
    margin-top: 6px;
    color: var(--wc-faint);
    font-size: 13px;
}

/* all findings: filters + list */
.wc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.wc-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--wc-control);
    background: transparent;
    color: var(--wc-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .3s var(--wc-ease), color .3s var(--wc-ease), background-color .3s var(--wc-ease);
}

.wc-filter b {
    color: var(--wc-faint);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wc-filter:hover {
    border-color: rgba(var(--ogency-white-rgb, 255, 255, 255), .5);
    color: var(--wc-text);
}

.wc-filter[aria-pressed="true"] {
    border-color: var(--wc-text);
    background: var(--wc-text);
    color: var(--wc-ground);
}

.wc-filter[aria-pressed="true"] b {
    color: var(--wc-ground);
}

.wc-cat + .wc-cat {
    margin-top: 28px;
}

.wc-cat__title {
    margin: 0 0 10px;
    color: var(--wc-faint);
    font-size: 14px;
    font-weight: 700;
}

.wc-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wc-line);
}

.wc-rows > li {
    border-bottom: 1px solid var(--wc-line);
}

.wc-row summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 18px;
    gap: 6px 16px;
    align-items: center;
    min-height: 62px;
    padding: 12px 4px;
    cursor: pointer;
    list-style: none;
    transition: background-color .3s var(--wc-ease);
}

.wc-row summary::-webkit-details-marker {
    display: none;
}

.wc-row summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--wc-muted);
    border-bottom: 1.5px solid var(--wc-muted);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .35s var(--wc-ease);
    justify-self: end;
}

.wc-row[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.wc-row summary:hover,
.wc-row.is-hot summary {
    background: rgba(var(--ogency-white-rgb, 255, 255, 255), .03);
}

.wc-row summary:focus-visible {
    outline-offset: -2px;
}

.wc-row__title {
    color: var(--wc-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.wc-row__meta {
    color: var(--wc-faint);
    font-size: 14px;
    white-space: nowrap;
}

.wc-row__body {
    padding: 0 4px 26px 42px;
}

.wc-row[open] .wc-row__body {
    animation: wc-view-in .45s var(--wc-ease) both;
}

.wc-row.is-flash summary {
    animation: wc-flash 1.6s var(--wc-ease);
}

@keyframes wc-flash {
    0%, 30% { background: rgba(var(--wc-accent-rgb), .18); }
    100% { background: transparent; }
}

/* status icons */
.wc-status-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.wc-status-icon--improve { stroke: var(--wc-accent); }
.wc-status-icon--improve circle { fill: rgba(var(--wc-accent-rgb), .14); }
.wc-status-icon--ok { stroke: var(--wc-text); }
.wc-status-icon--unchecked { stroke: var(--wc-faint); }
.wc-status-icon--unchecked circle { stroke-dasharray: 3 3; }

html.wc-live .wc-status-icon--ok path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .7s var(--wc-ease) .2s;
}

html.wc-live .is-in .wc-status-icon--ok path {
    stroke-dashoffset: 0;
}

.wc-limits {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-limits li {
    position: relative;
    padding: 14px 0 14px 28px;
    border-top: 1px solid var(--wc-line);
    color: var(--wc-muted);
    font-size: 15px;
}

.wc-limits li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 26px;
    width: 10px;
    height: 1px;
    background: var(--wc-accent);
}

.wc-empty {
    margin: 0;
    padding: 18px 22px;
    border: 1px dashed var(--wc-control);
    color: var(--wc-muted);
}

/* contact */
.wc-contact {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: clamp(72px, 8vw, 112px);
    padding: clamp(26px, 3.6vw, 48px);
    border: 1px solid var(--wc-line);
    background: var(--wc-surface);
}

.wc-contact .wc-h2 {
    font-size: clamp(30px, 3vw, 44px);
}

.wc-contact__text {
    max-width: 52ch;
    margin: 16px 0 0;
    color: var(--wc-muted);
    font-size: 17px;
}

.wc-contact__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wc-contact__form .wc-actions {
    margin-top: 4px;
}

.wc-contact__form .wc-hint {
    margin: 0;
}

.wc-contact__done {
    padding: 4px 0 0;
}

.wc-contact__done:focus {
    outline: none;
}

.wc-contact__done p {
    margin: 10px 0 0;
    color: var(--wc-muted);
}

.wc-done-mark {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    fill: none;
    stroke: var(--wc-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
}

html.wc-live .wc-done-mark * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: wc-draw 1s var(--wc-ease) forwards;
}

html.wc-live .wc-done-mark path {
    animation-delay: .45s;
}

@keyframes wc-draw {
    to { stroke-dashoffset: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
    .wc-report__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-report__aside {
        position: static;
        max-width: 680px;
    }

    .wc-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .wc-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-stage-slot {
        max-width: 640px;
    }
}

@media (max-width: 767px) {
    .wc-console {
        padding: 22px 18px;
    }

    .wc-url__row {
        flex-wrap: wrap;
    }

    .wc-url__scheme {
        padding-left: 14px;
        font-size: 17px;
    }

    .wc-input--url {
        flex: 1;
        min-height: 58px;
        font-size: 17px;
    }

    .wc-url__submit {
        width: 100%;
        min-height: 54px !important;
    }

    .wc-context__fields,
    .wc-contact__form,
    .wc-grid,
    .wc-context-note,
    .wc-scope__notes,
    .wc-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-card__num {
        margin-bottom: 12px;
        font-size: 60px;
    }

    .wc-balance__value {
        font-size: 40px;
    }

    .wc-row summary {
        grid-template-columns: 24px minmax(0, 1fr) 16px;
    }

    .wc-row__meta {
        grid-column: 2;
        white-space: normal;
    }

    .wc-row summary::after {
        grid-column: 3;
        grid-row: 1;
    }

    .wc-row__body {
        padding-left: 4px;
    }

    .wc-actions .ogency-btn {
        width: 100%;
    }

    .wc-pin {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}

/* The page margin on phones is 20px (Bootstrap's container uses 15px). */
@media (max-width: 575px) {
    .wc .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wc-balance__counts {
        gap: 10px;
    }

    .wc-balance__label {
        font-size: 13px;
    }

    .wc-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-stage.is-result .wc-pin {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .wc-stage.is-result .wc-pin svg {
        width: 10px;
        height: 10px;
    }
}

/* ---------- reduced motion: static, fully visible ---------- */

@media (prefers-reduced-motion: reduce) {
    html.wc-live .wc-load,
    html.wc-live .wc-load--rise,
    html.wc-live [data-wc-reveal],
    html.wc-live [data-wc-item],
    html.wc-live [data-wc-reveal] .wc-rise {
        opacity: 1;
        clip-path: none;
        transform: none;
        transition: none;
    }

    html.wc-live .wc-draw,
    html.wc-live .wc-icon *,
    html.wc-live .wc-status-icon--ok path,
    html.wc-live .wc-done-mark * {
        stroke-dashoffset: 0;
        transition: none;
        animation: none;
    }

    html.wc-live .wc-svg .wc-s-fill,
    html.wc-live .wc-svg .wc-s-bar,
    html.wc-live .wc-svg .wc-s-cta,
    html.wc-live .wc-svg .wc-s-ring,
    html.wc-live .wc-svg .wc-s-dot,
    html.wc-live .wc-svg .wc-s-stars,
    html.wc-live .wc-svg .wc-s-url,
    html.wc-live .wc-svg .wc-s-cta__label,
    html.wc-live .wc-svg .wc-s-lock {
        opacity: 1;
        transition: none;
    }

    html.wc-live .wc-balance__bar rect,
    html.wc-live .wc-grid .is-recommendation::before {
        transform: none;
        transition: none;
    }

    html.wc-live .wc-meter__marker {
        transform: translateX(var(--at));
        transition: none;
    }

    .wc-view.is-entering,
    .wc-phase.is-current::before,
    .wc-phase__detail,
    .wc-stage .wc-s-wire__pulse,
    .wc-stage .wc-s-spin,
    .wc-stage .wc-s-scan,
    .wc-stage .wc-s-loadbar,
    .wc-stage.is-busy .wc-ticker__dot,
    html.wc-live .wc-pin,
    .wc-pin--improve::after,
    .wc-row[open] .wc-row__body,
    .wc-row.is-flash summary {
        animation: none !important;
    }

    /* busy states stay visible without movement */
    .wc-stage[data-state="analyzing"] .wc-s-browser .wc-s-scan {
        transform: translateY(140px);
    }

    .wc-pin,
    .wc-arrow,
    .wc-corner,
    .wc-goal span,
    .wc-goal span::before,
    .wc-point::before {
        transition: none;
    }
}