/* pg.css — one rhythm for every page under the home (round 38, 05.11.2026). Loaded last, after r.css and the page's t-*.css.
   Lauro, 05.11. morning, with seven Wispr Flow pages (accessibility, lawyers, creators, hardware, blog, vibe coding, apps):
   "Ich möchte diesen Stil machen … Es hat keinen Rhythmus, wie die Tabs aufgebaut sind. Ich möchte überall ein bisschen
   denselben Stil bauen." Before this, every page was the same thin centred column of small things.
   THE STRUCTURE is Wispr's, measured on wisprflow.ai/accessibility and /lawyers at 1440 × 900 on 05.11.: content 1240 wide
   (100 px each side), h1 96 px EB Garamond on .95 with -.05em, section h2 64 px, lead 20 px, a hero that fills the first
   screen with ONE picture beside or under it, cards 298–320 wide with radius 32, a 4 px soft edge and 40 px inside.
   EVERYTHING ELSE is ours: paper, ink, sand, the ink button, our ink drawings, Figtree never under 17 px in a card
   (Wispr: 13–14), no lavender, no colour on letters, no capitals, no wave across the page, no dark band.
   A page is made of five blocks, in this order:
     .pg-hero   split (text left, one drawing or frame right) or .c (centred, one wide frame under it)
     .pg-cards  a row of cards under a centred head (steps, apps, ways to reach us)
     .pg-row    a picture on one side, a head and one line on the other
     .pg-faq    head left, questions right — the same two columns as the legal pages
     .r-end     the closing (r.css), its head in the same serif
   Long reading pages (.pg-doc) keep the legal pages' shape: contents left and sticky, the text right. */

@font-face{font-family:"EB Garamond";font-weight:400 800;font-display:swap;src:url(/fonts/EBGaramond-Variable.woff2) format("woff2")}
:root{
  --pg-w:1240px;--pg-serif:"EB Garamond",Georgia,serif;
  --pg-d:clamp(50px,6.67vw,96px);--pg-h:clamp(38px,4.45vw,64px);--pg-h3:clamp(30px,3vw,44px);
  --pg-edge:#ecebe2;--pg-r:28px;--pg-sec:clamp(112px,11vw,168px);--pg-in:clamp(48px,5vw,72px)
}
.pg-w{width:min(var(--pg-w),calc(100% - 2 * var(--g)));margin:0 auto}
main :is(.r-d,.r-h,.r-h3,.o-h){font-family:var(--pg-serif);letter-spacing:-.03em}
main .r-end .r-h{font-size:var(--pg-h);line-height:.98}

/* ── hero ─────────────────────────────────────────────────────────────── */
.pg-hero{padding-top:clamp(124px,11vw,164px)}
.pg-label{margin:0 0 22px;font:500 18px/1.3 var(--sans);color:var(--ink-2)}
.pg-d{margin:0;font:400 var(--pg-d)/.95 var(--pg-serif);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.pg-lead{margin:26px 0 0;max-width:30em;font:400 20px/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
.pg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:34px}
.pg-os{margin:14px 0 0;font:400 16px/1.4 var(--sans);color:var(--ink-3)}
.pg-hero.split>.pg-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);align-items:center;column-gap:clamp(40px,6vw,96px);min-height:min(600px,calc(100vh - 220px))}
.pg-art{display:block;width:100%;max-width:480px;height:auto;max-height:520px;margin:0 auto;object-fit:contain}
.pg-hero.c{text-align:center}
.pg-hero.c .pg-d{max-width:12em;margin:0 auto}
.pg-hero.c .pg-lead{margin-left:auto;margin-right:auto;max-width:34em}
.pg-hero.c .pg-acts{justify-content:center}
.pg-stage{margin-top:clamp(56px,6vw,80px)}

/* ── frames: the sand stage our product sits in (r.css .r-frame), rounder ── */
.pg-frame{position:relative;border-radius:var(--pg-r);background:var(--sand);box-shadow:var(--ring);overflow:hidden}

/* ── sections and their centred head ──────────────────────────────────── */
.pg-sec{padding-top:var(--pg-sec)}
.pg-hd{max-width:880px;margin:0 auto var(--pg-in);text-align:center}
.pg-h{margin:0;font:400 var(--pg-h)/.98 var(--pg-serif);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.pg-hd>p{margin:20px auto 0;max-width:28em;font:400 20px/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
.pg-more{display:flex;justify-content:center;gap:28px;margin-top:36px}

/* ── cards ────────────────────────────────────────────────────────────── */
.pg-cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.pg-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:248px;padding:36px;border-radius:var(--pg-r);box-shadow:inset 0 0 0 3px var(--pg-edge);color:var(--ink);text-decoration:none;box-sizing:border-box}
.pg-card>:last-child{margin-bottom:0}
.pg-card .pg-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:auto}
.pg-card .pg-ic img{width:56px;height:56px;object-fit:contain}
.pg-card .pg-ic.logo img{width:40px;height:40px}
.pg-num{margin-bottom:auto;font:400 64px/.9 var(--pg-serif);letter-spacing:-.03em;color:var(--ink)}
.pg-card h3{margin:28px 0 0;font:500 21px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.pg-card p{margin:8px 0 0;font:400 17px/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
.pg-card kbd{font:500 15px/1 var(--sans);padding:4px 8px;border-radius:6px;background:var(--sheet);box-shadow:var(--ring);color:var(--ink)}
.pg-card.app{min-height:176px}
.pg-card.app .pg-ic{justify-content:flex-start}
.pg-card.app .pg-ic img{opacity:.85}
.pg-card.t{min-height:0;justify-content:flex-start}
.pg-card.t h3{margin-top:0}
a.pg-card{transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
a.pg-card::after{content:"";position:absolute;top:34px;right:34px;width:16px;height:16px;background:currentColor;opacity:.35;transition:opacity .2s,transform .25s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5'/%3E%3C/svg%3E") center/contain no-repeat}
a.pg-card:hover{background:rgba(21,21,21,.02);box-shadow:inset 0 0 0 3px #e2e0d5}
a.pg-card:hover::after{opacity:.8;transform:translate(2px,-2px)}
a.pg-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* small real pictures at the top of a step card: a selected line, the two keys, the pill reading */
.pg-mini{display:flex;align-items:center;min-height:64px;margin:0 0 auto}
.pg-sel{font:400 18px/1.4 var(--sans);color:var(--ink)}
.pg-sel mark{padding:3px 4px;border-radius:4px;background:var(--hl);color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pg-keys{gap:8px}
.pg-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:48px;padding:0 14px;border-radius:12px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-2),0 2px 0 var(--line-2);font:500 18px/1 var(--sans);color:var(--ink)}
.pg-keys kbd.w{min-width:120px}
.pg-bars{display:inline-flex;align-items:center;gap:4px;height:48px;padding:0 22px;border-radius:999px;background:var(--ink)}
.pg-bars i{width:3px;height:14px;border-radius:2px;background:var(--paper)}
.pg-bars i:nth-child(2){height:24px}.pg-bars i:nth-child(3){height:18px}.pg-bars i:nth-child(4){height:26px}.pg-bars i:nth-child(5){height:12px}

/* thinks along, in a frame: what is on the screen (grey, small) over what you hear (ink, full size) */
.pg-tk{padding:clamp(28px,4vw,48px)}
.pg-tk ul{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.pg-tk li{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:16px;background:var(--sheet);box-shadow:var(--ring)}
.pg-tk .in{font:400 16px/1.4 var(--sans);color:var(--ink-3);overflow-wrap:anywhere}
.pg-tk .out{font:500 20px/1.35 var(--sans);color:var(--ink)}
.pg-names{padding:clamp(28px,4vw,48px)}
.pg-names .xll-names{margin:0;font:400 20px/1.8 var(--sans);color:var(--ink)}
.pg-stage-in{padding:0;background:none;box-shadow:none;overflow:visible}
.pg-stage-in .xmade-stage{margin:0}
.pg-src{font-size:16px!important;color:var(--ink-3)!important}
.pg-src a{color:var(--ink-2)}

/* page pieces that sit in a frame: the voice list (Voices), the key caps (Shortcuts), the 74 names (Languages),
   language snippets, numbered steps */
.pg-voices{padding:12px 24px;background:var(--sheet)}
.pg-voices .r-vlist{border-top:0}
.pg-mk .r-win{margin-bottom:auto;max-width:100%;min-width:0;box-sizing:border-box}
.pg-mk .tv3-field{min-width:0;overflow:hidden}
.pg-cards>li{min-width:0}
.pg-hero .xhelp-hk{display:flex;align-items:center;justify-content:center;min-height:clamp(260px,30vw,400px);margin:0;padding:32px}
.pg-hero .xhelp-hk .xhelp-keys kbd{font-size:clamp(20px,1.8vw,26px)}
.pg-cards .pg-keys{flex-wrap:wrap;row-gap:8px}
.pg-cards .pg-keys kbd{min-width:44px;height:44px;padding:0 12px;font-size:16px}
.pg-cards .pg-keys kbd.w{min-width:88px}
.pg-world .xlanguages-world{margin:0 auto}
.pg-snips{padding:clamp(24px,3vw,40px)}
.pg-snips .xlanguages-rows{margin:0}
.pg-steps{padding:clamp(24px,3vw,40px);background:var(--sheet)}
.pg-steps ol{margin:0}
.pg-note{color:var(--ink-3);font-size:16px}
.pg-hero .xforms-addr{justify-content:flex-start;margin:22px 0 0}
.pg-hero .xforms-mail{font-family:var(--pg-serif);font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em}
.pg-links .pg-card{min-height:168px;padding-right:64px}
.pg-links .pg-card p{margin-top:auto;padding-top:8px}
.pg-note p{margin:0}

/* ── a picture on one side, the head on the other ─────────────────────── */
.pg-row>.pg-w{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;column-gap:clamp(40px,7vw,112px)}
.pg-row.flip .pg-pic{order:2}
.pg-row .pg-h{text-align:left}
.pg-row .pg-txt>p{margin:20px 0 0;max-width:26em;font:400 20px/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
.pg-row .pg-txt .pg-acts{margin-top:28px}

/* ── questions: head left, answers right (the legal pages' two columns) ── */
.pg-faq>.pg-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:clamp(40px,7vw,112px);align-items:start}
.pg-faq .pg-h{text-align:left;font-size:var(--pg-h3);position:sticky;top:120px}
.pg-faq .pg-h+.r-a,.pg-faq .pg-side .r-a{display:inline-block;margin-top:20px}
.pg-faq .pg-side{position:sticky;top:120px}
.pg-faq .pg-side .pg-h{position:static}
.pg-faq .r-q:first-of-type{border-top:1px solid var(--line)}
.pg-faq .r-q summary{padding:24px 0;font:500 20px/1.4 var(--sans)}
.pg-faq .r-q .a{font-size:18px;line-height:1.6}

/* ── long reading pages: contents left (sticky), text right ───────────── */
.pg-door{max-width:46rem;margin:0 auto;padding:clamp(124px,11vw,164px) var(--g) 0;text-align:center}
.pg-door .pg-d{max-width:none}
.pg-door .pg-lead{margin-left:auto;margin-right:auto}
.pg-doc{display:grid;grid-template-columns:minmax(200px,264px) minmax(0,46rem);justify-content:space-between;column-gap:clamp(48px,6vw,96px);width:min(1120px,calc(100% - 2 * var(--g)));margin:clamp(72px,8vw,112px) auto 0;padding-top:clamp(56px,6vw,80px);border-top:1px solid var(--line)}
.pg-side>nav{position:sticky;top:104px}
.pg-toc{position:relative;max-height:calc(100vh - 128px);overflow:auto;scrollbar-width:none;list-style:none;margin:0 0 0 -12px;padding:0}
.pg-toc::-webkit-scrollbar{display:none}
.pg-toc a{display:grid;grid-template-columns:28px 1fr;padding:7px 12px;border-radius:10px;font:400 16px/1.35 var(--sans);color:var(--ink-2);text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease)}
.pg-toc a:hover{color:var(--ink);background:var(--wash)}
.pg-toc a[aria-current]{color:var(--ink);background:var(--hl)}
.pg-n{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.pg-body{min-width:0}
.pg-body>section{scroll-margin-top:104px}
.pg-body>section+section{margin-top:clamp(72px,7vw,104px)}
.pg-body h2{margin:0;font:400 clamp(30px,2.8vw,40px)/1.05 var(--pg-serif);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.pg-body h2 .pg-n{margin-right:.35em}
.pg-body>section>p{margin:16px 0 0;font:400 18px/1.65 var(--sans);color:rgba(21,21,21,.84)}

.pg-body>section.xhelp-sec{padding:0}
.pg-glead{margin:14px 0 28px;font:400 20px/1.45 var(--sans);color:var(--ink-2)}
.pg-body .xhelp-b{max-width:none;margin:0}
.pg-jump{display:none}
/* Questions: the groups left, every question right; the search sits in the door */
.pg-find{max-width:560px;margin:34px auto 0;box-shadow:0 0 0 1.5px var(--line-2)}
.pg-qs .pg-toc a{grid-template-columns:1fr}
.pg-qs .pg-toc .pg-n{display:none}
.pg-body .r-q-set{scroll-margin-top:104px}
.pg-body .r-q-set+.r-q-set{margin-top:clamp(64px,6vw,88px)}
.pg-body .r-q-set>h2{margin:0 0 18px}
.pg-body .r-q summary{font:500 20px/1.4 var(--sans);padding:22px 0}
.pg-body .r-q .a{font-size:18px;line-height:1.6}

/* ── phones and narrow windows ────────────────────────────────────────── */
@media (max-width:960px){
  .pg-hero.split>.pg-w{grid-template-columns:1fr;min-height:0;row-gap:48px}
  .pg-art{max-width:340px;max-height:360px}
  .pg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-row>.pg-w,.pg-faq>.pg-w{grid-template-columns:1fr;row-gap:40px}
  .pg-row.flip .pg-pic{order:0}
  .pg-row .pg-txt{order:-1}
  .pg-faq .pg-h,.pg-faq .pg-side{position:static}
  .pg-doc{display:block;margin-top:56px;padding-top:0}
  .pg-doc .pg-side{display:none}
  .pg-jump{display:block;margin:0 0 52px;border-bottom:1px solid var(--line)}
  .pg-jump summary{display:flex;align-items:center;gap:10px;padding:18px 2px;list-style:none;cursor:pointer;font:500 18px/1.3 var(--sans);color:var(--ink)}
  .pg-jump summary::-webkit-details-marker{display:none}
  .pg-cnt{color:var(--ink-3);font-weight:400}
  .pg-jump summary svg{margin-left:auto;transition:transform .3s var(--ease)}
  .pg-jump[open] summary svg{transform:rotate(180deg)}
  .pg-jump ol{list-style:none;margin:0;padding:0 0 14px}
  .pg-jump a{display:grid;grid-template-columns:30px 1fr;padding:9px 2px;font:400 17px/1.4 var(--sans);color:var(--ink-2);text-decoration:none}
  .pg-qs{margin-top:48px;padding-top:40px}
}
@media (max-width:600px){
  .pg-hero{padding-top:120px}
  .pg-lead,.pg-hd>p,.pg-row .pg-txt>p{font-size:19px}
  .pg-cards{grid-template-columns:1fr;gap:12px}
  .pg-card{min-height:0;padding:28px}
  .pg-card h3{margin-top:22px}
  .pg-num{font-size:52px}
  .pg-acts{gap:12px}
  .pg-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-apps .pg-card{min-height:0;padding:22px}
  .pg-apps .pg-card h3{margin-top:14px;font-size:18px}
  .pg-links .pg-card{min-height:0}
  .pg-links .pg-card p{margin-top:8px;padding-top:0}
}
@media (prefers-reduced-motion:reduce){a.pg-card,a.pg-card::after,.pg-toc a{transition:none}}

/* What's new: the date left, the change right, the same widths as the reading pages; no grey box on the newest */
.pg-logw{width:min(1120px,calc(100% - 2 * var(--g)));margin:clamp(72px,8vw,112px) auto 0}
.pg-log{max-width:none;margin:0;padding:0;list-style:none}
.pg-log .wn-row,.pg-log .wn-row:first-child{display:grid;grid-template-columns:minmax(200px,264px) minmax(0,46rem);justify-content:space-between;column-gap:clamp(48px,6vw,96px);margin:0;padding:clamp(32px,3vw,44px) 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.pg-log .wn-row:last-child{border-bottom:1px solid var(--line)}
@media (min-width:761px){.pg-log .wn-row,.pg-log .wn-row:first-child{grid-template-rows:auto 1fr;grid-template-areas:"date title" "date text";align-items:start}.pg-log .wn-date{flex-direction:column;align-items:flex-start;gap:6px;margin:8px 0 0}.pg-log .wn-dot{display:none}}
.pg-log .wn-date{grid-area:date;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;font:400 16px/1.4 var(--sans);color:var(--ink-3)}
.pg-log .wn-t{grid-area:title;margin:0;font-family:var(--pg-serif);font-size:clamp(28px,2.6vw,36px);letter-spacing:-.025em}
.pg-log .wn-x{grid-area:text;margin-top:12px}
.pg-log .wn-x p{margin:0;font-size:18px;line-height:1.6}
@media (max-width:760px){.pg-log .wn-row,.pg-log .wn-row:first-child{grid-template-columns:1fr}}

/* About: a small drawing over the title, like a letter's letterhead */
.pg-about-art{display:block;width:clamp(220px,22vw,320px);height:auto;margin:0 auto 36px}
.pg-names .tv3-names li{font-size:20px}

/* Round 38b (05.11., his "cleaner, better, more minimal"): one drawing per page. Where the hero already has one, the
   closing keeps only its head and button. */
main:has(.pg-art) .r-end .o-block>img{display:none}
main:has(.pg-art) .r-end{padding-top:var(--pg-sec)}

/* Download (05.11. makeover): the same scale as every other page — 1240 wide, the 96 px serif title, the status as the
   small label, steps as large numbered rows, the moving install picture in the round frame. One screen, nothing else. */
.xdownload-view{padding-top:clamp(124px,11vw,164px)}
.xdownload-view .xdownload-status{font:500 18px/1.3 var(--sans);color:var(--ink-2)}
.xdownload-view .xdownload-d{margin-top:22px;font:400 var(--pg-d)/.95 var(--pg-serif);letter-spacing:-.04em}
.xdownload-view .xdownload-steps .w-n{font:400 34px/1 var(--pg-serif);width:34px;color:var(--ink)}
.xdownload-view .xdownload-steps.w-steps .w-step{font-size:19px;line-height:1.45}
.xdownload-view .xdownload-stage{border-radius:var(--pg-r)}
@media (min-width:960px){
  .xdownload-view{max-width:calc(var(--pg-w) + 2 * var(--g));grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(48px,6vw,96px);min-height:calc(100vh - 40px);align-content:center;padding-bottom:var(--pg-sec)}
  .xdownload-view .xdownload-steps.w-steps{margin-top:40px}
}

/* 05.11. "better-fitting pictures, like the spark": the small line icons in the spark's own style (ink line, one sand
   fill — illus/ic-*.svg are the ln-* set with the mint fill turned to --hl-2) on the cards, speech bubbles over
   "Have questions?", and hero drawings that show what the page is about (a letter for Contact, three listeners for Teams). */
.pg-card .pg-ic.ln{width:48px;height:48px;margin:0 0 22px;justify-content:flex-start}
.pg-card .pg-ic.ln img{width:48px;height:48px;object-fit:contain}
.pg-links .pg-card h3{margin-top:0}
.pg-ask{width:84px!important;height:auto!important}
.pg-art-s{max-width:400px}

/* Pricing (05.11. makeover): the page's own plans stay; the title, cards and the student strip take the system's
   size, radius and soft edge. */
.tp2-plan.r-card{border-radius:var(--pg-r);box-shadow:inset 0 0 0 3px var(--pg-edge);background:transparent}
.tp2-plan.tp2-pro.r-card{box-shadow:inset 0 0 0 2px var(--ink)}
.tp3-card{border-radius:var(--pg-r);background:transparent;box-shadow:inset 0 0 0 3px var(--pg-edge)}
.tp3-h{font-family:var(--pg-serif)!important}
main .r-top .pg-d{font-size:var(--pg-d)}

/* Topic pages (text to speech, PDFs, emails, websites, Mac, alternatives, security; 05.11. makeover): the hero and the
   questions are the system's blocks; the sections between keep their content and take the system's head and spacing. */
.pg-hero.xread-top{padding-bottom:0}
.r-sec.xread,.r-sec.xsec{padding-top:var(--pg-sec)}
.r-sec.xread .r-hd .r-h,.r-sec.xsec .r-h{font-size:var(--pg-h);line-height:.98;letter-spacing:-.03em}
main .r-sec .r-card{border-radius:var(--pg-r);box-shadow:inset 0 0 0 3px var(--pg-edge);background:transparent}
main .r-sec .r-frame{border-radius:var(--pg-r)}
.pg-note a{color:var(--ink-2);text-decoration:underline 1px var(--ink-3);text-underline-offset:4px}
.pg-note a:hover{color:var(--ink)}

/* ── Polish 05.11. (before marketing; no new words, colours or effects — only what was off, made the same) ──────────
   Measured on all 31 pages under the home at 1440, 390 and 320 (headless Electron, computed styles), then looked at.
   1. Titles' serif: inside the pages every --serif (voice names, language names, row names, table heads, the About
      letter, prices) was still Source Serif 4 beside EB Garamond titles. One serif now, as STYLE.md says.
   2. Frames: --r-frame was 20 (and 16 on the ADHD stage) in a system whose frames are 28. */
main{--serif:"EB Garamond","Source Serif 4",Georgia,serif;--r-frame:var(--pg-r)}   /* Source Serif stays behind it for the letters EB Garamond's file does not carry (Cyrillic: "Русский" on Languages) */
main .pg-stage-in .xmade-stage{background-color:var(--sand);border-radius:var(--pg-r);box-shadow:var(--ring)}

/* 3. One button. The Made-for pages had their own: 54 high, #16150f, a drop shadow and a lift on hover; Pricing 48 and
      52 at 16 px; About 52. Every page now has the system's 50 px ink button (STYLE.md). */
main .r-btn{height:var(--btn-h);padding:0 24px;background:var(--ink);box-shadow:none}
main .r-btn:hover{background:#000;transform:none;box-shadow:none}
main .r-btn:active{transform:scale(.98)}
.tp3-go.r-btn,.tp3-btn,.xabout-end .r-btn{height:var(--btn-h);padding:0 24px;background:var(--ink);font:600 17px/1 var(--sans)}
.tp3-go.r-btn:hover,.tp3-btn:hover{background:#000;transform:none}

/* 4. The closing: three rhythms became one. Where head, button and platform line sat straight in .o-block, its old grid
      gap (32) was added to their margins: 64 from head to button and 46 from button to "Windows and Mac" (How it works,
      Voices, Text to speech, the six Made-for pages); elsewhere 32 and 14. Now 32 and 14 everywhere, like the hero's
      button and platform line. The picture keeps its distance to the head (60). The space under it is the system's. */
main .r-end .o-block{row-gap:0}
main .r-end .o-block>img{margin-bottom:60px}
main .r-end .r-acts{margin-top:32px}
main .r-end .r-os{margin-top:14px;font:400 16px/1.45 var(--sans);color:var(--ink-2)}
main .r-sec.r-end{padding-bottom:var(--pg-sec)}

/* 5. What's new on a phone: date, title and text were stacked on top of each other (named grid areas without a
      template under 761 px), and the titles were bold — the browser's h2 weight. */
.pg-log .wn-t{font-weight:400;line-height:1.05}
@media (max-width:760px){.pg-log .wn-date,.pg-log .wn-t,.pg-log .wn-x{grid-area:auto}}

/* 6. Pricing in the same rhythm as the other pages: hero top and lead, section distance, the questions' head and
      question size as in .pg-faq, the closing head at the system's 64. Its own plans and +/− stay. */
main .r-top:has(.pg-label){padding-top:clamp(124px,11vw,164px)}
main .r-top .pg-d+.r-lead{margin-top:26px;font-size:20px}
.tp3-faq,.tp3-end{margin-top:var(--pg-sec)}
.tp3-end{padding-bottom:var(--pg-sec)}
.tp3-faq .tp3-h{font-size:var(--pg-h3)}
.tp3-end .tp3-h{font-size:var(--pg-h)}
.tp3-q h3{font-size:20px}
.tp3-acts{margin-top:32px}
.tp3-end .r-os{color:var(--ink-2)}

/* 7. Small things on phones: the Security note ran as two flex columns ("Every detail … | Privacy Policy"); the
      Download title ("Open LoudFlow", kept on one line) ran to 9 px from the edge at 320. */
p.pg-more{display:block;text-align:center}
.xdownload-view .xdownload-d{font-size:min(var(--pg-d),13.6vw)}
@media (max-width:600px){
  main .r-top:has(.pg-label){padding-top:120px}
  main .r-top .pg-d+.r-lead{font-size:19px}
}

/* ── User guide (05.11. afternoon, his "veraltet … bessere Animationen statt Bilder"): the old app pictures are gone;
   steps are numbered rows, and two small moving pictures show what the words say — a line selected, the two keys,
   the pill reading; the pill opening. Built from the site's own pieces, nothing that can age with the app. ── */
.gd-steps{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.gd-steps li{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font:400 19px/1.45 var(--sans);color:var(--ink)}
.gd-n{flex:none;width:28px;font:400 30px/1 var(--pg-serif);color:var(--ink)}
.gd-steps b,.gd-note b,.gd-fine b{font-weight:600}
.gd-note{margin:18px 0 0;font:400 18px/1.55 var(--sans);color:var(--ink-2)}
.gd-fine{margin:14px 0 0;font:400 16px/1.5 var(--sans);color:var(--ink-3)}
.gd-fine .r-a{margin-left:10px}
.gd-anim{display:flex;flex-direction:column;align-items:center;gap:22px;margin:26px 0 8px;padding:clamp(32px,4vw,48px) 24px}
.gd-win{width:min(100%,420px);padding:22px 24px;border-radius:16px;background:var(--sheet);box-shadow:var(--ring),0 18px 40px -26px rgba(21,21,21,.25)}
.gd-txt{margin:0;font:400 19px/1.5 var(--sans);color:var(--ink)}
.gd-sel{background-image:linear-gradient(var(--hl-2),var(--hl-2)),linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;
  background-size:0 100%,0 100%;padding:2px 2px;border-radius:3px;animation:gd-select 7s var(--ease) infinite}
.gd-dock{display:flex;align-items:center;gap:16px}
.gd-keys{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.gd-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:42px;padding:0 12px;border-radius:10px;background:var(--sheet);
  box-shadow:inset 0 0 0 1px var(--line-2),0 2px 0 var(--line-2);font:500 16px/1 var(--sans);color:var(--ink);animation:gd-press 7s var(--ease) infinite}
.gd-keys kbd.w{min-width:96px}
.gd-bars{height:42px;padding:0 18px;opacity:.25;animation:gd-on 7s var(--ease) infinite}
.gd-bars i{transform-origin:center;animation:gd-bar .9s ease-in-out infinite alternate}
.gd-bars i:nth-child(2){animation-delay:.15s}.gd-bars i:nth-child(3){animation-delay:.3s}.gd-bars i:nth-child(4){animation-delay:.45s}.gd-bars i:nth-child(5){animation-delay:.6s}
@keyframes gd-select{0%,12%{background-size:0 100%,0 100%}26%,40%{background-size:0 100%,100% 100%}88%{background-size:100% 100%,100% 100%}96%,100%{background-size:100% 100%,100% 100%;opacity:1}}
@keyframes gd-press{0%,30%{transform:none;box-shadow:inset 0 0 0 1px var(--line-2),0 2px 0 var(--line-2)}33%,37%{transform:translateY(2px);background:var(--hl);box-shadow:inset 0 0 0 1px var(--ink)}40%,100%{transform:none}}
@keyframes gd-on{0%,36%{opacity:.25}40%,90%{opacity:1}96%,100%{opacity:.25}}
@keyframes gd-bar{from{transform:scaleY(.45)}to{transform:scaleY(1.15)}}
/* the pill: closed, then pointed at — it opens: the voice, ×, the reading bars, pause */
.gd-pillstage{min-height:150px;justify-content:center}
.gd-pill{display:inline-flex;align-items:center;gap:14px;height:46px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--paper);overflow:hidden;
  max-width:96px;animation:gd-open 6s var(--ease) infinite}
.gd-voice{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#cfcac0 40%,#8d877c 100%)}
.gd-x{flex:none;font:400 20px/1 var(--sans);opacity:.8}
.gd-pill .gd-bars{height:46px;padding:0;background:none;opacity:1;animation:none}
.gd-pause{flex:none;display:inline-flex;gap:4px}
.gd-pause i{width:4px;height:14px;border-radius:2px;background:var(--paper)}
.gd-pill>.gd-voice,.gd-pill>.gd-x,.gd-pill>.gd-pause{opacity:0;animation:gd-show 6s var(--ease) infinite}
@keyframes gd-open{0%,22%{max-width:96px}34%,78%{max-width:260px}90%,100%{max-width:96px}}
@keyframes gd-show{0%,26%{opacity:0}36%,76%{opacity:1}86%,100%{opacity:0}}
.gd-pill{flex-direction:row}
.gd-pill>.pg-bars{order:2}.gd-pill>.gd-voice{order:0}.gd-pill>.gd-x{order:1}.gd-pill>.gd-pause{order:3}
@media (prefers-reduced-motion:reduce){
  .gd-sel{animation:none;background-size:100% 100%,100% 100%}
  .gd-keys kbd,.gd-bars,.gd-bars i{animation:none;opacity:1}
  .gd-pill{animation:none;max-width:none}.gd-pill>.gd-voice,.gd-pill>.gd-x,.gd-pill>.gd-pause{animation:none;opacity:1}
}

/* About's closing block (05.11. afternoon, his: keep it, but no yellow — "eher ein verblasstes Weiß") */
.xabout-end-b{background:var(--sheet)!important;box-shadow:inset 0 0 0 3px var(--pg-edge)}