/* /compare/law-firms — signature: one task card that forks into two columns
   (FinePrint Counsel | a firm's engagement), closed by the pull line. */

.x1-compare-law-firms .hero-media .photo {min-height: 30rem;}

/* ---- the comparison sheet ---- */
.x1-compare-law-firms .clf-sheet {max-width: 1120px; margin-inline: auto;}

.x1-compare-law-firms .clf-task {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: end;
  background: var(--surface); border: 1px solid rgba(0,0,0,.1); border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 18px 40px -28px rgba(20,20,20,.35);
}
.x1-compare-law-firms .clf-task .eyebrow {margin-bottom: 1rem; color: var(--accent);}
.x1-compare-law-firms .clf-task .h2 {font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); max-width: 18ch; margin-bottom: 1.25rem;}
.x1-compare-law-firms .clf-p {max-width: 52ch; color: var(--text); text-wrap: pretty;}

.x1-compare-law-firms .clf-chips {display: flex; flex-wrap: wrap; gap: .5rem; align-content: end;}
.x1-compare-law-firms .clf-chips li {
  font: 500 .9375rem/1 var(--sans); color: var(--ink); padding: .65rem .9rem; border-radius: 999px;
  background: var(--tint); border: 1px dashed rgba(0,0,0,.22);
}

/* the fork: a line from the task down into both columns */
.x1-compare-law-firms .clf-fork {position: relative; height: 3.5rem;}
.x1-compare-law-firms .clf-fork::before {
  content: ""; position: absolute; left: 50%; top: 0; height: 50%; border-left: 1px solid rgba(0,0,0,.28);
}
.x1-compare-law-firms .clf-fork span {
  position: absolute; left: 25%; right: 25%; top: 50%; height: 50%;
  border: 1px solid rgba(0,0,0,.28); border-bottom: 0; border-radius: 10px 10px 0 0;
}

.x1-compare-law-firms .clf-cols {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); align-items: start;}
.x1-compare-law-firms .clf-col {display: grid; gap: 1.25rem;}
.x1-compare-law-firms .clf-col-h {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink);
}
.x1-compare-law-firms .clf-dot {width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none;}
.x1-compare-law-firms .clf-col-firm .clf-dot {background: var(--ink);}
@media (min-width: 761px) {.x1-compare-law-firms .clf-col-firm {position: sticky; top: 6rem;}}

.x1-compare-law-firms .clf-card {
  background: var(--tint); border-radius: calc(var(--radius) + 4px); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 3px solid var(--accent);
}
.x1-compare-law-firms .clf-col-firm .clf-card {background: var(--surface); border: 1px solid rgba(0,0,0,.1); border-top: 3px solid var(--ink);}
.x1-compare-law-firms .clf-h3 {font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.12 var(--serif); color: var(--ink); letter-spacing: -.01em; margin-bottom: .9rem; text-wrap: balance;}
.x1-compare-law-firms .clf-card > p {color: var(--text); text-wrap: pretty;}

/* plan mock */
.x1-compare-law-firms .clf-plan {
  list-style: none; margin: 1.5rem 0 0; padding: 0; background: var(--surface); border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08); counter-reset: clf;
}
.x1-compare-law-firms .clf-plan li {
  display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; font-size: .9375rem; color: var(--ink);
  border-top: 1px solid rgba(0,0,0,.07);
}
.x1-compare-law-firms .clf-plan li:first-child {border-top: 0;}
.x1-compare-law-firms .clf-plan li::before {
  content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid rgba(0,0,0,.35); flex: none;
}
.x1-compare-law-firms .clf-plan .clf-plan-ok {font-weight: 600; background: rgba(245,158,11,.12); border-radius: 0 0 10px 10px;}
.x1-compare-law-firms .clf-plan .clf-plan-ok::before {
  border-color: var(--accent); background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* review paths */
.x1-compare-law-firms .clf-paths {margin-top: 1.5rem; display: grid; gap: .5rem;}
.x1-compare-law-firms .clf-path {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: .75rem 1rem; font-size: .9375rem;
}
.x1-compare-law-firms .clf-path-k {color: var(--text);}
.x1-compare-law-firms .clf-path-k::after {content: "→"; float: right; color: var(--muted); padding-left: .5rem;}
.x1-compare-law-firms .clf-path-v {font-weight: 600; color: var(--ink);}
.x1-compare-law-firms .clf-path-wait {border-color: rgba(154,87,16,.45); background: rgba(245,158,11,.10);}
.x1-compare-law-firms .clf-path-wait .clf-path-v {color: var(--accent);}

/* firm checklist */
.x1-compare-law-firms .clf-asks {margin-top: 1.5rem; display: grid; gap: 0; border-top: 1px solid var(--rule);}
.x1-compare-law-firms .clf-asks li {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--rule);
  font: 400 1.25rem/1.25 var(--serif); color: var(--ink);
}
.x1-compare-law-firms .clf-asks li::before {
  content: ""; width: 16px; height: 16px; border: 1.5px solid rgba(0,0,0,.4); border-radius: 3px; flex: none;
}

/* the pull line */
.x1-compare-law-firms .clf-aha {
  margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) auto 0; max-width: 24ch; text-align: center;
  font: italic 400 clamp(1.75rem, 1.2rem + 2vw, 3rem)/1.15 var(--serif); color: var(--ink); letter-spacing: -.015em; text-wrap: balance;
  padding-top: 1.75rem; position: relative;
}
.x1-compare-law-firms .clf-aha::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 56px; margin-left: -28px; border-top: 3px solid var(--accent);
}

.x1-compare-law-firms .clf-photo {aspect-ratio: 4 / 5; max-height: 40rem; object-position: 50% 35%;}
.x1-compare-law-firms .clf-faq-grid {align-items: start;}

@media (max-width: 960px) {
  .x1-compare-law-firms .clf-task {grid-template-columns: 1fr; align-items: start;}
  .x1-compare-law-firms .clf-photo {aspect-ratio: 3 / 2;}
}
@media (max-width: 760px) {
  .x1-compare-law-firms .clf-fork {display: none;}
  .x1-compare-law-firms .clf-cols {grid-template-columns: 1fr; margin-top: 2.25rem; gap: 2.25rem;}
  .x1-compare-law-firms .clf-col-h {justify-content: flex-start;}
  .x1-compare-law-firms .clf-path {grid-template-columns: 1fr; gap: .2rem;}
  .x1-compare-law-firms .clf-path-k::after {content: none;}
  .x1-compare-law-firms .clf-asks li {font-size: 1.125rem;}
  .x1-compare-law-firms .hero-media .photo {min-height: 0;}
}