/* How it works — on the site system (r.css SYSTEM block, DESIGN.md). Only what the system does not have lives here:
   the demo stage's inner spacing, the three-step pictures, the app line, the hairline rows' grid and the two sound marks.
   No own type sizes, section padding, radius or colour (DESIGN.md rule 1). Prefix th2-. */
.th2-c{text-align:center;justify-content:center}
.th2-d span{display:inline-block}

/* the demo sits in the hero, right under the head block (rule 5: the product in the first screen) */
.th2-stage{max-width:var(--mid);margin-left:auto;margin-right:auto}
.th2-rd.r-frame{padding:0;margin:0}
.th2-rd .rd-desk{background:none;padding:clamp(40px,6vw,80px) clamp(16px,6vw,96px) clamp(104px,10vw,128px)}
.th2-rd .rd-win{box-shadow:var(--sh-win)}
.th2-rd .rd-bar b,.th2-rd .rd-pill{font-size:var(--fs-small)}

/* three steps: three columns with hairlines between them, each a small real picture */
.th2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.th2-steps li{padding:8px clamp(20px,3vw,44px) 4px;display:flex;flex-direction:column;align-items:center}
.th2-steps li+li{border-left:1px solid var(--line)}
.th2-steps .r-p{margin:12px auto 0;max-width:24ch;text-wrap:balance}
.th2-pic{height:150px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.th2-sel{margin:0;max-width:270px;text-align:left;font:400 var(--fs-body)/1.55 var(--sans);color:var(--ink-3)}
.th2-sel mark{background:var(--hl);color:var(--ink);padding:.06em .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.th2-keys{display:flex;align-items:center;gap:10px;white-space:nowrap;font:500 var(--fs-body)/1 var(--sans);color:var(--ink-3)}
.th2-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:58px;padding:0 16px;border-radius:var(--r-btn);background:var(--sheet);border:1px solid var(--line-2);border-bottom-width:3px;font:500 var(--fs-body)/1 var(--sans);color:var(--ink)}
.th2-keys kbd.w{min-width:132px}
.th2-mini{display:inline-flex;align-items:center;gap:11px;height:var(--chip-h);padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 var(--fs-body)/1 var(--sans)}
.th2-mini .bars{display:flex;gap:3px;align-items:center;height:18px}
.th2-mini .bars i{width:3px;height:6px;border-radius:2px;background:var(--paper);animation:th2Bar 1.1s ease-in-out infinite}
.th2-mini .bars i:nth-child(2){animation-delay:-.25s}.th2-mini .bars i:nth-child(3){animation-delay:-.5s}
.th2-mini .bars i:nth-child(4){animation-delay:-.75s}.th2-mini .bars i:nth-child(5){animation-delay:-.95s}
@keyframes th2Bar{0%,100%{height:5px}50%{height:16px}}

/* 01.11. late: "LoudFlow thinks along" — the one tilted sheet stack (STYLE-OPENNOTE-WISPR.md §7, Opennote 7683757c):
   sand and white sheets, r20, hairline, −8°…+3°, overlapping a little; still and straight under reduced motion and on a phone */
.th2-sheets{list-style:none;margin-left:auto;margin-right:auto;padding:12px 0;max-width:var(--mid);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.th2-sheets li{position:relative;min-height:220px;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)}
.th2-sheets li+li{margin-left:-18px}
.th2-sheets li:nth-child(even){background:var(--sheet)}
.th2-sheets li:nth-child(1){rotate:-6deg;margin-top:18px;z-index:1}
.th2-sheets li:nth-child(2){rotate:2deg;z-index:2}
.th2-sheets li:nth-child(3){rotate:-3deg;margin-top:26px;z-index:3}
.th2-sheets li:nth-child(4){rotate:3deg;margin-top:6px;z-index:4}
/* on entering the view the sheets settle once from a little more tilt to their resting tilt (§8) */
.r-anim .th2-sheets li.r-in:not(.is-in){rotate:-8deg}
.th2-raw{margin:0;font:400 var(--fs-small)/1.45 var(--sans);color:var(--ink-3);overflow-wrap:anywhere}
.th2-say{margin:0;font:400 var(--fs-h3)/1.2 var(--serif);color:var(--ink);text-wrap:balance}

/* apps: names in a quiet centred line, no boxes */
.th2-apps{list-style:none;margin-left:auto;margin-right:auto;padding:0;max-width:640px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 32px}
.th2-apps li{display:flex;align-items:center;gap:10px;font:400 var(--fs-body)/1.2 var(--sans);color:var(--ink)}
.th2-apps img{width:22px;height:22px;filter:grayscale(1) contrast(.9);opacity:.8}
.th2-apps+.r-note{margin:40px auto 0}

/* while it reads: the system's hairline rows (.r-rows), serif title left, one sentence right */
.th2-rows .r-p{margin:0;max-width:none;padding-top:3px}
.th2-rows+.r-acts{margin-top:32px}
.th2-rows kbd{font-size:var(--fs-small)}


@media (max-width:820px){
  .th2-sheets{grid-template-columns:1fr;max-width:420px;gap:16px}
  .th2-sheets li{min-height:0;margin:0!important;rotate:none!important}
  .th2-steps{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .th2-steps li{padding:40px 0}
  .th2-steps li:first-child{padding-top:0}
  .th2-steps li+li{border-left:0;border-top:1px solid var(--line)}
  .th2-pic{height:auto;min-height:96px;margin-bottom:22px}
}
@media (max-width:520px){
  .th2-keys kbd{min-width:58px;height:52px}.th2-keys kbd.w{min-width:112px}
}
@media (prefers-reduced-motion:reduce){.th2-sheets li{rotate:none!important;transition:none}.th2-mini .bars i{animation:none}.th2-mini .bars i:nth-child(odd){height:12px}}
@media (min-width:821px) and (max-width:1100px){.th2-sheets{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;row-gap:20px}.th2-sheets li+li{margin-left:0}.th2-sheets li:nth-child(even){margin-left:-18px}}