.compare-hero .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.compare-hero h1 { max-width: 15ch; }
.compare-hero .lede { max-width: 40ch; }
.disclaim { font-size: 0.95rem; color: var(--fg-muted); max-width: none; text-wrap: balance; margin: calc(-1 * var(--s3)) 0 var(--s6); }
.checked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s6); font-size: 0.92rem; color: var(--fg-muted); }
.checked time { font-weight: 600; color: var(--fg); }
.checked a { color: var(--fg-2); text-underline-offset: 3px; }
@media (max-width: 960px) { .compare-hero .split { grid-template-columns: minmax(0, 1fr); } }

.answer { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s6); }
.answer h2 { font-size: 1.5rem; margin-bottom: var(--s5); }
.answer h3 { font-size: 1rem; margin: 0 0 var(--s3); }
.answer .ticks { font-size: 0.98rem; margin-bottom: var(--s6); }
.answer .stay { border-top: 1px solid var(--line); padding-top: var(--s5); }
.answer .stay p { margin: 0; color: var(--fg-2); font-size: 0.98rem; }
@media (max-width: 560px) { .answer { padding: var(--s5); } }

.table-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s5); }
.table-head .section-head { margin-bottom: 0; }
.table-head .small { margin: 0; }
table.compare caption { text-align: left; padding: 14px 18px; font-size: 0.88rem; color: var(--fg-muted); border-bottom: 1px solid var(--line); caption-side: top; }
.compare thead th small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.82rem; margin-top: 2px; }
.compare tbody th { width: 22%; font-weight: 600; }
.compare td p { margin: 0 0 6px; }
.compare td p:last-child { margin-bottom: 0; }
.compare .src { display: inline-block; margin-top: 6px; font: 0.78rem/1.3 var(--mono); color: var(--fg-muted); text-underline-offset: 3px; }
.compare .src:hover { color: var(--fg); }
.compare .note-cell { color: var(--fg-muted); font-size: 0.9rem; }

@media (max-width: 720px) {
  .table-wrap.stack { overflow: visible; border: 0; background: none; border-radius: 0; }
  .stack table.compare { min-width: 0; }
  .stack table.compare caption { padding: 0 0 var(--s4); border: 0; }
  .stack .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stack .compare tbody, .stack .compare tr, .stack .compare th, .stack .compare td { display: block; width: auto; }
  .stack .compare tr { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s4); overflow: hidden; }
  .stack .compare tbody th { padding: 12px 16px; background: var(--bg-alt); font-size: 0.95rem; border-bottom: 1px solid var(--line); }
  .stack .compare td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .stack .compare tr > :last-child { border-bottom: 0; }
  .stack .compare tr:last-child > * { border-bottom: 1px solid var(--line); }
  .stack .compare tr:last-child > :last-child { border-bottom: 0; }
  .stack .compare td::before { content: attr(data-col); display: block; font-size: 0.8rem; font-weight: 600; color: var(--fg-muted); margin-bottom: 4px; }
}

.ahead { border-left: 2px solid var(--line); padding-left: var(--s5); margin-top: var(--s6); }
.ahead h3 { font-size: 1.05rem; margin-bottom: var(--s3); }
.ahead ul { margin: 0; padding-left: 1.1em; color: var(--fg-2); }
.ahead li { margin-bottom: var(--s2); }
.ahead li::marker { color: var(--fg-muted); }

.diff { margin: var(--s6) 0 0; display: grid; gap: var(--s5); }
.diff div { padding-left: var(--s5); border-left: 2px solid var(--line); }
.diff dt { font-weight: 600; margin-bottom: 4px; }
.diff dd { margin: 0; color: var(--fg-2); }

.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
.terms h2 { font-size: 1.6rem; margin-bottom: var(--s4); }
.terms p { color: var(--fg-2); max-width: 48ch; }
@media (max-width: 760px) { .terms { grid-template-columns: 1fr; gap: var(--s6); } }

.sources { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s6); max-width: 54rem; }
.sources h2 { font-size: 1.6rem; margin-bottom: var(--s4); }
.sources > p { color: var(--fg-2); max-width: 64ch; }
.sources ol { margin: var(--s5) 0; padding-left: 1.3em; display: grid; gap: var(--s3); font-size: 0.95rem; }
.sources li a { overflow-wrap: anywhere; }
.sources li span { color: var(--fg-muted); }
.sources h3 { font-size: 1rem; margin: var(--s5) 0 var(--s2); }
@media (max-width: 560px) { .sources { padding: var(--s5); } }

.legal { flex-basis: 100%; margin: 0; font-size: 0.85rem; }

.demo-page.v-bake { background: #FFFCF6; color: #3B2414; }
.v-bake .dp-logo { color: #8A3B12; }
.v-bake .dp-hero h4 { color: #3B2414; }
.v-bake .dp-btn { background: #8A3B12; }
.v-bake .dp-img { background:
  radial-gradient(ellipse at 50% 62%, #C98A4B 0 26%, transparent 27%),
  radial-gradient(ellipse at 50% 66%, #E9D3B0 0 34%, transparent 35%),
  linear-gradient(170deg, #F6E8D2 0%, #EBD4B2 100%); }
.v-bake .dp-prices, .v-bake .dp-nav { border-color: #F0E3CF; }
.v-bake .dp-prices { background: #F0E3CF; }
.v-bake .dp-prices div { background: #FFFCF6; }

.demo-page.v-arch { background: #F7F7F5; color: #1B1B1B; font-family: system-ui, sans-serif; }
.v-arch .dp-logo { color: #1B1B1B; letter-spacing: .12em; font: 700 13px/1 system-ui, sans-serif; }
.v-arch .dp-hero h4 { font: 600 26px/1.15 system-ui, sans-serif; letter-spacing: -.02em; color: #1B1B1B; }
.v-arch .dp-btn { background: #1B1B1B; border-radius: 0; }
.v-arch .dp-img { border-radius: 0; background:
  linear-gradient(90deg, transparent 0 62%, #C8CCC6 62% 64%, transparent 64%),
  linear-gradient(180deg, #DCE3E8 0 55%, #B5BDB4 55% 100%); }
.v-arch .dp-prices b { font: 600 18px/1.2 system-ui, sans-serif; }

.demo-page.v-app { background: #FFFFFF; color: #101828; font-family: system-ui, sans-serif; }
.v-app .dp-logo { color: #3538CD; font: 700 15px/1 system-ui, sans-serif; }
.v-app .dp-hero { grid-template-columns: 1fr; padding-bottom: 18px; }
.v-app .dp-hero h4 { font: 650 24px/1.2 system-ui, sans-serif; letter-spacing: -.02em; color: #101828; }
.v-app .dp-btn { background: #3538CD; border-radius: 6px; }
.v-app .dp-prices b { font: 650 20px/1.2 system-ui, sans-serif; }
.v-app .dp-prices div small { display: block; color: #B42318; font-size: 11.5px; margin-top: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.checked time { margin-left: 0.25em; }
.sources li span { display: block; }
@media (min-width: 961px) { .demo-sticky { position: sticky; top: 96px; } }
@media (min-width: 721px) {
  .compare.wide tbody th { width: 15%; }
  .compare.wide { font-size: 0.93rem; }
  .compare.wide th, .compare.wide td { padding: 14px; }
}

/* Table: one surface, our columns marked by a coral rule, a divider between products */
.compare .us { background: none; }
.compare thead th { background: var(--surface); color: var(--fg); font-size: 0.95rem; font-weight: 600; border-bottom: 2px solid var(--fg); vertical-align: bottom; }
.compare thead th.us { box-shadow: inset 0 3px 0 var(--ht-coral); }
.compare td.us + td:not(.us), .compare thead th.us + th:not(.us) { border-left: 2px solid var(--line); }
.compare th, .compare td, .compare td p { text-wrap: wrap; }
.compare tbody th { color: var(--fg); }
.compare td { color: var(--fg-2); }
.compare .src { font: 0.8rem/1.3 var(--font); margin-top: 4px; margin-right: 10px; text-decoration-thickness: 1px; }
.compare thead tr:last-child > th { border-bottom: 2px solid var(--fg); }
.compare { table-layout: fixed; }
.compare thead th:first-child { width: 18%; }
@media (max-width: 720px) { .compare { table-layout: auto; } }