/* Figma Olin / 1:774 and 1:2130. All rules are scoped to the new ACF component.
 * Typography trial: the template reuses the theme's o-* classes.
 * Prices and graphic labels keep their original typography.
 * Previous version: tools/rates/local/typography-before-web-styles/.
 */
.olin-rates-json {
	--rates-ink: #03282c;
	--rates-lime: #afff00;
	--rates-cyan: #00edff;
	color: var(--rates-ink);
	font-family: "Roobert", Arial, sans-serif;
	margin: 40px 0 48px;
	width: 100%;
}
.olin-rates-json *, .olin-rates-json *::before, .olin-rates-json *::after { box-sizing: border-box; }
.olin-rates-json [hidden] { display: none !important; }
.olin-rates-json button, .olin-rates-json a { -webkit-tap-highlight-color: transparent; }
.olin-rates-json button { font-family: inherit; cursor: pointer; }
.olin-rates-json button:focus-visible, .olin-rates-json a:focus-visible, .olin-rates-json__panel:focus-visible { outline: 3px solid #687e80; outline-offset: 5px; }
.olin-rates-json p, .olin-rates-json h2, .olin-rates-json h3 { margin: 0; }
.olin-rates-json ul { padding: 0; margin: 0; list-style: none; }
.olin-rates-json a { text-decoration: none; }
.olin-rates-json a:hover { opacity: 1; }
.olin-rates-json__notes a, .olin-rates-json__features a { text-decoration: underline; text-underline-offset: .15em; }
.olin-rates-json img { display: block; max-width: none; flex: none; }
.olin-rates-json__container { width: min(1120px, calc(100% - 64px)); margin-right: auto; margin-left: auto; }
.olin-rates-json__heading { text-align: center; margin-bottom: 30px; }
.olin-rates-json__subtitle { margin: 14px auto 0; max-width: 490px; }
.olin-rates-json__subtitle p + p { margin-top: 8px; }
.olin-rates-json__tabs-wrap { background: #f1f1f1; }
.olin-rates-json__tabs { display: flex; justify-content: center; min-height: 50px; gap: 26px; }
.olin-rates-json__tab { appearance: none; background: none; border: 0; border-bottom: 5px solid transparent; border-radius: 0; color: #687e80; padding: 16px 24px 11px; white-space: nowrap; }
.olin-rates-json__tab[aria-selected="true"] { border-bottom-color: var(--rates-ink); color: var(--rates-ink); }
.olin-rates-json__panels { margin-top: 30px; }
.olin-rates-json--unheaded .olin-rates-json__panels { margin-top: 0; }
.olin-rates-json--unheaded .olin-rates-json__tabs-wrap + .olin-rates-json__panels { margin-top: 1.2rem; }
.olin-rates-json__panel { --rates-carousel-gutter: max(32px, calc((100% - 1120px) / 2)); --rates-carousel-edge: 32px; outline: none; }
/* Scroll at page width while the visible row keeps the content alignment. */
.olin-rates-json__viewport { width: 100%; padding-left: var(--rates-carousel-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rates-carousel-edge); scrollbar-width: none; scroll-behavior: smooth; }
.olin-rates-json__viewport::-webkit-scrollbar { display: none; }
.olin-rates-json__carousel.olin-rates-json__container { position: relative; width: min(1120px, calc(100% - var(--rates-carousel-edge))); margin-inline: 0; overflow: visible; }
/* Keep the rem-sized popular label clear of the scrollport's top edge. */
.olin-rates-json__track { --rates-slide-width: calc((100% - 90px) / 4); display: flex; align-items: stretch; gap: 30px; overflow: visible; padding-top: max(32px, calc(1rem + 16px)) !important; padding-bottom: 5px !important; }
.olin-rates-json__slide { display: flex; flex-direction: column; flex: 0 0 var(--rates-slide-width); min-width: 0; scroll-snap-align: start; }
.olin-rates-json__slide:last-child { position: relative; }
/* Visible descendant overflow needs an explicit trailing gutter. */
.olin-rates-json__slide:last-child::after { content: ""; position: absolute; top: 0; left: 100%; width: var(--rates-carousel-edge); height: 1px; pointer-events: none; }
.olin-rates-json__track.olin-rates-json__track--wide { --rates-slide-width: calc((100% - 60px) / 3); }
.olin-rates-json__track--wide { justify-content: safe center; }
.olin-rates-json__card { --card-color: var(--rates-lime); position: relative; display: flex; flex: 1; flex-direction: column; background: var(--card-color); min-height: 334px; border-radius: 40px; }
.olin-rates-json__more { display: flex; align-items: center; justify-content: center; align-self: center; gap: 4px; max-width: 100%; margin-top: 14px; color: var(--rates-ink); text-align: center; }
.olin-rates-json__more:hover > span { text-decoration: underline; text-underline-offset: 3px; }
/* Share card, disclaimer and link rows while retaining flex in older browsers. */
@supports (grid-template-rows: subgrid) {
	.olin-rates-json__track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--rates-slide-width); grid-template-rows: auto auto auto; gap: 0 30px; }
	.olin-rates-json__slide { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
	.olin-rates-json__card { grid-row: 1; }
	.olin-rates-json__disclaimer { grid-row: 2; }
	.olin-rates-json__more { grid-row: 3; justify-self: center; }
}
.olin-rates-json__card--cyan { --card-color: var(--rates-cyan); }
.olin-rates-json__card--popular { box-shadow: inset 0 0 0 2px #687e80; }
.olin-rates-json__popular { position: absolute; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); min-width: 174px; border-radius: 30px 30px 0 0; background: #687e80; padding: 9px 22px 7px; color: #fff; text-align: center; white-space: nowrap; }
.olin-rates-json__card-title { display: flex; justify-content: center; align-items: center; min-height: 57px; background: var(--rates-ink); border-radius: 40px 40px 0 0; padding: 0.6rem 0.8rem; color: #fff; text-align: center; }
.olin-rates-json__card-title strong, .olin-rates-json__card-title b { font-weight: 700; }
.olin-rates-json__card-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 16px 14px 18px; }
.olin-rates-json__features { display: flex; flex-direction: column; gap: 9px; min-height: 104px; padding: 0 2px !important; }
/* Keep icons centred on the first text line, preserving single-line alignment. */
.olin-rates-json__features li { display: flex; align-items: flex-start; gap: 7px; }
.olin-rates-json__feature-icon { display: flex; flex: 0 0 25px; width: 25px; height: max(22px, 1lh); align-items: center; justify-content: center; }
.olin-rates-json__features li > span:last-child { padding-top: max(0px, calc((22px - 1lh) / 2)); }
.olin-rates-json__router { display: block; position: relative; width: 24.062px; height: 18.084px; }
.olin-rates-json__router img:nth-child(1) { position: absolute; top: 0; left: 4.09px; }
.olin-rates-json__router img:nth-child(2) { position: absolute; top: 4.17px; left: 7.21px; }
.olin-rates-json__router img:nth-child(3) { position: absolute; top: 1.306px; left: 7.284px; transform: rotate(90deg); }
.olin-rates-json__router img:nth-child(4) { position: absolute; top: 11.24px; left: 3.12px; transform: rotate(90deg); }
.olin-rates-json__esim-feature { transform: scale(.56); }
.olin-rates-json__phone-feature { width: 19px; height: 19px; }
.olin-rates-json__prices { display: flex; align-items: flex-start; justify-content: center; position: relative; margin-top: auto; padding-top: 8px; min-height: 93px; }
.olin-rates-json__price { display: flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap; }
.olin-rates-json__price > span:first-child { font-size: 4rem; line-height: 1; letter-spacing: -0.05em; font-weight: 800; }
.olin-rates-json__track--wide .olin-rates-json__price > span:first-child { font-size: 4.4rem; line-height: 0.9204545; }
.olin-rates-json__period { font-size: 18px; font-weight: 800; line-height: 20px; text-transform: uppercase; }
.olin-rates-json__reference { position: absolute; right: 3px; top: 0; display: flex; flex-direction: column; text-align: center; opacity: .5; font-weight: 800; }
.olin-rates-json__reference del { font-size: 30px; line-height: 32px; letter-spacing: -1.5px; text-decoration-thickness: 2px; }
.olin-rates-json__reference span { font-size: 10px; line-height: 10px; text-transform: uppercase; }
.olin-rates-json__no-commitment { display: inline-flex; align-items: center; align-self: center; gap: 5px; min-height: 24px; margin: 4px 0 0; padding: 4px 10px; border: 1px solid rgba(3, 40, 44, .2); border-radius: 99px; background: rgba(255, 255, 255, .35); color: var(--rates-ink); font-weight: 600; line-height: 1.3; text-align: center; }
.olin-rates-json__no-commitment svg { flex: 0 0 12px; }
body.home .olin-rates-json__no-commitment { margin-top: .5rem; }
.olin-rates-json__choose { margin-top: 12px; width: 100%; min-height: 37px; padding: 8px 16px; border: 0; border-radius: 100px; color: var(--card-color); background: var(--rates-ink); transition: background-color .2s, color .2s; }
.olin-rates-json__choose:hover { background: var(--color-white); color: var(--color-main); }
.olin-rates-json__wifi7 { position: absolute; top: 5px; right: 9px; width: 35px; height: 35px; transform: rotate(15deg); }
.olin-rates-json__wifi7 img:first-child { position: absolute; top: 0; left: 0; }
.olin-rates-json__wifi7 img:nth-child(2) { position: absolute; top: 4px; left: 6px; }
.olin-rates-json__wifi7 > span { position: absolute; top: 12px; left: 1px; width: 33px; color: #004750; font-size: 11px; line-height: 13px; font-weight: 800; letter-spacing: -.4px; text-align: center; }
.olin-rates-json__navigation { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 10px; }
.olin-rates-json__arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.olin-rates-json__arrow img { width: 1.25rem; height: auto; }
.olin-rates-json__arrow:focus-visible { opacity: 1; }
.olin-rates-json__arrow:disabled { opacity: .1; cursor: default; }
.olin-rates-json__below { margin-top: 30px; }
.olin-rates-json__benefits-title { margin-bottom: 11px !important; color: #687e80; text-align: center; }
.olin-rates-json__benefit-list { display: flex; align-items: center; justify-content: center; }
.olin-rates-json__benefit { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 40px; border-right: 1px solid #cdd7d8; color: #46c5cf; }
.olin-rates-json__benefit:last-child { border-right: 0; }
.olin-rates-json__benefit--symmetric, .olin-rates-json__benefit--wifi6, .olin-rates-json__benefit--installation { color: #9ebd5a; }
.olin-rates-json__benefit-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 40px; }
.olin-rates-json__symmetric { display: flex; align-items: center; width: 52px; }
.olin-rates-json__symmetric img:last-child { transform: rotate(180deg); }
.olin-rates-json__benefit-router { position: relative; display: block; width: 44px; height: 35px; }
.olin-rates-json__benefit-router img:first-child { position: absolute; left: 7px; top: 0; }
.olin-rates-json__benefit-router img:last-child { position: absolute; left: 13px; top: 2px; transform: rotate(90deg); }
.olin-rates-json__5g { font-size: 36px; font-weight: 600; line-height: 43px; letter-spacing: -1.44px; }
.olin-rates-json__extra { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: fit-content; margin: 26px auto 0; color: var(--rates-ink); text-align: center; }
.olin-rates-json__extra > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.olin-rates-json__extra-button { margin-left: 8px; font-weight: 600; }
.olin-rates-json__plus { display: block; position: relative; width: 21px; height: 20px; }
.olin-rates-json__plus img:last-child { position: absolute; left: 7.5px; top: 7.15px; }
.olin-rates-json__configurator { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; margin-top: 30px; padding: 10px 20px 10px 25px; border-radius: 100px; background: #355356; color: #fff; }
.olin-rates-json__services { display: flex; align-items: center; justify-content: center; margin-right: auto; margin-left: auto; }
.olin-rates-json__services > span { display: flex; align-items: center; justify-content: center; min-height: 50px; min-width: 80px; border-left: 1px solid #8ba1a4; }
.olin-rates-json__services > span:last-child { border-right: 1px solid #8ba1a4; }
.olin-rates-json__start { display: flex; align-items: center; justify-content: center; flex: 0 0 215px; min-height: 37px; padding: 7px 20px; border-radius: 100px; background: var(--rates-lime); color: var(--rates-ink); transition: background-color .2s; }
.olin-rates-json__start:hover { background: #fff; }
.olin-rates-json__banners { display: grid; grid-template-columns: repeat(3, minmax(0, 353px)); justify-content: center; gap: 30px; margin-top: 30px; }
.olin-rates-json__banners--1 { grid-template-columns: minmax(0, 353px); }
.olin-rates-json__banners--2, .olin-rates-json__banners--4 { grid-template-columns: repeat(2, minmax(0, 353px)); }
.olin-rates-json__banner { --banner-tint: #00edff; --banner-bg: #80f6ff; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 180px; padding: 16px 14px 15px; border-radius: 30px; background: var(--banner-bg); color: var(--rates-ink); }
.olin-rates-json__banner--pink { --banner-tint: #f800ff; --banner-bg: #fc80ff; }
.olin-rates-json__banner--green, .olin-rates-json__banner--lime { --banner-tint: #afff00; --banner-bg: #d7ff80; }
.olin-rates-json__banner--orange { --banner-tint: #ff6800; --banner-bg: #ffb380; }
.olin-rates-json__banner-text { padding: 0 6px; }
.olin-rates-json__banner-button { display: flex; justify-content: center; align-items: center; min-height: 37px; padding: 7px 16px; border-radius: 100px; color: var(--banner-tint); background: var(--rates-ink); transition: background-color .2s, color .2s; }
.olin-rates-json__banner-button:hover { background: var(--color-white); color: var(--color-main); }
@media (max-width: 1100px) {
	.olin-rates-json__track { --rates-slide-width: calc((100% - 60px) / 3.5); }
	.olin-rates-json__benefit { gap: 5px; }
	.olin-rates-json__services > span { min-width: 60px; }
	.olin-rates-json__configurator { gap: 14px; }
	.olin-rates-json__start { flex-basis: 165px; }
}
@media (max-width: 800px) {
	.olin-rates-json__container { width: calc(100% - 40px); }
	.olin-rates-json__panel { --rates-carousel-gutter: 20px; --rates-carousel-edge: 20px; }
	.olin-rates-json__tabs { justify-content: safe center; overflow-x: auto; gap: 0; scrollbar-width: none; }
	.olin-rates-json__tab { flex: 0 0 auto; padding-right: 20px; padding-left: 20px; }
	.olin-rates-json__track, .olin-rates-json__track.olin-rates-json__track--wide { --rates-slide-width: calc((100% - 30px) / 2.2); }
	.olin-rates-json__track--wide { justify-content: flex-start; }
	.olin-rates-json__benefit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
	.olin-rates-json__benefit:nth-child(3n) { border-right: 0; }
	.olin-rates-json__configurator { flex-wrap: wrap; border-radius: 30px; padding: 20px; gap: 16px; }
	.olin-rates-json__configurator-title { width: 100%; text-align: center; }
	.olin-rates-json__services { margin-left: 0; }
	.olin-rates-json__services > span { min-width: 55px; }
	.olin-rates-json__start { flex-basis: 150px; margin-left: auto; }
	.olin-rates-json__banners { gap: 16px; }
}
@media (max-width: 560px) {
	.olin-rates-json { margin-top: 30px; margin-bottom: 36px; }
	.olin-rates-json__container { width: calc(100% - 32px); }
	.olin-rates-json__panel { --rates-carousel-gutter: 16px; --rates-carousel-edge: 16px; }
	.olin-rates-json__heading { margin-bottom: 24px; }
	.olin-rates-json__tab { padding-right: .7rem; padding-left: .7rem; }
	.olin-rates-json__panels { margin-top: 20px; }
	.olin-rates-json__track { column-gap: 16px; padding-right: 26px !important; }
	.olin-rates-json__track, .olin-rates-json__track.olin-rates-json__track--wide { --rates-slide-width: min(300px, calc(100% - 36px)); }
	.olin-rates-json__price > span:first-child, .olin-rates-json__track--wide .olin-rates-json__price > span:first-child { font-size: 5rem; line-height: 1; }
	.olin-rates-json__benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
	.olin-rates-json__benefit { justify-content: flex-start; padding-left: 14px; }
	.olin-rates-json__benefit:nth-child(3n) { border-right: 1px solid #cdd7d8; }
	.olin-rates-json__benefit:nth-child(2n) { border-right: 0; }
	.olin-rates-json__configurator { gap: 14px; }
	.olin-rates-json__services { margin: 0 auto; }
	.olin-rates-json__services > span { min-width: 64px; }
	.olin-rates-json__start { flex-basis: 100%; width: 100%; }
	.olin-rates-json__banners { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
	.olin-rates-json__banner { min-height: 170px; }
	.olin-rates-json__banner-text { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
	.olin-rates-json__viewport { scroll-behavior: auto; }
	.olin-rates-json * { transition: none !important; }
}
/* Audited rate contact stays separate from a page's campaign/contact form. */
.olin-rates-contact[hidden] { display: none !important; }
.olin-rates-contact {
	position: fixed;
	inset: 0;
	z-index: 1002;
	overflow-y: auto;
	background: rgba(118, 138, 140, .9);
}
.olin-rates-contact .c-contact__content {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: min(27rem, calc(100% - 2rem));
	max-width: none;
	margin: max(24px, 6vh) auto;
}
.olin-rates-contact [data-olin-rates-contact-close] {
	border: 0;
	padding: .4rem;
	background: transparent;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
}
body.is-olin-rates-contact-open { overflow: hidden; }
.olin-rates-json .olin-rates-json__disclaimer {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rates-ink);
}