/* rashodkaonline.ru — лендинг для монтажников, мобильный в первую очередь.
   Стиль «бренд холода» (выбран владельцем 14.09.2026): голубой градиент в цветах логотипа,
   крупная снежинка на первом экране, белая карточка с кнопками поверх его края.
   Шрифт Onest (SIL OFL 1.1) лежит на нашем сервере — запросов к сторонним сайтам нет. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- чернила; контраст проверен замером на белом и на --surface */
  --ink:        #0c2230;
  --ink-soft:   #46606f;   /* 6.6:1 на белом */
  --ink-faint:  #5b7383;   /* 5.0:1 на белом, 4.7:1 на --surface; светлее нельзя */
  --bg:         #ffffff;
  --surface:    #f3fafc;
  --line:       #d6e6ee;
  --line-soft:  #e6f1f6;

  /* --- бренд: голубой из логотипа */
  --brand:      #08779a;   /* ссылки и акценты на белом: 5.1:1 */
  --brand-dk:   #065f7c;
  --brand-hi:   #13b3d8;   /* только декор, не текст */
  --brand-bg:   #eaf8fc;
  --brand-ink:  #0b5a78;   /* текст на --brand-bg: 7.0:1 */

  /* --- первый экран и подвал */
  --deep:       #072c40;
  --on-deep:    #ffffff;
  --on-deep-2:  #c5e3ee;
  --on-deep-3:  #8fc0d3;
  --deep-line:  rgba(255, 255, 255, .16);

  /* --- рабочая пометка «нужны данные» */
  --warn-bg:    #fff8ed;
  --warn-ink:   #8a4206;
  --warn-line:  #e8c08a;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 24px;
  --pad:  20px;
  --maxw: 1120px;

  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-1: 0 1px 2px rgba(7, 44, 64, .06);
  --shadow-2: 0 24px 60px -30px rgba(8, 80, 110, .55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 92px;            /* место под закреплённую кнопку */
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0 0 12px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(32px, 7.4vw, 54px); }
h2 { font-size: clamp(25px, 4.6vw, 36px); }
h3 { font-size: 18px; letter-spacing: -0.01em; font-weight: 700; }
p  { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dk); }
:focus-visible { outline: 3px solid var(--brand-hi); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* Малая подпись. Класс .mono оставлен для совместимости с блоками из настроек. */
.mono, .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- пометки макета и предпросмотра */

.draft-flag {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-bottom: 1px solid var(--warn-line);
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 0;
}
.draft-flag b { font-weight: 700; }
.preview-flag {
  background: #efe9ff;
  color: #3d1fa3;
  border-bottom: 1px solid #cbbcf5;
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 0;
}
.sample-flag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #efe9ff;
  color: #3d1fa3;
}

/* --- шапка */

.topbar { background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; display: block; }
.brand-text b { display: block; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; }
.brand-text span { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-faint); line-height: 1.3; }
.topbar-contacts { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.topbar-tel { font-weight: 700; font-size: 16px; white-space: nowrap; text-decoration: none; color: var(--brand); padding: 6px 0 3px; }
.topbar-mail { font-size: 13px; white-space: nowrap; text-decoration: none; color: var(--ink-soft); padding: 3px 0 6px; }
.topbar-mail:hover { color: var(--brand); }
@media (max-width: 420px) {
  .brand-text span { display: none; }          /* иначе название переносится на две строки */
  .brand-logo { width: 36px; height: 36px; }
  .brand-text b { font-size: 16px; }
  .topbar-tel { font-size: 15px; }
  .topbar-mail { font-size: 12px; }
}

/* --- первый экран */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-deep);
  padding: 30px 0 118px;
  /* Сплошной цвет — запасной для старых браузеров и для замера контраста: градиент он не читает. */
  background-color: #07698a;
  background-image:
    radial-gradient(900px 500px at 88% -10%, rgba(34, 195, 230, .55) 0%, rgba(34, 195, 230, 0) 60%),
    linear-gradient(135deg, #08779a 0%, #066a8c 45%, #0a3f60 100%);
}
/* Крупная снежинка из логотипа — справа, полупрозрачная. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  right: -90px;
  top: -20px;
  background: url(/assets/flake.svg) no-repeat center / contain;
  opacity: .16;
}
/* Мягкая волна снизу, как дуга в логотипе. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -15%;
  right: -15%;
  bottom: -150px;
  height: 260px;
  border-radius: 50%;
  background: #fff;
  opacity: .08;
  transform: rotate(-4deg);
}
.kicker { color: #fff; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin-bottom: 14px; max-width: 12em; }
.hero .lead { font-size: clamp(17px, 4.2vw, 20px); line-height: 1.55; color: #f0fafd; margin: 0; max-width: 34em; }

/* --- карточка с кнопками */

.offer {
  position: relative;
  z-index: 2;
  margin-top: -84px;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 20px 18px 18px;
}
.offer h2 { font-size: 21px; margin: 0 0 8px; letter-spacing: -0.015em; }

.pre-note { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

.channels { display: grid; gap: 10px; margin-bottom: 12px; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;                /* комфортная цель нажатия, в том числе в перчатках */
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease;
}
.btn:hover { color: #fff; }
.btn:active { transform: translateY(1px); }
/* Цвета каналов. MAX — градиент из брендбука (go.max.ru/brandbook): #471AFF → #9500FF,
   белый текст не ниже 5.6:1. Telegram — фирменный #2AABEE на значке; фон кнопки темнее
   (#1B7BC2 → #1668A8), потому что белый текст на #2AABEE даёт только 2.6:1. */
.btn-max { background-color: #5a1aff; background-image: linear-gradient(135deg, #471AFF 0%, #6E1AFF 55%, #9500FF 100%); }
.btn-max:hover { background-image: linear-gradient(135deg, #3a12e0 0%, #5c12e0 55%, #7f00db 100%); }
.btn-tg { background-color: #1872b6; background-image: linear-gradient(135deg, #1B7BC2 0%, #1668A8 100%); }
.btn-tg:hover { background-image: linear-gradient(135deg, #176aa8 0%, #125a92 100%); }

.btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.btn-ico svg { display: block; }
.btn-tg .btn-ico { background: #2AABEE; }

/* Бот не настроен — кнопка в фирменном цвете (решение владельца 14.09.2026), но никуда
   не ведёт: нажатие отключено, aria-disabled для экранных чтецов, пояснение — строкой ниже. */
.btn.is-disabled { pointer-events: none; cursor: default; }

/* Строка состояния каналов. Текст подставляет app.js. */
.status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-hi); flex: none; margin-top: 7px; }
.status.is-off::before { background: var(--ink-faint); }

/* Окно с QR-кодом. Открывается по нажатию на кнопку мессенджера на компьютере (есть мышь):
   мессенджер обычно в телефоне. На телефоне нажатие сразу ведёт в мессенджер, окна нет. */
.qrpop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 44, 64, .55);
}
.qrpop-card {
  position: relative;
  width: min(380px, 100%);
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  padding: 26px 26px 22px;
  text-align: center;
}
.qrpop-card h2 { font-size: 21px; margin: 0 0 6px; padding: 0 34px; }
.nowrap { white-space: nowrap; }
.qrpop-card p { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.qrpop-code { display: inline-block; line-height: 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px; margin: 4px 0 14px; }
.qrpop-code svg { display: block; width: 220px; height: 220px; }
.qrpop-note { font-size: 14px; background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-sm); padding: 8px 10px; }
.qrpop-actions { display: grid; gap: 8px; }
.qrpop-actions .btn { min-height: 48px; font-size: 16px; }
.qrpop-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 36px;
  cursor: pointer;
}
.qrpop-close:hover { background: var(--line-soft); color: var(--ink); }
.qrpop-link { background: none; border: 0; color: var(--ink-soft); font: 600 14px/1.4 var(--sans); cursor: pointer; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }
/* На компьютере даже неподключённую кнопку можно нажать: окно объяснит, что бот ещё подключается. */
@media (hover: hover) and (pointer: fine) {
  .btn.is-disabled { pointer-events: auto; cursor: pointer; }
}

.legal-line { font-size: 13px; line-height: 1.5; color: var(--ink-faint); margin: 0 0 12px; }

.fallback { border-top: 1px solid var(--line-soft); padding-top: 12px; margin: 0; font-size: 15px; color: var(--ink-soft); }
.fallback a { font-weight: 700; white-space: nowrap; display: inline-block; padding: 4px 0; }

/* --- факты под карточкой */

.facts { display: grid; gap: 14px; margin: 26px 0 6px; padding: 0; list-style: none; }
.facts li { margin: 0; border-left: 3px solid var(--brand-hi); padding: 2px 0 2px 14px; }
.facts b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.015em; color: var(--brand-ink); line-height: 1.25; }
.facts span { display: block; font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }

/* --- секции */

.sec { padding: 40px 0; }
.sec + .sec { border-top: 1px solid var(--line-soft); }
.sec-head { margin-bottom: 20px; }
.sec-head .label { color: var(--brand); margin: 0 0 6px; }
.sec-head h2 { margin: 0; }

/* аудитория */
.cards { display: grid; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 18px; }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }

/* шаги */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { position: relative; margin: 0; padding: 2px 0 0 56px; }
.steps li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a93bd, #066a8c);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps b { display: block; margin-bottom: 3px; font-size: 17px; }
.steps span { display: block; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.faq summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}
.faq details[open] { border-color: #a9d8e8; }
.faq details[open] summary { color: var(--brand-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 18px 16px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.faq .answer p:last-child { margin-bottom: 0; }

/* незаполненные блоки (для владельца) */
.placeholder {
  border: 1px dashed var(--warn-line);
  border-left: 4px solid var(--warn-line);
  background: repeating-linear-gradient(135deg, #fffdf9 0 10px, #fdf6ec 10px 20px);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 13px 15px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}
.placeholder .mono { display: block; color: var(--warn-ink); margin-bottom: 5px; font-size: 12px; }
.placeholder b { color: var(--warn-ink); }

/* прайс и условия из настроек */
.price-wrap { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r); }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price-table caption { text-align: left; font-size: 13px; color: var(--ink-faint); padding: 10px 14px 0; }
.price-table th, .price-table td { border-bottom: 1px solid var(--line-soft); padding: 12px 14px; text-align: left; vertical-align: top; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table th { font-size: 13px; color: var(--ink-soft); font-weight: 600; background: var(--surface); }
.price-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.terms { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.terms li {
  margin: 0;
  position: relative;
  padding: 14px 16px 14px 46px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  line-height: 1.5;
}
.terms li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* контакты */
.contacts-grid { display: grid; gap: 2px; margin: 0 0 16px; max-width: 860px; }
.contact-line { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.contact-line:last-child { border-bottom: 0; }
.contact-line dt { flex: none; width: 92px; color: var(--ink-faint); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.contact-line dd { margin: 0; line-height: 1.45; }
.contact-line dd a { display: inline-block; padding: 5px 0; font-weight: 600; }
/* Каждая ссылка маршрута — своей строкой: в одну строку на 360 px они вылезали за край (13 px). */
.contact-line .route-links a { display: block; width: fit-content; }
dl { margin: 0; }

/* --- подвал */

.site-footer { background: var(--deep); color: var(--on-deep-2); padding: 32px 0 34px; font-size: 13.5px; line-height: 1.6; }
.site-footer a { color: #d9eff7; }
.site-footer a:hover { color: #fff; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px; }
.site-footer nav a { padding: 7px 0; font-weight: 600; }
.footer-note { border-top: 1px solid var(--deep-line); padding-top: 16px; margin: 0 0 14px; max-width: 860px; }
.requisites { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--on-deep-3); }

/* --- закреплённая кнопка */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px var(--pad);
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
}
.sticky-cta .btn { min-height: 48px; font-size: 16px; box-shadow: none; }
.sticky-cta .btn-ico { width: 24px; height: 24px; }
/* Без этого правила display:grid перебивает атрибут hidden и панель видна всегда (E004). */
.sticky-cta[hidden] { display: none; }

/* --- страница документа */

.doc { padding-top: 30px; padding-bottom: 48px; max-width: 900px; }
.doc h1 { margin-bottom: 6px; font-size: clamp(28px, 5.4vw, 40px); }
.doc h2 { margin-top: 32px; font-size: clamp(20px, 3.6vw, 25px); }
.doc h3 { margin-top: 22px; }
.doc .updated { color: var(--ink-faint); font-size: 14px; margin-bottom: 22px; }
.doc ol ol { margin-top: 8px; }
.doc li { line-height: 1.6; }
.doc .placeholder { margin: 0 0 16px; }
.back-link { display: inline-block; margin-bottom: 20px; font-size: 15px; padding: 6px 0; font-weight: 600; }
.consent-box { border: 1px solid var(--line); border-left: 3px solid var(--brand-hi); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 15px 16px; margin: 0 0 16px; }
.consent-box p:last-child { margin-bottom: 0; }
.consent-box .mono { display: block; color: var(--ink-faint); margin-bottom: 8px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 18px; display: block; overflow-x: auto; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.doc-table th { background: var(--surface); font-weight: 600; }
.doc code { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 13px; }

/* --- шире */

@media (min-width: 600px) {
  :root { --pad: 28px; }
  .channels { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .offer { padding: 24px 26px 22px; }
  .sec { padding: 52px 0; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .sticky-cta { display: none; }
  .hero { padding: 64px 0 150px; }
  .hero::before { width: 540px; height: 540px; right: 3%; top: -60px; }
  .offer { margin-top: -104px; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .steps li { padding: 56px 0 0; }
}

/* ------------------------------------------------------- менеджер согласий */
/* Окно выбора cookie. До ответа посетителя ни один внешний счётчик не грузится,
   поэтому и оформление здесь своё, без сторонних библиотек.
   14.09.2026 по просьбе владельца: тёмная плавающая карточка, чтобы окно явно отличалось
   от страницы, и компактная — на телефоне занимает ~150 px вместо ~330 и не закрывает кнопки. */

.cc {
  position: fixed;
  left: 8px; right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  background: var(--deep);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .55);
  padding: 12px 14px;
  max-height: 80vh;
  overflow-y: auto;
}
.cc-inner { max-width: 900px; margin: 0 auto; }
.cc-text b { display: inline; font-size: 14.5px; margin-right: 6px; }
.cc-text p { display: inline; font-size: 13.5px; line-height: 1.45; color: var(--on-deep-2); margin: 0; }
.cc-text { margin: 0 0 10px; line-height: 1.45; }
.cc a { color: #9fdcf0; }
.cc a:hover { color: #fff; }

/* Три кнопки равнозначны намеренно: «отказаться» не должно быть труднее, чем «принять». */
.cc-actions { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.cc-btn {
  font: 600 13.5px/1.2 var(--sans);
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.cc-btn:hover { background: rgba(255, 255, 255, .2); }
.cc-primary { background: var(--brand); border-color: var(--brand); }
.cc-primary:hover { background: var(--brand-dk); }

.cc-details { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 12px; }
.cc-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.cc-row input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand-hi); }
.cc-row b { display: block; font-size: 14.5px; }
.cc-row small { display: block; color: var(--on-deep-2); font-size: 13px; }
.cc-save { margin-top: 4px; }
.cc-save .cc-btn { width: 100%; }

@media (min-width: 600px) {
  .cc { left: 50%; right: auto; transform: translateX(-50%); width: min(900px, calc(100% - 32px)); bottom: 16px; padding: 14px 18px; }
  .cc-btn { font-size: 14.5px; padding: 10px 12px; }
  .cc-save .cc-btn { width: auto; }
}