/* styles.css — AEOSearch for WordPress. Every value comes from tokens.css.
   Conviction (v3, 2026-09-02): the WordPress plugin page a consumer already knows how to read —
   white ground, one violet band, real wp-admin screens on wash panels — carrying receipts instead of stars. */

/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ---------- reset + ground ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--w-body) var(--t-body)/var(--lh-body) var(--font-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--d-fast) var(--ease-out), text-decoration-color var(--d-fast) var(--ease-out); }
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-head); margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--sunk); padding: .05em .35em; border-radius: var(--r); }
.mono { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4); border-radius: var(--r); }
.skip:focus { top: var(--s-4); }

/* slate scope — the stored-answer card and the plugin's dark screens only */
.slate { background: var(--slate); color: var(--slate-ink); }
.slate a { color: var(--needle); }
.slate a:hover { color: var(--needle-deep); }
.slate ::selection { background: var(--needle); color: var(--slate); }
.slate code { background: var(--slate-sunk); }

/* wash scope — the second ground, alternating with white the way the reference's bands do */
.wash { background: var(--wash); }
.section.wash, .cta-band, .site-footer { max-width: none; }
.section.wash > *:not(.rule), .cta-band__inner { max-width: var(--content); margin-inline: auto; }

/* ---------- layout ---------- */
.section { position: relative; padding: var(--s-9) var(--margin); max-width: calc(var(--content) + var(--margin) * 2); margin-inline: auto; }
.page { padding: var(--s-7) var(--margin) var(--s-9); max-width: calc(var(--content) + var(--margin) * 2); margin-inline: auto; }
.opener { max-width: 34ch; margin-bottom: var(--s-7); }
.section > .opener { max-width: 62ch; margin-inline: auto; text-align: center; }
.section > .opener .receipt { margin-inline: auto; }
.section > .prose--center { max-width: 62ch; margin-inline: auto; text-align: center; }
.eyebrow { color: var(--accent); margin-bottom: var(--s-3); display: block; font-size: var(--t-label); font-weight: var(--w-strong); font-family: var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.door { font-size: var(--t-h2); }
.door em { font-style: normal; color: var(--accent); }
h1.door { font-size: var(--t-h1); }
.door--sm { font-size: var(--t-h3); }
.receipt { font-size: var(--t-h4); font-weight: var(--w-body); line-height: 1.4; color: var(--ink-soft); margin-top: var(--s-3); text-wrap: pretty; max-width: 58ch; }
.lede { font-size: var(--t-h4); line-height: 1.5; max-width: var(--measure); margin-bottom: var(--s-7); color: var(--ink-soft); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-7); }
.prose ul, .prose ol { padding-left: 1.2em; }
.section__more { margin-top: var(--s-7); text-align: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.split > * { min-width: 0; }
.split .opener { margin-bottom: var(--s-5); }
.split--reverse > :first-child { order: 2; }
/* rankmath's numbered rows: the numeral is a chip, not a heading — it counts the steps of a
   switch without ever being read as one of our own headings. */
.step + .step { margin-top: var(--s-9); }
.step__head { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-h3); margin-bottom: var(--s-4); }
.step__n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); background: var(--accent); color: var(--paper); font: var(--w-strong) var(--t-small)/1 var(--font-mono); font-variant-numeric: tabular-nums; transform: translateY(-2px); }
.step__n--2 { background: var(--accent-bright); }
.step__n--3 { background: var(--needle); color: var(--slate); }
/* the readiness tally wears the plugin's own three status inks, the same three a reader
   meets inside the dashboard screenshot beside it. */
.tally--pass { color: var(--pass-ink); }
.tally--warn { color: var(--warn-ink); }
.tally--fail { color: var(--fail-ink); }
/* the feature grid runs the violet ladder across its columns instead of one flat stroke */
.tiles > :nth-child(3n+2) .tile__mark { color: var(--accent-bright); }
.tiles > :nth-child(3n) .tile__mark { color: var(--pass-ink); }
.opener__second { margin-top: var(--s-3); margin-inline: auto; max-width: 40ch; color: var(--ink); font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-display); letter-spacing: -0.015em; line-height: var(--lh-head); }
.section > .opener + .step { margin-top: var(--s-8); }

@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } .split--reverse > :first-child { order: 0; } }
.notice { display: inline-block; font-size: var(--t-small); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--wash); border-radius: 0 var(--r-lg) var(--r-lg) 0; margin-bottom: var(--s-7); max-width: var(--measure); }

/* wash panels — the reference's rounded pale panel that every illustration and screenshot sits on */
.panel { position: relative; background: var(--wash); border-radius: var(--r-xl); padding: var(--s-6); }
.panel::after { content: ""; position: absolute; left: var(--s-6); bottom: calc(-1 * var(--s-3)); width: 96px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 9px); opacity: .6; }
.split--reverse .panel::after { left: auto; right: var(--s-6); }
.panel .screen img, .panel .plate img { border-radius: var(--r-lg); box-shadow: var(--shadow-3); border: 1px solid var(--line); background: var(--surface); }
.panel .plate img { padding: var(--s-5); box-shadow: none; }
.panel figcaption { text-align: left; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); min-height: 44px; border-radius: var(--r-lg); font: var(--w-strong) var(--t-small)/1 var(--font-body); text-decoration: none; border: 1.5px solid transparent; position: relative; transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), box-shadow var(--d-quick) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-deep); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.band .btn--primary { background: var(--needle); color: var(--slate); }
.band .btn--primary:hover { background: var(--needle-deep); color: var(--slate); }
.band .btn--ghost, .btn--ghost.ghost--light { border-color: var(--band-ink-soft); color: var(--band-ink); }
.band .btn--ghost:hover, .btn--ghost.ghost--light:hover { border-color: var(--band-ink); color: var(--band-ink); background: color-mix(in oklab, var(--band-ink) 12%, transparent); }
.slate .btn--primary { background: var(--needle); color: var(--slate); }
.slate .btn--primary:hover { background: var(--needle-deep); color: var(--slate); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: var(--content); margin-inline: auto; padding: 0 var(--margin); height: 68px; display: flex; align-items: center; gap: var(--s-6); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--s-2); padding-block: 7px; margin-block: -7px; text-decoration: none; color: inherit; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--t-h4); letter-spacing: -0.02em; } /* the 31px line becomes a 45px thumb target; the negative margin keeps the layout where it was */
.wordmark__mark { align-self: center; display: inline-flex; color: inherit; }
.wordmark__for { color: var(--ink-faint); font-size: var(--t-tick); font-family: var(--font-body); font-weight: var(--w-body); text-transform: none; letter-spacing: 0; }
.wordmark:hover { color: inherit; }
.nav { margin-inline: auto; }
.nav__list { list-style: none; display: flex; gap: var(--s-1); }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); min-height: 40px; border-radius: var(--r-lg); background: none; border: 0; font: var(--w-strong) var(--t-small)/1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.nav__link:hover, .nav__item.is-open > .nav__link { background: var(--wash); color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--accent); }
.caret { transition: transform var(--d-quick) var(--ease-out); }
.is-open .caret { transform: rotate(180deg); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.site-header__actions .btn { min-height: 40px; padding-block: var(--s-2); }

/* mega menus */
.mega__panel { position: absolute; top: calc(100% + var(--s-3)); left: 50%; transform: translate(-50%, calc(-1 * var(--heave) / 2)); display: none; grid-template-columns: repeat(3, minmax(200px, 1fr)) minmax(240px, 1.1fr); gap: var(--s-6); width: min(1040px, calc(100vw - var(--margin) * 2)); padding: var(--s-6); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); opacity: 0; transition: opacity var(--d-quick) var(--ease-out), transform var(--d-quick) var(--ease-out), display var(--d-quick); transition-behavior: allow-discrete; }
.mega__panel--narrow { grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr); width: min(620px, calc(100vw - var(--margin) * 2)); }
.nav__item.is-open > .mega__panel, .no-js .nav__item:focus-within > .mega__panel, .no-js .nav__item:hover > .mega__panel { display: grid; opacity: 1; transform: translate(-50%, 0); }
@starting-style { .nav__item.is-open > .mega__panel { opacity: 0; transform: translate(-50%, calc(-1 * var(--heave) / 2)); } }
.mega__title { font: var(--w-strong) var(--t-label)/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.mega__col ul { list-style: none; }
.mega__link { display: block; padding: var(--s-2) var(--s-2); margin-inline: calc(-1 * var(--s-2)); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: background var(--d-fast) var(--ease-out); }
.mega__link:hover { background: var(--wash); color: var(--ink); }
.mega__link span { display: block; font-weight: var(--w-strong); font-size: var(--t-small); }
.mega__link small { display: block; font-size: var(--t-label); color: var(--ink-faint); margin-top: 2px; }
.mega__latest { background: var(--wash); border-radius: var(--r-lg); padding: var(--s-4); }
.mega__news { display: block; text-decoration: none; color: var(--ink); font-size: var(--t-small); line-height: 1.35; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.mega__news .mono { display: block; color: var(--accent); margin-bottom: 2px; }
.mega__news:hover { color: var(--accent); }
.mega__more { display: inline-block; margin-top: var(--s-3); font-size: var(--t-label); font-weight: var(--w-strong); }

/* burger + drawer */
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; flex-direction: column; justify-content: space-between; cursor: pointer; color: inherit; }
.burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--d-move) var(--ease-in-out), opacity var(--d-fast) var(--ease-out); transform-origin: center; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
.drawer { display: none; }
@media (max-width: 1023px) {
  .nav { display: none; }
  .burger { display: flex; }
  .site-header__actions .btn { display: none; }
  .drawer { position: fixed; inset: 68px 0 0 0; background: var(--paper); overflow-y: auto; padding: var(--s-5) var(--margin) var(--s-9); transform: translateX(100%); transition: transform var(--d-move) var(--ease-in-out), display var(--d-move); transition-behavior: allow-discrete; }
  .drawer.is-open { display: block; transform: none; }
  @starting-style { .drawer.is-open { transform: translateX(100%); } }
  .drawer-open body { overflow: hidden; }
  .drawer ul { list-style: none; }
  .drawer li a { display: block; padding: var(--s-3) 0; font-size: var(--t-body); font-weight: var(--w-strong); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .drawer__head { font: var(--w-strong) var(--t-label)/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding: var(--s-6) 0 var(--s-2); }
  .drawer__cta { padding-top: var(--s-6); display: flex; gap: var(--s-3); }
  .drawer__cta .btn { display: inline-flex; }
}

/* ---------- hero: the band, and the instrument that breaks its seam ---------- */
.hero { position: relative; text-align: center; padding: var(--s-9) var(--margin) var(--s-7); color: var(--band-ink); background: var(--band); --overhang: 96px; margin-bottom: 0; }
.hero__copy { position: relative; z-index: 1; max-width: 66ch; margin-inline: auto; }
.hero__eyebrow { color: var(--band-ink-soft); margin-bottom: var(--s-4); font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: 0.1em; text-transform: uppercase; }
.hero__door { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.hero__door .w { display: inline-block; }
.hero__door em, .hero__receipt em { font-style: normal; color: var(--needle); }
.hero__receipt { font-size: var(--t-h3); font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: -0.015em; line-height: var(--lh-head); color: var(--band-ink); margin-top: var(--s-4); max-width: 34ch; margin-inline: auto; }
.hero__body { font-size: var(--t-h4); }
.hero__body { margin-top: var(--s-5); color: var(--band-ink-soft); max-width: 56ch; margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); color: var(--band-ink-soft); font-size: var(--t-small); }
.hero__engines { margin-top: var(--s-7); color: var(--band-ink-soft); font-size: var(--t-small); }
.hero__engines ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--t-engine); font-weight: var(--w-display); color: var(--band-ink); letter-spacing: -0.01em; }
.engine--chatgpt { color: var(--engine-chatgpt); }
.engine--gemini { color: var(--engine-gemini); }
.engine--claude { color: var(--engine-claude); }
.engine--grok { color: var(--engine-grok); }
.engine--perplexity { color: var(--engine-perplexity); }
.hero__instrument { position: relative; z-index: 1; max-width: 1080px; margin: var(--s-7) auto calc(-1 * var(--overhang) - var(--s-6)); }
.screen { margin: 0; }
.screen img { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-instrument); background: var(--surface); }
.screen figcaption { font-size: var(--t-label); color: var(--ink-faint); margin-top: var(--s-3); line-height: 1.4; }
.screen__where { color: var(--ink-soft); font-weight: var(--w-strong); }
.screen--hero img { width: 100%; border-radius: var(--r-xl); border-color: color-mix(in oklab, var(--band-deep) 60%, var(--line)); }
.screen--hero figcaption { color: var(--ink-faint); }
/* the caption clears the overhang, so it is read on paper — and says so to the contrast check */
.hero .screen figcaption { color: var(--ink-faint); background: var(--paper); width: fit-content; margin-inline: auto; padding-top: var(--s-3); }
.hero .screen__where { color: var(--ink-soft); }
.hero + .section { padding-top: calc(var(--s-9) + var(--overhang, 120px)); }
.screen--inline { margin-top: var(--s-6); }
.screen--inline img, .screen--wide img { box-shadow: var(--shadow-3); }
.screen--wide { margin: var(--s-7) 0; }
/* the reference's floating callouts: two facts read off the screenshot they float over */
.callout { position: absolute; z-index: 3; display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-2); text-align: left; font-size: var(--t-label); line-height: 1.3; min-width: 168px; }
.callout strong { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-display); letter-spacing: -0.01em; }
.callout--pass strong { color: var(--pass-ink); }
.callout--a { right: var(--s-5); top: 12%; }
.callout--b { left: var(--s-5); bottom: calc(var(--overhang) + var(--s-6)); }
.callout i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--needle); margin-right: var(--s-2); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 1100px) { .callout { display: none; } }

/* the dial */
.dial { position: relative; z-index: 2; width: 160px; }
.dial svg { overflow: visible; width: 160px; height: 160px; }
.dial__track { fill: var(--surface); stroke: var(--line); stroke-width: 10; }
.dial__fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: butt; stroke-dasharray: var(--score) var(--units); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray var(--d-dial) var(--ease-settle); }
.dial__tick { stroke: var(--line-strong); stroke-width: 1.5; }
.dial__tick--major { stroke: var(--ink); stroke-width: 2; }
.dial__needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dial__needle circle { fill: var(--needle); stroke: var(--ink); stroke-width: 3; }
.dial__needle { transform-origin: 50% 50%; transform: rotate(calc(var(--score) * var(--step))); transition: transform var(--d-dial) var(--ease-settle); }
.dial.is-live .dial__needle { animation: tick var(--tick) var(--ease-in-out) var(--d-dial) infinite; }
@keyframes tick { 0%, 92%, 100% { transform: rotate(calc(var(--score) * var(--step))); } 94% { transform: rotate(calc(var(--score) * var(--step) + 2deg)); } 97% { transform: rotate(calc(var(--score) * var(--step) - 1deg)); } }
.dial__legend { display: none; }

/* ---------- canon: the operator's passage, set as prose ---------- */
.canon { max-width: 62ch; margin: 0 auto var(--s-8); padding: var(--s-5) var(--s-6); background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--r-xl) var(--r-xl) 0; box-shadow: var(--shadow-2); }
.canon__passage { margin: 0; font-family: var(--font-display); font-size: var(--t-body); line-height: 1.6; font-weight: var(--w-body); }
.canon__attr { margin-top: var(--s-4); color: var(--ink-faint); font-size: var(--t-small); }

/* ---------- engines: the one number ---------- */
.one { display: grid; grid-template-columns: auto 1fr; justify-content: center; gap: var(--s-8); align-items: center; max-width: 860px; margin-inline: auto; background: var(--surface); border-radius: var(--r-xl); padding: var(--s-6) var(--s-7); box-shadow: var(--shadow-2); }
.one__number { text-align: left; }
.one__number strong { display: block; font-family: var(--font-display); font-size: var(--t-display); line-height: 1; letter-spacing: -0.03em; font-weight: var(--w-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.one__number span { display: block; font-family: var(--font-display); font-size: var(--t-h4); letter-spacing: -0.01em; margin-top: var(--s-2); }
.one__line { margin-top: var(--s-3); color: var(--ink-soft); max-width: 46ch; }
@media (max-width: 767px) { .one { grid-template-columns: 1fr; justify-items: center; text-align: center; } .one__number { text-align: center; } }

/* ---------- the stored answer ---------- */
.answer { border-radius: var(--r-xl); box-shadow: var(--shadow-instrument); overflow: hidden; }
.answer summary { list-style: none; cursor: pointer; display: grid; gap: var(--s-2); padding: var(--s-5); border-bottom: 1px solid var(--slate-line); }
.answer summary::-webkit-details-marker { display: none; }
.answer summary > .mono:first-child { color: var(--needle); }
.answer summary > .mono:first-child::after { content: "▸ open"; float: right; color: var(--slate-ink-faint); }
.answer[open] summary > .mono:first-child::after { content: "▾ close"; }
.answer__q { font-family: var(--font-display); font-size: var(--t-h4); line-height: 1.3; }
.answer__meta { color: var(--slate-ink-faint); }
.answer__body { padding: var(--s-5); font-size: var(--t-small); line-height: 1.6; }
.answer__body p + p { margin-top: var(--s-4); }
.answer__body mark { background: transparent; color: var(--needle); box-shadow: inset 0 -2px 0 var(--needle); }
.answer__absent { color: var(--slate-fail); }
.cursor { display: inline-block; width: .6ch; height: 1em; vertical-align: -0.15em; background: var(--needle); margin-left: 2px; animation: blink var(--blink) steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.answer__stamp { padding: var(--s-3) var(--s-5); background: var(--slate-sunk); color: var(--slate-ink-faint); border-top: 1px dashed var(--slate-line); font-size: var(--t-label); }

/* ---------- tiles: the reference's open icon grid, no card chrome ---------- */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-7); }
.tile a { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: var(--s-2); text-decoration: none; color: var(--ink); transition: color var(--d-fast) var(--ease-out); }
.tile__mark { grid-row: 1 / 3; color: var(--accent); width: 36px; height: 36px; transition: transform var(--d-quick) var(--ease-out); }
.tile__mark svg { width: 36px; height: 36px; }
.tile__title { font-family: var(--font-display); font-size: var(--t-h4); letter-spacing: -0.01em; font-weight: var(--w-display); line-height: 1.2; align-self: end; transition: color var(--d-fast) var(--ease-out); }
.tile__line { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.tile a:hover .tile__title { color: var(--accent); }
.tile a:hover .tile__mark { transform: translateY(-2px); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- the wire: every request, on the FAQ page ---------- */
.wire__intro { max-width: 58ch; margin: 0 auto var(--s-6); text-align: center; color: var(--ink-soft); }
.wire__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.wire__table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 720px; }
.wire__table th, .wire__table td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.wire__table thead th { font: var(--w-strong) var(--t-label)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); background: var(--wash); }
.wire__table tbody th { font-weight: var(--w-strong); color: var(--ink); white-space: nowrap; }
.wire__table tbody th small { display: block; font-weight: var(--w-body); font-size: var(--t-label); color: var(--ink-faint); white-space: normal; margin-top: 2px; }
.wire__table tbody td { color: var(--ink-soft); }
.wire__table tbody tr { transition: background var(--d-fast) var(--ease-out); }
.wire__table tbody tr:hover, .wire__table tbody tr:focus-visible { background: var(--wash); }
.wire__table tbody tr:last-child th, .wire__table tbody tr:last-child td { border-bottom: 0; }
.wire__foot { margin: var(--s-5) auto 0; color: var(--ink-faint); max-width: 80ch; font-size: var(--t-small); text-align: center; }
.chip { display: inline-block; padding: 4px 12px; border-radius: var(--r-round); font: var(--w-strong) var(--t-label)/1.4 var(--font-body); white-space: nowrap; }
.chip--on { background: var(--pass-bg); color: var(--pass-ink); }
.chip--click { background: var(--warn-bg); color: var(--warn-ink); }
.chip--off { background: var(--mute-bg); color: var(--mute-ink); }
.ledger td.mono { text-transform: none; font-size: var(--t-small); }

/* ---------- plates ---------- */
.plate { margin: 0; }
.plate img { border-radius: var(--r-lg); }
.plate--framed img { background: var(--surface); border: 1px solid var(--line); padding: var(--s-6); max-width: min(420px, 100%); margin-inline: auto; }
.plate--sm img { max-width: 260px; }
.plate--wide { margin: var(--s-7) auto; max-width: 760px; }
.plate--wide img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--r-xl); }

/* ---------- faq ---------- */
.faq { max-width: 72ch; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-8) var(--s-4) 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--t-h4); letter-spacing: -0.005em; line-height: 1.3; position: relative; transition: color var(--d-fast) var(--ease-out); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: var(--s-2); top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(-45deg); transition: transform var(--d-quick) var(--ease-out); }
.faq__item[open] summary::after { transform: translateY(-40%) rotate(45deg); }
.faq__item summary:hover, .faq__item summary:focus-visible { color: var(--accent); }
.faq__a { padding: 0 0 var(--s-5); max-width: var(--measure); color: var(--ink-soft); }
.faq__a > * + * { margin-top: var(--s-3); }
.faq-group + .faq-group, .feature-faq { margin-top: var(--s-8); }
.faq-group .door--sm, .feature-faq .door--sm { margin-bottom: var(--s-5); }
.page .faq { margin-inline: 0; }

/* ---------- cta card: white card on the wash, the way the reference sits its banner into the footer ---------- */
.cta-band { background: var(--wash); padding: var(--s-9) var(--margin) 0; }
.cta-band__inner { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); padding: var(--s-7); display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; position: relative; top: var(--s-7); }
.cta-band .door { font-size: var(--t-h3); }
.cta-band .receipt { margin-top: var(--s-2); font-size: var(--t-body); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 767px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ---------- pages ---------- */
.crumbs { max-width: var(--content); margin: var(--s-5) auto 0; padding: 0 var(--margin); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-label); color: var(--ink-faint); }
.crumbs li + li::before { content: "›"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); }
.feature-group { margin-top: var(--s-8); }
.feature-group .door--sm { margin-bottom: var(--s-6); }
.feature-hero { text-align: center; max-width: 60ch; margin-inline: auto; padding-block: var(--s-6) var(--s-4); }
.feature-hero .receipt { margin-inline: auto; }
.feature-hero .hero__actions { margin-top: var(--s-5); }
.page--feature .lede, .page--feature .feature-section, .page--feature .feature-faq { margin-inline: auto; }
.page--feature .screen--wide { max-width: 960px; margin-inline: auto; }
.feature-section { margin-top: var(--s-8); max-width: var(--measure); }
.feature-section .door--sm { margin-bottom: var(--s-4); }
.siblings { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.siblings ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.siblings li a { display: inline-block; padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-round); text-decoration: none; color: var(--ink); font-size: var(--t-small); font-weight: var(--w-strong); transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.siblings li a:hover, .siblings li a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* pricing */
.price-group { margin-top: var(--s-8); }
.price-group .opener { margin-bottom: var(--s-5); }
.price-group .prose { margin-bottom: var(--s-6); max-width: var(--measure); }
.price-group--band { background: var(--wash); margin-inline: calc(-1 * var(--margin)); padding: var(--s-8) var(--margin); border-radius: 0; }
.plans { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
.plan { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); transition: transform var(--d-quick) var(--ease-out), box-shadow var(--d-quick) var(--ease-out); }
.plan:hover, .plan:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.plan--mark { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan--free { background: var(--wash); border-color: var(--wash-deep); }
.plan__title { font-size: var(--t-h4); }
.plan__price strong { display: block; font-family: var(--font-display); font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1; font-weight: var(--w-display); font-variant-numeric: tabular-nums; }
.plan__price .mono { color: var(--ink-faint); }
.plan__annual { color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--t-label); }
.plan__sites { font-weight: var(--w-strong); font-size: var(--t-small); }
.plan__list { list-style: none; font-size: var(--t-small); color: var(--ink-soft); display: grid; gap: var(--s-2); align-content: start; }
.plan__list li { padding-left: var(--s-4); position: relative; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }

/* changelog */
.changelog { list-style: none; max-width: 76ch; }
.release { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.release__version { color: var(--accent); font-size: var(--t-small); padding-top: 4px; }
.release ul { list-style: none; display: grid; gap: var(--s-2); }
.release li { padding-left: var(--s-4); border-left: 2px solid var(--line); font-size: var(--t-small); }
@media (max-width: 560px) { .release { grid-template-columns: 1fr; gap: var(--s-2); } }

/* blog cards: the reference's resource cards — a thumbnail on a tinted panel, then the title */
.post-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.card a { display: grid; gap: var(--s-3); height: 100%; text-decoration: none; color: var(--ink); align-content: start; }
.card__thumb { background: var(--wash); border-radius: var(--r-xl); padding: var(--s-5) var(--s-5) 0; overflow: hidden; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; transition: background var(--d-fast) var(--ease-out); }
.card__thumb img { border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3); width: 100%; object-fit: cover; object-position: top; height: 100%; border: 1px solid var(--line); border-bottom: 0; }
.card a:hover .card__thumb, .card a:focus-visible .card__thumb { background: var(--wash-deep); }
.post-list--text { gap: var(--s-5) var(--s-6); }
.post-list--text .card a { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-quick) var(--ease-out), transform var(--d-quick) var(--ease-out); }
.post-list--text .card a:hover, .post-list--text .card a:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card__meta { color: var(--ink-faint); font-size: var(--t-label); }
.card__title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-display); letter-spacing: -0.01em; line-height: 1.25; transition: color var(--d-fast) var(--ease-out); }
.card a:hover .card__title, .card a:focus-visible .card__title { color: var(--accent); }
.card__dek { font-size: var(--t-small); color: var(--ink-soft); }
@media (max-width: 900px) { .post-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-list { grid-template-columns: 1fr; } }
.post { max-width: calc(var(--content) + var(--margin) * 2); margin-inline: auto; padding: var(--s-7) var(--margin) var(--s-9); }
.post__head { max-width: 44ch; margin-bottom: var(--s-7); }
.post__body { font-size: var(--t-body); }
.post__body h2 { font-size: var(--t-h3); margin-top: var(--s-8); }
.post__sources, .post__next { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: var(--measure); }
.post__sources ol { padding-left: 1.4em; font-size: var(--t-small); display: grid; gap: var(--s-2); }
.post__next ul { list-style: none; display: grid; gap: var(--s-2); }
.post__next li a { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-display); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.post__next li a:hover, .post__next li a:focus-visible { color: var(--accent); }

/* docs */
.courses { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); counter-reset: course; }
.course a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--s-4); row-gap: var(--s-2); height: 100%; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); text-decoration: none; color: var(--ink); transition: transform var(--d-quick) var(--ease-out), box-shadow var(--d-quick) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.course a:hover, .course a:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); color: var(--ink); }
.course__n { grid-row: 1 / 4; color: var(--accent); font-size: var(--t-h3); font-weight: var(--w-display); font-family: var(--font-display); letter-spacing: -0.02em; text-transform: none; }
.course__title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--w-display); letter-spacing: -0.01em; line-height: 1.2; }
.course__blurb { font-size: var(--t-small); color: var(--ink-soft); }
.course__count { color: var(--ink-faint); font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: var(--t-label); }
@media (max-width: 900px) { .courses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .courses { grid-template-columns: 1fr; } }
.page--course { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--s-8); }
.page--course > .opener, .page--course > .lesson, .page--course > .siblings { grid-column: 2; }
.toc { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 92px; align-self: start; }
.toc ol { list-style: none; counter-reset: lesson; border-left: 1px solid var(--line); }
.toc li { counter-increment: lesson; }
.toc a { display: block; padding: var(--s-2) var(--s-4); font-size: var(--t-label); text-decoration: none; color: var(--ink-soft); border-left: 2px solid transparent; margin-left: -1px; transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.toc a::before { content: counter(lesson, decimal-leading-zero) " "; color: var(--ink-faint); }
.toc a:hover, .toc a:focus-visible { color: var(--accent); border-left-color: var(--accent); }
.lesson { padding: var(--s-6) 0; border-top: 1px solid var(--line); scroll-margin-top: 92px; }
.lesson__title { font-size: var(--t-h3); }
.lesson__title .mono { color: var(--accent); margin-right: var(--s-2); vertical-align: middle; font-family: var(--font-body); }
.lesson__blurb { color: var(--ink-soft); margin: var(--s-3) 0 var(--s-4); font-size: var(--t-body); }
.lesson__note { color: var(--ink-faint); font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: var(--t-small); }
@media (max-width: 900px) { .page--course { grid-template-columns: 1fr; } .page--course > .opener, .page--course > .lesson, .page--course > .siblings { grid-column: 1; } .toc { position: static; grid-row: auto; margin-bottom: var(--s-6); } }

/* support, 404 */
.channels { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-8); }
.channel { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); display: grid; gap: var(--s-2); }
.channel__label { color: var(--ink-faint); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-label); font-weight: var(--w-strong); }
.channel a { font-weight: var(--w-strong); word-break: break-word; }
@media (max-width: 767px) { .channels { grid-template-columns: 1fr; } }
.page--404 { text-align: center; padding-block: var(--s-9); }
.page--404 .plate { margin-bottom: var(--s-6); }
.page--404 .receipt { margin-inline: auto; max-width: 40ch; }
.page--404 p:last-child { margin-top: var(--s-6); }

/* ---------- footer: light, the reference's grammar ---------- */
.site-footer { background: var(--wash); padding: calc(var(--s-9) + var(--s-6)) var(--margin) var(--s-6); border-top: 1px solid var(--line); }
.site-footer__inner { max-width: var(--content); margin-inline: auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) 1.4fr; gap: var(--s-6); }
.site-footer__about p { font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--s-4); max-width: 38ch; }
.site-footer__version { color: var(--ink-faint); font-size: var(--t-small); }
.site-footer__title { color: var(--ink); margin-bottom: var(--s-3); font-size: var(--t-label); font-weight: var(--w-strong); font-family: var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }
.site-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.site-footer li a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-small); }
.site-footer li a:hover, .site-footer li a:focus-visible { color: var(--accent); }
.site-footer__news li a .mono { color: var(--accent); margin-right: var(--s-2); }
.site-footer__legal { max-width: var(--content); margin: var(--s-8) auto 0; padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); font-size: var(--t-label); color: var(--ink-faint); }
.site-footer__legal ul { display: flex; gap: var(--s-4); }
.site-footer__legal a { color: var(--ink-soft); text-decoration: none; }
@media (max-width: 1023px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; } .site-footer__about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-header .wordmark__for { display: none; } }

/* ---------- reveals (prep classes added by JS only; fail-open) ---------- */
.prep { opacity: 0; transform: translateY(var(--heave)); }
.prep[data-stagger] > * { opacity: 0; transform: translateY(var(--heave)); }
.revealed { opacity: 1; transform: none; transition: opacity var(--d-move) var(--ease-out), transform var(--d-move) var(--ease-out); }
.revealed[data-stagger] { transition: none; }
.revealed[data-stagger] > * { opacity: 1; transform: none; transition: opacity var(--d-move) var(--ease-out), transform var(--d-move) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.hero__door.revealed .w { transition: opacity var(--d-move) var(--ease-out), transform var(--d-move) var(--ease-out); }
.hero__door.prep .w { opacity: 0; transform: translateY(var(--heave)); }
.hero__door.prep { opacity: 1; transform: none; }
.hero__door.revealed .w:nth-child(1) { transition-delay: 0ms; } .hero__door.revealed .w:nth-child(2) { transition-delay: calc(var(--stagger) * 1); } .hero__door.revealed .w:nth-child(3) { transition-delay: calc(var(--stagger) * 2); } .hero__door.revealed .w:nth-child(4) { transition-delay: calc(var(--stagger) * 3); } .hero__door.revealed .w:nth-child(5) { transition-delay: calc(var(--stagger) * 4); } .hero__door.revealed .w:nth-child(n+6) { transition-delay: calc(var(--stagger) * 5); }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  :root { --t-h2: 30px; --t-h3: 22px; --t-h4: 19px; --t-body: 17px; }
  .section { padding-block: var(--s-8); }
  .hero { padding-top: var(--s-7); --overhang: 40px; }
  .marquee { margin-inline: calc(-1 * var(--margin)); border-radius: 0; }
  .panel { padding: var(--s-4); }
  .cta-band__inner { padding: var(--s-5); }
}

/* ---------- focus twins: every hover has a keyboard equal ---------- */
a:focus-visible { color: var(--accent-deep); text-decoration-thickness: 2px; }
.slate a:focus-visible { color: var(--needle-deep); }
.btn--primary:focus-visible { background: var(--accent-deep); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.band .btn--primary:focus-visible, .slate .btn--primary:focus-visible { background: var(--needle-deep); color: var(--slate); }
.btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.band .btn--ghost:focus-visible { border-color: var(--band-ink); color: var(--band-ink); background: color-mix(in oklab, var(--band-ink) 12%, transparent); }
.wordmark:focus-visible { color: inherit; }
.nav__link:focus-visible { background: var(--wash); color: var(--accent); }
.mega__link:focus-visible { background: var(--wash); color: var(--ink); }
.mega__news:focus-visible { color: var(--accent); }
.tile a:focus-visible .tile__title { color: var(--accent); }
.tile a:focus-visible .tile__mark { transform: translateY(-2px); }
.faq__item summary:focus-visible { color: var(--accent); }

/* ---------- ambient: the one thing on its own clock per stop ---------- */
.rule { position: absolute; inset: 0 calc(50% - 50vw); overflow: clip; pointer-events: none; z-index: 0; }
/* the ground is ruled in columns — vertical only, because a horizontal rule restarts at
   every section seam and the misalignment shows. The columns step one 96px measure every two
   seconds: continuous drift repainted each ground every frame and starved the reveal observer,
   which sitecheck read as six elements never revealed. Twenty-four repaints a minute costs nothing. */
.rule::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 96px); animation: measure 48s steps(48) infinite; }
@keyframes measure { to { background-position: 96px 0; } }
.hero { --rule: rgba(255, 255, 255, .09); }
.section, .cta-band { --rule: rgba(27, 33, 65, .085); }
.section > *:not(.rule), .cta-band__inner { position: relative; z-index: 1; }
.chip--on { animation: carry 3s var(--ease-in-out) infinite; }
@keyframes carry { 0%, 100% { box-shadow: 0 0 0 0 rgba(11,107,58,0); } 50% { box-shadow: 0 0 0 4px rgba(11,107,58,.18); } }
.dial.is-live .dial__fill { animation: breathe 5s var(--ease-in-out) infinite; }
@keyframes breathe { 0%, 100% { stroke-width: 10; } 50% { stroke-width: 12; } }
.callout i { animation: pulse 2.4s var(--ease-in-out) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--surface); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px rgba(63,232,166,.28); } }
@media (prefers-reduced-motion: reduce) { .chip--on, .dial.is-live .dial__fill, .callout i, .rule::before { animation: none; } }

/* /shop — four tiles in the reference's anatomy: art, ribbon, title, chip, lede,
   ladder line, checklist, price, full-width buy, read more. Two by two on purpose. */
.tiers { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-7) 0 var(--s-4); padding: 0; }
.tier { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); transition: transform var(--d-move) var(--ease-out), box-shadow var(--d-move) var(--ease-out), border-color var(--d-move) var(--ease-out); }
.tier:hover, .tier:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.tier__art { position: relative; aspect-ratio: 1400 / 792; overflow: hidden; isolation: isolate; }
.tier--free .tier__art { background: var(--tile-free); }
.tier--founders .tier__art { background: var(--tile-founders); }
.tier--commerce .tier__art { background: var(--tile-commerce); }
.tier--premier .tier__art { background: var(--tile-premier); }
.tier__art img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; animation: tier-breathe var(--d-breathe) var(--ease-in-out) infinite alternate; transition: transform var(--d-dial) var(--ease-out); will-change: transform; }
.tier:nth-child(2) .tier__art img { animation-delay: -2.2s; }
.tier:nth-child(3) .tier__art img { animation-delay: -4.6s; }
.tier:nth-child(4) .tier__art img { animation-delay: -6.9s; }
.tier:hover .tier__art img, .tier:focus-within .tier__art img { animation-play-state: paused; transform: scale(1.06) translateY(-1.5%); }
@keyframes tier-breathe { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.035) translate(-0.6%, -0.8%); } }
/* the light sweep: a single pass across the art on hover, never at rest */
.tier__art::after { content: ""; position: absolute; inset: -40% -20%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%); transform: translateX(-70%); pointer-events: none; z-index: 1; }
.tier:hover .tier__art::after, .tier:focus-within .tier__art::after { transition: transform 1100ms var(--ease-out); transform: translateX(70%); }
.tier__ribbon { position: absolute; top: 22px; right: -38px; z-index: 2; width: 170px; padding: 7px 0; text-align: center; transform: rotate(45deg); background: var(--tile-ribbon-bg); color: var(--tile-ribbon-ink); font: var(--w-strong) var(--t-label)/1.2 var(--font-body); letter-spacing: 0.02em; box-shadow: var(--shadow-2); }
.tier__body { display: grid; grid-template-rows: auto auto auto auto 1fr auto auto auto; gap: var(--s-3); padding: var(--s-6) var(--s-6) var(--s-5); }
.tier__title { font: var(--w-display) var(--t-h3)/var(--lh-head) var(--font-display); letter-spacing: var(--track-display); color: var(--ink); margin: 0; }
.tier__chip { margin: -4px 0 0; }
.chip--plat { background: var(--accent-wash); color: var(--accent); }
.tier__who { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; margin: 0; }
.tier__lead { margin: var(--s-2) 0 0; font-weight: var(--w-strong); color: var(--ink); font-size: var(--t-small); }
.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); align-content: start; }
.tier__list li { position: relative; padding-left: 26px; font-size: var(--t-small); color: var(--ink); line-height: 1.5; }
.tier__list li::before { content: "\2713"; position: absolute; left: 2px; top: 0; color: var(--pass-ink); font-weight: var(--w-strong); }
.tier__pricing { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: 2px; }
.tier__price { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; }
.tier__price strong { font: var(--w-display) var(--t-h2)/1 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); }
.tier__price span { font: var(--w-mono) var(--t-label)/1 var(--font-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--track-label); }
.tier__alt { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.tier__alt b { color: var(--ink); font-weight: var(--w-strong); }
.tier__alt del { color: var(--ink-faint); }
.tier__save { margin: 2px 0 0; font: var(--w-strong) var(--t-label)/1.4 var(--font-body); color: var(--pass-ink); }
.btn--buy { width: 100%; background: var(--accent); color: var(--accent-ink); font-size: var(--t-body); min-height: 48px; }
.btn--buy:hover { background: var(--accent-deep); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.tier--free .btn--buy { background: var(--pass-ink); }
.tier--free .btn--buy:hover { background: #084f2b; }
.tier__more { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-4); font: var(--w-strong) var(--t-small)/1 var(--font-body); color: var(--accent); text-decoration: none; }
.tier__more:hover { text-decoration: underline; }
.tier__billing { color: var(--ink-faint); font-size: var(--t-small); margin: 0 0 var(--s-5); }
.tier--founders { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-1); }
.matrix { min-width: 760px; }
.matrix thead th:not(:first-child), .matrix tbody td { text-align: center; }
.matrix tbody th { white-space: normal; font-weight: var(--w-body); color: var(--ink); max-width: 40ch; }
.matrix__yes { color: var(--pass-ink); font-weight: var(--w-strong); font-size: var(--t-body); }
.matrix__no { color: var(--ink-faint); }
.matrix__text { font-size: var(--t-label); color: var(--ink-soft); }
.matrix tbody tr:nth-child(odd) { background: var(--surface); }
/* the comparison chart sits on slate so the plugin's needle green can carry its copy:
   #3fe8a6 on #1d2440 is 9.7:1, on paper it would be 1.6:1 */
.matrix-band { margin-inline: calc(-1 * var(--margin)); padding: var(--s-8) var(--margin); }
.matrix-band .eyebrow { color: var(--needle); }
.matrix-band .door, .matrix-band .receipt, .matrix-band .wire__foot { color: var(--slate-ink); }
.matrix-band .wire__scroll { background: var(--slate); }
.slate .matrix th, .slate .matrix td { border-color: var(--slate-line); color: var(--needle); }
.slate .matrix thead th { background: var(--slate-sunk); color: var(--needle); }
.slate .matrix tbody th { color: var(--needle); font-weight: var(--w-strong); }
.slate .matrix__yes { color: var(--needle); font-size: var(--t-h4); }
.slate .matrix__no { color: var(--slate-ink-faint); }
.slate .matrix__text { color: var(--needle); }
.slate .matrix tbody tr:nth-child(odd) { background: var(--slate-surface); }
.slate .matrix tbody tr:hover, .slate .matrix tbody tr:focus-visible { background: var(--slate-surface); }
@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; gap: var(--s-5); }
  .tier__body { padding: var(--s-5); }
  .tier__ribbon { top: 16px; right: -44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tier__art img { animation: none; }
  .tier:hover .tier__art img, .tier:focus-within .tier__art img { transform: none; }
  .tier__art::after { display: none; }
}