/* Editorial pages inherit the site's shared light/dark tokens and controls. */
.comparison-page{padding-block:2rem 4rem}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:1rem;color:var(--muted)}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:underline;text-underline-offset:.25em}
.comparison-header{padding-block:2.5rem 3rem;border-bottom:1px solid var(--line)}
.comparison-header .eyebrow{font-size:.8125rem}
.comparison-header h1{max-width:24ch;font-size:clamp(2.5rem,5.1vw,4.75rem);line-height:1.1;letter-spacing:-.05em;text-wrap:pretty;margin-block:1.25rem 1.5rem}
.comparison-header .article-deck{max-width:62ch;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.65}
.comparison-header .article-meta{font-size:1rem;max-width:none}
.comparison-prose{min-width:0;max-width:none;margin:0;font-size:1rem;line-height:1.8}
.comparison-prose section+section{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.comparison-prose section>h2:first-child{margin-top:0}
.comparison-prose h2{max-width:none;font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.2;margin-bottom:1.25rem}
.comparison-prose h3{font-size:1.25rem;line-height:1.4;letter-spacing:-.025em;text-wrap:pretty;margin-block:2rem .75rem}
.comparison-prose p{color:var(--muted)}
.comparison-prose p+p{margin-top:1rem}
.comparison-prose strong{font-weight:500;color:var(--ink)}
.comparison-grid{margin-block:2rem}
.comparison-grid>div{display:grid;gap:1rem;padding-block:1.5rem;border-top:1px solid var(--line)}
.comparison-grid>div:last-child{border-bottom:1px solid var(--line)}
/* The next section provides the boundary when a list ends the current section. */
.comparison-prose section>:is(.comparison-grid,.decision-list,.approach-list):last-child>div:last-child{border-bottom:0}
.comparison-grid dt{font-weight:500;line-height:1.5}
.comparison-grid dd{min-width:0}
.comparison-grid .comparison-label{font-size:1rem;font-weight:500;color:var(--ink);margin-bottom:.375rem}
.comparison-grid p+p{margin-top:0}
.workflow-pair{display:grid;gap:2rem;margin-block:1.75rem;padding-block:1.75rem;border-block:1px solid var(--line)}
.workflow-pair h3{margin-top:0}
.workflow-pair>div+div{padding-top:1.5rem;border-top:1px solid var(--line)}
.decision-list{margin-block:1.5rem}
.decision-list>div{padding-block:1.25rem;border-bottom:1px solid var(--line)}
.decision-list>div:first-child{padding-top:0}
.decision-list dt{font-weight:500;line-height:1.5;margin-bottom:.5rem}
.decision-list dd{color:var(--muted)}
.approach-list{margin-block:2rem}
.approach-list>div{display:grid;gap:.75rem;padding-block:1.5rem;border-top:1px solid var(--line)}
.approach-list>div:last-child{border-bottom:1px solid var(--line)}
.approach-list dt{font-size:1.375rem;line-height:1.3;letter-spacing:-.03em;font-weight:500}
.approach-list dd{min-width:0}
.approach-list a{display:inline-flex;align-items:baseline;gap:.75rem;padding-block:.5rem;min-height:2.75rem;margin-top:.5rem}
/* Keep one semantic table; narrow containers show each approach as a labelled card. */
.builder-overview{container-type:inline-size;margin-block:2rem}
.builder-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:1rem;line-height:1.6}
.builder-table caption{text-align:left;font-weight:500;color:var(--ink);padding-bottom:1rem}
.builder-table :is(th,td){padding:1rem .75rem;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:break-word}
.builder-table th{font-weight:500;color:var(--ink)}
.builder-table thead{background:var(--surface)}
.builder-table thead th{white-space:nowrap;font-size:.875rem;border-top:1px solid var(--line)}
.builder-table thead th:first-child{width:16%}
.builder-table thead th:nth-child(2){width:18%}
.builder-table td{color:var(--muted)}
.builder-table tbody th a{display:inline-flex;align-items:flex-start;min-height:3rem}
.builder-cell-label{display:none}
@container(max-width:54rem){
 .builder-table,.builder-table tbody,.builder-table tr,.builder-table :is(th,td),.builder-table caption{display:block;width:auto}
 .builder-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .builder-table tbody{display:grid;gap:1.5rem}
 .builder-table tbody tr{border:1px solid var(--line);padding:0 1.25rem 1.25rem}
 .builder-table tbody th{padding:.625rem 0;font-size:1.25rem}
 .builder-table td{padding:1rem 0 0;border:0}
 .builder-cell-label{display:block;font-weight:500;color:var(--ink);margin-bottom:.25rem}
}
.evaluation-steps{padding-left:1.5rem;margin-block:1.5rem;color:var(--muted)}
.evaluation-steps li{padding-left:.25rem}
.evaluation-steps li+li{margin-top:1rem}
.comparison-sources{font-size:1rem}
.comparison-sources ul{padding-left:1.25rem;margin-bottom:0}
.comparison-sources li{padding-left:.25rem}
.comparison-sources li+li{margin-top:.75rem}
.comparison-sources a{overflow-wrap:anywhere}
.comparison-cta{display:grid;gap:2rem;padding-block:2.5rem;margin-top:3.5rem;border-block:1px solid var(--line)}
.comparison-cta h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.15;max-width:25ch;margin-block:1rem 1.25rem}
.comparison-cta p:not(.eyebrow){font-size:1rem;line-height:1.75;max-width:62ch;color:var(--muted)}
.comparison-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;align-self:center;min-width:0}
.comparison-actions .primary-link{max-width:100%}
.comparison-actions .inline-link{display:inline-flex;align-items:center;min-height:2.75rem}
.related-comparisons{display:grid;gap:.25rem 2rem;padding-top:2.5rem}
.related-comparisons h2{grid-column:1/-1;font-size:1.25rem;letter-spacing:-.025em;margin-bottom:1rem}
.related-comparisons>a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-height:2.75rem;padding-block:.625rem;border-bottom:1px solid var(--line);font-size:1rem}
.related-comparisons>a:hover{color:var(--accent)}
.related-comparisons>a>span{flex-shrink:0}
@media(min-width:48rem){
 .comparison-grid>div{grid-template-columns:1fr 1.4fr 1.4fr;gap:1.5rem}
 .comparison-grid .comparison-label{font-size:.875rem}
 .workflow-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
 .workflow-pair>div+div{border-top:0;padding-top:0}
 .approach-list>div{grid-template-columns:9rem minmax(0,1fr);gap:2rem}
 .related-comparisons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:64rem){
 .comparison-page{padding-block:2rem 5rem}
 .breadcrumbs{font-size:.875rem}
 .comparison-header{padding-block:3rem 4rem}
 .comparison-header .article-meta{font-size:.875rem}
 .comparison-cta{grid-template-columns:minmax(0,1fr) auto;gap:var(--column-gap);margin-top:5rem;padding-block:3rem}
}