/* The search landing pages (31.10.2026, on the one system in r.css / DESIGN.md): /text-to-speech, /read-pdf-aloud,
   /read-emails-aloud, /read-websites-aloud, /speechify-alternative. Only these five pages load this file.
   Sizes, colours, radii, section spacing, heads, buttons, chips, frames and questions all come from r.css
   (.r-top .r-sec .r-hd .r-d .r-h .r-lead .r-btn .r-os .r-chips .r-frame .r-q .o-block). What is left here is only what
   these pages have and no other page has: the reader in the first screen, the three step pictures, the hairline rows,
   the Mac steps, Free/Pro, and the comparison table. Every value is a token. Prefix xread-. */

/* links inside running text: ink, a quiet underline */
main .xread a:not(.r-a):not(.r-btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:.18em;text-decoration-thickness:1px}
main .xread a:not(.r-a):not(.r-btn):hover{text-decoration-color:var(--ink)}
main .xread b{font-weight:500;color:var(--ink);white-space:nowrap} /* a key chord or a setting name never breaks */
.xread-nw{white-space:nowrap}

/* the first screen: centred head, then the reader right under it (rule 5: the product in the first screen) */
.xread-top .r-hd{max-width:var(--max)}
.xread-top .r-lead{max-width:36ch}
.xread-stage{max-width:var(--mid);margin-left:auto;margin-right:auto}
.xread-rd .rd-tabs{margin:0 0 12px}                       /* the chips sit 12 px above the frame they switch */
.xread-rd .rd-desk{background-color:var(--sand);background-image:linear-gradient(rgba(21,21,21,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,21,.055) 1px,transparent 1px);background-size:26px 26px;box-shadow:var(--ring);border-radius:var(--r-frame);padding:clamp(28px,4vw,56px) clamp(16px,5vw,72px) clamp(96px,8vw,112px)}
.xread-rd .rd-win{box-shadow:var(--sh-win);border-radius:var(--r-win)}
.xread-rd .rd-bar{font-size:var(--fs-small)}
.xread-rd .rd-pill{height:48px;font-size:var(--fs-small)}
.xread-rd .rd-pill .st .keys kbd{font-size:var(--fs-small);padding:2px 5px}
/* the chips carry the home demo's line icons (a CSS mask, so reader.js keeps building the buttons) */
.xread-rd .rd-tabs button::before{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/20px 20px no-repeat;mask:var(--ic) center/20px 20px no-repeat}
.xread-rd .rd-tabs[data-ic] button:nth-child(1){--ic:var(--ic1)}.xread-rd .rd-tabs[data-ic] button:nth-child(2){--ic:var(--ic2)}
.xread-rd .rd-tabs[data-ic] button:nth-child(3){--ic:var(--ic3)}.xread-rd .rd-tabs[data-ic] button:nth-child(4){--ic:var(--ic4)}
.xread-rd .rd-tabs{
  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H10l-4 3.5v-3.5H4z'/%3E%3Cpath d='M8 10.5h.01M12 10.5h.01M16 10.5h.01'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M4 7.5l8 6 8-6'/%3E%3C/svg%3E");
  --i-pdf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 15.5h6'/%3E%3C/svg%3E");
  --i-web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.6 2.6 2.6 14.4 0 17M12 3.5c-2.6 2.6-2.6 14.4 0 17'/%3E%3C/svg%3E");
  --ic1:var(--i-mail);--ic2:var(--i-pdf);--ic3:var(--i-chat);--ic4:var(--i-web)}

/* three steps: columns with hairlines between, each a small drawn picture (no words in it) */
.xread-steps{list-style:none;margin-bottom:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.xread-steps>li{padding:8px clamp(16px,2.2vw,32px) 4px;display:flex;flex-direction:column;align-items:center}
.xread-steps>li+li{border-left:1px solid var(--line)}
.xread-pic{height:120px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.xread-st-t{display:block}
.xread-st-l{display:block;margin:12px 0 0;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);max-width:24ch;text-wrap:balance}
.xread-lines{display:flex;flex-direction:column;gap:11px;width:200px;padding:20px 22px;background:var(--sheet);border-radius:var(--r-btn);box-shadow:var(--sh-win)}
.xread-lines i{display:block;height:7px;border-radius:4px;background:var(--wash-2)}
.xread-lines i:nth-child(2){width:88%}.xread-lines i:nth-child(3){width:94%}.xread-lines i:nth-child(4){width:62%}
.xread-lines i.on{background:var(--hl-2);box-shadow:0 0 0 4px var(--hl)}
.xread-keys{display:flex;align-items:center;gap:22px;white-space:nowrap}
.xread-keys::before{content:"+";order:1;font:500 18px/1 var(--sans);color:var(--ink-3)}
.xread-keys .gv-key:last-child{order:2}
.xread-key{display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:58px;padding:0 16px;box-sizing:border-box;border-radius:var(--r-btn);background:var(--sheet);border:1px solid var(--line-2);border-bottom-width:3px;font:500 18px/1 var(--sans);color:var(--ink)}
.xread-key.sp{min-width:132px}
.xread-mini{display:inline-flex;align-items:center;justify-content:center;width:120px;height:46px;border-radius:999px;background:var(--ink)}
.xread-mini .bars{display:flex;gap:4px;align-items:center;height:22px}
.xread-mini .bars i{width:4px;height:6px;border-radius:2px;background:var(--paper);animation:xreadBar 1.1s ease-in-out infinite}
.xread-mini .bars i:nth-child(2){animation-delay:-.35s;animation-duration:.9s}.xread-mini .bars i:nth-child(3){animation-delay:-.7s;animation-duration:1.2s}
.xread-mini .bars i:nth-child(4){animation-delay:-.15s;animation-duration:.85s}.xread-mini .bars i:nth-child(5){animation-delay:-.55s;animation-duration:1.05s}
@keyframes xreadBar{0%,100%{height:6px}50%{height:20px}}
.xread-works{margin:var(--in) auto 0;max-width:none;text-align:center}

/* hairline rows: a serif name, the sentence beside it */
.xread-rows{list-style:none;margin-bottom:0;padding:0;border-bottom:1px solid var(--line)}
.xread-rows>li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:8px 40px;padding:24px 0;border-top:1px solid var(--line)}
.xread-rl{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);padding-top:3px;text-wrap:pretty}
.xread-src{margin:24px 0 0;text-align:center}
.xread-src .dot{margin:0 .35em;color:var(--ink-3)}

/* the split: the drawing on grid paper left, head and rows right (one drawing in the section) */
.xread-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,88px);align-items:center}
.xread-split .r-hd+*{margin-top:32px}
.xread-split .xread-rows>li{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:6px 28px;padding:20px 0}
.xread-paper{margin:0;min-height:400px;display:flex;align-items:center;justify-content:center}
.xread-paper img{width:min(82%,340px);height:auto}

/* Mac steps: a number in a hairline ring, the step beside it */
.xread-num{list-style:none;margin-bottom:0;padding:0;border-bottom:1px solid var(--line)}
.xread-num>li{display:flex;align-items:baseline;gap:18px;padding:20px 0;border-top:1px solid var(--line);font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}
.xread-num .n{flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:inline-flex;align-items:center;justify-content:center;font:500 var(--fs-small)/1 var(--sans);color:var(--ink);transform:translateY(-1px)}

/* Free and Pro: two halves with a hairline between */
.xread-two{list-style:none;margin-left:auto;margin-right:auto;margin-bottom:0;padding:0;display:grid;grid-template-columns:1fr 1fr;max-width:var(--text);text-align:center}
.xread-two>li{display:flex;flex-direction:column;align-items:center;padding:6px 28px}
.xread-two>li+li{border-left:1px solid var(--line)}
.xread-two .xread-rl{margin-top:12px;max-width:22ch;text-wrap:balance}
.xread-mark{width:110px;height:56px;margin-bottom:16px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xread-mark .acc{fill:var(--acc-fill);stroke:var(--ink);stroke-width:1.2}
.xread-two+.r-acts{justify-content:center}

/* the comparison: a quiet hairline table; LoudFlow's column on the demo's sand */
.xread-t{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}
.xread-t th,.xread-t td{padding:22px 20px;vertical-align:top;border-bottom:1px solid var(--line);font:400 var(--fs-body)/1.5 var(--sans);color:var(--ink-2)}
.xread-t thead th{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:-.012em;color:var(--ink);padding-top:26px;padding-bottom:18px;border-bottom-color:var(--line-2)}
.xread-t thead th:first-child{width:22%}
.xread-t tbody th{font:500 var(--fs-t)/1.35 var(--sans);color:var(--ink);padding-left:0}
.xread-t .al-m{display:block;margin-top:6px;font:400 var(--fs-small)/1.4 var(--sans);color:var(--ink-3)}
.xread-t .al-us{background:var(--hl);color:var(--ink)}
.xread-t thead .al-us{border-radius:var(--r-sm) var(--r-sm) 0 0}
.xread-t .al-no{color:var(--ink-3)}

/* questions: centred head, the system's hairline rows in the text column */
.xread-qs .r-q summary h3{font:inherit;margin:0}

main .xread a:focus-visible,main .xread summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

@media (max-width:900px){
  .xread-split{grid-template-columns:1fr;gap:0}
  .xread-paper.r-frame{min-height:0;padding:0 0 24px;background:none;box-shadow:none}
  .xread-paper img{width:var(--art)}
  .xread-split .r-hd{text-align:center;margin-left:auto;margin-right:auto}
  .xread-split .r-lead{margin-left:auto;margin-right:auto}
}
@media (max-width:820px){
  .xread-steps{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .xread-steps>li{padding:36px 0}
  .xread-steps>li:first-child{padding-top:0}
  .xread-steps>li+li{border-left:0;border-top:1px solid var(--line)}
  .xread-pic{height:auto;min-height:90px}
  .xread-rows>li,.xread-split .xread-rows>li{grid-template-columns:1fr;gap:6px}
  /* the table becomes one block per line, each answer under its company's name */
  .xread-t,.xread-t tbody,.xread-t tr,.xread-t th,.xread-t td{display:block;width:auto}
  .xread-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .xread-t tr{padding:24px 0 16px;border-top:1px solid var(--line)}
  .xread-t tbody tr:last-child{border-bottom:1px solid var(--line)}
  .xread-t tbody th{padding:0 0 12px;border:0}
  .xread-t td{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 16px;padding:12px 14px;border:0}
  .xread-t td::before{content:attr(data-p);font:500 var(--fs-body)/1.5 var(--sans);color:var(--ink)}
  .xread-t td.al-us{border-radius:var(--r-sm)}
}
@media (max-width:520px){
  .xread-two>li{padding:6px 12px}
  .xread-key{min-width:58px;height:52px}.xread-key.sp{min-width:110px}
  .xread-keys{gap:14px}
  .xread-t td{grid-template-columns:1fr;gap:2px}
  .xread-rd .rd-desk{padding:16px 12px 88px}
}
@media (prefers-reduced-motion:reduce){.xread-mini .bars i{animation:none}.xread-mini .bars i:nth-child(odd){height:14px}}
/* text-to-speech (01.11.): the built-in tools, one closed section after LoudFlow's own */
.xread-os{display:block;margin:40px 0 4px}
.xread-os:first-of-type{margin-top:48px}
.xread-then{margin:40px auto 0;text-align:center;max-width:34em;color:var(--ink)}

/* 01.11. Part B4: /read-pdf-aloud opens with one short "how" line per PDF app, before LoudFlow's own line.
   Reading text: Sans, 18 px and up, ink-2, centred like the head; the app name in ink. */
.xpdf-how{list-style:none;margin:18px auto 0;padding:0;max-width:40ch;font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2)}
.xpdf-how li+li{margin-top:6px}
main .xread .xpdf-how b{font-weight:500;color:var(--ink);white-space:normal}
.xpdf-how+.r-lead{margin-top:14px}