/* ==========================================================================
   IPTV From Canada — pages/home.css
   Page-specific styles for the Home page only. Shared components live in
   general.css. Section namespaces on this page: ifc-hr- (hero).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (ifc-hr) — full-width cinematic poster hero
   - Edge-to-edge charcoal section straight under the navbar, at least the
     remaining viewport height (--ifc-header-h / --ifc-adminbar-h come from
     general.css defaults and are kept accurate by general.js).
   - Content in .ifc-hr__inner (1240 px + gutters, same as the navbar),
     left-aligned in a ~620 px column on desktop, centred when stacked.
   - Poster collage: desktop = background layer across the hero under a
     left → right charcoal gradient plus a bottom fade; stacked = reserved
     band after the content with a top fade.
   Every value is a custom property on .ifc-hr; breakpoints only retune them.
   -------------------------------------------------------------------------- */

.ifc-hr {
  /* Alignment (matches the navbar: 1240 px incl. 28 px side padding) */
  --ifc-hr-inner-max: var(--ifc-container-max);   /* shared page width + gutters */
  --ifc-hr-gutter: var(--ifc-gutter);
  --ifc-hr-text-max: 620px;                    /* paragraph / buttons column */
  --ifc-hr-title-max: 620px;                   /* 680 px on desktop: 2-line heading */
  --ifc-hr-highlights-max: 720px;              /* first row fits on one line at 14 px */

  /* Vertical rhythm */
  --ifc-hr-pad-y: 36px;                        /* 48–64 px on desktop */
  --ifc-hr-title-gap: 24px;                    /* h1 → paragraph (30 px desktop) */
  --ifc-hr-body-gap: 26px;                     /* paragraph → buttons (30 px desktop) */
  --ifc-hr-cta-gap: 12px;
  --ifc-hr-highlights-gap: 28px;               /* buttons → highlights (30 px desktop) */
  --ifc-hr-highlight-row-gap: 4px;

  /* Poster collage */
  --ifc-hr-art-height: clamp(220px, 62vw, 280px);   /* stacked band */
  --ifc-hr-art-zoom: 180%;                          /* stacked: keep tiles medium-sized */
  --ifc-hr-art-focus: 50% 42%;
  /* Desktop: solid charcoal behind the copy, posters revealed to the right.
     The solid zone must cover the text column: at 1024 px the column ends
     near 63 % of the width, at 1440 px near 52 %, at 1920 px near 51 %. */
  --ifc-hr-overlay-solid: 56%;
  --ifc-hr-overlay:
    linear-gradient(
      90deg,
      var(--ifc-ink) 0%,
      var(--ifc-ink) var(--ifc-hr-overlay-solid),
      rgba(var(--ifc-ink-rgb), .97) calc(var(--ifc-hr-overlay-solid) + 8%),
      rgba(var(--ifc-ink-rgb), .8) calc(var(--ifc-hr-overlay-solid) + 16%),
      rgba(var(--ifc-ink-rgb), .35) calc(var(--ifc-hr-overlay-solid) + 28%),
      rgba(var(--ifc-ink-rgb), .12) 100%
    );
  --ifc-hr-overlay-bottom:
    linear-gradient(
      180deg,
      rgba(var(--ifc-ink-rgb), 0) 62%,
      rgba(var(--ifc-ink-rgb), .85) 100%
    );
  /* Stacked: fade the top of the band into the charcoal text block. */
  --ifc-hr-overlay-stacked:
    linear-gradient(
      180deg,
      var(--ifc-ink) 0%,
      rgba(var(--ifc-ink-rgb), .55) 24%,
      rgba(var(--ifc-ink-rgb), 0) 58%
    );

  /* Type */
  --ifc-hr-title-size: clamp(1.875rem, 1.4rem + 2vw, 3.25rem);   /* 30 → 52 px */
  --ifc-hr-title-lh: 1.16;
  --ifc-hr-title-tracking: -0.02em;
  --ifc-hr-body-size: 1rem;                                      /* 16 px; 18 px from 768 */
  --ifc-hr-body-lh: 1.7;                                         /* ≈ 30.6 px at 18 px */
  --ifc-hr-highlight-size: 0.8125rem;                            /* 13 px; 14 px from 768 */
  --ifc-hr-highlight-lh: 1.8;
  --ifc-hr-highlight-gap: 9px;                                   /* text ↔ dot */
  --ifc-hr-dot-size: 4px;

  /* CTAs */
  --ifc-hr-cta-height: 52px;
  --ifc-hr-cta-size: 1rem;
  --ifc-hr-cta-padding: 0 26px;

  --ifc-bg: var(--ifc-ink);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--ifc-header-h) - var(--ifc-adminbar-h));
  min-height: calc(100svh - var(--ifc-header-h) - var(--ifc-adminbar-h));
  background: var(--ifc-ink);
  color: var(--ifc-fg);
}

/* Poster collage --------------------------------------------------------- */

/* Stacked: a reserved band after the content (real layout space). */
.ifc-hr__art {
  position: relative;
  order: 2;
  height: var(--ifc-hr-art-height);
  overflow: hidden;
  background: var(--ifc-ink-2);
}

.ifc-scope .ifc-hr__art-image {
  display: block;
  width: var(--ifc-hr-art-zoom);
  max-width: none;
  height: 100%;
  margin-inline-start: calc((100% - var(--ifc-hr-art-zoom)) / 2);
  object-fit: cover;
  object-position: var(--ifc-hr-art-focus);
}

/* Decorative overlay above the artwork, below the content. */
.ifc-hr__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ifc-hr-overlay-stacked);
  pointer-events: none;
}

/* Content layer --------------------------------------------------------- */

.ifc-hr__inner {
  position: relative;
  z-index: 1;
  order: 1;
  display: flex;
  align-items: center;      /* balances the copy in the remaining height */
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--ifc-hr-inner-max);
  margin-inline: auto;
  padding-block: var(--ifc-hr-pad-y);
  padding-inline: var(--ifc-hr-gutter);
}

/* Column widths are set per element so the highlights can run a little
   wider than the paragraph without stretching the copy. */
.ifc-hr__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.ifc-scope .ifc-hr__title {
  max-width: var(--ifc-hr-title-max);
  margin: 0;
  font-size: var(--ifc-hr-title-size);
  font-weight: 700;
  line-height: var(--ifc-hr-title-lh);
  letter-spacing: var(--ifc-hr-title-tracking);
  color: var(--ifc-surface);
}

.ifc-hr__title-accent {
  color: var(--ifc-maple);
  font-size: rem;
}

.ifc-scope .ifc-hr__body {
  max-width: var(--ifc-hr-text-max);
  margin: var(--ifc-hr-title-gap) 0 0;
  font-size: var(--ifc-hr-body-size);
  font-weight: 400;
  line-height: var(--ifc-hr-body-lh);
  color: var(--ifc-paper-soft);
}

.ifc-scope .ifc-hr__body strong {
  font-weight: 600;
  color: var(--ifc-surface);
}

/* CTAs ------------------------------------------------------------------ */

.ifc-hr__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ifc-hr-cta-gap);
  width: 100%;
  max-width: var(--ifc-hr-text-max);
  margin-block-start: var(--ifc-hr-body-gap);
}

.ifc-scope .ifc-hr__cta {
  --ifc-button-height: var(--ifc-hr-cta-height);
  --ifc-button-padding: var(--ifc-hr-cta-padding);
  --ifc-button-radius: var(--ifc-radius-sm);
  --ifc-button-size: var(--ifc-hr-cta-size);
}

/* Highlights: integrated beneath the CTAs. ------------------------------ */

.ifc-hr__highlights {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ifc-hr-highlight-row-gap);
  width: 100%;
  max-width: var(--ifc-hr-highlights-max);
  margin-block-start: var(--ifc-hr-highlights-gap);
}

.ifc-scope .ifc-hr__highlight-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: var(--ifc-hr-highlight-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ifc-hr-highlight-size);
  font-weight: 400;
  line-height: var(--ifc-hr-highlight-lh);
  color: var(--ifc-paper-soft);
}

.ifc-hr__highlight-row li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;   /* keeps each phrase together; the row still wraps */
}

/* Red dot attached to the start of every item after the first, so a dot
   can never sit on a line by itself. Generated content is not announced. */
.ifc-hr__highlight-row li + li::before {
  content: "";
  flex: none;
  width: var(--ifc-hr-dot-size);
  height: var(--ifc-hr-dot-size);
  margin-inline: var(--ifc-hr-highlight-gap);
  border-radius: 50%;
  background: var(--ifc-maple);
}

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

/* Phones: CTAs stack at equal width. */
@media (max-width: 599.98px) {
  .ifc-scope .ifc-hr__cta {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Tablet: desktop type sizes, wider text column, taller band. */
@media (min-width: 768px) {
  .ifc-hr {
    --ifc-hr-pad-y: 44px;
    --ifc-hr-text-max: 660px;
    --ifc-hr-title-max: 660px;
    --ifc-hr-art-height: clamp(280px, 38vw, 340px);
    --ifc-hr-art-zoom: 140%;
    --ifc-hr-body-size: 1.125rem;         /* 18 px */
    --ifc-hr-highlight-size: 0.875rem;    /* 14 px */
    --ifc-hr-highlight-gap: 10px;
    --ifc-hr-dot-size: 5px;
    --ifc-hr-cta-gap: 14px;
  }
  
}

/* Desktop: collage across the hero, copy left. */
@media (min-width: 1024px) {
  .ifc-hr {
    --ifc-hr-pad-y: 56px;
    --ifc-hr-text-max: 620px;
    --ifc-hr-title-max: 680px;
    --ifc-hr-art-zoom: 100%;
    --ifc-hr-art-focus: 100% 50%;   /* keep the right-hand columns of posters */
    --ifc-hr-title-gap: 3.5rem;
    --ifc-hr-body-gap: 2.5rem;
    --ifc-hr-highlights-gap: 2rem;
  }

  .ifc-hr__art {
    position: absolute;
    inset: 0;
    order: 0;
    height: auto;
  }

  .ifc-scope .ifc-hr__art-image {
    width: 100%;
    margin-inline-start: 0;
  }

  .ifc-hr__art::after {
    background: var(--ifc-hr-overlay-bottom), var(--ifc-hr-overlay);
  }

  .ifc-hr__content {
    align-items: flex-start;
    text-align: start;
  }

  .ifc-hr__actions,
  .ifc-scope .ifc-hr__highlight-row {
    justify-content: flex-start;
  }

  .ifc-hr__highlights {
    align-items: flex-start;
  }
}

/* Wide screens: more breathing room; the text column ends earlier, so the
   solid zone can stop sooner and reveal more of the collage. */
@media (min-width: 1440px) {
  .ifc-hr {
    --ifc-hr-pad-y: 64px;
    --ifc-hr-text-max: 660px;        /* paragraph ends near 55 % of 1440 */
    --ifc-hr-overlay-solid: 48%;     /* still ≥ .97 charcoal under its right edge */
  }
}

/* --------------------------------------------------------------------------
   Devices (ifc-dv) — supported devices
   Warm-white split section between the hero and the plans: copy on the
   left (~38 %), a 3 × 5 grid of device tiles on the right (~62 %), stacked
   below 1024 px. Tiles are static <li>s (links only when a guide exists).
   -------------------------------------------------------------------------- */

.ifc-dv {
  --ifc-dv-max: var(--ifc-container-max);   /* shared page width */
  --ifc-dv-pad-y: 40px;                  /* 56 px on desktop */
  --ifc-dv-gutter: var(--ifc-gutter);    /* shared gutters */
  --ifc-dv-col-gap: 44px;                /* 40 px at five columns */
  --ifc-dv-copy-share: 0.38;             /* copy share of the width after the gap */
  --ifc-dv-heading-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);  /* 26 → 36 px */
  --ifc-dv-heading-gap: 18px;            /* heading → paragraph */
  --ifc-dv-link-gap: 22px;               /* paragraph → link */
  --ifc-dv-cols: 2;                      /* 3 from 480 px, 5 from 1180 px */
  --ifc-dv-grid-gap: 11px;
  --ifc-dv-tile-min: 72px;
  --ifc-dv-tile-pad: 16px 12px;          /* the same at every width */
  --ifc-dv-tile-radius: 10px;
  --ifc-dv-icon: 30px;                   /* generic icon, only where no brand logo is approved */
  --ifc-dv-logo-slot: 40px;              /* one logo area for every tile; marks up to 32 px inside */
  --ifc-dv-logo-gap: 10px;               /* logo area → name */
  --ifc-dv-label-size: 0.9375rem;        /* 15 px */
  --ifc-dv-lift: -2px;                   /* hover lift; 0 under reduced motion */

  --ifc-dv-fold-w: min(420px, 34%);      /* left-edge fold layer */
  --ifc-dv-folds-opacity: .2;

  --ifc-bg: var(--ifc-paper);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-dv-pad-y);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Mirrored like the other left-anchored layers on this page. */
.ifc-dv__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-dv-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-dv-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

.ifc-dv__inner {
  position: relative;
  z-index: 1;
}

.ifc-dv__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--ifc-dv-max);
  padding-inline: var(--ifc-dv-gutter);
}

/* Copy ------------------------------------------------------------------ */

.ifc-dv__copy {
  max-width: 560px;
}

.ifc-scope .ifc-dv__heading {
  font-size: var(--ifc-dv-heading-size);
  line-height: 1.18;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-dv__text {
  margin-block-start: var(--ifc-dv-heading-gap);
  font-size: var(--ifc-body);
  line-height: var(--ifc-lh-body);
  color: var(--ifc-muted);
}

/* A set with more than one paragraph (see sections/devices.php): only the
   first sits at the heading's gap, the rest at a normal paragraph gap. The
   homepage set has one paragraph, so this never applies there. */
.ifc-scope .ifc-dv__text + .ifc-dv__text {
  margin-block-start: var(--ifc-space-4);
}

/* Inline so a wrapped label keeps the arrow right after its last word. */
.ifc-scope .ifc-dv__link {
  display: inline;
  font-size: var(--ifc-body);
  text-decoration: none;
  text-underline-offset: .2em;
}

.ifc-scope .ifc-dv__link-wrap {
  margin-block-start: var(--ifc-dv-link-gap);
  line-height: var(--ifc-lh-body);
}

@media (hover: hover) {
  .ifc-scope .ifc-dv__link:hover {
    text-decoration: underline;
  }
}

.ifc-scope .ifc-dv__link:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 3px;
  box-shadow: none;
}

.ifc-scope .ifc-dv__link-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-inline-start: 4px;
  vertical-align: -3px;
}

/* Device grid ----------------------------------------------------------- */

/* Wrapping flex rows of equal, non-growing tiles: an incomplete last row
   (e.g. the lone Xbox/PlayStation tile on phones) centres as a group. */
.ifc-scope .ifc-dv__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ifc-dv-grid-gap);
}

.ifc-dv__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* logo areas line up across a row */
  gap: var(--ifc-dv-logo-gap);
  flex: 0 0 calc((100% - var(--ifc-dv-grid-gap) * (var(--ifc-dv-cols) - 1)) / var(--ifc-dv-cols));
  min-width: 0;
  min-height: var(--ifc-dv-tile-min);
  padding: var(--ifc-dv-tile-pad);
  border: 1px solid var(--ifc-line);
  border-radius: var(--ifc-dv-tile-radius);
  background: var(--ifc-surface);
  color: var(--ifc-ink);
  text-align: center;
  transition:
    transform .19s var(--ifc-ease),
    box-shadow .19s var(--ifc-ease),
    border-color .19s var(--ifc-ease);
}

/* Subtle lift on hover-capable devices only; static tiles keep the
   default cursor and gain no interactivity. */
@media (hover: hover) {
  .ifc-dv__tile:hover {
    transform: translateY(var(--ifc-dv-lift));
    border-color: var(--ifc-line-strong);
    box-shadow: var(--ifc-shadow-card);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifc-dv {
    --ifc-dv-lift: 0px;
  }
}

/* Tile links: the assigned guide, or the Installation Guides page. */
.ifc-scope .ifc-dv__tile-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--ifc-dv-logo-gap);
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.ifc-scope .ifc-dv__tile-link:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 4px;
  box-shadow: none;
}

@media (hover: hover) {
  .ifc-scope .ifc-dv__tile-link:hover .ifc-dv__label {
    color: var(--ifc-action);
  }
}

/*
 * Brand logos centred above the device name, a pair centred as one group.
 * One logo-area height for every tile, so the names in a row start on one
 * line whatever each logo's shape. The logos are sized per brand in
 * inc/device-logos.php (width/height attributes: a symbol up to 32 px high,
 * a wordmark up to 110 px wide); max-width lets a wordmark shrink inside a
 * narrow tile instead of overflowing it.
 */
.ifc-scope .ifc-dv__logos {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  height: var(--ifc-dv-logo-slot);
}

.ifc-scope .ifc-dv__logos .ifc-device-logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

.ifc-scope .ifc-dv__icon {
  width: var(--ifc-dv-icon);
  height: var(--ifc-dv-icon);
  color: var(--ifc-ink);
}

.ifc-dv__label {
  min-width: 0;
  font-size: var(--ifc-dv-label-size);
  font-weight: 500;
  line-height: 1.35;
  /* Wraps at spaces and after slashes (<wbr> in the markup); break-word is
     only a last resort for a label that could not fit otherwise. */
  overflow-wrap: break-word;
}

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

@media (min-width: 480px) {
  .ifc-dv {
    --ifc-dv-cols: 3;
  }
}

@media (min-width: 768px) {
  .ifc-dv {
    --ifc-dv-pad-y: 48px;
  }
}

/* Split layout: copy left, grid right (still three columns here). */
@media (min-width: 1024px) {
  .ifc-dv {
    --ifc-dv-pad-y: 56px;
  }

  .ifc-dv__inner {
    flex-direction: row;
    align-items: center;   /* copy centred against the full grid */
    gap: var(--ifc-dv-col-gap);
  }

  /* Copy share of the space left after the column gap; the grid takes the rest. */
  .ifc-dv__copy {
    flex: 0 0 calc((100% - var(--ifc-dv-col-gap)) * var(--ifc-dv-copy-share));
    max-width: none;
  }

  .ifc-scope .ifc-dv__grid {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Five columns × three rows once the grid has room for it: at 1180 px the
   container is 1124 px, the grid 66 % of that after a 40 px gap ≈ 715 px,
   so five tiles are ≈ 135 px wide (≈ 110 px inside: the widest wordmark).
   Below this the tiles would drop under 120 px, so three columns are kept. */
@media (min-width: 1180px) {
  .ifc-dv {
    --ifc-dv-cols: 5;
    --ifc-dv-col-gap: 40px;
    --ifc-dv-copy-share: 0.34;
    --ifc-dv-grid-gap: 10px;
    --ifc-dv-icon: 26px;
    --ifc-dv-label-size: 0.875rem;   /* 14 px, wraps naturally */
  }
}

/* --------------------------------------------------------------------------
   How it works (ifc-how) — three setup steps
   Warm-white split section after the plans: intro left (~40 %), vertical
   timeline right (~60 %). Each step is a grid: marker | body | icon, with
   a fine divider above steps 2 and 3 (text column onwards) and a thin
   connector drawn per step between marker centres. Faint mirrored fold
   artwork sits on a separate layer along the left edge.
   -------------------------------------------------------------------------- */

.ifc-how {
  --ifc-how-pad-y: 44px;                 /* 72 px on desktop */
  --ifc-how-col-gap: 56px;
  --ifc-how-stack-gap: 32px;             /* intro → timeline when stacked */
  --ifc-how-heading-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);   /* 28 → 48 px */
  --ifc-how-heading-gap: 24px;           /* heading → intro */
  --ifc-how-lead-size: 1rem;             /* 18 px on desktop */
  --ifc-how-intro-max: 500px;
  --ifc-how-marker: 40px;                /* 48 px on desktop */
  --ifc-how-marker-font: 1rem;           /* 18 px on desktop */
  --ifc-how-marker-gap: 16px;            /* 24 px on desktop */
  --ifc-how-title-size: 1.25rem;         /* 20 px; 22 px on desktop */
  --ifc-how-title-lh: 1.3;
  --ifc-how-title-gap: 12px;             /* step heading → paragraph */
  --ifc-how-text-size: 1rem;
  --ifc-how-icon: 48px;                  /* 56 px on desktop */
  --ifc-how-icon-gap: 24px;
  --ifc-how-step-gap: 28px;              /* space above/below each divider; 36 px desktop */
  --ifc-how-fold-w: 70vw;                /* left-edge fold layer; ≤ 70 % of the section on phones */
  --ifc-how-fold-offset: 0px;            /* extra crop past the left edge, if ever needed */
  --ifc-how-folds-opacity: .18;          /* .22 tablet, .28 desktop */
  --ifc-icon-accent: var(--ifc-action);  /* red details inside the step icons */

  --ifc-bg: var(--ifc-paper);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-how-pad-y);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Decorative folds, restricted to the left portion of the section. The
   light artwork carries its facets on its right side, so this narrow layer
   is mirrored and its background anchored to its own right edge: the
   facets land against the section's left edge (cropped there) and fade
   out before the timeline. Opacity applies to this layer only. */
.ifc-how__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-how-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right var(--ifc-how-fold-offset) center;
  background-size: auto 100%;
  opacity: var(--ifc-how-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

.ifc-how__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-how-stack-gap);
}

/* Intro ----------------------------------------------------------------- */

.ifc-how__intro {
  max-width: var(--ifc-how-intro-max);
}

.ifc-scope .ifc-how__heading {
  font-size: var(--ifc-how-heading-size);
  line-height: 1.15;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-how__lead {
  margin-block-start: var(--ifc-how-heading-gap);
  font-size: var(--ifc-how-lead-size);
  line-height: 1.6;
  color: var(--ifc-muted);
}

/* Timeline -------------------------------------------------------------- */

.ifc-scope .ifc-how__steps {
  display: flex;
  flex-direction: column;
}

.ifc-how__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--ifc-how-marker) minmax(0, 1fr);
  grid-template-areas:
    "divider divider"
    "marker body";
  column-gap: var(--ifc-how-marker-gap);
  align-items: start;
  padding-block: var(--ifc-how-step-gap);
}

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

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

/* Connector: each step draws its own segment through the marker column,
   so wrapped paragraphs never misalign it. Marker centre → step bottom on
   all but the last step; step top → marker centre on all but the first. */
.ifc-how__step::before,
.ifc-how__step::after {
  content: "";
  position: absolute;
  left: calc(var(--ifc-how-marker) / 2 - 1px);
  width: 2px;
  background: var(--ifc-line);
  pointer-events: none;
}

.ifc-how__step::before {
  top: 0;
  height: calc(var(--ifc-how-step-gap) + var(--ifc-how-marker) / 2);
}

.ifc-how__step::after {
  top: calc(var(--ifc-how-step-gap) + var(--ifc-how-marker) / 2);
  bottom: 0;
}

.ifc-how__step:first-child::before {
  display: none;
}

.ifc-how__step:first-child::after {
  top: calc(var(--ifc-how-marker) / 2);
}

.ifc-how__step:last-child::after {
  display: none;
}

/* Divider: text column onwards, above steps 2 and 3. */
.ifc-how__divider {
  grid-area: divider;
  grid-column: 2 / -1;
  display: block;
  height: 1px;
  margin-block-end: var(--ifc-how-step-gap);
  background: var(--ifc-line);
}

.ifc-how__marker {
  grid-area: marker;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ifc-how-marker);
  height: var(--ifc-how-marker);
  border-radius: 50%;
  font-size: var(--ifc-how-marker-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ifc-surface);
  background: var(--ifc-action);
}

/* Body: first heading line centred on the marker. */
.ifc-how__body {
  grid-area: body;
  min-width: 0;
  padding-block-start: calc((var(--ifc-how-marker) - var(--ifc-how-title-size) * var(--ifc-how-title-lh)) / 2);
}

.ifc-scope .ifc-how__title {
  font-size: var(--ifc-how-title-size);
  line-height: var(--ifc-how-title-lh);
  letter-spacing: normal;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-how__text {
  margin-block-start: var(--ifc-how-title-gap);
  font-size: var(--ifc-how-text-size);
  line-height: 1.65;
  color: var(--ifc-muted);
}

/* Icons: decorative, hidden on narrow phones to keep the text column wide. */
.ifc-scope .ifc-how__icon {
  display: none;
  grid-area: icon;
  width: var(--ifc-how-icon);
  height: var(--ifc-how-icon);
  color: var(--ifc-ink);
}

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

@media (min-width: 600px) {
  .ifc-how__step {
    grid-template-columns: var(--ifc-how-marker) minmax(0, 1fr) var(--ifc-how-icon);
    grid-template-areas:
      "divider divider divider"
      "marker body icon";
  }

  .ifc-scope .ifc-how__icon {
    display: block;
    margin-inline-start: var(--ifc-how-icon-gap);
    justify-self: end;
  }
}

@media (min-width: 768px) {
  .ifc-how {
    --ifc-how-pad-y: 56px;
    --ifc-how-fold-w: clamp(280px, 34vw, 620px);   /* ≤ 55 % tablet, ≤ 45 % desktop */
    --ifc-how-folds-opacity: .22;
    --ifc-how-lead-size: 1.125rem;
    --ifc-how-marker: 48px;
    --ifc-how-marker-font: 1.125rem;
    --ifc-how-marker-gap: 24px;
    --ifc-how-title-size: 1.375rem;
    --ifc-how-icon: 56px;
    --ifc-how-step-gap: 36px;
  }
}

@media (min-width: 1024px) {
  .ifc-how {
    --ifc-how-pad-y: 72px;
    --ifc-how-folds-opacity: .28;
  }

  .ifc-how__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);   /* ≈ 40 / 60 */
    gap: var(--ifc-how-col-gap);
    align-items: center;   /* intro centred against the full timeline */
  }
}

@media (min-width: 1440px) {
  .ifc-how {
    --ifc-how-pad-y: 80px;
    --ifc-how-col-gap: 64px;
  }
}

/* --------------------------------------------------------------------------
   Included (ifc-inc) — "What's Included in Your IPTV Canada Plan"
   Charcoal section after the setup steps: centred intro + two plan
   summaries, then six image-led cards (3 × 2 ≥ 1024 px, 2 columns from
   600 px, 1 column below). Card order: image → heading (+ badge) → accent
   line → description. Gold only on the 4K card.
   -------------------------------------------------------------------------- */

.ifc-inc {
  --ifc-inc-pad-y: 44px;                   /* 72 px on desktop */
  --ifc-inc-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --ifc-inc-heading-gap: 16px;             /* heading → intro */
  --ifc-inc-lead-size: 1rem;               /* 17 px on desktop */
  --ifc-inc-lead-max: 720px;
  --ifc-inc-summary-gap: 22px;             /* intro → summaries */
  --ifc-inc-grid-gap-top: 32px;            /* summaries → grid */
  --ifc-inc-card-gap: 20px;                /* 24 px on desktop */
  --ifc-inc-card-radius: 12px;
  --ifc-inc-card-pad: 20px;                /* 24 px on desktop */
  --ifc-inc-image-ratio: 2.4 / 1;
  --ifc-inc-title-size: 1.375rem;          /* 22 px */
  --ifc-inc-title-lh: 1.25;
  --ifc-inc-title-lines: 1;                /* reserved heading lines per row (desktop) */
  --ifc-inc-accent-w: 34px;
  --ifc-inc-accent-h: 3px;
  --ifc-inc-accent-gap: 12px;              /* above and below the accent line */
  --ifc-inc-accent: var(--ifc-maple);      /* gold on the Premium card */
  --ifc-inc-text-size: 1rem;
  --ifc-inc-cta-gap: 20px;                 /* content → button; 24 px on desktop */
  --ifc-inc-cta-height: 46px;
  --ifc-inc-folds-opacity: .5;

  --ifc-bg: var(--ifc-ink);
  padding-block: var(--ifc-inc-pad-y);
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Subdued dark folds on their own layer; facets stay at the outer edges. */
.ifc-inc__folds {
  position: absolute;
  inset: 0;
  background: url("../../brand/backgrounds/fold-hero-dark.svg") center / cover no-repeat;
  opacity: var(--ifc-inc-folds-opacity);
  pointer-events: none;
}

.ifc-inc__inner {
  position: relative;
}

/* Intro ----------------------------------------------------------------- */

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

.ifc-scope .ifc-inc__heading {
  font-size: var(--ifc-inc-heading-size);
  line-height: 1.15;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-inc__lead {
  max-width: var(--ifc-inc-lead-max);
  margin: var(--ifc-inc-heading-gap) auto 0;
  font-size: var(--ifc-inc-lead-size);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

/* Plan summaries: informational text, side by side with a hairline
   separator from 600 px, stacked below. */
.ifc-scope .ifc-inc__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block-start: var(--ifc-inc-summary-gap);
  font-size: var(--ifc-small);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

.ifc-inc__summary-item {
  text-align: center;
}

.ifc-inc__summary-item strong {
  margin-inline-end: .35em;
  font-weight: 600;
  color: var(--ifc-paper);
}

/* Card grid ------------------------------------------------------------- */

.ifc-scope .ifc-inc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-inc-card-gap);
  margin-block-start: var(--ifc-inc-grid-gap-top);
}

.ifc-inc__card {
  display: flex;
  min-width: 0;
}

.ifc-inc__article {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ifc-white-a15);
  border-radius: var(--ifc-inc-card-radius);
  background: var(--ifc-graphite);
}

.ifc-inc__media {
  aspect-ratio: var(--ifc-inc-image-ratio);
  overflow: hidden;
  background: var(--ifc-ink-2);
}

.ifc-scope .ifc-inc__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.ifc-inc__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--ifc-inc-card-pad);
}

/* Heading row: title + optional badge; desktop reserves equal lines so the
   accent lines and descriptions line up across a row. */
.ifc-inc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: calc(var(--ifc-inc-title-size) * var(--ifc-inc-title-lh) * var(--ifc-inc-title-lines));
}

.ifc-scope .ifc-inc__title {
  font-size: var(--ifc-inc-title-size);
  line-height: var(--ifc-inc-title-lh);
  letter-spacing: normal;
  color: var(--ifc-paper);
}

.ifc-inc__badge {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--ifc-gold);
  border-radius: var(--ifc-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ifc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ifc-gold);
}

/* Accent line: between heading and description. */
.ifc-inc__accent {
  display: block;
  width: var(--ifc-inc-accent-w);
  height: var(--ifc-inc-accent-h);
  margin-block: var(--ifc-inc-accent-gap);
  border-radius: 2px;
  background: var(--ifc-inc-accent);
}

.ifc-scope .ifc-inc__text {
  font-size: var(--ifc-inc-text-size);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-inc__note {
  margin-block-start: 8px;
  font-size: var(--ifc-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ifc-paper-soft);
}

/* Card CTA: the only link in the card. Pushed to the bottom of the flex
   column body (auto top margin) so buttons line up across a row of
   equal-height cards; at least --ifc-inc-cta-gap from the content above. */
.ifc-scope .ifc-inc__action {
  margin-block-start: auto;
  padding-block-start: var(--ifc-inc-cta-gap);
}

.ifc-scope .ifc-inc__cta {
  --ifc-button-height: var(--ifc-inc-cta-height);
  --ifc-button-padding: 10px 18px;
  --ifc-button-size: .9375rem;   /* 15 px */
  display: flex;
  width: 100%;
  white-space: normal;           /* long labels wrap on narrow cards */
}

.ifc-scope .ifc-inc__cta .ifc-icon {
  width: 18px;
  height: 18px;
}

.ifc-inc__card--premium {
  --ifc-inc-accent: var(--ifc-gold);
}

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

/* Two columns: titles may wrap, so reserve two lines to keep the accent
   lines and descriptions aligned across a row. */
@media (min-width: 600px) {
  .ifc-inc {
    --ifc-inc-title-lines: 2;
  }

  .ifc-scope .ifc-inc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Summaries side by side only once both fit on one line each. */
@media (min-width: 900px) {
  .ifc-scope .ifc-inc__summary {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .ifc-inc__summary-item {
    padding-inline: 20px;
    white-space: nowrap;
  }

  .ifc-inc__summary-item + .ifc-inc__summary-item {
    border-inline-start: 1px solid var(--ifc-white-a15);
  }
}

@media (min-width: 768px) {
  .ifc-inc {
    --ifc-inc-pad-y: 56px;
    --ifc-inc-lead-size: 1.0625rem;
  }
}

@media (min-width: 1024px) {
  .ifc-inc {
    --ifc-inc-pad-y: 72px;
    --ifc-inc-card-gap: 24px;
    --ifc-inc-card-pad: 24px;
    --ifc-inc-cta-gap: 24px;
  }

  .ifc-scope .ifc-inc__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .ifc-inc {
    --ifc-inc-pad-y: 80px;
    --ifc-inc-title-lines: 1;   /* every title fits one line at this width */
  }
}


/* --------------------------------------------------------------------------
   Comparison (ifc-cp) — "IPTV Canada vs Cable TV: The Real Numbers"
   Warm-white section after "What's included": centred heading + intro,
   three informational cards (one row ≥ 1024 px, a single centred column
   below) and a plain savings statement. The centre card is emphasised by a
   2 px maple border, a very pale blush surface and a small folded corner —
   same size and alignment as its neighbours. Faint light folds sit at both
   outer edges on their own clipped layers, clear of the text. No hover,
   no links, no JavaScript.
   -------------------------------------------------------------------------- */

.ifc-cp {
  --ifc-cp-pad-y: 48px;                    /* 64 px tablet, 80 px desktop */
  --ifc-cp-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --ifc-cp-heading-gap: 14px;              /* heading → intro */
  --ifc-cp-lead-size: 1rem;                /* 17 px tablet, 18 px desktop */
  --ifc-cp-lead-max: 800px;
  --ifc-cp-grid-gap-top: 28px;             /* intro → cards; 32 px desktop */
  --ifc-cp-stack-max: 640px;               /* single-column width when stacked */
  --ifc-cp-card-gap: 16px;                 /* 20 px tablet, 24 px desktop */
  --ifc-cp-card-pad: 20px;                 /* 24 px tablet/desktop, 28 px ≥ 1440 */
  --ifc-cp-card-radius: 12px;
  --ifc-cp-title-size: 1.375rem;           /* 22 px; 24 px desktop */
  --ifc-cp-title-lh: 1.25;
  --ifc-cp-sub-size: var(--ifc-small);     /* 14 px supporting label */
  --ifc-cp-sub-lh: 1.5;
  --ifc-cp-head-min: auto;                 /* desktop: room for title + label on every card */
  --ifc-cp-head-gap: 16px;                 /* title area → list */
  --ifc-cp-text-size: .9375rem;            /* 15 px; 16 px desktop */
  --ifc-cp-text-lh: 1.6;
  --ifc-cp-item-gap: 16px;                 /* between list items */
  --ifc-cp-marker-col: 20px;               /* dedicated icon column (icons are 20 px) */
  --ifc-cp-marker-gap: 12px;
  --ifc-cp-note-gap: 20px;                 /* list → footnote */
  --ifc-cp-savings-gap: 28px;              /* cards → savings; 32 px desktop */
  --ifc-cp-savings-size: clamp(1.625rem, 1.4rem + .7vw, 1.875rem);   /* 26 → 30 px */
  --ifc-cp-savings-note-size: .9375rem;    /* 15 px; 16 px desktop */
  --ifc-cp-cta-gap: 24px;                  /* savings note → CTA */
  --ifc-cp-fold-w: 46vw;                   /* each edge layer; ≤ 46 % of the section on phones */
  --ifc-cp-folds-opacity: .14;             /* .18 tablet, .22 desktop */
  --ifc-cp-surface: var(--ifc-surface);
  --ifc-cp-border: var(--ifc-line);
  --ifc-cp-border-w: 1px;
  --ifc-cp-rule: var(--ifc-line);          /* hairline under the title area */
  --ifc-cp-blush-soft: var(--ifc-blush);   /* very pale blush, see the featured card */

  --ifc-bg: var(--ifc-paper);
  position: relative;      /* positioning + clipping boundary for the fold layers */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-cp-pad-y);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Fold layers: the light artwork carries its facets on its right side. The
   end layer shows it as-is anchored to the right edge; the start layer is
   mirrored (and anchored to its own right edge) so the facets land on the
   left edge. Both are narrow, faint and clipped by .ifc-cp. */
.ifc-cp__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  width: var(--ifc-cp-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-cp-folds-opacity);
  pointer-events: none;
}

.ifc-cp__folds--start {
  inset-inline-start: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

.ifc-cp__folds--end {
  inset-inline-end: 0;
}

.ifc-cp__inner {
  position: relative;
  z-index: 1;
}

/* Intro ----------------------------------------------------------------- */

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

.ifc-scope .ifc-cp__heading {
  font-size: var(--ifc-cp-heading-size);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-cp__lead {
  max-width: var(--ifc-cp-lead-max);
  margin: var(--ifc-cp-heading-gap) auto 0;
  font-size: var(--ifc-cp-lead-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-ink-soft);
}

/* Cards ----------------------------------------------------------------- */

.ifc-cp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-cp-card-gap);
  max-width: var(--ifc-cp-stack-max);
  margin: var(--ifc-cp-grid-gap-top) auto 0;
}

.ifc-cp__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(var(--ifc-cp-card-pad) - var(--ifc-cp-border-w) + 1px);   /* content edge identical on 1 px and 2 px cards */
  border: var(--ifc-cp-border-w) solid var(--ifc-cp-border);
  border-radius: var(--ifc-cp-card-radius);
  background: var(--ifc-cp-surface);
  color: var(--ifc-ink);
}

/* Title area: hairline underneath; desktop reserves the same height on every
   card so the lists start level despite the third card's supporting label. */
.ifc-cp__head {
  min-height: var(--ifc-cp-head-min);
  margin-block-end: var(--ifc-cp-head-gap);
  padding-block-end: 14px;
  border-block-end: 1px solid var(--ifc-cp-rule);
}

.ifc-scope .ifc-cp__title {
  font-size: var(--ifc-cp-title-size);
  line-height: var(--ifc-cp-title-lh);
  letter-spacing: normal;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-cp__sub {
  margin-block-start: var(--ifc-cp-sub-gap);
  font-size: var(--ifc-cp-sub-size);
  font-weight: 500;
  line-height: var(--ifc-cp-sub-lh);
  color: var(--ifc-muted);
}

/* Feature list: marker in its own column so wrapped lines align with text. */
.ifc-scope .ifc-cp__list {
  display: flex;
  flex-direction: column;
  gap: var(--ifc-cp-item-gap);
}

.ifc-cp__item {
  display: grid;
  grid-template-columns: var(--ifc-cp-marker-col) minmax(0, 1fr);
  column-gap: var(--ifc-cp-marker-gap);
  align-items: start;
  font-size: var(--ifc-cp-text-size);
  line-height: var(--ifc-cp-text-lh);
  color: var(--ifc-ink-soft);
}

.ifc-cp__label {
  font-weight: 700;
  color: var(--ifc-ink);
}

/* Markers: one 20 px slot centred on the first text line (line box = text
   size × line height); never shrink, never sit under wrapped text. */
.ifc-cp__marker {
  --ifc-cp-marker-size: 20px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ifc-cp-marker-size);
  height: var(--ifc-cp-marker-size);
  margin-block-start: calc((var(--ifc-cp-text-size) * var(--ifc-cp-text-lh) - var(--ifc-cp-marker-size)) / 2);
  color: var(--ifc-action);
}

/* Red outlined circle-X (Traditional Cable and Other IPTV Providers share
   the same symbol from ui-sprite.svg, same size, stroke and colour). */
.ifc-scope .ifc-cp__x {
  width: var(--ifc-cp-marker-size);
  height: var(--ifc-cp-marker-size);
}

/* Red checkmark on a small white disc (IPTV Canada) */
.ifc-cp__marker--check {
  border: 1px solid var(--ifc-blush-active);
  border-radius: 50%;
  background: var(--ifc-surface);
}

.ifc-scope .ifc-cp__check {
  width: 13px;
  height: 13px;
}

.ifc-scope .ifc-cp__note {
  margin-block-start: var(--ifc-cp-note-gap);
  font-size: var(--ifc-small);
  line-height: 1.5;
  color: var(--ifc-muted);
}

/* Featured card (IPTV Canada): colour and border only — same size, same
   alignment. The folded corner is a clipped triangle in the top-right. */
.ifc-cp__card--featured {
  --ifc-cp-border: var(--ifc-action);
  --ifc-cp-border-w: 2px;
  --ifc-cp-rule: var(--ifc-blush-active);
  --ifc-cp-surface: var(--ifc-cp-blush-soft);
  overflow: hidden;
}

@supports (background: color-mix(in srgb, red 50%, white)) {
  .ifc-cp__card--featured {
    --ifc-cp-blush-soft: color-mix(in srgb, var(--ifc-blush) 55%, var(--ifc-surface));
  }
}

.ifc-cp__card--featured::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(to bottom left, var(--ifc-action) 50%, transparent 50%);
  pointer-events: none;
}

.ifc-cp__card--featured .ifc-cp__note {
  color: var(--ifc-ink-soft);
}

/* Savings statement: plain centred text on the section background. */
.ifc-cp__savings {
  max-width: var(--ifc-cp-lead-max);
  margin: var(--ifc-cp-savings-gap) auto 0;
  text-align: center;
}

.ifc-scope .ifc-cp__savings-headline {
  font-size: var(--ifc-cp-savings-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ifc-tracking-tight);
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-cp__savings-amount {
  color: var(--ifc-action);
}

.ifc-scope .ifc-cp__savings-note {
  margin-block-start: 10px;
  font-size: var(--ifc-cp-savings-note-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-ink-soft);
}

/* Section CTA: shared primary button centred under the savings note,
   natural width; full width on narrow phones. */
.ifc-scope .ifc-cp__action {
  margin-block-start: var(--ifc-cp-cta-gap);
  text-align: center;
}

.ifc-scope .ifc-cp__cta {
  --ifc-button-height: 52px;
  --ifc-button-padding: 14px 28px;
}

@media (max-width: 479.98px) {
  .ifc-scope .ifc-cp__cta {
    display: flex;
    width: 100%;
  }
}

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

@media (min-width: 768px) {
  .ifc-cp {
    --ifc-cp-pad-y: 64px;
    --ifc-cp-lead-size: 1.0625rem;
    --ifc-cp-card-gap: 20px;
    --ifc-cp-card-pad: 24px;
    --ifc-cp-fold-w: clamp(200px, 24vw, 440px);
    --ifc-cp-folds-opacity: .18;
  }
}

/* Three equal columns; the title area reserves title + supporting label
   height so all three lists start level. */
@media (min-width: 1024px) {
  .ifc-cp {
    --ifc-cp-pad-y: 80px;
    --ifc-cp-lead-size: 1.125rem;
    --ifc-cp-grid-gap-top: 32px;
    --ifc-cp-card-gap: 24px;
    --ifc-cp-title-size: 1.5rem;
    --ifc-cp-head-min: calc(var(--ifc-cp-title-size) * var(--ifc-cp-title-lh) + var(--ifc-cp-sub-gap) + var(--ifc-cp-sub-size) * var(--ifc-cp-sub-lh));
    --ifc-cp-text-size: 1rem;
    --ifc-cp-savings-gap: 32px;
    --ifc-cp-savings-note-size: 1rem;
    --ifc-cp-folds-opacity: .22;
  }

  .ifc-cp__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;   /* equal heights; the featured card never floats or grows */
    max-width: none;
  }

  .ifc-cp__head {
    box-sizing: content-box;   /* min-height = text only; padding adds the rule spacing */
  }
}

@media (min-width: 1440px) {
  .ifc-cp {
    --ifc-cp-card-pad: 28px;
  }
}

/* --------------------------------------------------------------------------
   Why choose (ifc-why) — "Why Canadians Choose Our IPTV Canada Service"
   Warm-white section after the free trial: centred heading + intro, six
   informational cards (3 columns ≥ 1100 px, 2 from 700 px, 1 below) with a
   red outline icon, title, short red accent line and description. The
   first card has a 2 px maple border and a small folded corner but sits in
   one normal cell. Faint light folds on a left-edge layer clipped by the
   section. No links, no hover, no JavaScript.
   -------------------------------------------------------------------------- */

.ifc-why {
  --ifc-why-pad-y: 48px;                   /* 64 px tablet, 80 px desktop */
  --ifc-why-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --ifc-why-heading-gap: 16px;             /* heading → intro */
  --ifc-why-lead-size: 1rem;               /* 17 px tablet, 18 px desktop */
  --ifc-why-lead-max: 720px;
  --ifc-why-grid-gap-top: 32px;            /* intro → grid; 40 px desktop */
  --ifc-why-cta-gap: 32px;                 /* grid → button, at every width */
  --ifc-why-card-gap: 16px;                /* 20 px tablet, 24 px desktop */
  --ifc-why-card-pad: 20px;                /* 24 px tablet, 28 px desktop */
  --ifc-why-card-radius: 12px;
  --ifc-why-icon: 44px;
  --ifc-why-icon-gap: 16px;                /* icon → title */
  --ifc-why-title-size: 1.25rem;           /* 20 px; 22 px desktop */
  --ifc-why-title-lh: 1.3;
  --ifc-why-accent-w: 36px;
  --ifc-why-accent-h: 3px;
  --ifc-why-accent-gap: 12px;              /* above and below the accent line */
  --ifc-why-text-size: 1rem;
  --ifc-why-fold-w: 60vw;                  /* left-edge fold layer */
  --ifc-why-folds-opacity: .14;            /* .18 tablet, .22 desktop */
  --ifc-why-border: var(--ifc-line);
  --ifc-why-border-w: 1px;

  --ifc-bg: var(--ifc-paper);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-why-pad-y);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Decorative folds restricted to the left portion: the light artwork has
   its facets on the right, so this narrow layer is mirrored and anchored to
   its own right edge — the facets meet the section's left edge and fade
   out before the content. Never a full-width mirrored layer. */
.ifc-why__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-why-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-why-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

.ifc-why__inner {
  position: relative;
  z-index: 1;
}

/* Intro ----------------------------------------------------------------- */

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

.ifc-scope .ifc-why__heading {
  font-size: var(--ifc-why-heading-size);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-why__lead {
  max-width: var(--ifc-why-lead-max);
  margin: var(--ifc-why-heading-gap) auto 0;
  font-size: var(--ifc-why-lead-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-ink-soft);
}

/* Cards ----------------------------------------------------------------- */

.ifc-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-why-card-gap);
  margin-block-start: var(--ifc-why-grid-gap-top);
}

.ifc-why__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: calc(var(--ifc-why-card-pad) - var(--ifc-why-border-w) + 1px);   /* same content edge on 1 px and 2 px cards */
  border: var(--ifc-why-border-w) solid var(--ifc-why-border);
  border-radius: var(--ifc-why-card-radius);
  background: var(--ifc-surface);
  color: var(--ifc-ink);
  text-align: start;
}

.ifc-why__icon {
  display: block;
  width: var(--ifc-why-icon);
  height: var(--ifc-why-icon);
  margin-block-end: var(--ifc-why-icon-gap);
  color: var(--ifc-action);
}

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

.ifc-scope .ifc-why__title {
  font-size: var(--ifc-why-title-size);
  line-height: var(--ifc-why-title-lh);
  letter-spacing: normal;
  color: var(--ifc-ink);
}

.ifc-why__accent {
  display: block;
  width: var(--ifc-why-accent-w);
  height: var(--ifc-why-accent-h);
  margin-block: var(--ifc-why-accent-gap);
  border-radius: 2px;
  background: var(--ifc-action);
}

.ifc-scope .ifc-why__text {
  font-size: var(--ifc-why-text-size);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--ifc-muted);
}

/* One button, centred beneath the whole grid, in normal flow. It stays its
   content width at every size (the shared .ifc-button is inline-flex and
   48 px tall), so on a phone it sits centred inside the page gutters rather
   than stretching edge to edge. */
.ifc-scope .ifc-why__actions {
  display: flex;
  justify-content: center;
  margin: var(--ifc-why-cta-gap) 0 0;
}

.ifc-scope .ifc-why__cta {
  max-width: 100%;
}

/* Featured card: thin red border + small folded corner, same cell size. */
.ifc-why__card--featured {
  --ifc-why-border: var(--ifc-action);
  --ifc-why-border-w: 2px;
  overflow: hidden;
}

.ifc-why__card--featured::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom left, var(--ifc-action) 50%, transparent 50%);
  pointer-events: none;
}

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

@media (min-width: 700px) {
  .ifc-why {
    --ifc-why-card-gap: 20px;
    --ifc-why-card-pad: 24px;
  }

  .ifc-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 768px) {
  .ifc-why {
    --ifc-why-pad-y: 64px;
    --ifc-why-lead-size: 1.0625rem;
    --ifc-why-fold-w: clamp(280px, 34vw, 620px);
    --ifc-why-folds-opacity: .18;
  }
}

@media (min-width: 1100px) {
  .ifc-why {
    --ifc-why-pad-y: 80px;
    --ifc-why-lead-size: 1.125rem;
    --ifc-why-grid-gap-top: 40px;
    --ifc-why-card-gap: 24px;
    --ifc-why-card-pad: 28px;
    --ifc-why-title-size: 1.375rem;
    --ifc-why-folds-opacity: .22;
  }

  .ifc-why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Reviews (ifc-reviews) — "Subscribers experience with IPTV Canada"
   Charcoal section after "Why choose": centred heading + subtitle, a native
   scroll-snap track (1 card visible, 2 from 700 px, 3 from 1024 px) and
   Previous / dots / Next controls revealed by pages/home.js. Every card has
   the same permanent 3 px red top bar; no card is ever enlarged, lifted,
   recoloured or faded. Faint dark folds on a right-edge layer.
   -------------------------------------------------------------------------- */

.ifc-reviews {
  --ifc-reviews-pad-y: 44px;               /* 64 px tablet, 80 px desktop */
  --ifc-reviews-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --ifc-reviews-heading-gap: 14px;
  --ifc-reviews-lead-size: 1rem;           /* 17 px desktop */
  --ifc-reviews-track-gap-top: 32px;       /* intro → cards; 40 px desktop */
  --ifc-reviews-per-view: 1;               /* 2 from 700 px, 3 from 1024 px */
  --ifc-reviews-gap: 16px;                 /* 20 px tablet, 24 px desktop */
  --ifc-reviews-card-pad: 24px;            /* 28 px desktop */
  --ifc-reviews-card-radius: 12px;
  --ifc-reviews-bar: 3px;                  /* permanent red top border on every card */
  --ifc-reviews-text-size: 1rem;           /* 17 px desktop */
  --ifc-reviews-star: 16px;
  --ifc-reviews-avatar: 44px;
  --ifc-reviews-controls-gap: 28px;        /* cards → controls; 32 px desktop */
  --ifc-reviews-target: 44px;              /* minimum touch target for every control */
  --ifc-reviews-fold-w: 60vw;
  --ifc-reviews-folds-opacity: .18;        /* .26 tablet, .34 desktop */
  --ifc-reviews-line: var(--ifc-white-a15);

  --ifc-bg: var(--ifc-ink);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-reviews-pad-y);
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Decorative dark folds anchored to the section's right edge. */
.ifc-reviews__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--ifc-reviews-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-reviews-folds-opacity);
  pointer-events: none;
}

.ifc-reviews__inner {
  position: relative;
  z-index: 1;
}

/* Intro ----------------------------------------------------------------- */

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

.ifc-scope .ifc-reviews__heading {
  font-size: var(--ifc-reviews-heading-size);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-reviews__lead {
  max-width: 720px;
  margin: var(--ifc-reviews-heading-gap) auto 0;
  font-size: var(--ifc-reviews-lead-size);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

/* Track ----------------------------------------------------------------- */

/* Native horizontal scroller: works with touch, trackpad and keyboard even
   without JavaScript. Overflow is contained here, never on the page. */
.ifc-reviews__viewport {
  margin-block-start: var(--ifc-reviews-track-gap-top);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 12px;                 /* room for the scrollbar without JS */
  border-radius: var(--ifc-reviews-card-radius);
}

.ifc-reviews__viewport:focus {
  outline: none;
}

.ifc-reviews__viewport:focus-visible {
  outline: 3px solid var(--ifc-surface);
  outline-offset: 4px;
}

/* Enhanced (JS running): controls replace the scrollbar. */
.ifc-reviews--enhanced .ifc-reviews__viewport {
  padding-block-end: 0;
  scrollbar-width: none;
}

.ifc-reviews--enhanced .ifc-reviews__viewport::-webkit-scrollbar {
  display: none;
}

.ifc-scope .ifc-reviews__track {
  display: flex;
  align-items: stretch;                    /* every card as tall as the longest review */
  gap: var(--ifc-reviews-gap);
}

.ifc-reviews__slide {
  display: flex;
  flex: 0 0 calc((100% - (var(--ifc-reviews-per-view) - 1) * var(--ifc-reviews-gap)) / var(--ifc-reviews-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

/* Card ------------------------------------------------------------------ */

.ifc-reviews__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  padding: calc(var(--ifc-reviews-card-pad) + var(--ifc-reviews-bar)) var(--ifc-reviews-card-pad) var(--ifc-reviews-card-pad);
  border: 1px solid var(--ifc-reviews-line);
  border-radius: var(--ifc-reviews-card-radius);
  background: var(--ifc-graphite);
  color: var(--ifc-paper);
}

/* Permanent decorative red top border — identical on every card, every state. */
.ifc-reviews__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--ifc-reviews-bar);
  background: var(--ifc-maple);
  pointer-events: none;
}

.ifc-reviews__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ifc-reviews__mark {
  display: block;
  color: var(--ifc-maple);
  line-height: 0;
}

.ifc-scope .ifc-reviews__mark-icon {
  width: 34px;
  height: 26px;
}

.ifc-reviews__stars {
  display: inline-flex;
  flex: none;
  gap: 3px;
  padding-block-start: 2px;
  color: var(--ifc-maple);
}

.ifc-scope .ifc-reviews__star {
  width: var(--ifc-reviews-star);
  height: var(--ifc-reviews-star);
}

.ifc-scope .ifc-reviews__star--empty {
  color: var(--ifc-white-a18);
}

.ifc-scope .ifc-reviews__quote {
  margin: 20px 0 0;
  padding: 0 0 24px;                       /* minimum gap above the footer divider */
  border: 0;
  quotes: none;
  font-style: normal;
  background: none;
}

.ifc-scope .ifc-reviews__text {
  font-size: var(--ifc-reviews-text-size);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

/* Author footer: pinned to the bottom so footers align across the row. */
.ifc-reviews__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--ifc-reviews-line);
  font-style: normal;
}

.ifc-reviews__avatar {
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  width: var(--ifc-reviews-avatar);
  height: var(--ifc-reviews-avatar);
  overflow: hidden;
  border-radius: 50%;
  background: var(--ifc-ink-2);
  color: var(--ifc-muted);
}

.ifc-scope .ifc-reviews__avatar-icon {
  width: 80%;
  height: 80%;
}

.ifc-scope .ifc-reviews__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ifc-reviews__person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ifc-reviews__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifc-paper);
}

.ifc-reviews__location {
  font-size: var(--ifc-small);
  line-height: 1.4;
  color: var(--ifc-text-dim);
}

/* Controls -------------------------------------------------------------- */

.ifc-reviews__controls:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: var(--ifc-reviews-controls-gap);
}

.ifc-scope .ifc-reviews__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ifc-reviews-target);
  height: var(--ifc-reviews-target);
  padding: 0;
  border: 1px solid var(--ifc-white-a35);
  border-radius: 50%;
  background: transparent;
  color: var(--ifc-surface);
  cursor: pointer;
  transition:
    background-color var(--ifc-duration) var(--ifc-ease),
    border-color var(--ifc-duration) var(--ifc-ease),
    opacity var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope .ifc-reviews__arrow-icon {
  width: 20px;
  height: 20px;
}

/* aria-disabled (not [disabled]) so focus stays on the button at either end. */
.ifc-scope .ifc-reviews__arrow[aria-disabled="true"] {
  opacity: .4;
  cursor: default;
}

@media (hover: hover) {
  .ifc-scope .ifc-reviews__arrow:not([aria-disabled="true"]):hover {
    border-color: var(--ifc-surface);
    background: var(--ifc-white-a10);
  }

  .ifc-scope .ifc-reviews__dot:hover .ifc-reviews__dot-mark {
    background: var(--ifc-text-dim);
  }

  .ifc-scope .ifc-reviews__dot[aria-current="true"]:hover .ifc-reviews__dot-mark {
    background: var(--ifc-maple);
  }
}

/* Dots wrap onto a second line rather than overflowing when there are many
   pages on a narrow screen. Each dot button is a 44 × 44 px target around
   a 10 px visible mark. */
.ifc-reviews__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
}

.ifc-scope .ifc-reviews__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ifc-reviews-target);
  height: var(--ifc-reviews-target);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.ifc-reviews__dot-mark {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ifc-muted);
  transition: background-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-reviews__dot[aria-current="true"] .ifc-reviews__dot-mark {
  background: var(--ifc-maple);
}

.ifc-scope .ifc-reviews__arrow:focus-visible,
.ifc-scope .ifc-reviews__dot:focus-visible {
  outline: 3px solid var(--ifc-surface);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ifc-scope .ifc-reviews__arrow,
  .ifc-reviews__dot-mark {
    transition: none;
  }
}

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

/* Phones: let the controls row use the gutters so six 44 px dots fit
   between the arrows at 375 px. */
@media (max-width: 479.98px) {
  .ifc-reviews__controls:not([hidden]) {
    gap: 4px;
    margin-inline: -12px;
  }
}

@media (min-width: 700px) {
  .ifc-reviews {
    --ifc-reviews-per-view: 2;
    --ifc-reviews-gap: 20px;
  }
}

@media (min-width: 768px) {
  .ifc-reviews {
    --ifc-reviews-pad-y: 64px;
    --ifc-reviews-fold-w: clamp(320px, 38vw, 720px);
    --ifc-reviews-folds-opacity: .26;
  }
}

@media (min-width: 1024px) {
  .ifc-reviews {
    --ifc-reviews-pad-y: 80px;
    --ifc-reviews-per-view: 3;
    --ifc-reviews-gap: 24px;
    --ifc-reviews-card-pad: 28px;
    --ifc-reviews-lead-size: 1.0625rem;
    --ifc-reviews-text-size: 1.0625rem;
    --ifc-reviews-track-gap-top: 40px;
    --ifc-reviews-controls-gap: 32px;
    --ifc-reviews-folds-opacity: .34;
  }
}

/* --------------------------------------------------------------------------
   Coverage (ifc-coverage) — "IPTV Canada Coverage: Available Coast to Coast"
   Warm-white section after the reviews: introduction 42 % / map 58 % from
   1024 px (stacked below), then centred hub and ISP name lists. The inline
   SVG keeps its own neutral fills and white boundaries; the active region
   turns blush. Hotspot buttons and name panels live in an overlay that
   covers exactly the SVG rectangle (.ifc-coverage__canvas has no padding).
   pages/home.js positions them and adds .ifc-coverage--enhanced.
   -------------------------------------------------------------------------- */

.ifc-coverage {
  --ifc-coverage-pad-y: 44px;              /* 64 px tablet, 80 px desktop */
  --ifc-coverage-heading-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);   /* 28 → 44 px */
  --ifc-coverage-lead-size: 1rem;          /* 17 px desktop */
  --ifc-coverage-col-gap: 48px;            /* 56 px from 1280 px */
  --ifc-coverage-stack-gap: 32px;          /* intro → map when stacked */
  --ifc-coverage-lists-gap: 40px;          /* map area → lists; 48 px desktop */
  --ifc-coverage-sub-size: 1.375rem;       /* 22 px; 28 px desktop */
  --ifc-coverage-name-size: 1rem;          /* 17 px desktop */
  --ifc-coverage-name-pad: 12px;           /* half the space between two names; 14 px desktop */
  --ifc-coverage-dot: 9px;
  --ifc-coverage-fold-w: 60vw;
  --ifc-coverage-folds-opacity: .14;       /* .18 tablet, .22 desktop */

  --ifc-bg: var(--ifc-paper);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-coverage-pad-y);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Light folds restricted to the far-left edge (mirrored narrow layer, never
   a full-width mirrored background). */
.ifc-coverage__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-coverage-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-coverage-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

.ifc-coverage__inner {
  position: relative;
  z-index: 1;
}

/* Upper split ----------------------------------------------------------- */

.ifc-coverage__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-coverage-stack-gap);
}

.ifc-coverage__intro {
  max-width: 640px;
}

.ifc-scope .ifc-coverage__heading {
  font-size: var(--ifc-coverage-heading-size);
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-coverage__rule {
  display: block;
  width: 64px;
  height: 4px;
  margin-block: 22px;
  border-radius: 2px;
  background: var(--ifc-action);
}

.ifc-scope .ifc-coverage__lead {
  font-size: var(--ifc-coverage-lead-size);
  line-height: 1.65;
  text-wrap: pretty;
  color: var(--ifc-ink-soft);
}

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

/* Coordinate layer: the SVG rectangle exactly. */
.ifc-coverage__canvas {
  position: relative;
  line-height: 0;
}

.ifc-scope .ifc-coverage__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ifc-coverage__svg path[data-region] {
  transition: fill var(--ifc-duration) var(--ifc-ease);
}

/* Active region: pale blush (overrides the path's own neutral fill). */
.ifc-coverage__svg path[data-region].is-active {
  fill: var(--ifc-blush-active);
}

/* Atlantic leader lines + true-location anchors (two classes: must beat the
   shared svg reset, which sets display: block). */
.ifc-scope .ifc-coverage__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: visible;
  pointer-events: none;
}

.ifc-coverage__leader line {
  stroke: var(--ifc-muted);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ifc-coverage__leader circle {
  fill: var(--ifc-surface);
  stroke: var(--ifc-action);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.ifc-coverage__leader.is-active line {
  stroke: var(--ifc-action);
}

.ifc-coverage__leader.is-active circle {
  fill: var(--ifc-action);
}

/* Hotspot overlay: hidden until JavaScript positions it. */
.ifc-coverage__hotspots {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

.ifc-coverage--enhanced .ifc-coverage__hotspots,
.ifc-scope.ifc-coverage--enhanced .ifc-coverage__leaders {
  display: block;
}

/* Circular hit area. Its diameter never exceeds 8.8 % of the map width (a
   percentage width resolves against the overlay, i.e. the map) — the
   smallest distance between any two controls is 8.93 % — so hit areas cannot
   overlap at any size. Circles (border-radius) also clip hit-testing. */
.ifc-scope .ifc-coverage__hotspot {
  position: absolute;
  z-index: 1;
  left: var(--ifc-coverage-x, 0);
  top: var(--ifc-coverage-y, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(44px, 8.8%);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.ifc-coverage__dot {
  display: block;
  width: var(--ifc-coverage-dot);
  height: var(--ifc-coverage-dot);
  border-radius: 50%;
  background: var(--ifc-action);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
  transition: box-shadow var(--ifc-duration) var(--ifc-ease);
}

/* Subtle ring on the active dot (no pulsing). */
.ifc-scope .ifc-coverage__hotspot.is-active {
  z-index: 2;
}

.ifc-coverage__hotspot.is-active .ifc-coverage__dot {
  box-shadow: 0 0 0 2px var(--ifc-surface), 0 0 0 6px rgba(206, 32, 53, .28);
}

.ifc-scope .ifc-coverage__hotspot:focus {
  outline: none;
}

.ifc-scope .ifc-coverage__hotspot:focus-visible {
  outline: 3px solid var(--ifc-ink);
  outline-offset: 1px;
}

/* Name panel: white, short red top border, compact; positioned above its
   dot (or below when there is no room) and nudged horizontally by
   --ifc-coverage-shift so it stays inside the map. */
.ifc-coverage__panel {
  --ifc-coverage-gap: 16px;
  position: absolute;
  z-index: 3;
  left: var(--ifc-coverage-x, 0);
  top: var(--ifc-coverage-y, 0);
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 8px 14px 9px;
  border-top: 3px solid var(--ifc-action);
  border-radius: 6px;
  background: var(--ifc-surface);
  box-shadow: 0 6px 20px rgba(var(--ifc-ink-rgb), .14), 0 1px 3px rgba(var(--ifc-ink-rgb), .08);
  line-height: 1.3;
  transform: translate(calc(-50% + var(--ifc-coverage-shift, 0px)), calc(-100% - var(--ifc-coverage-gap)));
  pointer-events: auto;
}

.ifc-coverage__panel[hidden] {
  display: none;
}

.ifc-coverage__panel.is-below {
  transform: translate(calc(-50% + var(--ifc-coverage-shift, 0px)), var(--ifc-coverage-gap));
}

/* Pointer toward the dot. */
.ifc-coverage__panel::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--ifc-coverage-shift, 0px));
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--ifc-surface);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 3px rgba(var(--ifc-ink-rgb), .06);
}

.ifc-coverage__panel.is-below::after {
  top: -8px;
  bottom: auto;
  background: var(--ifc-action);
  box-shadow: none;
}

.ifc-scope .ifc-coverage__panel-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--ifc-ink);
}

/* Lists ----------------------------------------------------------------- */

.ifc-coverage__lists {
  margin-block-start: var(--ifc-coverage-lists-gap);
  text-align: center;
}

.ifc-scope .ifc-coverage__subheading {
  font-size: var(--ifc-coverage-sub-size);
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ifc-ink);
}

/* Names wrap as whole units and centre naturally. The space between two
   names is the padding of both; the red separator is an empty pseudo-element
   centred on that boundary, so hiding it at the start of a wrapped line
   (JS adds .is-line-start) never changes the layout. */
.ifc-scope .ifc-coverage__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  margin: 16px calc(var(--ifc-coverage-name-pad) * -1) 0;
}

.ifc-coverage__name {
  position: relative;
  padding-inline: var(--ifc-coverage-name-pad);
  font-size: var(--ifc-coverage-name-size);
  line-height: 1.6;
  white-space: nowrap;
  color: var(--ifc-ink);
}

.ifc-coverage__name::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ifc-action);
  transform: translate(-50%, -50%);
}

.ifc-coverage__name:first-child::before,
.ifc-coverage__name.is-line-start::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ifc-coverage__svg path[data-region],
  .ifc-coverage__dot {
    transition: none;
  }
}

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

@media (min-width: 768px) {
  .ifc-coverage {
    --ifc-coverage-pad-y: 64px;
    --ifc-coverage-fold-w: clamp(280px, 34vw, 620px);
    --ifc-coverage-folds-opacity: .18;
  }
}

@media (min-width: 1024px) {
  .ifc-coverage {
    --ifc-coverage-pad-y: 80px;
    --ifc-coverage-lead-size: 1.0625rem;
    --ifc-coverage-lists-gap: 48px;
    --ifc-coverage-sub-size: 1.75rem;
    --ifc-coverage-name-size: 1.0625rem;
    --ifc-coverage-name-pad: 14px;
    --ifc-coverage-dot: 10px;
    --ifc-coverage-folds-opacity: .22;
  }

  .ifc-coverage__top {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: center;
    gap: var(--ifc-coverage-col-gap);
  }

  .ifc-coverage__top--text-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .ifc-scope .ifc-coverage__panel-title {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1280px) {
  .ifc-coverage {
    --ifc-coverage-col-gap: 56px;
  }
}

/* --------------------------------------------------------------------------
   Home reseller (ifc-hrs) — charcoal signpost to /iptv-reseller/
   Top row: heading + introduction (about two-thirds) beside one
   content-width button, vertically centred. A hairline, then three OPEN
   columns — icon beside title, description underneath — never boxed cards.
   Every value is a custom property on .ifc-hrs; breakpoints only retune them.
   -------------------------------------------------------------------------- */

.ifc-hrs {
  --ifc-hrs-pad-y: 40px;                   /* 64 px from tablet up */
  --ifc-hrs-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px, as Reviews */
  --ifc-hrs-lead-size: 1rem;               /* 17 px desktop */
  --ifc-hrs-top-gap: 24px;                 /* introduction → button while stacked */
  --ifc-hrs-col-gap: 48px;                 /* introduction ↔ button once side by side */
  --ifc-hrs-rule-gap: 32px;                /* above and below the hairline */
  --ifc-hrs-feature-gap: 24px;             /* stacked; 32 px between the three columns */
  --ifc-hrs-icon: 28px;
  --ifc-hrs-fold-w: clamp(240px, 28vw, 520px);
  --ifc-hrs-folds-opacity: .16;            /* .22 tablet, .28 desktop */

  --ifc-bg: var(--ifc-ink);
  position: relative;      /* positioning + clipping boundary for the fold layer */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-hrs-pad-y);
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Decorative dark folds at the far-right edge, behind everything. The shared
   fade in general.css softens their inner edge towards the content. */
.ifc-hrs__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--ifc-hrs-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-hrs-folds-opacity);
  pointer-events: none;
}

/* The section's own measure: 1200 px of content, centred, inside the shared
   responsive gutters. Compound with .ifc-container so it wins over the page
   container's 1440 px whatever the stylesheet order. */
.ifc-container.ifc-hrs__inner {
  position: relative;
  z-index: 1;
  max-width: calc(1200px + var(--ifc-gutter) * 2);
}

/* Top row: stacked (button under the paragraph) until both fit side by side. */
.ifc-hrs__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-hrs-top-gap);
  align-items: center;
}

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

.ifc-scope .ifc-hrs__heading {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: var(--ifc-hrs-heading-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-hrs__lead {
  max-width: 760px;
  margin: 16px 0 0;
  font-size: var(--ifc-hrs-lead-size);
  line-height: 1.65;
  text-wrap: pretty;
  color: var(--ifc-text-dim);
}

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

/* Full width on a phone, content width from 560 px. The shared button never
   wraps its label, and the row only splits once the button's own column is
   at least as wide as the button (see the 960 px step). */
.ifc-scope .ifc-hrs__cta {
  display: flex;
  width: 100%;
}

/* Supporting row: the hairline is the list's own top border, so its margin
   is the space ABOVE the line and its padding the space BELOW it. The list
   does not carry .ifc-list-reset, whose higher-specificity padding: 0 was
   cancelling that padding. */
.ifc-scope .ifc-hrs__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ifc-hrs-feature-gap);
  margin: var(--ifc-hrs-rule-gap) 0 0;
  padding: var(--ifc-hrs-rule-gap) 0 0;
  border-block-start: 1px solid var(--ifc-white-a15);
  list-style: none;
}

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

.ifc-hrs__feature-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ifc-hrs__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ifc-hrs-icon);
  height: var(--ifc-hrs-icon);
  color: var(--ifc-maple);   /* the brighter red on charcoal, as the FAQ icons */
}

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

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

.ifc-scope .ifc-hrs__feature-text {
  max-width: 40ch;
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

/* --------------------------------------------------------------------------
   Home latest posts (ifc-hlp) — warm white, the three newest Posts
   Equal vertical cards, the same shape as the cards on /blog/: the complete
   cover across the top, then category, title and "Read article". The card
   count is on the grid (--1, --2, --3) only so that fewer than three Posts
   still sit well. Nothing has a fixed height: rows are as tall as their
   content and the grid stretches cards to meet each other, with the link
   pinned to the foot of every card.
   -------------------------------------------------------------------------- */

.ifc-hlp {
  --ifc-hlp-pad-y: 44px;                   /* 64 px tablet, 80 px desktop */
  --ifc-hlp-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --ifc-hlp-lead-size: 1rem;               /* 17 px desktop */
  --ifc-hlp-head-gap: 28px;                /* header → cards; 32 px desktop */
  --ifc-hlp-gap: 24px;
  --ifc-hlp-radius: 12px;
  --ifc-hlp-pad: 20px;                     /* card text; 22 px from 1024 px, as on /blog/ */
  --ifc-hlp-fold-w: clamp(220px, 24vw, 440px);
  --ifc-hlp-folds-opacity: .12;            /* .16 desktop */

  --ifc-bg: var(--ifc-paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-hlp-pad-y);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Light folds on the LEFT edge (mirrored), as on the other warm-white
   homepage sections, so the dark section above keeps the right. */
.ifc-hlp__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-hlp-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-hlp-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

.ifc-hlp__inner {
  position: relative;
  z-index: 1;
}

/* Header: copy on the left, the link on the right, bottoms aligned. The
   copy's flex basis is what drops the link onto its own line below the
   copy once the row is too narrow for both. */
.ifc-hlp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
}

.ifc-hlp__intro {
  flex: 1 1 30rem;
  min-width: 0;
}

.ifc-scope .ifc-hlp__heading {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: var(--ifc-hlp-heading-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-hlp__lead {
  max-width: 60ch;
  margin: 12px 0 0;
  font-size: var(--ifc-hlp-lead-size);
  line-height: 1.65;
  color: var(--ifc-ink-soft);
}

.ifc-scope .ifc-hlp__all {
  flex: none;
  margin: 0;
}

.ifc-scope .ifc-hlp__all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ifc-scope .ifc-hlp__all-icon {
  width: 18px;
  height: 18px;
}

/* Grid: one column until 640 px, two to 1023 px, three from 1024 px. */
.ifc-scope .ifc-hlp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-hlp-gap);
  margin: var(--ifc-hlp-head-gap) 0 0;
  padding: 0;
  list-style: none;
}

/* A lone Post keeps the width of one card in a three-column row. */
.ifc-scope .ifc-hlp__grid--1 {
  grid-template-columns: minmax(0, 448px);
}

.ifc-hlp__item {
  display: flex;
  min-width: 0;
}

/* Card: vertical — the cover above the text. */
.ifc-hlp-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;        /* clips the cover to the rounded corners */
  border: 1px solid var(--ifc-line);
  border-radius: var(--ifc-hlp-radius);
  background: var(--ifc-surface);
  transition: border-color var(--ifc-duration) var(--ifc-ease), box-shadow var(--ifc-duration) var(--ifc-ease);
}

.ifc-hlp-card:focus-within {
  border-color: var(--ifc-line-strong);
}

@media (hover: hover) {
  .ifc-hlp-card:hover {
    border-color: var(--ifc-line-strong);
    box-shadow: var(--ifc-shadow-card);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifc-hlp-card {
    transition: none;
  }
}

/*
 * The cover box is the full card width at 16:9 — the covers' own shape — so
 * every card's image area matches. The image is fitted INSIDE it
 * (object-fit: contain), never cropped or scaled past its box: the whole
 * composition, headline, logo and folded corners included, stays visible.
 * No hover zoom.
 */
.ifc-hlp-card__media {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ifc-paper-2);
}

.ifc-scope .ifc-hlp-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No featured image: the section's own light fold motif, faint, behind a
   small document icon whose red accent is turned to the same muted tone so
   nothing reads as content. Decorative only (aria-hidden in the markup). */
.ifc-hlp-card__media--fallback {
  --ifc-icon-accent: var(--ifc-muted);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ifc-muted);
}

.ifc-hlp-card__media--fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: .22;
  pointer-events: none;
}

.ifc-scope .ifc-hlp-card__fallback-icon {
  position: relative;
  width: 40px;
  height: 40px;
  opacity: .7;
}

.ifc-hlp-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: var(--ifc-hlp-pad);
}

/* Real post metadata in plain muted text — not an uppercase eyebrow. */
.ifc-scope .ifc-hlp-card__category {
  margin: 0 0 8px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-hlp-card__title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: pretty;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-hlp-card__link {
  color: inherit;
  text-decoration: none;
}

/* One sentence from the article (its Overview / opening paragraph); at most
   three lines, an ellipsis only when it would run longer. */
.ifc-scope .ifc-hlp-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 10px 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ifc-ink-soft);
}

/* The "Read article" line sits at the foot of the card however tall it is
   stretched, so the links line up across a row. */
.ifc-scope .ifc-hlp-card__actions {
  margin: auto 0 0;
  padding-block-start: 16px;
}

.ifc-scope .ifc-hlp-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: var(--ifc-lh-ui);
  color: var(--ifc-action);
  text-decoration: none;
}

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

@media (hover: hover) {
  .ifc-scope .ifc-hlp-card__link:hover,
  .ifc-scope .ifc-hlp-card__more:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
  }

  .ifc-scope .ifc-hlp-card__more:hover {
    color: var(--ifc-action-hover);
  }
}

.ifc-scope .ifc-hlp-card__link:focus-visible,
.ifc-scope .ifc-hlp-card__more:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Home reseller + latest posts — responsive
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .ifc-scope .ifc-hrs__cta {
    display: inline-flex;
    width: auto;
  }
}

@media (min-width: 640px) {
  /* Tablet: two equal columns. */
  .ifc-scope .ifc-hlp__grid--2,
  .ifc-scope .ifc-hlp__grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ifc-hrs {
    --ifc-hrs-pad-y: 64px;
    --ifc-hrs-folds-opacity: .22;
  }

  .ifc-hlp {
    --ifc-hlp-pad-y: 64px;
  }
}

@media (min-width: 900px) {
  /* Three columns once each can hold its title on one line beside the icon. */
  .ifc-scope .ifc-hrs__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }
}

@media (min-width: 960px) {
  /*
   * Introduction and button side by side: the button's column is exactly
   * its own width, the introduction takes everything else. Below 960 px
   * that would squeeze the paragraph, so the button stays underneath it.
   */
  .ifc-hrs__top {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--ifc-hrs-col-gap);
  }
}

@media (min-width: 1024px) {
  .ifc-hrs {
    --ifc-hrs-lead-size: 1.0625rem;
    --ifc-hrs-folds-opacity: .28;
  }

  .ifc-hlp {
    --ifc-hlp-pad-y: 80px;
    --ifc-hlp-lead-size: 1.0625rem;
    --ifc-hlp-head-gap: 32px;
    --ifc-hlp-pad: 22px;
    --ifc-hlp-folds-opacity: .16;
  }

  /* Desktop: three equal columns, 24 px apart. */
  .ifc-scope .ifc-hlp__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ifc-scope .ifc-hlp-card__title {
    font-size: 1.1875rem;
  }
}