/* ===== Скачивалка TikTok ES (/descargar-videos-tiktok/, -audio-, -fotos-). Порт UA-тула (100pidpysnykiv, _tools/03-tiktok-downloader/src/tool.css)
   один в один по устройству страницы: первый экран прямо на фиолетовом фоне сайта, ниже белый лист с CTA и SEO-блоками.
   Размеры только токенами DESIGN.md §3, сетка 12 колонок по линии текста (большие блоки: padding-inline 24 + grid 12 / gap 24).
   build.py собирает в assets/css/tiktok-dl.css — правим здесь, не там. ===== */
.td{--pur:#7A4AF7;--pur-d:#5222CF;--pur-l:#ECE6FE;--lime:#C7F74A;--lime-h:#B4E730;--ink:#141533;--slate:#667198;--wash:#F2F8FF;--line:rgba(20,21,51,.08);
    --sh:0 2px 8px rgba(20,21,51,.05);--sh-open:0 14px 30px rgba(20,21,51,.22);--sh-hover:0 6px 16px rgba(122,74,247,.2);
    --g:var(--sp-6);--pad:var(--sp-6);
    color:var(--ink);font-size:var(--fs-md);line-height:var(--lh-text)}
.td *{box-sizing:border-box}
.td [hidden]{display:none!important}
.td svg{flex:0 0 auto}
.td button{font-family:inherit}
@media(min-width:992px){.td .mk{white-space:nowrap}}
@media(max-width:767px){.td{--g:var(--sp-4);--pad:var(--sp-4)}}

/* --- поле --- */
.td-box{display:flex;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-open)}
.td-field{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2) 0 var(--sp-4);
    border-radius:var(--r-sm);background:var(--wash);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,background .2s}
.td-field:focus-within{border-color:var(--pur);box-shadow:0 0 0 4px rgba(122,74,247,.12);background:#fff}
.td-field>svg{width:20px;height:20px;color:var(--slate);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.td-field input{flex:1 1 auto;min-width:0;height:56px;padding:0;border:0;outline:none;background:transparent;font:inherit;font-size:var(--fs-md);color:var(--ink);text-overflow:ellipsis}
.td-field input::placeholder{color:var(--slate)}
.td-paste,.td-clr{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--sp-2);height:40px;padding:0 var(--sp-3);border:1px solid var(--line);
    border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:background .2s}
.td-paste:hover,.td-clr:hover{background:var(--pur-l)}
.td-paste svg,.td-clr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.td-clr{width:40px;padding:0;justify-content:center;color:var(--slate)}
.td-go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:56px;padding:0 var(--sp-8);border:0;border-radius:var(--r-sm);
    cursor:pointer;font-weight:700;font-size:var(--fs-lg);color:var(--ink);background:var(--lime);transition:background .2s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.td-go:hover{background:var(--lime-h)}
.td-go:active{transform:scale(.95)}
.td-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.td-go[aria-busy="true"]{opacity:.75;cursor:progress}
.td-go:focus-visible,.td-paste:focus-visible,.td-clr:focus-visible,.td-btn:focus-visible{outline:2px solid var(--pur);outline-offset:2px}
@media(max-width:767px){
    .td-box{flex-direction:column}
    .td-go{width:100%}
    .td-paste span{display:none}
    .td-paste{width:40px;padding:0;justify-content:center}
    .td-field input::placeholder{font-size:var(--fs-sm)}
}
.td-hint{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:#FFF6D6;color:#5C4A00;font-size:var(--fs-sm);line-height:var(--lh-text);text-align:left}
.td-sub{margin-top:var(--sp-4);color:var(--slate);font-size:var(--fs-sm)}
.td-sub b{color:var(--ink)}


/* ---------------- ПЕРВЫЙ ЭКРАН (UA .td-hero): прямо на фиолетовом фоне сайта, всё по центру ---------------- */
.td-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-6);padding:var(--sp-12) var(--sp-6);text-align:center;color:#fff}
.td-hero>*{grid-column:3/11;min-width:0}
.td-badge{justify-self:center;display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-6);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:var(--fs-sm);font-weight:700}
.td-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(199,247,74,.25)}
.td-hero h1{grid-column:2/12;font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:700;color:#fff}
.td-hero h1 .mk{color:var(--lime)}
.td-hero .lead{margin-top:var(--sp-4);margin-bottom:var(--sp-8);font-size:var(--fs-lg);line-height:var(--lh-text);color:rgba(255,255,255,.9)}
.td-hero .td-sub{color:rgba(255,255,255,.8)}
.td-hero .td-sub b{color:#fff}
.td-hero .td-recent>span{color:rgba(255,255,255,.75)}
.td-hero .td-rc{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff}
.td-hero .td-rc:hover{background:rgba(255,255,255,.2);box-shadow:none}
.td-hero .td-rc:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.td-hero .td-out{grid-column:2/12;margin-top:var(--sp-8)}

/* --- недавние --- */
.td-recent{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);overflow-x:auto;scrollbar-width:none}
.td-recent::-webkit-scrollbar{display:none}
.td-recent>span{flex:0 0 auto;color:var(--slate);font-size:var(--fs-sm);font-weight:500}
.td-rc{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--sp-2);height:40px;max-width:200px;padding:0 var(--sp-3) 0 var(--sp-1);border:1px solid var(--line);
    border-radius:var(--r-pill);background:#fff;color:var(--ink);font-size:var(--fs-sm);font-weight:500;cursor:pointer}
.td-rc:hover{box-shadow:var(--sh-hover)}
.td-rc img,.td-rc i{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--pur-l)}
.td-rc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- результат: 12 колонок по тексту карточки; телефон 4 (около 300 px, как у UA), действия 8 --- */
.td-out:empty{display:none}
.td-res{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);padding:var(--pad);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-open);align-items:start;text-align:left;color:var(--ink)}
.td-res>.td-phone{grid-column:span 4}
.td-res>.td-act{grid-column:span 8}
@media(max-width:767px){
    .td-res{grid-template-columns:repeat(4,minmax(0,1fr))}
    .td-res>.td-phone,.td-res>.td-act{grid-column:1/-1}
    .td-res>.td-phone{width:260px;max-width:100%;justify-self:center}
}

/* телефон в стиле TikTok (внутри — интерфейс TikTok, свои мелкие размеры в пределах --fs-xs/--fs-sm) */
.td-phone{width:100%;padding:var(--sp-2);border-radius:var(--sp-12);background:var(--ink);box-shadow:0 14px 30px rgba(20,21,51,.22)}
.tt{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:var(--sp-8);background:#000;color:#fff;font-size:var(--fs-xs);line-height:var(--lh-head)}
.tt svg{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tt-media{position:absolute;inset:0;background:radial-gradient(110% 70% at 70% 25%,#2B4A6B 0%,#14202E 55%,#050709 100%)}
.tt-media>img,.tt-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.tt-media>video{object-fit:contain}
.tt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.tt-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:var(--sp-4);padding-top:var(--sp-6);font-size:var(--fs-sm);font-weight:700;color:rgba(255,255,255,.7)}
.tt-top b{position:relative;color:#fff}
.tt-top b::after{content:"";position:absolute;left:25%;right:25%;bottom:calc(-1 * var(--sp-1));height:2px;border-radius:2px;background:#fff}
.tt-play{position:absolute;left:50%;top:50%;z-index:3;width:64px;height:64px;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;cursor:pointer;
    background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tt-play svg{width:28px;height:28px;margin-left:var(--sp-1);fill:currentColor;stroke:none}
.tt-dur,.tt-cnt{position:absolute;top:var(--sp-6);right:var(--sp-3);z-index:3;padding:0 var(--sp-2);border-radius:var(--r-pill);background:rgba(0,0,0,.45);font-size:var(--fs-xs);font-weight:700}
.tt-rc{position:absolute;right:var(--sp-2);bottom:var(--sp-12);z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);font-weight:700}
.tt-rc>span{display:flex;flex-direction:column;align-items:center;gap:2px}
.tt-rc svg{width:26px;height:26px}
.tt-rc .hrt svg{fill:#fff;stroke:none}
.tt-av{position:relative;margin-bottom:var(--sp-2)}
.tt-av img,.tt-av i{display:block;width:40px;height:40px;border-radius:50%;border:1.5px solid #fff;object-fit:cover;background:#444}
.tt-av b{position:absolute;left:50%;bottom:calc(-1 * var(--sp-2));width:18px;height:18px;transform:translateX(-50%);border-radius:50%;background:#FE2C55;color:#fff;font-size:var(--fs-sm);line-height:18px;text-align:center}
.tt-disc{width:32px;height:32px;border-radius:50%;padding:var(--sp-2);background:radial-gradient(#555,#111);animation:tt-spin 5s linear infinite}
.tt-disc img,.tt-disc i{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#666}
@keyframes tt-spin{to{transform:rotate(360deg)}}
.tt-bb{position:absolute;left:var(--sp-3);right:var(--sp-16);bottom:var(--sp-4);z-index:2}
.tt-nick{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.tt-snd{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2)}
.tt-snd svg{width:13px;height:13px}
.tt-snd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt.playing .tt-rc,.tt.playing .tt-bb,.tt.playing .tt-top,.tt.playing .tt-dur,.tt.playing::after{display:none}
.tt-car{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.tt-car::-webkit-scrollbar{display:none}
.tt-car img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;background:#000}
.tt-dots{position:absolute;left:0;right:0;bottom:var(--sp-2);z-index:3;display:flex;justify-content:center;gap:var(--sp-1)}
.tt-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45)}
.tt-dots i.on{background:#fff}
.tt-photo .tt-bb{bottom:var(--sp-6)}
@media (prefers-reduced-motion:reduce){.tt-disc{animation:none}}

/* действия */
.td-act{min-width:0}
.td-au{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.td-au img,.td-au>i{flex:0 0 auto;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--pur-l)}
.td-au div{min-width:0}
.td-au b{display:block;font-size:var(--fs-lg);font-weight:700;line-height:var(--lh-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-au small{display:block;color:var(--slate);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-desc{margin-bottom:var(--sp-4)!important;color:var(--slate);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.td-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.td-meta span{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--wash);font-size:var(--fs-sm);color:var(--slate);white-space:nowrap}
.td-meta b{color:var(--ink)}
/* minmax(0,1fr) и min-width:0: длинное название трека обрезается, а не растягивает кнопки (баг T-F01 UA) */
.td-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.td-btn{display:flex;align-items:center;gap:var(--sp-3);min-width:0;width:100%;min-height:56px;padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
    color:var(--ink);text-decoration:none;cursor:pointer;font-size:var(--fs-md);font-weight:700;line-height:var(--lh-head);text-align:left;transition:box-shadow .2s,background .2s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.td-btn:hover{box-shadow:var(--sh-hover);color:var(--ink)}
.td-btn:active{transform:scale(.95)}
.td-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--pur)}
.td-btn span{flex:1 1 auto;min-width:0}
.td-btn small{display:block;color:var(--slate);font-size:var(--fs-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-btn em{flex:0 0 auto;font-style:normal;padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--pur-l);color:var(--pur-d);font-size:var(--fs-xs);font-weight:700}
.td-btn.pri{border-color:var(--lime);background:var(--lime);font-size:var(--fs-lg)}
.td-btn.pri:hover{background:var(--lime-h)}
.td-btn.pri svg{color:var(--ink)}
.td-btn.pri small{color:var(--ink);opacity:.7}
.td-btn.pri em{background:rgba(255,255,255,.6);color:var(--ink)}
.td-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
@media(max-width:767px){.td-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.td-thumb{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;background:var(--wash)}
.td-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.td-thumb span{position:absolute;left:var(--sp-1);right:var(--sp-1);bottom:var(--sp-1);display:flex;align-items:center;justify-content:center;gap:var(--sp-1);height:28px;border-radius:var(--r-sm);
    background:rgba(20,21,51,.78);color:#fff;font-size:var(--fs-xs);font-weight:700}
.td-thumb span svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.td-note{margin-bottom:var(--sp-4)!important;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:#FFF6D6;color:#5C4A00;font-size:var(--fs-sm)}
.td-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.td-foot small{color:var(--slate);font-size:var(--fs-sm)}
.td-again{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0;border:0;background:none;color:var(--pur);font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.td-again:hover{text-decoration:underline}
.td-again svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* скелетон — те же размеры, что у результата */
.td-sk .tt{background:linear-gradient(100deg,#1D1838 30%,#2C2550 50%,#1D1838 70%);background-size:300% 100%;animation:td-sh 1.2s linear infinite}
.td-act.td-sk i{display:block;border-radius:var(--r-sm);background:linear-gradient(100deg,var(--wash) 30%,#E6EEF9 50%,var(--wash) 70%);background-size:300% 100%;animation:td-sh 1.2s linear infinite}
.td-act.td-sk .grow{flex:1}
.td-act.td-sk .a{width:48px;height:48px;border-radius:50%}
.td-act.td-sk .l1{height:18px;width:50%;margin-bottom:var(--sp-2)}
.td-act.td-sk .l3{height:14px;width:30%}
.td-act.td-sk .l2{height:14px;width:85%;margin-bottom:var(--sp-6)}
.td-act.td-sk .b{height:56px;margin-bottom:var(--sp-2);border-radius:var(--r-md)}
@keyframes td-sh{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.td-sk .tt,.td-act.td-sk i{animation:none}}

/* ошибка */
.td-err{display:grid;gap:var(--g);padding:var(--pad);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-open);text-align:left;color:var(--ink)}
@media(min-width:768px){.td-err.wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center}}
.td-err h3{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);font-size:var(--fs-xl);line-height:var(--lh-head);font-weight:700;color:var(--ink)}
.td-err h3::before{content:"!";flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-icon);background:#FFE3E3;color:#D62D30;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md)}
.td-err p{color:var(--slate)}
.td-err .row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.td-err .row .td-btn{width:auto;min-height:48px}

/* мини-макет «Compartir → Copiar enlace» (в ошибке bad_url) */
.td-mock{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);color:var(--ink)}
.td-mock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.td-mock .t{text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--slate)}
.td-mock .ic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1)}
.td-mock .ic span{min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);line-height:var(--lh-head);text-align:center;color:var(--slate)}
.td-mock .ic i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--wash);color:var(--ink)}
.td-mock .ic .hi{color:var(--ink);font-weight:700}
.td-mock .ic .hi i{background:var(--lime);box-shadow:0 0 0 3px var(--pur)}

/* тост */
.td-toast{position:fixed;left:50%;bottom:var(--sp-6);z-index:9000;transform:translate(-50%,140%);opacity:0;max-width:calc(100% - 32px);padding:var(--sp-3) var(--sp-6);border-radius:var(--r-md);
    background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--sh-open);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;pointer-events:none;text-align:center}
.td-toast.on{transform:translate(-50%,0);opacity:1}


/* мини-макеты в карточках шагов (одной высоты, светлые, как интерфейс) */
.td-step .td-mock{height:150px;margin-top:auto;overflow:hidden}
.td-mock .bar{display:flex;align-items:center;gap:var(--sp-2);min-width:0;height:36px;padding:0 var(--sp-3);border-radius:var(--r-sm);background:var(--wash);border:1px solid var(--line);font-size:var(--fs-xs);color:var(--slate)}
.td-mock .bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-mock .bar mark{padding:0 var(--sp-1);border-radius:var(--sp-1);background:#CFE0FF;color:var(--ink)}
.td-mock .bar em{flex:0 0 auto;font-style:normal;padding:var(--sp-1) var(--sp-2);border-radius:var(--sp-2);border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:var(--fs-xs)}
.td-mock .bar em.hi{border-color:var(--pur);box-shadow:0 0 0 2px rgba(122,74,247,.25)}
.td-mock .key{align-self:center;display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--slate)}
.td-mock .key kbd{padding:2px var(--sp-2);border-radius:var(--sp-1);border:1px solid var(--line);border-bottom-width:2px;background:#fff;font-family:inherit;font-weight:700;color:var(--ink)}
.td-mock .mb{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-3);border-radius:var(--r-sm);background:var(--lime);
    font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden}
.td-mock .file{align-self:center;display:flex;align-items:center;gap:var(--sp-2);max-width:100%;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--wash);font-size:var(--fs-xs);color:var(--slate)}
.td-mock .file svg{width:13px;height:13px;color:#1F6A31}
.td-mock .file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- БЕЛЫЙ ЛИСТ (UA .td-sheet): лаймовая метка сверху, внутри та же сетка 12 ---------------- */
.td-sheet{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-6);padding:var(--sp-8) var(--sp-6) var(--sp-4);border-radius:var(--r-sm);background:#fff}
.td-sheet::before{content:"";position:absolute;top:0;left:50%;width:64px;height:5px;transform:translateX(-50%);border-radius:0 0 6px 6px;background:var(--lime)}
.td-sheet>*{grid-column:1/-1;min-width:0}
.td{padding-bottom:var(--sp-12)}

/* CTA (UA .td-cta): фиолетовый градиент, текст 1–9, кнопка 10–12 */
.td-cta{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:center;padding:var(--sp-8) var(--sp-6);
    border-radius:var(--r-md);background:linear-gradient(120deg,#7A4AF7,#5222CF);color:#fff}
.td-cta::after{content:"";position:absolute;right:calc(-1 * var(--sp-12));top:calc(-1 * var(--sp-12));width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(199,247,74,.35),transparent 65%);pointer-events:none}
.td-cta .tx{grid-column:1/10;position:relative;z-index:1}
.td-cta h2{margin-bottom:var(--sp-2);font-size:var(--fs-xl);line-height:var(--lh-head);font-weight:700;color:#fff}
.td-cta p{color:rgba(255,255,255,.8)}
.td-cta a{grid-column:10/13;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:56px;padding:0 var(--sp-4);border-radius:var(--r-md);
    background:var(--lime);color:var(--ink);font-weight:700;font-size:var(--fs-lg);text-decoration:none;white-space:nowrap;transition:background .2s}
.td-cta a:hover{background:var(--lime-h);color:var(--ink)}
.td-cta a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* SEO-секции: каждая — та же сетка 12; заголовок и текст по центру на колонках 3–10 */
.td-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-6);padding:var(--sp-12) 0}
.td-sec+.td-sec{border-top:1px solid var(--line)}
.td-sec>*{grid-column:1/-1;min-width:0}
.td-sec>.td-eyebrow,.td-sec>h2,.td-sec>.sub,.td-sec>.td-prose,.td-sec>.td-faq{grid-column:3/11}
.td-sec>.td-tw,.td-sec>.td-foot2{grid-column:2/12}
.td-sec>.td-tabs{grid-column:4/10}
.td-eyebrow{display:block;margin-bottom:var(--sp-2);text-align:center;color:var(--pur);font-weight:700;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase}
.td-sec h2{margin-bottom:var(--sp-3);text-align:center;font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:700;color:var(--ink)}
.td-sec h2+.td-tips,.td-sec h2+.td-tw,.td-sec h2+.td-prose,.td-sec h2+.td-faq{margin-top:var(--sp-6)}
.td-sec .sub{margin-bottom:var(--sp-8);text-align:center;color:var(--slate);font-size:var(--fs-md);line-height:var(--lh-text)}
.td-sec h3{color:var(--ink)}

/* вкладки устройств */
.td-tabs{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-6);padding:var(--sp-1);border-radius:var(--r-md);background:var(--wash)}
.td-tabs button{flex:1 1 0;height:44px;padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--slate);font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap}
.td-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.td-tabs button:focus-visible{outline:2px solid var(--pur);outline-offset:1px}

/* шаги: кружки 1-2-3 на пунктире, под ними карточки с текстом и мини-макетом; 3 карточки = по 4 колонки */
.td-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);padding-top:calc(56px + var(--sp-6))}
.td-steps::before{content:"";position:absolute;left:16.6%;right:16.6%;top:28px;border-top:2px dashed #D9D2F7}
.td-step{position:relative;display:flex;flex-direction:column;padding:var(--pad);border-radius:var(--r-md);background:var(--wash);border:1px solid var(--line)}
.td-step .n{position:absolute;left:50%;top:calc(-56px - var(--sp-6) - 1px);transform:translateX(-50%);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:var(--fs-xl);color:#fff;background:linear-gradient(135deg,var(--pur),var(--pur-d));box-shadow:0 0 0 var(--sp-2) #fff,0 12px 24px -10px rgba(82,34,207,.6)}
.td-step h3{margin-bottom:var(--sp-2);font-size:var(--fs-xl);line-height:var(--lh-head);font-weight:700}
.td-step p{margin-bottom:var(--sp-4);color:var(--slate);font-size:var(--fs-md);line-height:var(--lh-text)}

/* карточка с 3D-картинкой: светлая, картинка заходит на верхний край в белую выемку */
.td-feat{position:relative;margin-top:var(--sp-16);padding:calc(var(--sp-16) + var(--sp-12)) var(--pad) var(--pad);border-radius:var(--r-md);background:var(--wash);border:1px solid var(--line)}
.td-feat::before{content:"";position:absolute;left:50%;top:-1px;width:196px;height:98px;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 98px 98px}
.td-feat>img{position:absolute;left:50%;top:calc(-1 * var(--sp-16));z-index:1;width:150px;height:auto;transform:translateX(-50%)}
.td-feat>.td-eyebrow,.td-feat>h2,.td-feat>.sub{max-width:760px;margin-left:auto;margin-right:auto}
.td-feat h2{margin-bottom:var(--sp-8)}
.td-feat h2+.sub{margin-top:calc(-1 * var(--sp-4))}
.td-feat .td-tip{background:#fff}

/* таблицы */
.td-tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.td-table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--fs-md);line-height:var(--lh-text);text-align:left}
.td-table th{padding:var(--sp-3) var(--sp-4);background:var(--wash);font-size:var(--fs-xs);font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.06em}
.td-table td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);vertical-align:top;color:var(--ink)}
.td-table td:first-child{font-weight:700}
.td-table .y{color:#1F6A31;font-weight:700}
.td-table .n{color:#9A3A36}
.td-table a{color:var(--pur)}
.td-foot2{margin-top:var(--sp-3);color:var(--slate);font-size:var(--fs-sm);line-height:var(--lh-text)}

/* текст */
.td-prose{color:var(--slate);font-size:var(--fs-md);line-height:var(--lh-text)}
.td-prose p{margin-bottom:var(--sp-4)}
.td-prose p:last-child{margin-bottom:0}
.td-prose b{color:var(--ink)}
.td-prose a{color:var(--pur)}

/* советы: 3 в ряд (по 4 колонки) */
.td-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.td-tip{padding:var(--pad);border-radius:var(--r-md);background:var(--wash);border:1px solid var(--line)}
.td-tip h3{margin-bottom:var(--sp-2);font-size:var(--fs-xl);line-height:var(--lh-head);font-weight:700}
.td-feat .td-tip h3{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.td-tip .di{flex:0 0 auto;width:52px;height:52px;border-radius:var(--r-icon);display:flex;align-items:center;justify-content:center;background:var(--pur-l);color:var(--pur)}
.td-tip .di svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.td-tip p{color:var(--slate);font-size:var(--fs-md);line-height:var(--lh-text)}

/* FAQ */
.td-faq{display:grid;gap:var(--sp-4)}
.td-faq details{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.td-faq details[open]{border-color:#D9D2F7;box-shadow:0 12px 30px -18px rgba(20,21,51,.4)}
.td-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--pad);list-style:none;cursor:pointer;font-weight:700;font-size:var(--fs-lg);line-height:var(--lh-head);color:var(--ink)}
.td-faq summary::-webkit-details-marker{display:none}
.td-faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-top:-3px;border-right:2px solid var(--pur);border-bottom:2px solid var(--pur);transform:rotate(45deg);transition:transform .2s}
.td-faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.td-faq .a{padding:0 var(--pad) var(--sp-4);color:var(--slate);font-size:var(--fs-md);line-height:var(--lh-text)}

/* ссылки на соседние страницы */
.td-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-6)}
.td-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-weight:700;font-size:var(--fs-sm);text-decoration:none}
.td-links a:hover{box-shadow:var(--sh-hover);color:var(--ink)}

/* ---------------- планшет и телефон (сетка сайта: 12 → 4 колонки) ---------------- */
@media(max-width:991px){
    .td-hero>*,.td-hero h1,.td-hero .td-out{grid-column:1/-1}
    .td-sec>.td-eyebrow,.td-sec>h2,.td-sec>.sub,.td-sec>.td-prose,.td-sec>.td-faq,.td-sec>.td-tw,.td-sec>.td-foot2{grid-column:1/-1}
    .td-sec>.td-tabs{grid-column:3/11}
    .td-tips{grid-template-columns:repeat(2,minmax(0,1fr))}
    .td-feat .td-tips{grid-template-columns:repeat(3,minmax(0,1fr))}
    .td-cta .tx{grid-column:1/9}
    .td-cta a{grid-column:9/13}
}
@media(max-width:767px){
    .td-hero,.td-sheet,.td-sec,.td-cta{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-4)}
    .td-hero{padding:var(--sp-8) var(--sp-4)}
    .td-sheet{padding:var(--sp-6) var(--sp-4) var(--sp-4)}
    .td-sheet>*,.td-sec>*,.td-sec>.td-tabs,.td-cta .tx,.td-cta a{grid-column:1/-1}
    .td-hero .lead{font-size:var(--fs-md);margin-bottom:var(--sp-6)}
    .td-cta{padding:var(--sp-6) var(--sp-4);text-align:center}
    .td-sec{padding:var(--sp-8) 0}
    .td-steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);padding-top:0}
    .td-steps::before{display:none}
    .td-step .n{position:static;transform:none;width:44px;height:44px;margin-bottom:var(--sp-3);font-size:var(--fs-lg);box-shadow:0 10px 20px -10px rgba(82,34,207,.6)}
    .td-tips,.td-feat .td-tips{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
    .td-feat{margin-top:var(--sp-12);padding-top:calc(var(--sp-16) + var(--sp-6))}
    .td-feat::before{width:146px;height:73px;border-radius:0 0 73px 73px}
    .td-feat>img{top:calc(-1 * var(--sp-12));width:110px}
    .td-tip .di{width:44px;height:44px}
    .td-step p,.td-tip p,.td-table,.td-prose,.td-faq .a,.td-sec .sub{font-size:var(--fs-sm)}
    .td-faq summary{font-size:var(--fs-md)}
}