/* LoudFlow — the quiet system (29.10.2026). Loaded after site.css (nav, sheet, footer) on the
   rebuilt pages: Home, How it works, Voices, Pricing, Questions, Download.
   Lauro, 29.10., on the first skeleton: "zu fest nach AI-Slop", "alles cleaner". What that
   meant, and what this file therefore never does: no eyebrow labels or numbered chips above
   headings, no italic phrase in every heading, no rows of three icon cards, no bento of grey
   boxes, no dark neon band, no blurred photos. Type, white space, hairlines and one real
   picture per section carry the page. Reading text stays sans ≥ 18 px (UI_PLAYBOOK §0). */
/* THE SYSTEM (31.10.2026 evening) — one scale for every page. Spec + rules: drafts/aqua-1029/DESIGN.md.
   Page stylesheets (t-*.css, home.css) use these tokens; drafts/aqua-1029/tools/tokenize_css.py mapped their old
   literals onto them. Change a value HERE and every page moves. Base classes: the SYSTEM block at the end. */
:root{
  /* colour: paper + ink + hairlines; no teal/mint in the UI (memory 25.10. "black, not teal") */
  --paper:#fefef6;--sheet:#fff;--sand:#f3f2ee;--ink:#151515;
  --ink-2:rgba(21,21,21,.70);--ink-3:rgba(21,21,21,.44);
  --line:rgba(21,21,21,.10);--line-2:rgba(21,21,21,.22);--wash:rgba(21,21,21,.045);--wash-2:rgba(21,21,21,.075);
  --butter:#f4d66e;                      /* the ONE closing colour block on the home (01.11. night, after the closing block Lauro sent from Mobbin; ink on it 12.8:1) */
  --hl:#efe8d6;--hl-2:#e2d6b8;          /* selected text / the word being read inside a selection (the demo's sand) */
  --acc:var(--ink);--acc-fill:var(--hl); /* drawings: lines ink, the one fill sand */
  /* 02.11. evening, Lauro: "wir brauchen irgendeine Farbe … eine, die mega passt, aber nicht unnötig ist". The one colour is
     LoudFlow's own green, the app's (Pro pill + Insights, --lf-pro-tag #034f46 since 26.10.: "unsere Secondary Color, was dieses
     Grün ist"). Deep green for words, mint for fills: the demo's tags, the closing block, one detail in each drawing.
     Contrast (WCAG, computed 02.11.): --leaf on --mint 7.35:1, ink on --mint 14.13:1, --mint-2 on ink 11.69:1, --leaf on paper
     9.37:1. Ink stays the only button colour. */
  --leaf:#034f46;--mint:#cfe8de;--mint-2:#a9d9c8;
  /* type */
  --serif:"Source Serif 4","Source Serif Pro",Georgia,serif;--sans:"Figtree",system-ui,sans-serif;
  --fs-d:clamp(44px,5.2vw,76px);--lh-d:1.03;--ls-d:-.022em;      /* h1, one per page */
  --fs-h:clamp(34px,3.5vw,52px);--lh-h:1.1;--ls-h:-.018em;       /* section head (h2) */
  --fs-h3:clamp(24px,2vw,29px);--lh-h3:1.18;                      /* sub head, serif (card, step, plan name) */
  --fs-say:clamp(28px,3vw,44px);--lh-say:1.22;                    /* a quote or one big statement */
  --fs-t:20px;                                                    /* sans 500 title: question, row name */
  --fs-lead:clamp(19px,1.45vw,21px);                              /* grey line under a head */
  --fs-body:18px;--fs-small:16px;                                 /* nothing in main below 16 */
  /* space */
  --g:clamp(16px,4vw,48px);                                       /* side gutter: 16 at 390 */
  --top:clamp(132px,12vw,176px);                                  /* nav to the first head */
  --sec:clamp(104px,11vw,160px);                                  /* between sections, every page */
  --in:clamp(40px,4vw,56px);                                      /* head block to its content */
  /* widths */
  --max:1120px;--mid:960px;--text:720px;
  /* shape */
  --r-frame:20px;--r-win:14px;--r-btn:12px;--r-sm:8px;
  --ring:0 0 0 1px var(--line);
  --sh-win:0 0 0 1px var(--line),0 10px 28px -22px rgba(21,21,21,.16);   /* 02.11.: flatter (was 0 18px 40px -24px .24) */
  --btn-h:50px;--chip-h:46px;
  /* pictures */
  --art-l:clamp(200px,18vw,260px);--art:clamp(160px,14vw,220px);--art-s:96px;
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);--t:.4s
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{display:block}
.r-w{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.r-sec{padding:var(--sec) 0 0}
.r-sec:last-of-type{padding-bottom:var(--sec)}

/* type */
.r-d,.r-h{font-family:var(--serif);font-weight:400;letter-spacing:-.022em;text-wrap:balance;margin:0}
.r-d{font-size:var(--fs-d);line-height:var(--lh-d)}
.r-h{font-size:var(--fs-h);line-height:var(--lh-h)}
.r-h.s{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.r-t{font:500 20px/1.35 var(--sans);margin:0}
.r-p{color:var(--ink-2);max-width:36ch;margin:18px 0 0;text-wrap:pretty}
.r-p.l{font-size:21px;line-height:1.5}
.r-p+.r-p{margin-top:12px}
.r-note{font-size:15px;color:var(--ink-2);margin:14px 0 0}
.r-kbd{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
main kbd{font:500 .84em/1 var(--sans);border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:.26em .48em;background:var(--sheet);color:var(--ink);white-space:nowrap}
.r-kbd kbd{font:500 .82em/1 var(--sans);border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:.28em .5em;background:var(--sheet);color:var(--ink)}

/* actions — one black pill per screen, the rest are words */
.r-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.r-btn{display:inline-flex;align-items:center;gap:9px;height:46px;border-radius:10px;background:#171717;color:var(--paper);font:500 15px/1 var(--sans);text-decoration:none;transition:transform .2s var(--ease),background .2s}
.r-btn:hover{background:#000}.r-btn:active{transform:scale(.98)}
.r-btn svg{width:15px;height:15px}
.r-btn .lf-ic-win,.r-btn .lf-ic-mac{display:none}
html.lf-os-win .r-btn .lf-ic-win,html.lf-os-mac .r-btn .lf-ic-mac,.r-btn.r-btn-mac .lf-ic-mac{display:block}
.r-a{color:var(--ink);font:500 16px/1 var(--sans);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.r-a::after{content:"→";transition:transform .2s var(--ease)}
.r-a:hover::after{transform:translateX(3px)}
a.r-u{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:.18em;text-decoration-thickness:1px}
a.r-u:hover{text-decoration-color:var(--ink)}

/* page head — sub pages: left, big, one line under it */
.r-head{padding-top:var(--top)}
.r-head .r-p{font-size:21px;max-width:40ch}

/* home hero: title left, the words to its right on wide screens */
.r-hero{padding-top:var(--top)}
.r-hero .top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.r-hero .side .r-p{margin-top:0;font-size:20px}
.r-hero .side .r-acts{margin-top:26px}
.r-hero .r-reader{margin-top:clamp(56px,6vw,88px)}

/* THE READER (reader.js) */
.rd{margin:0;position:relative}
.rd-desk{position:relative;border-radius:var(--r-frame);background:var(--sand);padding:clamp(28px,5vw,72px) clamp(16px,6vw,96px) clamp(84px,8vw,112px);overflow:hidden}
.rd-win{position:relative;max-width:720px;margin:0 auto;background:var(--sheet);border-radius:var(--r-win);box-shadow:0 1px 2px rgba(21,21,21,.05),0 18px 40px -22px rgba(21,21,21,.22)}
.rd-bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.rd-bar i{width:9px;height:9px;border-radius:50%;background:rgba(21,21,21,.1)}
.rd-bar b{font-weight:500;color:var(--ink);margin-left:8px}
.rd-pg{padding:clamp(24px,3.4vw,40px) clamp(22px,4vw,48px) clamp(28px,3.6vw,44px)}
.rd-pg h4{font:500 15px/1.3 var(--sans);color:var(--ink-2);margin:0 0 14px}
.rd-pg p{font:400 clamp(19px,1.9vw,24px)/1.6 var(--sans);margin:0;color:var(--ink-3)}
.rd-pg p+p{margin-top:.7em}
.rd .w{transition:color .18s linear,background-color .18s linear;border-radius:5px;padding:.04em .08em;margin:0 -.08em}
.rd .w.past{color:var(--ink)}
.rd .w.now{color:var(--ink);background:var(--wash-2)}
.rd [data-skip]{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(21,21,21,.25);transition:opacity .2s}
.rd [data-skip].past{opacity:.55}
.rd.is-selected .rd-pg p,.rd.is-selected .rd-pg h4{background:transparent}
.rd.is-selected .rd-pg .band{background:var(--hl);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rd.is-selected .rd-pg .w,.rd.is-selected .rd-pg [data-skip]{color:var(--ink);background:none;transition:none}
/* the pill: the only piece of the app in the picture */
.rd-pill{position:absolute;left:50%;bottom:clamp(26px,3vw,38px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14px/1 var(--sans);cursor:pointer;box-shadow:0 10px 30px -12px rgba(21,21,21,.5)}
.rd-pill .bars{display:flex;gap:3px;align-items:center;height:16px}
.rd-pill .bars i{width:3px;height:5px;border-radius:2px;background:currentColor;opacity:.9}
.rd.is-reading:not(.is-paused) .rd-pill .bars i{animation:rdBar 1s ease-in-out infinite}
.rd-pill .bars i:nth-child(2){animation-delay:-.2s}.rd-pill .bars i:nth-child(3){animation-delay:-.45s}.rd-pill .bars i:nth-child(4){animation-delay:-.7s}
@keyframes rdBar{0%,100%{height:5px}50%{height:15px}}
.rd-pill .st{min-width:66px;text-align:left}
.rd-pill .st span{display:none}
.rd:not(.is-reading):not(.is-keys) .rd-pill .st .idle,.rd.is-keys .rd-pill .st .keys,.rd.is-reading:not(.is-paused):not(.is-keys) .rd-pill .st .on,.rd.is-reading.is-paused .rd-pill .st .off{display:inline}
.rd-pill .st .keys kbd{font:500 12px/1 var(--sans);background:rgba(253,252,248,.14);color:inherit;border:0;border-radius:5px;padding:3px 5px;margin:0 2px}
.rd.is-keys .rd-pill{animation:rdPress .5s var(--ease)}
@keyframes rdPress{40%{transform:translateX(-50%) scale(.96)}}
.rd-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:18px}
.rd-tabs button{border:0;background:none;font:500 15px/1 var(--sans);color:var(--ink-2);padding:10px 14px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s}
.rd-tabs button:hover{color:var(--ink)}
.rd-tabs button[aria-pressed=true]{color:var(--ink);background:var(--wash)}

/* split: words on one side, a picture on the other */
.r-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px clamp(40px,7vw,112px);align-items:center}
.r-split.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.r-split.flip>:first-child{order:2}
.r-pic{border-radius:22px;background:none;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.r-pic img{display:block;max-width:78%;height:auto}

/* statement: one big paragraph, nothing else */
.r-say{font:400 var(--fs-say)/var(--lh-say) var(--serif);letter-spacing:-.016em;max-width:29ch;margin:0;text-wrap:pretty}
.r-say .m{color:var(--ink-3)}
.r-say.s{font-size:clamp(24px,2.3vw,32px);line-height:1.3}
.r-pic img.big{max-width:92%}

/* list rows with hairlines (apps, steps, plan lines, questions) */
.r-rows{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.r-rows>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 40px;padding:26px 0;border-bottom:1px solid var(--line)}
.r-rows>li .r-t{font-weight:500}
.r-rows>li p{margin:0;color:var(--ink-2)}

/* how it works: three steps, each a real action */
.r-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.r-steps li{display:flex;flex-direction:column}
.r-steps .pic{height:220px;border-radius:18px;background:var(--sand);display:flex;align-items:center;justify-content:center;margin-bottom:22px;overflow:hidden}
.r-steps .r-t{margin-bottom:6px}
.r-steps p{margin:0;color:var(--ink-2);max-width:28ch}
.st-sel{font:400 17px/1.5 var(--sans);color:var(--ink);background:var(--sheet);border-radius:12px;padding:16px 20px;margin:0 22px;box-shadow:0 1px 2px rgba(21,21,21,.05),0 12px 30px -18px rgba(21,21,21,.22)}
.st-sel mark{background:var(--hl);color:inherit;padding:.05em 0}
.st-keys{display:flex;gap:10px;align-items:center;font:500 18px/1 var(--sans);color:var(--ink-2)}
.st-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:58px;padding:0 16px;border-radius:12px;background:var(--sheet);border:1px solid rgba(21,21,21,.12);border-bottom-width:3px;font:500 18px/1 var(--sans);color:var(--ink)}
.st-keys kbd.wide{min-width:150px}
.st-pill{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 15px/1 var(--sans)}
.st-pill .bars{display:flex;gap:3px;align-items:center;height:16px}.st-pill .bars i{width:3px;border-radius:2px;background:currentColor}
.st-pill .bars i:nth-child(1){height:6px}.st-pill .bars i:nth-child(2){height:14px}.st-pill .bars i:nth-child(3){height:9px}.st-pill .bars i:nth-child(4){height:12px}

/* apps it reads in: names, quietly */
.r-apps{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;padding:0;list-style:none}
.r-apps li{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px 0 12px;border:1px solid var(--line);border-radius:999px;font-size:16px;background:var(--sheet)}
.r-apps img{width:20px;height:20px;filter:grayscale(1) contrast(.9);opacity:.85}

/* voice list — names only, the one playing is the dark one (Sesame, ElevenLabs on Mobbin) */
.r-vlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.r-vrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto 56px;align-items:center;gap:16px;width:100%;padding:16px 12px 16px 4px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .2s}
.r-vrow:hover{background:var(--wash)}
.r-vrow .pl{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(21,21,21,.2);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.r-vrow .pl svg{width:13px;height:13px}.r-vrow .pl .pa{display:none}
.r-vrow b{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:-.01em}
.r-vrow small{color:var(--ink-2);font-size:var(--fs-small)}
.r-vrow .ring{height:2px;border-radius:2px;background:var(--wash-2);overflow:hidden}
.r-vrow .ring i{display:block;height:100%;width:0;background:var(--ink)}
.r-vrow.is-on .pl{background:var(--ink);color:var(--paper);box-shadow:none}
.r-vrow.is-on .pl .pp{display:none}.r-vrow.is-on .pl .pa{display:block}
.r-vlist.big .r-vrow{padding-top:20px;padding-bottom:20px}
.r-vlist.big .r-vrow b{font-size:clamp(28px,2.8vw,40px)}

/* rows that are links (Made for) */
.r-for>li{display:block;padding:0}
.r-for a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 20px;gap:8px 40px;align-items:baseline;padding:24px 0;color:inherit;text-decoration:none}
.r-for a span:not(.r-t){color:var(--ink-2)}
.r-for a::after{content:"→";color:var(--ink-3);transition:transform .2s var(--ease),color .2s}
.r-for a:hover::after{color:var(--ink);transform:translateX(3px)}

/* voices */
.r-voices{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.r-voice{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:16px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);cursor:pointer;border:0;font:inherit;text-align:left;color:inherit;width:100%;transition:box-shadow .2s}
.r-voice:hover{box-shadow:0 0 0 1px rgba(21,21,21,.22)}
.r-voice .pl{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center}
.r-voice .pl svg{width:14px;height:14px}
.r-voice .pl .pa{display:none}
.r-voice.is-on .pl .pp{display:none}.r-voice.is-on .pl .pa{display:block}
.r-voice b{display:block;font-weight:500;font-size:17px}
.r-voice small{display:block;color:var(--ink-2);font-size:14px;margin-top:2px}
.r-voice .ring{margin-left:auto;width:44px;height:3px;border-radius:2px;background:var(--wash-2);overflow:hidden}
.r-voice .ring i{display:block;height:100%;width:0;background:var(--ink)}
.r-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}
.r-way{border-radius:var(--r-frame);background:var(--sand);padding:clamp(28px,3.4vw,44px);min-height:0;display:flex;flex-direction:column}
.r-way .r-p{max-width:30ch}
.r-way .art{margin-top:auto;padding-top:28px}
.r-way .art img{height:190px;width:auto;display:block}

/* pricing */
.r-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:64px}
.r-plan{border-radius:var(--r-frame);padding:clamp(28px,3.2vw,40px);background:var(--sheet);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column}
.r-plan.pro{background:var(--sand);box-shadow:none}
.r-plan .nm{font:500 18px/1 var(--sans)}
.r-plan .pr{font:400 clamp(44px,4.4vw,60px)/1 var(--serif);letter-spacing:-.02em;margin:22px 0 6px}
.r-plan .pr small{font:400 18px/1 var(--sans);color:var(--ink-2);letter-spacing:0;margin-left:6px}
.r-plan .sub{color:var(--ink-2);margin:0}
.r-plan ul{list-style:none;padding:0;margin:28px 0 32px;border-top:1px solid var(--line)}
.r-plan li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.r-plan li::before{content:"";flex:none;width:12px;height:7px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg) translateY(-3px)}
.r-plan .r-btn{margin-top:auto;justify-content:center}
.r-plan .r-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(21,21,21,.22)}
.r-plan .r-btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.r-plan .r-note{text-align:center}

/* questions */
.r-qs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:32px clamp(40px,6vw,96px);margin-top:72px}
.r-qs .grp{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:2px}
.r-qs .grp a{color:var(--ink-2);text-decoration:none;font-size:16px;padding:7px 0}
.r-qs .grp a:hover,.r-qs .grp a[aria-current=true]{color:var(--ink)}
.r-q-set+.r-q-set{margin-top:72px}
.r-q-set>h2{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:-.015em;margin:0 0 14px;scroll-margin-top:120px}
.r-q{border-bottom:1px solid var(--line)}
.r-q:first-of-type{border-top:1px solid var(--line)}
.r-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font:500 19px/1.4 var(--sans)}
.r-q summary::-webkit-details-marker{display:none}
.r-q summary::after{content:"";flex:none;width:10px;height:10px;margin-top:7px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:rotate(45deg);transition:transform .25s var(--ease)}
.r-q[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.r-q .a{padding:0 0 24px;color:var(--ink-2);max-width:60ch}
.r-q .a p{margin:0}.r-q .a p+p{margin-top:10px}
.r-q .a a{color:var(--ink)}

/* the quote */
.r-quote{margin:0}
.r-quote p{font:400 var(--fs-say)/var(--lh-say) var(--serif);letter-spacing:-.018em;margin:0;max-width:22ch;text-wrap:balance}
.r-quote figcaption{margin-top:24px;font-size:16px;color:var(--ink-2)}
.r-quote figcaption a{color:var(--ink)}

/* close */
.r-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;align-items:center;border-top:1px solid var(--line);padding-top:var(--sec)}
.r-close .art{display:flex;justify-content:center}
.r-close .art img{width:min(100%,420px);height:auto}

/* how it works: the step number, quiet */
.r-step{font:400 20px/1 var(--serif);color:var(--ink-3);margin:0 0 18px}
.r-pic-text{padding:clamp(24px,4vw,56px);background:var(--sand)}
.st-win{background:var(--sheet);border-radius:var(--r-win);box-shadow:0 1px 2px rgba(21,21,21,.05),0 18px 40px -22px rgba(21,21,21,.22);max-width:560px;width:100%}
.st-win p{margin:0;padding:26px 30px 30px;font:400 20px/1.6 var(--sans);color:var(--ink)}
.st-win mark{background:var(--hl);color:inherit}
.st-keys.big kbd{min-width:88px;height:78px;font-size:21px;border-radius:15px;border-bottom-width:4px}
.st-keys.big kbd.wide{min-width:200px}
.st-keys.big{font-size:22px;gap:14px}
.r-pic-reader .rd-desk{padding:clamp(24px,3.4vw,48px) clamp(16px,3vw,40px) 96px}
.r-apps li.t{padding-left:16px}
.r-two{margin-top:0}
.r-two>li{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
.r-langs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.r-langs li{font:400 clamp(22px,2vw,28px)/1.2 var(--serif);padding:16px 0;border-bottom:1px solid var(--line)}
.r-langs li:nth-child(odd){padding-right:24px}

/* pricing: the paid plan is the one dark card on the page */
.r-plan.pro{background:var(--ink);color:var(--paper)}
.r-plan.pro .sub,.r-plan.pro .r-note,.r-plan.pro .pr small{color:rgba(253,252,248,.62)}
.r-plan.pro ul{border-top-color:rgba(253,252,248,.14)}
.r-plan.pro li{border-bottom-color:rgba(253,252,248,.14)}
.r-plan.pro li::before{border-color:var(--paper)}
.r-btn.inv{background:var(--paper);color:var(--ink)}
.r-btn.inv:hover{background:#fff}
.r-fine{margin-top:28px;font-size:16px;color:var(--ink-2)}
.r-fine p{margin:6px 0}
.r-qs.one{grid-template-columns:minmax(0,.8fr) minmax(0,2fr);margin-top:0}
.r-qs.one>.r-h{font-size:var(--fs-h3)}
.r-q summary h3{font:inherit;margin:0}

/* questions: one quiet search field */
.r-find{display:flex;align-items:center;gap:10px;max-width:520px;height:54px;margin-top:36px;padding:0 18px;border-radius:999px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s}
.r-find:focus-within{box-shadow:0 0 0 1px rgba(21,21,21,.35)}
.r-find svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}
.r-find input{flex:1;border:0;background:none;font:400 18px/1 var(--sans);color:var(--ink);outline:none;min-width:0}
.r-find input::placeholder{color:var(--ink-3)}
.r-none{margin:0;color:var(--ink-2);font-size:19px}
.r-q[hidden],.r-q-set[hidden]{display:none}

/* THE DESK (desk.js) — the hook, drawn: Lauro 29.10. "Illustration-Style und minimalistisch weiß".
   One ink drawing on white — a computer with a few apps open, LoudFlow reading one after another,
   and the woman from our own doodle set leaning on it, eyes closed. Lines are ink (--ink), the only
   fill is the pill; the active window gets a hard ink offset instead of a soft shadow. Units are
   container units so the drawing keeps its proportions at every width. */
.dk{margin:clamp(56px,6vw,96px) 0 0;container-type:inline-size}
.dk-stage{position:relative;padding-bottom:7cqi}
.dk-mon{position:relative;width:76%;border:.46cqi solid var(--ink);border-radius:2.2cqi;padding:1.3cqi;background:var(--paper)}
.dk-screen{position:relative;aspect-ratio:16/9.6;border:.24cqi solid var(--ink);border-radius:1.1cqi;background:var(--paper);overflow:hidden}
.dk-neck{position:absolute;left:calc(38% - 3.4cqi);width:6.8cqi;height:5.2cqi;border-left:.46cqi solid var(--ink);border-right:.46cqi solid var(--ink);transform:translateY(-.2cqi)}
.dk-foot{position:absolute;left:calc(38% - 9cqi);width:18cqi;height:1.4cqi;margin-top:5cqi;border:.46cqi solid var(--ink);border-radius:1cqi .9cqi .4cqi .4cqi;background:var(--paper)}
.dk-floor{position:absolute;left:-3%;right:-3%;bottom:0;height:0;border-top:.46cqi solid var(--ink);border-radius:2px}
.dk-fig{position:absolute;right:-1.5%;bottom:-.2cqi;width:27%;height:auto}
.dk-win{position:absolute;background:var(--paper);border:.22cqi solid var(--ink);border-radius:.9cqi;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dk-win.is-on{transform:translate(-.3cqi,-.3cqi);box-shadow:.6cqi .6cqi 0 0 var(--ink)}
.dk-bar{display:flex;align-items:center;gap:.55cqi;height:3.1cqi;padding:0 1.2cqi;border-bottom:.2cqi solid var(--ink);font-size:1.05cqi;color:var(--ink);white-space:nowrap}
.dk-bar i{width:.85cqi;height:.85cqi;border-radius:50%;border:.13cqi solid var(--ink);flex:none}
.dk-bar i:nth-of-type(3){margin-right:.6cqi}
.dk-bar img{width:1.25cqi;height:1.25cqi;filter:grayscale(1) contrast(1.4)}
.dk-bar b{font-weight:500}
.dk-url{flex:1;height:1.9cqi;border-radius:99px;border:.13cqi solid var(--ink);display:flex;align-items:center;padding:0 1cqi;margin-left:.3cqi;font-size:.95cqi;color:var(--ink-2)}
.dk-body{padding:1.7cqi 2cqi 2cqi}
.dk-body p{margin:0;font:400 1.5cqi/1.55 var(--sans);color:var(--ink-3)}
.dk-body p+p{margin-top:.8cqi}
.dk-body .dk-sub{font-weight:500;color:var(--ink);font-size:1.4cqi;margin-bottom:.8cqi}
.dk-page{padding:2.3cqi 2.8cqi}
.dk-page .dk-h{font:400 1.95cqi/1.2 var(--serif);color:var(--ink);margin-bottom:1.1cqi}
.dk-page p[data-say],.dk-page .dk-rest{font-family:var(--serif);font-size:1.6cqi}
.dk-page .dk-rest{color:var(--ink-3)}
.dk-mail{left:3%;top:7%;width:42%;height:45%}
.dk-pdf{left:33.5%;top:13%;width:37%;height:70%}
.dk-web{left:59.5%;top:5.5%;width:37%;height:45%}
.dk-notes{left:6.5%;top:58%;width:30%;height:30%}
.dk-notes .dk-body p{font-size:1.65cqi}
.dk .w{border-radius:.35cqi;padding:.04em .08em;margin:0 -.08em;transition:color .18s linear,background-color .18s linear}
.dk .w.past{color:var(--ink)}
.dk .w.now{color:var(--ink);background:var(--wash-2)}
.dk [data-skip]{text-decoration:line-through;text-decoration-color:rgba(21,21,21,.3)}
.dk-win.is-sel [data-say] .band{background:var(--hl);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dk-win.is-sel [data-say] .w,.dk-win.is-sel [data-say] [data-skip]{color:var(--ink);background:none;transition:none}
.dk-pill{position:absolute;left:50%;bottom:3.4%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:.8cqi;height:3.3cqi;padding:0 1.5cqi 0 1.2cqi;border-radius:99px;background:var(--ink);color:var(--paper);font:500 1.08cqi/1 var(--sans);opacity:.3;transition:opacity .3s}
.dk.is-reading .dk-pill{opacity:1}
.dk-pill .bars{display:flex;gap:.24cqi;align-items:center;height:1.3cqi}
.dk-pill .bars i{width:.24cqi;height:.42cqi;border-radius:.2cqi;background:currentColor}
.dk.is-reading .dk-pill .bars i{animation:dkBar 1s ease-in-out infinite}
.dk-pill .bars i:nth-child(2){animation-delay:-.2s}.dk-pill .bars i:nth-child(3){animation-delay:-.45s}.dk-pill .bars i:nth-child(4){animation-delay:-.7s}
@keyframes dkBar{0%,100%{height:.42cqi}50%{height:1.2cqi}}

/* Hear it: the second action, a real voice */
.r-hear{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 7px;border:0;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1px rgba(21,21,21,.18);font:500 16px/1 var(--sans);color:var(--ink);cursor:pointer;transition:box-shadow .2s}
.r-hear:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.r-hear .pl{width:32px;height:32px;border-radius:8px;background:var(--wash-2);display:flex;align-items:center;justify-content:center}
.r-hear .pl svg{width:12px;height:12px}.r-hear .pa{display:none}
.r-hear.is-on .pl{background:var(--ink);color:var(--paper)}.r-hear.is-on .pp{display:none}.r-hear.is-on .pa{display:block}
.r-apps-quiet{justify-content:center;margin-top:28px;gap:6px 22px}
.r-apps-quiet li{border:0;background:none;height:auto;padding:0;color:var(--ink-2);font-size:15px}
.r-apps-quiet img{width:17px;height:17px;opacity:.7}

/* OPENNOTE DIRECTION (29.10. afternoon). Lauro: far fewer illustrations, "noch nicht so clean",
   the split layouts not either — go towards Opennote (Mobbin). So: everything centred, serif headings
   at a calm size (not 100 px), one sentence under each, lots of air, one real product picture,
   rounded-rectangle buttons, soft panels instead of outlines. The one card with a notebook grid is
   the only ornament. */
.o-hero{padding-top:var(--top);text-align:center}
.o-d{font:400 var(--fs-d)/var(--lh-d) var(--serif);letter-spacing:var(--ls-d);margin:0;text-wrap:balance}
.o-lead{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:34ch;margin:20px auto 0;text-wrap:pretty}
.o-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.o-note{font-size:14px;color:var(--ink-2);margin:14px 0 0}
.o-reader{margin:clamp(60px,6vw,84px) auto 0;max-width:1000px;text-align:left}
.o-reader .rd-desk{padding:22px clamp(16px,5vw,72px) 96px}
.o-reader .rd-tabs{margin:0 0 22px}
.o-reader .rd-tabs button[aria-pressed=true]{background:var(--sheet);box-shadow:0 1px 2px rgba(21,21,21,.06)}
.rd-bar img{width:16px;height:16px}
.rd-serif p{font-family:var(--serif)!important}
.o-small{margin:64px 0 0;font-size:14px;color:var(--ink-3)}
.o-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;margin:18px auto 0;padding:0;color:var(--ink-2);font-size:16px;max-width:900px}
.o-logos li{display:flex;gap:8px;align-items:center}
.o-logos img{width:18px;height:18px;filter:grayscale(1);opacity:.65}
.o-sec{padding:var(--sec) 0 0}
.o-sec.o-end{padding-bottom:var(--sec)}
.o-c{text-align:center}
.o-h{font:400 var(--fs-h)/var(--lh-h) var(--serif);letter-spacing:var(--ls-h);margin:0;text-wrap:balance}
.o-c .o-lead{margin-left:auto;margin-right:auto}
.o-steps{list-style:none;padding:0;margin:52px auto 0;max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.o-steps .pic{height:200px;border-radius:var(--r-frame);background:var(--sand);display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden}
.o-steps .st-sel{font-size:16px;margin:0 20px;max-width:calc(100% - 40px)}
.o-steps .st-keys kbd{min-width:56px;height:52px;font-size:16px}.o-steps .st-keys kbd.wide{min-width:118px}
.o-steps .t{font:500 17px/1.3 var(--sans);margin:0 0 4px}
.o-steps p{margin:0;color:var(--ink-2);font-size:16px}
.o-learn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center;max-width:1000px}
.o-list{margin-top:30px;border-bottom:1px solid var(--line)}
.o-list details{border-top:1px solid var(--line)}
.o-list summary{list-style:none;cursor:pointer;padding:17px 0;font:500 17px/1.3 var(--sans);display:flex;gap:12px;align-items:center}
.o-list summary::-webkit-details-marker{display:none}
.o-list summary::before{content:"✦";font-size:11px;color:var(--ink-2)}
.o-list details p{margin:0 0 18px 23px;color:var(--ink-2);font-size:16px;max-width:36ch}
.o-card{margin:0;border-radius:var(--r-frame);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;padding:clamp(28px,3.6vw,48px);min-height:400px;display:flex;flex-direction:column;justify-content:flex-end}
.o-card blockquote{margin:0;font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:-.01em;text-wrap:balance}
.o-card figcaption{margin-top:16px;font-size:15px;color:var(--ink-2)}
.o-voices{max-width:620px;margin:44px auto 0;text-align:left}
@media (max-width:900px){.o-steps,.o-learn{grid-template-columns:1fr}.o-card{min-height:280px}}
@media (max-width:640px){.o-reader .rd-desk{padding:14px 10px 84px}.o-lead{font-size:18px}.o-d br{display:none}}

/* the other tabs, the same calm: centred heads, Opennote-sized headings, steps stacked not split */
.r-d{font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--ls-d)}
.r-h{font-size:var(--fs-h);line-height:var(--lh-h);letter-spacing:var(--ls-h)}
.r-head{text-align:center;padding-top:var(--top)}
.r-head .r-p{margin-left:auto;margin-right:auto;font-size:19px}
.r-head .r-acts,.o-c .r-acts{justify-content:center}
.r-head .r-find{margin-left:auto;margin-right:auto}
.r-head .r-plans{margin-left:auto;margin-right:auto;max-width:920px;text-align:left}
.r-head .r-fine{text-align:center}
.r-head.r-split,.r-head .r-split{text-align:left}
.o-stack{display:flex;flex-direction:column;align-items:center;text-align:center}
.o-stack>div:first-child{max-width:560px}
.o-stack .r-p{margin-left:auto;margin-right:auto}
.o-stack>.r-pic,.o-stack>figure{width:100%;max-width:820px;margin-top:44px}
.o-stack .r-pic{min-height:340px;border-radius:var(--r-frame);background:var(--sand)}
.o-stack .r-rows{width:100%;max-width:820px;text-align:left}
.o-c .r-apps{justify-content:center}
.o-c .r-p{margin-left:auto;margin-right:auto}

/* Opennote's answer, our own drawings: one thin line drawing per moment, ONE accent (LoudFlow green,
   lightened for a fill: --acc). The every-app section is Opennote's "Stop juggling" idea as values only —
   square soft cards, slightly turned, one line icon each, a serif name and one small line. */
.o-art{display:block;width:clamp(190px,17vw,250px);height:auto;margin:0 auto 26px}
.o-art.s{width:clamp(160px,13vw,200px);margin-bottom:20px}
.o-hint{margin-top:14px;text-align:center;font-size:14px;color:var(--ink-3)}
.o-reader .rd-tabs button{display:inline-flex;align-items:center;gap:7px}
.o-reader .rd-tabs svg{width:10px;height:10px;opacity:.75}
.rd.is-heard .rd-tabs button[aria-pressed=true] svg{opacity:1}
.o-tiles{list-style:none;padding:0;margin:56px auto 0;display:flex;justify-content:center;max-width:1100px}
.o-tile{flex:0 0 214px;height:268px;margin:0 -7px;padding:26px 22px;border-radius:3px;text-align:left;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(21,21,21,.05),0 16px 30px -22px rgba(21,21,21,.35);transition:transform .35s var(--ease)}
.o-tile svg{width:76px;height:76px;margin:6px 0 auto;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.o-tile svg .acc{fill:var(--acc);stroke:var(--ink)}
.o-tile .tt{font:400 25px/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.o-tile p{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.o-tile.c1{background:var(--hl);transform:rotate(-5deg) translateY(10px);z-index:1}
.o-tile.c2{background:#f5eedf;transform:rotate(3deg) translateY(-6px);z-index:2}
.o-tile.c3{background:#e9edf4;transform:rotate(-2deg) translateY(4px);z-index:3}
.o-tile.c4{background:#f4e6e1;transform:rotate(4deg) translateY(-8px);z-index:4}
.o-tile.c5{background:#eeeee6;transform:rotate(-4deg) translateY(8px);z-index:5}
.o-tile:hover{transform:rotate(0) translateY(-10px);z-index:6}
.o-card{position:relative}
.o-card-art{display:block;width:62%;max-width:280px;height:auto;margin:0 auto auto;transition:opacity .18s}
@media (max-width:900px){.o-tiles{flex-wrap:wrap;gap:18px}.o-tile{flex:0 0 calc(50% - 12px);margin:0;height:auto;min-height:220px}.o-tile.c5{flex-basis:calc(50% - 12px)}}
@media (max-width:520px){.o-tile{flex-basis:100%;min-height:0}.o-tile svg{width:56px;height:56px;margin-bottom:18px}}

.o-narrow{max-width:880px}
.o-narrow .r-rows,.o-narrow .r-ways{text-align:left}
.o-narrow .r-note{text-align:center}
.r-head .o-voices{margin-top:48px}

/* THE USE CASES (cases.js) — click to hear; the pill is the app's: idle 55 x 11, open 34 high
   (app/src/shared/geometry.js idleW/idleH/bodyH). Ink #070709, neutrals = cream at an alpha, as the app. */
.cs{margin:clamp(56px,6vw,80px) auto 0;max-width:1000px;text-align:left}
.cs-desk{position:relative;border-radius:var(--r-frame);background:var(--sand);padding:22px clamp(16px,5vw,72px) 92px}
.cs-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 22px}
.cs-tabs button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px 0 12px;border:0;border-radius:10px;background:transparent;font:500 15px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.cs-tabs button svg{width:11px;height:11px}
.cs-tabs button:hover{color:var(--ink)}
.cs-tabs button[aria-pressed=true]{background:var(--sheet);color:var(--ink);box-shadow:0 1px 2px rgba(21,21,21,.06)}
.cs-win{max-width:720px;margin:0 auto;background:var(--sheet);border-radius:var(--r-win);box-shadow:0 1px 2px rgba(21,21,21,.05),0 18px 40px -22px rgba(21,21,21,.22);cursor:pointer}
.cs-win .rd-pg p{font:400 clamp(19px,1.9vw,23px)/1.6 var(--sans);color:var(--ink);margin:0}
.cs-win .rd-serif p{font-family:var(--serif)}
.cs .w{border-radius:5px;padding:.04em .08em;margin:0 -.08em;transition:color .18s linear,background-color .18s linear}
.cs.is-fresh .w{color:var(--ink-3)}
.cs.is-fresh .w.past,.cs .w.now{color:var(--ink)}
.cs .w.now{background:var(--wash-2)}
.cs [data-skip]{color:var(--ink-3);transition:opacity .25s,text-decoration-color .25s}
.cs .sk-link{text-decoration:underline;text-decoration-color:rgba(21,21,21,.3);text-underline-offset:.16em}
.cs [data-skip].past{opacity:.4;text-decoration:line-through;text-decoration-color:rgba(21,21,21,.45)}
.cs-dock{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.cs-card{order:-1;font:500 13px/1 var(--sans);color:#fbf7eb;background:#070709;padding:8px 12px;border-radius:9px;box-shadow:0 8px 20px -10px rgba(7,7,9,.6);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none;white-space:nowrap}
.cs-card.is-on{opacity:1;transform:none}
.cs-pill{position:relative;display:flex;align-items:center;justify-content:center;width:55px;height:11px;padding:0;border:0;border-radius:99px;background:#070709;box-shadow:inset 0 0 0 1px rgba(251,247,235,.18),0 6px 16px -8px rgba(7,7,9,.55);cursor:pointer;transition:width .32s var(--ease),height .32s var(--ease),box-shadow .25s}
.cs-pill::after,.fl-pill::after{content:"";position:absolute;inset:-14px -10px}
.cs-pill .bars,.fl-pill .bars{display:flex;align-items:center;justify-content:center;gap:3px;height:20px;opacity:0;transition:opacity .2s}
.cs-pill .bars i,.fl-pill .bars i{flex:none;width:3px;height:5px;border-radius:2px;background:rgba(251,247,235,.92);animation:csBar 1.05s ease-in-out infinite paused}
.cs.is-reading .cs-pill,.cs-pill.on{width:96px;height:30px}
.cs.is-reading .cs-pill .bars,.cs-pill.on .bars,.fl.is-reading .fl-pill .bars{opacity:1}
/* every bar its own pace, so the row moves like a voice, not like a metronome */
.cs.is-reading .cs-pill .bars i,.cs-pill.on .bars i,.fl.is-reading .fl-pill .bars i{animation-play-state:running}
:is(.cs-pill,.fl-pill) .bars i:nth-child(2){animation-delay:-.35s;animation-duration:.9s}:is(.cs-pill,.fl-pill) .bars i:nth-child(3){animation-delay:-.7s;animation-duration:1.2s}:is(.cs-pill,.fl-pill) .bars i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}:is(.cs-pill,.fl-pill) .bars i:nth-child(5){animation-delay:-.55s;animation-duration:1.1s}:is(.cs-pill,.fl-pill) .bars i:nth-child(6){animation-delay:-.9s;animation-duration:.95s}:is(.cs-pill,.fl-pill) .bars i:nth-child(7){animation-delay:-.25s;animation-duration:1.25s}:is(.cs-pill,.fl-pill) .bars i:nth-child(8){animation-delay:-.6s;animation-duration:.85s}:is(.cs-pill,.fl-pill) .bars i:nth-child(9){animation-delay:-.4s;animation-duration:1.15s}
@keyframes csBar{0%,100%{height:5px}50%{height:18px}}
.cs-note{margin-top:14px;text-align:center;font-size:15px;color:var(--ink-2);min-height:1.4em}
.cs.is-still .cs-pill .bars i,.fl.is-still .fl-pill .bars i{animation:none}

/* Reading, without the work: the same lines, alone and with LoudFlow */
.o-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1000px;margin:52px auto 0;text-align:left}
.o-vs-c{margin:0;border-radius:var(--r-frame);background:var(--sand);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;min-height:300px}
.o-vs-c figcaption{font:500 14px/1 var(--sans);color:var(--ink-2);margin-bottom:22px}
.o-vs-c p{margin:0;font:400 21px/1.6 var(--sans)}
.o-vs-c.alone p{color:var(--ink-3)}
.o-vs-c.alone mark{background:none;color:var(--ink-2);text-decoration:underline wavy rgba(21,21,21,.25);text-underline-offset:.25em}
.o-vs-c.alone .again{color:rgba(21,21,21,.22)}
.o-vs-c.with p{color:var(--ink-3)}
.o-vs-c.with .w{border-radius:5px;padding:.04em .08em;margin:0 -.08em}
.o-vs-c.with .w.past{color:var(--ink)}.o-vs-c.with .w.now{color:var(--ink);background:var(--wash-2)}
.o-vs-tag{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.o-vs-tag .cs-pill{flex:none;cursor:default}
@media (max-width:760px){.o-vs{grid-template-columns:1fr}.o-vs-c{min-height:0}}
@media (max-width:640px){.cs-desk{padding:14px 10px 84px}}

/* Pricing: the plan's drawing grows with the plan (Claude's pricing on Mobbin, as a value) */
.pl-ic{width:44px;height:44px;margin:0 0 18px -4px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pl-ic .acc{fill:var(--acc)}
.r-plan.pro .pl-ic{stroke:var(--paper)}
.r-plan .nm{font:400 26px/1.1 var(--serif);letter-spacing:-.01em}
.r-plan .pr{font-size:clamp(36px,3.4vw,48px);margin:16px 0 6px}

/* Questions: faint serif numbers on dotted rings (Clay on Mobbin, as a value) */
#rQs,#faq .r-q-set{counter-reset:q}
#rQs .r-q summary,#faq .r-q summary{justify-content:flex-start;align-items:baseline;gap:16px}
#rQs .r-q summary h3,#faq .r-q summary h3{flex:1}
#rQs .r-q summary::before,#faq .r-q summary::before{counter-increment:q;content:counter(q);flex:none;width:26px;height:26px;border-radius:50%;border:1px dotted rgba(21,21,21,.35);display:inline-flex;align-items:center;justify-content:center;font:400 13px/1 var(--serif);color:var(--ink-3);transform:translateY(-1px)}
#rQs .r-q .a,#faq .r-q .a{padding-left:42px}
.r-q{border-bottom-style:dotted}
.r-q:first-of-type{border-top-style:dotted}

/* Voices: each sample is one quiet waveform that fills as it plays (Midday on Mobbin, as a value) */
.r-vrow .ring{display:flex;align-items:center;gap:2px;height:22px;background:none;border-radius:0;overflow:visible;width:auto}
.r-vrow .ring b{display:block;width:2px;border-radius:1px;background:rgba(21,21,21,.16);transition:background .1s}
.r-vrow .ring b.on{background:var(--ink)}
.r-vrow .ring i{display:none}
.r-vrow{grid-template-columns:40px minmax(0,1fr) auto 112px}

/* the second demo lives inside the "With LoudFlow" card */
.cs-mini{margin:0;max-width:none;text-align:left}
.cs-mini .cs-win{max-width:none;margin:0;background:none;box-shadow:none;border-radius:0}
.cs-mini .cs-win p{font:400 21px/1.6 var(--sans);margin:0}
.cs-mini .o-vs-tag{position:relative}
.cs-mini .cs-card{position:absolute;left:0;bottom:50px}
.o-vs-hear{margin-left:8px;color:var(--ink-3);font-weight:400}
.cs.is-sound .cs-pill,.fl.is-sound .fl-pill{box-shadow:inset 0 0 0 1px rgba(251,247,235,.18),0 0 0 4px rgba(21,21,21,.16),0 6px 16px -8px rgba(7,7,9,.55)}
.cs-tabs button svg{width:14px;height:14px}

/* Opennote's coloured closing block, our colour: a pale tint of the green accent */
.o-block{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:32px;max-width:1000px;margin:0 auto;background:var(--hl);border-radius:2px;padding:clamp(32px,5vw,64px);text-align:left}
.o-block .o-h{margin:0}
.o-block .o-lead{margin:14px 0 0;text-align:left}
.o-block .o-acts{justify-content:flex-start}
.o-block .o-note{text-align:left}
.o-block img{width:min(100%,300px);height:auto;justify-self:center}
@media (max-width:760px){.o-block{grid-template-columns:1fr}.o-block img{width:200px}}

/* home: three questions before the end (Wispr and Aqua both ask them on the home page) */
.o-qs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:32px clamp(40px,6vw,96px);max-width:1000px}
.o-qlist{counter-reset:q}
.o-qlist .r-q summary{justify-content:flex-start;align-items:baseline;gap:16px}
.o-qlist .r-q summary h3{flex:1;font:inherit;margin:0}
.o-qlist .r-q summary::before{counter-increment:q;content:counter(q);flex:none;width:26px;height:26px;border-radius:50%;border:1px dotted rgba(21,21,21,.35);display:inline-flex;align-items:center;justify-content:center;font:400 13px/1 var(--serif);color:var(--ink-3);transform:translateY(-1px)}
.o-qlist .r-q .a{padding-left:42px}
.o-more{margin:22px 0 0}
@media (max-width:760px){.o-qs{grid-template-columns:1fr}}

/* THE FLOW (home hero): no tabs; the four apps on one board, read one after another */
.fl{margin:clamp(36px,4vw,52px) auto 0;max-width:1080px;text-align:left}
.fl-board{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);border-radius:var(--r-frame);background:var(--sand);padding:clamp(16px,3vw,36px) clamp(16px,3vw,36px) 128px}
.fl-win{background:var(--sheet);border-radius:var(--r-win);box-shadow:0 1px 2px rgba(21,21,21,.05);cursor:pointer;opacity:.6;transition:opacity .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.fl-win:hover{opacity:.85}
.fl-win.is-on{opacity:1;box-shadow:0 1px 2px rgba(21,21,21,.05),0 22px 44px -24px rgba(21,21,21,.28);transform:translateY(-2px)}
.fl-pg{padding:18px 22px 24px}
.fl-pg p{font:400 clamp(18px,1.55vw,20px)/1.6 var(--sans);color:var(--ink-3);margin:0}
.fl-pg.rd-serif p{font-family:var(--serif)}
.fl .w{border-radius:5px;padding:.04em .08em;margin:0 -.08em;transition:color .18s linear,background-color .18s linear}
.fl .w.past,.fl .w.now{color:var(--ink)}
.fl .w.now{background:var(--wash-2)}
/* the selection the pointer (or you) makes: a soft band of the accent, like selected text in any app */
.fl .w.sel,.fl [data-skip].sel{background:var(--hl);border-radius:0;box-shadow:.27em 0 0 var(--hl);color:var(--ink-2)}
.fl .w.sel.past{color:var(--ink)}
.fl .w.sel.now{background:var(--hl-2);color:var(--ink)}
.fl-pg{cursor:text}
.fl-pg ::selection{background:var(--hl);color:var(--ink)}
.fl-ptr{position:absolute;left:0;top:0;width:18px;height:24px;margin:-3px 0 0 -2px;pointer-events:none;opacity:0;z-index:4;filter:drop-shadow(0 2px 3px rgba(21,21,21,.25))}
.fl-ptr svg{display:block;width:100%;height:100%}
.fl.is-pointing .fl-ptr{opacity:1}
.fl.is-user .fl-ptr{opacity:0!important}
@media (max-width:700px),(pointer:coarse){.fl-ptr{display:none}}
.fl [data-skip]{color:var(--ink-3);transition:opacity .25s,text-decoration-color .25s}
.fl .sk-link{text-decoration:underline;text-decoration-color:rgba(21,21,21,.3);text-underline-offset:.16em}
.fl [data-skip].past{opacity:.4;text-decoration:line-through;text-decoration-color:rgba(21,21,21,.45)}
.fl-dock{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.fl-card{font:500 13px/1 var(--sans);color:#fbf7eb;background:#070709;padding:8px 12px;border-radius:9px;box-shadow:0 8px 20px -10px rgba(7,7,9,.6);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none;white-space:nowrap}
.fl-card.is-on{opacity:1;transform:none}
.fl-pill{position:relative;display:flex;align-items:center;justify-content:center;width:55px;height:11px;padding:0;border:0;border-radius:99px;background:#070709;box-shadow:inset 0 0 0 1px rgba(251,247,235,.18),0 6px 16px -8px rgba(7,7,9,.55);cursor:pointer;transition:width .32s var(--ease),height .32s var(--ease),box-shadow .25s}
.fl.is-reading .fl-pill{width:134px;height:38px}
.fl-pill .bars{gap:4px;height:24px}
.fl-pill .bars i{width:4px}
.fl-pill .bars i{animation-name:flBar}
@keyframes flBar{0%,100%{height:6px}50%{height:22px}}
.fl-pill:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.fl-hint{font-size:14px;color:var(--ink-2);white-space:nowrap}
.fl.is-sound .fl-hint{color:var(--ink)}
@media (max-width:700px){
  .fl-board{grid-template-columns:minmax(0,1fr);padding:14px 10px 120px}
  .fl-win{grid-area:1/1;opacity:0;visibility:hidden;transform:none}
  .fl-win.is-on{opacity:1;visibility:visible;transform:none}
}

/* the moving row of apps under the hero (the live site's band, kept: Lauro "mit dem bewegenden Ding");
   the marks are inline, so none can show as an empty box */
.o-band{margin:clamp(52px,6vw,76px) auto 0;max-width:1080px}
.o-band .o-small{margin:0;font-size:15px;color:var(--ink-2)}
.o-run{margin-top:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.o-row{display:flex;align-items:center;gap:60px;width:max-content;padding-right:60px;animation:oMarq 60s linear infinite}
.o-run:hover .o-row{animation-play-state:paused}
@keyframes oMarq{to{transform:translateX(-50%)}}
.o-app{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:var(--ink-2);font:500 19px/1 var(--sans);letter-spacing:-.01em}
.o-app svg{flex:none;width:20px;height:20px;fill:currentColor;opacity:.8}
@media (max-width:640px){.o-row{gap:40px;padding-right:40px}.o-app{font-size:17px}.o-app svg{width:18px;height:18px}}
@media (prefers-reduced-motion:reduce){.o-row{animation:none}}

/* A voice you like: three voices as three soft cards, each its own waveform */
.o-vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px;margin:52px auto 0;padding:0;list-style:none;text-align:left}
.o-vc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:250px;padding:24px;border:0;border-radius:var(--r-frame);background:var(--sand);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .25s,box-shadow .25s}
.o-vc:hover{background:#eeece6}
.o-vc .pl{width:52px;height:52px;margin-bottom:auto;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center}
.o-vc .pl svg{width:15px;height:15px}.o-vc .pl .pa{display:none}
.o-vc b{margin-top:28px;font:400 clamp(30px,2.8vw,38px)/1 var(--serif);letter-spacing:-.015em}
.o-vc small{font-size:16px;color:var(--ink-2)}
.o-vc .ring{display:flex;align-items:center;justify-content:space-between;gap:2px;width:100%;height:28px;margin-top:18px}
.o-vc .ring b{display:block;flex:none;width:3px;margin:0;border-radius:2px;background:rgba(21,21,21,.18);font:inherit;transition:background .1s}
.o-vc .ring b.on{background:var(--ink)}
.o-vc .ring i{display:none}
.o-vc.is-on{background:var(--sheet);box-shadow:0 1px 2px rgba(21,21,21,.05),0 22px 44px -26px rgba(21,21,21,.3)}
.o-vc.is-on .pl .pp{display:none}.o-vc.is-on .pl .pa{display:block}
@media (max-width:760px){.o-vcards{grid-template-columns:minmax(0,1fr)}.o-vc{min-height:0;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"p n" "p t" "w w";column-gap:16px;row-gap:2px;align-items:center}.o-vc .pl{grid-area:p;margin:0}.o-vc>b{grid-area:n;margin:0}.o-vc small{grid-area:t}.o-vc .ring{grid-area:w}}

/* reveal: the page stands at once; sections only settle in, once */
.r-anim .r-in{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.r-anim .r-in.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r-in{opacity:1;transform:none;transition:none}.rd .w{transition:none}}

/* footer: the big wordmark in full ink, across the content width (hdr.css, 01.11. late) */
.foot{border-top:0}
/* 01.11.: on a phone the place gets its own line, so no "·" is left hanging at the end of "© 2026 LoudFlow" */
@media (max-width:1200px){.foot .ft-dot{display:none}.foot .ft-place{display:block}}   /* phone + 1024: the place on its own line, no lone "Deutsch" */


@media (max-width:980px){
  .r-hero .top,.r-split,.r-split.flip,.r-close,.r-qs,.r-qs.one{grid-template-columns:1fr}
  .r-split.flip>:first-child{order:0}
  .r-voices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-steps{grid-template-columns:1fr}
  .r-qs .grp{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 16px}
}
@media (max-width:640px){
  body{font-size:18px}
  .dk-mon{width:100%;border-width:.7cqi;border-radius:4cqi;padding:2.4cqi}
  .dk-screen{aspect-ratio:4/4.8;border-width:.4cqi;border-radius:2.4cqi}
  .dk-neck{left:calc(50% - 7cqi);width:14cqi;height:8cqi;border-width:.7cqi}.dk-foot{left:calc(50% - 18cqi);width:36cqi;height:3cqi;margin-top:7.6cqi;border-width:.7cqi}
  .dk-floor{border-top-width:.7cqi;bottom:0}.dk-stage{padding-bottom:11.6cqi}
  .dk-fig{display:none}
  .dk-win{border-width:.4cqi;border-radius:2.2cqi}.dk-win.is-on{box-shadow:1.2cqi 1.2cqi 0 0 var(--ink)}
  .dk-bar{height:8cqi;font-size:3cqi;gap:1.4cqi;padding:0 3cqi;border-bottom-width:.4cqi}.dk-bar i{width:2cqi;height:2cqi;border-width:.35cqi}.dk-bar img{width:3.4cqi;height:3.4cqi}
  .dk-body{padding:4.4cqi 5cqi}.dk-body p,.dk-page p[data-say],.dk-page .dk-rest,.dk-notes .dk-body p{font-size:4.3cqi}.dk-body .dk-sub{font-size:4cqi}
  .dk-page .dk-h{font-size:5.2cqi}
  .dk-mail{left:5%;top:5%;width:78%;height:40%}.dk-pdf{left:14%;top:24%;width:80%;height:52%}
  .dk-web{display:none}.dk-notes{left:6%;top:66%;width:62%;height:24%}
  .dk-pill{height:9cqi;font-size:3.4cqi;gap:2cqi;padding:0 4cqi 0 3.4cqi}.dk-pill .bars{gap:.7cqi}.dk-pill .bars i{width:.7cqi}
  .r-hear{height:48px}
  .r-voices,.r-ways,.r-plans{grid-template-columns:1fr}
  .r-rows>li{grid-template-columns:1fr}
  .r-pic{min-height:300px}
  .rd-desk{border-radius:16px;padding:16px 12px 84px}
  .rd-bar{height:38px}
  .st-keys kbd{min-width:52px;height:50px}.st-keys kbd.wide{min-width:110px}
}

/* content loop, 29.10. evening (a review of How, Voices, Pricing, Questions at 1440 and 390) */
body{margin:0}
.r-pic-text{box-sizing:border-box}
.o-stack .r-two{margin-top:40px}
.r-qs.one{max-width:920px;margin-left:auto;margin-right:auto}
.r-rows>li .r-t{color:var(--ink)}
@media (max-width:640px){
  .r-vrow{grid-template-columns:40px minmax(0,1fr) 56px;grid-template-areas:"pl nm ring" "pl tag ring";gap:0 14px}
  .r-vrow .pl{grid-area:pl}.r-vrow>b{grid-area:nm}.r-vrow>small{grid-area:tag}
  .r-vrow .ring{grid-area:ring;width:56px;gap:1px}.r-vrow .ring b{width:1px}
  .st-keys.big{gap:8px;font-size:18px}
  .st-keys.big kbd{box-sizing:border-box;min-width:0;height:64px;padding:0 14px;font-size:18px}
  .st-keys.big kbd.wide{min-width:0;padding:0 22px}
}

/* THE TOP (30.10.2026): Lauro picked touch 3 of five (/one/3) — Opennote's calm hero, no demo, "Finally see the
   whole page.", with the apps you read in floating around it as small turned tiles (Passionfroot on Mobbin).
   The board demo before it is tag rollback/home-board-2026-10-30 and /rollback/home. */
.o-float .o-d{font-size:var(--fs-d);line-height:var(--lh-d)}
.o-float .o-lead{max-width:30ch}
.o-float .o-art{width:clamp(180px,15vw,220px);margin-bottom:22px}
.o-field{position:relative;max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,56px) 0}
.o-fl{position:absolute;width:58px;height:58px;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgba(21,21,21,.35);display:flex;align-items:center;justify-content:center;color:var(--ink);transform:rotate(var(--r));animation:oBob 7s ease-in-out infinite alternate;animation-delay:var(--dl)}
.o-fl svg{width:26px;height:26px;fill:currentColor}
.o-fl.pdf svg{fill:none}
@keyframes oBob{to{transform:rotate(calc(var(--r) * -1)) translateY(-10px)}}
@media (max-width:900px){.o-fl{width:44px;height:44px;border-radius:11px}.o-fl svg{width:20px;height:20px}.o-fl.far{display:none}}
@media (max-width:560px){.o-fl{display:none}.o-fl.keep{display:flex}}
@media (prefers-reduced-motion:reduce){.o-fl{animation:none}}

/* 31.10. no sideways scroll: the five tilted audience cards were wider than 1024 (1140) and, tilted at full width, wider than a phone (404 at 390) */
.o-tiles{max-width:100%}
@media (min-width:901px) and (max-width:1180px){.o-tile{flex:0 1 214px;min-width:0}}
@media (max-width:520px){.o-tile{flex-basis:calc(100% - 28px);margin:0 auto}}

/* ===== SYSTEM (31.10.2026 evening) — the base classes on the tokens. Last in this file, so they win over the older
   rules above; page stylesheets must not restate these values (DESIGN.md rule 1). New pages use these classes only. */
body{font-size:var(--fs-body);margin:0}

/* containers: one wide, one middle, one text column; the gutter is --g */
.r-w{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.r-w.mid{max-width:var(--mid)}.r-w.text{max-width:var(--text)}

/* sections: --top for the first, --sec between all others, --sec under the last */
.r-top,.o-hero,.r-head,.r-hero{padding-top:var(--top)}
.r-sec,.o-sec{padding-top:var(--sec)}
.r-sec.r-end,.o-sec.o-end,.r-sec:last-of-type{padding-bottom:var(--sec)}

/* type */
.r-d,.o-d,.o-float .o-d{font:400 var(--fs-d)/var(--lh-d) var(--serif);letter-spacing:var(--ls-d);margin:0;color:var(--ink);text-wrap:balance}
.r-h,.o-h{font:400 var(--fs-h)/var(--lh-h) var(--serif);letter-spacing:var(--ls-h);margin:0;color:var(--ink);text-wrap:balance}
.r-h3,.r-h.s,.r-qs.one>.r-h{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:-.012em;margin:0;color:var(--ink)}
.r-say{font:400 var(--fs-say)/var(--lh-say) var(--serif);letter-spacing:-.016em}
.r-t{font:500 var(--fs-t)/1.35 var(--sans);margin:0}
.r-lead,.o-lead,.r-head .r-p{font:400 var(--fs-lead)/1.5 var(--sans);color:var(--ink-2);max-width:36ch;margin:18px 0 0;text-wrap:pretty}
.o-lead,.o-hero .r-lead,.r-head .r-p{margin-left:auto;margin-right:auto} /* o- heads were centred from the start */
.r-p{font-size:var(--fs-body);color:var(--ink-2)}
.r-where{font:500 18px/1.2 var(--sans);color:var(--ink-2);margin:0 0 14px}
.r-note,.o-note,.r-os,.o-hint,.o-small,.r-fine{font-size:var(--fs-small);line-height:1.45;color:var(--ink-2)}
.r-os{margin:14px 0 0}

/* the head block — the ONE way a section starts: [drawing] head [lead]; .c centres it. Content follows at --in. */
.r-hd{max-width:var(--text)}
.r-hd.c,.o-c .r-hd{margin-left:auto;margin-right:auto;text-align:center}
.r-hd.c .r-lead,.o-c .r-lead,.o-c .o-lead,.r-head .r-lead{margin-left:auto;margin-right:auto}
.r-hd .r-art{margin:0 0 24px}.r-hd.c .r-art{margin:0 auto 24px}
.r-hd+*{margin-top:var(--in)}

/* buttons: ink (one per screen), ghost (the second choice), text link with an arrow */
.r-acts,.o-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
.o-c .o-acts,.o-c .r-acts,.r-hd.c .r-acts,.r-head .r-acts{justify-content:center}
.r-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn-h);padding:0 24px;border:0;border-radius:var(--r-btn);background:var(--ink);color:var(--paper);font:600 17px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.r-btn svg{width:17px;height:17px}
.r-btn:hover{background:#000}.r-btn:active{transform:scale(.98)}
.r-btn.ghost,.r-plan .r-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.r-btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.r-btn.inv{background:var(--paper);color:var(--ink)}
.r-btn:focus-visible,.r-a:focus-visible,.r-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.r-a{font:500 17px/1 var(--sans);color:var(--ink)}
.r-hear{height:var(--btn-h);border-radius:var(--r-btn);font:500 17px/1 var(--sans)}

/* THE CHIP — the home demo's source chips (Email · PDF · Group chat · Website · Calendar), Lauro's favourite, are the
   site's one chip and one tab: outline pill with a line icon, the chosen one ink. Same look in smart.css .sm-chip. */
.r-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.r-chip,.rd-tabs button,.cs-tabs button{display:inline-flex;align-items:center;gap:9px;height:var(--chip-h);padding:0 20px 0 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(21,21,21,.14);font:500 18px/1 var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.r-chip svg,.r-chip img{width:20px;height:20px;flex:none}
.r-chip svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.r-chip:hover,.rd-tabs button:hover,.cs-tabs button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(21,21,21,.35)}
.r-chip.on,.r-chip[aria-pressed=true],.r-chip[aria-selected=true],.r-chip[aria-current=page],
.rd-tabs button[aria-pressed=true],.o-reader .rd-tabs button[aria-pressed=true],.cs-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.rd-tabs,.cs-tabs{gap:8px}
/* a chip row sits on the frame it switches: 0–12 px above its top edge */
.r-chips+.r-frame,.r-chips+.r-win{margin-top:12px}

/* frames: sand stage (optionally grid paper), white app window inside it, white card on paper. One radius each. */
.r-frame{position:relative;background:var(--sand);border-radius:var(--r-frame);box-shadow:var(--ring);padding:clamp(28px,5vw,72px) clamp(16px,5vw,72px)}
.r-frame.grid{background-image:linear-gradient(rgba(21,21,21,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,21,.035) 1px,transparent 1px);background-size:26px 26px}   /* 02.11.: lighter grid (.055 -> .035), minimal/light round */
.r-win{background:var(--sheet);border-radius:var(--r-win);box-shadow:var(--sh-win);overflow:hidden}
.r-card{background:var(--sheet);border-radius:var(--r-frame);box-shadow:var(--ring);padding:clamp(24px,3vw,40px)}
.rd-desk,.cs-desk,.fl-board,.o-card,.o-steps .pic,.r-steps .pic,.r-way,.r-plan,.o-vs-c,.o-vc,.r-pic-text,.o-stack .r-pic{border-radius:var(--r-frame)}
.rd-win,.cs-win,.st-win,.fl-win{border-radius:var(--r-win)}

/* icon tile: a small white square with one line icon (sources, platforms, apps) */
.r-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--r-btn);background:var(--sheet);box-shadow:var(--ring);color:var(--ink)}
.r-ic svg,.r-ic img{width:22px;height:22px}
.r-ic svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* drawings: ink only (the teal fills of older drawings show as grey), one per section, three sizes */
.r-art,.o-art.s{display:block;width:var(--art);height:auto;margin:0 auto 24px}
.r-art.l,.o-art,.o-float .o-art{display:block;width:var(--art-l);height:auto;margin:0 auto 24px}
.r-art.s{width:var(--art-s)}
/* 02.11.: no drawing in /illus/ carries teal any more (it became sand, #e2d6b8), so the grey filter that hid it is gone
   and the sand stays warm. Old root /o-* files keep it. */
main img[src^="/o-"]{filter:grayscale(1)}

/* hairline rows and questions */
.r-rows>li,.r-q summary{border-color:var(--line)}
.r-q summary{font:500 var(--fs-t)/1.4 var(--sans)}
.r-q .a{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}

/* the closing block — every page ends the same way: drawing, head, [lead], ink button, platform line; centred */
.o-block,.r-end-b{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--text);margin:0 auto;padding:0;background:none;border-radius:0}
.o-block>div{display:flex;flex-direction:column;align-items:center}
section>.o-block{max-width:min(var(--text),calc(100% - 2 * var(--g)))} /* a closing block not inside .r-w keeps the side gutter on phones */
.o-block>img,.o-block>.hm-swing-w,.r-end-b>img{order:-1;width:var(--art-l);max-width:100%;height:auto;margin:0 0 28px}
.o-block .o-h,.o-block .r-h{margin:0}
.o-block .o-lead,.o-block .r-lead,.o-block .o-note{text-align:center;margin-left:auto;margin-right:auto}
.o-block .o-acts,.o-block .r-acts{justify-content:center}

/* text selection inside demos: the sand band, never mint */
.rd.is-selected .rd-pg .band,.dk-win.is-sel [data-say] .band{background:var(--hl)}
.cs.is-sound .cs-pill,.fl.is-sound .fl-pill{box-shadow:inset 0 0 0 1px rgba(251,247,235,.18),0 0 0 4px rgba(21,21,21,.14),0 6px 16px -8px rgba(7,7,9,.55)}

@media (max-width:640px){
  .r-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--g) * -1);margin-right:calc(var(--g) * -1);padding:2px var(--g)}
  .r-chips::-webkit-scrollbar{display:none}
  .r-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} /* the row scrolls: its right edge fades */
  .r-chip{padding:0 16px 0 13px} /* height + 18 px stay as on desktop, like the home chips (rule 7) */
}
@media (prefers-reduced-motion:reduce){.r-btn,.r-chip{transition:none}}
@media (max-width:480px){.rd-tabs.r-chips{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none}}

/* ===== "LoudFlow thinks along": the shared sheet stack (01.11. late, STYLE-OPENNOTE-WISPR.md §7; Opennote 7683757c).
   The page agents of the minimal round each kept their own copy (t-how .th2-sheets, t-tts .xtts-sheets, …) with the same
   geometry; new pages use this one. Sand and white alternate, r20, hairline, −6°…+3°, slight overlap; 3-5 sheets.
   Phone: one straight column. Reduced motion: no tilt, no settle. Markup: ul.r-sheets > li.r-in > p.r-sheet-in + p.r-sheet-out */
.r-sheets{list-style:none;margin:0 auto;padding:12px 0;max-width:var(--max);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));align-items:start}
.r-sheets>li{position:relative;min-height:190px;padding:28px 26px 30px;border-radius:var(--r-frame);background:var(--sand);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:18px;text-align:left;transition:opacity .7s var(--ease),transform .7s var(--ease),rotate .9s var(--ease)}
.r-sheets>li+li{margin-left:-18px}
.r-sheets>li:nth-child(even){background:var(--sheet)}
.r-sheets>li:nth-child(1){rotate:-6deg;margin-top:18px;z-index:1}
.r-sheets>li:nth-child(2){rotate:2deg;z-index:2}
.r-sheets>li:nth-child(3){rotate:-3deg;margin-top:26px;z-index:3}
.r-sheets>li:nth-child(4){rotate:3deg;margin-top:6px;z-index:4}
.r-sheets>li:nth-child(5){rotate:-2deg;margin-top:20px;z-index:5}
.r-anim .r-sheets>li.r-in:not(.is-in){rotate:-8deg}
.r-sheet-in{margin:0;font:400 var(--fs-small)/1.45 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.r-sheet-out{margin:0;font:400 var(--fs-h3)/1.2 var(--serif);color:var(--ink);text-wrap:balance}
.r-sheet-k{display:block;margin:0 0 6px;font:500 var(--fs-small)/1.2 var(--sans);color:var(--ink-3)}
@media (min-width:821px) and (max-width:1100px){.r-sheets{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;row-gap:20px}.r-sheets>li+li{margin-left:0}.r-sheets>li:nth-child(even){margin-left:-18px}}
@media (max-width:820px){.r-sheets{grid-template-columns:1fr;max-width:420px;gap:16px}.r-sheets>li{min-height:0;margin:0!important;rotate:none!important}}
@media (prefers-reduced-motion:reduce){.r-sheets>li{rotate:none!important;transition:none}}

/* ===== THE ASK — help pages end here instead of the closing block (01.11. night; Opennote's "Have questions?" as a
   composition only): one small ink spark, a serif head, one grey line, one OUTLINE button. Used on /faq, /guide,
   /contact, /report. No download button here: these pages are for people who already have the app. */
.r-ask{text-align:center}
.r-ask-b{display:flex;flex-direction:column;align-items:center}
.r-ask-mark{display:block;width:76px;height:auto;margin:0 0 20px}
.r-ask .r-h{margin:0}
.r-ask-l{font:400 var(--fs-lead)/1.5 var(--sans);color:var(--ink-2);max-width:32ch;margin:14px 0 0;text-wrap:pretty}
.r-ask .r-btn.ghost{margin-top:28px;padding:0 26px}

/* 02.11.2026 (Lauro: "viel weniger Text"): three example sheets, not four, on how / read-emails / read-websites / students /
   teams / text-to-speech; the four-column grids become three on the 960 line (element + class beats each page's own rule) */
@media (min-width:1101px){ul.th2-sheets,ul.xstu-sheets,ul.xrwa-sheets,ul.xtts-sheets,ul.xtm-sheets{grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--mid)}}

/* 02.11. later: every reading demo's tabs (smart.js .sm-chip) are Opennote's tab row, like the home's: plain words, a thin
   ink line under the chosen one, 36 tall, 16 px, the line icon kept (Playbook §0). On a phone they wrap onto centred lines. */
.sm .sm-src{gap:6px 22px}
.sm .sm-chip{height:36px;padding:0 2px;gap:7px;border-radius:0;font-size:16px;background:transparent;box-shadow:none;color:var(--ink-2)}
.sm .sm-chip svg{width:16px;height:16px}
.sm .sm-chip:hover{color:var(--ink);box-shadow:none}
.sm .sm-chip.on{background:transparent;color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink);padding:0 2px}
.sm .sm-chip:not(.on) span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
@media (max-width:700px){.sm .sm-src{flex-wrap:wrap;justify-content:center;overflow:visible;padding:0;gap:4px 18px;-webkit-mask-image:none;mask-image:none}.sm .sm-chip{height:36px;padding:0 2px;font-size:16px}}
/* ...and the reader demos' tab rows (text-to-speech, Wispr Flow page: .rd-tabs) the same way */
main .rd-tabs.r-chips{gap:6px 22px}
main .rd-tabs.r-chips button{height:36px;padding:0 2px;gap:7px;border-radius:0;font:500 16px/1 var(--sans);background:transparent;box-shadow:none;color:var(--ink-2)}
main .rd-tabs.r-chips button svg{width:16px;height:16px}
main .rd-tabs.r-chips button:hover{color:var(--ink);box-shadow:none;background:transparent}
main .rd-tabs.r-chips button[aria-pressed=true],main .rd-tabs.r-chips button[aria-selected=true],main .rd-tabs.r-chips button.on{background:transparent;color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}
@media (max-width:700px){main .rd-tabs.r-chips{flex-wrap:wrap;justify-content:center;overflow:visible;margin-left:0;margin-right:0;padding:0;gap:4px 18px;-webkit-mask-image:none;mask-image:none}}