/* Почерк · v1 — общий стиль лендинга и кабинета.
   Порядок: токены · база · типографика · кнопки · шапка · герой · образцы · как работает ·
   тарифы · вопросы · призыв · подвал · инструмент · змейка · модалка · тосты · кабинет ·
   адаптив · reduced-motion. */

/* ---------- шрифты: свои файлы, без внешних доменов (OFL 1.1, см. /assets/fonts/LICENSE.md) ----------
   Variable-woff2, сабсеты кириллица и латиница; отдельно крошечные файлы с «₽» (Literata) и «≈» (Onest). */
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/literata-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/literata-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 700;font-display:swap;src:url("/assets/fonts/literata-italic-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 700;font-display:swap;src:url("/assets/fonts/literata-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/literata-rub.woff2") format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/onest-approx.woff2") format("woff2");unicode-range:U+2248}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 600;font-display:swap;src:url("/assets/fonts/caveat-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 600;font-display:swap;src:url("/assets/fonts/caveat-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#F3F1EA;
  --paper-deep:#EAE6DB;
  --sheet:#FFFDF8;
  --ink:#16171B;
  --ink-2:#45474F;
  --ink-3:#6D6E76;
  --rule:#DCD7CA;
  --rule-soft:#E8E4D9;
  --pen:#2747D3;
  --pen-hover:#1D38AE;
  --pen-soft:rgba(39,71,211,.09);
  --red:#CF3B2B;
  --red-soft:rgba(207,59,43,.10);
  --margin:rgba(207,59,43,.40);
  --grid:rgba(39,71,211,.075);
  --ruled:rgba(39,71,211,.13);
  --r-sm:6px; --r:8px; --r-lg:14px;
  --shadow-sheet:0 1px 0 rgba(22,23,27,.04), 0 24px 48px -28px rgba(22,23,27,.22);
  --f-serif:"Literata", Georgia, "Times New Roman", serif;
  --f-sans:"Onest", -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-hand:"Caveat", cursive;

  --container:1200px;
  --gutter:24px;
  --section:136px;
  --header:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--f-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-kerning:normal;
}
img,svg{display:block}
svg{overflow:visible}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:500}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(39,71,211,.18)}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
[hidden]{display:none !important}
.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.wrap{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:16px;top:-60px;z-index:300;background:var(--ink);color:var(--sheet);padding:10px 14px;border-radius:var(--r);text-decoration:none;font-size:14px}
.skip:focus{top:12px}

/* ---------- типографика ---------- */
.h1{font:500 clamp(44px, 5.1vw, 64px)/1.02 var(--f-serif);letter-spacing:-.028em}
.h2{font:500 clamp(32px, 4.2vw, 54px)/1.08 var(--f-serif);letter-spacing:-.022em;text-wrap:balance}
.h3{font:500 24px/1.25 var(--f-serif);letter-spacing:-.01em}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2)}
.meta{font-size:13px;line-height:1.4;color:var(--ink-3)}
.caps{font:600 12px/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
em,.it{font-style:italic}

/* рукописные штрихи */
.hand{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tick{width:14px;height:14px;flex:none;color:var(--pen)}
.tick path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;padding:0 20px;border-radius:var(--r);border:1px solid transparent;
  font:500 15px/1 var(--f-sans);letter-spacing:-.003em;text-decoration:none;white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s, opacity .15s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.btn--sm{height:36px;padding:0 14px;font-size:14px;gap:8px}
.btn--lg{height:52px;padding:0 26px;font-size:16px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--pen);color:var(--sheet)}
.btn--primary:hover{background:var(--pen-hover)}
.btn--secondary{background:var(--sheet);color:var(--ink);border-color:var(--rule)}
.btn--secondary:hover{border-color:#BDB7A7}
.btn--danger{background:var(--red);color:var(--sheet)}
.btn--danger:hover{background:#B53223}
.btn:disabled,.btn[aria-disabled="true"]{cursor:default}
.btn--primary:disabled{background:var(--rule);color:var(--ink-3)}
.btn--primary.is-busy,.btn--primary.is-busy:disabled{background:var(--pen);color:var(--sheet);opacity:.62;cursor:progress}
.btn--secondary:disabled{color:var(--ink-3);opacity:.6}
.btn--secondary:disabled:hover{border-color:var(--rule)}
.kbd{font:500 12px/1 var(--f-mono);opacity:.72;letter-spacing:0}
.btn--primary:disabled .kbd{opacity:.6}

.link-btn{
  display:inline;padding:0;border:0;background:none;
  color:var(--pen);font:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(39,71,211,.35);
}
.link-btn:hover{text-decoration-color:currentColor}
.link-btn--red{color:var(--red);text-decoration-color:rgba(207,59,43,.35)}
.link-btn:disabled{color:var(--ink-3);text-decoration:none;cursor:default}

/* «точка ручки» — маленький спиннер */
.pen-dot{position:relative;width:12px;height:12px;flex:none;animation:pen-orbit .9s linear infinite}
.pen-dot::after{content:"";position:absolute;left:3.5px;top:0;width:5px;height:5px;border-radius:50%;background:var(--pen)}
@keyframes pen-orbit{to{transform:rotate(360deg)}}

/* ---------- шапка ---------- */
.site-header{
  position:sticky;top:0;z-index:50;height:var(--header);
  background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s;
}
.site-header.is-stuck{border-bottom-color:var(--rule)}
.site-header__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{
  position:relative;display:inline-block;padding-bottom:5px;
  font:italic 600 24px/1 var(--f-serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none;
}
.wordmark__line{position:absolute;left:0;bottom:-3px;width:100%;height:8px;color:var(--pen)}
.wordmark__line path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.nav{display:flex;align-items:center;gap:32px}
.nav__links{display:flex;gap:28px}
.nav__links a{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .15s}
.nav__links a:hover{color:var(--ink)}
.nav__auth{min-width:96px;display:flex;justify-content:flex-end}
.nav__auth .btn{height:40px}
.nav__auth.is-pending{visibility:hidden}

/* ---------- герой ---------- */
.hero{position:relative;padding:44px 0 0;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:calc(50% - 600px) 0;
  -webkit-mask-image:linear-gradient(#000 55%, transparent);
          mask-image:linear-gradient(#000 55%, transparent);
}
.hero::after{
  content:"";position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none;
  left:calc(50% - var(--container) / 2 - 36px);width:1.5px;background:var(--margin);display:none;
}
@media (min-width:1320px){.hero::after{display:block}}
.hero__head{
  display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;
  align-items:last baseline;
}
.hero__title{grid-column:1 / 9;grid-row:1;margin:0}
.hero__title .line{display:block}
.hero__title .line--first{text-wrap:balance}
.hero__title em{position:relative;display:inline-block;font-style:italic}
.hero__wave{position:absolute;left:-3%;top:calc(100% - .06em);width:106%;height:auto;color:var(--pen);pointer-events:none}
.hero__wave path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:draw .7s cubic-bezier(.25,.8,.3,1) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__lead{grid-column:9 / 13;grid-row:1;color:var(--ink-2);text-wrap:pretty}
.hero__facts{grid-column:9 / 13;grid-row:2;margin-top:18px;display:grid;gap:6px}
.hero__facts li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.hero__tool{margin-top:30px;scroll-margin-top:calc(var(--header) + 12px)}
.hero__tool-slot{min-height:500px}
.hero__list{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap;
  padding:20px 0 4px;font-size:13px;line-height:1.5;color:var(--ink-2);
}
.hero__list p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}


/* ---------- секции ---------- */
.sec{padding-top:var(--section)}
.sec-head{max-width:820px}
.sec-head .lead{margin-top:20px;max-width:640px}

/* ---------- образцы ---------- */
.samples{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.sample{
  position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;
  box-shadow:var(--shadow-sheet);overflow:hidden;
}
.sample::before{content:"";position:absolute;top:0;bottom:0;left:44px;width:1.5px;background:var(--margin);z-index:1}
.sample__head{position:relative;height:64px;display:flex;align-items:center;padding:0 24px 0 60px}
.sample__body{
  --pad:8px;
  position:relative;display:grid;grid-template-columns:minmax(0, 1fr) 31%;column-gap:20px;
  padding:var(--pad) 22px 40px 60px;
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--ruled) 31px 32px);
  background-position:0 0;background-repeat:repeat;background-origin:border-box;
}
.sample__text{font:400 18px/32px var(--f-serif);color:var(--ink);hyphens:manual}
.sample__notes{position:relative;font:600 22px/32px var(--f-hand);letter-spacing:.005em}
.sample--ai .sample__notes{color:var(--red)}
.sample--human .sample__notes{color:var(--pen)}
.note{display:flex;align-items:baseline;gap:5px;text-wrap:pretty;transform-origin:0 50%}
.note__n{flex:none;font-size:16px;line-height:1;position:relative;top:-.42em}
.sample.is-placed .sample__notes .note{position:absolute;left:0;right:0}
.note:nth-child(1){rotate:-1.5deg}
.note:nth-child(2){rotate:1deg}
.note:nth-child(3){rotate:-.8deg}
.note:nth-child(4){rotate:.6deg}

.mk{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat}
.mk--circle{
  padding:3px 9px;margin:0 -3px;background-size:100% 100%;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M168 8C134 1.5 60 1 28 7.5C8 11.5 2.5 19 4.5 27.5C7.5 38.5 42 45.5 98 46C152 46.5 193 40 196.5 27C199.5 15.5 183 8 146 4.5' fill='none' stroke='%23CF3B2B' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.mk--under{
  padding-bottom:4px;background-size:100% 9px;background-position:0 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5 6C10.5 6 15 4.6 24 4.6C34 4.6 39 6.6 49 6.6C59.8 6.6 65.2 4.4 76 4.4C85 4.4 89.5 5.6 98.5 5.6' fill='none' stroke='%232747D3' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.mk-n{font:600 15px/0 var(--f-hand);position:relative;vertical-align:baseline;top:-.62em;margin-left:1px}
/* число слов в предложении — мелко над его концом, как пишет проверяющий */
.wc{position:relative;display:inline-block;width:0;height:0;vertical-align:baseline}
.wc > span{position:absolute;right:-1px;bottom:16px;font:600 17px/1 var(--f-hand);letter-spacing:.02em;white-space:nowrap;rotate:-5deg}
.sample--ai .mk-n,.sample--ai .wc{color:var(--red)}
.sample--human .mk-n,.sample--human .wc{color:var(--pen)}
.nw{white-space:nowrap}

.stamp{
  position:absolute;right:22px;top:18px;z-index:2;
  font:600 15px/1 var(--f-mono);letter-spacing:.02em;padding:7px 10px 6px;
  border:1.5px solid currentColor;border-radius:3px;
  box-shadow:0 0 0 2px var(--sheet), 0 0 0 3px currentColor;
  rotate:-4deg;mix-blend-mode:multiply;opacity:.92;
}
.stamp--red{color:var(--red)}
.stamp--blue{color:var(--pen)}
.samples__cap{margin-top:20px;font-size:13px;color:var(--ink-3)}

/* ---------- как работает ---------- */
.how__grid{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;align-items:start}
.how__title{grid-column:1 / 5;position:sticky;top:calc(var(--header) + 32px)}
.how__steps{grid-column:6 / 13;counter-reset:step}
.how__step{display:grid;grid-template-columns:96px minmax(0, 1fr);column-gap:16px;padding:28px 0 32px;border-top:1px solid var(--rule)}
.how__step:last-child{padding-bottom:0}
.how__n{font:italic 400 64px/.9 var(--f-serif);color:var(--pen);letter-spacing:-.02em}
.how__step p{margin-top:10px;color:var(--ink-2);max-width:52ch}

.keep{
  margin-top:88px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sheet);padding:44px 48px 48px;
}
.keep__head{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;align-items:baseline}
.keep__head .h3{grid-column:1 / 5}
.keep__head p{grid-column:5 / 12;color:var(--ink-2)}
.keep__grid{margin-top:36px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px;border-top:1px solid var(--rule-soft);padding-top:28px}
.keep__name{font:600 15px/1.4 var(--f-sans);color:var(--ink)}
.keep__ex{margin-top:12px;display:grid;gap:8px}
.keep__ex li{display:flex;gap:9px;align-items:baseline;font:400 17px/1.45 var(--f-serif);color:var(--ink)}
.keep__ex .tick{position:relative;top:2px}

/* ---------- тарифы ---------- */
.plans{margin-top:72px;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sheet);
  padding:32px 32px 32px;
}
.plan--main{border:1.5px solid var(--pen);padding:31.5px}
.plan__name{font:500 26px/1.2 var(--f-serif);letter-spacing:-.012em}
.plan__price{margin-top:18px;font:500 48px/1 var(--f-serif);letter-spacing:-.025em}
.plan__price small{font-size:.6em;margin-left:.08em;letter-spacing:0}
.plan__vol{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2);min-height:3em}
@media (max-width:1024px){.plan__vol{min-height:0}.plan--main{margin-top:40px}}
.plan__list{margin:22px 0 32px;padding-top:20px;border-top:1px solid var(--rule-soft);display:grid;gap:10px}
.plan__list li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.45}
.plan__list .tick{position:relative;top:2px}
.plan .btn{margin-top:auto}
.plan__note{
  position:absolute;right:4px;bottom:calc(100% - 14px);display:flex;align-items:flex-end;gap:0;
  color:var(--pen);pointer-events:none;
}
.plan__note span{font:600 24px/1 var(--f-hand);rotate:-6deg;white-space:nowrap;position:relative;top:-30px;left:-4px}
.plan__note svg{width:60px;height:52px;flex:none}
.plan__note path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pricing__foot{margin-top:24px;font-size:13px;color:var(--ink-3)}

/* ---------- вопросы ---------- */
.faq__grid{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;align-items:start}
.faq__side{grid-column:1 / 5;position:sticky;top:calc(var(--header) + 32px)}
.faq__side p{margin-top:20px;color:var(--ink-2);max-width:30ch}
.faq__side a{color:var(--pen);text-decoration-color:rgba(39,71,211,.35);text-underline-offset:3px;white-space:nowrap}
.faq__side a:hover{text-decoration-color:currentColor}
.faq__list{grid-column:5 / 13;border-bottom:1px solid var(--rule)}
.qa{border-top:1px solid var(--rule)}
.qa summary{
  list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.qa summary::-webkit-details-marker{display:none}
.qa__q{font:500 21px/1.38 var(--f-serif);letter-spacing:-.008em;text-wrap:pretty}
.qa__icon{position:relative;flex:none;width:20px;height:20px;margin-top:5px;color:var(--ink-2);transition:color .15s}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:currentColor;border-radius:1px;transition:transform .25s var(--ease)}
.qa__icon::after{transform:rotate(90deg)}
.qa summary:hover .qa__icon{color:var(--pen)}
.qa.is-open .qa__icon::after,.qa[open]:not(.is-closing) .qa__icon::after{transform:rotate(0deg)}
.qa.is-open .qa__icon::before,.qa[open]:not(.is-closing) .qa__icon::before{transform:rotate(180deg)}
.qa__a{overflow:hidden}
.qa__a p{padding:0 0 28px;max-width:62ch;color:var(--ink-2)}

/* ---------- финальный призыв и подвал ---------- */
.cta{
  position:relative;margin-top:var(--section);padding:104px 0 112px;background:var(--paper-deep);isolation:isolate;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size:24px 24px;background-position:calc(50% - 600px) 0;
}
.cta__title{font:500 clamp(36px, 5vw, 64px)/1.05 var(--f-serif);letter-spacing:-.026em;max-width:14ch}
.cta__sub{margin-top:18px;font-size:18px;color:var(--ink-2)}
.cta .btn{margin-top:36px}

.site-footer{background:var(--paper-deep);border-top:1px solid var(--rule);padding:40px 0 44px}
.site-footer__row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer__brand{display:flex;align-items:baseline;gap:18px}
.site-footer__brand span{font-size:14px;color:var(--ink-3)}
.site-footer__links{display:flex;gap:28px;flex-wrap:wrap}
.site-footer__links a{font-size:14px;color:var(--ink-2);text-decoration:none}
.site-footer__links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.site-footer__note{margin-top:28px;font-size:13px;color:var(--ink-3)}

/* =====================================================================
   ИНСТРУМЕНТ
   ===================================================================== */
.tool{
  position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sheet);
}
.tool__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;
  padding:12px 16px;border-bottom:1px solid var(--rule-soft);
}
.tool__group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.tool__group > .caps{flex:none}
.tool__keep{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}

.seg{display:inline-flex;height:34px;padding:2px;gap:2px;border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet)}
.seg button{
  height:28px;padding:0 12px;border:0;border-radius:var(--r-sm);background:none;
  font:500 14px/1 var(--f-sans);color:var(--ink-2);transition:background-color .15s, color .15s;
}
.seg button:hover{color:var(--ink);background:var(--rule-soft)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--sheet)}

.select{position:relative;display:inline-flex}
.select select{
  -webkit-appearance:none;appearance:none;height:34px;padding:0 34px 0 12px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet);
  font:500 14px/1 var(--f-sans);color:var(--ink);cursor:pointer;
}
.select select:hover{border-color:#BDB7A7}
.select svg{position:absolute;right:11px;top:50%;margin-top:-4px;width:12px;height:8px;pointer-events:none;color:var(--ink-2)}
.select path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.cell{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1;color:var(--ink);cursor:pointer;user-select:none;padding:4px 0}
.cell input{position:absolute;opacity:0;width:16px;height:16px;margin:0;left:0;cursor:pointer}
.cell__box{width:16px;height:16px;flex:none;display:grid;place-items:center;border:1.5px solid var(--ink-2);border-radius:2px;background:var(--sheet);transition:background-color .12s, border-color .12s}
.cell__box svg{width:11px;height:11px;opacity:0;color:var(--sheet)}
.cell__box path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cell input:checked + .cell__box{background:var(--ink);border-color:var(--ink)}
.cell input:checked + .cell__box svg{opacity:1}
.cell input:focus-visible + .cell__box{outline:2px solid var(--pen);outline-offset:2px}

/* две панели на общей сетке строк (subgrid): шапки и подвалы обеих панелей всегда одной высоты */
.tool__panes{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-template-rows:auto minmax(0, 1fr) auto;height:440px}
.tool--app .tool__panes{height:max(480px, calc(100vh - 300px))}
.pane{position:relative;display:grid;grid-row:1 / span 3;grid-template-rows:auto minmax(0, 1fr) auto;grid-template-rows:subgrid;min-width:0;min-height:0}
.pane + .pane{border-left:1px solid var(--rule-soft)}
/* контейнеры для @container — шапка и подвал, а не сама панель: контейнер размера отключил бы subgrid */
.pane__head,.pane__foot{container-type:inline-size;min-width:0}
.pane__head{border-bottom:1px solid var(--rule-soft)}
.pane__foot{border-top:1px solid var(--rule-soft)}
.pane__head-in{
  display:flex;align-items:center;gap:8px 16px;height:100%;min-height:48px;padding:0 12px 0 24px;
}
.pane--out .pane__head-in{padding-left:56px;padding-right:20px}
.pane__head-in > .caps{flex:none}
.pane__slot{display:flex;min-width:0}
.pane__acts{margin-left:auto;display:flex;align-items:center;gap:2px}
.pane__body{position:relative;min-height:0}
.pane__foot-in{
  display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;
  height:100%;min-height:64px;padding:12px 16px 12px 24px;
}
.pane--out .pane__foot-in{padding-left:48px;padding-right:20px}

.act{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;border:0;border-radius:var(--r-sm);
  background:none;font:500 14px/1 var(--f-sans);color:var(--ink-2);white-space:nowrap;
  transition:background-color .15s, color .15s;
}
.act svg{width:16px;height:16px;flex:none}
.act path,.act rect,.act circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.act:hover{background:var(--rule-soft);color:var(--ink)}
.act:disabled{color:var(--ink-3);opacity:.5;cursor:default;background:none}
.act--icon{width:32px;padding:0;justify-content:center}
.act.is-done{color:var(--pen)}

/* ввод */
.in__text{
  display:block;width:100%;height:100%;margin:0;padding:20px 24px;border:0;outline:0;resize:none;
  background:transparent;font:400 16px/1.65 var(--f-sans);color:var(--ink);
  transition:opacity .2s;
}
.in__text::placeholder{color:var(--ink-3);opacity:1}
.in__text:focus-visible{outline:0}
.tool.is-busy .in__text{opacity:.5}
.drop{
  position:absolute;inset:10px;display:none;place-items:center;border:1.5px dashed var(--pen);border-radius:var(--r);
  background:rgba(255,253,248,.94);font:500 15px/1.4 var(--f-sans);color:var(--pen);text-align:center;padding:16px;pointer-events:none;
}
.pane--in.is-drag .drop{display:grid}

/* счётчик */
.pane--in .pane__foot-in{
  display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"count btns" "msg msg";
  align-items:center;gap:10px 16px;
}
.count{grid-area:count;min-width:0;max-width:300px}
.count__nums{display:block;font:400 13px/1.3 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.count__track{display:flex;align-items:center;gap:10px;margin-top:7px}
.count__lim{flex:none;font:400 13px/1 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.count__bar{position:relative;flex:1;height:2px;background:var(--rule-soft);border-radius:1px;overflow:hidden}
.count__bar span{position:absolute;inset:0 auto 0 0;width:var(--fill, 0%);background:var(--ink-3);transition:width .2s var(--ease), background-color .2s}
.count.is-over .count__num,.count.is-over .count__lim{color:var(--red)}
.count.is-over .count__bar span{background:var(--red)}
.count__msg{grid-area:msg;margin:-2px 0 0;font:400 13px/1.45 var(--f-sans);color:var(--red);text-wrap:pretty}
.pane__btns{grid-area:btns;display:flex;gap:8px;justify-content:flex-end}

/* результат */
.out{overflow:hidden}
.out__rule{
  position:absolute;inset:17px 0 0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--ruled) 31px 32px);
  transition:opacity .3s ease;
}
.out__margin{position:absolute;top:0;bottom:0;left:40px;width:1.5px;background:var(--margin);pointer-events:none;z-index:2}
.tool[data-out="result"] .out__rule{opacity:0}
/* во время обработки линейка — только над змейкой; внизу чистое поле под список шагов */
.out__rule{clip-path:inset(0 0 0 0);transition:opacity .3s ease, clip-path .3s ease}
.tool[data-out="busy"] .out__rule{clip-path:inset(0 0 150px 0)}
.out__empty,.out__error{
  position:absolute;left:56px;right:28px;top:var(--snap, 121px);
  font:italic 400 18px/32px var(--f-serif);color:var(--ink-3);text-align:center;
}
.out__empty p + p{position:relative;top:3px;font:400 13px/32px var(--f-sans);font-style:normal}
@media (hover: none){.out__keys{display:none}}
.out__error{color:var(--red)}
.out__error .btn{margin-top:12px;font-style:normal}
.out__scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.out__text{padding:18px 28px 28px 56px;font:400 17px/1.75 var(--f-serif);color:var(--ink);word-wrap:break-word}
.out__text p + p{margin-top:.9em}
.ink{position:relative;opacity:0;filter:blur(3px);top:2px;animation:ink .42s ease-out forwards;animation-delay:var(--d, 0ms)}
@keyframes ink{to{opacity:1;filter:blur(0);top:0}}
.out__meta{font:400 13px/1.3 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
.out__acts{display:flex;gap:2px;flex-wrap:wrap;margin-left:-9px}

/* обработка */
.out__proc{position:absolute;inset:0}
.snake{position:absolute;inset:0;color:var(--pen);transition:opacity .25s ease}
.snake.is-out{opacity:0}
.snake path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.snake__tip{fill:currentColor;transition:opacity .15s}
.snake__ghosts{transition:opacity .3s ease}
.snake__ghosts.is-fading{opacity:0}
.snake__ghosts path{stroke-width:1.6;opacity:0;transition:opacity .18s ease-out}
.snake__ghosts path.on{opacity:.28}
.psteps{
  position:absolute;left:56px;bottom:18px;
  font:400 14px/20px var(--f-sans);transition:opacity .25s;
}
.psteps li{display:flex;align-items:center;gap:10px;height:20px;color:var(--ink-3);white-space:nowrap}
.psteps li.is-future{opacity:.5}
.psteps li.is-current{color:var(--ink)}
.psteps__mark{position:relative;width:14px;height:14px;flex:none;display:grid;place-items:center}
.psteps__mark .tick{width:14px;height:14px}
.psteps__mark .tick path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease-out}
.psteps li.is-done .tick path{stroke-dashoffset:0}
.psteps__mark::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rule);transition:background-color .2s}
.psteps li.is-done .psteps__mark::before{display:none}
.psteps li.is-current .psteps__mark::before{width:7px;height:7px;background:var(--pen);animation:pulse 1.1s ease-in-out infinite}
.psteps li:not(.is-done) .tick{display:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.45}}
.out__cancel{position:absolute;right:28px;bottom:18px;font-size:14px;line-height:20px}
.out__proc.is-leaving .psteps,.out__proc.is-leaving .out__cancel{opacity:0;transition:opacity .25s}
/* статус заказа в очереди: шаги и подсказка под ними */
.out__status{position:absolute;left:56px;right:120px;bottom:18px}
.out__status .psteps{position:static}
.out__note{margin-top:8px;max-width:44ch;font:400 13px/1.45 var(--f-sans);color:var(--ink-3);text-wrap:pretty;transition:opacity .25s}
.out__proc.is-leaving .out__note{opacity:0}

/* метр «ИИ-след» */
.meter{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;animation:meter-in .3s ease-out}
.meter__label{font:400 12px/1 var(--f-sans);color:var(--ink-3)}
.meter__bar{position:relative;width:56px;height:4px;border-radius:2px;background:var(--rule-soft);overflow:hidden}
.meter__fill{position:absolute;inset:0 auto 0 0;width:var(--v);background:currentColor;border-radius:2px;animation:meter-fill .7s var(--ease)}
.meter__val{font:500 13px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.meter--hi{color:var(--red)}
.meter--mid{color:var(--ink-2)}
.meter--lo{color:var(--pen)}
.meter__demo{font:500 11px/1 var(--f-sans);color:var(--ink-3);border:1px solid var(--rule);border-radius:4px;padding:3px 5px 3px}
@keyframes meter-fill{from{width:0}}
@keyframes meter-in{from{opacity:0}}

/* компактная раскладка инструмента внутри узких панелей */
@container (max-width: 560px){
  .pane--in .kbd{display:none}
}
@container (max-width: 532px){
  .pane--in .pane__foot-in{grid-template-columns:minmax(0, 1fr);grid-template-areas:"count" "msg" "btns"}
  .count{max-width:none}
}
@container (max-width: 470px){
  .pane__head-in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .pane--in .pane__slot{order:3;flex-basis:100%}
  .pane--in .pane__slot:empty{display:none}
  .pane__acts .act:not(.act--icon) svg,.out__acts .act svg{display:none}
  .pane__acts .act,.out__acts .act{padding:0 6px}
  .pane__head-in{column-gap:10px}
}

/* =====================================================================
   МОДАЛКА
   ===================================================================== */
.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;overflow-y:auto;
  background:rgba(22,23,27,.38);animation:fade .16s ease-out;
}
.modal.is-closing{animation:fade-out .14s ease-in forwards}
.modal__dialog{
  position:relative;width:min(440px, 100%);background:var(--sheet);border-radius:var(--r-lg);
  padding:32px;box-shadow:0 1px 0 rgba(22,23,27,.04), 0 32px 64px -32px rgba(22,23,27,.5);
  animation:rise .2s var(--ease);
}
.modal__dialog:focus{outline:0}
.modal__close{
  position:absolute;right:12px;top:12px;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:var(--r);background:none;color:var(--ink-3);
}
.modal__close:hover{background:var(--rule-soft);color:var(--ink)}
.modal__close svg{width:16px;height:16px}
.modal__close path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.modal__title{font:500 30px/1.15 var(--f-serif);letter-spacing:-.018em;padding-right:28px}
.modal__text{margin-top:12px;color:var(--ink-2);text-wrap:pretty}
.modal__text b{display:inline-block;max-width:100%;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.modal__fine{margin-top:16px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.modal__fine a{color:inherit;text-underline-offset:2px}
.modal__actions{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
@keyframes fade{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

.field-label{display:block;margin-top:24px;margin-bottom:8px;font:500 14px/1.2 var(--f-sans);color:var(--ink)}
.field{
  display:block;width:100%;height:48px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--sheet);font:400 16px/1 var(--f-sans);color:var(--ink);transition:border-color .15s;
}
.field::placeholder{color:#9A9A9F}
.field:hover{border-color:#BDB7A7}
.field:focus{outline:0;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.field.is-error{border-color:var(--red)}
.field-err{margin-top:8px;font-size:14px;line-height:1.4;color:var(--red)}
.auth-form .btn{margin-top:20px}

.otp{margin-top:24px;display:flex;gap:8px}
.otp__cell{
  width:48px;height:58px;padding:0;border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet);
  text-align:center;font:500 26px/1 var(--f-mono);color:var(--ink);caret-color:var(--pen);
  transition:border-color .12s, background-color .12s;
}
.otp__cell.is-filled{border-color:var(--ink-3)}
.otp__cell:focus{outline:0;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.otp.is-error .otp__cell{border-color:var(--red);background:var(--red-soft)}
.otp.is-shake{animation:shake .3s ease-in-out}
.otp.is-busy{opacity:.6;pointer-events:none}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.otp__resend{margin-top:20px;font-size:14px;color:var(--ink-2)}
.otp__resend .mono{color:var(--ink)}
.otp__hint{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink-3)}

.auth-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:12px 0 8px}
.auth-done svg{width:56px;height:56px;color:var(--pen)}
.auth-done path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:draw .5s ease-out forwards}

/* =====================================================================
   ТОСТЫ
   ===================================================================== */
.toasts{position:fixed;left:50%;bottom:24px;z-index:200;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:var(--ink);color:var(--sheet);border-radius:var(--r);padding:12px 16px;font:400 14px/1.45 var(--f-sans);box-shadow:0 12px 32px -16px rgba(22,23,27,.5);animation:rise .2s var(--ease);text-wrap:pretty}
.toast.is-out{animation:fade-out .2s ease-in forwards}

/* =====================================================================
   КАБИНЕТ
   ===================================================================== */
body.is-booting .app-shell{visibility:hidden}
.app-header__in{gap:32px;justify-content:flex-start}
.tabs{display:flex;gap:28px;height:100%;align-items:center}
.tab{position:relative;padding:6px 0 7px;font:500 15px/1 var(--f-sans);color:var(--ink-3);text-decoration:none;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--ink)}
.tab svg{position:absolute;left:0;bottom:-4px;width:100%;height:8px;color:var(--pen);opacity:0}
.tab path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.tab[aria-current="page"] svg{opacity:1}
.app-user{margin-left:auto;display:flex;align-items:center;gap:20px;min-width:0}
.app-user__email{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ink-3)}
.app-user .link-btn{font-size:14px;color:var(--ink-2);text-decoration-color:var(--rule)}
.app-user .link-btn:hover{color:var(--ink);text-decoration-color:currentColor}

.app-main{padding:28px 0 64px}
.view:focus{outline:0}
.balance{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:36px;flex-wrap:wrap}
.balance p{font-size:15px;color:var(--ink-2)}
.balance__val{color:var(--ink)}
.balance__n{font:400 14px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.app-h1{font:500 40px/1.1 var(--f-serif);letter-spacing:-.02em;margin:12px 0 28px}

.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sheet)}
.hist__row{
  display:grid;grid-template-columns:128px minmax(0, 1fr) 104px auto;align-items:center;gap:20px;
  padding:18px 24px;border-top:1px solid var(--rule-soft);
}
.hist__row:first-child{border-top:0}
.hist__date{font:400 13px/1.3 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.hist__main{min-width:0}
.hist__preview{font:400 16px/1.5 var(--f-serif);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist__tags{margin-top:3px;font-size:13px;line-height:1.3;color:var(--ink-3)}
.hist__state{color:var(--ink-2)}
.hist__state--active{color:var(--pen)}
.hist__state--failed{color:var(--red)}
.hist__words{font:400 13px/1.3 var(--f-mono);color:var(--ink-2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hist__acts{display:flex;align-items:center;gap:4px;justify-content:flex-end;min-width:150px}
.hist__acts .act{font-size:14px}
.hist__acts .act--red{color:var(--red)}
.hist__acts .act--red:hover{background:var(--red-soft);color:var(--red)}
.hist__confirm{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.hist__row.is-removing{opacity:0;transition:opacity .2s}
.hist__empty{padding:56px 32px 60px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hist__empty p{font:italic 400 20px/1.5 var(--f-serif);color:var(--ink-2);max-width:32ch}
.hist__more{margin-top:20px}
.hist__loading{padding:28px 24px;color:var(--ink-3);font-size:14px}

.profile{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:24px;align-items:stretch}
.profile .sheet{padding:28px 32px 32px}
.acct{margin-top:18px}
.acct__row{display:grid;grid-template-columns:120px minmax(0, 1fr);gap:16px;padding:14px 0;border-top:1px solid var(--rule-soft);align-items:baseline}
.acct__row:first-child{border-top:0}
.acct dt{font-size:14px;color:var(--ink-3)}
.acct dd{margin:0;font-size:15px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.acct dd .mono{font-size:14px}
@media (max-width:480px){.acct__sep{display:none}.acct__pages{display:block;margin-top:2px}}
.topup{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.topup__plan{border:1px solid var(--rule);border-radius:10px;padding:20px 20px 20px;display:flex;flex-direction:column;gap:6px}
.topup__plan--main{border:1.5px solid var(--pen);padding:19.5px}
.topup__name{font:500 20px/1.2 var(--f-serif)}
.topup__price{font:500 32px/1.1 var(--f-serif);letter-spacing:-.02em;margin-top:6px}
.topup__vol{font-size:14px;color:var(--ink-2)}
.topup__plan .btn{margin-top:14px}
.profile__foot{margin-top:32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* =====================================================================
   АДАПТИВ
   ===================================================================== */
@media (max-width:1024px){
  :root{--section:112px}
  .hero__head{display:block}
  .hero__title{font-size:clamp(44px, 7.4vw, 72px)}
  .hero__lead{margin-top:28px;max-width:600px}
  .hero__facts{margin-top:16px}
  .how__title{grid-column:1 / -1;position:static;margin-bottom:28px}
  .how__steps{grid-column:1 / -1}
  .faq__side{grid-column:1 / -1;position:static;margin-bottom:28px}
  .faq__list{grid-column:1 / -1}
  .keep__head .h3{grid-column:1 / -1}
  .keep__head p{grid-column:1 / -1;margin-top:12px;max-width:640px}
  .keep__grid{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:32px}
  .samples{grid-template-columns:1fr;max-width:680px}
  .plans{grid-template-columns:1fr;max-width:560px;margin-top:80px}
  .profile{grid-template-columns:1fr}
}

@media (max-width:768px){
  :root{--gutter:16px;--section:88px}
  .nav__links{display:none}
  .lead{font-size:17px}
  .hero{padding-top:36px}
  .hero__tool{margin-top:28px}
  .hero__tool-slot{min-height:760px}
  .hero__list{flex-direction:column;align-items:flex-start;gap:10px;padding-top:18px}
  .tool__panes{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .tool--app .tool__panes{height:auto}
  .pane{grid-row:auto;grid-template-rows:auto minmax(0, 1fr) auto}
  .pane + .pane{border-left:0;border-top:1px solid var(--rule)}
  .pane--in .pane__body{height:300px}
  .pane--out .pane__body{height:340px}
  .tool--app .pane--in .pane__body{height:280px}
  .tool--app .pane--out .pane__body{height:max(340px, 52vh)}
  .tool__bar{gap:10px 20px}
  .keep{padding:32px 24px 32px;margin-top:64px}
  .how__step{grid-template-columns:64px minmax(0, 1fr);padding:24px 0 26px}
  .how__n{font-size:48px}
  .cta{padding:72px 0 80px}
  .app-header{height:auto}
  .app-header .site-header__in{flex-wrap:wrap;height:auto;padding-top:14px;gap:0}
  .app-header .tabs{order:3;flex-basis:100%;height:48px;gap:24px}
  .app-user__email{display:none}
  .hist__row{grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"date words" "main main" "acts acts";gap:6px 12px;padding:16px 18px}
  .hist__date{grid-area:date}
  .hist__words{grid-area:words}
  .hist__main{grid-area:main}
  .hist__acts{grid-area:acts;justify-content:flex-start;margin-left:-9px;min-width:0}
  .app-h1{font-size:34px}
  .balance{flex-wrap:nowrap}
  .balance p{font-size:14px}
  .balance__n{font-size:13px}
  .balance .btn{padding:0 12px}
  .profile .sheet{padding:24px 20px 24px}
}

@media (max-width:480px){
  .h2{font-size:32px}
  .hero__title{font-size:44px}
  .tool__bar{gap:14px;padding:14px 16px 16px}
  .tool__group{width:100%;flex-direction:column;align-items:stretch;gap:8px}
  .tool__keep{gap:4px 18px}
  .seg{display:flex;width:100%}
  .seg button{flex:1;padding:0 6px}
  .select,.select select{width:100%}
  .pane__head-in{padding-left:16px}
  .pane--out .pane__head-in{padding-left:56px}
  .pane__foot-in{padding-left:16px;padding-right:12px}
  .pane--out .pane__foot-in{padding-left:16px;padding-right:16px}
  .out__acts{margin-left:-6px}
  .out__cancel{bottom:18px}
  .out__status{right:100px}
  .pane__btns .btn{flex:1;padding:0 10px}
  .in__text{padding:16px}
  .out__text{padding-right:18px}
  .out__text,.qa__a p{hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:8 4 3}
  .sample__body{grid-template-columns:1fr;padding:var(--pad) 18px 28px 58px}
  .sample__head{padding-left:58px}
  .sample::before{left:42px}
  .stamp{right:16px}
  .sample__notes{margin-top:0}
  .keep__grid{grid-template-columns:1fr}
  .plan{padding:26px 22px 24px}
  .plan--main{padding:25.5px 21.5px 23.5px}
  .plan__price{font-size:44px}
  .modal__dialog{padding:28px 22px 26px}
  .modal__title{font-size:27px}
  .otp{gap:8px}
  .otp__cell{width:44px;height:54px;font-size:24px}
  .qa__q{font-size:19px}
  .topup{grid-template-columns:1fr}
  .site-footer__links{gap:16px 22px}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .hero__wave path{stroke-dashoffset:0}
  .psteps li.is-current .psteps__mark::before{animation:none}
  .pen-dot{animation:none}
  .ink{opacity:1;filter:none;top:0}
}