/* Format comparison extends the existing white editorial product system. */
.format-compare{max-width:1200px;margin:auto;padding:0 40px 72px;font-size:15px;line-height:1.7;color:var(--nadora-text)}
.format-compare h1,.format-compare h2{font-weight:400;color:var(--nadora-ink);text-wrap:balance}
.format-compare h2{font-size:25px;line-height:1.5;letter-spacing:.12em}
.format-compare a{text-underline-offset:4px}
.format-compare :where(a,summary){scroll-margin-top:130px}
.compare-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:24px 0;font-size:12px}
.compare-breadcrumb a{display:inline-flex;align-items:center;min-height:32px;text-decoration:underline}
.compare-intro{text-align:center;max-width:760px;margin:12px auto 30px}
.compare-intro h1{font-size:32px;line-height:1.4;letter-spacing:.1em;margin:0 0 15px}
.compare-intro p{max-width:64ch;margin:auto}
.compare-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:800px;margin:auto}
.compare-choice{min-width:0}
.compare-picture{display:block;background:var(--nadora-surface-muted)}
.compare-picture img{display:block;width:100%;height:300px;object-fit:contain}
.format-compare .compare-choice h2{font-size:16px;letter-spacing:.07em;line-height:1.5;margin:18px 0 5px;text-transform:uppercase}
.compare-use{font-size:14px;margin:0 0 12px;min-height:24px}
.compare-price{margin:0;font-variant-numeric:tabular-nums;color:var(--nadora-ink)}
.compare-price strong{font-size:24px;font-weight:400}
.compare-price span{font-size:13px;margin-left:5px}
.compare-rate{font-size:13px;margin:2px 0 16px;font-variant-numeric:tabular-nums}
.format-compare .refy-button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:13px 24px;font-size:12px;line-height:1.5;letter-spacing:.1em;text-align:center;text-decoration:none}
.compare-action{width:100%}
.compare-image-note{font-size:12px;max-width:800px;margin:16px auto 0}
.compare-detail,.compare-volume,.compare-questions,.compare-purchase{margin-top:64px}
.compare-detail>h2,.compare-questions>h2{margin:0 0 24px}
.compare-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:15px}
.compare-table caption{text-align:left;caption-side:top;font-size:13px;margin-bottom:16px}
.compare-table-label{width:30%}
.compare-table th,.compare-table td{padding:18px 20px;border-top:1px solid var(--nadora-border);vertical-align:top;overflow-wrap:anywhere}
.compare-table tr:last-child>*{border-bottom:1px solid var(--nadora-border)}
.compare-table th{font-weight:400;color:var(--nadora-ink)}
.compare-table thead th{background:var(--nadora-surface-muted)}
.compare-table td{font-variant-numeric:tabular-nums}
.compare-table td a{display:block;width:fit-content;min-height:44px;text-decoration:underline}
.compare-note{font-size:13px;max-width:74ch;margin:18px 0 0}
.compare-volume{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;padding:36px 0;border-top:1px solid var(--nadora-border);border-bottom:1px solid var(--nadora-border)}
.compare-volume h2{margin:0 0 15px}
.compare-volume p{max-width:62ch;margin:0}
.compare-volume dl{margin:0}
.compare-volume dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--nadora-border)}
.compare-volume dl>div:first-child{padding-top:0}
.compare-volume dd{font-size:28px;font-variant-numeric:tabular-nums;color:var(--nadora-ink);margin:0}
.compare-volume .compare-note{grid-column:1/-1;max-width:82ch}
.compare-questions{max-width:800px;margin-inline:auto}
.compare-questions details{border-top:1px solid var(--nadora-border)}
.compare-questions details:last-child{border-bottom:1px solid var(--nadora-border)}
.compare-questions summary{cursor:pointer;min-height:56px;padding:16px 24px 16px 0;font-size:15px;font-weight:400;color:var(--nadora-ink)}
.compare-questions details p{margin:0 0 22px;max-width:72ch;font-size:15px;overflow-wrap:anywhere}
.compare-purchase{max-width:800px;margin-inline:auto;text-align:center}
.compare-purchase h2{margin:0 0 14px}
.compare-purchase>p{max-width:70ch;margin:0 auto 20px}
.compare-purchase-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.compare-purchase .compare-checkout-note{font-size:14px}
.compare-purchase .compare-source,.compare-purchase .compare-notification{font-size:12px}
.compare-source a{display:inline-flex;align-items:center;min-height:32px;text-decoration:underline}
@media(hover:hover){.compare-picture:hover{opacity:.94}.compare-table a:hover,.compare-breadcrumb a:hover,.compare-source a:hover{text-decoration-thickness:2px}}
@media(max-width:699px){
 .format-compare{padding:0 20px 48px;font-size:15px}
 .compare-breadcrumb{padding:16px 0;font-size:12px}
 .compare-intro{margin:6px auto 24px;text-align:left}
 .compare-intro h1{font-size:25px;letter-spacing:.05em;line-height:1.5;margin-bottom:12px}
 .compare-choices{gap:14px}
 .compare-picture img{height:auto;aspect-ratio:5/6}
 .format-compare .compare-choice h2{font-size:14px;line-height:1.6;letter-spacing:.03em;margin-top:14px}
 .compare-use{font-size:13px;line-height:1.7;min-height:66px;margin-bottom:10px}
 .compare-price strong{font-size:22px}
 .compare-price span{font-size:12px;margin-left:3px}
 .compare-rate{font-size:12px;min-height:42px;margin-bottom:12px}
 .format-compare .refy-button{padding:13px 10px;font-size:11px;letter-spacing:.07em}
 .compare-image-note{margin-top:14px}
 .compare-detail,.compare-volume,.compare-questions,.compare-purchase{margin-top:44px}
 .format-compare h2{font-size:22px;letter-spacing:.06em}
 .compare-detail>h2,.compare-questions>h2{margin-bottom:18px}
 .compare-table{font-size:13px;line-height:1.7}
 .compare-table-label{width:30%}
 .compare-table th,.compare-table td{padding:14px 9px}
 .compare-table th:first-child{padding-left:0}
 .compare-table td:last-child,.compare-table th:last-child{padding-right:0}
 .compare-table caption{font-size:12px;line-height:1.7}
 .compare-volume{grid-template-columns:1fr;gap:24px;padding:26px 0}
 .compare-volume dl>div{gap:16px}
 .compare-volume dd{font-size:25px}
 .compare-volume .compare-note{grid-column:auto}
 .compare-questions summary,.compare-questions details p{font-size:14px}
 .compare-purchase-links{gap:14px}
}
@media(max-width:360px){
 .format-compare{padding-inline:16px}
 .compare-table th,.compare-table td{padding-inline:7px}
 .compare-use{min-height:88px}
 .compare-rate{min-height:62px}
 .format-compare .compare-choice h2{font-size:13px}
}