.dealer-plans-page {
  color-scheme: dark;
  --bg: #080a0c;
  --panel: #12171b;
  --line: #30373d;
  --text: #f5f7f8;
  --muted: #b2bac0;
  --red: #df2636;
  --gold: #d4af37;
}

.dealer-plans-page { margin: 0; background: radial-gradient(circle at 50% 0, #20262b 0, #080a0c 36%); color: var(--text); font-family: Poppins, sans-serif; }
.dealer-plans-page > header { min-height: 86px; display: flex; align-items: center; padding: var(--rc-space-7) max(var(--rc-space-10), 5vw); border-bottom: 1px solid var(--line); background: rgba(8, 10, 12, .92); }
.dealer-plans-page .brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-size: 23px; }
.dealer-plans-page .brand img { width: 42px; height: 42px; object-fit: contain; }
.dealer-plans-page .brand i { font-style: normal; color: var(--red); }
.dealer-plans-page nav { margin-left: auto; display: flex; gap: 25px; }
.dealer-plans-page nav a { color: #d0d5d8; text-decoration: none; font-size: var(--rc-text-body); }
.dealer-plans-page nav a:hover { color: var(--gold); }
.dealer-plans-page main { width: min(1240px, 92vw); margin: auto; }

.plans-hero { text-align: center; padding: 72px 8% 52px; }
.plans-hero > span,
.comparison-heading > span { color: var(--gold); font-size: var(--rc-text-body-sm); font-weight: 800; letter-spacing: .15em; }
.plans-hero h1 { max-width: 950px; margin: 17px auto; font-size: clamp(34px, 5vw, 63px); line-height: 1.08; }
.plans-hero p { max-width: 820px; margin: 0 auto; color: #c4cacf; font-size: var(--rc-text-base); line-height: 1.8; }
.hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 25px; }
.hero-points b { padding: 9px 13px; border: 1px solid #394148; border-radius: 999px; background: #11161a; color: #e8ebed; font-size: var(--rc-text-sm); }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }

.comparison { margin: 76px 0 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.comparison-heading { padding: 30px; }
.comparison h2 { margin: var(--rc-space-3) 0 5px; font-size: 29px; }
.comparison p { margin: 0; color: var(--muted); font-size: var(--rc-text-body); }
.table-wrap { overflow-x: auto; }
.comparison table { width: 100%; min-width: 760px; border-collapse: collapse; }
.comparison th,
.comparison td { padding: 17px var(--rc-space-10); border-top: 1px solid var(--line); text-align: center; font-size: var(--rc-text-body-sm); }
.comparison th { background: #171d22; color: #f1f3f4; }
.comparison td { color: #c8ced2; }
.comparison th:first-child,
.comparison td:first-child { text-align: left; color: #f1f3f4; font-weight: 600; }
.comparison th:nth-child(3),
.comparison td:nth-child(3) { background: rgba(212, 175, 55, .05); }

.trust-note,
.terms-note { padding: var(--rc-space-9); border-radius: 12px; font-size: var(--rc-text-body); line-height: 1.75; }
.trust-note { border: 1px solid #7d6828; background: #24200f; color: #e0d29d; }
.trust-note b { color: #f1d774; }
.terms-note { border: 1px solid #313940; background: #11161a; color: #aeb6bc; }
.terms-note a { color: var(--gold); }

.crm-story { margin: var(--rc-space-11) 0; padding: 30px; border: 1px solid rgba(212, 175, 55, .34); border-radius: 20px; background: linear-gradient(145deg, #141a1e, #0c1013); }
.crm-story-heading > span { color: var(--gold); font-size: var(--rc-text-sm); font-weight: 800; letter-spacing: .14em; }
.crm-story-heading h2 { margin: 7px 0; font-size: 30px; }
.crm-story-heading p { max-width: 850px; margin: 0; color: var(--muted); font-size: var(--rc-text-body); line-height: 1.75; }
.crm-dictionary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rc-space-5); margin-top: var(--rc-space-9); }
.crm-dictionary article { padding: var(--rc-space-8); border: 1px solid rgba(212, 175, 55, .34); border-radius: 12px; background: rgba(212, 175, 55, .06); }
.crm-dictionary strong { display: block; color: var(--gold); font-size: var(--rc-text-base); letter-spacing: .1em; }
.crm-dictionary h3 { margin: 5px 0; font-size: var(--rc-text-md); }
.crm-dictionary p { margin: 0; color: #adb5bb; font-size: var(--rc-text-xs); line-height: 1.7; }
.crm-story-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 22px; }
.crm-story-steps article { padding: var(--rc-space-8); border: 1px solid #30383e; border-radius: 12px; background: #11161a; }
.crm-story-steps b { color: var(--gold); font-size: var(--rc-text-sm); }
.crm-story-steps h3 { margin: var(--rc-space-3) 0 var(--rc-space-2); font-size: var(--rc-text-md); }
.crm-story-steps p { margin: 0; color: #9fa8ae; font-size: var(--rc-text-xs); line-height: 1.65; }
.crm-story-note { margin: var(--rc-space-6) 0 0; padding: 13px; border-radius: 10px; background: rgba(212, 175, 55, .08); color: #d0c49b; font-size: var(--rc-text-sm); }
.dealer-plans-page > footer { padding: 45px; color: #778188; text-align: center; }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plans-hero { padding-left: 5%; padding-right: 5%; }
  .crm-dictionary,
  .crm-story-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .dealer-plans-page > header { padding-inline: 4vw; }
  .dealer-plans-page > header nav a:not(:last-child) { display: none; }
  .plans-hero { padding-top: 50px; }
  .plans-hero p { font-size: var(--rc-text-md); }
  .comparison-heading,
  .crm-story { padding: 22px; }
  .comparison .table-wrap { overflow: visible; }
  .comparison table { min-width: 0; display: block; }
  .comparison thead { display: none; }
  .comparison tbody { display: grid; gap: var(--rc-space-3); padding: var(--rc-space-3); }
  .comparison tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .comparison td { min-width: 0; min-height: 58px; padding: var(--rc-space-4); border: 0; background: #12171b; color: #c8ced2; display: flex; flex-direction: column; justify-content: center; gap: var(--rc-space-1); text-align: left; }
  .comparison td:first-child { grid-column: 1 / -1; min-height: 0; padding: var(--rc-space-4) var(--rc-space-5); border-bottom: 1px solid var(--line); background: #171d22; }
  .comparison td:nth-child(3) { background: rgba(212, 175, 55, .08); }
  .comparison td:not(:first-child)::before { content: attr(data-plan-label); color: var(--gold); font-size: var(--rc-text-xs); font-weight: 800; }
  .crm-dictionary,
  .crm-story-steps { grid-template-columns: 1fr; }
}
