/*
 * Pixel-matched presentation for the supplied IPTTV Canada reference.
 * Loaded after the compiled theme and typography layers so these rules remain reversible.
 */

:root {
  --sn-reference-width: 1300px;
  --sn-reference-blue: #3278ed;
  --sn-reference-dark: #222222;
  --sn-reference-muted: #536071;
  --sn-reference-sky: #f2f6fe;
}

html,
body {
  overflow-x: clip;
}

.sn-shell {
  width: min(var(--sn-reference-width), calc(100% - 32px));
  margin-inline: auto;
}

.sn-announcement {
  min-height: 55px;
  background: #1f1f20 !important;
}

.sn-announcement__inner {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 16px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.2;
}

.sn-announcement__message,
.sn-announcement__support {
  margin: 0;
  white-space: nowrap;
}

.sn-announcement__support {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.sn-announcement__support svg {
  width: 14px;
  height: 14px;
  color: var(--sn-reference-blue);
}

.sn-reference-header {
  background: #ffffff !important;
  border-bottom: 0 !important;
}

.sn-reference-header__inner {
  height: 83px;
  display: flex;
  align-items: center;
  gap: 0;
  padding-inline: 16px;
}

.sn-reference-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.sn-reference-logo img {
  display: block;
  width: 90px;
  max-width: 100%;
  height: auto;
}

.sn-reference-nav {
  margin-left: 42px;
  min-width: 0;
}

.sn-reference-primary-menu {
  display: flex;
  align-items: center;
  gap: 0;
}

.sn-reference-primary-menu a {
  display: block;
  position: relative;
  padding: 31px 13px 29px;
  color: #111111;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  white-space: nowrap;
}

.sn-reference-primary-menu a:hover,
.sn-reference-primary-menu a:focus-visible {
  color: var(--sn-reference-blue);
}

.sn-reference-actions {
  margin-left: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.sn-reference-trial {
  min-width: 137px;
  height: 40px !important;
  padding-inline: 18px !important;
  border-radius: 3px !important;
  background: var(--sn-reference-blue) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.sn-reference-menu-button {
  display: none !important;
}

.sn-payment-strip {
  background: #ffffff !important;
}

.sn-payment-strip__inner {
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.sn-payment-strip__logo {
  width: 87px;
  height: 36px;
  object-fit: contain;
}

.sn-payment-strip__inner p {
  margin: 0;
  color: #161b25;
  font-size: 16px;
  font-weight: 700;
}

.sn-payment-strip__line {
  height: 1px;
  width: 100%;
  background: #e3b33c;
}

.sn-reference-hero {
  border: 0;
  background: #ffffff;
}

.sn-reference-hero__grid {
  min-height: 597px;
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  align-items: center;
  column-gap: 42px;
  padding: 24px 4px 73px;
}

.sn-reference-hero__art {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
}

.sn-reference-hero__panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 11px 12px;
  background: #fff;
}

.sn-reference-hero__panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #e8edf5;
}

.sn-reference-hero__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-reference-hero__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 54%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--sn-reference-blue);
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 15px rgba(17, 36, 70, .18);
}

.sn-reference-hero__badge strong {
  position: relative;
  z-index: 2;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(48px, 4.1vw, 63px);
  font-weight: 700;
  line-height: .9;
}

.sn-reference-hero__badge > span:last-child {
  position: relative;
  z-index: 2;
  max-width: 70%;
  margin-top: 23px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
}

.sn-reference-hero__orbit {
  position: absolute;
  inset: 14px;
  border: 2px dashed rgba(255, 255, 255, .95);
  border-radius: 50%;
  animation: sn-reference-orbit 13s linear infinite;
}

@keyframes sn-reference-orbit {
  to { transform: rotate(360deg); }
}

.sn-reference-hero__copy {
  padding-bottom: 2px;
  transform: translateY(36px);
}

.sn-reference-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--sn-reference-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
}

.sn-reference-eyebrow svg {
  width: 24px;
  height: 24px;
}

.sn-reference-hero h1 {
  margin: 17px 0 0;
  color: #1e1e1f;
  font-size: clamp(42px, 2.45vw, 50px);
  font-weight: 700 !important;
  line-height: 1.04;
  letter-spacing: 0;
}

.sn-reference-hero__lead,
.sn-reference-hero__body {
  max-width: 725px;
  margin: 32px 0 0;
  color: var(--sn-reference-muted);
  font-size: 16px;
  line-height: 1.8;
}

.sn-reference-checks {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.sn-reference-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3d4653;
  font-size: 16px;
  line-height: 1.35;
}

.sn-reference-checks svg {
  width: 15px;
  height: 15px;
  color: var(--sn-reference-blue);
}

.sn-reference-hero__body {
  margin-top: 22px;
}

.sn-reference-hero__button {
  width: fit-content;
  min-width: 188px;
  min-height: 60px;
  margin-top: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 4px;
  background: var(--sn-reference-blue);
  color: #ffffff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.sn-reference-hero__button svg {
  width: 16px;
  height: 16px;
}

.sn-reference-hero__button:hover,
.sn-reference-hero__button:focus-visible {
  background: #1e65d9;
  color: #ffffff;
}

.sn-reference-stats {
  background: #ffffff;
  padding: 0 0 51px;
}

.sn-reference-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-inline: 4px;
}

.sn-reference-stat {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 14px 32px 22px;
  border-bottom: 1px solid #d9dce1;
}

.sn-reference-stat__icon {
  flex: 0 0 auto;
  color: var(--sn-reference-blue);
}

.sn-reference-stat__icon svg {
  width: 58px;
  height: 58px;
}

.sn-reference-stat__value {
  margin: 0;
  color: #1e1e1f;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.sn-reference-stat__label {
  margin: 10px 0 0;
  color: #747b87;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.sn-reference-plans {
  position: relative;
  overflow: hidden;
  background: var(--sn-reference-sky);
  padding: 58px 0 84px;
}

/*
 * Scoped, section-only widening. Deliberately not touching --sn-reference-width (the
 * sitewide shell variable other sections also use) so only the pricing section gets more
 * horizontal room, matching the target reference's wider card grid.
 */
.sn-reference-plans .sn-shell {
  width: min(1650px, calc(100% - 32px));
}

.sn-reference-plans__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sn-reference-plans__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sn-reference-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
}

.sn-reference-plans__eyebrow svg {
  width: 17px;
  height: 17px;
}

.sn-reference-plans__header h2 {
  margin: 22px 0 0;
  color: #1d1d1e;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: 0;
}

.sn-reference-plans__header > p {
  max-width: 1200px;
  margin: 16px auto 0;
  color: #7c8490;
  font-size: 17px;
  line-height: 1.55;
}

.sn-reference-device-tabs {
  width: min(1350px, 100%);
  height: 76px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 8px;
  background: #242424;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

.sn-reference-device-tabs a,
.sn-reference-device-tabs span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #3b3b3b;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.sn-reference-device-tabs :first-child {
  border-left: 0;
}

.sn-reference-device-tabs .is-active {
  background: #3d81ed;
}

.sn-reference-device-tabs a:hover,
.sn-reference-device-tabs a:focus-visible {
  background: #303030;
}

.sn-reference-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 34px;
}

.sn-reference-plan-card {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  background: #252525;
  color: #ffffff;
}

.sn-reference-plan-card__heading {
  padding: 28px 40px 0;
}

.sn-reference-plan-card__heading p {
  color: var(--sn-reference-blue);
  font-size: 15px;
  font-weight: 700;
}

.sn-reference-plan-card__heading h3 {
  margin-top: 10px;
  color: #ffffff;
  font-size: 36px;
  line-height: 1;
}

.sn-reference-plan-card__price {
  margin-top: 26px;
  margin-right: 36px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 26px 46px;
  border-radius: 0 999px 999px 0;
  background: var(--sn-reference-blue);
}

.sn-reference-plan-card__price strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 56px;
  line-height: 1;
}

.sn-reference-plan-card__price span {
  font-size: 14px;
  font-weight: 700;
}

.sn-reference-plan-card__features {
  display: grid;
  gap: 12px;
  padding: 28px 40px;
}

.sn-reference-plan-card__features li {
  display: flex;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.5;
}

.sn-reference-plan-card__features svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--sn-reference-blue);
}

.sn-reference-plan-card__button {
  margin: auto 40px 32px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sn-reference-blue);
  border-radius: 5px;
  color: var(--sn-reference-blue);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.sn-reference-plan-card__button:hover,
.sn-reference-plan-card__button:focus-visible {
  background: var(--sn-reference-blue);
  color: #ffffff;
}

/* Restored full-page reference bands. */
.sn-ref-band {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 72px 0;
}

.sn-ref-band--dark {
  background: #1b1b1b;
  color: #fff;
}

.sn-ref-section-head {
  width: min(100%, 1160px);
  margin-inline: auto;
  text-align: center;
}

.sn-ref-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--sn-reference-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.2;
}

.sn-ref-kicker svg {
  width: 18px;
  height: 18px;
}

.sn-ref-kicker--pill {
  width: fit-content;
  margin-inline: auto;
  padding: 7px 13px;
  border: 1px solid rgba(50, 120, 237, .36);
  border-radius: 999px;
  background: rgba(50, 120, 237, .08);
}

.sn-ref-section-head h2 {
  margin: 15px 0 0;
  color: #1e1e1f;
  font-size: clamp(38px, 3vw, 50px);
  font-weight: 700;
  line-height: 1.05;
}

.sn-ref-section-head > p:last-child:not(.sn-ref-kicker) {
  max-width: 1050px;
  margin: 14px auto 0;
  color: #707b8d;
  font-size: 15px;
  line-height: 1.65;
}

.sn-ref-section-head--light h2 {
  color: #fff;
}

.sn-ref-section-head--light > p:last-child:not(.sn-ref-kicker) {
  color: rgba(255, 255, 255, .72);
}

.sn-ref-primary-button,
.sn-ref-secondary-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 23px;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .025em;
}

.sn-ref-primary-button {
  border: 1px solid var(--sn-reference-blue);
  background: var(--sn-reference-blue);
  color: #fff;
}

.sn-ref-secondary-button {
  border: 1px solid #cfd5de;
  background: #fff;
  color: #20252c;
}

.sn-ref-primary-button:hover,
.sn-ref-primary-button:focus-visible {
  background: #1e65d9;
  color: #fff;
}

.sn-ref-center-button {
  margin-top: 38px;
  text-align: center;
}

/* Devices */
.sn-ref-devices {
  padding-block: 70px 78px;
}

.sn-ref-device-grid {
  width: min(100%, 1030px);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 15px;
}

.sn-ref-device-card {
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #484848;
  border-radius: 8px;
  background: #272727;
  color: #b6bfd0;
}

.sn-ref-device-card img {
  width: 86%;
  height: 54px;
  object-fit: contain;
  object-position: center;
}

.sn-ref-device-card span {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1;
}

/* Three steps */
.sn-ref-steps {
  padding-block: 65px 78px;
}

.sn-ref-steps__grid {
  position: relative;
  width: min(100%, 1100px);
  margin: 43px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
}

.sn-ref-steps__grid::before {
  position: absolute;
  top: 25px;
  left: 17%;
  right: 17%;
  height: 1px;
  content: '';
  background: repeating-linear-gradient(90deg, #bdd5fb 0 8px, transparent 8px 15px);
}

.sn-ref-steps__grid li {
  position: relative;
  z-index: 1;
  text-align: center;
}

.sn-ref-step-number {
  width: 50px;
  height: 50px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 2px solid var(--sn-reference-blue);
  border-radius: 50%;
  background: #fff;
  color: var(--sn-reference-blue);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.sn-ref-steps__grid h3 {
  margin-top: 19px;
  color: #1f2022;
  font-size: 21px;
  line-height: 1.1;
}

.sn-ref-steps__grid p {
  max-width: 315px;
  margin: 10px auto 0;
  color: #687386;
  font-size: 13px;
  line-height: 1.7;
}

/* Comparison */
.sn-ref-comparison {
  padding-block: 56px 70px;
}

.sn-ref-comparison .sn-ref-kicker {
  gap: 9px;
  font-size: 13px;
  letter-spacing: .3em;
}

.sn-ref-comparison .sn-ref-kicker svg {
  width: 16px;
  height: 16px;
}

.sn-ref-comparison .sn-ref-section-head h2 {
  margin-top: 17px;
  font-size: clamp(38px, 3.6vw, 60px);
}

.sn-ref-comparison .sn-ref-section-head > p:last-child:not(.sn-ref-kicker) {
  max-width: 1160px;
  margin-top: 17px;
  color: rgba(255, 255, 255, .88);
  font-family: 'Manrope Variable', 'Manrope', 'Roboto', sans-serif;
  font-size: 18px;
}

.sn-ref-comparison__brand {
  color: #5b9bff;
  font-weight: 600;
}

.sn-ref-comparison__grid {
  width: min(100%, 1200px);
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sn-ref-comparison__card {
  position: relative;
  min-height: 250px;
  padding: 28px 24px 30px;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  background: #282828;
}

.sn-ref-comparison__card.is-featured {
  border-color: #2b4a78;
  background: linear-gradient(180deg, #1e2a3f 0%, #1a2233 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.sn-ref-comparison__card.is-featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6 30%, #60a5fa 50%, #3b82f6 70%, transparent);
  box-shadow: 0 0 12px rgba(59, 130, 246, .7);
}

.sn-ref-comparison__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
}

.sn-ref-comparison__title h3 {
  margin: 0;
  color: #fff;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
}

.sn-ref-comparison__title span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(239, 68, 68, .45);
  border-radius: 999px;
  background: rgba(239, 68, 68, .12);
  color: #f3d4d4;
  font-family: 'Manrope Variable', 'Manrope', 'Roboto', sans-serif;
  font-size: 9.3px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
}

.sn-ref-comparison__title span svg {
  width: 11px;
  height: 11px;
  color: #ef4444;
}

.sn-ref-comparison__card > ul {
  display: grid;
  gap: 15px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.sn-ref-comparison__card > ul li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: rgba(255, 255, 255, .8);
  font-family: 'Manrope Variable', 'Manrope', 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.sn-ref-comparison__card.is-featured > ul li {
  color: #fff;
  font-weight: 600;
}

.sn-ref-comparison__card > ul li > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.sn-ref-comparison__card .is-positive > svg {
  color: #22c55e;
}

.sn-ref-comparison__card .is-negative > svg {
  color: #ef4444;
}

/* Explainer */
.sn-ref-explained {
  padding-block: 54px 60px;
}

.sn-ref-explained__grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 55px;
}

.sn-ref-explained__grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sn-ref-icon-circle {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf2ff;
  color: var(--sn-reference-blue);
}

.sn-ref-icon-circle svg {
  width: 25px;
  height: 25px;
}

.sn-ref-explained__grid .sn-ref-icon-circle {
  margin-inline: auto;
}

.sn-ref-explained__grid h3 {
  margin-top: 18px;
  color: #202124;
  font-size: 22px;
  line-height: 1.15;
}

.sn-ref-explained__grid p {
  max-width: 380px;
  margin: 12px auto 0;
  color: #5f6979;
  font-size: 13px;
  line-height: 1.75;
}

.sn-ref-explained__cta {
  margin-top: 22px;
}

/* Discover */
.sn-ref-discover {
  padding-block: 66px 78px;
}

.sn-ref-discover__grid {
  width: min(100%, 1140px);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sn-ref-discover__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #3b3b3b;
  border-radius: 10px;
  background: #232323;
  transition: border-color .25s ease, transform .25s ease;
}

.sn-ref-discover__card:hover {
  border-color: #4b4b4b;
  transform: translateY(-2px);
}

.sn-ref-discover__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1b1b1b;
}

.sn-ref-discover__media > div,
.sn-ref-discover__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-ref-discover__media svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sn-ref-discover__badge {
  position: absolute;
  left: 18px;
  bottom: -19px;
  z-index: 1;
  background: #232323;
}

.sn-ref-square-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(50, 120, 237, .45);
  border-radius: 7px;
  background: rgba(50, 120, 237, .12);
  color: var(--sn-reference-blue);
}

.sn-ref-square-icon svg {
  width: 21px;
  height: 21px;
}

.sn-ref-discover__body {
  padding: 30px 24px 24px;
}

.sn-ref-discover__card h3 {
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}

.sn-ref-discover__card p {
  margin-top: 10px;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  line-height: 1.65;
}

.sn-ref-discover__card a {
  width: fit-content;
  margin-top: 18px;
  padding: 9px 13px;
  border: 1px solid var(--sn-reference-blue);
  border-radius: 4px;
  color: var(--sn-reference-blue);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

/* FAQ */
.sn-ref-faq {
  background: #fafbfc;
  padding-block: 74px 82px;
}

.sn-ref-faq__grid {
  width: min(100%, 1120px);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sn-ref-faq__grid [data-sn-accordion] {
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.sn-ref-faq__grid [data-sn-accordion] > div {
  margin-bottom: 10px;
  padding-inline: 19px;
  border: 1px solid #e0e4ea;
  border-radius: 7px;
  background: #fff;
}

.sn-ref-faq__grid [data-sn-accordion] > div + div {
  border-top-width: 1px;
}

.sn-ref-faq__grid [data-sn-accordion] button {
  min-height: 52px;
  padding-block: 12px;
}

.sn-ref-faq__grid [data-sn-accordion] button > span:first-child {
  color: #222326;
  font-size: 14px;
  line-height: 1.25;
}

.sn-ref-faq__grid [data-sn-accordion] button > span:last-child {
  width: 25px;
  height: 25px;
}

.sn-ref-faq__grid [data-sn-accordion] [role='region'] {
  font-size: 13px;
}

/* Why choose */
.sn-ref-why {
  min-height: 690px;
  padding-block: 72px 85px;
  background: #060b18;
}

.sn-ref-why::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  background: linear-gradient(90deg, rgba(6, 11, 24, .38), #060b18 31%, #060b18 69%, rgba(6, 11, 24, .38));
}

.sn-ref-why__edge {
  position: absolute;
  inset-block: 0;
  width: 31%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
}

.sn-ref-why__edge--left { left: 0; object-position: left center; }
.sn-ref-why__edge--right { right: 0; object-position: right center; }

.sn-ref-why__content {
  position: relative;
  z-index: 2;
}

.sn-ref-why__grid {
  width: min(100%, 1000px);
  margin: 45px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sn-ref-why__grid > li {
  min-height: 205px;
  padding: 27px 30px;
  border: 1px solid #626262;
  border-radius: 10px;
  background: rgba(35, 35, 35, .94);
}

.sn-ref-why__title {
  display: flex;
  align-items: center;
  gap: 17px;
}

.sn-ref-why__title h3 {
  color: #fff;
  font-size: 21px;
  line-height: 1.15;
}

.sn-ref-why__grid > li > p {
  margin-top: 20px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.75;
}

/* Sports promotion */
.sn-ref-promo {
  min-height: 670px;
  padding-block: 75px;
  background: #f7f9fc;
}

.sn-ref-promo__dots {
  position: absolute;
  inset: 0;
  opacity: .58;
  background-image: radial-gradient(circle, #f5c2b6 2px, transparent 2.2px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 56%, transparent 86%);
  mask-image: radial-gradient(ellipse at center, #000 0 56%, transparent 86%);
}

.sn-ref-promo__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 45px;
}

.sn-ref-promo__copy h2 {
  max-width: 600px;
  color: #202124;
  font-size: clamp(45px, 4vw, 64px);
  line-height: .98;
}

.sn-ref-promo__copy h2 span {
  color: var(--sn-reference-blue);
}

.sn-ref-promo__copy > p {
  max-width: 600px;
  margin-top: 24px;
  color: #4e5663;
  font-size: 16px;
  line-height: 1.7;
}

.sn-ref-promo__features {
  margin-top: 33px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.sn-ref-promo__features li {
  min-height: 148px;
  padding: 20px 15px;
  border: 1px solid #dce3ec;
  border-radius: 9px;
  background: rgba(255, 255, 255, .94);
  text-align: center;
  box-shadow: 0 4px 14px rgba(31, 48, 76, .05);
}

.sn-ref-promo__features .sn-ref-icon-circle {
  width: 48px;
  height: 48px;
  margin-inline: auto;
  border-radius: 9px;
}

.sn-ref-promo__features h3 {
  margin-top: 13px;
  color: #202124;
  font-size: 18px;
}

.sn-ref-promo__features p {
  margin-top: 7px;
  color: #718096;
  font-size: 12px;
  line-height: 1.5;
}

.sn-ref-promo__price {
  margin-top: 27px;
  padding: 25px 28px;
  border: 1px solid #dbe1e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(31, 48, 76, .06);
}

.sn-ref-promo__price h3 {
  color: #202124;
  font-size: 23px;
}

.sn-ref-promo__price > p {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 17px;
}

.sn-ref-promo__price strong {
  color: var(--sn-reference-blue);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  line-height: 1;
}

.sn-ref-promo__price > p span {
  color: #637087;
  font-size: 16px;
  font-weight: 700;
}

.sn-ref-promo__price .sn-ref-primary-button {
  margin-top: 22px;
}

.sn-ref-promo__art {
  position: relative;
}

.sn-ref-promo__art > span {
  position: absolute;
  right: 17%;
  top: -5%;
  z-index: 2;
  padding: 15px 19px;
  border-radius: 999px;
  background: #fff;
  color: var(--sn-reference-blue);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(23, 35, 55, .12);
}

.sn-ref-promo__art img {
  width: 100%;
  display: block;
  mix-blend-mode: multiply;
}

/* Coverage and customer experience */
.sn-ref-coverage {
  padding-block: 50px 56px;
}

.sn-ref-coverage__box {
  width: min(100%, 780px);
  margin: 30px auto 0;
  padding: 28px 34px;
  border: 1px solid #606060;
  border-radius: 12px;
  background: rgba(38, 38, 38, .72);
  color: rgba(255, 255, 255, .92);
  text-align: center;
}

.sn-ref-coverage__box p:first-of-type {
  display: inline;
  font-size: 15px;
  line-height: 1.75;
}

.sn-ref-coverage__box p:first-of-type strong {
  font-weight: 700;
  color: #fff;
}

.sn-ref-coverage__box ul {
  display: inline;
  margin: 0;
}

.sn-ref-coverage__box li {
  display: inline;
  font-size: 15px;
  line-height: 1.75;
}

.sn-ref-coverage__box li:not(:last-child)::after {
  content: ', ';
}

.sn-ref-coverage__box p:last-of-type {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
}

.sn-ref-coverage__highlight {
  color: var(--sn-reference-blue);
}

.sn-ref-testimonials {
  padding-block: 54px 64px;
  background: #f7f9fc;
}

.sn-ref-testimonials__carousel {
  width: min(100%, 760px);
  margin: 32px auto 0;
}

.sn-ref-testimonial-card {
  padding: 24px 28px 26px;
  border: 1px solid #dce3ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 48, 76, .05);
  text-align: left;
}

.sn-ref-testimonial-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #8b94a2;
  font-size: 12px;
}

.sn-ref-testimonial-card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(36, 166, 106, .1);
  color: #24a66a;
  font-weight: 700;
}

.sn-ref-testimonial-card__meta svg {
  width: 16px;
  height: 16px;
}

.sn-ref-testimonial-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.sn-ref-testimonial-card__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--sn-reference-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.sn-ref-testimonial-card h3 {
  color: #202124;
  font-size: 17px;
  line-height: 1.2;
}

.sn-ref-testimonial-card__location {
  margin-top: 1px;
  color: #7a8493;
  font-size: 12px;
}

.sn-ref-testimonial-card__stars {
  margin-top: 12px;
  display: inline-flex;
  gap: 2px;
  color: #f3b02d;
}

.sn-ref-testimonial-card__stars svg[fill="none"] {
  color: #d1d5db;
}

.sn-ref-testimonial-card blockquote {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eceef1;
  color: #586274;
  font-size: 13.5px;
  line-height: 1.65;
}

/* Footer link columns: a blue bullet dot in front of every row (Company, Cities,
 * Support, Legal), matching the design reference. City names stay unlinked spans
 * until their landing pages are supplied. */
.sn-ref-footer-dots li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 16px;
  line-height: 1.5;
}

/* Footer typography increased by exactly 20% while preserving the existing
 * visual hierarchy: 12px headings/legal copy become 14.4px, and the 13px
 * navigation copy above becomes 15.6px. */
footer .sn-ref-footer-grid h2,
footer > .border-t p {
  font-size: 13px;
}

.sn-ref-footer-dots li::before {
  content: "";
  width: 4.5px;
  height: 4.5px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-brand, #2878f0);
  flex: none;
}

.sn-ref-footer-dots a {
  color: rgba(255, 255, 255, .62);
  transition: color .15s ease;
}

.sn-ref-footer-dots a:hover {
  color: #fff;
}

.sn-ref-footer-dots span {
  color: rgba(255, 255, 255, .5);
}

/* Cities column: same dotted rows. Single column on narrow phones so long city
 * names never crowd a track too tight to hold them; two columns once there is
 * room (matches the design reference from small tablets up). */
.sn-ref-footer-cities-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 18px;
  row-gap: 9px;
}

@media (min-width: 480px) {
  .sn-ref-footer-cities-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Five-column desktop footer row: brand, company, cities, support, legal.
 * A plain rule (rather than a Tailwind arbitrary-value class) because this exact
 * grid-template-columns value isn't in the theme's precompiled theme.css. */
@media (min-width: 1024px) {
  .sn-ref-footer-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 32px;
  }
}

@media (max-width: 1099px) {
  .sn-reference-nav {
    display: none;
  }

  .sn-reference-menu-button {
    display: grid !important;
  }

  .sn-reference-actions {
    margin-left: auto;
  }
}

@media (max-width: 1099px) {
  .sn-reference-hero__grid {
    grid-template-columns: minmax(360px, 46%) minmax(0, 1fr);
    gap: 32px;
  }

  .sn-reference-hero__art {
    width: min(100%, 460px);
    height: auto;
    aspect-ratio: 1;
  }

  .sn-reference-hero h1 {
    font-size: 42px;
  }

  .sn-reference-stat {
    gap: 16px;
    padding-inline: 16px;
  }

  .sn-reference-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sn-ref-device-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sn-ref-discover__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sn-ref-discover__card:nth-child(4) {
    grid-column: auto;
  }

  .sn-ref-promo__grid {
    grid-template-columns: 1fr;
  }

  .sn-ref-promo__art {
    width: min(100%, 650px);
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .sn-shell {
    width: min(100% - 28px, var(--sn-reference-width));
  }

  .sn-announcement {
    min-height: 42px;
  }

  .sn-announcement__inner {
    min-height: 42px;
    justify-content: center;
    padding-inline: 0;
    font-size: 11px;
    text-align: center;
  }

  .sn-announcement__support {
    display: none;
  }

  .sn-reference-header__inner {
    height: 72px;
    padding-inline: 0;
  }

  .sn-reference-logo img {
    width: 80px;
  }

  .sn-reference-actions > [role='radiogroup'],
  .sn-reference-actions .sn-reference-trial {
    display: none;
  }

  .sn-payment-strip__inner {
    min-height: 61px;
    gap: 9px;
  }

  .sn-payment-strip__logo {
    width: 72px;
    height: 30px;
  }

  .sn-payment-strip__inner p {
    font-size: 14px;
  }

  .sn-reference-hero__grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 28px 0 48px;
  }

  .sn-reference-hero__copy {
    transform: none;
  }

  .sn-reference-hero__art {
    width: min(100%, 430px);
    margin-inline: auto;
  }

  .sn-reference-hero__copy {
    max-width: 600px;
    margin-inline: auto;
  }

  .sn-reference-hero h1 {
    margin-top: 14px;
    font-size: clamp(38px, 11.5vw, 50px);
  }

  .sn-reference-hero__lead,
  .sn-reference-hero__body {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.7;
  }

  .sn-reference-hero__button {
    min-height: 54px;
  }

  .sn-reference-stats {
    padding-bottom: 40px;
  }

  .sn-reference-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-inline: 0;
  }

  .sn-reference-stat {
    min-height: 96px;
    gap: 13px;
    padding: 12px 8px 18px;
  }

  .sn-reference-stat__icon svg {
    width: 40px;
    height: 40px;
  }

  .sn-reference-stat__value {
    font-size: 25px;
  }

  .sn-reference-stat__label {
    margin-top: 7px;
    font-size: 12px;
    white-space: normal;
  }

  .sn-reference-plans {
    padding: 44px 0 60px;
  }

  .sn-reference-plans__header h2 {
    font-size: 40px;
  }

  .sn-reference-plans__header > p {
    font-size: 14px;
  }

  .sn-reference-device-tabs {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sn-reference-device-tabs a,
  .sn-reference-device-tabs span {
    min-height: 56px;
    border-bottom: 1px solid #3b3b3b;
    font-size: 15px;
  }

  .sn-reference-plan-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }

  .sn-reference-plan-card {
    min-height: 0;
  }

  .sn-reference-plan-card__heading {
    padding: 24px 28px 0;
  }

  .sn-reference-plan-card__heading h3 {
    font-size: 30px;
  }

  .sn-reference-plan-card__price {
    margin-top: 18px;
    margin-right: 28px;
    padding: 18px 30px;
  }

  .sn-reference-plan-card__price strong {
    font-size: 42px;
  }

  .sn-reference-plan-card__features {
    padding: 20px 28px;
  }

  .sn-reference-plan-card__button {
    margin: 22px 28px 26px;
  }

  .sn-ref-band {
    padding-block: 54px;
  }

  .sn-ref-section-head h2 {
    font-size: 38px;
  }

  .sn-ref-section-head > p:last-child:not(.sn-ref-kicker) {
    font-size: 14px;
  }

  .sn-ref-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sn-ref-device-card {
    height: 108px;
  }

  .sn-ref-steps__grid,
  .sn-ref-comparison__grid,
  .sn-ref-explained__grid,
  .sn-ref-discover__grid,
  .sn-ref-faq__grid,
  .sn-ref-why__grid {
    grid-template-columns: 1fr;
  }

  .sn-ref-steps__grid {
    gap: 38px;
  }

  .sn-ref-steps__grid::before {
    display: none;
  }

  .sn-ref-comparison__card,
  .sn-ref-discover__card {
    min-height: 0;
  }

  .sn-ref-explained__grid {
    gap: 42px;
  }

  .sn-ref-faq__grid {
    gap: 0;
  }

  .sn-ref-why {
    min-height: 0;
  }

  .sn-ref-why__edge {
    width: 50%;
    opacity: .45;
  }

  .sn-ref-why::before {
    background: rgba(6, 11, 24, .77);
  }

  .sn-ref-why__grid > li {
    min-height: 0;
  }

  .sn-ref-promo__copy h2 {
    font-size: 45px;
  }

  .sn-ref-promo__features {
    grid-template-columns: 1fr;
  }

  .sn-ref-promo__features li {
    min-height: 0;
  }

  .sn-ref-coverage__box {
    padding: 22px 18px;
  }

  .sn-ref-testimonial-card {
    padding: 22px 20px 25px;
  }
}

@media (max-width: 420px) {
  .sn-reference-stats__grid {
    grid-template-columns: 1fr;
  }

  .sn-reference-stat {
    justify-content: center;
  }

  .sn-reference-plans__eyebrow,
  .sn-reference-eyebrow {
    letter-spacing: 0.17em;
  }

  .sn-reference-hero__badge > span:last-child {
    margin-top: 15px;
    font-size: 14px;
  }

  .sn-ref-kicker {
    font-size: 11px;
    letter-spacing: .16em;
  }

  .sn-ref-section-head h2 {
    font-size: 34px;
  }

  .sn-ref-device-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-reference-hero__orbit {
    animation: none;
  }
}

/* Plans page: process / benefits / info-card section (reference-matched, light theme). */

.sn-plans-process__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sn-plans-process__card {
  padding: 32px 28px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.sn-plans-process__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 999px;
  background: #eaf1fe;
  color: #2878f0;
}

.sn-plans-process__card:nth-child(2) .sn-plans-process__icon {
  background: #e6f7ee;
  color: #16a34a;
}

.sn-plans-process__card:nth-child(3) .sn-plans-process__icon {
  background: #f1ecfc;
  color: #7c3aed;
}

.sn-plans-process__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--sn-reference-blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 2px #ffffff;
}

.sn-plans-process__card h3 {
  margin-top: 18px;
  color: #1d1d1e;
  font-size: 17px;
  font-weight: 700;
}

.sn-plans-process__card p {
  margin-top: 8px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
}

.sn-plans-benefits__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sn-plans-benefit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.sn-plans-benefit__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #eaf1fe;
  color: #2878f0;
}

.sn-plans-benefit p {
  color: #374151;
  font-size: 14px;
}

.sn-plans-benefit p strong {
  color: #1d1d1e;
}

.sn-plans-info__grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.sn-plans-info-card {
  padding: 32px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.sn-plans-info-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d1d1e;
  font-size: 18px;
  font-weight: 700;
}

.sn-plans-info-card > p {
  margin-top: 14px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

.sn-plans-info-card__list {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.sn-plans-info-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #374151;
  font-size: 14px;
  line-height: 1.4;
}

.sn-plans-check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: #22c55e;
  color: #ffffff;
}

.sn-plans-check--inline {
  margin-top: 0;
}

.sn-plans-info-card__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--sn-reference-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sn-plans-notice {
  margin-top: 22px;
  padding: 16px 18px;
  background: #eef4ff;
  border-radius: 10px;
}

.sn-plans-notice__title {
  margin: 0;
  color: #14448c;
  font-size: 14px;
  font-weight: 700;
}

.sn-plans-notice p:not(.sn-plans-notice__title) {
  margin-top: 6px;
  color: #2c2c2c;
  font-size: 13px;
  line-height: 1.55;
}

.sn-plans-notice__link {
  color: var(--sn-reference-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 767px) {
  .sn-plans-process__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }

  .sn-plans-benefits__grid {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .sn-plans-info__grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .sn-plans-info-card {
    padding: 24px;
  }
}

/* Plans page: FAQ / feature grid / review-card section (reference-matched, light theme). */

.sn-plans-faq__head {
  padding: 4px 4px 14px;
}

.sn-plans-faq__head h2 {
  color: #1d1d1e;
  font-size: 18px;
  font-weight: 700;
}

.sn-plans-faq__footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: #6b7280;
  font-size: 13px;
}

.sn-plans-faq__footnote svg {
  color: var(--sn-reference-blue);
}

.sn-plans-faq__footnote a {
  color: var(--sn-reference-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sn-plans-features__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sn-plans-feature {
  padding: 26px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.sn-plans-feature__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eaf1fe;
  color: #2878f0;
}

.sn-plans-feature h3 {
  margin-top: 14px;
  color: #1d1d1e;
  font-size: 15px;
  font-weight: 700;
}

.sn-plans-feature p {
  margin-top: 6px;
  color: #6b7280;
  font-size: 13.5px;
  line-height: 1.55;
}

.sn-plans-review-card {
  margin-top: 32px;
  padding: 40px 32px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.sn-plans-review-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 999px;
  background: #f3f4f6;
  color: #9ca3af;
}

.sn-plans-review-card__title {
  margin-top: 16px;
  color: #1d1d1e;
  font-size: 16px;
  font-weight: 700;
}

.sn-plans-review-card__body {
  margin-top: 8px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .sn-plans-features__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }

  .sn-plans-review-card {
    padding: 28px 22px;
    margin-top: 24px;
  }
}

/* Customer review carousel. */

.sn-plans-reviews {
  margin-top: 32px;
}

.sn-plans-reviews__viewport {
  position: relative;
}

.sn-plans-review-card--slide {
  text-align: left;
}

.sn-plans-review-card__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 110px;
}

.sn-plans-review-card__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--sn-reference-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.sn-plans-review-card__who {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sn-plans-review-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #1d1d1e;
  font-size: 15px;
  font-weight: 700;
}

.sn-plans-review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f7ee;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
}

.sn-plans-review-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a524;
}

.sn-plans-review-card__stars svg[fill="none"] {
  color: #d1d5db;
}

.sn-plans-review-card__date {
  position: absolute;
  top: 0;
  right: 0;
  color: #9ca3af;
  font-size: 12.5px;
}

.sn-plans-review-card__text {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eceef1;
  color: #374151;
  font-size: 14.5px;
  line-height: 1.65;
}

.sn-plans-reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.sn-plans-reviews__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
}

.sn-plans-reviews__arrow:hover,
.sn-plans-reviews__arrow:focus-visible {
  border-color: var(--sn-reference-blue);
  color: var(--sn-reference-blue);
}

.sn-plans-reviews__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sn-plans-reviews__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
}

.sn-plans-reviews__dot[aria-current="true"] {
  width: 20px;
  background: var(--sn-reference-blue);
}

@media (max-width: 767px) {
  .sn-plans-review-card__head {
    flex-wrap: wrap;
    padding-right: 0;
  }

  .sn-plans-review-card__date {
    position: static;
    margin-top: 4px;
    margin-left: 58px;
  }
}

/*
 * Slide transition — scoped to autoplaying review carousels only (the homepage testimonials
 * band). The Plans page review carousel has no autoplay attribute and keeps its original,
 * unanimated instant-toggle behaviour untouched.
 */
.sn-plans-reviews__viewport--slide {
  position: relative;
  overflow: hidden;
}

.sn-plans-reviews__viewport--slide [data-sn-review-slide] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform .5s ease, opacity .5s ease;
}

.sn-plans-reviews__viewport--slide [data-sn-review-slide].is-current {
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.sn-plans-reviews__viewport--slide [data-sn-review-slide].is-next {
  transform: translateX(36px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.sn-plans-reviews__viewport--slide [data-sn-review-slide].is-prev {
  transform: translateX(-36px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sn-plans-reviews__viewport--slide [data-sn-review-slide] {
    transition: opacity .3s ease;
  }

  .sn-plans-reviews__viewport--slide [data-sn-review-slide].is-next,
  .sn-plans-reviews__viewport--slide [data-sn-review-slide].is-prev {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Checkout — Forminator order form, one plan per page, read-only     */
/* summary, two-column Billing/Additional split, PayPal + Interac.    */
/* ------------------------------------------------------------------ */

.sn-checkout {
  padding: 4.5rem 0 5.25rem;
  background: #fff;
}

.sn-checkout__container {
  max-width: 1020px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---- Order summary (read-only, full width, top of page) ----------- */

.sn-checkout__order {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.sn-checkout__order h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 0.85rem;
}

.sn-checkout__order-table {
  border: 1px solid var(--color-line);
  background: #fff;
}

.sn-checkout__order-row {
  display: grid;
  grid-template-columns: 62% 38%;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.875rem;
}

.sn-checkout__order-row > .sn-checkout__order-value {
  border-left: 1px solid var(--color-line);
  padding-left: 1rem;
}

.sn-checkout__order-row:last-child {
  border-bottom: 0;
}

.sn-checkout__order-row--head {
  padding-block: 0.75rem;
  font-weight: 700;
}

.sn-checkout__order-label {
  color: var(--color-muted);
  font-weight: 500;
}

.sn-checkout__order-value {
  color: var(--color-ink);
  font-weight: 700;
  text-align: right;
}

.sn-checkout__order-row--total {
  padding-block: 0.9rem;
}

.sn-checkout__order-row--total .sn-checkout__order-label {
  color: var(--color-ink);
  font-weight: 700;
  font-size: 1rem;
}

.sn-checkout__order-row--total .sn-checkout__order-value {
  color: var(--color-brand-strong);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.sn-checkout__order-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--color-subtle);
}

/* ---- Form card ------------------------------------------------------ */

.sn-checkout__form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.sn-checkout__form .forminator-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}

.sn-checkout__form .forminator-required {
  color: var(--color-danger);
  margin-left: 0.15em;
}

/* Every field here is full-width (cols=12) by default — Forminator ships
   no width rule for bare .forminator-col-N classes outside its "open"
   grid variant, which this form does not use. */
.sn-checkout__form .forminator-col {
  min-width: 0;
}

/* Two-column desktop grid: Billing Details (left) / Additional
   Information (right), everything else spans full width below. Field
   placement is by id, set once here and left alone by DOM order. */
.sn-checkout__form .forminator-custom-form > .forminator-row:not(.forminator-row-last) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 2rem;
  row-gap: 1.15rem;
  align-items: start;
}

/* Forminator's Name field contains its own nested row. Keep that row as a
   two-column flex row so first/last name inputs do not collapse. */
.sn-checkout__form #name-1 > .forminator-row {
  display: flex !important;
  grid-template-columns: none !important;
  column-gap: 0;
  row-gap: 0;
  margin: 0 !important;
}

.sn-checkout__form #name-1 > .forminator-row > .forminator-col {
  flex: 1 1 0;
  width: 50% !important;
  min-width: 0;
}

.sn-checkout__form #name-1 > .forminator-row > .forminator-col:first-child {
  padding-right: 0.6rem;
}

.sn-checkout__form #name-1 > .forminator-row > .forminator-col:last-child {
  padding-left: 0.6rem;
}

/* The submit button and the PayPal button each get their own dedicated
   Forminator row (outside the main field row) — keep those single-column
   so the button/PayPal widget is never squeezed to half width. */
.sn-checkout__form .forminator-row-last,
.sn-checkout__form .forminator-paypal-row {
  display: block !important;
  margin-top: 0.5rem;
}

.sn-checkout__form .forminator-row-last .forminator-col,
.sn-checkout__form .forminator-paypal-row .forminator-col {
  width: 100%;
}

.sn-checkout__form #html-billing-heading { grid-column: 1 !important; grid-row: 1 !important; }
.sn-checkout__form #name-1 { grid-column: 1 !important; grid-row: 2 !important; }
.sn-checkout__form #select-province { grid-column: 1 !important; grid-row: 3 !important; }
.sn-checkout__form #phone-1 { grid-column: 1 !important; grid-row: 4 !important; }
.sn-checkout__form #email-1 { grid-column: 1 !important; grid-row: 5 !important; }

.sn-checkout__form #html-additional-heading { grid-column: 2 !important; grid-row: 1 !important; }
.sn-checkout__form #textarea-notes { grid-column: 2 !important; grid-row: 2 / 6 !important; }

.sn-checkout__form #select-status,
.sn-checkout__form #checkbox-device,
.sn-checkout__form #html-device-note,
.sn-checkout__form #checkbox-channels,
.sn-checkout__form #html-adult-disclaimer {
  grid-column: 1 / -1 !important;
}

.sn-checkout__form #radio-payment,
.sn-checkout__form #paypal-1,
.sn-checkout__form #html-interac-instructions {
  grid-column: 1 / -1 !important;
}

.sn-checkout__form #textarea-notes .forminator-textarea {
  height: 100%;
  min-height: 165px !important;
}

/* The hidden plan record never renders — pull it out of grid flow. */
.sn-checkout__form #plan-id {
  display: none;
}

@media (max-width: 780px) {
  .sn-checkout__form .forminator-custom-form > .forminator-row:not(.forminator-row-last) {
    grid-template-columns: 1fr !important;
  }

  .sn-checkout__form #name-1 > .forminator-row {
    display: flex !important;
  }

  .sn-checkout__form #name-1 > .forminator-row > .forminator-col {
    width: 50% !important;
  }

  .sn-checkout__form #html-billing-heading,
  .sn-checkout__form #name-1,
  .sn-checkout__form #select-province,
  .sn-checkout__form #phone-1,
  .sn-checkout__form #email-1,
  .sn-checkout__form #html-additional-heading,
  .sn-checkout__form #textarea-notes,
  .sn-checkout__form #select-status,
  .sn-checkout__form #checkbox-device,
  .sn-checkout__form #html-device-note,
  .sn-checkout__form #checkbox-channels,
  .sn-checkout__form #html-adult-disclaimer,
  .sn-checkout__form #radio-payment,
  .sn-checkout__form #paypal-1,
  .sn-checkout__form #html-interac-instructions {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .sn-checkout__form #textarea-notes .forminator-textarea {
    min-height: 120px !important;
  }
}

/* Match the reference checkout's bordered option groups. */
.sn-checkout__form #select-status,
.sn-checkout__form #checkbox-device,
.sn-checkout__form #checkbox-channels {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 1rem 1.05rem;
  background: #fff;
  overflow: visible;
}

.sn-checkout__form #select-status .forminator-label,
.sn-checkout__form #checkbox-device .forminator-label,
.sn-checkout__form #checkbox-channels .forminator-label {
  margin-bottom: 0.65rem;
}

.naiptv-checkout-col-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-brand-soft);
}

/* ---- Inputs ----------------------------------------------------------- */

.sn-checkout__form .forminator-input,
.sn-checkout__form .forminator-textarea,
.sn-checkout__form .select2-selection {
  width: 100%;
  border: 1px solid var(--color-line-strong) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  font-size: 0.925rem !important;
  padding: 0.7rem 0.85rem !important;
  min-height: 46px !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--ease-premium), box-shadow 0.2s var(--ease-premium);
}

.sn-checkout__form .forminator-textarea {
  min-height: 120px !important;
}

.sn-checkout__form .forminator-input:focus,
.sn-checkout__form .forminator-textarea:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px var(--color-brand-soft) !important;
  outline: none;
}

.sn-checkout__form .select2-selection__rendered {
  line-height: 1.6 !important;
  padding: 0 !important;
  color: var(--color-ink) !important;
}

.sn-checkout__form .select2-selection__arrow {
  height: 44px !important;
}

/* Payment method rendered as selectable cards */

.sn-checkout__form #radio-payment .forminator-field {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (min-width: 480px) {
  .sn-checkout__form #radio-payment .forminator-field {
    flex-direction: row;
  }
}

.sn-checkout__form .forminator-radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-premium), background-color 0.2s var(--ease-premium);
  flex: 1;
}

.sn-checkout__form .forminator-radio:hover {
  border-color: var(--color-brand);
}

.sn-checkout__form .forminator-radio-bullet {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--color-line-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s var(--ease-premium);
}

.sn-checkout__form .forminator-radio-bullet::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--color-brand);
  transform: scale(0);
  transition: transform 0.15s var(--ease-premium);
}

.sn-checkout__form .forminator-radio-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
}

.sn-checkout__form .forminator-radio:has(input:checked),
.sn-checkout__form .forminator-radio.is-checked {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.sn-checkout__form .forminator-radio:has(input:checked) .forminator-radio-bullet,
.sn-checkout__form .forminator-radio.is-checked .forminator-radio-bullet {
  border-color: var(--color-brand);
}

.sn-checkout__form .forminator-radio:has(input:checked) .forminator-radio-bullet::after,
.sn-checkout__form .forminator-radio.is-checked .forminator-radio-bullet::after {
  transform: scale(1);
}

/* Device / channel package checkboxes rendered as chips */

.sn-checkout__form #checkbox-device .forminator-field,
.sn-checkout__form #checkbox-channels .forminator-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 0.65rem;
}

.sn-checkout__form #checkbox-device .forminator-field > .forminator-label,
.sn-checkout__form #checkbox-channels .forminator-field > .forminator-label {
  flex: 0 0 100%;
  margin: 0 !important;
}

.sn-checkout__form .forminator-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin: 0 !important;
  min-height: 38px;
  border: 1px solid var(--color-line-strong);
  border-radius: 5px;
  padding: 0.5rem 0.7rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-premium), background-color 0.2s var(--ease-premium);
}

.sn-checkout__form .forminator-checkbox:hover {
  border-color: var(--color-brand);
}

.sn-checkout__form .forminator-checkbox-box {
  width: 16px;
  height: 16px;
  margin: 0 !important;
  border-radius: 5px;
  border: 2px solid var(--color-line-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s var(--ease-premium), background-color 0.2s var(--ease-premium);
}

.sn-checkout__form .forminator-checkbox-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s var(--ease-premium);
}

.sn-checkout__form .forminator-checkbox-label {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-ink);
}

.sn-checkout__form .forminator-checkbox:has(input:checked),
.sn-checkout__form .forminator-checkbox.is-checked {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.sn-checkout__form .forminator-checkbox:has(input:checked) .forminator-checkbox-box,
.sn-checkout__form .forminator-checkbox.is-checked .forminator-checkbox-box {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.sn-checkout__form .forminator-checkbox:has(input:checked) .forminator-checkbox-box::after,
.sn-checkout__form .forminator-checkbox.is-checked .forminator-checkbox-box::after {
  transform: rotate(45deg) scale(1);
}

/* Small helper notes under Device / Channel Packages */

.sn-checkout__form .naiptv-checkout-note {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-danger);
}

.sn-checkout__form #checkbox-device > #html-device-note {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sn-checkout__form #html-adult-disclaimer {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface);
  padding: 0.85rem 1rem;
}

.sn-checkout__form .naiptv-checkout-disclaimer {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.8rem;
  line-height: 1.45;
}

.sn-checkout__form .naiptv-checkout-disclaimer strong:first-child {
  color: var(--color-danger);
}

/* Forminator/Select2 sometimes keeps intrinsic widths and vertical margins.
   Normalize them so the reference-style option boxes stay in a clean grid. */
.sn-checkout__form #select-status .select2-container,
.sn-checkout__form #select-province .select2-container {
  width: 100% !important;
  margin: 0 !important;
}

.sn-checkout__form #select-status .select2-selection,
.sn-checkout__form #select-province .select2-selection {
  border-radius: 5px !important;
}

@media (max-width: 600px) {
  .sn-checkout {
    padding: 2.5rem 0 3.5rem;
  }

  .sn-checkout__container,
  .sn-checkout__order,
  .sn-checkout__order-table,
  .sn-checkout__form,
  .sn-checkout__form .forminator-custom-form,
  .sn-checkout__form .forminator-row,
  .sn-checkout__form .forminator-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .sn-checkout__order-table {
    overflow: hidden;
  }

  .sn-checkout__order-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    padding: 0.75rem;
    box-sizing: border-box;
  }

  .sn-checkout__order-label,
  .sn-checkout__order-value {
    min-width: 0;
  }

  .sn-checkout__order-value {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.78rem;
  }

  .sn-checkout__order-row > .sn-checkout__order-value {
    padding-left: 0.5rem;
    box-sizing: border-box;
  }

  .sn-checkout__form #name-1 > .forminator-row {
    display: block !important;
  }

  .sn-checkout__form #name-1 > .forminator-row > .forminator-col {
    width: 100% !important;
    padding: 0 !important;
  }

  .sn-checkout__form #name-1 > .forminator-row > .forminator-col + .forminator-col {
    margin-top: 0.9rem !important;
  }

  .sn-checkout__form #select-status,
  .sn-checkout__form #checkbox-device,
  .sn-checkout__form #checkbox-channels,
  .sn-checkout__form #html-adult-disclaimer {
    padding: 0.9rem;
  }

  .sn-checkout__form .forminator-checkbox {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .sn-checkout__form .forminator-checkbox-label {
    overflow-wrap: anywhere;
  }

  .sn-checkout__form #radio-payment .forminator-field {
    flex-direction: column !important;
    width: 100%;
  }

  .sn-checkout__form #radio-payment .forminator-radio {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .sn-checkout__form #paypal-1,
  .sn-checkout__form #paypal-1 iframe,
  .sn-checkout__form .forminator-paypal-row {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Payment instructions panel (Interac) */

.sn-checkout__form .naiptv-payment-instructions {
  background: var(--color-sky);
  border: 1px solid var(--color-brand-soft);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}

.sn-checkout__form .naiptv-payment-instructions h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-brand-deep);
}

.sn-checkout__form .naiptv-payment-instructions p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.sn-checkout__form .naiptv-payment-instructions p:last-child {
  margin-bottom: 0;
}

.sn-checkout__payment-status {
  margin-top: 0.75rem;
  color: var(--color-ink);
}

/* PayPal field container */

.sn-checkout__form .forminator-field-paypal {
  padding: 0.25rem 0;
}

/* Submit button */

.sn-checkout__form .forminator-button-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: none;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: background-color 0.2s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.sn-checkout__form .forminator-button-submit:hover {
  background: var(--color-brand-strong);
}

.sn-checkout__form .forminator-button-submit:active {
  transform: scale(0.985);
}

/* ------------------------------------------------------------------ */
/* Device tabs + plan card hover — matched to reference recording.    */
/* ------------------------------------------------------------------ */

/* Tab label text was inheriting the site's near-black ink color
   instead of white (readable on neither the dark nor the blue-active
   tab background) — force it explicitly. */
.sn-reference-device-tabs a,
.sn-reference-device-tabs span,
.sn-reference-device-tabs button {
  color: #ffffff !important;
}

.sn-reference-device-tabs button:not(.is-active):hover,
.sn-reference-device-tabs button:not(.is-active):focus-visible {
  background: #303030 !important;
}

/* Card hover: the reference recording shows the hovered card's
   background lighten to a light gray with its text/icons flipping to
   dark for contrast, and its button filling solid blue — everything
   else (price ribbon, eyebrow) stays as-is since it already reads
   fine on the lighter background. */
.sn-reference-plan-card {
  transition: background-color 0.25s ease;
}

.sn-reference-plan-card:hover {
  background: #ffffff !important;
}

.sn-reference-plan-card:hover .sn-reference-plan-card__heading h3 {
  color: #1d1d1d !important;
}

.sn-reference-plan-card:hover .sn-reference-plan-card__features li {
  color: rgba(29, 29, 29, 0.82) !important;
}

.sn-reference-plan-card:hover .sn-reference-plan-card__button {
  background: var(--sn-reference-blue) !important;
  color: #ffffff !important;
  border-color: var(--sn-reference-blue) !important;
}

/* Footer legal bar: third-party content notice, disclaimer link and copyright. */
footer > .border-t .sn-ref-footer-legalbar {
  padding-block: 24px;
  text-align: center;
}

footer > .border-t p.sn-ref-footer-notice {
  max-width: 570px;
  margin: 0 auto;
  color: #6f747c;
  font-size: 10px;
  line-height: 1.6;
}

footer > .border-t p.sn-ref-footer-disclaimer {
  margin: 6px 0 0;
  font-size: 10px;
}

.sn-ref-footer-disclaimer a {
  color: var(--color-brand, #2878f0);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

.sn-ref-footer-disclaimer a:hover {
  color: #fff;
}

footer > .border-t p.sn-ref-footer-copyright {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  font-weight: 500;
}

/* Footer link columns: 10% tighter row spacing (space-y-2.5 = 10px). */
footer .sn-ref-footer-dots.space-y-2\.5 > :not(:last-child) {
  margin-bottom: 9px;
}

footer .sn-ref-footer-grid nav > ul {
  margin-top: 14px;
}

/* About Us page (page-about-us.php / page-a-propos.php). */
.sn-about-shell {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.sn-about-shell--narrow {
  width: min(820px, calc(100% - 32px));
}

.sn-about-kicker {
  margin: 0;
  color: var(--sn-reference-blue, #3278ed);
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sn-about-hero,
.sn-about-mission,
.sn-about-faq {
  background: #fff;
}

.sn-about-hero {
  padding-block: 80px 64px;
}

.sn-about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 64px;
}

.sn-about-hero h1 {
  margin: 14px 0 0;
  color: #1e1e1f;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.12;
}

.sn-about-lead {
  max-width: 560px;
  margin: 20px 0 0;
  color: #5b6472;
  font-size: 16px;
  line-height: 1.8;
}

.sn-about-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding: 15px 24px;
  border: 1px solid var(--sn-reference-blue, #3278ed);
  border-radius: 5px;
  background: var(--sn-reference-blue, #3278ed);
  color: #fff;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.sn-about-button:hover {
  border-color: #1f5fcc;
  background: #1f5fcc;
  color: #fff;
  transform: translateY(-1px);
}

.sn-about-button svg {
  width: 16px;
  height: 16px;
}

.sn-about-button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
}

.sn-about-button--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
}

.sn-about-hero__art {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1 / .9;
  margin-inline: auto;
}

.sn-about-hero__dots {
  position: absolute;
  top: -18px;
  right: -10px;
  width: 44%;
  height: 58%;
  background-image: radial-gradient(rgba(223, 77, 93, .45) 1.3px, transparent 1.4px);
  background-size: 13px 13px;
}

.sn-about-hero__img {
  position: absolute;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(20, 30, 50, .16);
}

.sn-about-hero__img--back {
  top: 12%;
  left: 0;
  width: 50%;
  aspect-ratio: 1;
}

.sn-about-hero__img--front {
  right: 4%;
  bottom: 0;
  width: 58%;
  aspect-ratio: 1.15;
  border: 6px solid #fff;
}

.sn-about-hero__badge {
  position: absolute;
  top: 0;
  right: 12%;
  display: grid;
  place-content: center;
  width: 27%;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 6px;
  background: var(--sn-reference-blue, #3278ed);
  box-shadow: 0 14px 30px rgba(50, 120, 237, .35);
  color: #fff;
  text-align: center;
}

.sn-about-hero__badge strong {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
}

.sn-about-hero__badge span {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}

.sn-about-mission {
  padding-block: 40px 88px;
}

.sn-about-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.sn-about-head h2 {
  margin: 12px 0 0;
  color: #1e1e1f;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.15;
}

.sn-about-head > p:not(.sn-about-kicker) {
  margin: 16px auto 0;
  color: #5b6472;
  font-size: 16px;
  line-height: 1.8;
}

.sn-about-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.sn-about-features li {
  padding: 28px 26px;
  border: 1px solid #e6eaf1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(20, 30, 50, .04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sn-about-features li:hover {
  border-color: rgba(50, 120, 237, .4);
  box-shadow: 0 14px 30px rgba(50, 120, 237, .1);
  transform: translateY(-2px);
}

.sn-about-features__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(50, 120, 237, .1);
  color: var(--sn-reference-blue, #3278ed);
}

.sn-about-features__icon svg {
  width: 22px;
  height: 22px;
}

.sn-about-features h3,
.sn-about-steps h3 {
  margin: 18px 0 0;
  color: #1e1e1f;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

.sn-about-features p,
.sn-about-steps p {
  margin: 10px 0 0;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.7;
}

.sn-about-how {
  padding-block: 80px;
  background: #f4f7fc;
}

.sn-about-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.sn-about-steps li {
  padding: 28px 26px;
  border-radius: 10px;
  background: #fff;
}

.sn-about-steps__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sn-reference-blue, #3278ed);
  color: #fff;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.sn-about-note {
  margin: 32px 0 0;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}

.sn-about-note a {
  color: var(--sn-reference-blue, #3278ed);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sn-about-faq {
  padding-block: 80px;
}

.sn-about-faq__list {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}

.sn-about-faq details {
  border: 1px solid #e6eaf1;
  border-radius: 8px;
  background: #fff;
}

.sn-about-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.sn-about-faq summary::-webkit-details-marker {
  display: none;
}

.sn-about-faq summary h3 {
  margin: 0;
  color: #1e1e1f;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.sn-about-faq summary span {
  flex: none;
  color: var(--sn-reference-blue, #3278ed);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease;
}

.sn-about-faq details[open] summary span {
  transform: rotate(45deg);
}

.sn-about-faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.7;
}

.sn-about-cta {
  padding-block: 72px;
  background: #1b1b1b;
  color: #fff;
  text-align: center;
}

.sn-about-cta h2 {
  margin: 0;
  color: #fff;
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.15;
}

.sn-about-cta p {
  max-width: 640px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.7;
}

.sn-about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 900px) {
  .sn-about-hero {
    padding-block: 52px 40px;
  }

  .sn-about-hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sn-about-hero__art {
    width: min(100%, 360px);
  }

  .sn-about-features,
  .sn-about-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sn-about-features,
  .sn-about-steps {
    grid-template-columns: 1fr;
  }

  .sn-about-mission,
  .sn-about-how,
  .sn-about-faq {
    padding-block: 52px;
  }

  .sn-about-cta__actions .sn-about-button {
    width: 100%;
  }
}

/* Sliding sticky header: once the header scrolls out of view it becomes a compact dark
 * bar that slides down from the top (see initHeaderShadow in theme.js). */
.sn-reference-logo__light {
  display: none !important;
}

.sn-reference-header.is-stuck {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  right: 0;
  left: 0;
  z-index: 60;
  background: #1b1b1b !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
}

.sn-reference-header.is-stuck.is-revealed {
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.sn-reference-header.is-stuck .sn-reference-header__inner {
  height: 64px;
}

.sn-reference-header.is-stuck .sn-reference-logo__dark {
  display: none !important;
}

.sn-reference-header.is-stuck .sn-reference-logo__light {
  display: block !important;
  width: 76px;
}

.sn-reference-header.is-stuck .sn-reference-primary-menu a {
  padding-block: 20px;
  color: #fff;
  font-size: 15px;
}

.sn-reference-header.is-stuck .sn-reference-primary-menu a:hover,
.sn-reference-header.is-stuck .sn-reference-primary-menu a:focus-visible {
  color: #5b9bff;
}

.sn-reference-header.is-stuck .sn-reference-trial {
  height: 36px !important;
}

.sn-reference-header.is-stuck [role='radiogroup'] {
  background: rgba(255, 255, 255, .08);
  --tw-ring-color: rgba(255, 255, 255, .18);
}

.sn-reference-header.is-stuck [role='radiogroup'] a[aria-checked='false'] {
  color: rgba(255, 255, 255, .72);
}

.sn-reference-header.is-stuck [role='radiogroup'] a[aria-checked='false']:hover {
  color: #fff;
}

.sn-reference-header.is-stuck .sn-reference-menu-button,
.sn-reference-header.is-stuck .sn-reference-menu-button svg {
  color: #fff !important;
}

.sn-reference-header.is-stuck .sn-reference-menu-button:hover {
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 600px) {
  .sn-reference-header.is-stuck {
    top: 0;
    transform: translateY(-100%);
  }

  .sn-reference-header.is-stuck .sn-reference-header__inner {
    height: 58px;
  }

  .sn-reference-header.is-stuck .sn-reference-logo__light {
    width: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-reference-header.is-stuck.is-revealed {
    transition: none;
  }
}

/* Full navigation from 1100px up. Between 1100px and 1279px the links sit a little
 * tighter so English and French labels fit comfortably beside the actions. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .sn-reference-nav {
    margin-left: 26px;
  }

  .sn-reference-primary-menu a {
    padding-inline: 9px;
    font-size: 15px;
  }

  .sn-reference-actions {
    gap: 10px;
  }

  .sn-reference-trial {
    min-width: 0;
    padding-inline: 14px !important;
  }
}

/* Device cards: hover light. Translucent panels drift opposite the cursor and a soft
 * glow follows it (initDeviceFx in theme.js); the logo brightens. The card never moves. */
.sn-ref-device-card {
  position: relative;
  isolation: isolate;
  transition: border-color .35s ease, background-color .35s ease;
}

.sn-ref-device-card > img,
.sn-ref-device-card > span {
  position: relative;
  z-index: 1;
  transition: transform .35s ease, filter .35s ease, color .35s ease;
}

.sn-ref-device-card__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.sn-ref-device-card__fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(150px circle at var(--px, 50%) var(--py, 50%), rgba(90, 150, 255, .16), transparent 65%);
}

.sn-ref-device-card__fx i {
  position: absolute;
  display: block;
  border-radius: 4px;
  transition: transform .3s ease-out;
}

.sn-ref-device-card__fx i:nth-child(1) {
  top: -12%;
  left: -12%;
  width: 58%;
  height: 62%;
  background: rgba(255, 255, 255, .06);
  transform: translate(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px));
}

.sn-ref-device-card__fx i:nth-child(2) {
  top: -14%;
  right: -12%;
  width: 46%;
  height: 44%;
  background: rgba(255, 255, 255, .045);
  transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px));
}

.sn-ref-device-card__fx i:nth-child(3) {
  bottom: -18%;
  left: 18%;
  width: 64%;
  height: 48%;
  background: rgba(255, 255, 255, .035);
  transform: translate(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -12px));
}

@media (hover: hover) and (pointer: fine) {
  .sn-ref-device-card:hover {
    border-color: #5c6b85;
    background-color: #2b2e34;
  }

  .sn-ref-device-card:hover .sn-ref-device-card__fx {
    opacity: 1;
  }

  .sn-ref-device-card:hover > img {
    transform: scale(1.07);
    filter: brightness(1.2);
  }

  .sn-ref-device-card:hover > span {
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-ref-device-card__fx i {
    transform: none;
    transition: none;
  }

  .sn-ref-device-card:hover > img {
    transform: none;
  }
}