/* Постоянная страница сравнения: развязки «кому подходит что». Всё визуальное — карточки,
   цветовые токены, сетки, статусы, details — переиспользует
   compare-v3.css без изменений. Здесь только то, чего в v3 не было. */

/* Заголовок и вводный текст образуют левую колонку, поэтому карточка
   «Честно о себе» начинается рядом с заголовком, а не после него. */
.cmp3-hero-grid{
  margin-top:14px;
}

.order-design .cmp3-hero{
  padding-top:clamp(58px,7vw,78px);
  padding-bottom:clamp(24px,4vw,38px);
}

.order-design .cmp3-hero h1{
  max-width:19ch;
  font-family:var(--font);
  font-size:clamp(36px,5vw,54px);
  font-weight:680;
  line-height:1.04;
  letter-spacing:-.03em;
}

.cmp4-hero-copy h1{
  margin-top:0;
}

.cmp4-hero-copy .lede{
  margin-top:20px;
  font-family:var(--font);
  font-size:clamp(17px,2vw,20px);
  line-height:1.62;
}

.cmp3-audience-note{
  border-color:var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cmp3-context,
.cmp3-axis,
.cmp3-method,
.cmp4-rule-table-wrap,
.cmp4-cleanup{border-radius:var(--radius)}

.cmp3-context-title h2{
  font-family:var(--font);
  font-size:clamp(30px,3.6vw,40px);
  font-weight:640;
  line-height:1.08;
}

.cmp3-audience-note .cmp4-brand-emphasis{
  display:inline;
  margin:0;
  color:var(--accent-text);
  font-size:inherit;
  font-weight:740;
}

/* .cmp3-table-area — section и без сброса наследует общие 66px сверху и
   снизу. У активной панели также был отдельный нижний запас в 78px. */
.cmp3-table-area{
  padding:0;
}

.cmp3-panel{
  margin-bottom:0;
}

.cmp4-rules{
  margin-top:48px;
  padding:0;
}

.cmp4-rules>h2{
  max-width:960px;
  margin:0;
  color:var(--text);
  font-size:clamp(22px,2.3vw,31px);
  line-height:1.35;
  letter-spacing:-.018em;
}

.cmp4-rule-table-wrap{
  margin-top:28px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cmp4-rule-table-wrap:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);
  outline-offset:3px;
}

.cmp4-rule-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

.cmp4-rule-table abbr{
  text-decoration:none;
  cursor:help;
}

.cmp4-rule-scenario:not(:first-child) th{
  border-top:10px solid var(--surface-2);
}

.cmp4-rule-scenario th{
  padding:21px 24px 13px;
  background:var(--surface-2);
  color:var(--text);
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  overflow-wrap:anywhere;
}

.cmp4-rule-scenario th strong{
  display:block;
  font-size:17px;
  line-height:1.35;
}

.cmp4-rule-scenario th>span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
}

.cmp4-rule-scenario th>.cmp4-rule-result{
  margin-top:10px;
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.005em;
}

.cmp4-rule-scores td{
  width:12.5%;
  padding:8px 4px 14px;
  background:var(--surface);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
  vertical-align:middle;
}

.cmp4-rule-scores td:last-child{
  border-right:0;
}

.cmp4-rule-scores:last-child td{
  border-bottom:0;
}

.cmp4-rule-scenario:nth-child(4n+3) th{background:var(--surface-2)}
.cmp4-rule-scenario:nth-child(4n+3)+.cmp4-rule-scores td{background:var(--surface)}

.cmp4-rule-program{
  display:block;
  margin:0 0 8px;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  letter-spacing:.035em;
  line-height:1.15;
}

.cmp4-rule-mark{
  display:inline-block;
  min-width:30px;
  color:inherit;
  font-size:30px;
  font-weight:900;
  line-height:.95;
  text-align:center;
  cursor:help;
}

.cmp4-rule-mark.is-yes{
  color:var(--cmp3-good);
}

.cmp4-rule-mark.is-extended{
  color:var(--cmp3-partial);
  font-size:23px;
}

.cmp4-rule-mark.is-no{
  color:#d92d20;
  font-size:32px;
}

@media (prefers-color-scheme:dark){
  .cmp4-rule-mark.is-no{
    color:#ff4f58;
  }
}

html[data-theme="dark"] .cmp4-rule-mark.is-no{
  color:#ff4f58;
}

html[data-theme="light"] .cmp4-rule-mark.is-no{
  color:#d92d20;
}

.cmp4-rule-legend{
  margin:16px 4px 0;
  color:var(--faint);
  font-size:12.5px;
  line-height:1.6;
}

.cmp4-rule-legend strong{
  font-size:16px;
  font-weight:800;
}

.cmp4-rule-legend-line,
.cmp4-rule-legend-note{
  display:block;
}

.cmp4-rule-legend-line+.cmp4-rule-legend-line{
  margin-top:2px;
}

.cmp4-rule-legend-note{
  margin-top:12px;
}

.cmp4-rule-legend-note+.cmp4-rule-legend-note{
  margin-top:2px;
}

.cmp4-rule-legend .is-yes{color:var(--cmp3-good)}
.cmp4-rule-legend .is-extended{color:var(--cmp3-partial)}
.cmp4-rule-legend .is-no{color:#e12d39}

.cmp4-cleanup{
  margin-top:48px;
  padding:30px 34px 32px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}

.cmp4-cleanup .eyebrow{
  margin:0;
}

.cmp4-cleanup h2{
  margin:14px 0 0;
  color:var(--text);
  font-size:clamp(23px,2.4vw,32px);
  line-height:1.2;
}

.cmp4-cleanup>p:not(.eyebrow){
  max-width:1040px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

/* Не складываем нижний запас страницы с отдельным margin футера. */
.cmp3-main{
  padding-bottom:64px;
}

.cmp3-main + footer{
  margin-top:0;
}

.cmp3-cta{max-width:680px}

/* Тэглайн живёт внутри .cmp3-context-title, поэтому получает тот же
   горизонтальный отступ, что и заголовок над ним. */
.cmp4-tagline{
  margin:12px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

/* Укол ценой — тот же абзац компонента .cmp3-context-product,
   просто с усиленным начертанием и небольшим отступом сверху. */
.cmp4-jab{
  margin-top:10px !important;
}

/* Мостик (только у Lightroom) — прямой ребёнок карточки, поэтому сам
   задаёт себе горизонтальный паддинг вровень с остальными ячейками. */
.cmp4-bridge{
  margin:0;
  padding:20px 28px 22px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
}

.cmp4-bridge h3{
  margin:0 0 12px;
  color:var(--accent-text);
  font-size:18px;
  line-height:1.25;
}

.cmp4-bridge p{
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
}

.cmp4-bridge p+p{
  margin-top:14px;
}

.cmp4-bridge .cmp4-bridge-jab{
  color:var(--text);
  font-weight:700;
}

/* Заключительный абзац — просто продолжение карточки, не сетка и не
   раскрывашка. .cmp3-context-product уже даёт нужный паддинг/типографику;
   добавляем только верхнюю границу, которую в оригинале рисовал grid-gap
   родителя. */
.cmp4-explain{
  border-top:1px solid var(--border);
}

/* Базовый слой compare-v3 появился до Capture One и ON1, поэтому здесь
   добавлены соответствующие правила переключения без JavaScript. */
@supports selector(.cmp3-table-area:has(input:checked)){
  .cmp3-table-area:has(input[value="captureone"]:checked) .cmp3-panel[data-cp="captureone"],
  .cmp3-table-area:has(input[value="on1"]:checked) .cmp3-panel[data-cp="on1"],
  .cmp3-table-area:has(input[value="darktable"]:checked) .cmp3-panel[data-cp="darktable"]{
    display:block;
  }
}

@media (max-width:640px){
  .order-design .cmp3-hero h1{font-size:clamp(33px,10vw,44px)}

  .cmp3-pills{
    flex-wrap:wrap;
    margin-inline:0;
    padding-inline:0;
    overflow-x:visible;
  }

  .cmp3-pill{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .cmp3-hero-grid{
    margin-top:24px;
  }

  .cmp4-hero-copy .lede{
    margin-top:24px;
  }

  .cmp4-bridge{
    padding:18px 20px 20px;
  }

  .cmp4-rules,
  .cmp4-cleanup{
    margin-top:36px;
  }

  .cmp4-rules>h2{
    font-size:22px;
  }

  .cmp4-rule-table-wrap{
    margin-top:22px;
    border-radius:var(--radius);
  }

  .cmp4-rule-scenario th{
    padding:18px 16px 12px;
  }

  .cmp4-rule-scenario th strong{
    font-size:16px;
  }

  .cmp4-rule-scenario th>span,
  .cmp4-rule-scenario th>.cmp4-rule-result{
    font-size:13px;
  }

  .cmp4-rule-scores td{
    padding:7px 2px 12px;
  }

  .cmp4-rule-program{
    margin-bottom:7px;
    font-size:11px;
    letter-spacing:.01em;
  }

  .cmp4-rule-mark{
    min-width:28px;
    font-size:28px;
  }

  .cmp4-rule-mark.is-extended{
    font-size:21px;
  }

  .cmp4-rule-mark.is-no{
    font-size:30px;
  }

  .cmp4-rule-legend{
    margin-top:14px;
  }

  .cmp4-cleanup{
    padding:24px 22px 26px;
    border-radius:var(--radius);
  }

  .cmp4-cleanup>p:not(.eyebrow){
    font-size:15px;
  }

  .cmp3-main{
    padding-bottom:56px;
  }
}