/* x1-compare-ai-and-templates - /compare/ai-and-templates (2026-10-01).
   Signature: the comparison card in the hero - five questions down the side, "Ask" / "Check" for
   any AI tool and a template, the verified FinePrint Counsel answer in the ochre column. Each row
   links to its section below. Every rule scoped to the page. */

.x1-compare-ai-and-templates {--ct-ochre: #8F520E; --ct-ochre-soft: rgba(143, 82, 14, .07);}

/* hero */
.x1-compare-ai-and-templates .d29-hero .display {max-width: 13ch;}
.x1-compare-ai-and-templates .hero-grid > .hero-text {grid-column: 1 / span 6; align-self: center;}
.x1-compare-ai-and-templates .hero-media.ct-card {grid-column: 7 / span 6; align-self: center;}

/* signature: the comparison card */
.x1-compare-ai-and-templates .ct-card {background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 22px 56px -18px rgba(20,20,20,.22); padding: clamp(1.25rem, .8rem + 1.4vw, 2.25rem);}
.x1-compare-ai-and-templates .ct-card-k {font: 400 1.75rem/1 var(--serif); color: var(--ink); padding-bottom: 1rem; margin: 0; border-bottom: 1px solid var(--ink);}
.x1-compare-ai-and-templates .ct-tbl {width: 100%; border-collapse: collapse; table-layout: fixed;}
.x1-compare-ai-and-templates .ct-tbl col {width: auto;}
.x1-compare-ai-and-templates .ct-tbl th, .x1-compare-ai-and-templates .ct-tbl td {padding: .95rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: middle; text-align: left;}
.x1-compare-ai-and-templates .ct-tbl tr > :first-child {width: 32%; padding-left: 0;}
.x1-compare-ai-and-templates .ct-tbl tr > :nth-child(2), .x1-compare-ai-and-templates .ct-tbl tr > :nth-child(3) {width: 17%; text-align: center;}
.x1-compare-ai-and-templates .ct-tbl tbody tr:last-child > * {border-bottom: 0;}
.x1-compare-ai-and-templates .ct-tbl thead th {font: 600 .6875rem/1.3 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); vertical-align: bottom; padding-top: 1.1rem;}
.x1-compare-ai-and-templates .ct-tbl thead th.ct-fp {color: var(--ct-ochre);}
.x1-compare-ai-and-templates .ct-tbl tbody th {font: 400 clamp(1.0625rem, .95rem + .35vw, 1.25rem)/1.25 var(--serif); color: var(--ink);}
.x1-compare-ai-and-templates .ct-tbl tbody th a {color: inherit; text-decoration: none; background-image: linear-gradient(var(--rule), var(--rule)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-image .2s;}
.x1-compare-ai-and-templates .ct-tbl tbody th a:hover, .x1-compare-ai-and-templates .ct-tbl tbody th a:focus-visible {background-image: linear-gradient(var(--ct-ochre), var(--ct-ochre));}
.x1-compare-ai-and-templates .ct-q {display: inline-block; font: italic 400 .9375rem/1 var(--serif); color: var(--muted); padding: .3rem .55rem; border: 1px dashed rgba(0,0,0,.22); border-radius: 999px;}
.x1-compare-ai-and-templates .ct-tbl .ct-fp {background: var(--ct-ochre-soft); padding-left: .9rem; padding-right: .9rem;}
.x1-compare-ai-and-templates .ct-tbl td.ct-fp {font-size: .9375rem; line-height: 1.35; color: var(--ink); font-weight: 500; position: relative;}
.x1-compare-ai-and-templates .ct-tbl td.ct-fp::before {content: ""; position: absolute; left: 0; top: .95rem; bottom: .95rem; width: 2px; background: var(--ct-ochre);}

/* editorial photograph */
.x1-compare-ai-and-templates .ct-photo {padding-block: 0; border-top: 0 !important; margin-top: clamp(1rem, 0rem + 3vw, 3rem);}
.x1-compare-ai-and-templates .ct-photo .bleed {height: auto; aspect-ratio: 1680 / 720; max-height: 40rem; object-position: 40% 0%;}
.x1-compare-ai-and-templates .ct-photo + .sec {border-top: 0;}

/* the five questions */
.x1-compare-ai-and-templates .ct-rows {list-style: none; margin: 0; padding: 0;}
.x1-compare-ai-and-templates .ct-rows > li {scroll-margin-top: 96px; padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); align-items: start;}
.x1-compare-ai-and-templates .ct-h {font: 400 clamp(1.625rem, 1.25rem + 1.2vw, 2.375rem)/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; max-width: 18ch;}
.x1-compare-ai-and-templates .ct-rows p {font-size: var(--fs-lede); line-height: 1.6; color: var(--text); max-width: 38rem; text-wrap: pretty; padding-top: .35rem;}
.x1-compare-ai-and-templates .ct-rows > li:target .ct-h {color: var(--ct-ochre);}

.x1-compare-ai-and-templates .ct-rows:last-child > li:last-child {border-bottom: 0; padding-bottom: 0;}

/* pull line */
.x1-compare-ai-and-templates .ct-aha {margin: clamp(3rem, 2rem + 3vw, 5rem) 0 clamp(3rem, 2rem + 3vw, 5rem) auto; max-width: 22ch; border-left: 2px solid var(--ct-ochre); width: calc(7 / 12 * 100%);}
.x1-compare-ai-and-templates .ct-aha + .ct-rows > li:first-child {border-top: 1px solid var(--rule);}

/* FAQ */
.x1-compare-ai-and-templates .ct-faq-grid {align-items: start; row-gap: var(--stack-m);}
.x1-compare-ai-and-templates .ct-faq-grid > :first-child {grid-column: 1 / span 4;}
.x1-compare-ai-and-templates .ct-faq-grid > :last-child {grid-column: 6 / span 7;}
.x1-compare-ai-and-templates .ct-faq-h {font-size: clamp(2rem, 1.35rem + 2vw, 3rem);}
.x1-compare-ai-and-templates .ct-faq-sec + .close {padding-top: 0;}
.x1-compare-ai-and-templates .close-card .h2 {max-width: 16ch;}

@media (max-width: 960px){
  .x1-compare-ai-and-templates .hero-grid > .hero-text, .x1-compare-ai-and-templates .hero-media.ct-card,
  .x1-compare-ai-and-templates .ct-faq-grid > :first-child, .x1-compare-ai-and-templates .ct-faq-grid > :last-child {grid-column: 1 / -1;}
  .x1-compare-ai-and-templates .ct-aha {width: auto; margin-left: 0;}
  .x1-compare-ai-and-templates .ct-rows > li {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 560px){
  .x1-compare-ai-and-templates .ct-card {padding: 1.1rem 1rem; border-radius: 12px;}
  .x1-compare-ai-and-templates .ct-tbl th, .x1-compare-ai-and-templates .ct-tbl td {padding: .8rem .3rem;}
  .x1-compare-ai-and-templates .ct-tbl tr > :first-child {width: 30%;}
  .x1-compare-ai-and-templates .ct-tbl tr > :nth-child(2), .x1-compare-ai-and-templates .ct-tbl tr > :nth-child(3) {width: 18%;}
  .x1-compare-ai-and-templates .ct-tbl thead th {font-size: .625rem; letter-spacing: .06em;}
  .x1-compare-ai-and-templates .ct-tbl tbody th {font-size: 1rem;}
  .x1-compare-ai-and-templates .ct-q {font-size: .8125rem; padding: .25rem .4rem;}
  .x1-compare-ai-and-templates .ct-tbl .ct-fp {padding-left: .6rem; padding-right: .45rem;}
  .x1-compare-ai-and-templates .ct-tbl td.ct-fp {font-size: .8125rem;}
  .x1-compare-ai-and-templates .ct-aha {padding-left: 1rem;}
  .x1-compare-ai-and-templates .ct-photo .bleed {aspect-ratio: 4 / 3; object-position: 30% 0%;}
}
@media (prefers-reduced-motion: reduce){
  .x1-compare-ai-and-templates .ct-tbl tbody th a {transition: none;}
}