/* ------------------------------------------------------------------
   Page-level composition only. No design-system component is
   redefined here — every value below comes from a myt token.
   ------------------------------------------------------------------ */

/* keep hero content above the brand shape */
.hero-grad .hero-row { position: relative; z-index: 1; }

/* allow the DS banners to stack on small screens */
.promo-banner { flex-wrap: wrap; }

/* utility bar right-hand context label */
.utilbar .utilbar__note {
  margin-left: auto; align-self: center;
  font-size: 12px; font-weight: var(--fw-semibold);
  color: rgba(255,255,255,.6); padding: 6px 8px;
}

/* hero stat tiles */
.mini-stat { border-radius: var(--r-sm); padding: 16px 18px; height: 100%; }
.mini-stat b { display: block; font-size: 16px; font-weight: var(--fw-bold); color: var(--myt-blue); }
.mini-stat span { font-size: 12px; color: var(--od-grey-600); }

/* download-speed block inside a pricing card */
.spd-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--r-sm); padding: 18px 22px; margin-bottom: 22px;
}
.spd-box .spd-n { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--myt-blue); line-height: 1; }
.spd-box small { display: block; font-size: 13px; color: var(--od-grey-600); margin-top: 5px; }
.spd-box .spd-ic { width: 34px; height: 34px; color: var(--myt-aqua); flex-shrink: 0; }

/* feature rows keep a title + supporting line */
.feat-list li b { display: block; font-size: 14px; font-weight: var(--fw-semibold); }
.feat-list li span { display: block; font-size: 13px; color: var(--od-grey-600); }

/* before → after comparison */
.cmp-head { background: var(--myt-blue); color: #fff; }
.cmp-head p { color: rgba(255,255,255,.86); margin: 6px 0 0; font-size: var(--fs-bodysmall); }
.cmp-row {
  display: grid; grid-template-columns: 1fr 34px 1fr; gap: 14px;
  align-items: center; padding: 16px 0; border-top: 1px solid var(--od-grey-200);
}
.cmp-row:first-child { border-top: 0; padding-top: 0; }
.cmp-lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--od-grey-600); }
.cmp-val { font-size: var(--fs-h6); font-weight: var(--fw-bold); line-height: 1.15; margin: 3px 0 1px; }
.cmp-val--new { color: var(--myt-blue); }
.cmp-sub { font-size: 13px; color: var(--od-grey-600); }
.cmp-arrow { display: grid; place-items: center; color: var(--myt-aqua); margin-left: -60px;}
.cmp-arrow svg { width: 35px; height: 42px; }
.cmp-keep {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--r-pill); padding: 13px 18px; margin-top: 22px;
  font-size: 20px; font-weight: var(--fw-semibold);
}
.cmp-keep svg { width: 16px; height: 16px; color: var(--od-teal); flex-shrink: 0; }

/* three-column footer for this page */
.footer__cols { grid-template-columns: 1.6fr 1fr 1fr; }
.footer__intro { font-size: 13px; color: rgba(255,255,255,.62); margin: 16px 0 0; max-width: 34ch; }
.footer__legal { font-size: 12px; color: rgba(255,255,255,.45); margin: 22px 0 0; }

@media (max-width: 900px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .utilbar .utilbar__note { display: none; } }
@media (max-width: 760px) {
  .hero-grad, .promo-banner { padding: 30px; }
  .cmp-row { grid-template-columns: 1fr 26px 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}

/*toggle*/
#toggleoffers #toggleBlock .toggle-panels .toggle-panel {
  display: block;
  width: 100%;
}

#toggleoffers #toggleBlock .toggle-panels .toggle-panel.is-hidden {
  display: none;
}

#toggleoffers #toggleBlock .toggle-panels .toggle-panel #faqAccordion,
#toggleoffers #toggleBlock .toggle-panels .toggle-panel #faqAccordion2 {
  display: block;
  width: 100%;
  float: none;
}

#toggleoffers #toggleBlock .toggle-panels .toggle-panel .mt-4 {
  display: block;
  width: 100%;
  float: none;
  clear: both;
}

/*svg*/
.svg-mask01 {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #00B4C8 !important;
    -webkit-mask-image: var(--glow-icon-mask);
    mask-image: var(--glow-icon-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 757px) {
	.svg-mask01 {
		display: inline-block;
		width: 40px;
		height: 60px;
		background-color: #00B4C8 !important;
		-webkit-mask-image: var(--glow-icon-mask);
		mask-image: var(--glow-icon-mask);
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

.speed-intro {max-width: 760px;}

/*tooltipnew*/

/* Tooltip container */
.tooltip1 {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background: #444444 none repeat scroll 0 0;
  color:#fff;
  border: 1px solid #444444;
  text-align: left;
  border-radius: 6px;
  font-size: 16px;
  padding: 10px 10px;
  position: absolute;
  right: -382px;
  top: 68px;
  width: 550px;
  opacity: 2.9;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext {
  visibility: visible;
}

/*tooltipnew*/

.toggle-block__tabs {
  flex-wrap: nowrap; /* change from wrap → nowrap */
}

.toggle-block__tabs button {
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  font-size: clamp(12px, 3vw, 15px);
}

@media (max-width: 767.98px) {
    .mobile-padding {
        padding-top: 3.5rem !important;   /* equivalent to pt-4 */
        padding-bottom: 1.5rem !important; /* equivalent to pb-4 */
    }
}


.quickactionspill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
	cursor: default!important;	
}

.quickactionslabel {
    flex: 0;          /* instead of flex: 1 */
    text-align: center;
	font-weight:500!important;
}

.quickactionsicon-circle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:none!important;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
	.quickactionspill {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* instead of center */
		width: 100%;
		gap: 0px!important;
	}

	.quickactionslabel {
		flex: 1;              /* take remaining space */
		white-space: normal;
		text-align: left;     /* left-align the text */
		line-height: 1.3;
	}

	.quickactionsarrow {
		display: none;
	}
	.quickactionsicon-circle {
		flex-shrink: 0;
		align-self: center;
	}
}