/* HiperTel: blue and green sampled from the original color logo. */
:root {
  --brand-blue: #2d71b2;
  --brand-blue-deep: #123f7a;
  --brand-green: #50d217;
  --brand-green-dark: #247a25;
  --navy: var(--brand-blue-deep);
  --green: var(--brand-green);
  --ink: #193f6b;
  --muted: #516981;
  --paper: #f8fbff;
  --line: #d6e3f0;
}
header { background: #fffffffa; border-bottom-color: #d6e3f0; }
.utility { background: var(--brand-blue-deep); color: #e6f2ff; }
nav a:hover, .club a:hover { color: var(--brand-green-dark); }
.nav-cta, .dark { background: var(--brand-blue-deep); }
.nav-cta:hover, .dark:hover { background: #2265a6; }
.green { color: var(--brand-blue-deep); }
.green:hover { background: #71e33b; }
.outline { color: var(--brand-blue-deep); border-color: #97b9da; }
.outline:hover { background: #edf5ff; }
.hero { background: #1c5898; }
.hero h1 span, .coverage h2 span { color: #78ee3d; }
.hero-copy>p, .hero-bottom, .light { color: #e4f1ff; }
.hero-index { color: #d1e7ff; }
.hero-index a { border-color: #8eb8e0; }
.hero-visual { background: #dcefff; }
.orbit { border: 2px solid var(--brand-green); }
.connection-badge { background: var(--brand-blue-deep); }
.visual-caption { color: var(--brand-blue-deep); box-shadow: 0 8px 25px #123f7a26; }
.benefits-strip { background: #ecf9e5; border-bottom-color: #cce9ba; }
.benefits-strip b { color: var(--brand-green-dark); }
.eyebrow { color: var(--brand-blue); }
.hero .eyebrow, .coverage .eyebrow { color: #e4f1ff; }
h2 span { color: var(--brand-blue); }
.plan { border-color: #cbdff0; border-top: 4px solid var(--brand-blue); }
.plan h3, .plan .price { color: var(--brand-blue-deep); }
.plan.featured { background: #eaf9e1; border-color: #b5e397; border-top-color: var(--brand-green); }
.plan.featured .pill { background: var(--brand-blue-deep); }
.plan>p, .plan .plan-app-note { color: #48617a; }
.plan-included, .plan-apps { border-top-color: #b7cede80; }
.plan-selectors button { border-color: #b5cde5; }
.plan-selectors button[aria-pressed="true"] { background: var(--brand-blue); border-color: var(--brand-blue); }
.carousel-buttons button { color: var(--brand-blue); border-color: #97b9da; }
.coverage { background: #2366a3; }
.coverage p { color: #e1efff; }
.location-tags span { border-color: #99c1e8; }
#coverage-form { background: var(--brand-blue-deep); border-color: #74a9d7; }
#coverage-form>small { color: #c5dfff; }
.service-list>div { border-color: var(--line); }
.service-list>div>span:first-child { color: var(--brand-blue); }
.service-list>div>span:last-child { color: var(--brand-green-dark); }
.about { background: #edf5ff; }
.about-art { background: #e4f4df; }
.about-art>div { background: var(--brand-blue); }
.about p { color: #48617a; }
.club { border-top-color: #bdd2e7; }
.club>span { color: var(--brand-green-dark); }
.club a { color: var(--brand-blue-deep); }
.faq details { border-bottom-color: var(--line); }
.faq summary span, .support-links>a>span:last-child { color: var(--brand-blue); }
.closing { background: var(--brand-green); }
.closing .eyebrow { color: var(--brand-blue-deep); }
footer { background: var(--brand-blue-deep); color: #dcecff; }
.footer-bottom { border-top-color: #4a72a1; color: #bdd7f3; }
.floating-chat { background: var(--brand-green); color: var(--brand-blue-deep); box-shadow: 0 6px 25px #123f7a33; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline-color: var(--brand-blue); }
.hero a:focus-visible, .coverage a:focus-visible, .coverage button:focus-visible, footer a:focus-visible { outline-color: #78ee3d; }

/* Keep the completed mascot visible from head to shoes. */
.hero-visual>img.hero-mascot { object-position: right bottom; padding: 15px 24px 10px; }
.hero-visual .visual-caption { top: 25px; bottom: auto; left: 20px; max-width: 180px; padding: 12px; gap: 9px; }
@media(max-width:760px) { .hero-visual .visual-caption { top: 25px; left: 12px; max-width: 125px; font-size: 9px; padding: 10px; } .hero-visual .visual-caption strong { font-size: 11px; } .hero-visual .play-icon { display: none; } .hero-visual .connection-badge { top: auto; bottom: 20px; left: 12px; right: auto; font-size: 8px; padding: 8px; } .hero-visual>img.hero-mascot { padding: 15px 8px 10px; } }

.hero-visual .connection-badge { top: auto; bottom: 25px; left: 20px; right: auto; }

/* More of the logo green throughout the plans section. */
.plans { background: #eff9e9; }
.plans .eyebrow, .plans h2 span { color: var(--brand-green-dark); }
.plans .plan { border-color: #c7e2b8; border-top-color: var(--brand-green); }
.plans .plan.featured { background: #dcf5cb; border-color: #91d86e; border-top-color: var(--brand-green); }
.plans .plan.featured .pill { background: var(--brand-green); color: var(--brand-blue-deep); }
.plans .plan-included, .plans .plan-apps { border-top-color: #b9d5aa; }
.plans .plan h4 { color: var(--brand-green-dark); }
.plans .plan .button { background: var(--brand-green); color: var(--brand-blue-deep); border: 1px solid transparent; }
.plans .plan .button:hover { background: #71e33b; }
.plans .plan-selectors button { background: #fff; border-color: #b3d49f; }
.plans .plan-selectors button[aria-pressed="true"] { background: var(--brand-green); border-color: var(--brand-green); color: var(--brand-blue-deep); font-weight: 700; }
.plans .carousel-buttons button { border-color: #91c477; background: #fafff6; }
.plans .carousel-buttons button:not(:disabled):hover { background: #dcf5cb; }