/* /compare — buyer comparison page (x1, 2026-10-01). Every rule scoped under .x1-compare. */

.x1-compare .hero-media .photo {min-height: 34rem;}

/* three options */
.x1-compare .x1c-opts {padding-top: 0;}
.x1-compare .x1c-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap);}
.x1-compare .x1c-card {display: flex; flex-direction: column; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--ink);}
.x1-compare .x1c-ico {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--accent);}
.x1-compare .x1c-ico svg {width: 22px; height: 22px;}
.x1-compare .x1c-card-h {font: 400 clamp(1.625rem, 1.35rem + .9vw, 2.125rem)/1.12 var(--serif); color: var(--ink); letter-spacing: -.015em; text-wrap: balance;}
.x1-compare .x1c-card p {color: var(--text); text-wrap: pretty;}
.x1-compare .x1c-card .d29-tlink {margin-top: auto; align-self: flex-start;}

/* pull line */
.x1-compare .x1c-aha-sec {padding-block: calc(var(--section) * .7);}
.x1-compare .x1c-aha {max-width: 22ch; margin-inline: auto; text-align: center; font: 400 clamp(2rem, 1.3rem + 2.8vw, 3.5rem)/1.12 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; position: relative; padding-top: 2.25rem;}
.x1-compare .x1c-aha::before {content: ""; position: absolute; top: 0; left: 50%; width: 3rem; height: 2px; margin-left: -1.5rem; background: var(--accent);}
.x1-compare .x1c-aha em {font-style: italic; color: var(--accent);}

/* worksheet — the signature element */
.x1-compare .x1c-ws {background: var(--surface); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); padding: clamp(1.25rem, .75rem + 2vw, 2.75rem);}
.x1-compare .x1c-ws-task {display: flex; align-items: flex-end; gap: 1rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);}
.x1-compare .x1c-ws-task span {font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent);}
.x1-compare .x1c-ws-task i {flex: 1; max-width: 28rem; height: 1.6rem; border-bottom: 1.5px solid var(--ink);}
.x1-compare .x1c-ws-t {width: 100%; border-collapse: collapse; table-layout: fixed;}
.x1-compare .x1c-ws-t thead th {font: 600 var(--fs-eyebrow)/1.35 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 .75rem .9rem; vertical-align: bottom;}
.x1-compare .x1c-ws-t thead th:last-child {color: var(--accent);}
.x1-compare .x1c-ws-corner {width: 30%;}
.x1-compare .x1c-ws-t tbody th {font: 400 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.25 var(--serif); color: var(--ink); text-align: left; padding: 1.1rem 1rem 1.1rem 0; border-top: 1px solid var(--rule);}
.x1-compare .x1c-ws-t tbody td {border-top: 1px solid var(--rule); padding: 1.1rem .75rem; vertical-align: bottom;}
.x1-compare .x1c-ws-t tbody td::after {content: ""; display: block; height: 1.4rem; border-bottom: 1px dashed rgba(0,0,0,.22);}
.x1-compare .x1c-ws-t tbody td:last-child {background: rgba(143, 82, 14, .045);}
.x1-compare .x1c-ws-t thead th:last-child {background: rgba(143, 82, 14, .045); border-radius: 10px 10px 0 0; padding-top: .75rem;}
.x1-compare .x1c-ws-t tbody tr:last-child td:last-child {border-radius: 0 0 10px 10px;}
.x1-compare .x1c-ws-note {display: flex; align-items: center; gap: .65rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); font-weight: 600; color: var(--ink);}
.x1-compare .x1c-ws-note svg {width: 20px; height: 20px; flex: none; color: var(--accent);}

/* FAQ */
.x1-compare .x1c-faq-in {max-width: 48rem; margin-inline: auto;}
.x1-compare .x1c-faq-in .eyebrow {margin-bottom: var(--stack-s);}

@media (max-width: 960px) {
  .x1-compare .x1c-cards {grid-template-columns: 1fr; row-gap: 2.75rem;}
  .x1-compare .hero-media .photo {min-height: 0; aspect-ratio: 4 / 3;}
}

/* worksheet stacks on phones: each question, then a labelled blank line per option */
@media (max-width: 760px) {
  .x1-compare .x1c-ws-t, .x1-compare .x1c-ws-t tbody, .x1-compare .x1c-ws-t tr, .x1-compare .x1c-ws-t th, .x1-compare .x1c-ws-t td {display: block; width: auto;}
  .x1-compare .x1c-ws-t thead {display: none;}
  .x1-compare .x1c-ws-t tbody tr {border-top: 1px solid var(--rule); padding: 1.1rem 0 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem;}
  .x1-compare .x1c-ws-t tbody th {grid-column: 1 / -1; border: 0; padding: 0;}
  .x1-compare .x1c-ws-t tbody td {border: 0; padding: 0; background: none;}
  .x1-compare .x1c-ws-t tbody td:last-child {background: none;}
  .x1-compare .x1c-ws-t tbody td::before {content: attr(data-col); display: block; font: 600 .6875rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
  .x1-compare .x1c-ws-t tbody td:last-child::before {color: var(--accent);}
  .x1-compare .x1c-ws-t tbody td::after {height: 1.1rem;}
  .x1-compare .x1c-ws-task i {max-width: none;}
}