.page-car-compare {
    --cc-ink: var(--cjl-ink, var(--ink, #171816));
    --cc-muted: var(--cjl-muted, var(--ink3, var(--ink-3, #696b65)));
    --cc-paper: var(--cjl-paper, var(--paper, #faf8f2));
    --cc-panel: var(--cjl-surface, var(--card, #fffdf8));
    --cc-line: var(--cjl-line, var(--border, #d8d3c7));
    --cc-accent: var(--cjl-gold, var(--gold, #c69a38));
    --cc-accent-ink: var(--cjl-gold-text, var(--gold-text, #7d5909));
}

.cjl-compare { width: 100%; max-width: 1240px; min-width: 0; margin: 0 auto; color: var(--cc-ink); }
.cjl-compare__hero { position: relative; padding: clamp(24px, 5vw, 58px) clamp(18px, 4vw, 48px); border: 1px solid var(--cc-line); background: var(--cc-panel); overflow: hidden; }
.cjl-compare__hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(var(--cc-line) 1px, transparent 1px), linear-gradient(90deg, var(--cc-line) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent 20%, #000); }
.cjl-compare__eyebrow, .cjl-data-card header p { margin: 0 0 10px; color: var(--cc-accent-ink); font: 700 12px/1.2 ui-monospace, "Cascadia Mono", monospace; letter-spacing: .16em; }
.cjl-compare__title-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.cjl-compare__title-row h1 { margin: 0; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(34px, 6vw, 70px); line-height: .98; letter-spacing: -.045em; }
.cjl-compare__title-row p { max-width: 680px; margin: 16px 0 0; color: var(--cc-muted); line-height: 1.8; }
.cjl-compare__stamp { flex: 0 0 auto; display: grid; width: 108px; aspect-ratio: 1; place-content: center; border: 2px solid var(--cc-accent); border-radius: 50%; text-align: center; transform: rotate(-6deg); }
.cjl-compare__stamp b { font: 800 30px/1 ui-monospace, monospace; }
.cjl-compare__stamp span { margin-top: 5px; color: var(--cc-muted); font-size: 12px; letter-spacing: .12em; }

.cjl-compare__selector { min-width: 0; margin: 18px 0; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--cc-line); background: var(--cc-panel); }
.cjl-compare__selector-head, .cjl-compare__selector-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cjl-compare__selector h2, .cjl-data-card h2 { margin: 0; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 22px; }
.cjl-compare__selector-head p { margin: 4px 0 0; color: var(--cc-muted); font-size: 13px; }
.cjl-compare__select-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: 12px; margin: 20px 0; }
.cjl-compare__select { display: grid; min-width: 0; gap: 7px; }
.cjl-compare__select > span { color: var(--cc-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cjl-compare__select em { color: var(--cc-accent-ink); font-style: normal; }
.cjl-compare__select select { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; padding: 0 38px 0 13px; border: 1px solid var(--cc-line); border-radius: 2px; background: var(--cc-paper); color: var(--cc-ink); font: inherit; text-overflow: ellipsis; }
.cjl-compare__select select:focus { outline: 3px solid color-mix(in srgb, var(--cc-accent) 28%, transparent); border-color: var(--cc-accent); }
.cjl-compare__select.is-optional { display: none; }
.cjl-compare__switch { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; }
.cjl-compare__switch input { width: 18px; height: 18px; accent-color: var(--cc-accent); }
.cjl-compare__selector .cjl-btn--primary, .cjl-compare__selector .cjl-btn--secondary { min-height: 42px; border-radius: 2px; cursor: pointer; font-weight: 700; }
.cjl-compare__selector .cjl-btn--primary { padding: 0 24px; border: 1px solid var(--cc-accent); background: var(--cc-accent); color: #17120a; }
.cjl-compare__selector .cjl-btn--secondary { padding: 0 16px; border: 1px solid var(--cc-line); background: transparent; color: var(--cc-ink); }
.cjl-compare__client-error, .cjl-compare__notice { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid #b64335; background: color-mix(in srgb, #b64335 10%, var(--cc-panel)); }

.cjl-compare__summary { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 22px; margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--cc-accent); background: var(--cc-panel); }
.cjl-compare__summary div { display: grid; gap: 3px; }
.cjl-compare__summary span { color: var(--cc-muted); font-size: 12px; letter-spacing: .08em; }
.cjl-compare__summary strong { font-size: 14px; }
.cjl-compare__summary p { margin: 0; color: var(--cc-muted); font-size: 13px; line-height: 1.6; }

.cjl-compare__table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--cc-line); background: var(--cc-panel); scrollbar-color: var(--cc-accent) var(--cc-paper); }
.cjl-compare__table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.cjl-compare__table th, .cjl-compare__table td { padding: 14px; border-right: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); vertical-align: top; text-align: left; }
.cjl-compare__table thead th { position: sticky; top: 0; z-index: 2; background: var(--cc-ink); color: var(--cc-paper); }
.cjl-compare__table thead th:first-child { width: 180px; }
.cjl-compare__table thead span { display: block; color: color-mix(in srgb, var(--cc-paper) 68%, transparent); font-size: 12px; }
.cjl-compare__table thead b { display: block; margin-top: 5px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 15px; }
.cjl-compare__section-row th { padding: 10px 14px; background: color-mix(in srgb, var(--cc-accent) 18%, var(--cc-panel)); color: var(--cc-accent-ink); font: 800 12px/1.3 ui-monospace, monospace; letter-spacing: .12em; }
.cjl-compare__table tbody tr.is-different > th { box-shadow: inset 3px 0 var(--cc-accent); }
.cjl-compare__table tbody th { font-size: 13px; }
.cjl-compare__table td strong { display: block; font-size: 14px; line-height: 1.55; }
.cjl-compare__table td a, .cjl-data-card a { color: var(--cc-accent-ink); text-underline-offset: 3px; }
.cjl-compare__table td a, .cjl-compare__table td time { display: block; margin-top: 7px; font-size: 12px; }
.cjl-compare__table td time, .cjl-compare__table td.is-missing strong { color: var(--cc-muted); }
.cjl-compare__table td.is-missing strong { font-weight: 500; }
.cjl-compare__table tbody th small { display: block; margin-top: 6px; color: var(--cc-muted); font-weight: 400; line-height: 1.5; }
.cjl-compare__diff-label, .cjl-compare .cjl-status--insufficient { display: inline-block; margin: 5px 4px 0 0; padding: 2px 5px; border: 1px solid var(--cc-accent); color: var(--cc-accent-ink); font-size: 12px; line-height: 1.2; }
.cjl-compare .cjl-status--insufficient { border-style: dashed; }

.cjl-compare__evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.cjl-compare .cjl-data-card { padding: 22px; border: 1px solid var(--cc-line); background: var(--cc-panel); }
.cjl-data-card article { padding: 14px 0; border-bottom: 1px solid var(--cc-line); }
.cjl-data-card article > a { display: block; font-family: "Noto Serif SC", "Songti SC", serif; font-weight: 700; line-height: 1.5; }
.cjl-data-card article span { display: block; margin-top: 6px; color: var(--cc-muted); font-size: 12px; }
.cjl-data-card article span a { display: inline; }
.cjl-compare__empty { margin: 18px 0; padding: clamp(28px, 6vw, 70px); border: 1px dashed var(--cc-line); background: var(--cc-panel); text-align: center; }
.cjl-compare .cjl-empty > .cjl-compare__empty-code { display: block; margin-bottom: 12px; color: var(--cc-accent-ink); font: 700 12px/1.2 ui-monospace, monospace; letter-spacing: .18em; }
.cjl-compare__empty h2 { margin: 0; font-family: "Noto Serif SC", "Songti SC", serif; }
.cjl-compare__empty p { max-width: 620px; margin: 10px auto 0; color: var(--cc-muted); line-height: 1.75; }
.cjl-compare__empty--compact { padding: 30px; }

@media (max-width: 720px) {
    .cjl-compare__hero { padding: 24px 18px; }
    .cjl-compare__title-row { align-items: flex-start; }
    .cjl-compare__stamp { width: 76px; }
    .cjl-compare__stamp b { font-size: 22px; }
    .cjl-compare__select-grid, .cjl-compare__evidence-grid { grid-template-columns: 1fr; }
    .cjl-compare__selector-head { align-items: flex-start; }
    .cjl-compare__summary { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cjl-compare__summary p { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
    .cjl-compare__stamp { display: none; }
    .cjl-compare__selector-head, .cjl-compare__selector-actions { align-items: stretch; flex-direction: column; }
    .cjl-compare__add, .cjl-compare__selector .cjl-btn--primary { width: 100%; }
    .cjl-compare__table { min-width: 690px; }
}

.elder .cjl-compare { font-size: 1.08em; }
.elder .cjl-compare__table td strong, .elder .cjl-compare__table tbody th { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .cjl-compare * { scroll-behavior: auto !important; } }