/* ═══ Тарифы Контроль / Рост / Максимум (07.10.2026) ═══
   Главная (блок «Тарифы» и «Как начинаем») и страница /price. Цены в разметке подставляет сборка из
   data/tariffs.json (scripts/build.py, fill_tariffs). Срок 3 / 6 / 12 месяцев переключается радиокнопками без
   JavaScript: кнопки стоят перед .tf-seg и .tf-grid, выбранная показывает свою цену (.tf-price[data-per]). */

/* ── /price: цена «от» в первом экране ── */
.tf-hero-price{margin:16px 0 0;font-size:17px;font-weight:700;color:var(--ink)}
.tf-hero-price b{font-size:clamp(30px,3.2vw,40px);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tf-hero-price span{font-size:15px;font-weight:600;color:var(--muted)}

/* ── /price, первый экран: текст слева, справа «что получаете каждый месяц» крупными цифрами ── */
.tf-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:960px){.tf-hero{grid-template-columns:minmax(0,1fr)}}
.tf-month{position:relative;overflow:hidden;border-radius:26px;padding:clamp(20px,2.4vw,28px);background:var(--gradient);color:#fff;
  box-shadow:0 24px 60px color-mix(in srgb,var(--violet) 28%,transparent)}
.tf-month::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.12);pointer-events:none}
.tf-month-h{position:relative;margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.tf-month-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tf-month-grid div{min-width:0;padding:14px;border-radius:16px;background:rgba(255,255,255,.14);backdrop-filter:none}
.tf-month-grid b{display:block;font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tf-month-grid span{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.92)}
.tf-month-foot{position:relative;margin:14px 0 0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.92)}
.tf-month-foot b{color:#fff}

/* ── /price: упаковка - полоса с ценой «было / в тарифе» и настоящими снимками упаковки клиентов ── */
.tf-pack-band{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);
  align-items:center;border-radius:28px;padding:clamp(24px,3.4vw,44px);background:var(--plate);border:1px solid var(--hair)}
@media (max-width:900px){.tf-pack-band{grid-template-columns:minmax(0,1fr)}}
.tf-pack-text h2{margin:10px 0 0;font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-.032em;font-weight:800}
.tf-pack-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 0}
.tf-pack-price s{font-size:20px;font-weight:700;color:var(--muted);text-decoration-thickness:2px}
.tf-pack-price b{font-size:clamp(34px,3.4vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.tf-pack-price>span{flex-basis:100%;font-size:14.5px;color:var(--muted)}
.tf-pack-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
@media (max-width:560px){.tf-pack-list{grid-template-columns:minmax(0,1fr)}}
.tf-pack-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.4;font-weight:600}
.tf-pack-list li::before{content:"";position:absolute;left:3px;top:.4em;width:11px;height:6px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.tf-pack-pics{position:relative;aspect-ratio:1.12;min-width:0}
.tf-pack-pics img{position:absolute;display:block;height:auto;border-radius:18px;border:1px solid var(--hair);box-shadow:var(--shadow)}
.tf-pic-a{width:78%;top:0;left:0;transform:rotate(-2deg)}
.tf-pic-b{width:42%;right:0;bottom:0;transform:rotate(2.5deg)}
@media (max-width:900px){.tf-pack-pics{width:100%;max-width:460px;justify-self:center}}
.tf-pack-cap{margin:10px 0 0;font-size:12.5px;color:var(--muted)}

/* ── /price: оффер под первым экраном (владелец 07.10.2026) ── */
.tf-offer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(26px,3vw,36px)}
@media (max-width:900px){.tf-offer{grid-template-columns:minmax(0,1fr)}}
.tf-offer-item{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;align-content:start;min-width:0;
  padding:18px;border-radius:18px;background:var(--plate);border:1px solid var(--hair)}
.tf-offer-item>.ico-sq{grid-row:1;grid-column:1}
.tf-offer-item>b{grid-row:1;grid-column:2;font-size:16.5px;letter-spacing:-.015em;line-height:1.25}
.tf-offer-item>span:not(.ico-sq){grid-column:1 / -1;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.tf-offer-item.is-main{border-color:transparent;background:color-mix(in srgb,var(--violet) 7%,var(--plate));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--violet) 50%,transparent)}

/* ── почему выгодно: короткие пункты с галочкой ── */
.tf-why{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-why li{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;border-radius:14px;
  background:var(--plate);border:1px solid var(--hair);font-size:14.5px;font-weight:600;line-height:1.3}
.tf-why i{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--accent)}
.tf-why i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.tf-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* на телефоне пункты - компактные «таблетки» в строку, а не шесть плашек столбиком */
@media (max-width:560px){
  .tf-why{display:flex;flex-wrap:wrap;gap:8px}
  .tf-why li{padding:8px 12px 8px 8px;border-radius:999px;font-size:13.5px}
}

/* ── переключатель срока ── */
.tf{position:relative}
.tf-r{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.tf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 18px}
.tf-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--hair)}
.tf-seg label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;
  font-size:14.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background-color .2s cubic-bezier(.2,.8,.2,1),color .2s cubic-bezier(.2,.8,.2,1)}
.tf-seg label:hover{color:var(--ink)}
#tf-3:checked~.tf-bar label[for="tf-3"],#tf-6:checked~.tf-bar label[for="tf-6"],#tf-12:checked~.tf-bar label[for="tf-12"]{
  background:var(--plate);color:var(--ink);box-shadow:0 2px 10px rgba(15,18,38,.10)}
#tf-3:focus-visible~.tf-bar label[for="tf-3"],#tf-6:focus-visible~.tf-bar label[for="tf-6"],
#tf-12:focus-visible~.tf-bar label[for="tf-12"]{outline:2px solid var(--violet);outline-offset:2px}
.tf-bar-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);max-width:46ch}
@media (max-width:420px){.tf-seg{display:flex;width:100%}.tf-seg label{flex:1;padding:0 8px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.tf-seg label{transition:none}}

/* ── карточки тарифов ── */
.tf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media (max-width:960px){.tf-grid{grid-template-columns:minmax(0,1fr)}}
/* Владелец 07.10.2026: «выровняй все». На компьютере строки карточек общие (subgrid): название, описание, цена,
   плашка упаковки, кнопка и список стоят на одной высоте во всех трёх тарифах, даже если описание длиннее. */
@media (min-width:961px){
  .tf-grid .tf-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start}
  .tf-grid.tf-home .tf-card{grid-row:span 4}
  .tf-card>.tf-pack{justify-self:start;align-self:start}
}
.tf-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--plate);border:1px solid var(--hair);
  border-radius:22px;padding:clamp(20px,2.4vw,28px)}
.tf-card.is-mid{border-color:transparent;background:color-mix(in srgb,var(--violet) 6%,var(--plate));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--violet) 50%,transparent)}
.tf-name{margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.032em;line-height:1.05}
.tf-what{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.tf-prices{margin-top:18px}
.tf-price{display:none}
.tf-home .tf-price,
#tf-3:checked~.tf-grid .tf-price[data-per="3"],#tf-6:checked~.tf-grid .tf-price[data-per="6"],
#tf-12:checked~.tf-grid .tf-price[data-per="12"]{display:block}
.tf-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font-size:16px;font-weight:700;color:var(--ink)}
.tf-sum b{font-size:clamp(32px,3vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tf-sum em{font-style:normal;font-size:15px;font-weight:600;color:var(--muted)}
.tf-cond{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.tf-cond span{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tf-pack{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--ink);font-size:13px;font-weight:700}
.tf-pack svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;color:var(--good)}
.tf-card .btn{width:100%;margin-top:18px;align-self:start}
.tf-list{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--hair);display:grid;gap:12px;align-content:start}
.tf-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.tf-list li::before{content:"";position:absolute;left:3px;top:.4em;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tf-list b{display:block;color:var(--ink);font-weight:700}
.tf-list li.is-all{color:var(--ink);font-weight:700}
.tf-list li.is-all::before{border-color:var(--good)}
.tf-list.is-short{gap:8px}
.tf-list.is-short li{color:var(--ink)}

/* ── строка под карточками на главной ── */
.tf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:18px}
.tf-foot p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.tf-foot p a,.tf-foot p button{color:var(--accent);font:inherit;font-weight:700;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}

/* ── как начинаем: шаги одной строкой ──
   Правило сайта (ai-clone/feedback/icon-card-heading-next-to-icon.md, владелец 12.09 и 07.10.2026): цифра - это значок,
   заголовок стоит напротив неё на одной строке, подпись - под ними во всю ширину карточки. Карточка ниже и ровнее. */
.tf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:tfs}
.tf-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:center;align-content:start;min-width:0;
  padding:14px;border-radius:18px;background:var(--plate);border:1px solid var(--hair);counter-increment:tfs}
.tf-steps li::before{content:counter(tfs);grid-row:1;grid-column:1;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--gradient);color:#fff;font-size:13px;font-weight:800}
.tf-steps b{grid-row:1;grid-column:2;font-size:15.5px;letter-spacing:-.01em;line-height:1.25}
.tf-steps span{grid-column:1 / -1;margin-top:8px;font-size:13px;line-height:1.4;color:var(--muted)}
@media (max-width:900px){.tf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .tf-steps{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 16px;border-radius:18px;background:var(--plate);border:1px solid var(--hair)}
  .tf-steps li{padding:12px 0;background:none;border:0;border-radius:0}
  .tf-steps li+li{border-top:1px solid var(--hair-soft,var(--hair))}
  .tf-steps span{margin-top:6px}
}

/* ── /price: упаковка, подписка, расчёт, примеры ── */
.tf-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:900px){.tf-band{grid-template-columns:minmax(0,1fr)}}
.tf-tile{min-width:0;border-radius:22px;padding:clamp(20px,2.4vw,28px);background:var(--plate);border:1px solid var(--hair)}
.tf-tile.is-grad{background:var(--gradient);border:0;color:#fff}
.tf-tile .tf-big{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tf-tile h3{margin:10px 0 0;font-size:18px;letter-spacing:-.02em;line-height:1.25}
.tf-tile p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tf-tile.is-grad p{color:rgba(255,255,255,.9)}
.tf-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:760px){.tf-ex{grid-template-columns:minmax(0,1fr)}}
.tf-ex-card{min-width:0;border-radius:18px;padding:18px 20px;background:var(--plate);border:1px solid var(--hair)}
.tf-ex-card h3{margin:0;font-size:16.5px;letter-spacing:-.015em}
.tf-ex-card h3 span{font-weight:600;color:var(--muted)}
.tf-ex-rows{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:0}
.tf-ex-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--hair-soft,var(--hair));
  font-size:14.5px}
.tf-ex-rows li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.tf-ex-rows li small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;text-align:right}
.tf-ex-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.tf-honest{margin:18px 0 0;padding:14px 18px;border-radius:16px;border:1px solid var(--hair);background:var(--surface);
  font-size:14px;line-height:1.5;color:var(--muted);max-width:760px}
.tf-honest b{color:var(--ink)}