/**
 * IPTV From Canada — pages/channels.css
 * The seven Channels sections (/iptv-channels/).
 *
 *   1. Introduction        (ifc-chi)  charcoal   short centred hero + actions
 *   2. Categories          (ifc-chv)  warm white centred head + six cards
 *   3. Languages           (ifc-chl)  charcoal   split: copy | three blocks
 *   4. Plan comparison     (ifc-chc)  warm white centred head + two cards
 *   5. Availability        (ifc-che)  charcoal   centred intro + four cards
 *   6. Trial checklist     (ifc-cht)  warm white split: copy | checklist
 *   7. FAQ                            components/faq.css (dark)
 *
 * The page alternates dark, light, dark, light, dark, light, dark. Section 7
 * reuses the homepage accordion whole, so it is styled where it already lives
 * and nothing here touches it.
 *
 * Layout spine
 * ------------
 * Every section shares ONE measure: --ifc-chn-max on the container. The page
 * container is 1440 px, which is wider than any of this page's content wants
 * to be — left-aligning a capped block inside it left an unexplained empty
 * band down the right. Capping the container instead centres the whole page
 * and lets each section fill the width it is given.
 *
 * Tokens, containers, buttons, links and the fold artwork all come from
 * general.css; the shared fade for the fold layers lives there too.
 */

/* --------------------------------------------------------------------------
   Shared: section shells, measure and fold artwork layers
   -------------------------------------------------------------------------- */

.ifc-chi,
.ifc-chv,
.ifc-chl,
.ifc-chc,
.ifc-che,
.ifc-cht {
  /* 1120 px of content inside the 40 px desktop gutters. */
  --ifc-chn-max: 1200px;
  --ifc-chn-card-pad: 24px;
  --ifc-chn-split-gap: 32px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: 44px;
}

/* Compound with .ifc-container so the narrower measure wins regardless of
   stylesheet order. */
.ifc-container.ifc-chi__inner,
.ifc-container.ifc-chv__inner,
.ifc-container.ifc-chl__inner,
.ifc-container.ifc-chc__inner,
.ifc-container.ifc-che__inner,
.ifc-container.ifc-cht__inner {
  position: relative;
  z-index: 1;
  max-width: var(--ifc-chn-max);
}

.ifc-chi__folds,
.ifc-chv__folds,
.ifc-chl__folds,
.ifc-chc__folds,
.ifc-che__folds,
.ifc-cht__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  width: min(420px, 34%);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  pointer-events: none;
}

/* Dark sections carry the artwork on the right, light ones on the left, so
   the page alternates rather than stacking folds in one margin. Held well
   back: the centred layouts now reach further across the section than the
   old left-aligned ones did. */
.ifc-chi__folds,
.ifc-chl__folds,
.ifc-che__folds {
  inset-inline-end: 0;
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  opacity: .28;
}

/* This section's content is centred across the full measure and reaches
   furthest into the artwork's margin, so its layer is held back further and
   kept narrower than the other two. */
.ifc-che__folds {
  width: min(320px, 24%);
  opacity: .18;
}

.ifc-chv__folds,
.ifc-chc__folds,
.ifc-cht__folds {
  inset-inline-start: 0;
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  opacity: .1;
  transform: scaleX(-1);
  transform-origin: center;
}

.ifc-chi,
.ifc-chl,
.ifc-che {
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

.ifc-chv,
.ifc-chc,
.ifc-cht {
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Shared heading / lead scale. */
.ifc-scope .ifc-chv__heading,
.ifc-scope .ifc-chl__heading,
.ifc-scope .ifc-chc__heading,
.ifc-scope .ifc-che__heading,
.ifc-scope .ifc-cht__heading {
  max-width: 24ch;
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);   /* 28 -> 40 px */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ifc-scope .ifc-chv__heading,
.ifc-scope .ifc-chc__heading,
.ifc-scope .ifc-cht__heading {
  color: var(--ifc-ink);
}

.ifc-scope .ifc-chl__heading,
.ifc-scope .ifc-che__heading {
  color: var(--ifc-paper);
}

.ifc-scope .ifc-chv__lead,
.ifc-scope .ifc-chc__lead,
.ifc-scope .ifc-cht__lead {
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-chl__lead,
.ifc-scope .ifc-che__lead {
  max-width: 54ch;
  margin: 14px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

/* The two sections whose heading block sits on the page's centre line. */
.ifc-chv__head,
.ifc-chc__head {
  text-align: center;
}

.ifc-scope .ifc-chv__heading,
.ifc-scope .ifc-chc__heading,
.ifc-scope .ifc-chv__lead,
.ifc-scope .ifc-chc__lead {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. Introduction (ifc-chi) — charcoal, a short centred hero
   Heading, introduction and the two actions — nothing else. Natural height:
   40 px of padding on a phone, 64 px from 768 px (see Responsive; this
   section is left out of the 80 px desktop step the others take).
   -------------------------------------------------------------------------- */

.ifc-chi {
  padding-block: 40px;
}

.ifc-chi__intro {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}

.ifc-scope .ifc-chi__heading {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.125rem);   /* 32 -> 50 px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-chi__lead {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

/* Directly beneath the introduction: stacked and centred on a phone, side by
   side from 560 px (see Responsive). */
.ifc-scope .ifc-chi__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 28px 0 0;
}

/* Each row spans the column so the phone-width button below can actually
   fill it; the centring is done by text-align, not by shrinking the row. */
.ifc-scope .ifc-chi__action {
  width: 100%;
  margin: 0;
  text-align: center;
}

/* Full width on a phone so the label never crowds its own arrow, content
   width from 560 px up. Height comes from the shared button (48 px). */
.ifc-scope .ifc-chi__cta {
  display: flex;
  width: 100%;
}

/* Smaller than the button, and quieter: the shared .ifc-link already carries
   the 1 px underline, which reads white on charcoal. */
.ifc-scope .ifc-chi__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  font-weight: 600;
}

.ifc-scope .ifc-chi__link-icon {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   2. Categories (ifc-chv) — warm white, six informational cards
   Three across on a desktop, two on a tablet, one on a phone. The grid
   stretches every card in a row to the tallest, so no height is declared.
   The cards are not links: no pointer, no hover lift, no call to action.
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-chv__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-chv__card {
  padding: var(--ifc-chn-card-pad);   /* 24 px; 28 px from 768 px */
  border: 1px solid var(--ifc-line);
  border-radius: 12px;
  background: var(--ifc-surface);
  box-shadow: var(--ifc-shadow-card);
  text-align: start;
}

.ifc-chv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--ifc-action);
}

.ifc-scope .ifc-chv__icon-svg {
  width: 100%;
  height: 100%;
}

.ifc-scope .ifc-chv__card-title {
  margin: 16px 0 0;
  font-family: var(--ifc-font);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-chv__card-text {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}
/* --------------------------------------------------------------------------
   3. Languages (ifc-chl) — charcoal, copy beside three icon blocks
   -------------------------------------------------------------------------- */

.ifc-chl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-chn-split-gap);
  align-items: start;
}

.ifc-scope .ifc-chl__actions {
  margin: 26px 0 0;
}

.ifc-scope .ifc-chl__cta {
  display: flex;
  width: 100%;
}

.ifc-scope .ifc-chl__blocks {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hairlines, not a panel: the three blocks sit directly on the section. */
.ifc-chl__block {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-block: 22px;
}

.ifc-chl__block + .ifc-chl__block {
  border-block-start: 1px solid var(--ifc-white-a10);
}

.ifc-chl__block:first-child {
  padding-block-start: 0;
}

.ifc-chl__block:last-child {
  padding-block-end: 0;
}

.ifc-chl__block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-block-start: 1px;
  color: var(--ifc-action);
}

.ifc-scope .ifc-chl__block-svg {
  width: 100%;
  height: 100%;
}

.ifc-chl__block-body {
  min-width: 0;
}

.ifc-scope .ifc-chl__block-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-chl__block-text {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ifc-text-dim);
}

/* --------------------------------------------------------------------------
   4. Plan comparison (ifc-chc) — warm white, two centred cards
   Cards, not a table: two options read better this way and a table would
   scroll sideways on a phone. Each catalogue total appears ONCE, as a
   statistic; the feature rows carry only what the statistics do not.
   -------------------------------------------------------------------------- */

/*
 * Per-card accent (title + icons) and the tint of its fold decoration.
 *
 * Premium's #B7790B is a warm gold with no green in it; on white it clears
 * 3:1, the bar for the large bold title and the 20 px icons. Local to this
 * section: the pricing page's Premium cards keep the brand gold.
 */
.ifc-chc {
  --ifc-chc-fold-opacity: .12;          /* deepest plane ≈ 12 % tint over white */

  /* 40 px on phones, 64 px from 768 px (shared step); this section stays at
     64 px on desktop rather than taking the 80 px step (see Responsive). */
  padding-block: 40px;
}

.ifc-chc__card--standard {
  --ifc-chc-accent: var(--ifc-action);
  --ifc-chc-fold: var(--ifc-action);    /* pale red */
}

.ifc-chc__card--premium {
  --ifc-chc-accent: #B7790B;
  --ifc-chc-fold: #B7790B;              /* pale warm gold */
}

/* Stacked, Standard first, in a centred column; two equal columns within
   ~1100 px from 900 px (see Responsive). Grid rows stretch, so the two cards
   always share one height while each keeps its natural content. */
.ifc-scope .ifc-chc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 560px;
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
}

/*
 * White card, left-aligned content. It is its own stacking context, so the
 * fold layer (z-index -1) paints above the card's white but below every line
 * of text, and overflow crops it at the rounded corners. It is also a size
 * container, so the statistics scale with the card rather than the window.
 * 24 px padding on phones (28 px under the last feature row), 32 px from
 * tablet up.
 */
.ifc-chc__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  padding: 24px 24px 28px;
  border: 1px solid var(--ifc-line);
  border-radius: 12px;
  background: var(--ifc-surface);
  box-shadow: 0 1px 2px rgba(21, 24, 29, .03), 0 6px 20px rgba(21, 24, 29, .04);
  text-align: start;
}

/*
 * The site's Maple Fold motif along the card's right edge. It is placed the
 * way the section fold layers place fold-hero-light.svg (full height, anchored
 * right, width following from the artwork's own proportions), but painted as
 * a tint through fold-hero-mask.svg: the same file's three planes with the
 * background rectangle removed and the two tones kept as two opacities, so
 * one colour shows the light and deep folds. Geometry, angles and proportions
 * are the original's; only size, colour and opacity change.
 *
 * A second mask layer fades it in from the left, the same technique as the
 * section fold layers' shared fade (general.css), started further in because
 * here the text sits over the fold: nothing up to 35 % of the card, full
 * strength from 85 %. The two layers intersect, so only the fold is faded.
 *
 * Absolutely positioned, so it never affects spacing; a pseudo-element, so it
 * has no content, no pointer events and no place in the accessibility tree.
 */
.ifc-chc__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--ifc-chc-fold);
  opacity: var(--ifc-chc-fold-opacity);
  -webkit-mask-image: url("../../brand/backgrounds/fold-hero-mask.svg"), linear-gradient(to right, transparent 35%, #000 85%);
  mask-image: url("../../brand/backgrounds/fold-hero-mask.svg"), linear-gradient(to right, transparent 35%, #000 85%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: right center, 0 0;
  mask-position: right center, 0 0;
  -webkit-mask-size: auto 100%, 100% 100%;
  mask-size: auto 100%, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

.ifc-scope .ifc-chc__card-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.625rem;                   /* 26 px; 28 px from 768 px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ifc-chc-accent);
}

.ifc-scope .ifc-chc__card-subtitle {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ifc-muted);
}

/* Two statistics in equal columns. Same card width, same type, same rows
   above: the figures sit on one baseline across both cards. */
.ifc-chc__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
}

.ifc-chc__figure {
  min-width: 0;
}

/* Charcoal on BOTH cards: two figures that exist to be compared stay the
   same kind of thing. 34-36 px where the card is wide enough; in a narrow
   card the size follows the card (cqi) so "120,000+" always fits its half.
   The first declaration is the fallback for browsers without container
   units. */
.ifc-scope .ifc-chc__figure-value {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(1.375rem, .9rem + 2.4vw, 2.25rem);
  font-size: clamp(1.375rem, 10.6cqi - 2px, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-chc__figure-label {
  margin: 6px 0 0;
  margin-inline-start: 0;      /* <dd> carries a default indent */
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ifc-muted);
}

/* One divider between the statistics and the features: the list's own top
   border, 24 px below the labels and 20 px above the first row. */
.ifc-scope .ifc-chc__features {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-block-start: 1px solid var(--ifc-line);
  list-style: none;
}

.ifc-chc__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-chc__feature-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ifc-chc-accent);
}

/* ONE button for both cards, centred under the pair. */
.ifc-scope .ifc-chc__actions {
  display: flex;
  justify-content: center;
  margin: 28px 0 0;
}

.ifc-scope .ifc-chc__cta {
  min-width: 240px;
  max-width: 100%;
}

.ifc-scope .ifc-chc__note {
  max-width: 64ch;
  margin: 14px auto 0;
  font-size: .9375rem;
  line-height: 1.65;
  text-align: center;
  color: var(--ifc-muted);
}
/* --------------------------------------------------------------------------
   5. Availability enquiries (ifc-che) — charcoal, centred intro + four cards
   No panel around the section and no heading above the four items: each card
   titles itself. The cards' own content stays left-aligned; only the
   introduction and the button sit on the centre line.
   -------------------------------------------------------------------------- */

.ifc-che__head {
  text-align: center;
}

/*
 * The heading's shared 24ch cap is released here so it can hold one line on
 * a wide screen instead of being folded early, and the lead's shared 54ch cap
 * gives way to the approved 720 px.
 */
.ifc-scope .ifc-che__head .ifc-che__heading {
  max-width: none;
  margin-inline: auto;
}

.ifc-scope .ifc-che__head .ifc-che__lead {
  max-width: 720px;
  margin: 16px auto 0;
}

.ifc-scope .ifc-che__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* A surface one step lighter than the section behind it. The grid stretches
   every card in a row to the tallest, so their tops and bottoms line up
   without any height being declared. */
.ifc-che__card {
  padding: 24px;
  border: 1px solid var(--ifc-white-a10);
  border-radius: 12px;
  background: var(--ifc-graphite);
  text-align: start;
}

.ifc-che__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ifc-action);
}

.ifc-scope .ifc-che__icon-svg {
  width: 100%;
  height: 100%;
}

.ifc-scope .ifc-che__card-title {
  margin: 14px 0 0;
  font-family: var(--ifc-font);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-che__card-text {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

/* Centred below all four cards, in normal flow. */
.ifc-scope .ifc-che__actions {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.ifc-scope .ifc-che__cta {
  display: flex;
  width: 100%;
}
/* --------------------------------------------------------------------------
   6. Trial (ifc-cht) — warm white, introduction beside a vertical checklist
   Three grid areas, ONE button in the markup: the phone order (introduction,
   checklist, button) and the desktop order (button under the introduction,
   checklist alongside) are the same three elements placed differently.
   -------------------------------------------------------------------------- */

.ifc-cht__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "list"
    "cta";
  gap: 28px;
}

.ifc-cht__head {
  grid-area: head;
}

.ifc-scope .ifc-cht__list {
  grid-area: list;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ifc-cht__actions {
  grid-area: cta;
}

.ifc-cht__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-block: 22px;
}

.ifc-cht__item + .ifc-cht__item {
  border-block-start: 1px solid var(--ifc-line);
}

.ifc-cht__item:first-child {
  padding-block-start: 0;
}

.ifc-cht__item:last-child {
  padding-block-end: 0;
}

.ifc-cht__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-block-start: 1px;
  color: var(--ifc-action);
}

.ifc-scope .ifc-cht__item-svg {
  width: 100%;
  height: 100%;
}

.ifc-cht__item-body {
  min-width: 0;
}

.ifc-scope .ifc-cht__item-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-cht__item-text {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-cht__action {
  margin: 0;
}

.ifc-scope .ifc-cht__cta {
  display: flex;
  width: 100%;
}

.ifc-scope .ifc-cht__note {
  margin: 12px 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .ifc-scope .ifc-chi__cta,
  .ifc-scope .ifc-chl__cta,
  .ifc-scope .ifc-che__cta,
  .ifc-scope .ifc-cht__cta {
    display: inline-flex;
    width: auto;
  }

  /* The same width at which the button stops filling its column is the width
     at which the pair fits on one line: button and link side by side, centred
     as a group and aligned on their vertical centres. Below it they stack,
     because a full-width button leaves no room beside it. */
  .ifc-scope .ifc-chi__actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }

  .ifc-scope .ifc-chi__action {
    width: auto;
  }
}

/* Two cards across on a tablet; four is too many until the measure is wide
   enough for each one to hold its description in two or three lines. */
@media (min-width: 620px) {
  .ifc-scope .ifc-che__grid,
  .ifc-scope .ifc-chv__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ifc-chi,
  .ifc-chv,
  .ifc-chl,
  .ifc-chc,
  .ifc-che,
  .ifc-cht {
    --ifc-chn-card-pad: 28px;
    --ifc-chn-split-gap: 40px;

    padding-block: 64px;
  }

  /* The comparison cards keep their own padding step: 24 px on a phone, 32 px
     from tablet up. */
  .ifc-chc__card {
    padding: 32px;
  }

  .ifc-scope .ifc-chc__card-title {
    font-size: 1.75rem;                  /* 28 px */
  }

  .ifc-chc__figures {
    gap: 24px;
  }
}

@media (min-width: 900px) {
  /* Two plan cards side by side, equal width, in a centred 1100 px block. */
  .ifc-scope .ifc-chc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1100px;
  }

  /*
   * Introduction and button vertically centred against the checklist. The
   * two flexible spacer rows are equal, so the pair sits on the checklist's
   * midline without any height being declared; row-gap is dropped and the
   * button carries its own margin, so the spacers stay symmetrical.
   */
  .ifc-cht__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".    list"
      "head list"
      "cta  list"
      ".    list";
    column-gap: 56px;
    row-gap: 0;
  }

  .ifc-scope .ifc-cht__actions {
    margin-block-start: 30px;
  }
}

@media (min-width: 1024px) {
  /* The one remaining split section. Its left column is shorter than what
     sits beside it, so top-aligning stranded it. */
  .ifc-chl__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 64px;
    align-items: center;
  }

  /* Four across once the measure can carry four readable descriptions. */
  .ifc-scope .ifc-che__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Six category cards as three by two. */
  .ifc-scope .ifc-chv__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ifc-scope .ifc-chi__lead,
  .ifc-scope .ifc-chv__lead,
  .ifc-scope .ifc-chl__lead,
  .ifc-scope .ifc-chc__lead,
  .ifc-scope .ifc-che__lead,
  .ifc-scope .ifc-cht__lead {
    font-size: 1.125rem;
  }
}

@media (min-width: 1200px) {
  /* .ifc-chc stays at 64 px: a heading, two short cards and one button. */
  .ifc-chv,
  .ifc-chl,
  .ifc-cht {
    padding-block: 80px;
  }

  /* One step tighter than its neighbours: this section is a centred
     introduction and one row of short cards, so it does not need their
     height. */
  .ifc-che {
    padding-block: 72px;
  }
}