/* /speechify-alternative only (01.11.2026 late, minimal round; STYLE-OPENNOTE-WISPR.md §9 "Comparison page").
   Hero stack, then one true example in a sand panel: "You select" -> "You hear", side by side at --mid (Ploy's
   before/after pair, flat), stacked on a phone. The comparison table sits in a plain sand box (Notion 1a7f4a2b), with
   no highlighted column. Everything else comes from r.css and t-read.css. Every value is a token. Prefix xsp-. */

.xsp-h1{max-width:11em;margin-left:auto;margin-right:auto}
.xsp-upd{margin:16px 0 0}

/* the one example, directly under the hero stack */
.xsp-proof{margin:var(--in) auto 0;max-width:var(--mid);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:20px;padding:clamp(28px,4vw,48px) clamp(16px,3.5vw,44px);box-sizing:border-box}
.xsp-win{width:100%;height:100%;padding:18px 22px 22px;box-sizing:border-box}
.xsp-bar{display:flex;align-items:center;gap:10px;font:500 var(--fs-small)/1.2 var(--sans);color:var(--ink-3);margin:0 0 12px}
.xsp-raw,.xsp-said{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--ink);overflow-wrap:break-word}
.xsp-sel{background:var(--hl);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 0;border-radius:3px}
.xsp-arrow{width:40px;height:24px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xsp-hear .xsp-bar{color:var(--ink)}
.xsp-said{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:-.008em}
/* the "You hear" mark: the app pill's four bars, still */
.xsp-bars{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:34px;height:22px;border-radius:999px;background:var(--ink)}
.xsp-bars i{display:block;width:3px;border-radius:2px;background:var(--paper);height:6px}
.xsp-bars i:nth-child(2){height:11px}.xsp-bars i:nth-child(3){height:8px}

/* the table: a plain sand box at about 720, no coloured column */
.xsp-tbox{max-width:var(--text);margin:var(--in) auto 0;padding:8px clamp(16px,3vw,36px)}
.xsp-t .al-us{background:none;color:var(--ink)}
.xsp-t tbody tr:last-child th,.xsp-t tbody tr:last-child td{border-bottom:0}
.xsp-t thead th:first-child{width:32%}
.xsp-tbox+.xread-src{text-align:center}

.xsp-more{margin:24px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px}.xsp-more .dot{display:none}

@media (max-width:820px){
  .xsp-proof{grid-template-columns:1fr;justify-items:center;gap:14px}
  .xsp-arrow{transform:rotate(90deg)}
  .xread-t.xsp-t tbody tr:first-child{border-top:0}.xread-t.xsp-t tbody tr:last-child{border-bottom:0}
  .xsp-t td{grid-template-columns:minmax(0,6.5em) minmax(0,1fr)}
}
@media (max-width:520px){
  .xsp-t td{grid-template-columns:1fr}
}