.compare-hero>div:first-child>p:last-child{max-width:46ch}
.compare-hero .page-hero-image{height:440px}

.compare-intro{padding:20px 5.4vw 70px;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end}
.compare-intro h2{font-size:clamp(36px,4.6vw,64px);line-height:.96;letter-spacing:-.07em;margin:18px 0 0}
.compare-intro h2 em{font-style:normal;color:var(--orange)}
.compare-intro p:not(.eyebrow){margin:0;max-width:48ch;color:var(--muted);line-height:1.55}

.compare-table-wrap{padding:0 5.4vw 90px;overflow:auto}
.compare-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;background:var(--paper)}
.compare-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.compare-table th,.compare-table td{padding:18px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.compare-table th:first-child,.compare-table td:first-child{border-left:1px solid var(--line);width:22%;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.compare-table thead th{border-top:1px solid var(--line);font:11px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.compare-table thead th:first-child{background:var(--cream)}
.compare-table .compare-moto{background:var(--dark);color:var(--paper);border-color:#3a3b38;width:39%}
.compare-table thead .compare-moto{color:var(--orange);font-weight:600}
.compare-table tbody td.compare-moto{font-size:15px;line-height:1.45;letter-spacing:-.02em}
.compare-table .compare-other{width:39%;color:var(--muted);font-size:15px;line-height:1.45}
.compare-table tbody tr:hover td:not(.compare-moto),.compare-table tbody tr:hover th{background:#f7f3ec}
.compare-table tbody tr:hover .compare-moto{background:#262725}
.compare-mark{display:flex;align-items:flex-start;gap:10px}
.compare-mark svg{flex:none;width:18px;height:18px;stroke-width:2.2}
.compare-yes svg{color:#4bc985}
.compare-no svg{color:#9a948a}
.compare-table .compare-moto .compare-yes svg{color:var(--orange)}

.compare-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line);margin:0 5.4vw 110px;border:1px solid var(--line)}
.compare-points article{background:var(--paper);padding:32px 28px 30px;min-height:240px}
.compare-points span{font:11px 'DM Mono',monospace;color:var(--orange);letter-spacing:.08em}
.compare-points h3{margin:18px 0 12px;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.04em}
.compare-points p{margin:0;color:var(--muted);line-height:1.5;max-width:36ch}

.compare-faq{padding:0 5.4vw 110px;display:grid;grid-template-columns:1fr 1.15fr;gap:10%;align-items:start}
.compare-faq h2{font-size:clamp(36px,4.6vw,64px);line-height:.96;letter-spacing:-.07em;margin:18px 0 16px}
.compare-faq h2 em{font-style:normal;color:var(--orange)}
.compare-faq .compare-faq-copy{margin:0;max-width:42ch;color:var(--muted);line-height:1.55}
.compare-faq .faq-list{margin-top:8px}

@media(max-width:800px){
  .compare-hero .page-hero-image{height:320px}
  .compare-intro,.compare-faq{display:block;padding-left:6vw;padding-right:6vw}
  .compare-intro{padding-bottom:40px}
  .compare-intro p:not(.eyebrow){margin-top:22px}
  .compare-table-wrap{padding:0 6vw 70px}
  .compare-table{min-width:0;display:block}
  .compare-table thead{display:none}
  .compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:100%;border:0}
  .compare-table tr{margin:0 0 16px;border:1px solid var(--line);background:var(--paper)}
  .compare-table th,.compare-table td{padding:14px 18px}
  .compare-table tbody th{background:var(--cream);border-bottom:1px solid var(--line);width:100%}
  .compare-table td.compare-moto{width:100%;border-bottom:1px solid #3a3b38}
  .compare-table td.compare-moto:before,.compare-table td.compare-other:before{display:block;margin-bottom:8px;font:10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
  .compare-table td.compare-moto:before{content:'MOTO24';color:var(--orange)}
  .compare-table td.compare-other:before{content:'Other workshops';color:var(--muted)}
  .compare-table tbody tr:hover td:not(.compare-moto),.compare-table tbody tr:hover .compare-moto{background:inherit}
  .compare-table tbody tr:hover .compare-moto{background:var(--dark)}
  .compare-points{grid-template-columns:1fr;margin:0 6vw 80px}
  .compare-points article{min-height:0}
  .compare-faq h2{margin-top:0}
  .compare-faq .faq-list{margin-top:36px}
}
