/* Editorial comparison, within the existing released GNFM design system. */
.comparison-guide{padding-block:26px 65px;max-width:1100px}
.comparison-guide .breadcrumbs{padding:0;margin-bottom:12px}
.comparison-hero{display:grid;grid-template-columns:minmax(0,1fr) 165px;gap:65px;align-items:center;padding-bottom:30px}
.comparison-hero h1{font-size:clamp(32px,3.9vw,48px);max-width:21ch}
.comparison-hero .eyebrow{margin-bottom:18px}
.comparison-hero .lead{font-size:16px;margin-top:16px;max-width:45ch}
.comparison-hero .article-byline{font-size:12px;color:var(--muted);margin-top:20px}
.comparison-hero .text-link{margin-top:10px}
.comparison-hero figure{justify-self:center;max-width:145px}
.comparison-hero .device{width:125px}
.comparison-hero figcaption{font-size:11px;text-align:center;margin-top:12px}
.comparison-disclosure{padding:20px 0;border-block:1px solid var(--line);margin-bottom:32px}
.comparison-disclosure p{font-size:13px;line-height:1.7;max-width:90ch;color:var(--muted)}
.comparison-disclosure strong{color:var(--ink);font-weight:600}
.comparison-heading{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start;margin-bottom:22px}
.comparison-heading h2,.comparison-options>h2,.recording-alternative h2,.comparison-method h2,.comparison-next h2{font-size:32px;letter-spacing:-.035em}
.comparison-heading p{font-size:14px;line-height:1.65;color:var(--muted)}
.app-comparison{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;line-height:1.65}
.app-comparison caption{text-align:left;font-size:11px;color:var(--muted);padding:0 0 12px;caption-side:top}
.app-comparison th,.app-comparison td{padding:18px 18px 20px 0;vertical-align:top;text-align:left;border-bottom:1px solid var(--line);overflow-wrap:break-word}
.app-comparison th:last-child,.app-comparison td:last-child{padding-right:0}
.app-comparison thead th{font-size:11px;letter-spacing:.02em;font-weight:600;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);color:var(--muted)}
.app-comparison thead th:first-child{width:20%}
.app-comparison tbody th{font-size:16px;line-height:1.45;font-weight:600}
.app-comparison tbody th a{text-decoration:none}
.app-comparison tbody th a:hover{text-decoration:underline}
.app-comparison small{display:block;font-size:10px;font-weight:400;line-height:1.5;color:var(--muted);margin-top:9px}
.comparison-note{font-size:12px;color:var(--muted);margin-top:16px;max-width:85ch}
.comparison-options{padding-top:55px}
.comparison-options>h2{margin-bottom:12px}
.comparison-option{display:grid;grid-template-columns:230px minmax(0,1fr);gap:35px;padding:30px 0;border-bottom:1px solid var(--line);scroll-margin-top:30px}
.option-heading{display:flex;gap:16px;align-items:baseline}
.option-number{font:600 13px/1.5 Lora,Georgia,serif;color:var(--accent)}
.option-heading h3{font:600 23px/1.35 Lora,Georgia,serif;letter-spacing:-.03em}
.comparison-option p{font-size:14px;line-height:1.75;color:var(--muted)}
.comparison-option p+p{margin-top:12px}
.comparison-option strong{font-weight:600;color:var(--ink)}
.comparison-option .option-sources{font-size:12px;margin-top:17px;line-height:1.9}
.option-sources span{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}
.option-sources a{display:inline-block;padding-block:4px}
.recording-alternative{padding-block:40px;margin-top:30px;border-bottom:1px solid var(--line)}
.recording-alternative .eyebrow{margin-bottom:16px}
.recording-alternative>p:not(.eyebrow){font-size:15px;color:var(--muted);margin-top:20px;max-width:75ch}
.recording-alternative .text-link{margin-top:12px}
.comparison-method{padding-top:35px;max-width:80ch}
.comparison-method p{font-size:13px;line-height:1.75;color:var(--muted);margin-top:18px;max-width:none}
.comparison-method h2{font-size:26px}
.comparison-next{padding-top:35px}
.comparison-next p{font-size:15px;color:var(--muted);margin-top:18px;max-width:70ch}
@media(max-width:800px){.comparison-hero{gap:30px;grid-template-columns:minmax(0,1fr) 135px}.comparison-hero figure{max-width:135px}.comparison-hero h1{font-size:40px}.comparison-hero .lead{font-size:16px}.comparison-option{grid-template-columns:185px minmax(0,1fr);gap:25px}.comparison-heading{gap:25px}.app-comparison{font-size:12px}.app-comparison th,.app-comparison td{padding-right:12px}.app-comparison tbody th{font-size:14px}}
@media(max-width:600px){
.comparison-guide{padding-block:20px 40px}.comparison-guide .breadcrumbs{font-size:11px;margin-bottom:22px}
.comparison-hero{grid-template-columns:minmax(0,1fr) 90px;gap:18px;align-items:start;padding-bottom:24px}
.comparison-hero .eyebrow{font-size:9px;letter-spacing:.08em;line-height:1.6;margin-bottom:13px}
.comparison-hero h1{font-size:30px;line-height:1.15}.comparison-hero h1 br{display:none}
.comparison-hero .lead{font-size:13px;line-height:1.65;margin-top:16px}.comparison-hero .article-byline{font-size:10px;line-height:1.7;margin-top:16px}
.comparison-hero .text-link{font-size:11px;gap:6px;margin-top:6px}.comparison-hero figure{padding-top:35px}.comparison-hero .device{width:90px}.comparison-hero figcaption{font-size:8px;line-height:1.6;margin-top:9px}
.comparison-disclosure{padding-block:18px;margin-bottom:26px}.comparison-disclosure p{font-size:11px;line-height:1.75}
.comparison-heading{display:block;margin-bottom:18px}.comparison-heading h2,.comparison-options>h2,.recording-alternative h2,.comparison-next h2{font-size:28px}.comparison-heading p{margin-top:14px;font-size:13px}
.app-comparison,.app-comparison tbody{display:block}.app-comparison caption{display:block;font-size:10px;padding-bottom:15px}
.app-comparison thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-comparison tr{display:block;padding-block:22px;border-top:1px solid var(--line)}
.app-comparison tbody tr:last-child{border-bottom:1px solid var(--line)}
.app-comparison tbody th{display:block;padding:0 0 14px;border:0;font-size:21px;line-height:1.4;width:auto}
.app-comparison small{display:inline;font-size:10px;margin-left:8px}
.app-comparison td{display:grid;grid-template-columns:86px minmax(0,1fr);gap:16px;padding:8px 0;border:0;font-size:12px;line-height:1.7}
.app-comparison td::before{content:attr(data-label);font-size:10px;color:var(--muted);font-weight:600;padding-top:2px}
.comparison-note{font-size:11px;margin-top:16px}
.comparison-options{padding-top:35px}.comparison-options>h2{margin-bottom:0}
.comparison-option{display:block;padding-block:25px}.option-heading{margin-bottom:14px;gap:12px}.option-heading h3{font-size:23px}.comparison-option p{font-size:13px;line-height:1.75}.comparison-option .option-sources{font-size:11px;margin-top:15px}.option-sources span{font-size:9px}
.recording-alternative{margin-top:0;padding-block:30px}.recording-alternative .eyebrow{font-size:10px}.recording-alternative>p:not(.eyebrow){font-size:13px;margin-top:17px}.recording-alternative .text-link{font-size:12px}
.comparison-method{padding-top:30px}.comparison-method h2{font-size:24px}.comparison-method p{font-size:12px;margin-top:16px}.comparison-next{padding-top:30px}.comparison-next p{font-size:13px}
}
@media(max-width:360px){.comparison-hero{grid-template-columns:minmax(0,1fr) 76px;gap:13px}.comparison-hero h1{font-size:27px}.comparison-hero .device{width:76px}.comparison-hero .lead{font-size:12px}.app-comparison td{grid-template-columns:72px minmax(0,1fr);gap:13px}.app-comparison small{display:block;margin:6px 0 0}.comparison-heading h2,.comparison-options>h2{font-size:26px}}
