/* 2026-10-14: the tariff block shared by the landing (/) and /tariffs — markup from js/tariff-cards.js.
   Columns follow the block's own width (container queries): ≥ 1000 px — 4 in a row, ≥ 560 px — 2, below — 1. */
.ytc { container-type:inline-size; font-family:'Onest',system-ui,sans-serif; color:#161a17; min-width:0; }
.ytc *, .ytc *::before { box-sizing:border-box; }

/* ── term toggle ── */
.ytc-terms-wrap { margin-bottom:22px; }
.ytc.ytc-center .ytc-terms-wrap { display:flex; justify-content:center; margin-bottom:34px; }
.ytc-terms { display:inline-flex; flex-wrap:wrap; gap:4px; background:#fff; border:1px solid #e7e6df; border-radius:14px; padding:4px; max-width:100%; }
.ytc-term { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; border:none; background:transparent; border-radius:10px;
  padding:9px 15px; font:600 14px/1.2 'Onest',system-ui,sans-serif; color:#4a514b; cursor:pointer; }
.ytc-term:hover { background:#f3f6f3; }
.ytc-term.active { background:#1f5c42; color:#fff; }
.ytc-off { font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:999px; background:#e6f2ec; color:#2f7d5b; }
.ytc-term.active .ytc-off { background:#7fcaa3; color:#16301f; }

/* ── 4 plans ── */
.ytc-grid { display:grid; grid-template-columns:minmax(0,1fr); column-gap:16px; row-gap:0; }
.ytc-card { background:#fff; border:1px solid #e7e6df; border-radius:20px; padding:24px 22px 22px; margin-bottom:16px; min-width:0;
  display:flex; flex-direction:column; position:relative; }
/* the six rows of every card on one subgrid: a long hint or a wrapped line moves the whole row, never one button */
@supports (grid-template-rows:subgrid) {
  .ytc-card { display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; }
}
.ytc-card.is-popular { border-color:#2f7d5b; box-shadow:0 0 0 .5px #2f7d5b, 0 14px 30px rgba(31,92,66,.08); }
/* the badge sits above the name (a long «Ваш тариф · бессрочно» never squeezes it); names of a row share one baseline */
.ytc-head { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:10px; margin-bottom:4px; }
.ytc-name { font-size:18px; font-weight:800; letter-spacing:-.015em; color:#161a17; }
.ytc-badge { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap; line-height:1.2; }
.ytc-badge.pop { background:#e6f2ec; color:#1f5c42; }
.ytc-badge.cur { background:#1f5c42; color:#fff; }
.ytc-sub { font-size:13.5px; color:#7a817b; line-height:1.4; margin-bottom:18px; }
.ytc-price { margin-bottom:18px; }
.ytc-val { font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.1; color:#161a17; white-space:nowrap; }
.ytc-per { font-size:14px; font-weight:500; letter-spacing:0; color:#8a908a; }
.ytc-total { font-size:13px; color:#7a817b; line-height:1.4; margin-top:6px; min-height:2.8em; }   /* 2 lines — the same height for 1 month */
.ytc-total s { color:#a7aca6; white-space:nowrap; }
.ytc-feat { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.4; color:#4a514b; flex:1; }
.ytc-feat li { position:relative; padding-left:28px; }
.ytc-feat li::before { content:''; position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%;
  background:#e6f2ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%232f7d5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.ytc-act { display:flex; }   /* the buttons of a row share one height, even if one label wraps */
.ytc-act > .ytc-btn { flex:1; }
.ytc-hint { font-size:12.5px; color:#8a908a; line-height:1.4; text-align:center; margin-top:8px; }
.ytc-hint:empty { margin-top:0; }

/* ── buttons ── */
.ytc-btn { display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:11px 14px; border:1px solid transparent; border-radius:12px;
  font:600 15px/1.25 'Onest',system-ui,sans-serif; text-align:center; text-decoration:none; cursor:pointer; background:#eef5f0; color:#1f5c42; }
.ytc-btn:hover { background:#e1eee6; }
.ytc-btn.primary { background:#2f7d5b; color:#fff; }
.ytc-btn.primary:hover { background:#286d4f; }
.ytc-btn:disabled, .ytc-btn:disabled:hover { background:#f0efe9; color:#8a908a; cursor:default; }
.ytc-btn:focus-visible, .ytc-term:focus-visible { outline:2px solid #7fcaa3; outline-offset:2px; }
.ytc-btn-lg { min-height:54px; font-size:16px; font-weight:700; border-radius:13px; }

/* ── «Индивидуальный» — one wide card ── */
.ytc-ind { background:#fff; border:1px solid #e7e6df; border-radius:20px; padding:24px 22px; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.ytc-ind-name { font-size:21px; font-weight:800; letter-spacing:-.02em; color:#161a17; margin-bottom:4px; }
.ytc-ind-for { font-size:15px; font-weight:600; color:#2f7d5b; margin-bottom:12px; }
.ytc-ind-turn { display:inline-block; font-size:13.5px; font-weight:600; color:#1f5c42; background:#eef5f0; border-radius:9px; padding:5px 10px; margin-bottom:10px; }
.ytc-ind-text { font-size:14px; color:#6a716b; line-height:1.5; }
.ytc-ind-feat { margin:0; flex:none; }
.ytc-ind-note { font-size:13px; color:#8a908a; text-align:center; margin-top:9px; line-height:1.4; }

/* the container queries last: they override the one-column defaults above */
@container (min-width:560px) {
  .ytc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (min-width:760px) {
  .ytc-ind { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(220px,.75fr); align-items:center; gap:28px; padding:28px 30px; }
  .ytc-ind-feat { border-left:1px solid #efeee8; padding-left:28px; }
}
@container (min-width:1000px) {
  .ytc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container (max-width:559px) {
  .ytc-terms { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .ytc-term { padding:10px 6px; }
}