/* Page /tarif/, part 2 — blocks 03–10 below the first screen and the phone sticky button; loads without
   blocking the first paint (see tarif-landing.css for the source of the layout and the breakpoints). */

.tf-sec { padding: 24px 0 112px; }
.tf-stack { display: flex; flex-direction: column; gap: 40px; }
.tf-head { display: flex; flex-direction: column; gap: 16px; }
.tf-head--center { align-items: center; max-width: 1000px; margin-inline: auto; text-align: center; }
.tf-head--center .tf-lead { max-width: 860px; }
.tf-overline--center { text-align: center; }
.tf-panel { border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.tf-card-title { margin: 0; color: var(--v2-ink); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.tf-card-title--m { font-size: 18px; }
.tf-link { color: var(--v2-green); font-size: 17px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.tf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tf-tile { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border: 1px solid var(--v2-line); border-radius: 18px; background: var(--v2-card); box-shadow: var(--tf-shadow-tile); font-size: 24px; line-height: 1; }
.tf-tile--sky { background: var(--v2-sky); }

/* 03 · How to start: three steps, two ways to work with AI, the main button */
.tf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.tf-step { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--v2-line); border-radius: 24px; background: var(--v2-card); }
.tf-step > div { display: flex; flex-direction: column; gap: 12px; }
.tf-step__num { color: var(--v2-green); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.tf-step p, .tf-paystep p { margin: 0; color: var(--v2-ink-secondary); font-size: var(--text-lg); line-height: 1.55; }
.tf-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tf-way { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 28px; }
.tf-way--butter { --tone: var(--v2-butter); --tone-ink: var(--v2-butter-ink); background: var(--v2-butter); }
.tf-way--sky { --tone: var(--v2-sky); --tone-ink: var(--v2-sky-ink); background: var(--v2-sky); }
.tf-way__top { display: flex; align-items: center; gap: 14px; }
.tf-way__top > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-way__tag { margin: 0; color: var(--tone-ink); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.tf-way__text { margin: 0; color: var(--v2-ink-secondary); font-size: 16px; line-height: 1.45; }
.tf-way__label { margin: 4px 0 -6px; color: var(--tone-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.tf-prompts, .tf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tf-prompt { max-width: 100%; height: auto; min-height: var(--btn-height); white-space: normal; text-align: left; }
.tf-prompt .tf-ico { font-size: 16px; }
.tf-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border: 1px solid var(--v2-line); border-radius: var(--radius-pill); background: var(--v2-card); color: var(--v2-ink); font-size: 14px; font-weight: 500; line-height: 1.4; }
.tf-way__link { margin-top: auto; padding-top: 16px; color: var(--tone-ink); font-size: 17px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.tf-way__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tf-cta-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tf-cta-note { margin: 0; color: var(--v2-ink-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }

/* 04 · Client accounts: price ladder (bars grow by 40 px; the cap is lilac) */
.tf-ladder-panel { display: flex; flex-direction: column; gap: 28px; padding: 40px; }
.tf-ladder { display: flex; align-items: flex-end; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tf-ladder__step { display: flex; flex: 1 1 0; flex-direction: column; gap: 10px; min-width: 0; }
.tf-ladder__label { display: flex; align-items: center; gap: 8px; color: var(--v2-ink-secondary); font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.tf-ladder__price { color: var(--v2-ink); font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; white-space: nowrap; }
.tf-ladder__bar { display: block; height: calc(32px + var(--tf-step) * 40px); border-radius: 16px; background: var(--v2-sand); }
.tf-ladder__step--cap .tf-ladder__price { color: var(--v2-lilac-ink); }
.tf-ladder__step--cap .tf-ladder__bar { background: var(--v2-lilac); }
.tf-badge { display: inline-flex; padding: 2px 7px; border-radius: 6px; background: var(--v2-lilac); color: var(--v2-lilac-ink); font-size: 12px; font-weight: 600; line-height: 1; }
.tf-panel__note { margin: 0; color: var(--v2-ink-secondary); font-size: 14px; line-height: 1.55; }
.tf-notice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 24px; border-radius: 24px; background: var(--v2-sky); color: var(--v2-sky-ink); font-size: 16px; line-height: 1.45; }
.tf-notice__icon { flex: none; font-size: 20px; line-height: 1; }

/* 05 · Comparison: a real <table>; its head sticks under the site header while the table scrolls */
.tf-tabs, .tf-expand { display: none; }
.tf-table-wrap { border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.tf-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tf-table col.tf-col-name { width: 30%; }
.tf-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--v2-line); text-align: left; vertical-align: top; }
.tf-table tbody th { color: var(--v2-ink); font-size: 13px; font-weight: 600; line-height: 18px; }
.tf-table td { color: var(--v2-ink-secondary); font-size: 13px; line-height: 18px; }
.tf-table td.tf-col-advertiser, .tf-table thead .tf-col-advertiser { background: var(--tf-highlight); }
.tf-table thead th { position: sticky; top: var(--lf-header-height, 64px); z-index: 2; padding: 24px 20px; background: var(--v2-card); vertical-align: top; }
.tf-table thead th:first-child { border-top-left-radius: 27px; vertical-align: bottom; color: var(--v2-ink); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.tf-table thead th:last-child { border-top-right-radius: 27px; }
.tf-th__name { display: block; color: var(--v2-ink); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.tf-th__price { display: block; margin-top: 6px; color: var(--v2-ink-secondary); font-size: 14px; font-weight: 400; line-height: 1.55; }
.tf-table thead th .btn { margin-top: 18px; }
.tf-table .tf-group th { padding: 20px 16px 10px; color: var(--v2-green); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.tf-yes { color: var(--v2-green); font-size: 16px; }
.tf-no { color: var(--v2-ink-muted); }
.tf-table tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.tf-table tbody:last-of-type tr:last-child > :first-child { border-bottom-left-radius: 27px; }
.tf-table tbody:last-of-type tr:last-child > :last-child { border-bottom-right-radius: 27px; }
/* The phone and tablet header hides on scroll down; the table head follows it. */
@media (max-width: 1119px) {
  .tf-table thead th { transition: top var(--motion-duration-fast) ease; }
  body:has(.lf-header.is-hidden) .tf-table thead th { top: 0; }
}

/* 06 · Support */
.tf-sec--support { padding-top: 0; }
.tf-support { display: flex; align-items: center; gap: 40px; padding: 40px 48px; }
.tf-support__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; }
.tf-support__text p { margin: 0; color: var(--v2-ink-secondary); font-size: 16px; line-height: 1.45; }
.tf-support__actions { display: flex; flex: 0 0 300px; flex-direction: column; gap: 10px; }
.tf-support__actions img { width: 20px; height: 20px; }

/* 07 · Add-ons: a price list in two columns (column-major, as in the brief) */
.tf-pricelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 56px; margin: 0; padding: 12px 36px; }
.tf-price-row { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--v2-line); }
.tf-price-row:nth-child(4n) { border-bottom: 0; }
.tf-price-row dt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.tf-price-row__name { color: var(--v2-ink); font-size: 17px; font-weight: 600; line-height: 1.3; }
.tf-price-row__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--v2-line); text-underline-offset: 4px; }
.tf-price-row__name a:hover { text-decoration-color: currentColor; }
.tf-price-row__note { color: var(--v2-ink-secondary); font-size: 14px; line-height: 1.55; }
.tf-price-row dd { margin: 0; color: var(--v2-ink); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-align: right; white-space: nowrap; }

/* 08 · Billing: three steps */
.tf-paysteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.tf-paystep { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--v2-card); }
.tf-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--v2-lime); color: var(--v2-forest); font-size: 18px; font-weight: 600; line-height: 1.2; }

/* 09 · FAQ: native <details>, questions are H3, the first one is open */
.tf-faq { display: flex; align-items: flex-start; gap: 64px; }
.tf-faq__aside { display: flex; flex: 0 0 340px; flex-direction: column; align-items: flex-start; gap: 16px; }
.tf-faq__text { margin: 0; color: var(--v2-ink-secondary); font-size: 14px; line-height: 1.55; }
.tf-faq__list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; }
.tf-faq__item { border: 1px solid var(--v2-line); border-radius: 20px; background: var(--v2-card); }
.tf-faq__item[open] { border-color: var(--v2-lime-soft); background: var(--v2-lime-soft); }
.tf-faq__item summary { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; list-style: none; cursor: pointer; }
.tf-faq__item summary::-webkit-details-marker { display: none; }
.tf-faq__item h3 { flex: 1 1 auto; margin: 0; color: var(--v2-ink); font-size: 17px; font-weight: 600; line-height: 1.3; }
.tf-faq__sign { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--v2-sand); }
.tf-faq__item[open] .tf-faq__sign { background: var(--v2-card); }
.tf-faq__sign::before, .tf-faq__sign::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; border-radius: 1px; background: var(--v2-ink); }
.tf-faq__sign::after { transform: rotate(90deg); }
.tf-faq__item[open] .tf-faq__sign::after { display: none; }
.tf-faq__answer { padding: 0 24px 20px; margin-top: -10px; color: var(--v2-ink-secondary); font-size: var(--text-lg); line-height: 1.55; }
.tf-faq__answer p { margin: 0; }
.tf-faq__answer ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding-left: 20px; }

/* 10 · Final call: lilac panel and two columns of links */
.tf-sec--final { --tf-accent: var(--v2-lilac-ink); }
.tf-final { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 88px 80px; border-radius: 40px; background: var(--v2-lilac); text-align: center; }
.tf-final .tf-h2 { max-width: 700px; }
.tf-final__text { max-width: 700px; margin: 0; color: var(--v2-ink); font-size: 19px; line-height: 1.5; }
.tf-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tf-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; margin-top: -8px; }
.tf-more ul { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.tf-md-link { margin: -16px 0 0; font-size: 14px; line-height: 1.5; }
.tf-md-link a { color: var(--v2-ink-secondary); text-underline-offset: 3px; }

.tf-sticky { display: none; }

/* --- Tablet and small desktop (768–1279) --- */
@media (max-width: 1279px) {
  .tf-ladder__price { font-size: 20px; }
  .tf-support { flex-wrap: wrap; }
  .tf-support__actions { flex-basis: 100%; flex-direction: row; }
  .tf-faq { gap: 40px; }
  .tf-faq__aside { flex-basis: 260px; }
}
@media (max-width: 1023px) {
  .tf-steps, .tf-paysteps { grid-template-columns: minmax(0, 1fr); }
  .tf-ways { grid-template-columns: minmax(0, 1fr); }
  .tf-ladder__label { white-space: normal; }
  .tf-pricelist { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .tf-price-row:nth-child(4n) { border-bottom: 1px solid var(--v2-line); }
  .tf-price-row:last-child { border-bottom: 0; }
  .tf-faq { flex-direction: column; }
  .tf-faq__aside { flex-basis: auto; }
  .tf-faq__list { width: 100%; }
}

/* --- Phone (frame B) --- */
@media (max-width: 767px) {
  .tf-sec { padding: 0 0 56px; }
  .tf-stack { gap: 20px; }
  .tf-head, .tf-head--center { align-items: flex-start; gap: 12px; text-align: left; }
  .tf-overline--center { text-align: left; }
  .tf-card-title { font-size: 18px; }
  .tf-step { flex-direction: row; gap: 16px; padding: 21px; }
  .tf-step > div { gap: 4px; }
  .tf-step__num { flex: 0 0 34px; }
  .tf-step p, .tf-paystep p { font-size: 14px; }
  .tf-way { gap: 12px; padding: 24px 20px; border-radius: 24px; }
  .tf-way__top { align-items: flex-start; gap: 12px; }
  .tf-way .tf-tile { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; }
  .tf-way__text { font-size: 15px; }
  .tf-pill { padding: 6px 12px; font-size: 13px; }
  .tf-way__link { padding-top: 4px; font-size: 15px; }
  .tf-cta-block .btn { width: 100%; --btn-height: 48px; }
  .tf-ladder-panel { gap: 14px; padding: 20px; border-radius: 24px; }
  .tf-ladder { flex-direction: column; align-items: stretch; gap: 14px; }
  .tf-ladder__step { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; }
  .tf-ladder__price { font-size: 15px; line-height: 1.4; }
  .tf-ladder__bar { grid-column: 1 / -1; width: calc(var(--tf-share) * 100%); height: 10px; border-radius: 5px; }
  .tf-panel__note { font-size: 13px; }
  .tf-notice { align-items: flex-start; padding: 14px 16px; border-radius: 20px; font-size: 15px; }
  /* Comparison on the phone: tabs choose the plan, rows read «name — value». */
  .tf-sec--compare:has(.tf-table.is-interactive) .tf-tabs { display: flex; }
  .tf-table-wrap { padding: 8px 16px; border-radius: 24px; }
  .tf-table, .tf-table tbody, .tf-table tr { display: block; width: 100%; }
  .tf-table thead, .tf-table colgroup { display: none; }
  .tf-table tr { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v2-line); }
  .tf-table :is(th, td) { padding: 0; border: 0; background: none !important; border-radius: 0 !important; }
  .tf-table tbody th { flex: 1 1 auto; color: var(--v2-ink); font-size: 14px; font-weight: 400; line-height: 1.55; }
  .tf-table td { flex: 0 0 auto; max-width: 150px; color: var(--v2-ink-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: right; }
  .tf-table.is-interactive[data-col="advertiser"] td.tf-col-agency, .tf-table.is-interactive[data-col="agency"] td.tf-col-advertiser { display: none; }
  .tf-table:not(.is-interactive) tr { flex-wrap: wrap; }
  .tf-table:not(.is-interactive) tbody th { flex-basis: 100%; }
  .tf-table:not(.is-interactive) td { flex: 1 1 0; min-width: 0; max-width: none; text-align: left; }
  .tf-table:not(.is-interactive) td::before { content: attr(data-tf-plan); display: block; margin-bottom: 4px; font-weight: 400; }
  .tf-table .tf-group { padding: 14px 0 4px; border: 0; }
  .tf-table .tf-group th { padding: 0; }
  .tf-table tbody tr:last-child { border-bottom: 0; }
  .tf-table.is-interactive:not(.is-expanded) .tf-extra { display: none; }
  .tf-sec--compare:has(.tf-table.is-interactive) .tf-expand:not([aria-expanded="true"]) { display: inline-flex; }
  .tf-support { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px; border-radius: 24px; }
  .tf-support__actions { flex-direction: column; width: 100%; }
  .tf-pricelist { padding: 8px 19px; border-radius: 24px; }
  .tf-price-row { gap: 12px; padding: 14px 0; }
  .tf-price-row__name { font-size: 16px; }
  .tf-price-row dd { font-size: 16px; }
  .tf-paystep { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 20px; }
  .tf-paystep .tf-avatar { grid-row: span 2; }
  .tf-faq { gap: 20px; }
  .tf-faq__item summary { gap: 12px; padding: 16px; }
  .tf-faq__item h3 { font-size: 16px; }
  .tf-faq__answer { padding: 0 16px 16px; font-size: 14px; }
  .tf-final { gap: 14px; padding: 28px 20px; border-radius: 28px; text-align: left; align-items: flex-start; }
  .tf-final__text { font-size: 16px; }
  .tf-final__actions { flex-direction: column; width: 100%; }
  .tf-final__actions .btn { width: 100%; --btn-height: 48px; }
  .tf-more { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; }
  .tf-link { font-size: 16px; }
  .tf-md-link { margin-top: -4px; }
  .tf-sticky { display: block; position: fixed; inset: auto 0 0; z-index: 25; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v2-grid); background: var(--v2-cream); transform: translateY(110%); transition: transform var(--motion-duration-medium) var(--motion-ease-out); }
  .tf-sticky.is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-sticky, .tf-table thead th { transition: none; }
}