/* АРХПРОДУКТ · общие стили сайта. Все селекторы ограничены #ap и не влияют на прочие блоки Tilda */
#ap{max-width:100%;overflow-x:hidden}
#ap .t-container,#ap .t-col{max-width:100%!important;padding:0!important;margin:0!important}
#ap .page{display:block}

#ap,:root{
  --ink:#1C3026;
  --ink-2:#24392D;
  --ink-deep:#131F17;
  --bronze:#B68A5A;
  --bronze-txt:#7E5930;
  --paper:#F5F2EC;
  --paper-2:#EAE4D6;
  --white:#FCFBF8;
  --graphite:#2B2B2B;
  --muted:#645E53;
  --line:#CDC4AE;
  --line-d:rgba(182,138,90,.4);

  --f-d:'Manrope','Golos Text','Helvetica Neue',Arial,sans-serif;
  --f-b:'Golos Text','Helvetica Neue',Helvetica,Arial,sans-serif;

  --maxw:1440px;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --r:5px;
  --r-s:4px;
}

#ap *{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){#ap{scroll-behavior:smooth}}
#ap,#ap{margin:0;padding:0}
#ap{background:var(--paper);color:var(--graphite);font-family:var(--f-b);font-size:17px;line-height:1.58;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* горизонтальный вылет режем clip, а не hidden: hidden делает элемент скролл-контейнером,
     и внутри блока Tilda липкая шапка перестаёт прилипать — уезжает вверх вместе со страницей.
     hidden оставлен первым как запасной вариант для старых браузеров. */
  overflow-x:hidden;overflow-x:clip}
#ap img{max-width:100%;display:block}
#ap ::selection{background:var(--ink);color:var(--paper)}
#ap .nums{font-variant-numeric:tabular-nums}
#ap .price{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;margin-top:22px}
#ap .price b{font-family:var(--f-d);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem, 1rem + 2.7vw, 3rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
#ap .dark .price b,#ap .deep .price b{color:var(--bronze)}
#ap .price span{font-size:15px;color:var(--muted)}
#ap .dark .price span,#ap .deep .price span{color:rgba(245,242,236,.72)}


/* ─── Типографика ─────────────────────────────── */
#ap h1,#ap h2,#ap h3,#ap h4{font-family:var(--f-d);color:var(--ink);margin:0;font-weight:600;text-wrap:balance;overflow-wrap:break-word}
#ap .d1{font-size:clamp(2.15rem, 1rem + 4.6vw, 4.25rem);line-height:1.08;letter-spacing:-.034em;font-weight:700}
#ap .d2{font-size:clamp(1.65rem, 1rem + 2.7vw, 2.75rem);line-height:1.12;letter-spacing:-.028em;font-weight:700}
#ap .d3{font-size:clamp(1.28rem, 1rem + 1.4vw, 1.88rem);line-height:1.24;letter-spacing:-.022em;font-weight:700}
#ap .d4{font-size:1.18rem;line-height:1.32;letter-spacing:-.012em;font-weight:600}
#ap p{margin:0 0 .85em;max-width:62ch;text-wrap:pretty}
#ap li{text-wrap:pretty}
#ap .lead{font-size:clamp(1.05rem, 1rem + .45vw, 1.26rem);line-height:1.46;letter-spacing:-.004em;max-width:48ch}
#ap .sm{font-size:14.5px;line-height:1.5}
#ap .sm a,#ap .xs a,#ap p a{color:var(--bronze-txt);text-decoration:underline;text-underline-offset:2px}
#ap .dark .sm a,#ap .deep .sm a,#ap .dark p a,#ap .deep p a{color:var(--bronze)}
#ap .xs{font-size:13px;line-height:1.45}
#ap .mut{color:var(--muted)}

/* акцент на ключевом слове: вес, цвет и лёгкий объём — без подчёркивания */
#ap .ac{font-weight:600;color:var(--ink);
  text-shadow:0 1px 0 rgba(252,251,248,.9),0 2px 6px rgba(126,89,48,.14)}
#ap .dark .ac,#ap .deep .ac,#ap .card.fill .ac,#ap .magnet .ac,#ap .case__r .ac{color:var(--paper);
  text-shadow:0 1px 0 rgba(19,31,23,.5),0 2px 8px rgba(182,138,90,.26)}

/* на развороте акцент бронзовый — фирменный цвет и единственное яркое пятно на листе */
#ap .spread .ac{color:var(--bronze);text-shadow:0 1px 0 rgba(19,31,23,.55),0 3px 16px rgba(182,138,90,.3)}

/* бронзовый акцент внутри заголовка: провокационная часть вопроса */
#ap .acb{color:var(--bronze-txt);text-shadow:0 1px 0 rgba(252,251,248,.85)}
#ap .dark .acb,#ap .deep .acb,#ap .card.fill .acb{color:var(--bronze);
  text-shadow:0 1px 0 rgba(19,31,23,.5),0 2px 12px rgba(182,138,90,.28)}
#ap .lbl{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-txt);max-width:none}
#ap .dark .lbl,#ap .deep .lbl{color:var(--bronze)}


/* ─── Раскладка ───────────────────────────────── */
#ap .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* вылет за поле: акценты, шкалы и фотографии идут от края до края,
   текст внутри по-прежнему ограничен длиной строки */
#ap .wrap.wide{max-width:1780px;padding-left:clamp(20px,3.4vw,68px);padding-right:clamp(20px,3.4vw,68px)}

/* на вылете колонки шире — держим заголовки в одинаковом числе строк */
#ap .wrap.wide .g2>.card>.d3{max-width:30ch}
@media(min-width:961px){#ap .wrap.wide .g2>.card>.d3{min-height:3.72em}}
@media(max-width:960px){#ap .wrap.wide .g2>.card>.d3{max-width:none;min-height:0}}

/* фотографии в кейсах на вылете: ограничиваем высоту кадра, иначе страница растёт */
#ap .wrap.wide .slot.w{max-height:clamp(190px,17vw,280px)}
#ap section{position:relative}
#ap .dark{background:var(--ink);color:rgba(245,242,236,.82)}
#ap .deep{background:var(--ink-deep);color:rgba(245,242,236,.82)}
#ap .white{background:var(--white)}
#ap .dark h1,#ap .dark h2,#ap .dark h3,#ap .dark h4,#ap .deep h1,#ap .deep h2,#ap .deep h3,#ap .deep h4{color:var(--paper)}
#ap .dark .mut,#ap .deep .mut{color:rgba(245,242,236,.7)}
#ap .dark .lead,#ap .deep .lead{color:rgba(245,242,236,.87)}
#ap .sheet{padding:clamp(62px,7.6vw,116px) 0}
#ap .sheet.lg{padding:clamp(78px,10vw,156px) 0}
#ap .sheet.sm{padding:clamp(40px,5vw,72px) 0}
#ap .sheet.tight{padding:clamp(46px,5.4vw,78px) 0}
#ap .sheet+.sheet.tight{padding-top:0}



/* ─── Материальность: бумажное зерно и внутренний свет ─── */
/* зерно на светлых листах — встроенный SVG, ничего не загружается */
#ap .sheet:not(.dark):not(.deep)::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E")}
#ap .sheet>.wrap{position:relative;z-index:1}

/* внутренний свет по верхней кромке тёмных секций и тёплое свечение у нижнего края */
#ap .sheet.dark,#ap .sheet.deep{
  box-shadow:inset 0 1px 0 rgba(245,242,236,.14),inset 0 -90px 120px -110px rgba(182,138,90,.55)}


/* пальцевые зоны нажатия на сенсорных экранах */
@media (hover:none),(max-width:820px){
  #ap .tl{min-height:44px;align-items:center}
  #ap .cl a,#ap .cl b{display:inline-flex;align-items:center;min-height:44px}
  #ap .sm a,#ap .xs a,#ap p a{display:inline-block;padding:6px 0}
  #ap footer li{margin-bottom:2px}
  #ap footer a{display:inline-block;padding:7px 0}
  #ap .back{min-height:44px;align-items:center}
  
  /* логотип — главная ссылка на первый экран: палец должен попадать */
#ap .hdr .logo{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:640px){
  #ap .d1{line-height:1.12;letter-spacing:-.018em}
  #ap .sheet .btn{width:100%;justify-content:center}
  #ap .backbar .btn,#ap .hdr .btn{width:auto}
  #ap .pr__p{font-size:22px;color:var(--bronze-txt)}
  #ap .dark .pr__p,#ap .deep .pr__p{color:var(--bronze)}
}



/* ─── Кнопки ──────────────────────────────────── */
#ap .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:var(--r-s);box-sizing:border-box;
  /* прямые значения — фолбэк, если стили Tilda перебили переменные */
  font-family:'Manrope','Golos Text','Helvetica Neue',Arial,sans-serif;
  font-family:var(--f-d);font-weight:500;font-size:14px;line-height:1.28;
  text-decoration:none;text-align:center;text-indent:0;letter-spacing:0;
  -webkit-appearance:none;appearance:none;
  background:#1C3026;background:var(--ink);
  color:#F5F2EC;color:var(--paper);
  border:1px solid #1C3026;border-color:var(--ink);
  transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);cursor:pointer}
#ap .btn *{text-align:center}
#ap .btn:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(19,31,23,.55)}
#ap .btn:active{transform:translateY(0);box-shadow:0 3px 8px -6px rgba(19,31,23,.5)}
#ap .btn.o{background:transparent;color:#1C3026;color:var(--ink);border-color:#1C3026;border-color:var(--ink)}
#ap .btn.o:hover{background:rgba(28,48,38,.06);border-color:var(--ink);box-shadow:0 10px 22px -14px rgba(28,48,38,.4)}
#ap .btn.l{background:#F5F2EC;background:var(--paper);color:#1C3026;color:var(--ink);border-color:#F5F2EC;border-color:var(--paper)}
#ap .btn.l:hover{background:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
#ap .btn.ol{background:transparent;color:#F5F2EC;color:var(--paper);border-color:rgba(245,242,236,.34)}
#ap .btn.ol:hover{background:rgba(245,242,236,.09);border-color:var(--bronze);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
#ap .btn.s{padding:10px 17px;font-size:13px}
@media (hover:none),(max-width:820px){
  #ap .btn{min-height:46px;justify-content:center;text-align:center}
  #ap .btn.s{min-height:44px}
}
#ap .tl{font-family:var(--f-d);font-weight:500;font-size:14px;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--bronze);padding-bottom:3px}
#ap .tl{transition:color .22s var(--ease),border-color .22s var(--ease)}
#ap .tl i{font-style:normal;transition:transform .22s var(--ease)}
#ap .tl:hover{color:var(--bronze-txt);border-bottom-color:var(--bronze-txt)}
#ap .tl:hover i{transform:translateX(5px)}
#ap .dark .tl:hover,#ap .deep .tl:hover,#ap .card.fill .tl:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
#ap .dark .tl,#ap .deep .tl,#ap .card.fill .tl{color:var(--paper)}
#ap :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#ap .dark :focus-visible,#ap .deep :focus-visible,#ap footer :focus-visible,#ap .magnet :focus-visible,#ap .case__r :focus-visible{outline-color:var(--paper)}
#ap .tw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}


/* ─── Индикатор прокрутки ─────────────────────── */
#ap .depth{position:fixed;right:clamp(12px,2vw,26px);top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
#ap .depth i{display:block;width:5px;height:5px;border-radius:50%;background:var(--graphite);opacity:.38;
  box-shadow:0 0 0 1px rgba(245,242,236,.5);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
#ap .depth i.on{opacity:1;transform:scale(1.6);background:var(--bronze);
  box-shadow:0 0 0 1.4px var(--ink),0 0 0 2.6px rgba(245,242,236,.6)}
@media(max-width:1100px){#ap .depth{display:none}}


/* ─── Хедер ───────────────────────────────────── */
#ap .hdr{position:sticky;top:0;z-index:1000;background:rgba(245,242,236,.95);-webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
#ap .hdr>.wrap{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding-top:13px;padding-bottom:13px}
#ap .logo{font-family:var(--f-d);font-weight:600;font-size:16.5px;letter-spacing:.08em;color:var(--ink);text-decoration:none;flex:none;
  transition:color .22s var(--ease)}
#ap .logo:hover{color:var(--bronze-txt)}
#ap .logo em{transition:color .22s var(--ease)}
#ap .logo:hover em{color:var(--ink)}
#ap footer .logo,#ap .logo--f{color:var(--paper);font-size:17px}
#ap footer .logo:hover,#ap .logo--f:hover{color:var(--bronze)}
#ap footer .logo:hover em,#ap .logo--f:hover em{color:var(--paper)}
#ap .logo em{font-style:normal;color:var(--bronze)}
#ap .nav{display:flex;gap:clamp(10px,1.4vw,20px);margin-left:auto;align-items:center}
#ap .nav a:not(.btn){font-family:var(--f-d);font-weight:500;font-size:13px;color:var(--graphite);text-decoration:none;padding:5px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:color .18s}
#ap .nav a:hover{color:var(--ink)}
#ap .nav a.on{color:var(--ink);border-bottom-color:var(--bronze)}
#ap .nav a.on:hover{color:var(--bronze-txt)}
#ap .nav a.btn{color:var(--paper);border-bottom-color:transparent}
#ap .nav a.btn:hover{color:var(--paper)}
#ap .tel{font-family:var(--f-d);font-weight:500;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}
#ap .brg{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
#ap .cta-m{display:none}
#ap .brg span{display:block;width:21px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .25s var(--ease),opacity .2s}
#ap .brg.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#ap .brg.on span:nth-child(2){opacity:0}
#ap .brg.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1240px){
  #ap .brg{display:block;order:3;margin-left:12px}
  #ap .hdr .cta-m{display:inline-flex;margin-left:auto;order:2}
  #ap .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;
    padding:10px var(--pad) 26px;border-bottom:1px solid var(--line);
    transform:translateY(-10px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;
    max-height:calc(100dvh - 100%);overflow-y:auto}
  #ap .nav.open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  #ap .nav a:not(.btn){font-size:16px;padding:13px 0;border-bottom:1px solid var(--line)}
  #ap .nav .btn{margin-top:16px;justify-content:center}
  #ap .tel{display:none}#ap .nav .tel{display:block;font-size:15px;padding:13px 0}
}
@media(max-width:400px){
  #ap .hdr>.wrap{gap:8px}
  #ap .logo{font-size:15px;letter-spacing:.05em}
  #ap .hdr .cta-m{padding:9px 12px;font-size:12px}
  #ap .brg{padding:7px;margin-left:4px}
  #ap .brg span{width:19px}
}


/* ─── Кнопка «назад» ──────────────────────────── */
#ap .back{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-d);font-weight:500;font-size:13px;
  color:var(--muted);text-decoration:none;margin-bottom:24px;transition:color .2s var(--ease)}
#ap .back:hover{color:var(--ink)}
#ap .back i{font-style:normal;transition:transform .2s var(--ease)}
#ap .back:hover i{transform:translateX(-4px)}
#ap .backbar{background:var(--paper-2);border-top:1px solid var(--line);padding:clamp(16px,2vw,22px) 0}
#ap .backbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#ap .backbar .back{margin:0}


/* ─── Путь покупателя: шкала утечки ценности ───── */
#ap .leak{margin-top:clamp(30px,3.6vw,46px)}

/* полоса выцветает слева направо: ценность не доходит до брони */
#ap .leak__bar{position:relative;height:6px;border-radius:3px;margin-bottom:clamp(46px,5vw,60px);
  background:linear-gradient(90deg,var(--bronze-txt) 0%,var(--bronze) 20%,rgba(182,138,90,.5) 48%,rgba(182,138,90,.26) 74%,rgba(182,138,90,.1) 100%)}

#ap .leak__g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
#ap .leak__i{position:relative;padding-top:2px;min-width:0}
#ap .leak__i i{position:absolute;top:calc(-1 * clamp(46px,5vw,60px) + 10px);left:0;font-style:normal;
  font-family:var(--f-d);font-weight:700;font-size:11.5px;letter-spacing:.13em;color:var(--bronze-txt)}
#ap .leak__i b{display:block;font-family:var(--f-d);font-weight:600;
  font-size:clamp(13px,.45rem + .58vw,15.5px);color:var(--ink);line-height:1.2;letter-spacing:-.012em;
  margin-bottom:12px;white-space:nowrap}
#ap .leak__i span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);font-style:italic;
  padding-top:11px;border-top:1px solid var(--line)}
#ap .dark .leak__i b,#ap .deep .leak__i b{color:var(--paper)}
#ap .dark .leak__i i,#ap .deep .leak__i i{color:var(--bronze);background:var(--ink)}
#ap .dark .leak__i span,#ap .deep .leak__i span{color:rgba(245,242,236,.66);border-top-color:var(--line-d)}
@media(max-width:760px){
  #ap .leak__bar{display:none}
  #ap .leak__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #ap .leak__i i{position:static;display:block;background:none;padding:0;margin-bottom:5px}
  #ap .leak__i b{white-space:normal}
}
@media(max-width:420px){#ap .leak__g{grid-template-columns:minmax(0,1fr)}}


/* ─── Кейс с результатом ──────────────────────── */
#ap .case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,52px);
  padding:clamp(26px,3.2vw,42px) 0;border-bottom:1px solid var(--line);align-items:start}
#ap .dark .case,#ap .deep .case{border-bottom-color:var(--line-d)}
#ap .case:first-of-type{border-top:1px solid var(--line)}
#ap .dark .case:first-of-type,#ap .deep .case:first-of-type{border-top-color:var(--line-d)}
#ap .case__r{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:22px 24px;margin-top:16px}
#ap .dark .case__r,#ap .deep .case__r{background:rgba(182,138,90,.14);border:1px solid var(--line-d)}
#ap .case__r .lbl{color:var(--bronze);display:block;margin-bottom:8px}
#ap .dark .case__r .lbl,#ap .deep .case__r .lbl{color:var(--paper)}
#ap .case__n{font-family:var(--f-d);font-weight:600;font-size:clamp(1.6rem, 1rem + 1.9vw, 2.4rem);
  line-height:1;letter-spacing:-.03em;color:var(--paper);margin-bottom:8px}
#ap .case__r p{margin:0;font-size:14px;color:rgba(245,242,236,.78);max-width:40ch}
@media(max-width:840px){#ap .case{grid-template-columns:minmax(0,1fr)}}


/* ─── Продукты: ценность / срок / цена ────────── */
#ap .prod{border-top:1px solid var(--line)}
#ap .dark .prod,#ap .deep .prod{border-top-color:var(--line-d)}
#ap .prod__h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 132px 156px;
  gap:clamp(14px,2.2vw,32px);padding-bottom:11px}
#ap .prod__h span{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-txt)}
#ap .prod__h span:last-child{text-align:right}
#ap .dark .prod__h span,#ap .deep .prod__h span{color:var(--bronze)}
#ap .prod__i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 132px 156px;
  gap:clamp(14px,2.2vw,32px);padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line);align-items:start;
  transition:background .2s var(--ease)}
#ap .dark .prod__i,#ap .deep .prod__i{border-bottom-color:var(--line-d)}
#ap .prod__i:hover{background:rgba(182,138,90,.05);border-radius:var(--r-s)}
#ap .prod__t b{display:block;font-family:var(--f-d);font-weight:600;font-size:16px;color:var(--ink);letter-spacing:-.01em}
#ap .dark .prod__t b,#ap .deep .prod__t b{color:var(--paper)}
#ap .prod__t span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
#ap .dark .prod__t span,#ap .deep .prod__t span{color:rgba(245,242,236,.66)}
#ap .prod__v{font-size:14.5px;line-height:1.5}
#ap .dark .prod__v,#ap .deep .prod__v{color:rgba(245,242,236,.8)}
#ap .prod__m{font-family:var(--f-d);font-weight:500;font-size:13.5px;color:var(--muted);padding-top:2px}
#ap .dark .prod__m,#ap .deep .prod__m{color:rgba(245,242,236,.72)}
#ap .prod__p{font-family:var(--f-d);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-.015em;text-align:right;white-space:nowrap}
#ap .dark .prod__p,#ap .deep .prod__p{color:var(--bronze)}
@media(max-width:1000px){
  #ap .prod__h{display:none}
  #ap .prod__i{grid-template-columns:minmax(0,1fr);gap:9px;padding:22px 0}
  #ap .prod__p{text-align:left}
  #ap .prod__m::before{content:'Срок: ';color:var(--bronze-txt)}
  #ap .dark .prod__m::before,#ap .deep .prod__m::before{color:var(--bronze)}
}


/* ─── Продукт как раскрывающийся список ───────── */
#ap .pl{border-top:1px solid var(--line)}

/* подзаголовок группы прайса: человек сразу находит свою стадию проекта */
#ap .pl__g{font-family:var(--f-d);font-weight:600;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze-txt);display:flex;align-items:center;gap:12px;
  margin:clamp(26px,3vw,36px) 0 0;padding-bottom:10px;max-width:none}
#ap .pl__g::after{content:'';flex:1;height:1px;background:var(--line);opacity:.8}
#ap .pl__g:first-child{margin-top:clamp(14px,1.6vw,20px)}
#ap .dark .pl__g,#ap .deep .pl__g{color:var(--bronze)}
#ap .dark .pl__g::after,#ap .deep .pl__g::after{background:var(--line-d)}
#ap .dark .pl,#ap .deep .pl{border-top-color:var(--line-d)}
#ap .pr{border-bottom:1px solid var(--line)}
#ap .dark .pr,#ap .deep .pr{border-bottom-color:var(--line-d)}
#ap .pr>summary{display:grid;grid-template-columns:minmax(0,1fr) 150px 168px 16px;
  gap:clamp(12px,2vw,28px);align-items:baseline;padding:clamp(17px,2vw,23px) 0;
  cursor:pointer;list-style:none;transition:background .2s var(--ease)}
#ap .pr>summary:hover{background:rgba(182,138,90,.05);border-radius:var(--r-s)}
#ap .pr>summary::-webkit-details-marker{display:none}
#ap .pr>summary::after{content:'';grid-column:4;align-self:center;width:11px;height:11px;flex:none;
  transition:transform .28s var(--ease);
  background:linear-gradient(var(--bronze-txt),var(--bronze-txt)) center/11px 1px no-repeat,linear-gradient(var(--bronze-txt),var(--bronze-txt)) center/1px 11px no-repeat}
#ap .dark .pr>summary::after,#ap .deep .pr>summary::after{background:linear-gradient(var(--bronze),var(--bronze)) center/11px 1px no-repeat,linear-gradient(var(--bronze),var(--bronze)) center/1px 11px no-repeat}
#ap .pr[open]>summary::after{transform:rotate(135deg)}
#ap .pr__t{font-family:var(--f-d);font-weight:600;font-size:16.5px;color:var(--ink);letter-spacing:-.012em;line-height:1.3}
#ap .dark .pr__t,#ap .deep .pr__t{color:var(--paper)}
#ap .pr__m{font-family:var(--f-d);font-weight:500;font-size:13.5px;color:var(--muted);white-space:nowrap}
#ap .dark .pr__m,#ap .deep .pr__m{color:rgba(245,242,236,.72)}
#ap .pr__p{font-family:var(--f-d);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.015em;text-align:right;white-space:nowrap}
#ap .dark .pr__p,#ap .deep .pr__p{color:var(--bronze)}

/* аккордеон в два поля: название + статус */
#ap .pr.pr2>summary{grid-template-columns:minmax(0,1fr) 170px 16px}
#ap .pr.pr2>summary::after{grid-column:3}
#ap .pr.pr2 .pr__p{font-family:var(--f-d);font-weight:500;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bronze-txt)}
#ap .dark .pr.pr2 .pr__p,#ap .deep .pr.pr2 .pr__p{color:var(--bronze)}
@media(max-width:900px){
  #ap .pr.pr2>summary{grid-template-columns:minmax(0,1fr) 16px}
  #ap .pr.pr2>summary::after{grid-column:2}
  #ap .pr.pr2 .pr__p{grid-column:1;grid-row:2;text-align:left}
}
#ap .pr__b{padding:0 0 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.6vw,38px);max-width:none}
#ap .pr__b h4{font-family:var(--f-d);font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze-txt);margin:0 0 10px}
#ap .dark .pr__b h4,#ap .deep .pr__b h4{color:var(--bronze)}
#ap .pr__b ul{margin:0;padding-left:17px;font-size:14.5px;line-height:1.7;color:var(--muted)}
#ap .dark .pr__b ul,#ap .deep .pr__b ul{color:rgba(245,242,236,.8)}
#ap .pr__b p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
#ap .dark .pr__b p,#ap .deep .pr__b p{color:rgba(245,242,236,.8)}
@media(max-width:900px){
  #ap .pr>summary{grid-template-columns:minmax(0,1fr) 16px;gap:6px 14px;row-gap:7px}
  #ap .pr>summary::after{grid-column:2;grid-row:1;align-self:start;margin-top:5px}
  #ap .pr__t{grid-column:1;grid-row:1}
  #ap .pr__m{grid-column:1;grid-row:2}
  #ap .pr__p{grid-column:1;grid-row:3;text-align:left}
  #ap .pr__b{grid-template-columns:minmax(0,1fr);gap:20px}
}


/* ─── Точки контакта покупателя (CJM) ─────────── */
#ap .cjm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:clamp(26px,3.2vw,40px)}
#ap .cjm div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:15px 13px;display:flex;flex-direction:column;gap:7px;position:relative}
#ap .dark .cjm div,#ap .deep .cjm div{background:rgba(245,242,236,.05);border-color:var(--line-d)}
#ap .cjm b{font-family:var(--f-d);font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.25;letter-spacing:-.008em}
#ap .dark .cjm b,#ap .deep .cjm b{color:var(--paper)}
#ap .cjm span{font-size:12px;line-height:1.4;color:var(--muted);margin-top:auto}
#ap .dark .cjm span,#ap .deep .cjm span{color:rgba(245,242,236,.68)}
#ap .cjm i{font-style:normal;font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.13em;color:var(--bronze-txt)}
#ap .dark .cjm i,#ap .deep .cjm i{color:var(--bronze)}
@media(max-width:1150px){#ap .cjm{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){#ap .cjm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){#ap .cjm{grid-template-columns:minmax(0,1fr)}}



/* ─── Цифры ───────────────────────────────────── */
/* число, размерная линия и подпись — по центру своей колонки:
   линия задаёт ось, всё остальное выравнивается по ней, а не по левому краю */
#ap .figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,38px);text-align:center}
@media(max-width:1140px){#ap .figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){#ap .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}}
#ap .fig__n{font-family:var(--f-d);font-weight:600;font-size:clamp(1.9rem, 1rem + 2.5vw, 2.9rem);line-height:1.06;
  letter-spacing:-.032em;color:var(--bronze-txt);font-variant-numeric:tabular-nums;text-wrap:balance;hyphens:none}
@media(max-width:400px){#ap .fig__n{font-size:1.5rem;letter-spacing:-.022em}}
#ap .dark .fig__n,#ap .deep .fig__n{color:var(--bronze)}

/* размерная линия по ГОСТ: число над линией, выносные линии по краям,
   засечки под 45° — строго через перекрестье размерной и выносной линии */
#ap .fig__d{display:block;position:relative;height:10px;margin:9px 0 0;text-decoration:none;
  background:
    linear-gradient(var(--bronze),var(--bronze)) left center/100% 1px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) left center/1px 10px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) right center/1px 10px no-repeat;
  clip-path:inset(0 100% 0 -8px)}

/* засечка: короткий штрих под 45°, центр — точка перекрестья */
#ap .fig__d::before,#ap .fig__d::after{content:'';position:absolute;top:50%;width:7px;height:1px;
  background:var(--bronze);transform:translate(-50%,-50%) rotate(-45deg)}
#ap .fig__d::before{left:0}
#ap .fig__d::after{left:100%}
#ap .fig__l{font-size:14px;line-height:1.45;margin:11px auto 0;max-width:26ch;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    #ap .fig__d{animation:dimLine linear both;animation-timeline:view();animation-range:entry 6% entry 40%}
    
    /* открываем слева направо через clip-path: геометрия засечек не искажается */
@keyframes dimLine{from{clip-path:inset(0 100% 0 -8px)}to{clip-path:inset(0 -8px 0 -8px)}}
  }
}
@supports not (animation-timeline:view()){#ap .fig__d{clip-path:inset(0 -8px 0 -8px)}}
#ap .fig__s{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
#ap .dark .fig__s,#ap .deep .fig__s{border-top-color:var(--line-d);color:rgba(245,242,236,.66)}


/* ─── Разворот-акцент ─────────────────────────── */
#ap .spread{padding:clamp(96px,13vw,210px) 0}
#ap .spread p{font-family:var(--f-d);font-weight:700;
  font-size:clamp(1.9rem, 1rem + 3.4vw, 3.4rem);line-height:1.14;letter-spacing:-.026em;
  /* второстепенное — приглушённый белый, ключевое — бронза: цвет сразу говорит, что выделено */
  color:rgba(245,242,236,.52);max-width:19ch;margin:0;text-wrap:balance}
#ap .spread p em{font-style:normal;color:var(--bronze)}
#ap .spread .sig{margin-top:clamp(22px,2.6vw,34px);font-family:var(--f-d);font-weight:500;font-size:11px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--bronze);display:flex;align-items:center;gap:11px}
#ap .spread .sig::before{content:'';width:44px;height:1px;background:var(--bronze)}


/* ─── Проявление разворота: строки выезжают из-под маски ─── */
/* clip-path вместо overflow: overflow сделал бы маску скролл-контейнером,
   и прогресс view() считался бы внутри неё, а не по странице */
#ap .spread__l span{display:inline-block;vertical-align:bottom;
  clip-path:inset(-0.12em -0.06em 0 -0.06em)}
#ap .spread__l span i{display:inline-block;font-style:normal}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    #ap .spread__l span i{animation:rise linear both;animation-timeline:view()}
    #ap .spread__l span:nth-child(1) i{animation-range:entry 2% entry 30%}
    #ap .spread__l span:nth-child(2) i{animation-range:entry 12% entry 42%}
    #ap .spread__l span:nth-child(3) i{animation-range:entry 24% entry 54%}
    #ap .spread__l span:nth-child(4) i{animation-range:entry 36% entry 66%}
    @keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
  }
}


/* ─── Финальный блок контактов ─────────────────── */
#ap .fin__top{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,64px);align-items:start;
  padding-bottom:clamp(30px,3.6vw,46px);margin-bottom:clamp(30px,3.6vw,46px);
  border-bottom:1px solid var(--line-d)}
#ap .fin__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,28px)}
@media(max-width:900px){#ap .fin__top{grid-template-columns:minmax(0,1fr)}}

#ap .fin{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.5fr) minmax(220px,.78fr);
  gap:0;background:rgba(245,242,236,.05);border:1px solid var(--line-d);
  border-top:2px solid var(--bronze);border-radius:var(--r);overflow:hidden}

/* портрет заполняет свою зону целиком: высота блока задаётся им, зоны равны */
#ap .fin .fin__ph.slot{border:0;border-radius:0;aspect-ratio:auto;min-height:clamp(300px,32vw,470px);
  height:100%;align-self:stretch;background:rgba(245,242,236,.05);padding:clamp(14px,1.6vw,18px)}
#ap .fin .fin__ph.slot::before{inset:10px;border-color:rgba(182,138,90,.5)}
#ap .fin__who,#ap .fin__c{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px)}
#ap .fin__who{border-left:1px solid var(--line-d)}
#ap .fin__c{border-left:1px solid var(--line-d);background:rgba(19,31,23,.35)}
#ap .fin__who .lbl,#ap .fin__c .lbl{margin-bottom:12px}
#ap .fin__who h3{color:var(--paper)}
#ap .fin__who p.sm{color:rgba(245,242,236,.82);margin-bottom:12px;max-width:52ch}
#ap .fin__role{margin:8px 0 18px !important;color:var(--bronze) !important;
  padding-bottom:18px;border-bottom:1px solid var(--line-d)}
#ap .fin__note{margin:auto 0 0 !important;padding-top:18px;border-top:1px solid var(--line-d);
  color:var(--paper) !important}
#ap .fin__cl{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)}
#ap .fin__cl div{display:flex;flex-direction:column;gap:3px}
#ap .fin__cl span{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(245,242,236,.6)}
#ap .fin__cl a{font-family:var(--f-d);font-weight:500;font-size:15px;color:var(--paper);
  text-decoration:none;word-break:break-word;transition:color .22s var(--ease)}
#ap .fin__cl a:hover{color:var(--bronze)}
#ap .fin__geo{margin:auto 0 0;padding-top:clamp(20px,2.4vw,28px);
  color:rgba(245,242,236,.62);max-width:30ch}
@media (hover:none),(max-width:820px){#ap .fin__cl a{display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:1100px){
  #ap .fin{grid-template-columns:minmax(200px,.58fr) minmax(0,1.42fr)}
  #ap .fin__c{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line-d)}
  #ap .fin__cl{flex-direction:row;flex-wrap:wrap;gap:clamp(18px,3vw,40px)}
  #ap .fin__geo{margin-top:clamp(20px,2.4vw,26px);max-width:56ch}
}
@media(max-width:1000px){
  #ap .fin{grid-template-columns:minmax(0,1fr)}
  
  /* одна колонка: портрет держит вертикальную пропорцию и стоит по центру */
#ap .fin .fin__ph.slot{aspect-ratio:3/4;min-height:0;height:auto;max-height:none;
    width:min(100%,330px);margin:clamp(18px,3vw,26px) auto 0}
  #ap .fin__who{border-left:0;border-top:1px solid var(--line-d)}
  #ap .fin__cl{flex-direction:column;gap:16px}
}


/* ─── Кто ведёт проект: портрет + подпись ─────── */
#ap .who{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start;margin-bottom:18px}
@media(max-width:520px){
  #ap .who{grid-template-columns:minmax(0,1fr);gap:16px}
  #ap .who .slot{width:100%;max-width:220px}
}


/* ─── Ключевые направления: первый экран, главный якорь ─── */
#ap .dirs{position:relative;margin-top:clamp(38px,4.6vw,60px);
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--white) 100%);
  border:1px solid var(--line);border-radius:calc(var(--r) + 3px);
  padding:clamp(26px,3.4vw,46px) clamp(20px,2.8vw,40px) clamp(24px,3vw,38px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 44px -30px rgba(28,48,38,.34)}
#ap .dirs::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:calc(var(--r) + 3px) calc(var(--r) + 3px) 0 0;
  background:linear-gradient(90deg,var(--bronze-txt),var(--bronze) 55%,rgba(182,138,90,.2))}
#ap .dirs__h{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  padding-bottom:clamp(18px,2.2vw,26px);margin-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line)}
#ap .dirs__h h2{font-size:clamp(1.5rem, 1rem + 2vw, 2.35rem);line-height:1.12;letter-spacing:-.022em}
#ap .dirs__h .lbl{flex:none;display:flex;align-items:center;gap:10px}
#ap .dirs__h .lbl::after{content:'';width:clamp(18px,2vw,34px);height:1px;background:currentColor;opacity:.55}
#ap .dirs__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
@media(max-width:1140px){#ap .dirs__g{grid-template-columns:minmax(0,1fr)}}
#ap .dir{position:relative;overflow:hidden;min-width:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,2.2vw,26px);
  display:grid;grid-template-rows:auto auto 1fr auto auto;align-content:start;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
#ap .dir::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--bronze);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  #ap .dir::before{transition:transform .6s var(--ease)}
  @supports (animation-timeline:view()){
    #ap .dir::before{animation:dirLine linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
    @keyframes dirLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
@supports not (animation-timeline:view()){#ap .dir::before{transform:scaleX(1)}}
#ap .dir:hover{transform:translateY(-3px);border-color:var(--line-d);
  box-shadow:0 16px 32px -22px rgba(28,48,38,.42)}
#ap .dir__n{position:absolute;right:clamp(14px,1.6vw,20px);top:clamp(10px,1.2vw,14px);
  font-family:var(--f-d);font-weight:600;font-size:clamp(2.6rem,1rem + 4vw,3.6rem);line-height:1;
  letter-spacing:-.04em;color:var(--bronze);opacity:.16;pointer-events:none;user-select:none}

/* кикер карточки: правило .dir p перебивало .lbl и раздувало метку до 14.5px */
#ap .dir p.lbl{font-size:11px;line-height:1.3;margin:0 0 12px;position:relative}
#ap .dir h3{font-family:var(--f-d);font-weight:600;font-size:1.18rem;line-height:1.3;
  letter-spacing:-.014em;color:var(--ink);position:relative;max-width:23ch}
#ap .dir p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted);position:relative}
@media(min-width:1141px){#ap .dir h3{min-height:2.6em}}
#ap .dir__p{margin:clamp(14px,1.8vw,18px) 0 0;position:relative;align-self:end;
  font-family:var(--f-d);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bronze-txt);max-width:none;white-space:nowrap}
@media(max-width:1240px) and (min-width:1141px){#ap .dir__p{letter-spacing:.04em;font-size:10.5px}}

/* в одну колонку запрет переноса не нужен и ломает узкие экраны */
@media(max-width:1140px){#ap .dir__p{white-space:normal}}
#ap .dir__l{margin-top:0;padding-top:clamp(14px,1.8vw,20px);justify-self:start;position:relative;font-size:13px}
#ap .dir__n{z-index:0}


/* ─── Боль: что теряется на показе ─────────────── */
#ap .pain{display:flex;flex-direction:column;gap:10px;margin-top:24px}
#ap .pain__i{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.8vw,22px);align-items:start;
  padding:clamp(15px,1.8vw,20px) clamp(16px,1.8vw,22px) clamp(15px,1.8vw,20px) clamp(18px,2vw,24px);
  background:rgba(245,242,236,.05);border:1px solid var(--line-d);border-radius:var(--r);
  overflow:hidden;transition:background .3s var(--ease),border-color .3s var(--ease)}
#ap .pain__i::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bronze);
  transform:scaleY(0);transform-origin:top}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    #ap .pain__i::before{animation:painLine linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
    @keyframes painLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}
@supports not (animation-timeline:view()){#ap .pain__i::before{transform:scaleY(1)}}
#ap .pain__i:hover{background:rgba(182,138,90,.1);border-color:var(--bronze)}
#ap .pain__n{font-family:var(--f-d);font-weight:600;font-size:12px;letter-spacing:.13em;
  color:var(--bronze);padding-top:3px;font-variant-numeric:tabular-nums}
#ap .pain__t{font-family:var(--f-d);font-weight:600;font-size:15.5px;line-height:1.34;
  letter-spacing:-.008em;color:var(--paper)}
#ap .pain__q{margin:7px 0 0;font-size:14.5px;line-height:1.5;color:var(--bronze);max-width:44ch}
@media(max-width:520px){
  #ap .pain__i{grid-template-columns:minmax(0,1fr);gap:7px}
  #ap .pain__n{padding-top:0}
}


/* ─── Три карточки в ряд: строки выровнены между собой ─── */
@supports (grid-template-rows:subgrid){
  @media(min-width:1141px){
    #ap .g3.sync{grid-template-rows:auto auto auto 1fr auto auto}
    #ap .g3.sync>.card{display:grid;grid-template-rows:subgrid;grid-row:span 6;height:auto}
    
    /* грид-элементы не сжимаются ниже min-content, если не сбросить min-width */
#ap .g3.sync>.card{grid-template-columns:minmax(0,1fr)}
    #ap .g3.sync>.card>*{min-width:0}
    #ap .g3.sync>.card>h3,#ap .g3.sync>.card>.d3{min-height:0}
    #ap .g3.sync>.card>.slot{margin:0;align-self:end}
    
    /* одинаковый верхний отступ: иначе тёмная карточка уводит первую строку вниз */
#ap .g3.sync>.card.fill,#ap .g3.sync>.card.w{padding-top:clamp(19px,2.2vw,26px);padding-bottom:clamp(20px,2.4vw,28px)}
  }
}



/* счётчик аргументов длиннее обычного статуса — своя колонка */
#ap .los>summary{grid-template-columns:minmax(0,1fr) 190px 16px}
@media(max-width:900px){#ap .los>summary{grid-template-columns:minmax(0,1fr) 16px}}


/* ─── Что теряется по дороге ─── */
/* фраза не меняется от стадии к стадии — гаснут отдельные её части.
   базово погашенное видно и без анимации: блок читается в закрытом
   аккордеоне, при отключённых анимациях и в reduced-motion */
#ap .los__b{display:block;padding-bottom:clamp(20px,2.4vw,28px)}
#ap .los__g{list-style:none;margin:0;padding:0}
#ap .los__i{display:grid;grid-template-columns:clamp(116px,9vw,144px) minmax(0,1fr);
  gap:clamp(12px,1.8vw,24px);align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--line-d)}
#ap .los__i:last-child{border-bottom:0}
#ap .los__s{font-family:var(--f-d);font-weight:700;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bronze);padding-top:3px;line-height:1.2;hyphens:none}
#ap .pr__b p.los__p{margin:0;font-size:14.5px;line-height:1.5;color:var(--paper);max-width:84ch}
#ap .los__p i{font-style:normal;transition:opacity .4s var(--ease)}
#ap .los__p i.g{opacity:.16}

/* что в итоге слышит покупатель */
#ap .pr__b p.los__h{display:flex;align-items:baseline;gap:clamp(12px,1.8vw,20px);flex-wrap:wrap;
  margin:clamp(16px,2vw,22px) 0 0;font-family:var(--f-d);font-weight:700;
  font-size:clamp(1.15rem,.7rem + 1.1vw,1.6rem);line-height:1.18;letter-spacing:-.022em;
  color:var(--bronze);max-width:none}
#ap .los__h span{flex:none;font-family:var(--f-d);font-weight:700;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(245,242,236,.5);width:clamp(116px,9vw,144px)}

/* эталон: отдельная карточка, а не абзац в потоке */
#ap .los__v{margin:clamp(20px,2.6vw,30px) 0 0;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  background:rgba(182,138,90,.1);border:1px solid var(--line-d);border-left:3px solid var(--bronze);
  border-radius:var(--r)}
#ap .pr__b p.los__vl{margin:0 0 10px;font-family:var(--f-d);font-weight:700;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bronze);max-width:none}
#ap .pr__b p.los__vt{margin:0;font-size:14.5px;line-height:1.55;color:var(--paper);max-width:76ch}

/* акцент в выводе: на тёмном листе белый по белому не читается — ключевое даём бронзой */
#ap .los__vt .ac{color:var(--bronze);font-weight:600;
  text-shadow:0 1px 0 rgba(19,31,23,.55),0 2px 10px rgba(182,138,90,.26)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    #ap .los[open] .los__p i.g{animation:losFade linear both;animation-timeline:view()}
    #ap .los[open] .los__i:nth-child(2) .los__p i.g{animation-range:entry 14% entry 40%}
    #ap .los[open] .los__i:nth-child(3) .los__p i.g{animation-range:entry 22% entry 50%}
    #ap .los[open] .los__i:nth-child(4) .los__p i.g{animation-range:entry 30% entry 60%}
    #ap .los[open] .los__i:nth-child(5) .los__p i.g{animation-range:entry 38% entry 70%}
    @keyframes losFade{from{opacity:1}to{opacity:.16}}
  }
}
@media(max-width:720px){
  #ap .los__i{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
  #ap .los__s{padding-top:0}
  #ap .los__h{gap:6px}
  #ap .los__h span{width:auto}
}


/* ─── Прочее ──────────────────────────────────── */
#ap .callout{border-left:2px solid var(--bronze-txt);padding:4px 0 4px 22px;margin:clamp(22px,2.8vw,34px) 0;max-width:56ch}
#ap .callout p{font-family:var(--f-d);font-weight:500;font-size:clamp(1.02rem, 1rem + .55vw, 1.28rem);line-height:1.37;
  letter-spacing:-.012em;color:var(--ink);margin:0}
#ap .dark .callout p,#ap .deep .callout p{color:var(--paper)}
#ap .dark .callout,#ap .deep .callout{border-left-color:var(--bronze)}
#ap .box{background:var(--paper-2);border-left:2px solid var(--bronze);border-radius:var(--r);padding:19px 23px;font-size:14.5px;line-height:1.52;margin:clamp(20px,2.4vw,30px) 0}
#ap .box p:last-child{margin-bottom:0}
#ap .dark .box,#ap .deep .box{background:rgba(245,242,236,.06)}
#ap .src{font-size:12px;color:var(--muted);margin-top:12px}
#ap .dark .src,#ap .deep .src{color:rgba(245,242,236,.64)}

#ap .tw{position:relative;border-radius:var(--r);min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(24px,2.8vw,38px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
@media(min-width:1000px){#ap .tw{-webkit-mask-image:none;mask-image:none}}
#ap table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
#ap th{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze-txt);text-align:left;padding:0 15px 11px 0;border-bottom:1px solid var(--bronze);vertical-align:bottom}
#ap .dark th,#ap .deep th{color:var(--bronze)}
#ap td{padding:13px 15px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
#ap .dark td,#ap .deep td{border-bottom-color:var(--line-d)}
#ap td b{font-family:var(--f-d);font-weight:600;color:var(--ink)}
#ap .dark td b,#ap .deep td b{color:var(--paper)}
#ap td.a{font-family:var(--f-d);font-weight:600;color:var(--ink);white-space:nowrap}
#ap .dark td.a,#ap .deep td.a{color:var(--bronze)}


/* ─── Настоящая фотография в рамке-плейсхолдере ───────────────────
   Чтобы поставить фото, добавьте первым ребёнком <img src="…" alt="…">.
   Пунктирная рамка и подложка снимаются сами, подпись остаётся читаемой. */
#ap .slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;border-radius:inherit;z-index:0}
#ap .slot:has(> img),#ap .slot.ph{background:var(--ink-deep);border-color:var(--line-d)}
#ap .slot:has(> img)::before,#ap .slot.ph::before{display:none}
#ap .slot:has(> img)::after,#ap .slot.ph::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(19,31,23,0) 42%,rgba(19,31,23,.78) 100%);
  border-radius:inherit;pointer-events:none}
#ap .slot:has(> img) b,#ap .slot.ph b{position:relative;z-index:2;color:var(--paper)}
#ap .slot:has(> img) i,#ap .slot.ph i{position:relative;z-index:2;color:rgba(245,242,236,.82)}
#ap .slot:has(> img) .mk,#ap .slot:has(> img) .tag,#ap .slot.ph .mk,#ap .slot.ph .tag{z-index:3}


/* ─── Таблицы на телефоне: строка разворачивается в карточку ─── */
@media(max-width:760px){
  #ap .tw.cards{overflow:visible;-webkit-mask-image:none;mask-image:none;
    -webkit-overflow-scrolling:auto;border-radius:0}
  #ap .tw.cards table{display:block;min-width:0;width:100%}
  
  /* Строка заголовков убирается: в режиме карточек таблица уже не таблица
     (display:block снимает табличные роли), а подпись столбца стоит над
     каждой ячейкой — она и служит заголовком, в том числе для скринридера. */
#ap .tw.cards thead{display:none}
  #ap .tw.cards tbody{display:block}
  #ap .tw.cards tr{display:block;border:1px solid var(--line);border-radius:var(--r);
    background:var(--white);padding:15px 16px 14px;margin-bottom:11px}
  #ap .tw.cards tr:last-child{margin-bottom:0}
  #ap .tw.cards td{display:block;width:auto;padding:0;border:0;font-size:14px;line-height:1.5}
  #ap .tw.cards td + td{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
  #ap .tw.cards td::before{content:attr(data-l);display:block;
    font-family:var(--f-d);font-weight:500;font-size:10px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--bronze-txt);margin-bottom:5px}
  #ap .tw.cards td:empty{display:none}
  #ap .tw.cards td.a{white-space:normal;font-size:16px}
  #ap .dark .tw.cards tr,#ap .deep .tw.cards tr{background:rgba(245,242,236,.05);border-color:var(--line-d)}
  #ap .dark .tw.cards td + td,#ap .deep .tw.cards td + td{border-top-color:var(--line-d)}
  #ap .dark .tw.cards td::before,#ap .deep .tw.cards td::before{color:var(--bronze)}
  
  /* первая ячейка строки — заголовок карточки */
#ap .tw.cards td:first-child{font-family:var(--f-d);font-weight:600;font-size:15.5px;color:var(--ink)}
  #ap .dark .tw.cards td:first-child,#ap .deep .tw.cards td:first-child{color:var(--paper)}
  #ap .tw.cards td:first-child b{font-weight:600}
}

#ap .rows{border-top:1px solid var(--line)}
#ap .dark .rows,#ap .deep .rows{border-top-color:var(--line-d)}
#ap .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(13px,2.2vw,30px);padding:clamp(15px,1.9vw,22px) 0;
  border-bottom:1px solid var(--line);align-items:baseline}
#ap .dark .row,#ap .deep .row{border-bottom-color:var(--line-d)}
#ap .row__n{font-family:var(--f-d);font-weight:600;font-size:11.5px;letter-spacing:.11em;color:var(--bronze-txt);min-width:24px;padding-top:4px}
#ap .dark .row__n,#ap .deep .row__n{color:var(--bronze)}
#ap .row3{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr)}
@media(max-width:820px){#ap .row3{grid-template-columns:auto minmax(0,1fr)}#ap .row3>:last-child{grid-column:2}}

#ap .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
#ap .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
#ap .sp{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(28px,4.6vw,74px);align-items:start}
#ap .sp-r{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
@media(max-width:1140px){#ap .g3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:960px){#ap .sp,#ap .sp-r{grid-template-columns:minmax(0,1fr)}}
@media(max-width:680px){#ap .g2{grid-template-columns:minmax(0,1fr)}}

#ap .card{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;padding:clamp(19px,2.2vw,26px) 0 clamp(20px,2.4vw,28px);display:flex;flex-direction:column;height:100%}
#ap .card.w{background:var(--paper-2);border-top-color:var(--bronze-txt);border-radius:var(--r);padding-left:clamp(18px,2vw,24px);padding-right:clamp(18px,2vw,24px)}
#ap .dark .card,#ap .deep .card{background:transparent;border-top-color:var(--bronze)}
#ap .dark .card.w,#ap .deep .card.w{background:rgba(245,242,236,.07);border-top-color:var(--bronze)}
#ap .card h3{margin-bottom:9px}
#ap .g3>.card>h3,#ap .g3>.card>.d3{min-height:2.5em}
@media(max-width:1140px){#ap .g3>.card>h3,#ap .g3>.card>.d3{min-height:0}}
#ap .card.fill{background:var(--ink);color:rgba(245,242,236,.82);border-top-color:var(--bronze);border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
#ap .card.fill h1,#ap .card.fill h2,#ap .card.fill h3,#ap .card.fill h4{color:var(--paper)}
#ap .card.fill .lbl{color:var(--bronze)}
#ap .card.fill .sm,#ap .card.fill p{color:rgba(245,242,236,.82)}
#ap .card.fill .card__f{border-top-color:var(--line-d);color:var(--bronze)}
#ap .card p{margin-bottom:12px}
#ap .card__f{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-d);font-weight:500;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bronze-txt)}
#ap .dark .card__f,#ap .deep .card__f{border-top-color:var(--line-d);color:var(--bronze)}

#ap .slot{position:relative;width:100%;max-width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:flex-end;padding:18px;min-height:190px;aspect-ratio:3/2;overflow:hidden}
#ap .slot::before{content:'';position:absolute;inset:9px;border:1px dashed var(--bronze);border-radius:calc(var(--r) - 1px);opacity:.38;pointer-events:none}
#ap .slot b{position:relative;display:block;font-family:var(--f-d);font-weight:500;font-size:13.5px;color:var(--ink);margin-bottom:3px}
#ap .slot i{position:relative;font-style:normal;font-size:11.5px;color:var(--muted)}
#ap .slot.w{aspect-ratio:16/7}#ap .slot.t{aspect-ratio:3/4}

/* ─── Метки кадра на фотографиях объектов ─── */
#ap .slot{transition:box-shadow .32s var(--ease),border-color .32s var(--ease)}
#ap .slot .mk{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
#ap .slot .mk s{position:absolute;width:17px;height:17px;border:2px solid var(--bronze);text-decoration:none;
  transition:transform .32s var(--ease)}
#ap .slot .mk s:nth-child(1){left:11px;top:11px;border-right:0;border-bottom:0}
#ap .slot .mk s:nth-child(2){right:11px;top:11px;border-left:0;border-bottom:0}
#ap .slot .mk s:nth-child(3){left:11px;bottom:11px;border-right:0;border-top:0}
#ap .slot .mk s:nth-child(4){right:11px;bottom:11px;border-left:0;border-top:0}
#ap .slot .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  font-family:var(--f-d);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:14px;
  /* подпись переносится целиком: обрезка многоточием делала тезис незаконченным */
  white-space:normal;text-align:center;line-height:1.35;text-wrap:balance;
  max-width:calc(100% - 48px);
  opacity:0;transition:opacity .3s var(--ease),transform .32s var(--ease);z-index:2}
#ap .slot:hover{box-shadow:0 18px 38px -26px rgba(28,48,38,.55);border-color:var(--line-d)}
#ap .slot:hover .mk{opacity:1}
#ap .slot:hover .mk s:nth-child(1){transform:translate(-3px,-3px)}
#ap .slot:hover .mk s:nth-child(2){transform:translate(3px,-3px)}
#ap .slot:hover .mk s:nth-child(3){transform:translate(-3px,3px)}
#ap .slot:hover .mk s:nth-child(4){transform:translate(3px,3px)}
#ap .slot:hover .tag{opacity:1;transform:translate(-50%,-50%) scale(1)}
#ap .dark .slot:hover,#ap .deep .slot:hover,#ap .card.fill .slot:hover{box-shadow:0 18px 38px -26px rgba(0,0,0,.6)}
#ap .dark .slot .tag,#ap .deep .slot .tag,#ap .card.fill .slot .tag{background:var(--bronze);color:var(--ink-deep)}
@media (hover:none){#ap .slot .mk,#ap .slot .tag{display:none}}
#ap .dark .slot,#ap .deep .slot{background:rgba(245,242,236,.05);border-color:var(--line-d)}
#ap .dark .slot b,#ap .deep .slot b{color:var(--paper)}
#ap .dark .slot i,#ap .deep .slot i{color:rgba(245,242,236,.66)}

#ap details{border-bottom:1px solid var(--line)}
#ap .dark details,#ap .deep details{border-bottom-color:var(--line-d)}
#ap summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:19px 0;font-family:var(--f-d);font-weight:500;font-size:clamp(1rem, 1rem + .2vw, 1.12rem);color:var(--ink);letter-spacing:-.008em}
#ap .dark summary,#ap .deep summary{color:var(--paper)}
#ap summary::-webkit-details-marker{display:none}
#ap summary::after{content:'';flex:none;width:11px;height:11px;align-self:center;transition:transform .28s var(--ease);
  background:linear-gradient(var(--bronze-txt),var(--bronze-txt)) center/11px 1px no-repeat,linear-gradient(var(--bronze-txt),var(--bronze-txt)) center/1px 11px no-repeat}
#ap .dark summary::after,#ap .deep summary::after{background:linear-gradient(var(--bronze),var(--bronze)) center/11px 1px no-repeat,linear-gradient(var(--bronze),var(--bronze)) center/1px 11px no-repeat}
#ap details[open] summary::after{transform:rotate(135deg)}
#ap details .b{padding:0 0 20px;max-width:68ch}
#ap details .b p:last-child{margin-bottom:0}
@supports (interpolate-size:allow-keywords){
  #ap,:root{interpolate-size:allow-keywords}
  @media (prefers-reduced-motion:no-preference){
    #ap details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
    #ap details[open]::details-content{block-size:auto}
  }
}

#ap .ph{padding-top:clamp(32px,4.4vw,58px);padding-bottom:clamp(30px,4vw,52px)}
#ap .xn{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;align-content:start}
#ap .xn.col{grid-template-columns:minmax(0,1fr)}
#ap .xn.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){#ap .xn.c3{grid-template-columns:minmax(0,1fr)}}
#ap .xn a{background:var(--white);padding:clamp(20px,2.4vw,28px);text-decoration:none;display:block;transition:background .2s var(--ease)}
#ap .xn a:hover{background:var(--paper-2)}
#ap .xn .k{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-txt);display:block;margin-bottom:9px}
#ap .xn .t{font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:var(--ink);display:block;margin-bottom:5px;letter-spacing:-.012em}
#ap .xn .d{font-size:13px;color:var(--muted);line-height:1.45;display:block}


/* ─── Лидмагнит ───────────────────────────────── */
#ap .magnet{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(26px,4vw,60px);align-items:center;
  background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(28px,3.6vw,52px)}
#ap .magnet h1,#ap .magnet h2,#ap .magnet h3,#ap .magnet h4{color:var(--paper)}
#ap .magnet .lbl{color:var(--bronze)}
#ap .magnet__c{background:rgba(245,242,236,.06);border:1px solid var(--line-d);border-radius:var(--r);padding:22px;text-align:center}
#ap .magnet__c b{display:block;font-family:var(--f-d);font-weight:600;font-size:2.1rem;color:var(--bronze);line-height:1;letter-spacing:-.03em}
#ap .magnet__c span{display:block;font-size:13px;color:rgba(245,242,236,.7);margin-top:8px}
@media(max-width:820px){#ap .magnet{grid-template-columns:minmax(0,1fr)}}

#ap .cl{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);padding-top:22px;border-top:1px solid var(--line)}
#ap .dark .cl,#ap .deep .cl{border-top-color:var(--line-d)}
#ap .cl div{display:flex;flex-direction:column;gap:4px}
#ap .cl span{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
#ap .dark .cl span,#ap .deep .cl span{color:rgba(245,242,236,.62)}
#ap .cl a,#ap .cl b{font-family:var(--f-d);font-weight:500;font-size:15.5px;color:var(--ink);text-decoration:none;word-break:break-word}
#ap .dark .cl a,#ap .dark .cl b,#ap .deep .cl a,#ap .deep .cl b{color:var(--paper)}
#ap .cl a:hover{color:var(--bronze)}

#ap footer{background:var(--ink-deep);color:rgba(245,242,236,.76);padding:clamp(44px,5.6vw,72px) 0 24px}
#ap footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:clamp(22px,3vw,42px)}
@media(max-width:900px){#ap footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#ap footer .cols{grid-template-columns:minmax(0,1fr)}}
#ap footer .ftl,#ap footer h4{font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin:0 0 14px}
#ap footer p,#ap footer a{font-size:13.5px;line-height:1.72;color:rgba(245,242,236,.76);text-decoration:none;word-break:break-word}
#ap footer a:hover{color:var(--paper)}
#ap footer ul{list-style:none;padding:0;margin:0}
#ap footer li{margin-bottom:4px}
#ap footer .base{margin-top:clamp(30px,4vw,52px);padding-top:19px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11.5px;color:rgba(245,242,236,.62)}


/* ─── Первый экран: заголовок, кнопки и направления в одном развороте ─── */
#ap .sheet.hero1{padding:clamp(22px,4.1vh,56px) 0 clamp(40px,5.4vw,84px)}
#ap .hero1__lb{margin-bottom:clamp(9px,1.5vh,16px)}
#ap .hero1 .d1{font-size:clamp(1.66rem, .5rem + 1.35vw + 1.15vh, 3.05rem);max-width:34ch}
#ap .hero1__a{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(15px,2.6vh,28px)}
#ap .hero1 .dirs{margin-top:clamp(15px,3.1vh,36px);
  padding:clamp(13px,2.6vh,28px) clamp(16px,2.1vw,28px) clamp(12px,2vh,24px)}
#ap .hero1 .dirs__h{padding-bottom:clamp(7px,1.2vh,16px);margin-bottom:clamp(9px,1.5vh,19px)}
#ap .hero1 .dirs__h h2{font-size:clamp(1.1rem, .5rem + .6vw + .5vh, 1.72rem)}
#ap .hero1 .dir{padding:clamp(12px,1.9vh,24px) clamp(15px,1.9vw,26px)}
#ap .hero1 .dir h3{max-width:none}
#ap .hero1 .btn{padding-top:11px;padding-bottom:11px}
#ap .hero1 .dir p.lbl{margin-bottom:clamp(8px,1.3vh,13px)}
#ap .hero1 .dir > p:not(.lbl):not(.dir__p){font-size:13.6px;line-height:1.44;margin-top:clamp(6px,1vh,11px)}
#ap .hero1__f{margin-top:clamp(26px,3vw,44px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line)}


/* место под фотографию в карточке направления */
#ap .dir{grid-template-rows:auto auto 1fr auto auto}
#ap .dir__b{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(5px,.85vh,9px);
  margin-top:clamp(10px,1.5vh,16px);padding-top:clamp(9px,1.3vh,14px);
  border-top:1px solid var(--line);position:relative}
#ap .dir__b .dir__p{margin:0;align-self:auto;text-align:left}
#ap .dir__b .dir__l{padding-top:0;margin:0}
#ap .slot.dir__s{width:100%;max-width:none;margin:clamp(9px,1.4vh,15px) 0 0;align-self:stretch;
  aspect-ratio:16/9;min-height:0;height:auto;max-height:clamp(86px,11.4vh,158px);
  padding:11px;border-radius:calc(var(--r) - 2px)}
#ap .slot.dir__s b{font-size:12.5px;margin-bottom:2px}
#ap .slot.dir__s i{font-size:11px}
@media(min-width:1141px) and (max-height:760px){
  
  /* низкий экран ноутбука: первый экран ужимается до одного разворота */
#ap .sheet.hero1{padding-top:3.4vh}
  #ap .slot.dir__s{max-height:10.4vh}
}
@media(max-width:1140px){
  
  /* одна колонка: развернуть первый экран обратно в спокойный ритм */
#ap .sheet.hero1{padding:clamp(52px,7vw,96px) 0 clamp(54px,7vw,100px)}
  #ap .hero1 .d1{font-size:clamp(1.95rem, 1rem + 3.4vw, 3.1rem);max-width:22ch}
  #ap .hero1 .dirs{margin-top:clamp(30px,4vw,44px);padding:clamp(22px,3vw,34px) clamp(18px,2.6vw,30px) clamp(20px,2.6vw,28px)}
  #ap .hero1 .dirs__h h2{font-size:clamp(1.4rem, 1rem + 1.6vw, 2rem)}
  #ap .slot.dir__s{max-height:190px}
}


/* ─── Анимация ────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  #ap .page{animation:pageIn .42s var(--ease) both}
  @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @supports (animation-timeline:view()){
    #ap .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 52%}
    #ap .rv-s > *{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 46%}
  }
  @keyframes rv{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
}
#ap .page{display:block}#ap .page.on{display:block}

/* ─── Отключённая анимация: декоративные линии стоят на месте ─── */
@media (prefers-reduced-motion:reduce){
  #ap .fig__d{clip-path:inset(0 -8px 0 -8px)}
  #ap .dir::before{transform:scaleX(1)}
  #ap .pain__i::before{transform:scaleY(1)}
  #ap .spread__l span i{transform:none}
}