.cmpce,
.cmpce * {
box-sizing: border-box;
}
.cmpce {
--cmpce-primary: #d71920;
--cmpce-secondary: #202020;
--cmpce-page-bg: #f7f7f5;
--cmpce-ink: #171717;
--cmpce-text: #3f3f46;
--cmpce-muted: #71717a;
--cmpce-line: #dededb;
--cmpce-soft: #fafaf8;
--cmpce-card: #ffffff;
--cmpce-radius: 14px;
width: 100%;
color: var(--cmpce-text);
font-family: inherit;
}
.cmpce button,
.cmpce input,
.cmpce select,
.cmpce textarea {
font: inherit;
}
.cmpce__shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
min-height: 620px;
border: 1px solid var(--cmpce-line);
border-radius: var(--cmpce-radius);
background: var(--cmpce-card);
overflow: hidden;
}
.cmpce__panel {
grid-column: 1;
grid-row: 1;
padding: clamp(24px, 4vw, 42px);
background: #ffffff;
}
.cmpce__sidebar {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 22px;
padding: clamp(22px, 3vw, 30px);
border-left: 1px solid var(--cmpce-line);
background: var(--cmpce-page-bg);
color: var(--cmpce-text);
}
.cmpce__sidebar::before {
content: '';
display: block;
width: 54px;
height: 3px;
background: var(--cmpce-primary);
}
.cmpce__eyebrow {
margin: 0;
color: var(--cmpce-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.cmpce__sidebar h2 {
margin: 0;
color: var(--cmpce-ink);
font-size: clamp(24px, 2.2vw, 30px);
line-height: 1.14;
font-weight: 750;
letter-spacing: -.02em;
}
.cmpce__sidebar p:not(.cmpce__eyebrow) {
margin: 0;
color: var(--cmpce-muted);
line-height: 1.55;
font-size: 14px;
}
.cmpce__counter {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: var(--cmpce-muted);
font-size: 16px;
font-weight: 600;
}
.cmpce__counter strong {
color: var(--cmpce-primary);
font-size: 36px;
font-weight: 800;
letter-spacing: -.04em;
}
.cmpce__progress {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.cmpce__progress span {
height: 3px;
background: #d6d6d2;
}
.cmpce__progress span.is-active {
background: var(--cmpce-primary);
}
.cmpce__budget-card {
display: grid;
gap: 6px;
margin-top: auto;
padding: 18px;
border: 1px solid var(--cmpce-line);
border-radius: 12px;
background: #ffffff;
}
.cmpce__budget-card span,
.cmpce__budget-card small {
color: var(--cmpce-muted);
font-size: 13px;
line-height: 1.4;
}
.cmpce__budget-card strong {
color: var(--cmpce-ink);
font-size: 26px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -.02em;
}
.cmpce__form {
display: flex;
flex-direction: column;
min-height: 100%;
}
.cmpce__mobile-head {
display: none;
margin-bottom: 20px;
color: var(--cmpce-muted);
font-size: 13px;
font-weight: 650;
}
.cmpce__step {
display: none;
flex: 1;
}
.cmpce__step.is-active {
display: block;
animation: cmpceFade .14s ease both;
}
@keyframes cmpceFade {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.cmpce__question {
margin: 0 0 10px;
max-width: 860px;
color: var(--cmpce-ink);
font-size: clamp(26px, 3.2vw, 38px);
line-height: 1.12;
font-weight: 760;
letter-spacing: -.025em;
}
.cmpce__hint {
margin: 0 0 22px;
max-width: 780px;
color: var(--cmpce-muted);
font-size: 15px;
line-height: 1.6;
}
.cmpce__choice-grid {
display: grid;
gap: 12px;
margin-top: 24px;
}
.cmpce__choice-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cmpce__choice-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cmpce__card {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
min-height: 136px;
padding: 22px;
border: 1px solid var(--cmpce-line);
border-radius: 12px;
background: #ffffff;
cursor: pointer;
transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.cmpce__card:hover,
.cmpce__card:focus {
outline: none;
border-color: #b7b7b0;
transform: translateY(-1px);
}
.cmpce__card.is-selected {
border-color: var(--cmpce-primary);
background: #fffdfd;
}
.cmpce__card.is-selected::before {
content: '';
position: absolute;
inset: -1px auto -1px -1px;
width: 4px;
border-radius: 12px 0 0 12px;
background: var(--cmpce-primary);
}
.cmpce__card-icon {
display: none;
}
.cmpce__card-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.cmpce__card-body h3 {
margin: 0 0 8px;
color: var(--cmpce-ink);
font-size: 20px;
line-height: 1.2;
font-weight: 750;
letter-spacing: -.01em;
}
.cmpce__card-body p {
margin: 0;
color: var(--cmpce-muted);
font-size: 14px;
line-height: 1.48;
}
.cmpce__card-body strong {
display: inline-flex;
width: fit-content;
margin-top: auto;
padding-top: 14px;
color: var(--cmpce-primary);
font-size: 14px;
font-weight: 760;
}
.cmpce__tag {
display: inline-flex;
width: fit-content;
margin-bottom: 10px;
padding: 4px 8px;
border: 1px solid #e5e5e0;
border-radius: 999px;
color: var(--cmpce-secondary);
background: #fbfbf8;
font-size: 11px;
line-height: 1;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.cmpce__radio {
align-self: flex-start;
width: 18px;
height: 18px;
border: 1px solid #b8b8b2;
border-radius: 999px;
background: #ffffff;
}
.cmpce__card.is-selected .cmpce__radio,
.cmpce__option.is-selected .cmpce__radio {
border-color: var(--cmpce-primary);
background: radial-gradient(circle, var(--cmpce-primary) 0 42%, #ffffff 44%);
}
.cmpce__step-headline {
display: flex;
flex-direction: column;
gap: 4px;
}
.cmpce__selected-box {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 20px 0 18px;
}
.cmpce__selected-box > div,
.cmpce__selected-box > span,
.cmpce__empty {
display: block;
padding: 15px;
border: 1px solid var(--cmpce-line);
border-radius: 10px;
background: var(--cmpce-soft);
color: var(--cmpce-muted);
font-size: 14px;
}
.cmpce__selected-box span {
display: block;
margin-bottom: 5px;
color: var(--cmpce-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.cmpce__selected-box strong {
display: block;
color: var(--cmpce-ink);
font-size: 21px;
font-weight: 780;
}
.cmpce__selected-box small {
color: var(--cmpce-muted);
}
.cmpce__features {
display: grid;
gap: 18px;
}
.cmpce__feature-group {
display: grid;
gap: 10px;
}
.cmpce__feature-group h4 {
margin: 0;
color: var(--cmpce-ink);
font-size: 13px;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
}
.cmpce__feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.cmpce__feature {
position: relative;
min-height: 118px;
padding: 16px;
border: 1px solid var(--cmpce-line);
border-radius: 10px;
background: #ffffff;
cursor: pointer;
transition: border-color .14s ease, background-color .14s ease;
}
.cmpce__feature:hover,
.cmpce__feature:focus {
outline: none;
border-color: #b7b7b0;
}
.cmpce__feature.is-selected {
border-color: var(--cmpce-primary);
background: #fffdfd;
}
.cmpce__feature-top {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: start;
}
.cmpce__check {
width: 17px;
height: 17px;
margin-top: 2px;
border: 1px solid #b8b8b2;
border-radius: 4px;
background: #fff;
}
.cmpce__feature.is-selected .cmpce__check {
border-color: var(--cmpce-primary);
background: var(--cmpce-primary);
box-shadow: inset 0 0 0 4px #fff;
}
.cmpce__feature h5 {
margin: 0;
color: var(--cmpce-ink);
font-size: 15px;
line-height: 1.32;
font-weight: 730;
}
.cmpce__feature p {
margin: 9px 0 0 27px;
color: var(--cmpce-muted);
font-size: 12px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: .04em;
}
.cmpce__feature strong {
display: inline-flex;
margin: 8px 0 0 27px;
color: var(--cmpce-primary);
font-size: 14px;
font-weight: 750;
}
.cmpce__info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
border: 1px solid #d7d7d2;
border-radius: 999px;
background: #ffffff;
color: var(--cmpce-muted);
cursor: pointer;
font-size: 12px;
font-weight: 750;
}
.cmpce__info:hover,
.cmpce__info:focus {
outline: none;
border-color: var(--cmpce-primary);
color: var(--cmpce-primary);
}
.cmpce__tooltip {
display: none;
margin-top: 12px;
padding: 11px 12px;
border: 1px solid var(--cmpce-line);
border-radius: 9px;
background: #fbfbf8;
color: var(--cmpce-text);
font-size: 13px;
line-height: 1.48;
}
.cmpce__feature.is-open .cmpce__tooltip,
.cmpce__option.is-open .cmpce__tooltip {
display: block;
}
.cmpce__option {
position: relative;
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: start;
padding: 17px;
border: 1px solid var(--cmpce-line);
border-radius: 10px;
background: #ffffff;
cursor: pointer;
}
.cmpce__option.is-selected {
border-color: var(--cmpce-primary);
background: #fffdfd;
}
.cmpce__option h4 {
margin: 0 0 6px;
color: var(--cmpce-ink);
font-size: 17px;
font-weight: 750;
}
.cmpce__option p {
margin: 0 0 10px;
color: var(--cmpce-muted);
line-height: 1.5;
font-size: 14px;
}
.cmpce__option strong {
color: var(--cmpce-primary);
font-size: 14px;
font-weight: 750;
}
.cmpce__included {
display: grid;
gap: 14px;
}
.cmpce__table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid var(--cmpce-line);
border-radius: 10px;
background: #fff;
}
.cmpce__table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.cmpce__table th,
.cmpce__table td {
padding: 12px 13px;
border-bottom: 1px solid #ecece8;
color: var(--cmpce-text);
font-size: 13px;
line-height: 1.45;
text-align: left;
vertical-align: top;
}
.cmpce__table th {
background: var(--cmpce-soft);
color: var(--cmpce-ink);
font-size: 12px;
font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
}
.cmpce__table td span {
color: var(--cmpce-muted);
}
.cmpce__table tfoot td {
color: var(--cmpce-ink);
font-weight: 750;
background: #fff;
}
.cmpce__table tfoot tr:last-child td {
color: #ffffff;
background: var(--cmpce-secondary);
border-bottom: 0;
}
.cmpce__amount {
text-align: right !important;
white-space: nowrap;
}
.cmpce__badge {
display: inline-flex;
padding: 3px 7px;
border: 1px solid #e3e3de;
border-radius: 999px;
background: #fbfbf8;
color: var(--cmpce-secondary);
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
.cmpce__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 26px;
}
.cmpce__fields label {
display: grid;
gap: 8px;
color: var(--cmpce-ink);
font-size: 13px;
font-weight: 700;
}
.cmpce__fields input,
.cmpce__fields select,
.cmpce__fields textarea {
width: 100%;
min-height: 48px;
padding: 12px 13px;
border: 1px solid #d6d6d0;
border-radius: 8px;
background: #ffffff;
color: var(--cmpce-ink);
font-size: 15px;
font-weight: 500;
transition: border-color .15s ease, box-shadow .15s ease;
}
.cmpce__fields textarea {
min-height: 116px;
resize: vertical;
}
.cmpce__fields input:focus,
.cmpce__fields select:focus,
.cmpce__fields textarea:focus {
outline: none;
border-color: var(--cmpce-primary);
box-shadow: 0 0 0 3px rgba(215, 25, 32, .10);
}
.cmpce__fields label.has-error input,
.cmpce__fields label.has-error textarea,
.cmpce__fields label.has-error select {
border-color: #dc2626;
}
.cmpce__field-full {
grid-column: 1 / -1;
}
.cmpce__field-help,
.cmpce__field-error {
display: block;
min-height: 18px;
color: var(--cmpce-muted);
font-size: 12px;
line-height: 1.35;
font-weight: 500;
}
.cmpce__field-error:not(:empty) {
color: #dc2626;
}
.cmpce__result-card {
display: grid;
gap: 18px;
margin-top: 22px;
}
.cmpce__result-header {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 18px 20px;
border: 1px solid var(--cmpce-line);
border-left: 4px solid var(--cmpce-primary);
border-radius: 10px;
background: #ffffff;
color: var(--cmpce-text);
}
.cmpce__result-header span,
.cmpce__result-header p {
margin: 0;
color: var(--cmpce-muted);
font-size: 13px;
}
.cmpce__result-header h3 {
margin: 4px 0 0;
color: var(--cmpce-ink);
font-size: clamp(19px, 2.2vw, 26px);
line-height: 1.16;
font-weight: 780;
letter-spacing: -.02em;
}
.cmpce__final-actions {
display: none;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.cmpce__nav {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
padding-top: 17px;
border-top: 1px solid var(--cmpce-line);
}
.cmpce__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 17px;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
font-size: 14px;
font-weight: 750;
text-decoration: none;
transition: background-color .15s ease, border-color .15s ease;
}
.cmpce__btn:hover,
.cmpce__btn:focus {
outline: none;
}
.cmpce__btn--primary {
color: #ffffff;
background: var(--cmpce-primary);
}
.cmpce__btn--primary:hover,
.cmpce__btn--primary:focus {
background: color-mix(in srgb, var(--cmpce-primary) 88%, #000 12%);
}
.cmpce__btn--ghost,
.cmpce__btn--light {
color: var(--cmpce-secondary);
border-color: #d6d6d0;
background: #ffffff;
}
.cmpce__btn--light:hover,
.cmpce__btn--ghost:hover {
border-color: #a7a7a0;
background: #fbfbf8;
}
.cmpce__btn:disabled {
opacity: .55;
cursor: not-allowed;
}
.cmpce__legal {
margin: 16px 0 0;
color: var(--cmpce-muted);
font-size: 12px;
line-height: 1.5;
}
.cmpce__status {
min-height: 24px;
margin-top: 12px;
color: var(--cmpce-muted);
font-size: 14px;
font-weight: 650;
}
.cmpce__status.is-success { color: #047857; }
.cmpce__status.is-error { color: #dc2626; }
.is-shaking {
animation: cmpceShake .24s ease both;
}
@keyframes cmpceShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@media (max-width: 980px) {
.cmpce__shell {
grid-template-columns: 1fr;
}
.cmpce__sidebar {
grid-column: 1;
grid-row: 1;
border-left: 0;
border-bottom: 1px solid var(--cmpce-line);
}
.cmpce__panel {
grid-column: 1;
grid-row: 2;
}
.cmpce__choice-grid--three,
.cmpce__choice-grid--two,
.cmpce__feature-grid,
.cmpce__fields,
.cmpce__selected-box {
grid-template-columns: 1fr;
}
.cmpce__card {
min-height: 120px;
}
}
@media (max-width: 640px) {
.cmpce__sidebar {
display: none;
}
.cmpce__mobile-head {
display: grid;
gap: 10px;
}
.cmpce__mobile-head .cmpce__progress span {
background: rgba(17, 24, 39, .12);
}
.cmpce__mobile-head .cmpce__progress span.is-active {
background: var(--cmpce-primary);
}
.cmpce__shell {
border-radius: 10px;
}
.cmpce__panel {
padding: 20px;
}
.cmpce__question {
font-size: 28px;
}
.cmpce__card {
min-height: 0;
padding: 17px;
}
.cmpce__option {
grid-template-columns: 1fr auto;
}
.cmpce__result-header {
flex-direction: column;
}
}
@media print {
body * {
visibility: hidden !important;
}
.cmpce,
.cmpce * {
visibility: visible !important;
}
.cmpce {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
color: #111 !important;
}
.cmpce__sidebar,
.cmpce__mobile-head,
.cmpce__nav,
.cmpce__final-actions,
.cmpce__legal,
.cmpce__status,
.cmpce__step:not([data-step="5"]) {
display: none !important;
}
.cmpce__shell,
.cmpce__panel,
.cmpce__result-header,
.cmpce__table-wrap {
display: block !important;
box-shadow: none !important;
border-radius: 0 !important;
border: 0 !important;
background: #fff !important;
}
.cmpce__panel {
padding: 0 !important;
}
.cmpce__step[data-step="5"] {
display: block !important;
}
.cmpce__question {
margin: 0 0 14px !important;
font-size: 22px !important;
letter-spacing: 0 !important;
}
.cmpce__result-header {
padding: 0 0 14px !important;
border-bottom: 2px solid #111 !important;
margin-bottom: 18px !important;
}
.cmpce__result-header h3 {
color: #111 !important;
font-size: 20px !important;
}
.cmpce__table {
min-width: 0 !important;
}
.cmpce__table th,
.cmpce__table td {
padding: 9px 8px !important;
border: 1px solid #d0d0d0 !important;
font-size: 11px !important;
}
.cmpce__table th,
.cmpce__table tfoot tr:last-child td {
color: #111 !important;
background: #efefef !important;
}
}