/* ===========================================================
   Block 07 – Compare Table
   =========================================================== */

.louise-section .compare{position:relative}
.louise-section .compare h2{
  font-size:clamp(1.75rem,4vw,2.625rem);line-height:1.08;letter-spacing:-0.02em;
  max-width:14ch;margin-bottom:var(--pc-space-4);
}
.louise-section .compare__lede{font-style:italic;font-size:var(--pc-fs-md);max-width:48ch;color:var(--pc-ink-700);margin-bottom:var(--pc-space-12);line-height:1.45}
.louise-section .compare__table{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  border-top:2px solid var(--pc-ink-900);border-bottom:2px solid var(--pc-ink-900);
}
.louise-section .compare__row{display:contents}
.louise-section .compare__row > div{
  padding:var(--pc-space-6) var(--pc-space-4);
  border-top:1px solid var(--pc-blue-200);
  font-size:.95rem;color:var(--pc-ink-700);
}
.louise-section .compare__row:first-child > div{border-top:0}
.louise-section .compare__row .key{
  font-size:var(--pc-fs-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--pc-ink-900);font-weight:700;align-self:center;
}
.louise-section .compare__row .ours{
  color:var(--pc-blue-900);font-weight:500;
  position:relative;padding-left:2.8rem;
}
.louise-section .compare__row .ours::before{
  content:"";position:absolute;left:.95rem;top:var(--pc-space-6);
  width:1.1rem;height:1.5rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e30613' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 8.5 L6.4 12.3 L13.4 4.6'/></svg>");
  background-size:1.1rem 1.1rem;background-position:left center;background-repeat:no-repeat;
}
/* "Ours" column spotlight: a white band framed by vertical rules with a red
   accent cap — groups the column down the table and makes the win obvious */
.louise-section .compare__header .ours-head,
.louise-section .compare__row .ours{
  background:var(--pc-paper);
  box-shadow:inset 1px 0 var(--pc-blue-200), inset -1px 0 var(--pc-blue-200);
}
.louise-section .compare__header .ours-head{box-shadow:inset 1px 0 var(--pc-blue-200), inset -1px 0 var(--pc-blue-200), inset 0 3px 0 var(--pc-red-400)}
.louise-section .compare__row .ours strong,
.louise-section .compare__row .ours .price{
  font-weight:700;font-size:1.05rem;color:var(--pc-blue-900);font-feature-settings:"tnum";letter-spacing:-0.01em;
}
.louise-section .compare__row .theirs strong,
.louise-section .compare__row .theirs .price{
  font-weight:700;font-size:1.05rem;color:var(--pc-ink-900);font-feature-settings:"tnum";letter-spacing:-0.01em;
}
/* Header row — eyebrow + column name above the data rows */
.louise-section .compare__header{display:contents}
.louise-section .compare__header > div{
  padding:var(--pc-space-4);
}
.louise-section .compare__header .ours-head,
.louise-section .compare__header .theirs-head{
  display:flex;flex-direction:column;gap:.35rem;
  align-items:flex-start;
}
.louise-section .compare__header .eyebrow{
  font-size:var(--pc-fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--pc-ink-500);font-weight:700;
}
.louise-section .compare__header .name{
  font-size:var(--pc-fs-lg);font-weight:700;color:var(--pc-ink-900);
  letter-spacing:-0.01em;line-height:1.15;
}
.louise-section .compare__header .ours-head .name{color:var(--pc-blue-900)}
.louise-section .compare__cta{margin-top:var(--pc-space-6);display:flex;flex-wrap:wrap;gap:var(--pc-space-3)}

@media (max-width:880px){
  .louise-section .compare__table{grid-template-columns:1fr}
  .louise-section .compare__row > div:first-child{background:var(--pc-blue-50)}

  /* Mobile column-header labels via data-col-label attribute.
     .ours::before is taken by the SVG checkmark, so we use:
       .ours::after  — label below the ours value, styled red
       .theirs::before — label above the theirs value (::before is free)
  */
  .louise-section .compare__row .ours{padding-top:1.5rem}
  .louise-section .compare__row .ours::after{
    content:attr(data-col-label);
    display:block;
    font-size:var(--pc-fs-xs);
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--pc-red-500);
    margin-top:.5rem;
    font-weight:800;
  }
  .louise-section .compare__row .theirs{position:relative;padding-top:1.5rem}
  .louise-section .compare__row .theirs::before{
    content:attr(data-col-label);
    display:block;
    font-size:var(--pc-fs-xs);
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--pc-ink-700);
    margin-bottom:.35rem;
    font-weight:800;
    position:static;
  }
}