/* =========================================================================
   ПроСервис — сайт продукта.
   Палитра совпадает с интерфейсом системы (акцент #a36726), чтобы сайт
   и продукт читались как одна вещь: скриншоты не выглядят чужими.
   ========================================================================= */

:root {
  /* Палитра — та же, что генерируется в продукте из акцентного цвета */
  --accent:#a36726;
  --accent-2:#85521b;
  --accent-3:#704415;
  --accent-soft:#f6f1ec;
  --accent-soft-2:#eee6dd;
  --accent-line:#e3d7ca;
  --bg:#faf9f7;
  --bg-2:#f8f4f1;
  --card:#fefefe;
  --stone:#f6f3f0;
  --stone-2:#efeae4;
  --line:#e5e1dc;
  --line-2:#d1cbc4;
  --txt:#22201d;
  --txt-2:#47423e;
  --muted:#716b65;
  --muted-2:#948f89;
  --ring:rgba(163,103,38,.22);

  /* Статусные цвета — от акцента не зависят */
  --ok-bg:#eef4e4;   --ok-fg:#3d6033;   --ok-line:#d9e6c6;
  --warn-bg:#fdf1da; --warn-fg:#8a5a10; --warn-line:#f2ddb4;
  --err-bg:#fbe6e1;  --err-fg:#a03828;  --err-line:#f2cbc2;
  --info-bg:#e6eefa; --info-fg:#2b5187; --info-line:#cddcf2;
  --note-bg:#ece9f7; --note-fg:#5a4a95;

  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Manrope","Inter",ui-sans-serif,system-ui,sans-serif;

  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;

  --shadow:rgba(34,32,29,.05) 0 1px 2px 0;
  --shadow-md:rgba(34,32,29,.06) 0 2px 6px -1px, rgba(34,32,29,.04) 0 1px 2px 0;
  --shadow-lg:rgba(34,32,29,.08) 0 18px 32px -14px, rgba(34,32,29,.06) 0 6px 14px -6px;
  --shadow-accent:rgba(163,103,38,.24) 0 8px 18px -8px;

  --page:1200px;
}

/* ------------------------------------------------------------------ base */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font);font-size:16px;line-height:1.55;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--accent-3);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--txt);margin:0;font-weight:700;letter-spacing:-.018em}
h1{font-size:clamp(32px,4.4vw,50px);line-height:1.08}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.18}
h3{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.008em}

.container{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(56px,7vw,92px);position:relative}
.section--tint{background:var(--bg-2)}
.section--paper{background:var(--card);border-block:1px solid var(--line)}
.head{max-width:740px;margin-bottom:44px}
.head--center{margin-inline:auto;text-align:center}
.head p{margin-top:14px;font-size:17px;color:var(--muted);line-height:1.6}

.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-3);margin-bottom:12px}

/* --------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:.01em;
  border-radius:var(--radius);padding:12px 22px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:var(--shadow-accent);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0);box-shadow:none}
.btn--outline{background:var(--card);color:var(--txt-2);border-color:var(--line-2)}
.btn--outline:hover{border-color:var(--txt-2);color:var(--txt)}
.btn--ghost{background:transparent;color:var(--txt-2);padding:9px 12px;font-weight:500}
.btn--ghost:hover{color:var(--accent-3)}
.btn--lg{font-size:17px;padding:15px 30px}
.btn--block{width:100%}

/* ------------------------------------------------------------------- nav */

.nav{position:sticky;top:0;z-index:60;background:rgba(250,249,247,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .2s ease,background-color .2s ease}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;gap:28px;padding-block:14px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--txt);text-decoration:none}
.brand:hover{text-decoration:none}
.brand__mark{width:36px;height:36px;border-radius:var(--radius);background:var(--accent);
  display:grid;place-items:center;flex:none;color:#fff}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.015em;line-height:1.15}
.brand__sub{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.2}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{font-size:15px;font-weight:500;color:var(--txt-2);padding:9px 12px;border-radius:var(--radius);text-decoration:none}
.nav__link:hover{color:var(--accent-3);background:var(--accent-soft);text-decoration:none}
.nav__actions{display:flex;align-items:center;gap:8px;margin-left:8px}
.nav__burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);width:42px;height:42px;cursor:pointer;padding:0;place-items:center}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{
  content:"";display:block;width:18px;height:1.6px;background:var(--txt);position:relative;
  transition:transform .2s ease,opacity .2s ease}
.nav__burger span::before{position:absolute;top:-6px}
.nav__burger span::after{position:absolute;top:6px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------------ hero */

.hero{padding-block:clamp(44px,6vw,80px) clamp(52px,7vw,88px);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,4vw,56px);align-items:center}
.hero__lead{margin-top:22px;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);max-width:36em}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__note{margin-top:18px;display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--muted-2)}
.hero__note span{display:inline-flex;align-items:center;gap:6px}
.hero__glow{position:absolute;inset:auto -20% -55% 30%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-soft) 0%,rgba(255,255,255,0) 100%)}

/* --------------------------------------------------- макет интерфейса */

.mock{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;font-size:13px}
.mock__bar{display:flex;align-items:center;gap:6px;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.mock__dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.mock__url{margin-left:8px;font-size:11px;color:var(--muted-2);background:var(--card);
  border-radius:5px;padding:3px 10px;border:1px solid var(--line)}
.mock__body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.mock__side{border-right:1px solid var(--line);padding:12px;background:var(--card)}
.mock__side-t{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);
  font-weight:600;margin:0 0 7px 8px}
.mock__nav{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;border-radius:6px;font-size:12.5px;color:var(--muted);margin-bottom:1px}
.mock__nav.on{background:var(--accent-soft);color:var(--accent-3);font-weight:600}
.mock__nav b{font-size:10.5px;font-weight:600;background:var(--accent);color:#fff;border-radius:20px;padding:0 6px}
.mock__main{padding:13px;background:var(--card);min-height:300px}
.mock__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mock__head strong{font-family:var(--font-display);font-size:14px}
.mock__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:7px;background:var(--card);box-shadow:var(--shadow)}
.mock__row:last-child{margin-bottom:0}
.mock__t{font-weight:600;font-size:12.5px;color:var(--txt)}
.mock__m{font-size:11px;color:var(--muted-2);margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:3px 9px;border-radius:6px;white-space:nowrap;border:1px solid transparent}
.badge--info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-line)}
.badge--ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-line)}
.badge--warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}
.badge--err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-line)}
.badge--mute{background:var(--stone-2);color:var(--muted)}
.due{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.due::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.due--ok::before{background:#6b9155}
.due--warn{color:var(--warn-fg);font-weight:600}.due--warn::before{background:#c9911f}
.due--late{color:var(--err-fg);font-weight:600}.due--late::before{background:#c0452f}

/* ---------------------------------------------------------------- цифры */

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow)}
.stat__v{font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-.02em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.stat__l{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.45}

/* ----------------------------------------------------------------- боли */

.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pain{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow)}
.pain h3{font-size:17px;margin-bottom:10px}
.pain p{color:var(--muted);font-size:14.5px;line-height:1.6}
.pain__fix{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--txt-2)}
.pain__fix svg{flex:none;margin-top:2px}

/* ---------------------------------------------------------------- шаги */

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;counter-reset:s}
.step{position:relative;padding-top:44px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:34px;height:34px;border-radius:var(--radius);background:var(--accent-soft);
  color:var(--accent-3);font-family:var(--font-display);font-weight:700;font-size:15px;
  display:grid;place-items:center}
.step h3{font-size:16.5px;margin-bottom:7px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}

/* ------------------------------------------------------------ features */

.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.feature__ic{width:40px;height:40px;border-radius:var(--radius);background:var(--accent-soft);
  color:var(--accent-2);display:grid;place-items:center;margin-bottom:15px}
.feature h3{font-size:16.5px;margin-bottom:8px}
.feature p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ------------------------------------------------------------- вкладки */

.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.tab{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 18px;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--txt-2);cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.tab:hover{border-color:var(--line-2)}
.tab.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-3);font-weight:600}
.panes{position:relative}
.pane{display:none}
.pane.on{display:block;animation:fade .28s ease-out both}
.pane__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,52px);align-items:center}
.pane__list{margin-top:20px;display:grid;gap:11px}
.pane__list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--txt-2)}
.pane__list svg{flex:none;margin-top:4px}

/* --------------------------------------------------------------- роли */

.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.role{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
.role h3{font-size:16px;margin-bottom:7px}
.role p{font-size:14px;color:var(--muted);line-height:1.55}

/* ------------------------------------------------------------- тарифы */

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%;position:relative}
.plan--on{border-color:var(--accent);box-shadow:var(--shadow-md)}
.plan__flag{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 10px;border-radius:6px}
.plan__n{font-family:var(--font-display);font-weight:700;font-size:20px}
.plan__t{color:var(--muted);font-size:14px;margin-top:5px;min-height:44px;line-height:1.45}
.plan__p{margin-top:18px;display:flex;align-items:baseline;gap:7px}
.plan__a{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.plan__u{color:var(--muted);font-size:14px}
.plan__m{font-size:13px;color:var(--muted-2);margin-top:4px}
.plan__lim{margin-top:14px;display:grid;gap:6px;font-size:14px;color:var(--txt-2)}
.plan__lim span{display:flex;align-items:center;gap:8px}
.plan .btn{margin-top:20px}
.plan__f{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.plan__f li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--txt-2)}
.plan__f svg{flex:none;margin-top:3px}
.pricing__note{margin-top:28px;text-align:center;font-size:14.5px;color:var(--muted);line-height:1.65}

/* ---------------------------------------------------------------- FAQ */

.faq{max-width:820px;margin-inline:auto}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;border:0;cursor:pointer;font-family:var(--font-display);font-weight:600;
  font-size:17px;color:var(--txt);text-align:left;padding:19px 0;letter-spacing:-.008em}
.faq__q svg{flex:none;transition:transform .2s ease;color:var(--muted-2)}
.faq__i.on .faq__q svg{transform:rotate(45deg)}
.faq__a{display:none;padding-bottom:19px;color:var(--muted);line-height:1.65;max-width:70ch;font-size:15.5px}
.faq__i.on .faq__a{display:block;animation:fade .24s ease-out both}

/* --------------------------------------------------------------- форма */

.cta{background:var(--bg-2)}
.cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(28px,4vw,56px);align-items:start}
.cta__pts{margin-top:22px;display:grid;gap:11px}
.cta__pts li{display:flex;gap:10px;align-items:flex-start;color:var(--txt-2);font-size:15.5px}
.cta__pts svg{flex:none;margin-top:4px}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-md)}
.form__row{margin-bottom:15px}
.form label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--txt-2)}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--font);font-size:15px;color:var(--txt);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:11px 14px}
.form textarea{resize:vertical;min-height:84px}
.form input::placeholder,.form textarea::placeholder{color:var(--muted-2)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.form__hint{font-size:12.5px;color:var(--muted-2);margin-top:12px;line-height:1.5}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{display:none;border-radius:var(--radius);padding:12px 15px;font-size:14px;margin-bottom:15px}
.form__msg.on{display:block}
.form__msg--ok{background:var(--ok-bg);color:var(--ok-fg)}
.form__msg--err{background:var(--err-bg);color:var(--err-fg)}

/* -------------------------------------------------------------- футер */

.footer{background:var(--card);border-top:1px solid var(--line);padding-block:48px 30px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
.footer__about{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:16px;max-width:40ch}
.footer h4{font-family:var(--font);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted-2);font-weight:600;margin-bottom:14px}
.footer__l{display:grid;gap:9px}
.footer__l a{color:var(--txt-2);font-size:14.5px}
.footer__l a:hover{color:var(--accent-3)}
.footer__legal{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted-2);line-height:1.7;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}

/* --------------------------------------------------------- юр. страницы */

.legal{max-width:820px;margin-inline:auto;padding-block:44px 64px}
.legal h1{font-size:clamp(27px,3.6vw,36px)}
.legal__d{display:inline-block;margin-top:12px;font-size:14px;color:var(--muted-2)}
.legal h2{font-size:20px;margin-top:30px;margin-bottom:11px}
.legal p,.legal li{color:var(--txt-2);line-height:1.7;margin-bottom:11px;font-size:15.5px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:16px}

/* ----------------------------------------------------------- анимации */

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.hero__grid > *{animation:fade .5s cubic-bezier(.2,.7,.3,1) both}
.hero__grid > *:nth-child(2){animation-delay:.1s}
/* строка в макете «прилетает» — показывает, что заявки приходят живьём */
@keyframes rowIn{from{opacity:0;transform:translateY(-8px);background:var(--accent-soft)}to{opacity:1;transform:none;background:var(--card)}}
.mock__row--new{animation:rowIn .6s ease-out both;animation-delay:1.1s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------- адаптив */

@media (max-width:1024px){
  .steps,.roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero__grid,.pane__grid,.cta__grid{grid-template-columns:minmax(0,1fr)}
  .hero__media{order:2}
  .pains,.features,.plans{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .nav__burger{display:grid}
  .nav__links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:12px 24px 22px;box-shadow:var(--shadow-md)}
  .nav.is-open .nav__links{display:flex}
  .nav__link{padding:12px 0;font-size:16px}
  .nav__actions{flex-direction:column;align-items:stretch;margin:12px 0 0;gap:8px}
  .nav__actions .btn{width:100%}
}
@media (max-width:640px){
  .container{padding-inline:18px}
  .mock__body{grid-template-columns:minmax(0,1fr)}
  .mock__side{display:none}
  .form{padding:20px}
  .hero__actions .btn{width:100%}
  .steps,.roles,.stats{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   Главное действие — чернильное.
   На лендинге кнопка обязана быть самым громким элементом экрана. Охра
   при насыщенности 62% на кремовом холсте вписывается в общую гамму и
   перестаёт звать. Тёмная кнопка даёт максимальный контраст к тёплой
   бумаге и читается дороже цветной. Фирменный цвет остаётся в логотипе,
   надзаголовках, иконках и рамке выделенного тарифа.
   ========================================================================= */

:root{
  --ink:#25211d;          /* заливка главного действия */
  --ink-2:#3a342e;        /* наведение */
  --shadow-ink:rgba(34,32,29,.22) 0 8px 18px -8px;
}

.btn--primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--primary:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff;box-shadow:var(--shadow-ink)}
.btn--primary:active{background:var(--ink);border-color:var(--ink)}

/* Поле в фокусе и рамка выбранного тарифа остаются фирменными:
   там цвет обозначает «это ваше», а не «нажмите сюда». */
.plan--on{border-color:var(--accent)}
.plan__flag{background:var(--accent);color:#fff}

/* Выделенный тариф: кнопка тоже чернильная, иначе на странице
   окажутся два разных «главных» действия. */
.plan--on .btn--primary{background:var(--ink);border-color:var(--ink)}