/* v2-pricing.css — компоненты блоков «Цены», «Кому подходит», «Сравнение», FAQ
   главной страницы. Вынесено отдельным файлом: static/v2.css параллельно правит
   другой инженер, пересечений быть не должно.

   Круг 2 (DEFECTS-2 A3/B1–B6). Что изменилось по сравнению с прошлой версией:

   A3 — жёстких прямоугольных рамок в этом файле больше нет. Карточка = мягкая
        заливка + скругление var(--r); «выделенная» карточка = белая бумага +
        волосяная акцентная граница + мягкая тень. FAQ — не коробки, а список с
        разделителями. Приём снят с claude.com/pricing (карточка на подложке,
        крупный радиус, граница почти невидима) и chatgpt.com/pricing (там рамок
        нет вовсе, тарифы разделены только воздухом).

   B1/B2 — тарифы и кейсы в одной грамматике: чип-ярлык → имя → строка «для
        кого» → цена → CTA во всю ширину → разделитель → перечень с иконками.
        Порядок и типографика — по claude.com/pricing.

   B6 — эмодзи и текстовые «✓» в разметке заменены на SVG-иконки, вставленные
        через CSS mask: цвет наследуется от currentColor, поэтому один и тот же
        значок работает и на светлом, и на тёмном фоне. Набор ровно из пяти:
        галочка, минус, точка, искра (AI), колокол (мониторинг).

   A2 — три уровня подачи вместо одного: приглушённая заливка (обычное),
        белая бумага + акцент (рекомендуемое/наш профиль), тёмная полоса
        (подписка). Ярлыки-чипы носят смысловой цвет. */

/* ------------------------------------------------------- 0. Иконки-маркеры */

/* Один механизм на все маркеры: псевдоэлемент с mask-image, цвет — фоном.
   Меняется только --icon. Никаких эмодзи и текстовых глифов в разметке. */
:root {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.6l3.4 3.4 7.6-7.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10h11' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%23000'/%3E%3C/svg%3E");
  --icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.6l1.7 4.7 4.7 1.7-4.7 1.7L10 15.4l-1.7-4.7-4.7-1.7 4.7-1.7z' fill='%23000'/%3E%3C/svg%3E");
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3a4.4 4.4 0 0 0-4.4 4.4c0 3.5-1.1 4.6-1.6 5.1a.6.6 0 0 0 .4 1h11.2a.6.6 0 0 0 .4-1c-.5-.5-1.6-1.6-1.6-5.1A4.4 4.4 0 0 0 10 3z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.4 16a1.8 1.8 0 0 0 3.2 0' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Чип-ярлык: одна форма для всех ярлыков категорий в тарифах и кейсах.
   Мягкая заливка вместо голого mono-текста — так ярлык читается как метка,
   а не как обрывок абзаца. */
.tagchip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: .375rem .5rem;
  border-radius: var(--r-pill);
  color: var(--muted-2);
  background: rgba(14, 14, 16, .06);
}
.tagchip-accent { color: var(--accent-ink); background: rgba(11, 132, 224, .10); }
.tagchip-ok     { color: var(--ok);        background: rgba(47, 122, 77, .10); }
.tagchip-warn   { color: var(--warn);      background: rgba(154, 106, 18, .12); }

/* Микрозаголовок внутри карточки: «Что входит», «Что обычно находим».
   Отбивается волосяным разделителем — не рамкой. */
.microlabel {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: .875rem;
  margin: 0 0 .75rem;
}

/* ---------------------------------------------------------------- 1. Тарифы */

.ptable {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  margin: 2rem 0 1.5rem;
}

/* Обычный тариф: мягкая подложка, скругление, без границы (приём
   chatgpt.com/pricing — тарифы разделены воздухом, а не рамками). */
.ptier {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
}

/* Рекомендуемый: белая бумага поверх подложки + волосяная акцентная граница и
   мягкая тень (приём claude.com/pricing). Ни слова про «популярный выбор». */
.ptier-feature {
  background: var(--paper);
  border-color: rgba(11, 132, 224, .34);
  box-shadow: 0 1px 2px rgba(14, 14, 16, .04), 0 12px 32px rgba(11, 132, 224, .09);
}

.ptier-badge { margin: 0 0 .875rem; min-height: 1.6em; }
/* Пустой ярлык у обычных тарифов — держит базовую линию заголовков. */
.ptier-badge:empty { visibility: hidden; }
.ptier-badge:empty::before { content: "\00a0"; }

.ptier-name {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .375rem;
  color: var(--ink);
}

.ptier-for {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--muted-2);
  margin: 0 0 1.25rem;
  min-height: 2.9em; /* три цены выравниваются по одной линии */
  max-width: none;
}

.ptier-price {
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 .375rem;
  font-variant-numeric: tabular-nums;
}
.ptier-price .ptier-unit {
  display: block;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: .5rem;
}
.ptier-note {
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 1.25rem;
  min-height: 2.8em;
  max-width: none;
}

/* CTA во всю ширину карточки — как в обоих эталонах. */
.ptier-cta {
  align-self: stretch;
  text-align: center;
  border-radius: var(--r-sm);
  margin: 0 0 1.5rem;
}
.ptier .ptier-cta:last-child { margin-bottom: 0; }
/* На мягкой подложке прозрачная кнопка растворяется — даём ей бумагу. */
.ptier .btn-ghost { background: var(--paper); }
.ptier-feature .btn-ghost { background: var(--paper-2); }

/* Перечень — всегда на виду (аккордеон здесь запрещён). */
.ptier-feats-label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin: 0 0 .875rem;
}
.ptier-feats {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  max-width: none;
  font-size: .9375rem;
  line-height: 1.45;
}
.ptier-feats li {
  position: relative;
  padding: 0 0 .625rem 1.625rem;
  color: var(--text);
  --icon: var(--icon-check);
}
.ptier-feats li::before {
  content: "";
  position: absolute;
  left: -.0625rem;
  top: .2em;
  width: 1.0625rem;
  height: 1.0625rem;
  background-color: var(--ok);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
/* Чего нет в тарифе — тем же списком, но нейтрально: это тоже различие. */
.ptier-feats li.is-out { color: var(--muted); --icon: var(--icon-minus); }
.ptier-feats li.is-out::before { background-color: var(--muted); }

/* Довески рекомендуемого тарифа: свои иконки вместо эмодзи (B6). */
.ptier-extra {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: auto;
}
.ptier-extra p {
  position: relative;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted-2);
  margin: 0 0 .625rem;
  padding-left: 1.625rem;
  max-width: none;
}
.ptier-extra p::before {
  content: "";
  position: absolute;
  left: -.0625rem;
  top: .1em;
  width: 1.0625rem;
  height: 1.0625rem;
  background-color: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ptier-extra .x-ai   { --icon: var(--icon-spark); }
.ptier-extra .x-bell { --icon: var(--icon-bell); }
.ptier-extra p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ 2. Мониторинг (подписка) */

/* Другой тип предложения: тёмная полоса, горизонтальная композиция,
   ярлык подписки — визуально не «четвёртая карточка». */
.psub {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r);
  padding: 2rem 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  margin: 0 0 1.5rem;
}
.psub h3 { color: var(--on-dark); font-size: 1.5rem; margin: .875rem 0 .75rem; }
.psub p { color: var(--on-dark-muted); max-width: 46ch; }
.psub .psub-price {
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--on-dark);
  margin: 1.25rem 0 .5rem;
  font-variant-numeric: tabular-nums;
}
.psub .psub-price .ptier-unit {
  display: inline;
  font-size: 1rem;
  color: var(--on-dark-muted);
  letter-spacing: 0;
  margin: 0;
}
.psub-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: .375rem .5rem;
  border-radius: var(--r-pill);
  color: var(--on-dark);
  background: rgba(242, 242, 240, .14);
}
.psub .ptier-feats-label { color: var(--on-dark-muted); border-top-color: var(--rule-dark); }
.psub .ptier-feats li { color: var(--on-dark); }
.psub .ptier-feats li::before { background-color: #6fc292; }
.psub .ptier-feats li.is-out { color: var(--on-dark-muted); }
.psub .ptier-feats li.is-out::before { background-color: var(--on-dark-muted); }
.psub .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .75rem; }
.psub .btn { border-radius: var(--r-sm); }
.psub-foot { font-size: .8125rem; color: var(--on-dark-muted); margin: 0; }

/* Перечень с галочками в баннере бюджетного сегмента: те же иконки, что в
   тарифах, вместо текстовых «✓» в разметке (B6). */
.list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.list-check li {
  position: relative;
  padding: .4375rem 0 .4375rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  --icon: var(--icon-check);
}
.list-check li:last-child { border-bottom: 0; }
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 1.0625rem;
  height: 1.0625rem;
  background-color: var(--ok);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ------------------------------------------- 3. «Кому подходит» — use-cases */

/* Единая грамматика с тарифами: та же подложка, тот же радиус, те же чипы и
   иконки. Ярлыки всех карточек отвечают на один вопрос — что нужно этому
   сегменту (B3), поэтому карточки сравнимы между собой. */
.ucases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 1rem;
  /* Карточки в ряду одной высоты. Раньше стояло align-items:start, чтобы под
     короткой карточкой не было пустой заливки, но рваный нижний край ряда
     читается хуже, чем лишний фон (решение фаундера 09.09.2026). */
  align-items: stretch;
}
.ucase {
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 1.25rem 1.25rem 1.125rem;
  display: flex;
  flex-direction: column;
}
/* Наш профильный сегмент с отдельным тарифом (B4): подача как у
   рекомендуемого тарифа — белая бумага, акцентная волосяная граница.
   Стоит внутри общей сетки, а не отдельной плашкой-сноской под ней. */
.ucase-segment {
  grid-column: 1 / -1;
  background: var(--paper);
  border-color: rgba(11, 132, 224, .34);
  box-shadow: 0 1px 2px rgba(14, 14, 16, .04), 0 12px 32px rgba(11, 132, 224, .09);
}
/* Кейс, где базы мало, — другой смысловой оттенок, а не другая вёрстка. */
.ucase-warn { background: rgba(154, 106, 18, .06); }
.ucase-badge { margin: 0; }
.ucase h3 { font-size: 1.0625rem; line-height: 1.3; margin: .75rem 0 .375rem; }
.ucase > p { font-size: .875rem; line-height: 1.45; max-width: none; margin: 0 0 .875rem; }
.ucase .microlabel { padding-top: .75rem; }
.ucase-list {
  list-style: none;
  margin: 0 0 .875rem;
  padding: 0;
  max-width: none;
  font-size: .875rem;
  line-height: 1.4;
}
.ucase-list li { position: relative; padding: 0 0 .4375rem 1.25rem; --icon: var(--icon-dot); }
.ucase-list li::before {
  content: "";
  position: absolute;
  left: -.1875rem;
  top: .12em;
  width: .875rem;
  height: .875rem;
  background-color: var(--muted);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ucase > :last-child { margin-bottom: 0; }
.ucase-cta { font-size: .875rem; }

/* ------------------------------- 4. Панель «когда базового недостаточно» (B5) */

/* Было: заголовок, под ним список в две колонки, а форма со своим mono-
   заголовком висела на третьем уровне и не совпадала ни с чем. Стало: две
   колонки одной высоты, обе начинаются с микрозаголовка на одной линии,
   форма — вложенная поверхность на бумаге. */
.upanel {
  background: var(--paper-2);
  border-radius: var(--r);
  padding: 1.5rem;
  margin: 0;
}
.upanel > h3 { font-size: 1.1875rem; margin: 0 0 1.125rem; }
.upanel-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 1.5rem 2rem;
  align-items: start;
}
.upanel-split > * { margin: 0; }
.upanel-split .microlabel { border-top: 0; padding-top: 0; }
.upanel-split .ucase-list { margin-bottom: 0; font-size: .875rem; line-height: 1.4; }

/* Форма — вложенная белая поверхность, а не «ещё один текст в панели». */
.upanel-form {
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 1.125rem;
}
.upanel-form .label { margin-top: 0; }
.upanel-form .form-grid { grid-template-columns: minmax(0, 1fr); }
.upanel-form .field-box { border-radius: var(--r-sm); }
.upanel-form .btn { border-radius: var(--r-sm); }

/* ------------------------------------------------- 5. Таблица сравнения */

table.data.compare { min-width: 44rem; }
table.data.compare th { vertical-align: bottom; }
table.data.compare td:first-child,
table.data.compare th:first-child {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  width: 11rem;
  padding-right: 1.5rem;
}
table.data.compare td { padding-left: 1rem; padding-right: 1rem; vertical-align: top; }
table.data.compare .alt { color: var(--muted-2); }
table.data.compare .win { color: var(--ink); }
table.data.compare th.win { border-bottom-color: var(--accent); }

/* Мобильный вид: строки таблицы — мягкие карточки, без прямоугольных рамок. */
@media (max-width: 720px) {
  .compare-cards table.data.compare { min-width: 0; }
  table.data.compare, table.data.compare tbody, table.data.compare tr, table.data.compare td { display: block; width: auto; }
  table.data.compare thead { display: none; }
  table.data.compare tr {
    border: 0;
    border-radius: var(--r);
    padding: 1rem 1.125rem;
    margin: 0 0 .75rem;
    background: var(--paper);
  }
  table.data.compare td:first-child {
    width: auto;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
  }
  table.data.compare td {
    border-bottom: 0;
    padding: .75rem 0 0;
  }
  table.data.compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .25rem;
  }
  table.data.compare td.win {
    background: rgba(11, 132, 224, .06);
    border-radius: var(--r-sm);
    padding: .75rem;
    margin-top: .75rem;
  }
}

/* ------------------------------------------------------------- 6. FAQ */

/* A3: коробок больше нет. Список вопросов разделён волосяными линиями,
   раскрытый получает мягкую заливку и скругление. */
.faq-list {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  counter-reset: faq;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  margin: 0;
  border-radius: var(--r);
}
.faq-item[open] {
  background: var(--paper-2);
  border-bottom-color: transparent;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: .875rem;
  padding: 1rem 2.5rem 1rem 1rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  border-radius: var(--r);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent-ink); }
.faq-item > summary::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--muted);
  padding-top: .2rem;
  flex: none;
}
.faq-item[open] > summary::before { color: var(--accent); }
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 1.05rem;
  width: .875rem;
  height: .875rem;
  background-color: var(--muted);
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}
.faq-item[open] > summary::after { background-color: var(--accent); --icon-plus: var(--icon-minus); }
.faq-body { padding: 0 1.25rem 1.25rem 3rem; }
.faq-body > :last-child { margin-bottom: 0; }
.faq-body p, .faq-body li { font-size: .9375rem; line-height: 1.6; }
.faq-body ul, .faq-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.faq-body li { margin-bottom: .375rem; }

.faq-list { --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.5v11M4.5 10h11' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------- 7. Адаптив */

/* Четыре кейса в ряд, сегментная полоса — во всю ширину под ними. */
@media (min-width: 1100px) {
  .ucases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ucase { padding: 1.125rem 1rem; }
  .ucase h3 { font-size: 1rem; }
  .ucase-segment {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
    padding: 1.25rem 1.5rem;
  }
  .ucase-segment-head { min-width: 0; }
  .ucase-segment h3 { font-size: 1.0625rem; margin: .625rem 0 0; }
  .ucase-segment-body p { font-size: .9375rem; line-height: 1.5; max-width: none; }
  .ucase-segment-body > :last-child { margin-bottom: 0; }
}

@media (max-width: 1099px) {
  .ucases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Одноколоночные раскладки задаются через minmax(0, 1fr), а не 1fr.
   У 1fr автоматический минимум — min-content, поэтому широкое содержимое
   (график кейса в карточке «Мониторинг») растягивало колонку до 676px при
   экране 390px, и вся страница получала горизонтальную прокрутку. */
@media (max-width: 980px) {
  .ptable { grid-template-columns: minmax(0, 1fr); }
  .ptier-for { min-height: 0; }
  .ptier-note { min-height: 0; }
  .ptier-note:empty { display: none; }
  .ptier-badge:empty { display: none; }
  .psub { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .upanel-split { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 719px) {
  .ucases { grid-template-columns: minmax(0, 1fr); }
  .ucase-segment { grid-column: auto; }
}

@media (max-width: 520px) {
  .ptier { padding: 1.25rem 1.125rem; }
  .ptier-price, .psub .psub-price { font-size: 2.25rem; }
  .psub { padding: 1.5rem 1.125rem; }
  .ucase, .upanel { padding: 1.125rem; }
  .upanel-form { padding: 1rem; }
  .faq-item > summary { padding: .875rem 2.25rem .875rem .75rem; gap: .625rem; }
  .faq-body { padding: 0 1rem 1rem .75rem; }
}

/* ------------------------------- 8. Уплотнение на широком экране (#cases) */

/* Текст трогать нельзя, поэтому плотность даём раскладкой. Перечень отраслей
   в панели «когда базового недостаточно» уходит в две колонки, форма
   становится строкой полей — иначе одна она давала 500px высоты. */
@media (min-width: 1000px) {
  .upanel-split-wide { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .upanel-split-wide .ucase-list {
    columns: 2;
    column-gap: 2rem;
    font-size: .875rem;
    line-height: 1.4;
  }
  .upanel-split-wide .ucase-list li { break-inside: avoid; }
  .upanel-split-wide .upanel-form form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem 1.25rem;
    align-items: center;
  }
  .upanel-split-wide .upanel-form .form-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
  }
  .upanel-split-wide .upanel-form .full { grid-column: auto; }
  .upanel-split-wide .upanel-form .consent { font-size: .75rem; max-width: none; margin: 0; }
  .upanel-split-wide .upanel-form .btn { margin: 0; }
}