/* ── home-extras.css — homepage pieces added 2026-10-16 ──────────────────────
   1. the "31 countries" stat (bigger, types itself in; js/stat.js)
   2. the thin "add your review" line (replaces the placeholder testimonials)
   3. All-Access accent treatments (replace the coloured left bar), picked by
      [data-aaa] on .rx-aa-v--last. Default = ticks. Others are reachable on
      localhost via ?aaa=plate|led|rail (js/home-lab.js).
   Page-local vars only; colours come from existing tokens / --p. */

/* 1 ── stat ───────────────────────────────────────────────────────────────── */
.rx-stat { display: grid; justify-items: center; gap: var(--s2); line-height: .8; }
.rx-stat-n { position: relative; display: inline-block; font-size: clamp(16rem, 52vw, 36rem); line-height: .8; letter-spacing: -.04em; white-space: nowrap; }
.rx-stat-w { font-size: clamp(3.6rem, 9vw, 9rem); line-height: 1; letter-spacing: -.02em; }
.rx-stat-w i { font-style: normal; color: var(--accent, currentColor); }
.rx-stat-v { display: inline-block; text-align: left; font-variant-numeric: tabular-nums; transform-origin: 50% 70%; }
.rx-stat-n.is-armed:not(.is-typing):not(.is-done) .rx-stat-v { visibility: hidden; }
/* minimal cursor: a thin bar after the number, blinking once the count starts and staying */
.rx-stat-cur { display: inline-block; width: .03em; height: .62em; margin-left: .05em; vertical-align: baseline; background: currentColor; opacity: 0; pointer-events: none; }
.rx-stat-n.is-typing .rx-stat-cur, .rx-stat-n.is-done .rx-stat-cur { animation: stat-blink 1.1s steps(1, end) infinite; opacity: 1; }
@keyframes stat-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rx-stat-cur { display: none; } }

/* 2 ── review line ─────────────────────────────────────────────────────────── */
.rx-review { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: var(--s4) var(--gutter); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); }
.rx-review a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: .1rem; transition: border-color 500ms ease; }
.rx-review a:hover, .rx-review a:focus-visible { border-bottom-color: var(--fg); }

/* 3 ── All-Access accents ──────────────────────────────────────────────────── */
.rx-aa-v--last::before, .rx-aa-v--last::after { pointer-events: none; }
.rx-aa-v--last[data-aaa] { --aa-line: color-mix(in srgb, var(--aa-ink) 26%, transparent); --aa-line2: color-mix(in srgb, var(--aa-ink) 55%, transparent); --aa-dur: 900ms; --aa-ease: cubic-bezier(.22, 1, .36, 1); }

/* ticks (default): a hairline scale across the top with a needle in the plugin colour */
.rx-aa-v--last[data-aaa="ticks"]::before { content: ""; position: absolute; left: var(--s4); right: var(--s4); top: var(--s3); height: 1.4rem; background:
    repeating-linear-gradient(90deg, var(--aa-line2) 0 1px, transparent 1px 5rem) bottom / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, var(--aa-line) 0 1px, transparent 1px 1rem) bottom / 100% 50% no-repeat,
    linear-gradient(var(--aa-line), var(--aa-line)) bottom / 100% 1px no-repeat; }
.rx-aa-v--last[data-aaa="ticks"]::after { content: ""; position: absolute; top: var(--s3); left: calc(var(--s4) + (100% - 2 * var(--s4)) * .18); width: 2px; height: 1.9rem; background: var(--p, var(--aa-ink)); transition: left var(--aa-dur) var(--aa-ease); }
@media (min-width: 64em) { .rx-aa-v--last[data-aaa="ticks"]::before { left: var(--s6); right: var(--s6); } .rx-aa-v--last[data-aaa="ticks"]::after { left: calc(var(--s6) + (100% - 2 * var(--s6)) * .18); } }
@media (hover: hover) and (min-width: 64em) { .rx-aa-v--last[data-aaa="ticks"].is-open::after { left: calc(var(--s6) + (100% - 2 * var(--s6)) * .82); } }

/* plate: a bezelled nameplate: inset hairline frame, four screws, engraved legend */
.rx-aa-v--last[data-aaa="plate"]::before { content: "TAYWAV \00B7 ALL-ACCESS"; position: absolute; inset: var(--s2); border: 1px solid var(--aa-line); border-radius: calc(var(--r-tray) - var(--s2)); padding: var(--s2) var(--s3) 0 0; text-align: right; font-family: var(--font-data); font-size: 1rem; letter-spacing: .3em; color: var(--aa-line2); background:
    radial-gradient(circle at 1.2rem 1.2rem, var(--aa-line2) 0 .22rem, transparent .28rem),
    radial-gradient(circle at calc(100% - 1.2rem) 1.2rem, var(--aa-line2) 0 .22rem, transparent .28rem),
    radial-gradient(circle at 1.2rem calc(100% - 1.2rem), var(--aa-line2) 0 .22rem, transparent .28rem),
    radial-gradient(circle at calc(100% - 1.2rem) calc(100% - 1.2rem), var(--aa-line2) 0 .22rem, transparent .28rem); }
.rx-aa-v--last[data-aaa="plate"]::after { content: ""; position: absolute; top: var(--s5); left: var(--s5); width: .8rem; height: .8rem; border-radius: 50%; background: var(--p, var(--aa-ink)); opacity: .35; box-shadow: 0 0 0 .2rem var(--aa-line); transition: opacity var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease); }
.rx-aa-v--last[data-aaa="plate"].is-open::after { opacity: 1; }

/* led: a row of segments that fill left to right when the block is hovered / focused */
.rx-aa-v--last[data-aaa="led"]::before, .rx-aa-v--last[data-aaa="led"]::after { content: ""; position: absolute; left: var(--s4); top: var(--s4); width: min(24rem, 48%); height: .6rem; -webkit-mask: repeating-linear-gradient(90deg, currentColor 0 1.6rem, transparent 1.6rem 2.2rem); mask: repeating-linear-gradient(90deg, currentColor 0 1.6rem, transparent 1.6rem 2.2rem); }
.rx-aa-v--last[data-aaa="led"]::before { background: var(--aa-line); }
.rx-aa-v--last[data-aaa="led"]::after { background: var(--p, var(--aa-ink)); clip-path: inset(0 70% 0 0); transition: clip-path var(--aa-dur) var(--aa-ease); }
.rx-aa-v--last[data-aaa="led"].is-open::after { clip-path: inset(0 0 0 0); }
@media (min-width: 64em) { .rx-aa-v--last[data-aaa="led"]::before, .rx-aa-v--last[data-aaa="led"]::after { left: var(--s6); top: var(--s5); } }

/* rail: rack ears down the left edge: slotted holes, one status LED that lights on open */
.rx-aa-v--last[data-aaa="rail"] { padding-left: calc(var(--s4) + 3.4rem); }
.rx-aa-v--last[data-aaa="rail"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.6rem; border-right: 1px solid var(--aa-line); background:
    radial-gradient(ellipse .6rem .9rem at 50% 50%, transparent 0 60%, var(--aa-line) 65% 100%) 0 0 / 100% 4.8rem repeat-y,
    linear-gradient(90deg, color-mix(in srgb, var(--aa-ink) 9%, transparent), transparent); }
.rx-aa-v--last[data-aaa="rail"]::after { content: ""; position: absolute; left: .9rem; top: var(--s3); width: .8rem; height: .8rem; border-radius: 50%; background: var(--p, var(--aa-ink)); opacity: .4; transition: opacity var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease); }
.rx-aa-v--last[data-aaa="rail"].is-open::after { opacity: 1; }
@media (min-width: 64em) { .rx-aa-v--last[data-aaa="rail"] { padding-left: calc(var(--s6) + 3.4rem); } }

/* combo (default): plate + rack rail, kept simple: a hairline bezel around the card and a slim rack ear down the
   left edge with an engraved nameplate running up it and a screw at the top. One status dot lights on open. */
.rx-aa-v--last[data-aaa="combo"] { padding-left: calc(var(--s4) + 2.6rem); box-shadow: inset 0 0 0 1px var(--aa-line); }
.rx-aa-v--last[data-aaa="combo"]::before { content: "TAYWAV \00B7 ALL-ACCESS"; position: absolute; left: 0; top: 0; bottom: 0; width: 2rem; border-right: 1px solid var(--aa-line); writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-end; padding: var(--s3) 0; font-family: var(--font-data); font-size: .9rem; letter-spacing: .3em; color: var(--aa-line2); background:
    radial-gradient(circle at 50% 1.2rem, var(--aa-line) 0 .22rem, transparent .26rem); }
.rx-aa-v--last[data-aaa="combo"]::after { content: ""; position: absolute; left: .6rem; bottom: var(--s5); width: .8rem; height: .8rem; border-radius: 50%; background: var(--p, var(--aa-ink)); opacity: .35; transition: opacity var(--aa-dur) var(--aa-ease); }
.rx-aa-v--last[data-aaa="combo"].is-open::after { opacity: 1; }
@media (min-width: 64em) { .rx-aa-v--last[data-aaa="combo"] { padding-left: calc(var(--s6) + 2.6rem); } }
@media (prefers-reduced-motion: reduce) { .rx-aa-v--last::before, .rx-aa-v--last::after { transition: none !important; } }

/* 6 ── tighter proof section: a compact number row, less padding, media takes the height ───────────── */
.rx-proof .rx-proof-body { padding: var(--s4) var(--gutter) var(--s4); }
.rx-proof .rx-stat { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: var(--s3); row-gap: 0; line-height: .9; }
.rx-proof .rx-stat-n { font-size: clamp(7.2rem, 18vw, 13rem); line-height: .85; }
.rx-proof .rx-stat-w { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.rx-proof .rx-stat-sub { margin: var(--s1) auto var(--s3); }
.rx-proof .rl-host { --rl-w: min(52vw, 22rem); }
.rx-proof .rl-stage { padding: var(--s3) 0 var(--s2); }
@media (min-width: 48em) {
  .rx-proof .rx-proof-body { padding: var(--s5) var(--gutter) var(--s5); }
  .rx-proof .rl-host { --rl-w: 25rem; }
}