/* Тарифы — раздел сайта (#pricing): тот же фон, шапка и стеклянные панели, что у «Проектов», а заголовки и подписи на небе — как на главной:
   без теней под текстом, белый с прозрачностью, лёгкое затемнение неба. Оболочка .cp-shell и панели .cp-panel — из client-projects.css. */
.app[data-view="pricing"] .view--pricing { display: block; padding: 0; }
.app[data-view="pricing"] { padding-left: 0; background: none; }
.app[data-view="pricing"] .workspace { padding: 0; }
/* Небо с тем же мягким затемнением, что на главной (.deedoc-home__bg-layer[data-layer="sky"]). */
/* Сверху затемнение чуть сильнее: белый заголовок и подпись должны читаться на светлом небе без теней под текстом. */
body[data-view="pricing"]::before { background: linear-gradient(180deg, rgba(34, 28, 25, .26), rgba(34, 28, 25, .10) 380px, rgba(34, 28, 25, .12)), var(--ddoc-bg-day) center / cover no-repeat, #d8b1a3; }
.pricing-shell { --ease-out: cubic-bezier(.23, 1, .32, 1); }
.pricing-shell .cp-panel { margin-bottom: 0; }
.pricing-shell ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }

/* Заголовок раздела и подпись: размеры и цвет приветствия на главной, без теней. */
.pricing-shell .cp-heading { margin-bottom: 28px; color: rgba(255, 255, 255, .9); text-shadow: none; }
.pricing-shell .cp-heading h1 { margin: 0 0 12px; font-size: clamp(30px, 3.3vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.pricing-shell .cp-heading-note { max-width: 62ch; margin: 0; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.45; text-shadow: none; text-wrap: pretty; }
/* Заголовки таблицы и вопросов лежат внутри панелей: на пейзаже белый текст без тени не читался бы. */
.pricing-shell .pricing__panel-title { margin: 0; padding: 30px 32px 10px; font-size: 24px; font-weight: 450; line-height: 1.2; letter-spacing: -.025em; }
.pricing__table-wrap, .pricing__faq, .pricing__final { margin-top: 20px; }

/* Переключатель периода лежит на небе: тёмное стекло, как плашки в шапке. Белая «таблетка» едет под выбранную кнопку (её положение пишет js/pricing.js). */
.pricing__period { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; padding: 4px; border: 1px solid var(--cp-plate-line); border-radius: 999px; background: var(--cp-plate); backdrop-filter: blur(var(--ddoc-blur-glass, 20px)); -webkit-backdrop-filter: blur(var(--ddoc-blur-glass, 20px)); }
.pricing__period-pill { position: absolute; top: 0; left: 0; width: var(--w, 0); height: var(--h, 0); border-radius: 999px; background: #fff; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)); transition: transform 240ms var(--ease-out), width 240ms var(--ease-out), opacity 160ms ease; pointer-events: none; }
.pricing__period.has-pill .pricing__period-pill { opacity: 1; }
.pricing__period button { position: relative; z-index: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .82); font: inherit; font-size: 14px; cursor: pointer; transition: color 160ms ease, transform 160ms var(--ease-out); }
.pricing__period button:active { transform: scale(.97); }
.pricing__period button.is-active { color: #1f1d18; }
.pricing__period:not(.has-pill) button.is-active { background: #fff; }
.pricing__period button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pricing__period button:not(.is-active):hover { color: #fff; } }

.pricing__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.plan { position: relative; display: flex; flex-direction: column; padding: 32px; }
.plan h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.plan__badge { position: absolute; top: 28px; right: 28px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 12px; font-weight: 600; }
.plan__price strong, .plan__price span, .plan__hint { transition: opacity 140ms ease, filter 140ms ease; }
.plan.is-swapping .plan__price strong, .plan.is-swapping .plan__price span, .plan.is-swapping .plan__hint { opacity: .25; filter: blur(3px); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; }
.plan__price strong { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--cv-muted); font-size: 16px; }
.plan__hint { margin: 0 0 24px; color: var(--cv-muted); font-size: 14px; line-height: 1.4; }
.plan__list { display: grid; flex: 1; align-content: start; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.plan__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.4; }
.plan__list li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10.5 4 4 8-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10.5 4 4 8-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pricing-shell .plan__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; font-size: 15px; }
.pricing-shell .plan__cta:disabled, .pricing-shell .plan__cta:disabled:hover, .pricing-shell .plan__cta:disabled:active { transform: none; cursor: not-allowed; }
.plan__soon { margin: 12px 0 0; color: var(--cv-muted); font-size: 13px; text-align: center; }

/* Pro — такая же белая карточка, как бесплатная; главной её делает плашка и чёрная кнопка. Пока оплаты нет, кнопка выключена, но остаётся тёмной и читаемой. */
.plan--pro .plan__badge { background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-theme="dark"] .plan--pro .plan__badge { color: #ffd9cb; }
.pricing-shell .plan--pro .plan__cta:disabled { opacity: .9; }

.pricing__table-wrap { padding: 0; overflow-x: auto; }
.pricing__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pricing__table th, .pricing__table td { padding: 16px 28px; border-bottom: 1px solid var(--cv-line); text-align: left; vertical-align: top; line-height: 1.35; }
.pricing__table thead th { color: var(--cv-muted); font-size: 13px; font-weight: 600; }
.pricing__table tbody th { font-weight: 400; }
.pricing__table td { width: 24%; font-variant-numeric: tabular-nums; }
.pricing__table tr:last-child th, .pricing__table tr:last-child td { border-bottom: 0; }

.pricing__faq { padding: 0 32px 4px; }
.pricing-shell .pricing__faq .pricing__panel-title { padding-inline: 0; }
.pricing__faq details { border-bottom: 1px solid var(--cv-line); }
.pricing__faq details:last-child { border-bottom: 0; }
.pricing__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 20px 0; font-size: 17px; font-weight: 500; line-height: 1.3; list-style: none; cursor: pointer; }
.pricing__faq summary::-webkit-details-marker { display: none; }
.pricing__faq summary::after { content: "+"; flex: none; color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; transition: transform 200ms var(--ease-out); }
.pricing__faq details[open] summary::after { transform: rotate(45deg); }
.pricing__faq summary { transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .pricing__faq summary:hover { color: var(--accent); } }
/* Ответ раскрывается по высоте там, где браузер это умеет (Chrome, Edge, Safari 18+); в остальных — мгновенно, как раньше. */
@supports (interpolate-size: allow-keywords) {
  .pricing__faq { interpolate-size: allow-keywords; }
  .pricing__faq details::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete; }
  .pricing__faq details[open]::details-content { block-size: auto; }
}
.pricing__faq p { max-width: 68ch; margin: -4px 0 22px; color: var(--cv-muted); font-size: 15px; line-height: 1.55; }
.pricing__faq a { color: var(--accent); }

.pricing__final { display: grid; justify-items: center; gap: 10px; padding: 56px 24px; text-align: center; }
.pricing-shell .pricing__final h2 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: -.03em; }
.pricing__final p { margin: 0 0 16px; color: var(--cv-muted); font-size: 16px; }
.pricing-shell .pricing__final .plan__cta { width: auto; min-width: 240px; }

@media (max-width: 760px) {
  .pricing__cards { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 26px 22px; }
  .plan__badge { position: static; align-self: flex-start; margin-bottom: 10px; }
  .pricing__table th, .pricing__table td { padding: 12px 14px; font-size: 14px; }
  .pricing__table td { width: auto; }
  .pricing__faq { padding: 2px 22px; }
  .pricing-shell .pricing__panel-title { padding: 24px 22px 8px; font-size: 22px; }
  .pricing-shell .pricing__faq .pricing__panel-title { padding-inline: 0; }
  .pricing__final { padding: 40px 20px; }
}
@media (max-width: 480px) {
  /* Переключатель периода: две равные кнопки с переносом текста, а не пилюля, которая ломается в две строки. */
  .pricing__period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 24px; }
  .pricing__period button { min-height: 48px; padding: 6px 12px; border-radius: 20px; font-size: 13px; line-height: 1.2; text-align: center; }
  .pricing__table th, .pricing__table td { padding: 10px 8px; font-size: 13px; }
  .pricing__table thead th { font-size: 12px; }
  .plan__price strong { font-size: 40px; }
  .pricing-shell .cp-heading-note { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing__period-pill, .pricing__period button, .pricing__faq summary::after, .pricing__faq details::details-content { transition: none; }
  .plan.is-swapping .plan__price strong, .plan.is-swapping .plan__price span, .plan.is-swapping .plan__hint { filter: none; }
}
.pricing__table td[rowspan] { vertical-align: middle; }