/* ==========================================================
   ws-a11y-landing.css
   A11y Plugin landing page. Template-scoped.
   Owns own prefix. Only main.css brand tokens shared.
   ========================================================== */

/* === Tokens. Landing only. === */
:root {
    --wsa11y-section: #F5F6F2;
    --wsa11y-band-bg: #1C1C1E;
    --wsa11y-band-fg: #FFFFFF;
    --wsa11y-band-muted: #C9CDCE;
    --wsa11y-band-line: #34343A;
    --wsa11y-band-card: #26262A;
    --wsa11y-lime-wash: #F4F9DC;
    --wsa11y-slate-wash: #EDF2F6;
    --wsa11y-faint: #9AA0A3;
    --wsa11y-gutter: clamp(20px, 5vw, 56px);
    /* Disclosure curve. Leaves fast, arrives slow. Same one drives the row
       height and the chevron so they read as a single movement. */
    --wsa11y-swing: cubic-bezier(0.32, 0.72, 0, 1);
    --wsa11y-max: 1180px;
    /* Cards are the one radius exception on this template: 18px, not the 3px
       default. Soft fill and no border, so the corner does the whole job of
       separating the card from the page. At 3px the fill reads as a raw block. */
    --wsa11y-card-radius: 18px;
    --wsa11y-card-bg: #F5F5F7;
    --wsa11y-tile-bg: #FFFFFF;
}

/* Band colors fixed in dark. Page rhythm survives theme flip. */
[data-theme="dark"] {
    --wsa11y-section: #202024;
    --wsa11y-band-bg: #26262A;
    --wsa11y-band-line: #3A3A40;
    --wsa11y-band-card: #2E2E33;
    --wsa11y-lime-wash: #2A2E1B;
    --wsa11y-slate-wash: #232C33;
    --wsa11y-faint: #6B7174;
    --wsa11y-card-bg: #232327;
    --wsa11y-tile-bg: #2E2E33;
}

/* === Page shell === */

/* main.css flexes .ws-page only. Landing needs same or footer floats up. */
.wsa11y-page { flex: 1 0 auto; }

/* Sticky header, this template only. Site header stays static elsewhere. */
.page-template-template-a11y-landing .ws-site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 14px 0;
    background: var(--ws-bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-template-template-a11y-landing .ws-site-header.is-stuck {
    border-bottom-color: var(--ws-border);
    box-shadow: 0 2px 14px rgba(28, 28, 30, 0.05);
}

/* Anchor targets clear the sticky header. scroll-margin on the target,
   not scroll-padding on html, so nothing global has to know about it. */
.page-template-template-a11y-landing .wsa11y-section[id],
.page-template-template-a11y-landing [id="top"] { scroll-margin-top: 96px; }

/* === Link reset ===
   main.css hangs a lime underline on every link at (0,2,2). Component
   links opt out here at (0,3,1). Prose links keep site treatment.

   :not([class*="button"]) is load-bearing. Without it this rule outranks
   .wsa11y-button at (0,1,0) and background:none strips the fill off every
   button inside a section, which is why the slate button read as white
   text on white. Buttons are excluded here for the same reason main.css
   excludes them from its global link rule. */
.wsa11y-page .wsa11y-section a[class*="wsa11y-"]:not([class*="button"]) {
    background: none;
    text-decoration: none;
}

/* Buttons still need the underline gone, but keep their own fill. */
.wsa11y-page .wsa11y-section a[class*="wsa11y-button"] { text-decoration: none; }

/* Band links. main.css sets color on a:not([class*=button]):not(...):not(...)
   at (0,3,1), which beats .wsa11y-callout__link at (0,1,0), so classed links
   in the band inherited --ws-text and went dark on the dark card in light
   mode. This lands at (0,4,1) and wins in both themes. */
.wsa11y-page .wsa11y-section--band a[class*="wsa11y-"]:not([class*="button"]) {
    color: var(--wsa11y-band-fg);
}

/* === Type ===
   Retuned from the Archivo comp. Lato 900 runs wider and heavier, so
   tracking pulls toward zero and ceilings drop about 12%. */
.wsa11y-h1 {
    font-size: clamp(2.2rem, 4vw + 0.7rem, 4rem);
    font-weight: 900; line-height: 1.05; letter-spacing: -0.014em;
    margin: 0; color: var(--ws-heading); text-wrap: balance;
}
.wsa11y-h2 {
    font-size: clamp(1.7rem, 2.4vw + 0.5rem, 2.55rem);
    font-weight: 900; line-height: 1.1; letter-spacing: -0.01em;
    margin: 0; color: var(--ws-heading); text-wrap: balance;
}
.wsa11y-h3 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.55rem);
    font-weight: 700; line-height: 1.2; letter-spacing: -0.008em;
    margin: 0; color: var(--ws-heading);
}
.wsa11y-h4 {
    font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.2rem);
    font-weight: 700; line-height: 1.25; margin: 0; color: var(--ws-heading);
}
.wsa11y-lead {
    font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.2rem);
    line-height: 1.55; color: var(--ws-muted); margin: 0;
}
.wsa11y-body { margin: 0; color: var(--ws-muted); line-height: 1.6; }
.wsa11y-meta { font-size: 0.8rem; color: var(--wsa11y-faint); margin: 0; }

.wsa11y-eyebrow {
    display: inline-block; margin: 0 0 14px;
    font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ws-muted);
}
.wsa11y-eyebrow::after {
    content: ""; display: block; height: 2px; margin-top: 8px;
    background: var(--ws-accent);
}

.wsa11y-sr {
    position: absolute !important; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* === Layout === */
.wsa11y-section { padding: clamp(60px, 8vw, 104px) var(--wsa11y-gutter); }
.wsa11y-section--tight { padding-top: clamp(44px, 5vw, 68px); }
.wsa11y-section--alt { background: var(--wsa11y-section); border-top: 1px solid var(--ws-border); }
.wsa11y-section--plain { background: var(--ws-bg); border-top: 1px solid var(--ws-border); }
.wsa11y-section--band { background: var(--wsa11y-band-bg); color: var(--wsa11y-band-fg); }
.wsa11y-wrap { max-width: var(--wsa11y-max); margin: 0 auto; }
.wsa11y-narrow { max-width: 760px; }

.wsa11y-section--band .wsa11y-h2,
.wsa11y-section--band .wsa11y-h3,
.wsa11y-section--band .wsa11y-h4 { color: var(--wsa11y-band-fg); }
.wsa11y-section--band .wsa11y-eyebrow { color: var(--wsa11y-band-muted); }
.wsa11y-section--band .wsa11y-body,
.wsa11y-section--band .wsa11y-lead { color: var(--wsa11y-band-muted); }

/* === Buttons ===
   Matched to main.css .ws-button exactly: same padding, tracking, radius
   and hover. Class carries "button" on purpose. main.css excludes
   [class*="button"] from the global link rule, so no specificity fight.
   Do not rename. */
.wsa11y-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ws-font); font-size: 12px; font-weight: 700;
    letter-spacing: 3px; line-height: 18px; text-transform: uppercase;
    text-decoration: none; text-align: center; cursor: pointer;
    padding: 10px 18px; border-radius: var(--ws-radius);
    border: 1px solid var(--ws-accent); background: var(--ws-accent);
    color: var(--ws-black);
    transition: background-color 0.3s var(--ws-ease), border-color 0.3s var(--ws-ease),
                color 0.3s var(--ws-ease);
}
.wsa11y-button:hover,
.wsa11y-button:focus { background: var(--ws-white); border-color: var(--ws-accent); color: var(--ws-black); outline: none; }

/* Dark. Hero primary. Charcoal carries more weight than lime next to an
   outline, and it keeps lime free for the header CTA so the two reads
   differ. Hover goes to lime so the brand colour is still the payoff. */
.wsa11y-button--dark {
    background: var(--ws-charcoal); border-color: var(--ws-charcoal); color: var(--ws-white);
}
.wsa11y-button--dark:hover,
.wsa11y-button--dark:focus {
    background: var(--ws-accent); border-color: var(--ws-accent); color: var(--ws-black);
}

/* Outline. Site secondary: white fill, lime border, hover fills lime. */
.wsa11y-button--outline { background: var(--ws-white); color: var(--ws-black); }
.wsa11y-button--outline:hover,
.wsa11y-button--outline:focus { background: var(--ws-accent); color: var(--ws-black); }

/* Slate. Mirrors main.css .ws-button--secondary. */
.wsa11y-button--slate {
    background: var(--ws-slate); border-color: var(--ws-slate); color: var(--ws-white);
}
.wsa11y-button--slate:hover,
.wsa11y-button--slate:focus { background: transparent; border-color: var(--ws-slate); color: var(--ws-text); }

/* Small variant. Base now matches this size. Kept as a no-op alias so
   existing markup keeps working, same as main.css .ws-button--sm. */
.wsa11y-button--sm { padding: 10px 18px; font-size: 12px; letter-spacing: 3px; }

.wsa11y-button-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* === Hero ===
   Copy left, brand mark right. Mark is one figure, oversized, cropped by
   the section on three sides. Grid not absolute, so the copy column can
   never end up underneath the artwork. */
.wsa11y-hero { padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.wsa11y-hero__inner {
    max-width: var(--wsa11y-max); margin: 0 auto; padding-left: var(--wsa11y-gutter);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(24px, 4vw, 40px); align-items: center;
}
.wsa11y-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.wsa11y-hero__h1 { max-width: 19ch; }
/* Eyebrow rides tight to the headline, not on the column's 24px gap. */
.wsa11y-hero__eyebrow { margin-bottom: -14px; }
/* Lead and callout hold the button row's width, not the column's. At 56ch
   the last words ran under the mark and lost contrast against it. */
.wsa11y-hero__lead { max-width: 44ch; }

/* Payoff clause drops to its own line so the marker strokes read as a
   deliberate mark, not a stray highlight mid-sentence. */
.wsa11y-hero__turn { display: block; margin-top: 0.14em; }

.wsa11y-hero__claim {
    margin: 0; padding-left: 16px; border-left: 3px solid var(--ws-accent);
    font-weight: 700; color: var(--ws-text); line-height: 1.45; max-width: 44ch;
}
.wsa11y-hero__aside {
    font-size: 0.85rem; color: var(--ws-muted);
    border-bottom: 1px solid var(--ws-border); padding-bottom: 2px;
}
.wsa11y-hero__aside:hover,
.wsa11y-hero__aside:focus { color: var(--ws-text); border-bottom-color: var(--ws-accent); }

/* Mark column. Sized off height, not width: 134% of the row is what makes
   the figure break the top and bottom edges instead of just sitting there.
   Anchored at 54% so the bleed is heavier below, matching the comp. */
.wsa11y-hero__mark {
    position: relative; align-self: stretch; min-height: 380px; pointer-events: none;
}
.wsa11y-hero__mark svg {
    position: absolute; top: 54%; right: -3%; transform: translateY(-50%);
    height: 134%; width: auto; display: block;
}

/* === Demo carousel ===
   Frames are drawn pages, one per toolbar mode, each carrying the real
   trigger in its corner. Drawn not screenshotted: stays sharp, follows
   theme, never goes stale when plugin UI moves. */
.wsa11y-demo__grid {
    display: grid; grid-template-columns: 1fr 1.08fr;
    gap: clamp(32px, 5vw, 60px); align-items: center;
}
.wsa11y-demo__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.wsa11y-try {
    width: 100%; padding: 22px 24px;
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    border-left: 4px solid var(--ws-accent); border-radius: var(--ws-radius);
    display: flex; flex-direction: column; gap: 14px;
}
.wsa11y-try__label {
    font-size: 0.74rem; font-weight: 900; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ws-muted);
}
.wsa11y-try__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wsa11y-try__list li {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px;
    align-items: baseline; line-height: 1.5;
}
.wsa11y-try__n {
    font-size: 0.74rem; font-weight: 900; color: var(--ws-muted);
    font-variant-numeric: tabular-nums;
}
.wsa11y-demo__after { font-weight: 700; color: var(--ws-text); margin: 0; }

.wsa11y-rot { display: flex; flex-direction: column; gap: 16px; }
.wsa11y-rot__stage {
    position: relative; aspect-ratio: 3 / 2; overflow: hidden;
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    border-radius: var(--wsa11y-card-radius); box-shadow: 0 18px 40px rgba(28, 28, 30, 0.09);
}
.wsa11y-rot__frame {
    position: absolute; inset: 0; opacity: 0; transform: translateX(24px);
    transition: opacity 0.5s var(--ws-ease), transform 0.5s var(--ws-ease);
    pointer-events: none;
}
.wsa11y-rot__frame.is-on { opacity: 1; transform: none; }
.wsa11y-rot__frame.is-out { opacity: 0; transform: translateX(-24px); }
.wsa11y-rot__frame svg { width: 100%; height: 100%; display: block; }

/* Control rail sits under the card, never over it. Nothing floats on top
   of the thing being demonstrated. Mode name left, transport right. */
.wsa11y-rot__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wsa11y-rot__now {
    font-size: 0.82rem; font-weight: 900; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ws-text); margin-right: auto;
}
.wsa11y-rot__transport { display: flex; align-items: center; gap: 14px; }
.wsa11y-rot__dots { display: flex; align-items: center; gap: 7px; }
.wsa11y-rot__dot {
    width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--ws-radius-pill); background: var(--ws-grey); opacity: 0.55;
    transition: width 0.3s var(--ws-ease), background-color 0.3s var(--ws-ease), opacity 0.3s var(--ws-ease);
}
.wsa11y-rot__dot:hover { opacity: 1; }
.wsa11y-rot__dot[aria-selected="true"] { width: 26px; background: var(--ws-accent); opacity: 1; }
.wsa11y-rot__dot:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
.wsa11y-rot__arrow {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer; border-radius: var(--ws-radius-pill);
    border: 1px solid var(--ws-border); background: var(--ws-surface); color: var(--ws-text);
    transition: border-color 0.25s var(--ws-ease), background-color 0.25s var(--ws-ease), color 0.25s var(--ws-ease);
}
.wsa11y-rot__arrow:hover { border-color: var(--ws-accent); background: var(--ws-accent); color: var(--ws-black); }
.wsa11y-rot__arrow:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }
.wsa11y-rot__arrow svg { width: 16px; height: 16px; display: block; }

/* === Cards === */
.wsa11y-cards {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.2vw, 26px); margin-top: 34px;
}
.wsa11y-cards--tight { margin-top: 44px; align-items: start; }
.wsa11y-card {
    background: var(--wsa11y-card-bg); border: 0;
    border-radius: var(--wsa11y-card-radius);
    padding: clamp(26px, 3vw, 40px);
    display: flex; flex-direction: column; gap: 14px;
}
.wsa11y-card__h { margin-bottom: 6px; }

/* Icon tile. Sits on the card like an app icon on a shelf. The shadow is
   the only thing separating a white tile from a near-white card, so it
   stays even though nothing else on the page carries one. */
.wsa11y-card__tile {
    width: 58px; height: 58px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px; border-radius: 14px;
    background: var(--wsa11y-tile-bg); color: var(--ws-heading);
    box-shadow: 0 1px 3px rgba(28, 28, 30, 0.12);
}
.wsa11y-card__tile svg { width: 27px; height: 27px; display: block; }
.wsa11y-card__tile--lime { background: var(--ws-accent); color: var(--ws-black); box-shadow: none; }
/* Small tile rides beside a heading. Stacked above one it reads as a button,
   which is exactly what a lime rounded square above a CTA looked like. */
.wsa11y-card__tile--sm { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 0; }
.wsa11y-card__tile--sm svg { width: 20px; height: 20px; }
.wsa11y-card__tile--slate { background: var(--ws-slate); color: var(--ws-white); box-shadow: none; }

/* Card list. Bold lead-in on its own line, detail under it. */
.wsa11y-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.wsa11y-card__list li { font-size: 0.94rem; line-height: 1.55; color: var(--ws-muted); }
.wsa11y-card__list b { display: block; font-weight: 700; color: var(--ws-heading); }

.wsa11y-card__tag {
    font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ws-muted);
}
.wsa11y-card__jump {
    margin-top: auto; padding-top: 8px;
    font-size: 0.85rem; font-weight: 700; color: var(--ws-slate);
}
.wsa11y-card__jump:hover,
.wsa11y-card__jump:focus { text-decoration: underline; }

/* Card on the dark band. Fill lifts instead of darkening, same as the
   light side: the card is always a step away from its background. */
.wsa11y-section--band .wsa11y-card { background: var(--wsa11y-band-card); }
.wsa11y-section--band .wsa11y-card__h { color: var(--wsa11y-band-fg); }
.wsa11y-section--band .wsa11y-card__list li { color: var(--wsa11y-band-muted); }
.wsa11y-section--band .wsa11y-card__list b { color: var(--wsa11y-band-fg); }
.wsa11y-section--band .wsa11y-card__tile { background: #35353B; color: var(--wsa11y-band-fg); box-shadow: none; }
.wsa11y-section--band .wsa11y-card__tile--lime { background: var(--ws-accent); color: var(--ws-black); }
.wsa11y-section--band .wsa11y-card__tile--slate { background: var(--ws-slate); color: var(--ws-white); }

/* Prose paragraph inside a card or the closing block. */
.wsa11y-beat__p { max-width: 64ch; margin-top: 16px; font-size: 1.04rem; line-height: 1.7; }

/* Closing beat. Narrower than the mission, one CTA, nothing else. */
.wsa11y-close { max-width: 760px; }

/* === Callout. Closes the limits section and hands off to the FAQ. ===
   Was a bare bold line with nothing to do. The statement is the reason to
   go read the overlay answer, so it now carries the route there. */
.wsa11y-callout {
    position: relative; margin-top: 40px; padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 38px);
    background: var(--wsa11y-band-card); border-radius: var(--wsa11y-card-radius);
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    overflow: hidden;
}
.wsa11y-callout__mark {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ws-accent);
}
.wsa11y-callout__t {
    margin: 0; max-width: 46ch;
    font-size: clamp(1.15rem, 0.8vw + 1rem, 1.5rem); font-weight: 700;
    line-height: 1.35; letter-spacing: -0.01em; color: var(--wsa11y-band-fg);
}
.wsa11y-callout__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 700; color: var(--wsa11y-band-fg);
    padding-bottom: 3px; border-bottom: 2px solid var(--ws-accent);
    transition: gap 0.2s var(--ws-ease);
}
.wsa11y-callout__link svg { width: 14px; height: 14px; }
.wsa11y-callout__link:hover,
.wsa11y-callout__link:focus { gap: 13px; }

/* === Spec strip. Old Under the hood figures, flattened to one row. ===
   Three columns, six items, two even rows: what it costs you on top, what
   it needs underneath. Mono moved off the prose and onto the figures only.
   Full sentences set in a monospace face at 0.76rem are slow to read, and
   that is most of why this strip felt like fine print nobody finishes. */
.wsa11y-spec {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px clamp(24px, 3vw, 44px);
    margin-top: clamp(28px, 3.5vw, 44px); padding-top: 24px;
    border-top: 1px solid var(--ws-border);
    font-size: 0.86rem; line-height: 1.5; color: var(--ws-muted);
}
.wsa11y-spec b {
    font-family: var(--ws-code); font-weight: 400; font-size: 0.92em;
    color: var(--ws-heading);
}
.wsa11y-section--band .wsa11y-spec { border-top-color: var(--wsa11y-band-line); color: var(--wsa11y-band-muted); }
.wsa11y-section--band .wsa11y-spec b { color: var(--wsa11y-band-fg); }

/* Notes grid predates the band. Repoint its three colors when it lands there.
   Rule moved to the container, so the override follows it. */
.wsa11y-section--band .wsa11y-notes { border-top-color: var(--wsa11y-band-line); }
.wsa11y-section--band .wsa11y-note__k { color: var(--wsa11y-band-fg); }
.wsa11y-section--band .wsa11y-note__v { color: var(--wsa11y-band-muted); }
.wsa11y-section--band .wsa11y-note__v code { background: #35353B; color: var(--wsa11y-band-fg); }

/* === Dashboard block. Copy left, screen right. === */
.wsa11y-dash {
    margin-top: clamp(56px, 7vw, 90px);
    display: grid; grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(32px, 5vw, 64px); align-items: center;
}
.wsa11y-dash__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.wsa11y-admin {
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius); overflow: hidden;
    box-shadow: 0 20px 46px rgba(28, 28, 30, 0.08);
}
.wsa11y-admin__bar {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    background: var(--wsa11y-section); border-bottom: 1px solid var(--ws-border);
    font-family: var(--ws-code); font-size: 0.78rem; color: var(--ws-muted);
}
.wsa11y-admin__dots { display: flex; gap: 6px; }
.wsa11y-admin__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ws-border); }
.wsa11y-admin__body { padding: clamp(20px, 2.4vw, 30px); }
.wsa11y-admin__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.wsa11y-admin__spacer { margin-left: auto; }

.wsa11y-admin__strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin-top: 18px; padding: 12px 16px;
    background: var(--wsa11y-section); border-radius: var(--ws-radius);
    font-size: 0.85rem; font-weight: 700; color: var(--ws-text);
}
.wsa11y-admin__strip span { display: inline-flex; align-items: center; gap: 8px; }
.wsa11y-admin__strip i { display: block; width: 12px; height: 12px; border-radius: 2px; }
.wsa11y-dot--lime { background: var(--ws-accent); }
.wsa11y-dot--slate { background: var(--ws-slate); }
.wsa11y-admin__wcag { margin-left: auto; font-weight: 400; color: var(--wsa11y-faint); }

.wsa11y-lanes { margin-top: 18px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius); overflow: hidden; }
.wsa11y-lane + .wsa11y-lane { border-top: 1px solid var(--ws-border); }
.wsa11y-lane__btn {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; background: none; border: 0; cursor: pointer;
    text-align: left; font-family: var(--ws-font); font-size: 0.82rem;
    font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ws-text);
}
.wsa11y-lane__btn[aria-expanded="true"] { background: var(--wsa11y-lime-wash); }
.wsa11y-lane__caret { flex: 0 0 auto; color: var(--ws-muted); transition: transform 0.25s var(--ws-ease); }
.wsa11y-lane__btn[aria-expanded="true"] .wsa11y-lane__caret { transform: rotate(90deg); }
.wsa11y-lane__count {
    padding: 2px 10px; border-radius: var(--ws-radius-pill);
    background: var(--ws-border); color: var(--ws-text);
    font-size: 0.78rem; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.wsa11y-lane__btn[aria-expanded="true"] .wsa11y-lane__count { background: var(--ws-accent); color: var(--ws-black); }
.wsa11y-lane__panel { padding: 18px; }
.wsa11y-lane__panel[hidden] { display: none; }

.wsa11y-finding { display: grid; grid-template-columns: 16px 1fr; gap: 12px; }
.wsa11y-finding__mark { display: block; width: 12px; height: 12px; margin-top: 6px; border-radius: 2px; background: var(--ws-slate); }
.wsa11y-finding__how {
    margin-top: 14px; padding: 14px 16px;
    background: var(--wsa11y-lime-wash); border-left: 3px solid var(--ws-accent);
}
.wsa11y-finding__how-label {
    display: block; margin-bottom: 6px;
    font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ws-text);
}
.wsa11y-finding__how p { color: var(--ws-text); }
.wsa11y-admin__caption { margin: 14px 2px 0; font-size: 0.82rem; color: var(--wsa11y-faint); }

/* === Steps. Numbered: this is an actual sequence. === */
.wsa11y-steps {
    display: grid; gap: 2px; margin-top: 34px;
    background: var(--ws-border); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius); overflow: hidden;
}
.wsa11y-step {
    background: var(--ws-surface); padding: clamp(24px, 2.6vw, 32px);
    display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start;
}
.wsa11y-step__n {
    font-size: 1.4rem; font-weight: 900; line-height: 1;
    color: var(--ws-accent); font-variant-numeric: tabular-nums;
}
.wsa11y-step__body { display: flex; flex-direction: column; gap: 10px; }
.wsa11y-lanes-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wsa11y-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--ws-radius-pill);
    background: var(--wsa11y-slate-wash); color: var(--ws-slate);
    font-size: 0.75rem; font-weight: 700;
}
.wsa11y-chip--lime { background: var(--wsa11y-lime-wash); color: #5C6B00; }
[data-theme="dark"] .wsa11y-chip--lime { color: var(--ws-lime); }
.wsa11y-chip--quiet { background: transparent; border: 1px solid var(--ws-border); color: var(--ws-muted); }

/* === Progress and report === */
.wsa11y-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.2vw, 26px); margin-top: 26px;
}
.wsa11y-panel {
    background: var(--wsa11y-card-bg); border: 0;
    border-radius: var(--wsa11y-card-radius); padding: clamp(26px, 3vw, 36px);
    display: flex; flex-direction: column; gap: 16px;
}

/* Bars, not a line. No axis and no labels on purpose: the drop is the
   only reading, and any number here becomes a score. */
.wsa11y-bars {
    display: flex; align-items: flex-end; gap: 7px;
    height: 120px; margin: 4px 0 6px;
}
.wsa11y-bars span {
    flex: 0 0 22px; display: block; background: var(--ws-border);
    transform: scaleY(0); transform-origin: bottom center;
    transition: transform 0.5s var(--ws-ease);
}
.wsa11y-bars span:nth-child(1)  { height: 100%; }
.wsa11y-bars span:nth-child(2)  { height: 93%; }
.wsa11y-bars span:nth-child(3)  { height: 87%; }
.wsa11y-bars span:nth-child(4)  { height: 76%; }
.wsa11y-bars span:nth-child(5)  { height: 72%; }
.wsa11y-bars span:nth-child(6)  { height: 60%; }
.wsa11y-bars span:nth-child(7)  { height: 52%; }
.wsa11y-bars span:nth-child(8)  { height: 46%; }
.wsa11y-bars span:nth-child(9)  { height: 41%; }
.wsa11y-bars span:nth-child(10) { height: 28%; background: var(--ws-accent); }
.is-drawn .wsa11y-bars span { transform: scaleY(1); }
.is-drawn .wsa11y-bars span:nth-child(1)  { transition-delay: 0.00s; }
.is-drawn .wsa11y-bars span:nth-child(2)  { transition-delay: 0.04s; }
.is-drawn .wsa11y-bars span:nth-child(3)  { transition-delay: 0.08s; }
.is-drawn .wsa11y-bars span:nth-child(4)  { transition-delay: 0.12s; }
.is-drawn .wsa11y-bars span:nth-child(5)  { transition-delay: 0.16s; }
.is-drawn .wsa11y-bars span:nth-child(6)  { transition-delay: 0.20s; }
.is-drawn .wsa11y-bars span:nth-child(7)  { transition-delay: 0.24s; }
.is-drawn .wsa11y-bars span:nth-child(8)  { transition-delay: 0.28s; }
.is-drawn .wsa11y-bars span:nth-child(9)  { transition-delay: 0.32s; }
.is-drawn .wsa11y-bars span:nth-child(10) { transition-delay: 0.36s; }

.wsa11y-report {
    padding: 22px 24px; background: var(--wsa11y-section);
    border: 1px solid var(--ws-border); border-radius: var(--ws-radius);
    display: flex; flex-direction: column; gap: 14px;
}
.wsa11y-report__file {
    font-family: var(--ws-code); font-size: 0.85rem;
    color: var(--ws-muted); word-break: break-all;
}
.wsa11y-report__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wsa11y-report__list li {
    display: grid; grid-template-columns: 12px 1fr; gap: 14px;
    align-items: baseline; color: var(--ws-text);
}
.wsa11y-report__list i { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--ws-accent); }

/* === Close. Band plus list. ===
   Back inside the check section, so it carries the anchor the hero and
   header point at and needs the same sticky-header clearance. */
.wsa11y-finish { scroll-margin-top: 96px; }

.wsa11y-midcta {
    margin-top: clamp(34px, 4vw, 52px); padding: clamp(24px, 3vw, 34px);
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    border-left: 4px solid var(--ws-accent); border-radius: var(--ws-radius);
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.wsa11y-midcta__text { flex: 1 1 320px; }
/* Button plus the zip line it used to carry in the Get it card. Right
   aligned so the button edge holds the band's right margin. */
.wsa11y-midcta__act {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: flex-end; gap: 10px; text-align: right;
}
/* Unset release. Button stays visible and inert rather than shipping a
   link to nowhere. */
.wsa11y-midcta__act a[href=""] {
    opacity: 0.45; pointer-events: none;
}

/* === Notes. ===
   Was a two-column grid of two-column rows: label in a fixed 100px well,
   value floating half a container away. Two nested axes, so the eye had to
   pick which one to follow and the labels read as stranded.
   Now four equal cells, label stacked directly over its value, one rule
   across the top of the row. One axis, left to right, and the four
   headings scan as a set before any of the bodies are read. */
.wsa11y-notes {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0 clamp(20px, 3vw, 40px);
    margin-top: clamp(28px, 3.5vw, 44px);
    border-top: 1px solid var(--ws-border);
}
.wsa11y-note { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 4px; }
.wsa11y-note__k {
    font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ws-heading);
}
.wsa11y-note__v { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ws-muted); }
.wsa11y-note__v code { font-family: var(--ws-code); font-size: 0.85em; background: var(--wsa11y-section); padding: 1px 5px; border-radius: var(--ws-radius-sm); }

/* === FAQ === */
/* Short ask line under the headline. Section carries no eyebrow. */
.wsa11y-faq__ask { margin-top: 14px; }

/* overflow-anchor off. Browser tries to hold scroll position while a row
   height animates, script already does it, two corrections read as jitter. */
.wsa11y-faq {
    margin-top: 34px; border-top: 1px solid var(--ws-border);
    overflow-anchor: none;
}
.wsa11y-faq__item { border-bottom: 1px solid var(--ws-border); }
.wsa11y-faq__h { margin: 0; font-size: inherit; }
.wsa11y-faq__btn {
    width: 100%; display: flex; align-items: flex-start; gap: 20px;
    padding: 20px 2px; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--ws-font); font-weight: 700;
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.12rem); line-height: 1.35;
    color: var(--ws-text);
}
.wsa11y-faq__btn:hover { color: var(--ws-slate); }
.wsa11y-faq__sign {
    margin-left: auto; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; color: var(--ws-muted);
    transition: transform 0.5s var(--wsa11y-swing), color 0.2s ease;
}
/* Chevron. Points right at rest, down when open. Rotation is the whole
   affordance, so it rides the same curve as the row. */
.wsa11y-faq__btn:hover .wsa11y-faq__sign { color: var(--ws-slate); }
.wsa11y-faq__btn[aria-expanded="true"] .wsa11y-faq__sign { transform: rotate(90deg); color: var(--ws-text); }

/* Panel. grid-template-rows 0fr to 1fr animates to the content's real
   height without measuring it in JS, so nothing breaks on reflow or resize.
   The inner element owns overflow; the row owns the motion.
   visibility is what keeps a closed panel out of the tab order and off the
   accessibility tree, delayed so it only applies once the row has closed. */
.wsa11y-faq__panel {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s var(--wsa11y-swing);
}
/* Padding sits on the child, not on the overflow element. min-height:0
   collapses the content but never the element's own padding, so with it
   here every closed row kept 22px of dead space and the collapse stopped
   short of zero. Inside the overflow it clips like everything else. */
.wsa11y-faq__inner {
    overflow: hidden; min-height: 0; padding: 0;
    opacity: 1;
    transition: opacity 0.4s var(--wsa11y-swing), transform 0.4s var(--wsa11y-swing);
}
.wsa11y-faq__inner > * { padding: 0 42px 22px 2px; }
/* No JS, no collapse. Every answer is simply on the page. */
.js .wsa11y-faq__panel { grid-template-rows: 0fr; }
/* Fade and lift run on the same curve as the row, no delay either way.
   The old staggered timings are what made open and close read as two
   separate events instead of one movement. */
.js .wsa11y-faq__inner {
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.22s var(--wsa11y-swing), transform 0.22s var(--wsa11y-swing), visibility 0s linear 0.5s;
}
/* Panel is a sibling of the h3 that wraps the button, so an adjacent
   selector off the button cannot reach it. The item carries the state. */
.js .wsa11y-faq__item.is-open .wsa11y-faq__panel { grid-template-rows: 1fr; }
.js .wsa11y-faq__item.is-open .wsa11y-faq__inner {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.42s var(--wsa11y-swing) 0.04s, transform 0.42s var(--wsa11y-swing) 0.04s, visibility 0s linear 0s;
}
/* Landing target from the callout link. Fades once, then gets out of the way. */
.wsa11y-faq__item.is-flagged { animation: wsa11yFlag 1.6s var(--ws-ease) 1; }
@keyframes wsa11yFlag {
    0%, 60% { background: var(--wsa11y-lime-wash); }
    100% { background: transparent; }
}
.wsa11y-faq__panel p { margin: 0; max-width: 72ch; line-height: 1.65; color: var(--ws-muted); }

/* === Notify list. Sits under the band, centred. ===
   Replaces the old Get it section. No card: the band above is already a
   box, and a second one turns the close into two competing objects. */
.wsa11y-notify {
    max-width: 460px; margin: clamp(40px, 5vw, 64px) auto 0;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.wsa11y-notify .wsa11y-body { max-width: 42ch; }
/* Fields stay left aligned inside the centred column. Centred labels and
   inputs read as a mistake. */
.wsa11y-notify .wsa11y-form { margin-top: 6px; text-align: left; }
.wsa11y-zip { display: block; font-family: var(--ws-code); font-size: 0.76rem; color: var(--wsa11y-faint); }
/* 81 Forms wrapper. Plugin owns its own styling; this only gives it the
   full card width and keeps its bottom margin from stacking with the card gap. */
.wsa11y-form { width: 100%; }
.wsa11y-form > *:last-child { margin-bottom: 0; }

/* === Reveal === */
[data-rise] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ws-ease), transform 0.5s var(--ws-ease); }
[data-rise].is-in { opacity: 1; transform: none; }

/* === Responsive === */
@media (max-width: 980px) {
    .wsa11y-demo__grid,
    .wsa11y-dash,
    .wsa11y-split { grid-template-columns: 1fr; }
    /* Band stacks. Right alignment on a full-width row reads as a stray. */
    .wsa11y-midcta__act { align-items: flex-start; text-align: left; }
    .wsa11y-notes,
    .wsa11y-spec { grid-template-columns: repeat(2, 1fr); }
    /* Hero lead can use the full column again once the mark is out of the way. */
    .wsa11y-hero__lead,
    .wsa11y-hero__claim { max-width: none; }
    /* Card slots between Try this and the closing line. display:contents
       dissolves the copy column so its children become grid items and can
       be ordered individually. Row gap replaces the column's flex gap. */
    .wsa11y-demo__grid { row-gap: 20px; }
    .wsa11y-demo__copy { display: contents; }
    .wsa11y-demo__copy .wsa11y-eyebrow { order: 1; }
    .wsa11y-demo__copy .wsa11y-h2 { order: 2; }
    .wsa11y-demo__copy .wsa11y-lead { order: 3; }
    .wsa11y-demo__copy .wsa11y-try { order: 4; }
    .wsa11y-rot { order: 5; margin-top: 4px; }
    .wsa11y-demo__copy .wsa11y-demo__after { order: 6; }

    /* Hero stacks. Mark leads, cropped harder so it stays a fragment. */
    .wsa11y-hero__inner { grid-template-columns: 1fr; padding-right: var(--wsa11y-gutter); }
    .wsa11y-hero__mark { order: -1; min-height: 200px; margin: 0 calc(var(--wsa11y-gutter) * -1) 8px 0; }
    .wsa11y-hero__mark svg { height: 150%; right: -14%; }
}
@media (max-width: 720px) {
    .wsa11y-cards { grid-template-columns: 1fr; }
    .wsa11y-notes { grid-template-columns: 1fr; }
    .wsa11y-spec { grid-template-columns: 1fr; }
    .wsa11y-callout { gap: 14px; }

    /* Hero on phones. Mark drops below the copy: at 375px the 200px block
       above the headline pushed the h1 past the fold, so the first screen
       was a logo, a lime button and a wheel. Order is removed rather than
       set, so the mark falls back to DOM order, which is after the copy. */
    .wsa11y-hero { padding-top: clamp(28px, 6vw, 48px); }
    .wsa11y-hero__inner { gap: 8px; }
    .wsa11y-hero__mark { order: 0; min-height: 180px; margin: 18px calc(var(--wsa11y-gutter) * -1) 0 0; }
    /* Crop keeps head, torso and wheel. Tighter crops read as a stray limb. */
    .wsa11y-hero__mark svg { height: 165%; right: -10%; top: 50%; }
    /* Both hero buttons go full width. Side by side at 375px they were two
       cramped boxes with the tracking squeezed out of them. */
    .wsa11y-hero .wsa11y-button-row { width: 100%; gap: 12px; }
    .wsa11y-hero .wsa11y-button-row .wsa11y-button { flex: 1 1 100%; text-align: center; justify-content: center; }

    /* Header CTA. "Download the plugin" at 12px with 3px tracking wrapped to
       two lines and turned into a lime slab beside the logo. */
    .ws-site-header .wsa11y-button--sm {
        padding: 9px 12px; font-size: 10px; letter-spacing: 1.5px; white-space: nowrap;
    }
    .wsa11y-step { grid-template-columns: 1fr; gap: 10px; }
    .wsa11y-faq__inner > * { padding-right: 2px; }
    .wsa11y-button { letter-spacing: 2px; padding: 13px 18px; }
    .wsa11y-bars span { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .js .ws-highlight--wipe { animation: none; background-size: 100% 100%; }
    .wsa11y-faq__panel,
    .wsa11y-faq__sign,
    .js .wsa11y-faq__inner,
    .js .wsa11y-faq__item.is-open .wsa11y-faq__inner { transition: none; }
    .js .wsa11y-faq__inner { transform: none; }
    .wsa11y-faq__item.is-flagged { animation: none; }
    /* Script skips the 3D writes under reduced motion. Nothing to undo here,
       but the centre card keeps its shadow so the focal card is still obvious. */
    [data-rise] { opacity: 1; transform: none; transition: none; }
    .wsa11y-bars span { transform: scaleY(1); transition: none; }
    .wsa11y-rot__frame { transition: none; }
}