/* ---- Comparison article (/resources/compare/<slug>) ---- */
.cmp-hero{padding-bottom:clamp(8px,1.2vw,16px)}
.cmp-hero h1{font-family:var(--font-display);font-weight:550;font-size:clamp(30px,3.6vw,50px);line-height:1.05;letter-spacing:var(--display-tracking);color:var(--ink);margin:0;text-wrap:balance}
.cmp-hero h1 .vs{color:var(--ink-faint);font-weight:400}
.cmp-sub{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:14px 0 0;text-wrap:pretty}
.cmp-sub2{font-size:15px;line-height:1.6;color:var(--ink-faint);max-width:60ch;margin:8px 0 0;text-wrap:pretty}
.cmp-updated{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-faint);margin:20px 0 0}

.cmp-panel{margin-top:clamp(22px,2.4vw,32px);background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--rose);border-radius:var(--radius);box-shadow:var(--raise-sm);padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:12px}
.cmp-panel h3{font-family:var(--font-display);font-weight:560;font-size:17px;letter-spacing:-.015em;color:var(--ink);margin:0}
.cmp-panel p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
.cmp-panel strong{color:var(--ink);font-weight:600}

.cmp-lead{font-size:16px;line-height:1.62;color:var(--ink-soft);max-width:70ch;margin:0 0 20px;text-wrap:pretty}
.cmp-section-sub{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:66ch;margin:0;text-wrap:pretty}

.cmp-tablewrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);box-shadow:var(--raise-sm);margin-top:clamp(18px,2vw,26px)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.55}
table.cmp tr:last-child td{border-bottom:none}
table.cmp thead th{font-family:var(--font-display);font-weight:560;font-size:15px;letter-spacing:-.01em}
table.cmp th.c-feat{width:24%;font-family:var(--font-mono);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);background:var(--surface)}
table.cmp th.c-p3d{width:38%;color:var(--rose);background:color-mix(in oklab,var(--rose) 7%,var(--surface))}
table.cmp th.c-tk{width:38%;color:var(--ink);background:var(--bg-2,color-mix(in oklab,var(--ink) 5%,var(--surface)))}
table.cmp td.c-feat{font-weight:560;color:var(--ink);background:var(--bg)}
table.cmp td.p3d{background:color-mix(in oklab,var(--rose) 3%,var(--surface));color:var(--ink-soft)}
table.cmp td.tk{background:var(--surface);color:var(--ink-soft)}
.mark-good{color:var(--rose);font-weight:600}
.src{display:inline-block;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:var(--ink-faint)}
.src a{color:var(--ink-faint);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.src a:hover{color:var(--rose)}
.cmp-note{font-size:13px;line-height:1.6;color:var(--ink-faint);margin:14px 0 0;max-width:78ch;text-wrap:pretty}

.cmp-fits{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,22px);margin-top:clamp(18px,2vw,26px)}
@media(max-width:720px){.cmp-fits{grid-template-columns:1fr}}
.cmp-fit{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);box-shadow:var(--raise-sm);padding:clamp(20px,2vw,28px)}
.cmp-fit--p3d{border-top:3px solid var(--rose)}
.cmp-fit--tk{border-top:3px solid var(--ink)}
.cmp-fit h3{font-family:var(--font-display);font-weight:560;font-size:17px;letter-spacing:-.015em;color:var(--ink);margin:0}
.cmp-fit ul{margin:14px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:9px}
.cmp-fit li{font-size:14.5px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.cmp-fit li::marker{color:var(--ink-ghost,var(--ink-faint))}

.cmp-faq{margin-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--hairline)}
.cmp-faq__item{padding:18px 0;border-bottom:1px solid var(--hairline)}
.cmp-faq__item h3{font-family:var(--font-display);font-weight:560;font-size:16px;letter-spacing:-.015em;color:var(--ink);margin:0 0 6px}
.cmp-faq__item p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-soft);max-width:82ch;text-wrap:pretty}

.cmp-sources{columns:2;column-gap:36px;font-size:14px;line-height:1.55;padding-left:18px;margin:0;color:var(--ink-soft)}
@media(max-width:720px){.cmp-sources{columns:1}}
.cmp-sources li{margin-bottom:9px;break-inside:avoid}
.cmp-sources a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:2px;transition:color .2s var(--ease)}
.cmp-sources a:hover{color:var(--rose);text-decoration-color:currentColor}
.cmp-method{margin-top:clamp(20px,2.2vw,28px);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--raise-sm);padding:clamp(20px,2vw,26px);font-size:14.5px;line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
.cmp-method strong{color:var(--ink);font-weight:600}
:root[data-rose="subtle"] .cmp-hero h1 .vs,:root[data-rose="subtle"] .mark-good{color:var(--ink-faint)}

/* ---- Inline explanatory diagrams ---- */
.cmp-figure{margin:clamp(22px,2.4vw,32px) 0;display:flex;flex-direction:column;gap:12px;align-items:center}
.cmp-figure img{display:block;width:100%;max-width:640px;height:auto}
.guide-main .cmp-figure img{width:70%;max-width:448px}
.cmp-figure figcaption{font-family:var(--font-mono);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--ink-faint);text-align:center;max-width:60ch;text-wrap:pretty}
.cmp-figure figcaption b{color:var(--ink-soft);font-weight:600}

/* ---- Third-party site screenshots ---- */
.cmp-shot{margin:clamp(18px,2vw,26px) auto clamp(20px,2.2vw,28px);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:600px}
.cmp-shot img{display:block;width:100%;max-width:600px;height:auto;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface)}
.cmp-shot figcaption{font-family:var(--font-mono);font-size:11px;line-height:1.55;letter-spacing:.04em;color:var(--ink-faint);text-wrap:pretty;text-align:center;max-width:600px}
.cmp-shot figcaption a{color:var(--ink-faint);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.cmp-shot figcaption a:hover{color:var(--rose)}
.cmp-shots2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px);margin:clamp(18px,2vw,26px) 0 clamp(20px,2.2vw,28px)}
@media(max-width:720px){.cmp-shots2{grid-template-columns:1fr}}
.cmp-shots2 .cmp-shot{margin:0;max-width:none}

/* ---- Guide body + tables (restored) ---- */
table.cmp--matrix{min-width:920px;font-size:13.5px}
table.cmp--matrix thead th{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);background:var(--bg);white-space:nowrap}
table.cmp--matrix thead th:first-child{width:15%}
table.cmp--matrix td:first-child{font-weight:560;color:var(--ink);background:var(--bg);white-space:nowrap}
table.cmp--matrix td{color:var(--ink-soft);background:var(--surface)}
table.cmp--matrix tr.row-p3d td{background:color-mix(in oklab,var(--rose) 4%,var(--surface))}
table.cmp--matrix tr.row-p3d td:first-child{color:var(--rose);background:color-mix(in oklab,var(--rose) 8%,var(--bg))}
table.cmp--crit{min-width:640px}
table.cmp--crit thead th{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);background:var(--bg)}
table.cmp--crit td:first-child{width:30%;font-weight:560;color:var(--ink);background:var(--bg);vertical-align:top}
table.cmp--crit td{color:var(--ink-soft);background:var(--surface)}
table.cmp--pick{min-width:560px}
table.cmp--pick thead th{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);background:var(--bg)}
table.cmp--pick td:first-child{width:70%;color:var(--ink-soft);background:var(--surface);font-weight:400}
table.cmp--pick td:last-child{font-family:var(--font-display);font-weight:560;color:var(--ink);background:var(--bg);white-space:nowrap}
table.cmp--pick tr.row-p3d td:last-child{color:var(--rose)}
.cmp-h3{font-family:var(--font-display);font-weight:560;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.018em;line-height:1.25;color:var(--ink);margin:clamp(24px,2.4vw,32px) 0 10px;text-wrap:balance}
.cmp-h3:first-child{margin-top:0}
.cmp-body p{font-size:15.5px;line-height:1.65;color:var(--ink-soft);max-width:74ch;margin:0 0 14px;text-wrap:pretty}
.cmp-body p:last-child{margin-bottom:0}
.cmp-body p strong{color:var(--ink);font-weight:600}
.cmp-body ul{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px;max-width:74ch}
.cmp-body li{font-size:15px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.cmp-body li::marker{color:var(--ink-faint)}
.cmp-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:2px;transition:color .2s var(--ease)}
.cmp-body a:hover{color:var(--rose);text-decoration-color:currentColor}
.cmp-q{font-family:var(--font-display);font-weight:560;font-size:clamp(17px,1.5vw,19px);letter-spacing:-.018em;color:var(--ink);margin:clamp(22px,2.2vw,28px) 0 10px}
.cmp-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin:18px 0 0;padding:0;list-style:none}
.cmp-links a{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--rose);text-decoration:none}
.cmp-links a:hover{text-decoration:underline}
.cmp-srcgroup{margin:0 0 18px}
.cmp-srcgroup h3{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);margin:0 0 8px}
.cmp-srcgroup ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.cmp-srcgroup li{font-size:13.5px;line-height:1.5;color:var(--ink-soft);word-break:break-word}
.cmp-srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,1.8vw,26px);margin-top:clamp(16px,1.8vw,24px)}

/* ---- Inline architecture stacks ---- */
.cmp-stack{font-family:var(--font-mono);font-size:13px;line-height:1.85;letter-spacing:.01em;color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--rose);border-radius:var(--radius-sm);box-shadow:var(--raise-sm);padding:14px 18px;margin:16px 0 18px;max-width:74ch;text-wrap:pretty}
.cmp-fits--qa{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.cmp-fits--qa{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.cmp-fits--qa{grid-template-columns:1fr}}