/* Focused visual and accessibility polish layered after the legacy override stack. */
:where(html, body) {
  max-width: 100%;
  overflow-x: clip;
}

:where(.subscription-hero, .subscription-benefits, .subscription-plans-section,
  .subscription-comparison-section, .subscription-faq-section) {
  min-width: 0;
  overflow-x: clip;
}

:where(.subscription-hero-inner, .subscription-hero-grid, .subscription-hero-copy,
  .subscription-hero-aside, .subscription-benefit-grid, .subscription-section-header,
  .subscription-plan-grid, .subscription-plan, .subscription-faq-layout) {
  min-width: 0;
  max-width: 100%;
}

.subscription-hero-copy,
.subscription-hero-aside {
  width: auto !important;
}

.subscription-hero-copy h1,
.subscription-section-header h2,
.subscription-plan h3,
.subscription-plan p,
.subscription-plan li {
  overflow-wrap: anywhere;
}

/* The desktop composition is too wide for tablet viewports. Reflow it before
   the legacy 980px breakpoint so headings and cards never sit outside the viewport. */
@media (min-width: 981px) and (max-width: 1199px) {
  .subscription-hero-grid,
  .subscription-section-header {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  .subscription-hero-aside {
    max-width: 660px;
  }

  .subscription-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .subscription-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .subscription-benefit-grid,
  .subscription-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .subscription-hero-grid,
  .subscription-section-header,
  .subscription-faq-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 680px) {
  .subscription-benefit-grid,
  .subscription-plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .subscription-hero-grid,
  .subscription-section-header,
  .subscription-faq-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Pricing is information-dense by nature. Preserve a calm editorial rhythm
   instead of letting the table's minimum widths push the CTA into the price. */
.pricing-layout,
.pricing-direction-list,
.pricing-direction,
.pricing-category,
.pricing-service-list,
.pricing-service-item,
.pricing-options,
.pricing-option-row {
  min-width: 0;
}

.pricing-service-item-options .pricing-service-copy {
  max-width: none;
}

.pricing-options-dependency .pricing-options-head,
.pricing-options-dependency .pricing-option-row {
  grid-template-columns:
    minmax(220px, 1.15fr)
    minmax(250px, 1fr)
    minmax(210px, 0.9fr) !important;
  gap: 14px !important;
}

.pricing-options-dependency .pricing-option-name-wide {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--outline-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.pricing-options-dependency .pricing-option-depends {
  grid-column: 1;
  grid-row: 2;
}

.pricing-options-dependency .pricing-option-value {
  grid-column: 2;
  grid-row: 2;
}

.pricing-options-dependency .pricing-option-includes {
  grid-column: 3;
  grid-row: 2;
}

.pricing-options-dependency .pricing-option-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding-left: 14px;
}

.pricing-options-dependency .pricing-option-value-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.pricing-options-dependency .pricing-option-value .pricing-request-link {
  flex: 0 0 108px;
  align-self: center;
}

.pricing-options-dependency .pricing-option-value strong,
.pricing-options-dependency .pricing-option-value em,
.pricing-options-dependency .pricing-option-value .pricing-request-link {
  max-width: 100%;
  overflow-wrap: normal;
}

.pricing-options-dependency .pricing-option-value strong {
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  letter-spacing: -0.02em;
}

.pricing-options-dependency .pricing-request-link-compact {
  margin-top: 2px;
  width: 108px;
  min-width: 108px;
  inline-size: 108px;
  padding-inline: 10px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

html[data-theme="light"] .pricing-hero h1 {
  color: var(--text, #17344b) !important;
  opacity: 1 !important;
  filter: none !important;
}

@media (max-width: 680px) {
  .pricing-page-inner > .pricing-hero {
    padding-block: 26px 34px !important;
  }

  .pricing-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.3rem) !important;
    line-height: 0.98 !important;
  }

  .pricing-options-dependency .pricing-option-value {
    flex-wrap: wrap;
    padding-left: 0;
  }

  .pricing-options-dependency .pricing-option-value-copy {
    flex-basis: calc(100% - 122px);
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  /* At this width a persistent sidebar steals the exact space needed by the
     four-column pricing matrix. Move it above the content instead of letting
     the matrix overflow and clip its action column. */
  .pricing-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
  }

  .pricing-toc,
  .pricing-direction-list {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .pricing-category-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .pricing-category-nav a {
    min-height: 48px;
  }

  .pricing-layout {
    min-width: 0;
  }
}

@media (max-width: 980px) {
  .pricing-options-dependency .pricing-option-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .pricing-options-dependency .pricing-option-name,
  .pricing-options-dependency .pricing-option-details:not(.pricing-option-includes),
  .pricing-options-dependency .pricing-option-value,
  .pricing-options-dependency .pricing-option-includes {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .pricing-options-dependency .pricing-option-value {
    width: 100%;
    min-height: 0;
    align-items: center;
    border-top: 1px solid var(--outline-soft);
    border-left: 0;
    padding: 14px 0 0;
  }

  .pricing-options-dependency .pricing-option-includes {
    border-left: 0;
    padding: 4px 0 0;
  }

  .pricing-options-dependency .pricing-option-details:not(.pricing-option-includes) {
    padding-left: 0;
  }

  .pricing-options-dependency .pricing-option-value {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    padding-left: 0;
  }

  .pricing-options-dependency .pricing-option-value::before {
    display: none;
  }

  .pricing-options-dependency .pricing-request-link-compact {
    width: auto;
    min-width: 96px;
    white-space: nowrap;
    word-break: keep-all;
  }
}

/* Tablet pricing matrix: turn the dependency table into readable two-column
   records before it reaches the point where four columns become cramped. */
@media (min-width: 981px) and (max-width: 1199px) {
  .pricing-options-dependency .pricing-options-head {
    display: none;
  }

  .pricing-options-dependency .pricing-option-row {
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr) !important;
    gap: 18px 28px !important;
    min-height: 0;
    padding: 20px 22px !important;
  }

  .pricing-options-dependency .pricing-option-details:not(.pricing-option-includes) {
    grid-column: 1;
    grid-row: 2;
    padding-left: 0;
  }

  .pricing-options-dependency .pricing-option-name-wide {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .pricing-options-dependency .pricing-option-details:not(.pricing-option-includes)::before,
  .pricing-options-dependency .pricing-option-includes::before {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-strong);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pricing-options-dependency .pricing-option-details:not(.pricing-option-includes)::before {
    content: "Від чого залежить ціна";
  }

  .pricing-options-dependency .pricing-option-value {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    min-height: 92px;
    justify-content: center;
    border-left: 1px solid var(--outline-soft);
    padding-left: 24px;
  }

  .pricing-options-dependency .pricing-option-includes {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 14px 0 0;
    border-left: 0;
  }

  .pricing-options-dependency .pricing-option-includes::before {
    content: "Що входить";
  }
}

/* Make the page read as a premium service catalogue, not a spreadsheet. */
.pricing-direction-header,
.pricing-category header {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.055), transparent 72%);
}

.pricing-direction-header {
  padding: 24px 22px 18px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-bottom: 0;
}

.pricing-category header {
  padding: 16px 18px 13px;
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  border-bottom-color: rgba(var(--primary-rgb), 0.3);
}

.pricing-service-item {
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.07);
}

.pricing-request-link {
  min-width: 96px;
  min-height: 38px;
  border-radius: 4px;
  background: var(--primary-deep) !important;
  color: var(--on-primary) !important;
  box-shadow: 0 8px 18px rgba(var(--ink-rgb), 0.16);
}

.pricing-request-link:hover,
.pricing-request-link:focus-visible {
  background: var(--primary-strong) !important;
  color: var(--on-primary) !important;
  transform: translateY(-1px);
}

/* Pricing redesign: an editorial service catalogue with fewer visual seams,
   clearer hierarchy and a calmer action column. */
.pricing-page-inner {
  --catalog-border: rgba(var(--primary-rgb), 0.18);
  --catalog-muted-border: rgba(var(--primary-rgb), 0.11);
}

.pricing-page-inner > .pricing-hero {
  max-width: 980px;
  padding-block: clamp(28px, 5vw, 64px) clamp(42px, 7vw, 84px);
  border-bottom: 0;
}

.pricing-hero h1 {
  max-width: 900px;
  font-size: clamp(2.35rem, 5.1vw, 4.65rem);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.pricing-hero > div > span {
  max-width: 650px;
  margin-top: 22px;
}

.pricing-decision-panel {
  border: 1px solid var(--catalog-border);
  border-radius: 12px;
  padding: clamp(22px, 3.4vw, 38px);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent 42%),
    rgba(var(--surface-container-rgb), 0.32);
}

.pricing-decision-grid {
  border: 1px solid var(--catalog-muted-border);
  border-radius: 8px;
}

.pricing-decision-card,
.pricing-format-card {
  background: rgba(var(--surface-lowest-rgb), 0.28);
}

.pricing-layout {
  gap: clamp(28px, 4vw, 52px);
}

.pricing-toc {
  top: 94px;
  z-index: 2;
}

.pricing-category-nav {
  gap: 5px;
}

.pricing-category-nav a {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.pricing-category-nav a:hover,
.pricing-category-nav a:focus-visible,
.pricing-category-nav a.is-active {
  border-color: var(--catalog-border);
  background: rgba(var(--primary-rgb), 0.1);
  box-shadow: none;
  transform: none;
}

.pricing-direction-list {
  gap: clamp(56px, 7vw, 96px);
}

.pricing-direction-header {
  border: 1px solid var(--catalog-border);
  border-radius: 12px 12px 0 0;
  padding: clamp(20px, 3vw, 30px);
  background:
    linear-gradient(110deg, rgba(var(--primary-rgb), 0.1), transparent 70%),
    rgba(var(--surface-container-rgb), 0.24);
}

.pricing-category-list {
  gap: 28px;
}

.pricing-category header {
  border: 0;
  border-bottom: 1px solid var(--catalog-muted-border);
  padding: 8px 4px 14px;
  background: transparent;
}

.pricing-service-list {
  gap: 10px;
}

.pricing-service-item {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  gap: 28px;
  border-color: var(--catalog-muted-border);
  border-radius: 10px;
  padding: clamp(18px, 2.3vw, 26px);
  background: rgba(var(--surface-lowest-rgb), 0.34);
  box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.055);
}

.pricing-service-item:hover {
  border-color: rgba(var(--primary-rgb), 0.36);
  background: rgba(var(--surface-lowest-rgb), 0.58);
  transform: translateY(-2px);
}

.pricing-service-price {
  min-width: 0;
  align-content: center;
  justify-items: end;
  padding-left: 22px;
}

.pricing-service-price > strong {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
}

.pricing-service-item-options {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pricing-service-item-options .pricing-service-copy {
  margin-bottom: 14px;
}

.pricing-options {
  border-color: var(--catalog-border);
  border-radius: 10px;
  background: rgba(var(--surface-lowest-rgb), 0.34);
}

.pricing-options-head {
  background: rgba(var(--primary-rgb), 0.08);
}

.pricing-option-row {
  background: transparent;
}

.pricing-option-row:hover {
  background: rgba(var(--primary-rgb), 0.06);
}

:where(section[id], [id="top"]) {
  scroll-margin-top: 88px;
}

/* Keep the graphite / ivory / bronze direction consistent across both themes. */
html[data-theme="light"] body {
  --surface-copy: #53616a;
  --surface-heading: #18222a;
  --surface-accent: #8a5d3c;
}

/* The photographic hero is atmospheric; the content is the primary message. */
.hero .media-overlay {
  background:
    linear-gradient(90deg, rgba(8, 13, 16, 0.96) 0%, rgba(8, 13, 16, 0.84) 34%, rgba(8, 13, 16, 0.32) 76%, rgba(8, 13, 16, 0.12) 100%),
    linear-gradient(180deg, rgba(8, 13, 16, 0.14), rgba(8, 13, 16, 0.46));
}

.hero .hero-title,
.hero .hero-brand,
.hero .hero-title-main {
  text-wrap: balance;
}

.hero p {
  color: rgba(246, 242, 234, 0.86);
  text-wrap: pretty;
}

.hero .action-row {
  align-items: center;
}

@media (max-width: 680px) {
  .hero {
    min-height: 730px;
    padding-top: 132px;
    padding-bottom: 112px;
  }

  .hero-media img {
    object-position: 73% center;
    transform: scale(1.04);
  }

  .hero .media-overlay {
    background:
      linear-gradient(180deg, rgba(8, 13, 16, 0.58) 0%, rgba(8, 13, 16, 0.72) 38%, rgba(8, 13, 16, 0.94) 100%),
      linear-gradient(90deg, rgba(8, 13, 16, 0.76) 0%, rgba(8, 13, 16, 0.24) 100%);
  }

  .hero h1 {
    max-width: 22rem;
    font-size: clamp(2.2rem, 10.2vw, 3rem);
    line-height: 1.06;
  }

  .hero p {
    max-width: 31rem;
    margin-top: 20px;
    color: rgba(246, 242, 234, 0.9);
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero .action-row {
    gap: 12px;
    margin-top: 26px;
  }

  .hero .text-link {
    min-height: 48px;
    justify-content: center;
    border-color: rgba(246, 242, 234, 0.44);
    color: #f6f2ea;
  }

  .site-header {
    background: rgba(11, 24, 34, 0.94);
  }

  .brand {
    font-size: 1.12rem;
  }

  .brand-logo {
    width: 39px;
    height: 42px;
  }

  .section-copy > p + p {
    margin-top: 18px;
  }

  .section-copy > p {
    line-height: 1.68;
  }

  .service-package-card,
  .doubt-item,
  .reason-item,
  .workflow-step-surface {
    box-shadow: 0 10px 22px rgba(8, 13, 16, 0.1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-media img {
    transform: none;
  }
}