/* The comparison uses Zormeki's existing light/dark color tokens. */
.compare-wrap { max-width:650px; margin:0 auto; padding:22px 22px 56px; line-height:1.65; scroll-margin-top:88px; }
.compare-wrap [hidden] { display:none !important; }
.compare-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--text-sub); font-size:13px; margin-bottom:26px; }
.compare-eyebrow { color:var(--accent); font-weight:600; font-size:13px; letter-spacing:.06em; margin:0 0 12px; }
.compare-panel h1 { font-size:clamp(27px,5.5vw,40px); line-height:1.4; letter-spacing:-.03em; margin:0 0 14px; border:0; padding:0; }
.compare-panel h1[tabindex="-1"]:focus { outline:none; }
.compare-lead { font-size:16px; color:var(--text-sub); margin:0 0 28px; }
.compare-question { border:0; border-top:1px solid var(--line); padding:20px 0 24px; margin:0; min-width:0; }
.compare-question label { display:block; font-size:21px; font-weight:650; margin-bottom:8px; }
.compare-question .compare-context { margin:0 0 12px; color:var(--text-sub); font-size:14px; line-height:1.65; }
.compare-number { display:flex; align-items:center; gap:12px; }
.compare-number input { font:inherit; font-size:22px; font-variant-numeric:tabular-nums; color:var(--text); background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; padding:10px 14px; min-height:52px; width:150px; max-width:65%; }
.compare-number input:focus { outline:2px solid var(--accent); outline-offset:3px; }
.compare-number input[aria-invalid="true"] { border-color:var(--ng); }
.compare-number span { color:var(--text-sub); }
.compare-primary { font:inherit; font-weight:650; width:100%; min-height:52px; padding:14px 16px; border:1px solid transparent; border-radius:12px; background:var(--accent); color:var(--on-accent); cursor:pointer; line-height:1.5; }
.compare-primary:hover { filter:brightness(.95); }
.compare-primary:disabled { opacity:.55; cursor:wait; }
.compare-primary:focus-visible,.compare-text-button:focus-visible,.compare-restart:focus-visible { outline:3px solid var(--accent-2); outline-offset:4px; }
.compare-small { font-size:12px; color:var(--text-sub); line-height:1.8; margin:14px 0; }
.compare-error { padding:12px 14px; border-left:3px solid var(--ng); background:var(--ng-soft); color:var(--ng); font-size:14px; margin:16px 0; }
.compare-invitation { background:var(--surface); padding:22px; border-radius:16px; margin:24px 0; }
.compare-invitation > p:first-child { margin:0 0 20px; font-weight:600; }
.compare-invitation label { display:block; font-size:12px; color:var(--text-sub); margin-bottom:7px; }
.compare-invitation input { display:block; width:100%; min-width:0; font:inherit; font-size:16px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--text); padding:11px; margin-bottom:12px; }
.compare-invitation .compare-small:empty { display:none; }
.compare-text-button { font:inherit; display:block; border:0; color:var(--accent); background:transparent; text-decoration:underline; text-underline-offset:4px; padding:10px 0; min-height:44px; cursor:pointer; }
.compare-invitation .compare-text-button { margin:4px auto 0; }
.compare-wait-note { display:flex; align-items:center; gap:10px; font-weight:600; }
.compare-dot { width:9px; height:9px; flex:none; border-radius:50%; background:var(--accent); }
.compare-own { margin:20px 0; border-top:1px solid var(--line); padding-top:16px; }
.compare-own summary,.compare-data summary { cursor:pointer; min-height:44px; padding:10px 0; }
.compare-own dl { margin:0; }
.compare-own dt { color:var(--text-sub); font-size:13px; }
.compare-own dd { margin:0 0 12px; }
.compare-result-card { border-top:1px solid var(--line); padding:22px 0 26px; }
.compare-result-card h2 { font-size:20px; margin:0 0 7px; padding:0; border:0; line-height:1.5; }
.compare-result-context { color:var(--text-sub); font-size:13px; margin:0 0 15px; }
.compare-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compare-person { padding:17px 18px; border-radius:12px; background:var(--surface); min-width:0; }
.compare-person:first-child { background:var(--accent-soft); }
.compare-person > span { display:block; font-size:13px; color:var(--text-sub); margin-bottom:8px; }
.compare-person strong { font-size:clamp(25px,6vw,36px); letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.3; }
.compare-person small { margin-left:5px; font-size:13px; font-weight:400; }
.compare-difference { margin:12px 0 0; font-size:14px; color:var(--text-sub); }
.compare-restart { display:block; text-align:center; margin:14px 0; padding:10px 0; min-height:44px; }
.compare-data { margin-top:32px; border-top:1px solid var(--line); padding-top:14px; font-size:13px; color:var(--text-sub); }
.compare-data p { margin:6px 0 14px; }
.compare-link-note { font-size:13px; line-height:1.8; color:var(--text-sub); margin:12px 0; }
.compare-link-note strong { color:var(--text); }
.compare-recent { padding:14px 16px; margin:0 0 22px; background:var(--accent-soft); border-radius:12px; }
.compare-recent a { font-weight:650; display:inline-block; min-height:44px; padding:8px 0; }
.compare-recent p { margin:0; font-size:12px; color:var(--text-sub); }
.compare-personal { border-top:1px solid var(--line); margin:26px 0 0; padding-top:22px; }
.compare-personal h2 { font-size:18px; margin:0 0 10px; padding:0; border:0; }
.compare-personal > p { font-size:13px; line-height:1.8; }
.compare-personal input { display:block; width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--bg); border:1px solid var(--line-strong); border-radius:8px; padding:10px; }
.compare-personal .compare-small:empty { display:none; }
.compare-home-link { display:block; padding:16px 20px; margin:22px 0; border:1px solid var(--line); border-radius:12px; text-decoration:none; background:var(--surface); }
.compare-home-link strong { display:block; font-size:17px; }
.compare-home-link span { display:block; color:var(--text-sub); font-size:13px; margin-top:5px; }
@media(max-width:380px) {
  .compare-wrap { padding:18px 16px 40px; }
  .compare-crumb { margin-bottom:22px; }
  .compare-invitation { padding:18px 16px; }
  .compare-person { padding:14px 12px; }
  .compare-primary { font-size:15px; }
}