/* COMPARE-01, direction A (user-approved 2026-09-27).
   Align the three forms, lead with the "interest" field and turn the "check"
   field into the ink caution strip from the approved label language.
   CSS only, loaded last. No copy, font weight, ID, ARIA or image change.
   The paper sticker keeps its tilt; the text inside stays level. */

/* Phone first: each label sits beside its text to shorten every card. */
.product-comparison .comparison-cards {
  gap: 20px;
  padding-top: 26px;
}
.product-comparison .comparison-card {
  padding: 20px 18px 16px;
}
.product-comparison .comparison-card h3 {
  padding-bottom: 8px;
}
.product-comparison .comparison-card dl {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.product-comparison .comparison-card dl > div {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
}
.product-comparison .comparison-card dl > div + div {
  margin-top: 0;
}
.product-comparison .comparison-card dd {
  margin: 0;
}

/* The interest field decides the form, so it leads: larger text and a marker
   tag on its existing heavy label. Body weight stays 400 (no new font subset). */
.product-comparison .comparison-card [id$="-interest"] dt {
  justify-self: start;
  padding: 0 5px;
  background: var(--marker);
  box-shadow: 2px 2px 0 var(--ink);
}
.product-comparison .comparison-card [id$="-interest"] dd {
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* The check field becomes an ink strip with the red edge used by product labels.
   Inline padding matches the negative margin so its text keeps the card's left edge. */
.product-comparison .comparison-card [id$="-check"] {
  margin: 2px -8px 0;
  padding: 10px 8px 11px;
  background: var(--ink);
  border-bottom: 2px solid var(--red);
  color: var(--paper);
}
.product-comparison .comparison-card [id$="-check"] dt {
  color: var(--marker);
}

/* Tablet: three columns were about 11 characters wide, so show one card per row
   with the form name on the left and its three fields on the right. */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-comparison .comparison-cards {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 32px;
  }
  .product-comparison .comparison-card {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 22px;
    padding: 22px 22px 18px;
  }
  .product-comparison .comparison-card h3 {
    align-self: stretch;
    padding: 0 14px 0 0;
    border-bottom: 0;
    border-right: 2px solid var(--ink);
  }
  .product-comparison .comparison-card dl {
    margin-top: 0;
  }
}

/* Desktop: three columns whose fields line up across the forms. */
@media (min-width: 1024px) {
  .product-comparison .comparison-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    padding-top: 40px;
  }
  .product-comparison .comparison-card {
    padding: 24px 22px 18px;
  }
  /* Stacked labels read as column heads once the forms sit side by side. */
  .product-comparison .comparison-card dl > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .product-comparison .comparison-card [id$="-interest"] dd {
    font-size: 1.125rem;
  }
  /* Cards share the section's row tracks, and each field shares the card's, so
     every field starts at the same height in all three columns. Browsers without
     subgrid keep the unaligned ICON-03 columns. */
  @supports (grid-template-rows: subgrid) {
    .product-comparison .comparison-card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .product-comparison .comparison-card dl {
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}

/* COMPARE-02 (user-approved 2026-09-27): the header intro ran across the torn
   white edge of the street-paper texture, so its end became unreadable.
   Back only this section's intro with the ink tape used by the caution strip.
   Copy, size and weight unchanged; the text stays level. */
.product-comparison .section-title .section-intro {
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--paper);
}

/* COMPARE-03: found in the in-app 1280px review (2026-09-27). Each field stretches
   to its shared subgrid row, and its label/text grid split the spare height, so a
   one-line field beside a two-line one showed an 18px gap under its label instead
   of 4px. Keep label and text at the top of the row. Desktop only. */
@media (min-width: 1024px) {
  .product-comparison .comparison-card dl > div {
    align-content: start;
  }
}

/* COMPARE-04 (user request 2026-09-28): the second headline line looked soft where
   the cream text and offset shadow sat on the light red texture. Put only this
   section's question on a marker tape with ink text, like the interest labels.
   Same font, weight and copy; the headline keeps its existing tilt. */
.product-comparison .section-title h2 span {
  display: inline-block;
  margin-top: 6px;
  padding: 0 10px;
  background: var(--marker);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 4px 4px 0 var(--ink);
}