/* =============================================================================
   Секция „Нива на достъп" (Figma 1:510 „Frame 40"), четено на живо
   2026-07-29. Заглавен ред (eyebrow + H2 48 със златен Light Italic
   акцент), 3 карти 422.67×527 (тъмна карта, радиус 32, padding 20, вълнови
   декори долу), после широка „Годишна програма" (979, padding 24) +
   „Няма грешен избор" (331, padding 14).
   НАРОЧНО ПРОПУСНАТО: скритият текст „150 € без ДДС" с alpha 0 в
   безплатната карта (подравнителен хак в дизайна) — тук подравняването
   е през празна price клетка. Featured картата носи оранжевото сияние.
   Копи корекции „ти": „Изберете"→„Избери", „пред Вас"→„пред теб",
   „Свържете се"→„Свържи се" (×2). Бутоните Disabled/сиви са буквален
   импорт (дефектът е докладван на дизайн екипа).
   Дребен компромис: вълновите декори са с уеднаквени позиции в трите
   карти (в дизайна се разместват с по ~20px). Mobile: разумен пас.
   ============================================================================= */
.tiers {
  padding: var(--space-16) 0; /* дизайн 15:1956: pt-64 + pb-64 */
}

.tiers-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.tiers-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* дизайн: 24px */
  padding-bottom: var(--space-8); /* дизайн: 32px */
}

.tiers-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4; /* caption-XL → ред 20px */
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
}

.tiers-heading {
  margin: 0;
  max-width: 47.3125rem; /* 757px */
  font-family: var(--font-display);
  font-weight: 300;   /* Argent CF Light; placeholder-ът няма 300 — стойността е точната от дизайна */
  font-size: var(--text-4xl);
  line-height: 1.2;
  color: var(--color-white);
}

.tiers-accent {
  font-style: italic;
  font-weight: 300;
  color: var(--color-gold);
}

/* --- Трите карти ---------------------------------------------------------- */
.tiers-grid {
  display: flex;
  align-items: stretch;  /* дизайн: карта 1 е 554 при съдържание 410 */
  justify-content: space-between;
  gap: var(--space-4);          /* 16px */
  padding-bottom: var(--space-6); /* 24px */
}

.tier {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  overflow: clip;
}

/* Вълновите декори в долната част на картите */
/* Вълните са ЕДИН експорт на карта (Figma 15:1968 „Group 4"): трите форми са
   слети с 50px размазване в самия SVG. Групата стои на left −34.33 / top 393
   в картата, а изображението вътре излиза с −20.39% / −21.81% от нея, което
   дава 690.336 × 658.5 на позиция −134.31 / 293 спрямо картата. */
.tier-waves {
  position: absolute;
  left: -8.394rem;   /* −134.31px */
  top: 18.3125rem;   /*  293px */
  width: 43.146rem;  /*  690.336px */
  height: 41.156rem; /*  658.5px */
  background: url("../../img/tiers-waves-a.svg") no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Третата карта носи собствен експорт (различно разположение на формите) */
.tiers-grid > .tier:last-child .tier-waves {
  background-image: url("../../img/tiers-waves-b.svg");
}

.tier-waves-wide {
  /* дизайн 15:2110: групата е на x=24 / y=177 и е 1308 × 362 */
  left: 1.5rem;
  top: 11.0625rem; /* 177px */
  width: 81.75rem; /* 1308px */
  height: 22.625rem; /* 362px */
  background-image: url("../../img/tiers-wave-wide.svg");
}

.tier-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* дизайн 15:1972: 24px */
  height: 100%;
  padding: var(--space-6); /* дизайн: 24px */
}

.tier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.tier-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300; /* Argent CF Light */
  font-size: var(--text-3xl); /* дизайн: 32px */
  line-height: 1.05;
  color: var(--color-white);
}

.tier-badge {
  display: grid;
  place-items: center;
  padding: 0.375rem; /* дизайн: 6px */
  background: color-mix(in srgb, var(--color-gold) 76%, transparent);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.tier-badge-corner {
  position: absolute;
  top: var(--space-6);   /* дизайн: 24px */
  right: var(--space-6);
  z-index: 1;
}

.tier-price {
  margin: 0;
  margin-top: -0.75rem; /* 24 → 12 между заглавието и цената */
  font-family: var(--font-display);
  font-weight: 300; /* Argent CF Light */
  font-size: var(--text-2xl); /* дизайн: 24px */
  line-height: 1.05;
  color: var(--color-white);
}

/* Безплатната карта няма ценови възел в дизайна — клетката просто отпада */
.tier-price[aria-hidden="true"] {
  display: none;
}

/* Годишната карта: зачертана стара цена + актуална (дизайн 15:2119) */
.tier-price-row {
  display: flex;
  align-items: center;
  gap: 0.8125rem; /* 13px */
}

.tier-price-old {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.tier-desc {
  margin: 0;
  /* дизайн 15:1973: заглавие →12→ цена →16→ описание при общ ритъм 24 */
  margin-top: -0.5rem;
  font-size: var(--text-lg);
  font-weight: 400; /* Jost Regular */
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

.tier-annual .tier-desc,
.tier-note .tier-desc {
  font-size: var(--text-body-l); /* дизайн: 17px */
}

.tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 3rem; /* дизайн: 48px */
}

.tier-cta-dark {
  background: var(--surface-action-dark);
  border-color: transparent;
  color: var(--color-white);
}

.tier-cta-muted {
  background: var(--surface-action-dark); /* дизайн 15:2081: #474a52 */
  border-color: transparent;
  color: var(--color-white);
}

.tier-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* дизайн 15:1982: 8px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3); /* дизайн 15:1983: 12px */
  font-size: var(--text-body-l); /* 17px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

.tier-features li img {
  flex-shrink: 0;
  margin-top: 0.375rem; /* дизайн: 6px */
}

/* --- Долният ред: годишната програма + „Няма грешен избор" ---------------- */
.tiers-bottom {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.375rem; /* дизайн: 22px */
}

.tier-annual {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  width: 73.5%; /* дизайн: 979 от 1332 */
  flex: none;
  padding: var(--space-6); /* дизайн: 24px */
}

.tier-annual-info {
  position: relative;
  display: flex;
  flex-direction: column;
  /* дизайн 15:2114: инфо блок 164 + бутон 48 в 286px → space-between */
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
  max-width: 29.9375rem; /* 479px */
}

.tier-annual-info .tier-price-row {
  margin-top: -0.25rem; /* 16 → 12 между заглавието и цената */
}

.tier-annual-features {
  position: relative;
  max-width: 24.625rem; /* 394px */
  align-self: flex-start; /* дизайн 15:2109: items-start */
  gap: 0.5625rem;         /* годишният списък е единственият с 9px */
}

.tier-annual-features li {
  gap: var(--space-2);       /* 8px */
  font-size: var(--text-lg); /* 18px */
}

.tier-note {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 0;
  padding: var(--space-6); /* дизайн 15:2164: 24px */
}

.tier-note .tier-title {
  margin-bottom: var(--space-2); /* дизайн 15:2166: 8px */
}

/* --- Mobile (разумен пас, без Figma вариант) ------------------------------ */
@media (max-width: 64em) {
  .tiers-grid,
  .tiers-bottom,
  .tier-annual {
    flex-direction: column;
  }

  .tier-annual {
    width: 100%;
  }

  .tier-annual-info,
  .tier-annual-features {
    max-width: none;
  }

  .tier-annual-features {
    align-self: stretch;
  }

  .tiers-heading {
    font-size: var(--text-3xl);
  }

  .tier-price {
    min-height: 0;
  }

  .tier-price[aria-hidden="true"] {
    display: none;
  }
}