/* === NG English =============================================================
   The corrections are the page. Everything else introduces them.
   ========================================================================== */

.icrt-ng { padding: 2rem 0 3.5rem; }

.icrt-ng__head { max-width: 46rem; margin-bottom: 2rem; }

.icrt-ng__eyebrow {
  margin: 0 0 .5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--icrt-accent);
}

.icrt-ng__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.icrt-ng__lead { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--icrt-ink-soft); }

/* --- framing --------------------------------------------------------------- */

.icrt-ng__why {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  margin-bottom: 2.5rem;
}

.icrt-ng__whyCard {
  padding: 1.2rem 1.35rem;
  border-radius: .9rem;
  background: var(--icrt-mist);
  border: 1px solid var(--icrt-line);
}

.icrt-ng__whyTitle { margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: -.01em; }
.icrt-ng__whyCard p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--icrt-ink-soft); }

.icrt-ng__sectionHead {
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--icrt-muted);
}

/* --- the corrections -------------------------------------------------------- */

.icrt-ngrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.icrt-ngcard {
  min-width: 0;
  display: grid;
  gap: .5rem;
  padding: 1.15rem 1.25rem 1.3rem;
  border-radius: .9rem;
  background: var(--icrt-paper);
  border: 1px solid var(--icrt-line);
}

.icrt-ngcard__heard,
.icrt-ngcard__meant {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.icrt-ngcard__heard .icrt-ngcard__sentence {
  color: var(--icrt-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.icrt-ngcard__meant .icrt-ngcard__sentence { font-weight: 700; }

/* A tick and a cross carry the meaning here, so they are marked aria-hidden and
   paired with real words for anyone not seeing them. */
.icrt-ngcard__tag {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(.15rem);
}

.icrt-ngcard__tag--no  { background: #fee2e2; color: #b91c1c; }
.icrt-ngcard__tag--yes { background: #dcfce7; color: #15803d; }

.icrt-ngcard__why {
  margin: .35rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--icrt-line);
  font-size: .87rem;
  line-height: 1.6;
  color: var(--icrt-ink-soft);
}

/* Dark mode needs its own chip colours: the pale tints above go to mud on a
   dark card and the contrast fails. */
html.s-dark .icrt-ngcard__tag--no  { background: rgba(220, 38, 38, .22); color: #fca5a5; }
html.s-dark .icrt-ngcard__tag--yes { background: rgba(22, 163, 74, .22); color: #86efac; }

/* --- closing call ----------------------------------------------------------- */

.icrt-ng__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 1rem;
  background: var(--icrt-mist);
  border: 1px solid var(--icrt-line);
}

.icrt-ng__ctaTitle { margin: 0 0 .3rem; font-size: 1.25rem; letter-spacing: -.01em; }
.icrt-ng__ctaBody { margin: 0; color: var(--icrt-ink-soft); font-size: .95rem; }