/**
 * IPTV From Canada — pages/pricing.css
 * IPTV Subscription page (/iptv-subscription/): the sections around the shared plans
 * component.
 *
 * 1. Intro (ifc-si)
 * 2. Help choosing (ifc-sh)
 * 3. Setup steps (ifc-ss)
 * 4. Closing trial invitation (ifc-st)
 *
 * The plans cards and the FAQ come from their own component stylesheets
 * (components/plans.css, components/faq.css). Tokens, containers, buttons,
 * links and the fold artwork all come from general.css.
 */

/* --------------------------------------------------------------------------
   1. Introduction (ifc-si)
   Compact warm-white opener: overline, H1, lead, reassurance row, actions.
   -------------------------------------------------------------------------- */

/* Charcoal opener on the dark fold artwork (.ifc-surface--dark supplies the
   light text and border tokens, general.css the dark secondary button). */
.ifc-si {
  padding-block: 40px;
}

.ifc-si__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.ifc-scope .ifc-si__heading {
  max-width: 18ch;
  font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem);      /* 30 → 48 px */
  line-height: 1.1;
  text-wrap: balance;
  color: var(--ifc-fg);
}

.ifc-scope .ifc-si__lead {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ifc-fg-muted);
}

/* Reassurance row: wraps to as many lines as it needs on small screens. */
.ifc-scope .ifc-st__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ifc-muted);
}

.ifc-st__trust-item + .ifc-st__trust-item::before {
  content: "·";
  margin-inline-end: 10px;
  color: var(--ifc-line-strong);
}

.ifc-scope .ifc-si__actions,
.ifc-scope .ifc-st__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 0;
}

.ifc-scope .ifc-si__cta {
  --ifc-button-height: 50px;
}

/* Small screens: every call to action fills the column, so the buttons line
   up with the plans and free-trial sections instead of each sitting at its
   own width. */
@media (max-width: 479px) {
  .ifc-scope .ifc-si__cta,
  .ifc-scope .ifc-sg__cta,
  .ifc-scope .ifc-sh__cta,
  .ifc-scope .ifc-ss__cta,
  .ifc-scope .ifc-st__cta {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .ifc-si {
    padding-block: 60px;
  }

  .ifc-si__inner {
    gap: 16px;
  }
}

@media (min-width: 1200px) {
  .ifc-si {
    padding-block: 72px;
  }
}

/* --------------------------------------------------------------------------
   2. Help choosing (ifc-sh) — three informational cards
   -------------------------------------------------------------------------- */

/* Warm-white band with the light fold artwork on its LEFT edge. The dark
   sections either side of it (subscription-content above, free-trial below)
   both anchor their artwork right, so alternating the side keeps the page
   from growing a column of folds down one margin. */
.ifc-sh {
  --ifc-sh-fold-w: min(420px, 34%);
  --ifc-sh-folds-opacity: .2;

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

/* Mirrored like the other left-anchored layers, so the artwork's facets face
   into the section and the shared fade in general.css runs the right way. */
.ifc-sh__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-sh-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-sh-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

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

.ifc-sh__intro {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.ifc-scope .ifc-sh__heading,
.ifc-scope .ifc-ss__heading,
.ifc-scope .ifc-st__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* 24 → 32 px */
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-sh__lead,
.ifc-scope .ifc-ss__lead {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-sh__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-block-start: 28px;
}

/* Informational cards: equal heights come from the grid row. */
.ifc-sh__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--ifc-line);
  border-radius: 12px;
  background: var(--ifc-surface);
  box-shadow: none;
}

.ifc-sh__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-block-end: 2px;
  border-radius: 10px;
  background: var(--ifc-blush);
  color: var(--ifc-action);
}

.ifc-sh__icon-svg {
  width: 20px;
  height: 20px;
}

.ifc-scope .ifc-sh__card-title {
  font-size: 1.1875rem;                 /* 19 px */
  line-height: 1.35;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-sh__card-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

/* One clear path back to the plans under the cards. */
.ifc-scope .ifc-sh__actions {
  margin: 28px 0 0;
  text-align: center;
}

.ifc-scope .ifc-sh__cta,
.ifc-scope .ifc-ss__cta {
  --ifc-button-height: 50px;
}

@media (min-width: 768px) {
  .ifc-sh {
    padding-block: 64px;
  }

  .ifc-scope .ifc-sh__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* tablet */
    gap: 22px;
    margin-block-start: 32px;
  }

  .ifc-scope .ifc-sh__card-title {
    font-size: 1.25rem;                 /* 20 px */
  }
}

@media (min-width: 1024px) {
  .ifc-scope .ifc-sh__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* desktop */
    gap: 24px;
  }
}

@media (min-width: 1200px) {
  .ifc-sh {
    padding-block: 80px;
  }
}

/* --------------------------------------------------------------------------
   3. Setup steps (ifc-ss) — lighter than the cards above
   -------------------------------------------------------------------------- */

/* Warm-white band with the light fold artwork on its LEFT edge, matching the
   "help" band above it; the dark free-trial section between them anchors its
   artwork right. */
.ifc-ss {
  --ifc-ss-fold-w: min(420px, 34%);
  --ifc-ss-folds-opacity: .2;

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

.ifc-ss__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-ss-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-ss-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

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

.ifc-ss__intro {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

/* Steps stack on narrow screens and sit three across from 900 px; every
   step is centred in its column: circle, title, then description. */
.ifc-scope .ifc-ss__steps {
  --ifc-ss-gap: 28px;                    /* between steps; 32 px three across */
  --ifc-ss-marker: 40px;

  position: relative;                    /* anchors the connector */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-ss-gap);
  margin-block-start: 32px;
}

.ifc-ss__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

/* Opaque, and above the connector, which therefore only shows between the
   circles. */
.ifc-ss__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ifc-ss-marker);
  height: var(--ifc-ss-marker);
  border-radius: var(--ifc-radius-pill);
  background: var(--ifc-action);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.ifc-scope .ifc-ss__step-title {
  margin-block-start: 16px;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-ss__step-text {
  max-width: 340px;
  margin: 10px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

/* Primary action to the plans with the guides link beside it, centred as one
   group; it stacks (still centred) when the row runs out of room. */
.ifc-ss__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;                             /* beside or stacked */
  margin-block-start: 32px;
}

/* Inline-flex keeps the arrow on the same line (.ifc-icon is display:block). */
.ifc-scope .ifc-ss__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ifc-action);
}

.ifc-ss__link-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  .ifc-ss {
    padding-block: 64px;
  }
}

/* Three across only where each step has room to read comfortably. */
@media (min-width: 900px) {
  .ifc-scope .ifc-ss__steps {
    --ifc-ss-gap: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* One thin line from the centre of circle 01 to the centre of circle 03,
     through circle 02. Each column is (100% - 2 gaps) / 3 wide and its circle
     is centred in it, so the first and last centres sit half a column in
     from each edge. The circles cover both ends, so nothing shows past them.
     Absolutely positioned, so it never takes a grid cell. Hidden when the
     steps stack (the rule only exists here). */
  .ifc-scope .ifc-ss__steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block-start: calc(var(--ifc-ss-marker) / 2 - .5px);
    inset-inline: calc((100% - 2 * var(--ifc-ss-gap)) / 6);
    block-size: 1px;
    background: var(--ifc-line);
    pointer-events: none;
  }
}

@media (min-width: 1200px) {
  .ifc-ss {
    padding-block: 80px;
  }
}

/* --------------------------------------------------------------------------
   3b. Subscribe with confidence (ifc-sg) — light band before the FAQ
   Three reassurance points without card borders, so it stays lighter than
   the "help" cards; one button back to the plans.
   -------------------------------------------------------------------------- */

/* Warm-white band with the light fold artwork on its LEFT edge, matching the
   other two light bands on this page. Every dark section here anchors its
   artwork right, so the page alternates instead of stacking folds in one
   margin. */
.ifc-sg {
  --ifc-sg-fold-w: min(420px, 34%);
  --ifc-sg-folds-opacity: .2;

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

.ifc-sg__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ifc-sg-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-sg-folds-opacity);
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

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

.ifc-sg__intro {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.ifc-scope .ifc-sg__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* 24 → 32 px */
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-sg__lead {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

/* Points stack on narrow screens and sit three across from 900 px; every
   point is centred in its column: icon, title, then description. Each
   column starts with its icon, so the three icons share one line. */
.ifc-scope .ifc-sg__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-block-start: 32px;
}

.ifc-sg__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                             /* icon → title */
  min-width: 0;
  text-align: center;
}

.ifc-sg__body {
  width: 100%;
  max-width: 340px;
}

.ifc-sg__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ifc-blush);
  color: var(--ifc-action);
}

.ifc-sg__icon-svg {
  width: 20px;
  height: 20px;
}

.ifc-scope .ifc-sg__point-title {
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-sg__point-text {
  margin-block-start: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-sg__actions {
  margin: 32px 0 0;
  text-align: center;
}

.ifc-scope .ifc-sg__cta {
  --ifc-button-height: 50px;
}

@media (min-width: 768px) {
  .ifc-sg {
    padding-block: 64px;
  }
}

/* Three equal columns from here, the same breakpoint as the setup steps. */
@media (min-width: 900px) {
  .ifc-scope .ifc-sg__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (min-width: 1200px) {
  .ifc-sg {
    padding-block: 80px;
  }
}

/* --------------------------------------------------------------------------
   4. Closing trial invitation (ifc-st)
   -------------------------------------------------------------------------- */

.ifc-st {
  padding-block: 44px;
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

.ifc-st__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.ifc-scope .ifc-st__lead {
  max-width: 64ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ifc-ink-soft);
}

.ifc-scope .ifc-st__cta {
  --ifc-button-height: 50px;
}

@media (max-width: 479px) {
  .ifc-scope .ifc-st__cta {
    width: 100%;                        /* stacked, full-width buttons */
  }
}

.ifc-scope .ifc-st__note {
  max-width: 60ch;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ifc-muted);
}

@media (min-width: 768px) {
  .ifc-st {
    padding-block: 64px;
  }
}

@media (min-width: 1200px) {
  .ifc-st {
    padding-block: 80px;
  }
}

/* --------------------------------------------------------------------------
   5. Live channels, movies and series (ifc-sc)
   Charcoal two-column band: heading + lead + one button on the left, three
   feature rows on the right. Heading, lead, features and the button are all
   direct grid items, so the SINGLE button can be placed after the features
   on narrow screens through grid areas rather than a second element.
   -------------------------------------------------------------------------- */

.ifc-sc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;                      /* keeps the artwork off the page axis */
  padding-block: 44px;
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Decorative folds: the dark artwork carries its facets on its right side,
   so the layer is anchored to the section's right edge and clipped there.
   At common desktop widths the container reaches almost to the viewport
   edge, so a plain block would run under the feature column. The mask fades
   the artwork out towards the content, leaving it visible only in the outer
   margin — far edge, never behind the text. */
.ifc-sc__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(340px, 30%);
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: .45;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 88%);
          mask-image: linear-gradient(to right, transparent 0%, #000 88%);
}

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

/* Phones and small tablets: one column, button last. */
.ifc-sc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "heading"
    "lead"
    "features"
    "cta";
  row-gap: 0;                          /* spacing comes from the items */
}

.ifc-scope .ifc-sc__heading {
  grid-area: heading;
  margin: 0;
  font-family: var(--ifc-font);
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);   /* 28 -> 40 px */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-scope .ifc-sc__lead {
  grid-area: lead;
  max-width: 46ch;
  margin: 24px 0 0;                    /* ~24 px under the heading */
  font-size: 1.0625rem;                /* 17 px */
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

/* Feature rows ----------------------------------------------------------- */

.ifc-scope .ifc-sc__features {
  grid-area: features;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ifc-sc__feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;                  /* icon lines up with the heading */
  gap: 16px;
  padding-block: 22px;
}

/* Dividers sit BETWEEN rows only, so the last row never has a trailing rule. */
.ifc-sc__feature + .ifc-sc__feature {
  border-block-start: 1px solid var(--ifc-white-a10);
}

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

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

.ifc-sc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ifc-surface);           /* white outline icons */
}

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

/* A comfortable measure, which also keeps the text clear of the artwork in
   the outer margin at common desktop widths. */
.ifc-sc__feature-body {
  max-width: 44ch;
}

.ifc-scope .ifc-sc__feature-title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.25rem;                  /* 20 px, 24 px from 1024 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ifc-paper);
}

/* The short red rule between a feature heading and its description. */
.ifc-sc__rule {
  display: block;
  width: 32px;
  height: 2px;
  margin-block: 12px;
  background: var(--ifc-action);
}

.ifc-scope .ifc-sc__feature-text {
  margin: 0;
  font-size: 1rem;                     /* 16 px, 17 px from 1024 */
  line-height: 1.7;
  color: var(--ifc-text-dim);
}

/* Button ----------------------------------------------------------------- */

.ifc-scope .ifc-sc__actions {
  grid-area: cta;
  margin: 32px 0 0;
}

/* Full width inside the content container on phones. */
.ifc-scope .ifc-sc__cta {
  display: flex;
  width: 100%;
}

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

/* Two columns once there is room for both to stay readable ---------------- */

@media (min-width: 1024px) {
  .ifc-sc {
    padding-block: 64px;
  }

  .ifc-sc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    /* The two 1fr spacer rows centre the left block against the feature
       column without giving either column a fixed height. */
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".        features"
      "heading  features"
      "lead     features"
      "cta      features"
      ".        features";
  }

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

  .ifc-scope .ifc-sc__actions {
    margin-block-start: 28px;          /* ~28 px before the button */
  }

  .ifc-sc__feature {
    gap: 20px;
    padding-block: 26px;
  }

  .ifc-sc__icon {
    width: 38px;
    height: 38px;
  }

  .ifc-scope .ifc-sc__feature-title {
    font-size: 1.5rem;                 /* 24 px */
  }

  .ifc-scope .ifc-sc__lead,
  .ifc-scope .ifc-sc__feature-text {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1200px) {
  .ifc-sc {
    padding-block: 80px;
  }

  .ifc-sc__grid {
    column-gap: 72px;
  }

  .ifc-scope .ifc-sc__lead,
  .ifc-scope .ifc-sc__feature-text {
    font-size: 1.125rem;               /* 18 px */
  }
}