/* ═══════════════════════════════════════════════════════════════
   66 BOOST — стиль сайта, тёмная тема по образцу apple.com

   Принципы
   - Ничего не «прыгает»: всё, что видно при загрузке, уже в разметке;
     скрипт только дополняет, а не подменяет.
   - Движение спокойное: прозрачность и небольшой сдвиг, без масштаба,
     свечений и размытия. Кнопки меняют только цвет.
   - Наведение — только на устройствах с мышью, на телефоне оно «залипает».
   - Шрифт системный: SF на Apple, Segoe на Windows, Roboto на Android.
     Ничего не грузится со сторонних серверов.
   - Размеры в rem, корень плавно растёт с шириной окна — на 2K и 4K
     страница сохраняет пропорции.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#000;
  --tile:#161617;
  --tile-2:#1d1d1f;
  --line:#2a2a2d;
  --line-2:#3a3a3d;
  --tx:#f5f5f7;
  --tx-2:#a1a1a6;
  --tx-3:#86868b;
  --blue:#0071e3;
  --blue-2:#0077ed;
  --link:#2997ff;
  --green:#30d158;
  --amber:#ffb340;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);       /* стандартная кривая Apple */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --wrap:68rem;
  --gutter:max(clamp(1.25rem,4.5vw,2.75rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --nav-h:3rem;
  --r:1.5rem;
  --r-sm:.875rem;
  --sp:clamp(4rem,7vw,6.5rem);             /* расстояние между секциями */
  --sp-head:clamp(2rem,3.2vw,2.75rem);      /* от заголовка секции до содержимого */
  color-scheme:dark;
}
html{font-size:clamp(100%,.3vw + .7875rem,150%);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;scroll-padding-top:calc(var(--nav-h) + 1.25rem);background:var(--bg)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font:400 1.0625rem/1.47 var(--font);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--font-d)}
[hidden]{display:none!important}
::selection{background:rgba(41,151,255,.35)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:.375rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus-visible{left:1rem;top:.5rem;z-index:300;background:var(--tx);color:#000;padding:.5rem 1rem;border-radius:99px;font-size:.875rem}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}

/* ── типографика ── */
.t-hero{font-size:clamp(2.75rem,6.6vw,5rem);line-height:1.05;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.t-1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.08;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.t-2{font-size:clamp(1.375rem,2.1vw,1.75rem);line-height:1.15;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.t-3{font-size:1.1875rem;line-height:1.25;font-weight:600;letter-spacing:-.016em}
.lead{font-size:clamp(1.1875rem,1.7vw,1.4375rem);line-height:1.4;color:var(--tx-2);letter-spacing:-.016em;text-wrap:pretty}
.small{font-size:.875rem;line-height:1.43;color:var(--tx-3);letter-spacing:-.008em}
.link{color:var(--link)}
.more::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.3em;border-right:.1em solid currentColor;border-top:.1em solid currentColor;transform:translateY(-.1em) rotate(45deg)}
.more.down::after{transform:translateY(-.25em) rotate(135deg)}
@media(hover:hover){.link:hover{text-decoration:underline;text-underline-offset:.2em}}

/* пометки черновика — на сайт не попадают, deploy-site.sh их вырезает */
.todo{background:#4a3d00;color:#ffe680;font:500 .78em/1.4 ui-monospace,Menlo,monospace;padding:1px 6px;border-radius:4px}
.todo::before{content:"уточнить: ";opacity:.7}

/* ── кнопки: меняется только цвет ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.625rem 1.375rem;border-radius:980px;font-size:1.0625rem;line-height:1.2;font-weight:400;letter-spacing:-.012em;white-space:nowrap;text-align:center;
  transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn-blue{background:var(--blue);color:#fff}
.btn-line{color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
.btn-sm{min-height:1.75rem;padding:.25rem .875rem;font-size:.8125rem}
@media(hover:hover){
  .btn-blue:hover{background:#0068d6}
  .btn-line:hover{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
}
.btn-blue:active{background:#0060c4}
.btn-line:active{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
.seg button:active{color:var(--tx)}
.btn[aria-disabled="true"]{background:var(--tile-2);color:var(--tx-3);box-shadow:none;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.center{text-align:center}
.center .actions,.actions.center{justify-content:center}

/* ── шапка: одна, всегда одинаковая ── */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(22,22,23,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);view-transition-name:nav}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.08)}
.nav-in{height:100%;display:flex;align-items:center;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-d);font-size:1rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap;flex:none}
.brand img{width:1.375rem;height:1.375rem}
.nav-links{display:flex;gap:2rem;margin-inline:auto}
.nav-links a{font-size:.8125rem;color:var(--tx-2);padding:.5rem 0;transition:color .3s var(--ease)}
.nav-links a[aria-current]{color:var(--tx)}
@media(hover:hover){.nav-links a:hover{color:var(--tx)}}
.nav-end{display:flex;align-items:center;gap:.5rem;flex:none}
.burger{display:none;position:relative;width:2.75rem;height:2.75rem;margin-right:-.75rem}
.burger span{position:absolute;left:50%;top:50%;width:1.0625rem;height:1.5px;margin:-.75px 0 0 -.53rem;background:var(--tx);border-radius:1px;transition:transform .35s var(--ease)}
.burger span:first-child{transform:translateY(-.2rem)}
.burger span:last-child{transform:translateY(.2rem)}
.menu-open .burger span:first-child{transform:rotate(45deg)}
.menu-open .burger span:last-child{transform:rotate(-45deg)}

/* меню на телефоне */
.sheet{position:fixed;inset:var(--nav-h) 0 0;z-index:99;overflow-y:auto;overscroll-behavior:contain;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:1.5rem var(--gutter) 2.5rem;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.sheet a{display:block;opacity:0;transform:translateY(-.375rem);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sheet.open a{opacity:1;transform:none;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);transition-delay:calc(var(--i,0) * 35ms + 50ms)}
.sheet-main a{font-family:var(--font-d);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;padding:.4rem 0}
.sheet-main a[aria-current]{color:var(--tx-2)}
.sheet-sub{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}
.sheet-sub a{font-size:1.0625rem;color:var(--tx-2);padding:.5rem 0}
.sheet .btn{display:flex;width:100%;margin-top:1.75rem}
html.locked,html.locked body{overflow:hidden}

/* ── появление: только когда работает скрипт (класс js ставит boot.js до отрисовки) ── */
.js .reveal{opacity:0;transform:translateY(1.25rem);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.js:not(.ready) .reveal:not(.in){animation:rise .9s var(--ease-out) 3s forwards}  /* запасной путь, если app.js не загрузился */
.js .reveal.in{opacity:1;transform:none}
.js .reveal.now{transition:none}
.js .rise{opacity:0;transform:translateY(.75rem);animation:rise .9s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 80ms + 60ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* переходы между страницами: шапка стоит, содержимое плавно сменяется */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease)}

/* ── секции ── */
.section{padding-block:calc(var(--sp) / 2)}
main{padding-bottom:calc(var(--sp) / 2)}
.head{max-width:44rem;margin-bottom:var(--sp-head)}
.head.center{max-width:50rem;margin-inline:auto}
.head .lead{margin-top:.875rem}

/* ── первый экран ── */
.hero{padding-block:clamp(4.5rem,9vw,7.5rem) calc(var(--sp) / 2);text-align:center}
.hero .lead{max-width:34rem;margin:1.25rem auto 0}
.hero .actions{margin-top:2rem}
.hero .small{margin-top:1.25rem}

/* ── плитки ── */
.tile{background:var(--tile);border-radius:var(--r)}

/* возможности */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.feature{padding:clamp(1.75rem,3vw,2.5rem)}
.feature .tag{display:block;font-size:.875rem;font-weight:600;color:var(--tx-3);margin-bottom:.625rem}
.feature p{margin-top:.625rem;color:var(--tx-2);max-width:26rem}

/* как начать */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.5rem);counter-reset:step}
.step{counter-increment:step;padding-top:1.25rem;border-top:1px solid var(--line-2)}
.step::before{content:counter(step);display:block;font-family:var(--font-d);font-size:.875rem;font-weight:600;color:var(--tx-3);margin-bottom:.5rem}
.step p{margin-top:.375rem;color:var(--tx-2)}
.steps + .actions{margin-top:var(--sp-head)}

/* приложение на главной */
.app-teaser{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:2rem 3rem;padding:clamp(2rem,4.5vw,3.5rem)}
.app-teaser .lead{margin-top:.875rem;max-width:28rem}
.app-teaser .actions{margin-top:1.75rem}
.platforms{display:grid;gap:.625rem}
.platform{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:var(--r-sm);background:var(--tile-2)}
.platform svg,.sys-os svg{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:var(--tx);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.platform b{display:block;font-weight:600;font-size:1rem}
/* карточки систем выезжают по очереди вслед за блоком */
.js .app-teaser .platform{opacity:0;transform:translateX(1.5rem);
  transition:opacity .8s var(--ease-out),transform 1s var(--ease-out),background-color .25s var(--ease);
  transition-delay:calc(.3s + var(--k,0) * .14s),calc(.3s + var(--k,0) * .14s),0s}
.js .app-teaser.in .platform{opacity:1;transform:none}
.platform svg{transition:transform .5s var(--ease-out)}
@media(hover:hover){
  .platform:hover{background:#26262a}
  .platform:hover svg{transform:translateY(-.125rem)}
}
.platform span{display:block;font-size:.8125rem;color:var(--tx-2)}

/* тарифы */
.seg{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);padding:.25rem;border-radius:99px;background:var(--tile);margin-top:1.75rem}
.seg-thumb{position:absolute;top:.25rem;bottom:.25rem;left:.25rem;width:calc((100% - .5rem) / 3);border-radius:99px;background:var(--line-2);transform:translateX(calc(var(--at,0) * 100%));transition:transform .4s var(--ease)}
.seg button{position:relative;padding:.5rem 1.25rem;border-radius:99px;font-size:.875rem;color:var(--tx-2);transition:color .3s var(--ease);white-space:nowrap}
.seg button[aria-pressed="true"]{color:var(--tx)}
.plan{padding:clamp(1.5rem,2.6vw,2.25rem);display:flex;flex-direction:column}
.plan.best{box-shadow:inset 0 0 0 1.5px var(--blue)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;min-height:1.75rem}
.badge{font-size:.75rem;font-weight:600;color:var(--link);white-space:nowrap}
.plan .dev{margin-top:.125rem;color:var(--tx-2);font-size:.9375rem}
.price{margin-top:1.5rem;display:flex;align-items:baseline;gap:.375rem;white-space:nowrap}
.price b{font-family:var(--font-d);font-size:2.75rem;line-height:1.1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price span{color:var(--tx-2)}
.per{margin-top:.125rem;font-size:.875rem;color:var(--tx-3);white-space:nowrap;min-height:1.25rem}
.per em{font-style:normal;color:var(--green)}
.price,.per{transition:opacity .18s var(--ease),transform .18s var(--ease)}
.changing .price,.changing .per{opacity:0;transform:translateY(-.25rem);transition-duration:.12s}
.plan ul{margin:1.5rem 0 1.75rem;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:.625rem}
.plan li{display:flex;gap:.625rem;font-size:.9375rem;color:var(--tx-2)}
.plan li svg{flex:none;width:1.125rem;height:1.125rem;margin-top:.125rem;stroke:var(--tx-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto}
.plans-note{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem 1.5rem}

/* почему мы */
.why{padding:clamp(1.5rem,2.6vw,2.25rem)}
.why svg{width:1.75rem;height:1.75rem;stroke:var(--tx);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.25rem}
.why p{margin-top:.5rem;font-size:.9375rem;color:var(--tx-2)}

/* вопросы */
.faq{max-width:46rem;margin-inline:auto;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.25rem;padding:1.25rem 0;font-family:var(--font-d);font-size:1.1875rem;font-weight:600;letter-spacing:-.016em;-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;margin-left:auto;width:.875rem;height:.875rem}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--tx-2);border-radius:1px;transition:transform .35s var(--ease)}
.pm::after{transform:rotate(90deg)}
.qa[open]:not(.closing) .pm::after{transform:rotate(0)}
.qa .a{overflow:hidden}
.qa .a p{padding:0 2rem 1.375rem 0;color:var(--tx-2);max-width:40rem}

/* финальный призыв */
.final .lead{margin:1rem auto 0;max-width:30rem}
.final .actions{margin-top:1.75rem}

/* ── страница приложения ── */
.dl-meta{margin-top:1rem;min-height:1.25rem}
.js .dl-wait{opacity:0;transform:translateY(.75rem)}
.js .dl-wait:not(.ready){animation:rise .6s var(--ease-out) 2.5s forwards}  /* запасной путь, если скрипт не загрузился */
.js .dl-wait.ready{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.systems{border-top:1px solid var(--line)}
.sys{display:grid;grid-template-columns:1fr 1.1fr;gap:1rem 3rem;padding-block:1.75rem;border-bottom:1px solid var(--line)}
.sys-os{display:flex;gap:1rem;align-items:flex-start}
.sys-os svg{margin-top:.125rem}
.sys-os p{margin-top:.375rem;color:var(--tx-2);font-size:.9375rem}
.sys-os .warn{color:var(--amber)}
.sys-file{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.sys-file .info{color:var(--tx-2);font-size:.9375rem}
.sha{width:100%;padding:.75rem 1rem;border-radius:var(--r-sm);background:var(--tile);display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:center}
.sha small{grid-column:1/-1;font-size:.75rem;color:var(--tx-3);font-weight:600}
.sha code{font:.75rem/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;word-break:break-all;letter-spacing:0}
.sha button{font-size:.8125rem;color:var(--link);white-space:nowrap}
.verify{display:grid;grid-template-columns:auto 1fr;gap:1.25rem 1.75rem;align-items:start;padding:clamp(1.5rem,3.5vw,2.5rem)}
.verify svg{width:2.25rem;height:2.25rem;stroke:var(--green);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.verify p{margin-top:.5rem;color:var(--tx-2);max-width:40rem}
.inst{padding:clamp(1.5rem,3vw,2.25rem)}
.inst ol{counter-reset:i;display:grid;gap:1rem;margin-top:1.25rem}
.inst li{counter-increment:i;position:relative;padding-left:2.25rem}
.inst li::before{content:counter(i);position:absolute;left:0;top:.0625rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--tile-2);display:grid;place-items:center;font-size:.75rem;font-weight:600}
.inst .note{margin-top:1.5rem;padding-top:1.125rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--tx-2)}
.help{margin-top:1.75rem;text-align:center}
.inst .note-top{margin-top:.75rem;color:var(--tx-2)}
.inst b{font-weight:600}
.path{display:inline-block;margin:.25rem 0;padding:.125rem .5rem;border-radius:.375rem;background:var(--tile-2);font:.8125rem/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:0;word-break:break-all;user-select:all}
.matrix{padding:.5rem clamp(1rem,3vw,2rem)}
.matrix table{width:100%;border-collapse:collapse}
.matrix th,.matrix td{padding:1rem .5rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9375rem}
.matrix tr:last-child th,.matrix tr:last-child td{border-bottom:0}
.matrix thead th{font-size:.8125rem;font-weight:600;color:var(--tx-3);padding-block:.875rem}
.matrix tbody th{font-weight:400;color:var(--tx)}
.matrix td{width:22%;white-space:nowrap}
.matrix .yes{color:var(--green)}
.matrix .wip{color:var(--tx-2)}
.matrix .no{color:var(--tx-3)}

/* ── подвал ── */
.footer{background:var(--tile);padding-block:2.25rem max(1.75rem,env(safe-area-inset-bottom));font-size:.8125rem;line-height:1.45;color:var(--tx-3)}
.fine{display:grid;gap:.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.fdir{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:1.5rem 2rem;padding-block:1.75rem;border-bottom:1px solid var(--line)}
.fdir .brand{font-size:.9375rem;color:var(--tx)}
.fdir .brand img{width:1.25rem;height:1.25rem}
.fdir .about{margin-top:.625rem;max-width:16rem}
.fdir .fh{font-size:.8125rem;font-weight:600;color:var(--tx);margin-bottom:.5rem}
.fdir nav a{display:block;width:fit-content;padding:.25rem 0;transition:color .2s var(--ease)}
.fbot{padding-top:1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem}
.fbot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.fbot a{transition:color .2s var(--ease)}
@media(hover:hover){.fdir nav a:hover,.fbot a:hover{color:var(--tx)}}

/* ── cookie ── */
.cookie{position:fixed;z-index:150;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));width:min(38rem,100% - 1.5rem);display:flex;align-items:center;gap:1.25rem;padding:.875rem .875rem .875rem 1.25rem;border-radius:var(--r-sm);
  background:rgba(29,29,31,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 0 0 1px var(--line-2),0 1rem 2.5rem rgba(0,0,0,.45);
  font-size:.8125rem;line-height:1.45;color:var(--tx-2);opacity:0;transform:translate(-50%,.75rem);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.cookie.show{transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s}
.cookie{visibility:hidden;pointer-events:none}
.cookie.show{opacity:1;transform:translate(-50%,0);visibility:visible;pointer-events:auto}
.cookie b{color:var(--tx);font-weight:600}
.cookie .btn{flex:none}

/* ═══ адаптив ═══ */
@media(max-width:1068px){
  .plan{padding:1.375rem}
  .price b{font-size:2.375rem}
  .app-teaser{grid-template-columns:1fr}
  .platforms{grid-template-columns:1fr 1fr}
  .fdir{grid-template-columns:repeat(3,1fr)}
  .fdir > :first-child{grid-column:1/-1}
}
@media(max-width:833px){
  .nav-links,.nav-end .btn{display:none}
  .nav-in{justify-content:space-between}
  .burger{display:block}
  .steps{grid-template-columns:1fr;gap:1.25rem}
  .sys{grid-template-columns:1fr}
  .sys-file{padding-left:2.5rem}
  .grid-2.install{grid-template-columns:1fr}
}
@media(max-width:760px){
  .grid-3.features{grid-template-columns:1fr}
  .grid-3.plans{grid-template-columns:1fr;max-width:28rem;margin-inline:auto}
  .plan{padding:clamp(1.5rem,2.6vw,2.25rem)}
  .price b{font-size:2.75rem}
}
@media(max-width:640px){
  .grid-2.whys{grid-template-columns:1fr}
  .platforms{grid-template-columns:1fr}
  .hero .actions,.final .actions{flex-direction:column;gap:1.25rem}
  .hero .actions .btn,.final .actions .btn{width:100%;max-width:22rem}
  .verify{grid-template-columns:1fr}
  .qa summary{font-size:1.0625rem}
  .qa .a p{padding-right:0}
  .fdir{grid-template-columns:1fr 1fr}
  .cookie{flex-direction:column;align-items:stretch;gap:.75rem}
}
@media(max-width:640px){
  .matrix thead{display:none}
  .matrix tr{display:grid;grid-template-columns:1fr 1fr;gap:.125rem .75rem;padding:.875rem 0;border-bottom:1px solid var(--line)}
  .matrix tr:last-child{border-bottom:0}
  .matrix th,.matrix td{border:0;padding:0;width:auto;white-space:normal}
  .matrix tbody th{grid-column:1/-1;margin-bottom:.25rem}
  .matrix td:nth-of-type(1)::before{content:"Mac · ";color:var(--tx-3)}
  .matrix td:nth-of-type(2)::before{content:"Windows · ";color:var(--tx-3)}
}
@media(max-width:400px){
  .seg{display:grid;width:100%}
  .seg button{padding-inline:.5rem}
  .app-teaser{padding:1.5rem}
  .app-teaser .btn{white-space:normal}
}
@media(pointer:coarse){
  .btn-sm{min-height:2.75rem;padding-inline:1.125rem}
  .seg button{min-height:2.75rem}
  .sha button{padding:.75rem .25rem;margin:-.75rem -.25rem}
  .fdir nav a,.fbot a{padding-block:.5rem}
  .actions .link{padding-block:.625rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal,.js .rise,.js .dl-wait,.js .app-teaser .platform{opacity:1;transform:none}
  @view-transition{navigation:none}
}
@media(prefers-reduced-transparency:reduce){
  .nav,.sheet,.cookie{background:#161617;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(forced-colors:active){
  .btn{border:1px solid ButtonText}
  .tile{border:1px solid CanvasText}
  .burger span,.pm::before,.pm::after{background:CanvasText}
  .seg-thumb{background:Highlight}
  .seg button[aria-pressed="true"]{color:HighlightText}
  .plan.best{border:2px solid Highlight}
}
@media print{
  .nav,.sheet,.cookie,.burger{display:none!important}
  .js .reveal,.js .rise{opacity:1;transform:none}
}