/* Главная (20.10.2026) — сцена по образцу русской h5-story: первый экран, телефон с живыми экранами, вырезки.
   Два режима. Без класса tw-on (нет JS или prefers-reduced-motion) — шаги идут подряд: подпись и свой телефон у каждого.
   С tw-on (home.js) — сцена липнет к экрану, один телефон поворачивается и меняет экран, подписи сменяются, вырезки
   перелетают. Внутри телефона размеры в em от ширины телефона (--pw). Двигаем только transform и opacity. */

.tw-home .tw-main{padding-top:0}
.tw-story{position:relative;z-index:1}
.tw-stage{position:relative}

/* ---------- первый экран ---------- */
.tw-hero{position:relative;z-index:6;padding:clamp(96px,13vh,140px) 16px 0;text-align:center}
.tw-hero h1{max-width:13.5em;margin:0 auto;font-weight:820;font-size:clamp(40px,5.4vw,96px);line-height:.98;letter-spacing:-.05em}
.tw-hero h1 em{display:block;font-style:normal;font-weight:300;letter-spacing:-.055em}
.tw-verbs{margin:22px auto 0;font-size:clamp(19px,1.7vw,27px);font-weight:350;line-height:1.35;letter-spacing:-.015em}
.tw-verbs a{font-weight:620;text-decoration:none;padding-bottom:5px;background-repeat:no-repeat;background-position:0 100%;background-size:100% 9px}
.tw-verbs .tw-u1{background-image:var(--tw-u1)} .tw-verbs .tw-u2{background-image:var(--tw-u2)} .tw-verbs .tw-u3{background-image:var(--tw-u3)}
/* 21.10: короткий ответ «что это» — между строкой глаголов и формой: сначала объясняем, потом просим почту */
.tw-hero-p{max-width:36em;margin:18px auto 0;font-size:clamp(16px,1.25vw,18px);font-weight:400;line-height:1.5;color:var(--tw-ink-2);text-wrap:pretty}
.tw-wait-hero{max-width:540px;margin:22px auto 0;text-align:left}
.tw-wait-hero .tw-form{margin-top:0}
.tw-wait-hero .tw-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tw-wait-hero .tw-form-row{flex-wrap:nowrap}
.tw-wait-hero .tw-btn-sun{flex:none}
.tw-wait-hero .tw-small{text-align:center}
.tw-form-note a{color:inherit;font-weight:600}

/* ---------- шаги подряд (без JS) ---------- */
.tw-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:30px 60px;align-items:center;max-width:var(--tw-wrap);margin:0 auto;padding:70px var(--tw-gut) 0}
.tw-step-ph{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}
.tw-cap h2{font-weight:780;font-size:clamp(34px,4.4vw,72px);line-height:.98;letter-spacing:-.045em}
.tw-cap h2 span{font-weight:300;letter-spacing:-.05em}
.tw-cap-lead{margin-top:14px;max-width:25em;font-size:clamp(16px,1.3vw,19px);line-height:1.42;color:var(--tw-ink)}
/* вкладки на самом телефоне (правка Павла 20.10): уровни A1–B2 — строкой под шапкой текста, Spain | Mexico — в шапке
   разговора вместо имени. Видимая кнопка мелкая, как в приложении; нажимается полоса 44 px (::after). */
.tw-ph-tabs{display:flex;gap:.3em}
.tw-ph-tabs[hidden],.tw-ph-who [hidden]{display:none}
.tw-ph-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35em;padding:.38em .6em;border-radius:.65em;border:1px solid rgba(23,20,15,.2);background:#fff;font:inherit;font-size:.8em;font-weight:650;line-height:1.1;color:var(--tw-ink-2);cursor:pointer;white-space:nowrap}
.tw-ph-tab[aria-pressed="true"]{background:var(--tw-ink);border-color:var(--tw-ink);color:#FBF8F2}
.tw-ph-tab::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.tw-ph-tab:focus-visible{outline:2px solid var(--tw-link);outline-offset:2px}
.tw-ph-tab .tw-dot{width:.72em;height:.72em}
.tw-ph-tab[aria-pressed="true"] .tw-dot{box-shadow:0 0 0 1.5px #FBF8F2}
.tw-scr-read .tw-ph-bar{flex-wrap:wrap;row-gap:.6em}
.tw-scr-read .tw-ph-tabs{flex-basis:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tw-ph-who{min-width:0}
.tw-scr-talk .tw-ph-bar{flex-wrap:wrap;row-gap:.6em}
.tw-scr-talk .tw-ph-who{flex:1}
.tw-ph-vsw{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
/* пометки «проверить до выкладки» на главной не видны: флаги остались в данных, --release их держит */
.tw-home .tw-flag{text-decoration:none}
.tw-dot{width:10px;height:10px;border-radius:50% 46% 52% 48%;background:var(--tw-es);flex:none}
.tw-dot-es-mx{background:var(--tw-mx)}
.tw-tag[aria-pressed="true"] .tw-dot{box-shadow:0 0 0 2px #FBF8F2}

/* ---------- телефон ---------- */
.tw-phone{--pw:min(300px,80vw);position:relative;width:var(--pw);flex:none}
.tw-ph-body{position:relative;border-radius:calc(var(--pw) * .15);background:#1E1B17;padding:calc(var(--pw) * .035);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),7px 6px 0 #3B352D,0 40px 50px -34px rgba(40,25,10,.65)}
.tw-ph-screen{position:relative;min-height:calc(var(--pw) * 1.9);border-radius:calc(var(--pw) * .12);overflow:hidden;background:#FBF8F2;font-size:calc(var(--pw) * .046);line-height:1.38;color:var(--tw-ink)}
.tw-ph-island{position:absolute;top:.7em;left:50%;width:28%;height:1.5em;margin-left:-14%;border-radius:1em;background:#0d0c0b;z-index:6}
.tw-ph-glare{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;background:radial-gradient(70% 45% at 30% 18%,rgba(255,255,255,.36),transparent 70%),linear-gradient(115deg,rgba(255,255,255,.12) 0%,transparent 35%)}
.tw-ph-sample{position:absolute;z-index:10;right:calc(var(--pw) * -.1);top:calc(var(--pw) * -.05);padding:.55em .7em .4em;font-size:max(11px,calc(var(--pw) * .042));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink);transform:rotate(8deg);
  background:linear-gradient(var(--tw-tape),var(--tw-tape)) 50% 0/2.4em .45em no-repeat,var(--tw-y);box-shadow:0 0 0 1px rgba(23,20,15,.1),0 6px 12px -8px rgba(60,40,20,.6)}
.tw-step:not(:first-of-type) .tw-phone:nth-child(2) .tw-ph-sample{right:auto;left:calc(var(--pw) * -.08);transform:rotate(-7deg)}
.tw-phone-es-mx{transform:rotate(1.5deg)} .tw-phone-es-es{transform:rotate(-1.5deg)}

/* экраны: шапка, поля, подсказки */
.tw-scr{position:relative}
.tw-ph-bar{position:relative;z-index:4;display:flex;align-items:center;gap:.7em;padding:2.5em 1.1em .8em;background:#FBF8F2;box-shadow:0 1px 0 rgba(23,20,15,.08)}
.tw-ph-bar b{display:block;font-weight:650;font-size:1.05em}
.tw-ph-bar small{display:block;font-size:.78em;color:var(--tw-ink-3)}
.tw-ph-bar small.live{color:var(--tw-ok)}
.tw-scr-cards .tw-ph-bar{justify-content:space-between}
.tw-ph-back{font-size:1.4em;line-height:1;color:var(--tw-ink-3)}
.tw-ph-pad{padding:1em 1.1em 1.3em}
.tw-ph-h{font-size:1.55em;font-weight:760;letter-spacing:-.025em;line-height:1.08}
.tw-ph-hint{margin-top:.8em;font-size:.78em;color:var(--tw-ink-3)}
.tw-ph-h+.tw-ph-hint{margin-top:.3em}
.tw-ph-title{font-size:1.4em;font-weight:740;letter-spacing:-.02em;line-height:1.15}
.tw-ph-tag{margin-bottom:.5em}
.tw-ph-tag .tw-badge{min-height:0;padding:0;font-size:.78em}
/* интересы */
.tw-ph-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.tw-ph-chips li{display:inline-flex;align-items:center;gap:.4em;padding:.45em .85em .45em .55em;border-radius:1.4em;background:#fff;font-weight:650;font-size:.95em;box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.22);transition:background .3s,color .3s,transform .3s}
.tw-ph-chips li:not(:has(img)){padding-left:.85em}
.tw-ph-chips img{width:1.7em;height:1.7em;object-fit:contain;margin:-.3em 0}
.tw-ph-chips li.on{background:var(--tw-ink);color:#FBF8F2;box-shadow:none;transform:rotate(-1.5deg)}
.tw-ph-chips li.on::after{content:"✓";font-weight:700}
.tw-ph-lv{display:flex;justify-content:space-between;align-items:center;margin-top:1.4em;padding:.7em .9em;border-radius:.8em;background:#F1EBDF;font-size:.9em;color:var(--tw-ink-2)}
.tw-ph-lv b{display:inline-grid;place-items:center;min-width:2.4em;padding:.1em .4em;border:1.5px solid var(--tw-ink);border-radius:.3em;color:var(--tw-ink);transform:rotate(-3deg)}
.tw-ph-seg{display:flex;align-items:center;gap:.3em;margin-top:1.1em;font-size:.9em;color:var(--tw-ink-2)}
.tw-ph-seg span{flex:1}
.tw-ph-seg i{font-style:normal;padding:.35em .75em;border-radius:1em;font-weight:650;color:var(--tw-ink);box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.22);background:#fff}
.tw-ph-seg i.on{background:var(--tw-es);color:#FBEBD8;box-shadow:none}
.tw-ph-lv+.tw-ph-go,.tw-ph-seg+.tw-ph-lv{margin-top:.7em}
.tw-ph-en{margin-top:.6em}
.tw-ph-en summary{display:flex;width:max-content;min-height:44px;margin:-12px 0;align-items:center;gap:.4em;cursor:pointer;list-style:none;font-size:.82em;font-weight:650}
.tw-ph-en summary::-webkit-details-marker{display:none}
.tw-ph-en summary::before{content:"";width:1.1em;height:.8em;border:1.5px solid currentColor;border-radius:2px;background:var(--tw-u3) 0 100%/100% .3em no-repeat}
.tw-ph-en p{margin-top:.4em;padding:.6em .7em;font-size:.84em;line-height:1.4;background:var(--tw-y);box-shadow:0 .4em .7em -.5em rgba(60,40,20,.5)}
.tw-ph-en p[hidden]{display:none}
.tw-ph-import{display:flex;justify-content:space-between;align-items:center;margin-top:1.3em;padding:.75em .9em;border-radius:.8em;border:1.5px dashed rgba(23,20,15,.3);font-size:.86em;font-weight:650;color:var(--tw-ink-2)}
.tw-ph-sub{margin-top:2.2em;font-size:.72em;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-2)}
.tw-ph-first{display:flex;align-items:center;gap:.7em;margin-top:.5em;padding:.7em;border-radius:.9em;background:#fff;box-shadow:0 1px 0 rgba(23,20,15,.08),0 6px 14px -10px rgba(60,40,20,.5)}
.tw-ph-first img{width:2.6em;height:2.6em;object-fit:contain}
.tw-ph-first b{display:block;font-size:1em;font-weight:750;letter-spacing:-.01em}
.tw-ph-first small{display:block;margin-top:.15em;font-size:.8em;color:var(--tw-ink-2)}
.tw-ph-more{list-style:none;margin:.5em 0 0;padding:0}
.tw-ph-more li{display:flex;justify-content:space-between;gap:.6em;padding:.55em .1em;border-bottom:1px dashed rgba(23,20,15,.18);font-size:.9em}
.tw-ph-more b{font-weight:650}
.tw-ph-more span{color:var(--tw-ink-2)}
.tw-ph-go{display:flex;align-items:center;justify-content:center;margin-top:1.2em;height:2.9em;border-radius:1.5em;background:var(--tw-ink);color:#FBF8F2;font-weight:650;font-size:.95em}
/* текст */
.tw-ph-text{margin-top:.7em;font-size:1.06em;line-height:1.6}
.tw-ph-text[hidden]{display:none}
.tw-ph-text .tw-w{background-size:3px 1px}
/* подкаст */
.tw-ph-ep{display:flex;align-items:center;gap:.8em}
.tw-ph-cover{position:static;width:3.8em;height:3.8em;padding:.3em;border-radius:.8em;background:var(--tw-b);object-fit:contain;flex:none;transform:rotate(-4deg);filter:none}
.tw-ph-ep .tw-ph-title{font-size:1.1em}
.tw-ph-sub{margin-top:.2em;font-size:.78em;color:var(--tw-ink-3)}
.tw-ph-player{display:flex;align-items:center;gap:.6em;margin-top:1em;padding:.6em .7em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tw-ph-play{position:relative;display:grid;place-items:center;flex:none;width:2.8em;height:2.8em;border-radius:50%;background:var(--tw-es)}
.tw-ph-play::after{content:"";position:absolute;inset:-.9em}
.tw-ph-play svg{width:1.1em;height:1.1em;fill:#FBEBD8}
.tw-ph-play[hidden]{display:none}
.tw-ph-play:not(.playing)::before{content:"";position:absolute;inset:-.35em;border-radius:50%;border:2px solid var(--tw-es);opacity:0;animation:tw-ring 2s infinite}
@keyframes tw-ring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.3);opacity:0}}
.tw-ph-wave{display:flex;align-items:center;gap:.14em;flex:1;height:2em}
.tw-ph-wave i{flex:1;min-width:2px;height:calc(var(--h) * 100%);border-radius:2px;background:#D4C6B2;transition:background .15s}
.tw-ph-wave i.p{background:var(--tw-es)}
.tw-ph-time{font-size:.74em;color:var(--tw-ink-3);font-variant-numeric:tabular-nums}
.tw-ph-cues{list-style:none;padding:0;margin-top:.8em;display:grid;gap:.3em}
.tw-ph-cues li{display:grid;gap:.1em;padding:.45em .6em;border-left:.22em solid transparent;border-radius:0 .6em .6em 0;transition:background .2s}
.tw-ph-cues li.on{background:rgba(245,192,12,.36);border-left-color:var(--tw-ink)}
.tw-ph-cues b{font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tw-ph-cues .c-r b{color:var(--tw-es)} .tw-ph-cues .c-d b{color:var(--tw-mx)}
.tw-ph-cues span{font-size:.92em;line-height:1.35}
.tw-ph-cues small{font-size:.74em;color:var(--tw-ink-3);line-height:1.3}
/* разговор */
.tw-ph-ava{display:grid;place-items:center;flex:none;width:2.5em;height:2.5em;border-radius:50%;background:var(--tw-es);color:#FBEBD8;font-weight:700}
.tw-ava-es-mx{background:var(--tw-mx);color:#E6F4EA}
.tw-ph-log{position:relative;padding:.9em .85em 1.2em}
.tw-ph-logi{display:flex;flex-direction:column;gap:.62em;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tw-ph-day{align-self:center;font-size:.7em;font-weight:650;letter-spacing:.04em;color:var(--tw-ink-3);background:rgba(0,0,0,.05);padding:.25em .8em;border-radius:1em}
.tw-ph-msg{align-self:flex-start;max-width:92%;padding:.62em .8em;background:#fff;border-radius:1.1em 1.1em 1.1em .3em;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tw-ph-me{align-self:flex-end;background:#EDE7FA;border-radius:1.1em 1.1em .3em 1.1em}
.tw-ph-from{display:block;margin-bottom:.25em;font-size:.68em;font-weight:650;color:var(--tw-ink-3)}
.tw-ph-p .tw-ph-from{color:var(--tw-es)}
.tw-scr-talk[data-v="es-MX"] .tw-ph-p .tw-ph-from{color:var(--tw-mx)}
.tw-ph-msg .es{font-size:.92em;line-height:1.36}
.tw-ph-msg .en{margin-top:.25em;font-size:.74em;line-height:1.3;color:var(--tw-ink-3)}
.tw-ph-fix{align-self:stretch;max-width:none;background:#FFFDF8;border-radius:.9em;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 .3em .8em -.4em rgba(60,40,20,.3);transform:rotate(-1deg)}
.tw-ph-fix .es{font-size:1em;font-weight:600}
.tw-ph-fix s{color:var(--tw-no);text-decoration-thickness:1.5px}
.tw-ph-fix b{color:var(--tw-ok)}
.tw-ph-fix .tw-ph-from+.es+.tw-ph-from{margin-top:.5em}
/* карточки */
.tw-ph-deck{position:relative;display:grid;gap:.8em;perspective:900px}
.tw-ph-card{position:relative;display:grid;min-height:9.5em;text-align:center;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.2,1.1)}
.tw-ph-card>span{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:1em;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(23,20,15,.1),0 .5em 1em -.6em rgba(60,40,20,.5)}
.tw-ph-card .f{background:repeating-linear-gradient(transparent 0 1.55em,rgba(47,91,211,.13) 1.55em 1.6em) 0 3.4em/100% calc(100% - 3.4em) no-repeat,#FFFDF8}
.tw-ph-card .b{background:var(--tw-y);transform:rotateY(180deg)}
.tw-ph-card b{font-size:1.5em;font-weight:760;letter-spacing:-.02em}
.tw-ph-card small{font-size:.72em;color:var(--tw-ink-3)}
.tw-ph-card .tw-es-in{font-style:normal;font-weight:650}
.tw-ph-btns{display:flex;gap:.5em;margin-top:1em}
.tw-ph-btns[hidden]{display:none}
.tw-ph-btns button{position:relative;flex:1;height:2.8em;border-radius:1.4em;font-weight:650;font-size:.9em;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.3)}
.tw-ph-btns button::after{content:"";position:absolute;inset:-.6em -.2em}
.tw-ph-btns .ok{background:var(--tw-ink);color:#FBF8F2;box-shadow:none}
/* без JS: обе стороны карточки видны; со скриптом — колода, верхняя переворачивается */
html:not(.tw-js) .tw-ph-card .b{transform:none}
html:not(.tw-js) .tw-ph-card{gap:.5em}
html:not(.tw-js) .tw-ph-card>span{grid-area:auto}
.tw-js .tw-ph-deck{display:block;height:11em}
.tw-js .tw-ph-card{position:absolute;inset:0;width:100%;transform:translate(calc(var(--k,0) * .5em),calc(var(--k,0) * .55em)) rotate(calc(var(--k,0) * 2.5deg));z-index:calc(5 - var(--k,0));opacity:calc(1 - var(--k,0) * .15)}
.tw-js .tw-ph-card[data-k="0"]{cursor:pointer}
.tw-js .tw-ph-card.flip{transform:rotateY(180deg)}
.tw-js .tw-ph-card.gone{transform:translate(120%,-10%) rotate(18deg);opacity:0;pointer-events:none}
.tw-js .tw-ph-card:not([data-k="0"]){pointer-events:none}

/* в шагах подряд экран телефона растёт под содержимое; в сцене — ровно по телефону (tw-on) */

/* ---------- вырезки, свечение, подписи сцены ---------- */
.tw-scuts{display:none}
.tw-glow,.tw-skiphint,.tw-pnote{display:none}

/* ---------- сцена (home.js ставит tw-on, когда можно двигать) ---------- */
.tw-on .tw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1600px;perspective-origin:50% 45%}
.tw-on .tw-hero{position:absolute;left:0;right:0;top:clamp(78px,10vh,120px);padding:0 16px;will-change:transform,opacity}
.tw-on .tw-step{position:static;display:block;max-width:none;padding:0;margin:0}
.tw-on .tw-step-ph{display:none}
.tw-on .tw-cap{position:absolute;z-index:7;top:50%;width:min(40vw,560px);transform:translateY(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,transform .2s,visibility 0s .2s}
.tw-on .tw-cap.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s .05s,transform .6s cubic-bezier(.2,.8,.2,1)}
.tw-on .tw-cap.l{left:clamp(24px,6vw,110px)} .tw-on .tw-cap.r{right:clamp(24px,6vw,110px)}
.tw-on .tw-cap.l:not(.on){transform:translate(-30px,-50%)} .tw-on .tw-cap.r:not(.on){transform:translate(30px,-50%)}
.tw-phonewrap{position:absolute;z-index:5;left:50%;top:50%;width:var(--pw);height:calc(var(--pw) * 2.05);margin-left:calc(var(--pw) / -2);margin-top:calc(var(--pw) * -1.025);transform-style:preserve-3d;--pw:min(330px,28vw,40vh)}
.tw-phonewrap .tw-phone{--pw:inherit;position:absolute;inset:0;width:auto;transform-style:preserve-3d}
.tw-ph-slab{position:absolute;inset:0;border-radius:calc(var(--pw) * .15);background:linear-gradient(90deg,#3B352D,#151310 40%,#4A4238)}
.tw-phonewrap .tw-ph-body{position:absolute;inset:0;transform:translateZ(7px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.tw-phonewrap .tw-ph-screen{height:100%;min-height:0}
.tw-phonewrap .tw-ph-sample{transform:translateZ(9px) rotate(8deg)}
.tw-ph-shadow{position:absolute;left:8%;right:8%;bottom:-14%;height:16%;background:radial-gradient(50% 50% at 50% 50%,rgba(60,40,20,.3),transparent 70%);transform:translateZ(-40px) rotateX(80deg)}
.tw-phonewrap .tw-scr{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.tw-phonewrap .tw-scr.on{opacity:1;visibility:visible;transition:opacity .35s}
.tw-phonewrap .tw-ph-log{position:absolute;left:0;right:0;top:5.6em;bottom:3.5em;overflow:hidden}
.tw-phonewrap .tw-ph-reply{position:absolute;left:0;right:0;bottom:0;z-index:4}
.tw-phonewrap .tw-ph-msg{opacity:0;transform:translateY(1.2em) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.tw-phonewrap .tw-ph-msg.in{opacity:1;transform:none}
.tw-phonewrap .tw-ph-fix.in{transform:rotate(-1deg)}
.tw-on .tw-scuts{display:block}
.tw-scut{position:absolute;left:50%;top:50%;z-index:3;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);will-change:transform;pointer-events:none}
.tw-scut img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(60,40,20,.22))}
.tw-on .tw-glow{display:block;position:absolute;left:50%;top:50%;z-index:1;width:76vmin;height:76vmin;margin:-38vmin 0 0 -38vmin;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,214,120,.5),rgba(245,192,12,.14) 55%,transparent);will-change:transform}
.tw-on .tw-skiphint{display:flex;position:absolute;z-index:8;left:clamp(24px,3vw,40px);bottom:24px;align-items:center;gap:8px;font-size:13px;color:var(--tw-ink-2);transition:opacity .4s}
.tw-skiphint i{display:block;width:1px;height:26px;background:currentColor;transform-origin:top;animation:tw-scr 1.6s infinite}
@keyframes tw-scr{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.tw-on .tw-pnote{display:block;position:absolute;z-index:6;left:50%;bottom:clamp(14px,3vh,30px);width:max-content;max-width:min(400px,80vw);font-size:15px;line-height:1.35;color:var(--tw-ink-2);text-align:center;opacity:0;transition:opacity .14s}
.tw-on .tw-pnote.on{opacity:1;transition:opacity .4s .05s}

/* уровень: живой вопрос теста на листе */
.tw-mq{position:relative;width:min(560px,100%);margin:36px auto 0;padding:30px 28px 22px;background:var(--tw-sheet);text-align:left;transform:rotate(-.6deg);box-shadow:0 0 0 1px rgba(23,20,15,.06),0 18px 30px -22px rgba(60,40,20,.55)}
.tw-mq-src{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.tw-mq-es{margin-top:10px;font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.18}
.tw-mq-ask{margin-top:8px;font-size:16px;color:var(--tw-ink-2)}
.tw-mq-opts{display:grid;gap:8px;margin-top:16px}
.tw-mq-opts button{min-height:50px;padding:10px 16px;text-align:left;border-radius:10px;background:#fff;font-size:16px;font-weight:550;box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.22);transition:background .2s}
.tw-mq-opts button:hover{background:#FBF5E6}
.tw-mq-opts button.no{box-shadow:inset 0 0 0 1.5px #B53A22;color:var(--tw-no)}
.tw-mq-opts button.yes{background:var(--tw-ok);color:#fff;box-shadow:none}
.tw-mq-fb{min-height:1.5em;margin-top:12px;font-size:15.5px}
/* Испания или Мексика: один лист-чек на две колонки */
.tw-vs-wrap{width:min(640px,100%);margin:40px auto 0;padding-bottom:12px}
.tw-vs{padding:24px 28px 18px}
.tw-vs table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.tw-vs th,.tw-vs td{width:50%;padding:14px 10px 14px 0;vertical-align:top;border-bottom:1.5px dashed rgba(23,20,15,.25)}
.tw-vs th+th,.tw-vs td+td{padding:14px 0 14px 14px;border-left:1.5px dashed rgba(23,20,15,.25)}
.tw-vs tbody tr:last-child td{border-bottom:0}
.tw-vs th{font-size:clamp(18px,1.6vw,22px);font-weight:750;letter-spacing:-.015em;line-height:1.15}
.tw-vs th span{display:block;margin-top:6px}
.tw-vs-cut{display:block;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(60,40,20,.2))}
.tw-vs-who td{font-size:15.5px;line-height:1.45;color:var(--tw-ink-2)}
.tw-vs td[lang]{font-size:19px;font-weight:650}
.tw-vs-w{padding-bottom:5px;background:var(--tw-u1) 0 100%/100% 8px no-repeat}
.tw-vs td[lang="es-MX"] .tw-vs-w{background-image:var(--tw-ug)}

/* ---------- ниже сцены (21.10, вариант А): зигзаг — лист то слева, то справа, без семи одинаковых листов подряд ---------- */
/* якорь внутри шага (#conversation-h со страницы подкаста): вне сетки шага */
.tw-step>i[id]{position:absolute;top:0;left:0}
/* ссылка шага на страницу раздела: текстом с подчёркиванием, не кнопкой */
.tw-cap-go{margin-top:14px;font-size:clamp(15px,1.15vw,17px)}
.tw-cap-go a{font-weight:650;color:var(--tw-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tw-cap-go a::after{content:" →"}
/* Испания или Мексика: лист слева, заголовок, строка и кнопка справа */
.var-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);gap:clamp(40px,5.5vw,96px);align-items:center}
.var-txt{order:2;display:flex;flex-direction:column;align-items:flex-start}
.sc-head h2,.var-txt h2{font-weight:780;font-size:clamp(40px,4.2vw,62px);line-height:1;letter-spacing:-.04em}
.sc-head h2 span,.var-txt h2 span{font-weight:300;letter-spacing:-.045em}
.tw-sec .sc-lead,.tw-sec .var-lead{margin-top:20px;max-width:26em;font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:var(--tw-ink-2)}
.var-grid .tw-vs-wrap{width:auto;margin:0;order:1}
.var-go .tw-c-go{margin-top:26px}

/* ---------- сценка «сыграй сам» (22.10, выбор Павла) ----------
   Сверху заголовок и ряд сцен (играется ресторан), ниже лист разговора и карточка роли с целями.
   Лист — бумага: реплики Рамона слева с кружком-буквой, ваши — справа на сером листке; ответ выбирают кнопкой. */
.tw-sc [hidden]{display:none!important}
.sc-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end}
.sc-scenes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sc-scenes li{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 10px;border-radius:4px;background:rgba(255,253,248,.5);box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.12)}
.sc-scenes img{flex:none;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(60,40,20,.18))}
.sc-scenes b{display:block;font-size:15.5px;font-weight:700;line-height:1.2;color:var(--tw-ink)}
.sc-scenes small{display:block;margin-top:3px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.sc-scenes .now{background:var(--tw-sheet);box-shadow:var(--tw-shadow);transform:rotate(-1deg)}
.sc-scenes .now small{color:var(--tw-ink)}
.sc-scenes .now small::after{content:" ↓"}
.sc-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:clamp(32px,4.5vw,72px);align-items:start;margin-top:clamp(36px,4vw,56px)}
/* карточка роли стоит на месте, пока лист разговора прокручивается */
.sc-side{position:sticky;top:clamp(96px,14vh,140px)}
.sc-role{position:relative;padding:26px 24px 18px;background:var(--tw-sheet);box-shadow:var(--tw-shadow);transform:rotate(.7deg);font-size:16px;line-height:1.45;color:var(--tw-ink-2)}
.sc-role .tw-tape{--tr:3deg;left:30%}
.sc-role-h{font-size:12.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--tw-ink)}
.sc-role .sc-role-t{margin-top:6px}
.sc-role-p{font-weight:650;color:var(--tw-ink)}
.sc-goals{list-style:none;margin:12px 0 0;padding:0;counter-reset:g}
.sc-goals li{counter-increment:g;display:flex;align-items:center;gap:12px;min-height:40px;padding:5px 0;border-top:1.5px dashed rgba(23,20,15,.14);font-weight:620;color:var(--tw-ink)}
.sc-goals li::before{content:counter(g);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(27,38,56,.5);font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--tw-ink)}
.sc-gck{margin-left:auto;width:22px;height:20px;opacity:0;transform:scale(.5) rotate(-12deg);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.sc-goals li.done .sc-gck{opacity:1;transform:none}
.sc-role .sc-role-h2{margin-top:12px;padding-top:14px;border-top:1.5px dashed rgba(23,20,15,.3)}
/* лист разговора */
.sc-sheet{position:relative;margin-bottom:56px;padding:32px clamp(20px,2.8vw,40px) 24px;background:var(--tw-sheet);transform:rotate(-.4deg);box-shadow:0 0 0 1px rgba(23,20,15,.06),0 18px 30px -22px rgba(60,40,20,.55)}
.sc-top{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.sc-top .tw-badge{min-height:0;padding:0;font-size:inherit}
.sc-stage{margin-top:14px;padding-bottom:14px;border-bottom:1.5px dashed rgba(23,20,15,.25);font-style:italic;font-size:15.5px;color:var(--tw-ink-2)}
.sc-pnote{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--tw-ink-3)}
.sc-lines{list-style:none;margin:0;padding:8px 0 0}
.sc-lines p{margin:0}
.sc-l{display:flex;gap:12px;padding:10px 0}
.sc-ava{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-top:2px;border-radius:50%;background:var(--tw-es);color:#FFFDF8;font-size:15px;font-weight:750}
.sc-p .sc-b{min-width:0;max-width:88%}
.sc-me{flex-direction:column;align-items:flex-end;gap:8px}
.sc-me .sc-b{max-width:86%;padding:10px 15px 12px;border-radius:14px 14px 3px 14px;background:rgba(23,20,15,.055)}
.sc-who{display:block;margin-bottom:2px;font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--tw-es)}
.sc-me .sc-who{color:var(--tw-ink-3)}
.sc-es{font-size:clamp(17px,1.35vw,19px);font-weight:560;line-height:1.35;color:var(--tw-ink)}
.sc-me .sc-es{font-weight:650}
.sc-lines .sc-en{margin-top:2px;font-size:14px;line-height:1.4;color:var(--tw-ink-3)}
/* поправка: сказанное серым и зачёркнуто карандашом, верное — карандашом, перевод верного и заметка «Why» */
.sc-fixed .sc-said,.sc-plain .sc-fixv{display:none}
.sc-es.sc-was{font-weight:500;color:var(--tw-ink-3)}
.sc-was s{text-decoration-color:var(--tw-pen);text-decoration-thickness:2px}
.sc-lines .sc-fix{margin-top:4px}
.sc-fix .tw-pen{display:inline-block;font-size:clamp(25px,2.1vw,30px);line-height:1.02;transform:rotate(-1deg);transform-origin:0 50%}
.sc-lines .sc-why{margin-top:10px;padding:9px 13px 10px;border-left:3px solid var(--tw-pen);border-radius:0 4px 4px 0;background:rgba(118,99,182,.09);font-size:14.5px;line-height:1.45;color:var(--tw-ink-2)}
.sc-why>b{margin-right:4px;font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--tw-pen-ink)}
.sc-why em,.sc-ok em{font-style:italic}
.sc-lines .sc-ok{margin-top:8px;font-size:14px;line-height:1.45;color:var(--tw-ink-2)}
.sc-ok::before{content:"✓ ";font-weight:750;color:var(--tw-pen-ink)}
/* ваш ход: варианты ответа — листки с обводкой справа, как ваша реплика */
.sc-opts{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:100%}
/* шапка сайта висит сверху: прокрутка к ходу и к низу листа не прячет их под ней */
.sc-opts,.sc-typing,.sc-foot{scroll-margin:96px 0 24px}
.sc-lines .sc-turn{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.sc-turn b{color:var(--tw-ink)}
.sc-opt{display:block;max-width:86%;min-height:44px;padding:11px 16px 12px;border-radius:14px 14px 3px 14px;background:var(--tw-sheet);box-shadow:inset 0 0 0 2px var(--tw-ink),0 6px 14px -10px rgba(60,40,20,.5);text-align:left;cursor:pointer;touch-action:manipulation;transition:transform .15s,background-color .15s}
.sc-opt-es{display:block;font-size:17px;font-weight:650;line-height:1.3;color:var(--tw-ink)}
.sc-opt small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--tw-ink-3)}
@media (hover:hover){.sc-opt:hover{background:#fff;transform:translateY(-2px)}}
.sc-opt:active{transform:translateY(0)}
/* Рамон печатает */
.sc-typing{display:flex;align-items:center;gap:12px;padding:10px 0}
.sc-dots{display:inline-flex;gap:5px;padding:12px 14px;border-radius:14px;background:rgba(23,20,15,.055)}
.sc-dots i{width:7px;height:7px;border-radius:50%;background:var(--tw-ink-3);animation:sc-dot 1s infinite ease-in-out}
.sc-dots i:nth-child(2){animation-delay:.15s}
.sc-dots i:nth-child(3){animation-delay:.3s}
@keyframes sc-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
/* появление реплики */
.sc-l.sc-new{animation:sc-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sc-in{from{opacity:0;transform:translateY(8px)}}
/* низ листа: строка про карточки и кнопка «ещё раз» слева, стрелка карандашом и карточка, торчащая из-под листа, справа */
.sc-foot{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding-top:14px;border-top:1.5px dashed rgba(23,20,15,.25)}
.sc-footl{flex:1;min-width:0}
.sc-lines~.sc-foot .sc-after,.sc-after{max-width:17em;padding-top:4px;font-size:15px;line-height:1.45;color:var(--tw-ink-2)}
.sc-done{color:var(--tw-ink)}
.sc-againp{margin-top:14px}
.sc-again.tw-btn{min-height:44px;padding:0 20px;font-size:16px}
.sc-cardw{display:flex;align-items:flex-start;flex:none}
.sc-arrow{width:62px;height:43px;margin-top:6px}
.sc-card{position:relative;z-index:2;flex:none;width:clamp(150px,13vw,184px);margin:6px 0 -62px;padding:14px 16px 15px;background:#FFFEFA;border-radius:3px;box-shadow:0 0 0 1px rgba(23,20,15,.08),0 12px 20px -12px rgba(60,40,20,.5);transform:rotate(3.5deg)}
.sc-card b{display:block;padding-bottom:7px;border-bottom:1.5px solid rgba(23,20,15,.12);font-size:19px;font-weight:700;line-height:1.2;color:var(--tw-ink)}
.sc-card small{display:block;margin-top:7px;font-size:14px;line-height:1.3;color:var(--tw-ink-3)}
.sc-cardw.sc-drop .sc-card{animation:sc-drop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes sc-drop{from{opacity:0;transform:translateY(-24px) rotate(-4deg)}}

/* ---------- что внутри (22.10, выбор Павла «Сейчас / в приложении») ----------
   Слева — что можно попробовать на сайте сейчас (карточки-ссылки), справа — чек «в приложении» и жёлтая кнопка. */
.in-head{text-align:center}
.in-head h2{max-width:none;font-weight:780;font-size:clamp(30px,3.6vw,54px);line-height:1;letter-spacing:-.04em}
.in-head h2 span{font-weight:300;letter-spacing:-.045em}
.tw-sec .in-who{max-width:34em;margin:16px auto 0;font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:var(--tw-ink-2)}
.in-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start;max-width:1040px;margin:clamp(36px,4vw,56px) auto 0}
.tw-sec .in-lab{margin:0;font-size:13px;font-weight:750;letter-spacing:.09em;line-height:1.3;text-transform:uppercase;color:var(--tw-ink)}
.tw-sec .in-sub{margin-top:4px;font-size:15px;color:var(--tw-ink-2)}
.in-cards{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:18px}
.in-card{position:relative;display:flex;align-items:flex-start;gap:16px;padding:18px 20px 16px 16px;border-radius:3px;background:var(--tw-sheet);box-shadow:var(--tw-shadow);transform:rotate(-.5deg);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.in-card:nth-child(2){transform:rotate(.6deg)}
.in-img{flex:none;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(60,40,20,.2))}
.in-ct{flex:1;min-width:0;display:flex;flex-direction:column}
.in-card .in-t a{font-size:19px;font-weight:750;line-height:1.25;letter-spacing:-.01em;color:var(--tw-ink);text-decoration:none}
.in-card .in-go{align-self:flex-end;margin-top:8px;font-size:15px;font-weight:650;color:var(--tw-ink)}
@media (hover:hover){
  .in-card:hover{transform:translateY(-3px)}
  .in-card:hover .in-t a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--tw-pen);text-underline-offset:5px}
  .in-card:hover .in-go i{transform:translateX(3px)}
}
.in-app .tw-slotbar{max-width:none;margin:20px 0 0;text-align:left}
.in-rows{list-style:none;margin:0;padding:0}
.in-row{position:relative;padding:15px 0 16px;border-bottom:1.5px dashed rgba(23,20,15,.25)}
.in-row p,.in-card p{margin:0}
.in-t{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.in-row .in-t>a,.in-t>.in-name{font-size:17px;font-weight:700;line-height:1.3;color:var(--tw-ink);text-decoration:none}
.in-t>a::after{content:"";position:absolute;inset:0}
.in-t>a:focus-visible{outline:0}
.in-t>a:focus-visible::after{outline:2.5px solid var(--tw-ink);outline-offset:2px;border-radius:6px}
.in-row .in-go{flex:none;font-size:14px;font-weight:550;white-space:nowrap;color:var(--tw-ink-3)}
.in-go i{display:inline-block;margin-left:5px;font-style:normal;font-weight:650;color:var(--tw-ink);transition:transform .2s}
.in-row .in-s,.in-card .in-s{margin-top:4px;font-size:15px;line-height:1.45;color:var(--tw-ink-2)}
.in-row .in-m,.in-card .in-m{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tw-ink-3)}
.in-lv{display:inline-flex;align-items:center;gap:6px;color:var(--tw-ink-2)}
.in-lv i{width:9px;height:9px;border-radius:50%;background:var(--lvc)}
@media (hover:hover){
  .in-link:hover .in-t>a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--tw-pen);text-underline-offset:5px}
  .in-link:hover .in-go{color:var(--tw-ink)}
  .in-link:hover .in-go i{transform:translateX(3px)}
  .in-link:hover .in-go i.in-up{transform:translateY(-3px)}
}
.in-cta{margin-top:30px}
.in-cta .tw-inside-lead{margin:0;font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--tw-ink)}
.in-cta .tw-btn-sun{margin-top:14px}
.tw-faq-sec{padding-bottom:20px}
@media (prefers-reduced-motion:reduce){
  .in-go i,.in-card,.sc-opt,.sc-gck{transition:none}
  .sc-l.sc-new,.sc-cardw.sc-drop .sc-card,.sc-dots i{animation:none}
}
@media (max-width:979px){
  .var-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .var-txt{display:contents}
  .var-txt>h2{order:1}
  .tw-sec .var-lead{order:2}
  .var-grid .tw-vs-wrap{order:3;margin-top:30px}
  .var-go{order:4}
  .sc-head{grid-template-columns:minmax(0,1fr);gap:26px}
  .sc-grid{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:34px}
  .sc-side{position:static;order:-1;max-width:34em}
  .in-grid{grid-template-columns:minmax(0,1fr);gap:44px;max-width:620px}
}
@media (max-width:760px){
  .tw-on .tw-cap-go{margin-top:4px;font-size:13.5px}
  .sc-head h2,.var-txt h2{font-size:clamp(32px,9.5vw,42px)}
  .tw-sec .sc-lead,.tw-sec .var-lead{font-size:16px}
  .sc-scenes{gap:8px}
  .sc-scenes li{gap:9px;min-height:52px;padding:6px 10px 6px 8px}
  .sc-scenes img{width:34px;height:34px}
  .sc-scenes b{font-size:14.5px}
  .sc-scenes small{font-size:10.5px}
  .sc-role{padding:20px 16px 10px;font-size:15px;transform:rotate(.5deg)}
  .sc-goals{margin-top:8px}
  .sc-goals li{min-height:36px;padding:3px 0}
  .sc-goals li::before{width:22px;height:22px;font-size:12px}
  .sc-role .sc-role-h2{margin-top:8px;padding-top:10px}
  .sc-sheet{margin-bottom:50px;padding:26px 14px 20px;transform:rotate(-.3deg)}
  .sc-l{gap:9px}
  .sc-ava{width:30px;height:30px;font-size:13.5px}
  .sc-p .sc-b{max-width:none}
  .sc-me .sc-b,.sc-opt{max-width:94%}
  .sc-lines .sc-why{padding:9px 11px 10px;font-size:14px}
  .sc-lines~.sc-foot .sc-after,.sc-after{font-size:14.5px}
  .sc-arrow{width:46px;height:32px}
  .sc-card{width:140px;margin-bottom:-54px;padding:12px 13px 13px}
  .sc-card b{font-size:17px}
  .sc-card small{font-size:13px}
  .in-head h2{font-size:clamp(28px,8.6vw,38px)}
  .in-card{gap:12px;padding:16px 16px 14px 12px}
  .in-img{width:52px;height:52px}
  .in-card .in-t a{font-size:18px}
  .in-row .in-go{font-size:13.5px}
  .in-row .in-s{font-size:14.5px}
}

/* ---------- телефон 760 ---------- */
@media (max-width:1000px){
  .tw-step{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:left}
  .tw-step .tw-cap{width:100%;max-width:560px}
}
@media (max-width:760px){
  .tw-hero{padding-top:92px}
  .tw-hero h1{font-size:clamp(31px,10vw,44px)}
  .tw-hero-p{margin-top:14px;font-size:16px}
  .tw-verbs{margin-top:18px;font-size:19px}
  .tw-wait-hero{margin-top:26px}
  .tw-wait-hero .tw-form input[type="email"]{min-height:52px;padding:0 14px;font-size:16px}
  .tw-wait-hero .tw-btn-sun{min-height:52px;padding:0 16px;font-size:16px}
  .tw-wait-hero .tw-small{font-size:12.5px;line-height:1.35;margin-top:8px}
  .tw-step{padding-top:56px}
  .tw-cap h2{font-size:clamp(30px,9vw,40px)}
  .tw-phone{--pw:min(300px,82vw)}
  .tw-on .tw-hero{top:84px}
  .tw-phonewrap{--pw:min(236px,61vw,30vh)}
  .tw-on .tw-cap{top:var(--hdr,64px);left:0!important;right:0!important;width:auto;transform:none!important;padding:28px 16px 22px;background:linear-gradient(var(--tw-cap-bg,rgba(243,238,228,.97)) calc(100% - 22px),transparent)}
  .tw-on .tw-cap h2{font-size:28px}
  .tw-on .tw-cap-lead{margin-top:6px;font-size:14.5px;max-width:none}
  .tw-on .tw-pnote{font-size:13px;bottom:10px;max-width:min(320px,calc(100vw - 32px))}
  .tw-on .tw-skiphint{display:none}
  .tw-mq{padding:26px 18px 18px}
  .tw-vs{padding:18px 16px 14px}
  .tw-vs th{font-size:17px}
  .tw-vs td[lang]{font-size:17px}
  .tw-vs-who td{font-size:14.5px}
}
@media (max-width:760px) and (max-height:720px){
  .tw-on .tw-cap{padding-top:22px}
  .tw-on .tw-cap h2{font-size:24px}
  .tw-on .tw-cap-lead{font-size:14px}
}
@media (max-width:360px){
  .tw-wait-hero .tw-form-row{flex-wrap:wrap}
  .tw-wait-hero .tw-btn-sun{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .tw-ph-play::before,.tw-skiphint i{animation:none!important}
}

/* ---------- 20.10 (вечер): перенос утверждённого вида русского site-x — пометки карандашом, полоска шагов, цвет шага ---------- */
/* ряд ответа под разговором: голосом или текстом (образец, не кнопки) */
.tw-ph-reply{display:flex;gap:.45em;padding:.6em .75em .8em;background:#FBF8F2;box-shadow:0 -1px 0 rgba(23,20,15,.08)}
.tw-ph-reply span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:2.4em;padding:0 .6em;border-radius:999px;font-size:.78em;font-weight:700;white-space:nowrap}
.tw-ph-rv{background:var(--tw-ink);color:#FBF8F2}
.tw-ph-rv svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.tw-ph-rt{box-shadow:inset 0 0 0 1.5px var(--tw-ink);color:var(--tw-ink)}
/* в сцене подсказку «Tap a word» на телефоне заменяет пометка карандашом */
.tw-on .tw-scr-read .tw-ph-hint{display:none}
/* слой пометок лежит на телефоне; подпись — рукописный шрифт, линия — заливка с зерном графита (#tw-graphite) */
.tw-ink{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transform:translateZ(11px)}
.tw-ink-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.tw-ink-g{opacity:0;transition:opacity .25s;filter:url(#tw-graphite)}
.tw-ink-g .pn{fill:var(--tw-pen)} .tw-ink-g .pn2{opacity:.35}
.tw-ink-cap,.tw-ink-probe{position:absolute;left:0;top:0;font-family:var(--tw-pen-font,'Caveat'),'Segoe Print','Bradley Hand',cursive;font-weight:700;line-height:.98;letter-spacing:.005em;color:var(--tw-pen-ink);white-space:pre;filter:url(#tw-graphite-t)}
.tw-ink-cap{opacity:0;visibility:hidden;transform-origin:0 50%;transition:opacity .25s,visibility 0s .25s}
.tw-ink-g.on{opacity:1;transition:opacity .45s .3s}
.tw-ink-cap.on{opacity:1;visibility:visible;transition:opacity .45s .3s}
.tw-ink-probe{visibility:hidden;left:-9999px;top:-9999px;filter:none}
/* цвет шага: заливка под сценой, к низу сходит на нет — переход к блокам ниже мягкий */
.tw-tint{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 120px),transparent);mask-image:linear-gradient(#000 calc(100% - 120px),transparent)}
/* полоска шагов под шапкой: столько частей, сколько шагов; часть заполняется по прокрутке (--q) */
.tw-prog{display:none}
.tw-js .tw-home .tw-prog,.tw-home .tw-prog{display:flex;position:absolute;left:var(--tw-gut);right:var(--tw-gut);top:100%;height:3px;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s}
.tw-home .tw-top.tw-solid .tw-prog.on{opacity:1}
.tw-prog i{flex:1;position:relative;overflow:hidden;border-radius:2px;background:rgba(27,38,56,.12)}
.tw-prog i::after{content:"";position:absolute;inset:0;border-radius:2px;background:#7A5CC8;transform:scaleX(var(--q,0));transform-origin:0 50%}
.tw-burger[aria-expanded="true"]~.tw-prog{visibility:hidden}
@media (max-width:760px){
  .tw-home .tw-prog{left:8px;right:8px;top:calc(100% - 4px);gap:3px}
  .tw-home .tw-top .tw-prog.on{opacity:1}
}

/* ---------- 20.10 (вечер): уровень — как блок теста русского site-x ----------
   Слева заголовок, строка, лесенка A1–B2 и кнопка-обводка; справа на зелёном поле стопка листов с одним вопросом.
   «you» на лесенке — карандашом; первый ответ двигает его (home.js ставит data-st). Телефон: одна колонка. */
.tw-lvl{--tc-bg:color-mix(in srgb,var(--tc) 7%,var(--tw-paper))}
.lt-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,5.5vw,96px);align-items:center;text-align:left}
.lt-txt{display:flex;flex-direction:column;align-items:flex-start}
.lt-txt h2{font-weight:780;font-size:clamp(46px,4.7vw,70px);line-height:1;letter-spacing:-.04em}
.lt-txt h2 span{font-weight:300;letter-spacing:-.045em}
.tw-sec .lt-lead{margin-top:20px;max-width:24em;font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:var(--tw-ink-2)}
.lt-lad{margin-top:40px}
.lt-go{margin-top:30px}
.lt-go .tw-c-go{margin-top:0}
.lt-steps{--sw:84px;--g0:58px;--h1:34px;--hs:24px;position:relative;display:grid;grid-template-columns:repeat(4,var(--sw));gap:5px;align-items:end;width:max-content;height:calc(var(--h1) + 3 * var(--hs) + 6px);padding-left:var(--g0);box-shadow:0 2px 0 var(--tw-ink)}
.lt-steps>span{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:8px;border-radius:6px 6px 0 0;background:#FFFDF8;box-shadow:inset 0 0 0 1.5px rgba(27,38,56,.16),0 10px 18px -16px rgba(60,40,20,.6);font-weight:750;font-size:17px;color:var(--tw-ink)}
.lt-steps>span:nth-child(1){height:var(--h1);background:color-mix(in srgb,#6E8B3D 20%,#FFFDF8);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#6E8B3D 55%,#1B2638)}
.lt-steps>span:nth-child(2){height:calc(var(--h1) + var(--hs))} .lt-steps>span:nth-child(3){height:calc(var(--h1) + 2 * var(--hs))} .lt-steps>span:nth-child(4){height:calc(var(--h1) + 3 * var(--hs))}
.lt-ck{position:absolute;right:5px;top:8px;opacity:0;transition:opacity .3s .5s}
.lt-you{position:absolute;left:2px;bottom:4px;font-style:normal;display:flex;flex-direction:column;align-items:flex-start;transition:transform .7s cubic-bezier(.3,1.45,.45,1)}
.lt-you .tw-pen{display:block;font-size:27px;line-height:.9;margin-left:-2px}
.lt-you .tw-pen-svg{margin-top:-2px}
.tw-lvl[data-st=ok] .lt-you{transform:translate(calc(var(--g0) + var(--sw) / 2 - 34px),calc(-1 * var(--h1) - 2px))}
.tw-lvl[data-st=ok] .lt-ck{opacity:1}
.tw-lvl[data-st=ok] .lt-steps>span:nth-child(n+2){box-shadow:inset 0 0 0 1.5px rgba(27,38,56,.42);animation:lt-next .9s ease both}
.tw-lvl[data-st=ok] .lt-steps>span:nth-child(3){animation-delay:.12s} .tw-lvl[data-st=ok] .lt-steps>span:nth-child(4){animation-delay:.24s}
@keyframes lt-next{40%{transform:translateY(-5px)}}
.tw-lvl[data-st=no] .lt-you{animation:lt-shake .5s ease}
@keyframes lt-shake{25%{transform:translate(-3px,0)}50%{transform:translate(5px,0)}75%{transform:translate(-2px,0)}}
.tw-sec .lt-say{min-height:2.9em;margin-top:14px;max-width:24em;font-size:16px;line-height:1.45;color:var(--tw-ink-2)}
.lt-say b{font-weight:650;color:var(--tw-ink)}
.lt-field{position:relative;isolation:isolate;padding:64px clamp(32px,3.6vw,60px) 92px;border-radius:28px;background:color-mix(in srgb,#6E8B3D 15%,var(--tw-paper))}
.tw-sec .lt-th{position:absolute;z-index:0;top:-54px;right:-40px;width:150px;height:auto;transform:rotate(-16deg);filter:drop-shadow(0 12px 14px rgba(40,50,20,.28));pointer-events:none;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.tw-lvl[data-st=ok] .lt-th{transform:rotate(344deg)}
.lt-stack{position:relative;z-index:1;max-width:540px;margin:0 auto}
.lt-back{position:absolute;inset:0;background:#FBF8F2;box-shadow:0 0 0 1px rgba(23,20,15,.06),0 14px 26px -22px rgba(60,40,20,.55);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.lt-back.b1{transform:translate(12px,-12px) rotate(2.2deg)}
.lt-back.b2{background:#F6F1E6;transform:translate(-10px,-22px) rotate(-3deg)}
.tw-lvl[data-st] .lt-back.b1{transform:translate(20px,-16px) rotate(3.6deg)}
.tw-lvl .tw-mq{width:100%;margin:0}
.lt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.lt-tp{display:inline-flex;align-items:center;gap:8px}
.lt-tp i{width:10px;height:10px;border-radius:50%;background:#6E8B3D}
.lt-n{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--tw-ink-2)}
.lt-try{position:absolute;right:14px;top:calc(100% + 4px);display:flex;align-items:flex-end;gap:0;transition:opacity .3s}
.lt-try .tw-pen-svg{margin-top:-30px}
.lt-try .tw-pen{font-size:var(--tw-pen-fs-home);margin-bottom:-6px}
.tw-lvl[data-st] .lt-try{opacity:0}
@media (max-width:979px){
  .lt-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:center}
  .lt-txt{display:contents}
  .lt-txt>h2{order:1}
  .tw-sec .lt-lead{order:2;margin:16px auto 0}
  .lt-field{order:3;width:min(620px,100%);margin:44px auto 0}
  .lt-lad{order:4;margin:34px auto 0}
  .tw-sec .lt-say{margin-left:auto;margin-right:auto}
  .lt-go{order:5;margin-top:22px}
}
@media (max-width:760px){
  .lt-txt h2{font-size:clamp(34px,10vw,44px)}
  .tw-sec .lt-lead{font-size:16px;max-width:22em}
  .lt-field{width:auto;margin:30px calc(-1 * var(--tw-gut)) 0;padding:50px 20px 74px;border-radius:0;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,#6E8B3D 15%,var(--tw-paper)) 40px,color-mix(in srgb,#6E8B3D 15%,var(--tw-paper)) calc(100% - 44px),transparent)}
  .tw-sec .lt-th{top:-30px;right:6px;width:92px}
  .lt-back.b1{transform:translate(8px,-10px) rotate(2deg)} .lt-back.b2{transform:translate(-6px,-17px) rotate(-2.6deg)}
  .lt-steps{--sw:66px;--g0:52px;--h1:30px;--hs:18px}
  .lt-steps>span{font-size:15px;padding-top:6px}
  .tw-sec .lt-say{font-size:15px;max-width:21em}
  .lt-try .tw-pen{font-size:var(--tw-pen-fs-m)}
}
@media (max-width:380px){.lt-steps{--sw:56px;--g0:48px}}
@media (prefers-reduced-motion:reduce){.lt-you,.lt-th,.lt-back,.lt-steps>span{transition:none!important;animation:none!important}}
@media (max-width:760px){.lt-top{font-size:12px;letter-spacing:.05em;gap:8px}}
/* без JS вкладки уровней на телефоне не видны (кнопки без скрипта не работают) — сильнее правила раскладки выше */
.tw-scr-read .tw-ph-tabs[hidden],.tw-ph-vsw[hidden]{display:none}