/* Общая бумажная сцена трёх новых страниц. */
.w1-hero { padding: clamp(48px, 6vw, 88px) 0 64px; }
.w1-hero h1 { margin-top: 18px; max-width: 15ch; }
.w1-hero .lead { max-width: 49ch; }
.w1-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.w1-grid > *, .w1-two > *, .w1-three > * { min-width: 0; }
.w1-crumb { font-size: 13px; color: var(--muted); margin-bottom: 30px; }
.w1-crumb a { color: inherit; text-decoration: none; }
.w1-crumb a:hover { color: var(--accent); }
.w1-crumb span { padding-inline: 9px; }
.w1-desk { position: relative; padding: clamp(22px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--r-l); background: repeating-linear-gradient(96deg, transparent 0 39px, color-mix(in srgb, var(--desk-2) 35%, transparent) 40px 41px), var(--desk); }
.w1-paper { position: relative; color: var(--on-sheet); background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 4px 4px 9px 5px; box-shadow: var(--shadow-2), 3px 5px 0 var(--sheet-edge), 5px 8px 0 var(--sheet); }
.w1-paper.lined { background-image: linear-gradient(90deg, transparent 29px, var(--margin-red) 29px 30px, transparent 30px), repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); }
.w1-paper.grid { background-image: repeating-linear-gradient(90deg, transparent 0 23px, var(--rule) 23px 24px), repeating-linear-gradient(transparent 0 23px, var(--rule) 23px 24px); }
.w1-tape::before { content: ''; position: absolute; width: 88px; height: 23px; left: calc(50% - 44px); top: -12px; background: var(--tape); transform: rotate(-5deg); z-index: 1; }
.w1-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--on-sheet-muted); }
.w1-caption { font-size: 13px; color: var(--muted); margin-top: 18px; }
.w1-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.w1-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.w1-card { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); background: var(--paper); }
.w1-card > p { color: var(--muted); margin-top: 12px; }
.w1-card .hand { color: var(--accent); }
.w1-num { display: block; color: var(--accent); font: 600 2.4rem/1 var(--hand); margin-bottom: 14px; }
.w1-list { padding-left: 20px; color: var(--muted); margin: 16px 0 0; }
.w1-list li + li { margin-top: 9px; }
.w1-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 26px; }
.w1-toolbar > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.w1-toolbar .w1-control-label { font-size: 13px; color: var(--muted); }
.w1-final { padding: 80px 0; text-align: center; background: var(--stage); }
.w1-final h2 { max-width: 21ch; margin-inline: auto; }
.w1-final .lead { margin-inline: auto; }
.w1-faq { margin-top: 36px; }
.w1-inline-note { padding: 18px 22px; border-left: 3px solid var(--accent); color: var(--muted); background: var(--accent-soft); border-radius: 0 var(--r-s) var(--r-s) 0; margin-top: 28px; }
.w1-js-only { display: none; }
.js .w1-js-only { display: flex; }
.w1-demo-note { display: block; margin-top: 18px; font-size: 13px; color: var(--muted); }
html:not(.js) .how-preview canvas, html:not(.js) .machine-paper canvas { display: none; }
@media (max-width: 960px) { .w1-grid { grid-template-columns: 1fr; } .w1-hero h1 { max-width: 19ch; } .w1-three { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .w1-two { grid-template-columns: 1fr; } .w1-hero { padding-top: 32px; } .w1-desk { padding: 22px 16px; } .w1-crumb { margin-bottom: 24px; } .w1-final { padding: 60px 0; } }