.zb-calculator {
  margin: 2rem 0;
  border: 1px solid #dce5ec;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 42, 67, .09);
}
.zb-calculator__header { padding: clamp(1.2rem, 3vw, 2rem); background: linear-gradient(135deg, #102a43, #174e88); color: #fff; }
.zb-calculator__header h2 { margin: .15rem 0 .45rem; color: #fff; }
.zb-calculator__header p:last-child { margin-bottom: 0; color: #e6eff7; }
.zb-calculator__eyebrow { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9ee6ce !important; }
.zb-calculator__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem); }
.zb-field { display: grid; align-content: start; gap: .42rem; font-weight: 680; }
.zb-field > span:first-child { font-size: .92rem; color: #31495d; }
.zb-field input,
.zb-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #aebdca;
  border-radius: 11px;
  padding: .68rem .8rem;
  background: #fff;
  color: #172b3a;
  font: inherit;
}
.zb-input-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #aebdca; border-radius: 11px; background: #fff; }
.zb-input-wrap input { min-width: 0; border: 0; }
.zb-input-wrap small { padding-right: .75rem; color: #536779; font-weight: 550; white-space: nowrap; }
.zb-offer-set { display: grid; grid-column: span 1; gap: .8rem; margin: 0; padding: 1rem; border: 1px solid #dce5ec; border-radius: 14px; background: #f7fafc; }
.zb-offer-set legend { padding: 0 .35rem; font-weight: 800; color: #102a43; }
.zb-calculate,
.zb-offer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.1rem;
  background: #1463ff;
  color: #fff !important;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}
.zb-calculate { grid-column: 1 / -1; justify-self: start; }
.zb-calculate:hover, .zb-offer-button:hover { background: #0b49c1; }
.zb-calculator__result { margin: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); padding: 1.2rem; border-radius: 15px; background: #f5f8fb; }
.zb-calculator__result.is-ready { background: #dff8ee; }
.zb-result-grid { display: grid; gap: .6rem; }
.zb-result-row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(16, 42, 67, .13); }
.zb-result-row:last-child { padding-bottom: 0; border-bottom: 0; }
.zb-result-row strong { color: #102a43; text-align: right; }
.zb-result-note { margin: .95rem 0 0; font-size: .92rem; }
.zb-calculator__details { margin: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); }
.zb-calculator__details summary { cursor: pointer; font-weight: 720; }

.zb-empty { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid #dce5ec; border-radius: 14px; background: #f5f8fb; }
.zb-lead { max-width: 760px; font-size: clamp(1.08rem, 2vw, 1.32rem); color: #425b70; }
.zb-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.zb-kicker { margin: 0 0 .35rem; color: #1463ff; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zb-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.zb-facts > div { display: grid; gap: .25rem; padding: 1.15rem; border: 1px solid #dce5ec; border-radius: 16px; background: #fff; }
.zb-facts strong { color: #102a43; font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
.zb-facts span { color: #536779; font-size: .9rem; }
.zb-faq { display: grid; gap: .75rem; }
.zb-faq details { padding: 1rem 1.15rem; border: 1px solid #dce5ec; border-radius: 14px; background: #fff; }
.zb-faq summary { cursor: pointer; color: #102a43; font-weight: 760; }
.zb-faq details p:last-child { margin-bottom: 0; }
.zb-ranking-shell { width: min(calc(100vw - 2rem), 1180px); max-width: 1180px; margin-left: 50%; transform: translateX(-50%); }
.zb-ranking-cards { display: grid; gap: 1.15rem; margin: 1.5rem 0 2.25rem; }
.zb-ranking-card { border: 1px solid #dce5ec; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(16, 42, 67, .08); }
.zb-ranking-card > header { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem; background: linear-gradient(135deg, #f5f8fb, #edf4ff); }
.zb-ranking-card h3 { margin: .1rem 0 0; color: #102a43; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.zb-ranking-brand { margin: 0; color: #536779; font-size: .86rem; font-weight: 700; }
.zb-rank-place { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #1463ff; color: #fff; font-size: 1.15rem; font-weight: 850; }
.zb-score { color: #102a43; font-size: 1.5rem; white-space: nowrap; }
.zb-score small { color: #536779; font-size: .72rem; font-weight: 650; }
.zb-best-for, .zb-fee-note, .zb-promotion { margin: 0; padding: 1rem 1.25rem 0; }
.zb-cost-pills { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1rem 1.25rem 0; }
.zb-cost-pills span { padding: .48rem .72rem; border-radius: 999px; background: #eaf2ff; color: #29445b; font-size: .86rem; }
.zb-ranking-pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.25rem 0; }
.zb-ranking-pros > div { padding: .85rem 1rem; border-radius: 14px; background: #f7fafc; }
.zb-ranking-pros h4 { margin: 0 0 .5rem; color: #102a43; }
.zb-ranking-pros ul { margin: 0; padding-left: 1.1rem; }
.zb-ranking-pros li + li { margin-top: .28rem; }
.zb-pros li::marker { color: #0b8a62; }
.zb-cons li::marker { color: #c77800; }
.zb-promotion { color: #5f4809; }
.zb-ranking-card > footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: 1rem 1.25rem; border-top: 1px solid #dce5ec; background: #fbfcfe; color: #536779; font-size: .88rem; }
.zb-ranking-summary-title { margin-top: 2.5rem; }
.zb-table-wrap { overflow-x: auto; margin: 1.3rem 0; }
.zb-ranking { width: 100%; border-collapse: collapse; font-size: .94rem; }
.zb-ranking th { padding: .8rem; background: #102a43; color: #fff; text-align: left; }
.zb-ranking td { padding: .9rem .8rem; border-bottom: 1px solid #dce5ec; vertical-align: top; }
.zb-ranking tbody tr:hover { background: #f7fafc; }
.zb-muted { color: #536779; }
.zb-affiliate-disclosure { padding: .85rem 1rem; border-left: 4px solid #d99000; background: #fff3cf; font-size: .92rem; }
.zb-ranking-note { color: #536779; font-size: .9rem; }
.zb-editorial-box { margin-top: 3rem; padding: 1.1rem 1.25rem; border: 1px solid #dce5ec; border-radius: 14px; background: #f5f8fb; }
.zb-editorial-box h2 { margin-top: 0; font-size: 1.15rem; }
.zb-editorial-box ul { margin-bottom: 0; }

@media (max-width: 760px) {
	.zb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zb-ranking-card > header { grid-template-columns: auto 1fr; }
	.zb-score { grid-column: 2; }
	.zb-ranking-pros { grid-template-columns: 1fr; }
	.zb-ranking-card > footer { align-items: stretch; }
	.zb-ranking-card > footer .zb-offer-button { width: 100%; }
  .zb-calculator__form { grid-template-columns: 1fr; }
  .zb-offer-set { grid-column: 1; }
  .zb-result-row { display: grid; gap: .15rem; }
  .zb-result-row strong { text-align: left; }
  .zb-ranking thead { display: none; }
  .zb-ranking, .zb-ranking tbody, .zb-ranking tr, .zb-ranking td { display: block; width: 100%; }
  .zb-ranking tr { margin-bottom: 1rem; border: 1px solid #dce5ec; border-radius: 14px; overflow: hidden; }
  .zb-ranking td { display: grid; grid-template-columns: minmax(90px, 35%) 1fr; gap: .65rem; }
  .zb-ranking td::before { content: attr(data-label); color: #536779; font-weight: 720; }
}

@media (max-width: 430px) {
	.zb-facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .zb-calculate, .zb-offer-button { transition: none; }
}