/* ============================================
   GTS Connect - Main Stylesheet
   Bootstrap 5.3.8 base | replicated from gtsfleet.com design system
   ============================================ */

/* ----- CSS Variables ----- */
:root {
  --gts-primary: #6f0f10;
  --gts-primary-dark: #5a0c0d;
  --gts-primary-light: #8b1315;
  --gts-text: #231f20;
  --gts-text-light: #555555;
  --gts-bg-light: #f5f7fa;
  --gts-bg-white: #ffffff;
  --gts-border: #e0e0e0;
  --gts-radius: 12px;
  --gts-radius-sm: 8px;
  --gts-accent: #bb0607;
  --gts-gold: #be912d;
  --gts-shadow: 0 2px 16px rgba(0,0,0,0.08);
  --gts-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ----- Base ----- */
/* Offset anchor jumps for the sticky header (JS keeps this exact at runtime) */
html {
  scroll-padding-top: 90px;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--gts-text);
  line-height: 1.6;
}
/* Standard content text size: the larger, more common body size across all content.
   Scoped to <main> so the header and footer keep their own sizes. Headings, labels,
   buttons and fine print override via their own explicit sizes. */
main {
  font-size: 1.2rem;
}
/* Catch-all: no muted/lighter color and no smaller font for body text inside content.
   Header and footer live outside <main> and are unaffected. */
main .text-muted {
  color: var(--gts-text) !important;
}
main .small,
main small {
  font-size: 1.2rem !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--gts-text);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

@media (max-width: 767.98px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}

a {
  color: var(--gts-primary);
  text-decoration: none;
}
a:hover {
  color: var(--gts-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* ----- Placeholder Images ----- */
.placeholder-img {
  background-color: #e9ecef;
  border-radius: var(--gts-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #adb5bd;
  font-size: 3rem;
  aspect-ratio: 3 / 2;
  width: 100%;
}

.placeholder-img-sm {
  min-height: 120px;
  font-size: 2rem;
  aspect-ratio: auto;
}

/* ----- Focus Styles (Accessibility) ----- */
*:focus-visible {
  outline: 3px solid #ffdd00 !important;
  outline-offset: 2px !important;
}

a:focus-visible:not(:has(img)),
button:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible {
  background: #fff !important;
  color: #000 !important;
  box-shadow: inset 0 0 0 1px #000 !important;
  text-shadow: none !important;
}

/* ----- Skip Link ----- */
.visually-hidden-focusable:focus {
  z-index: 9999;
}

/* ----- Buttons ----- */
.btn-gts {
  background-color: var(--gts-primary);
  color: #fff;
  border: 2px solid var(--gts-primary);
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.btn-gts:hover {
  background-color: var(--gts-accent);
  border-color: var(--gts-accent);
  color: #fff;
}
.btn-gts:focus-visible {
  background-color: var(--gts-primary-dark);
  border-color: var(--gts-primary-dark);
  color: #fff;
}

.btn-gts-outline {
  background-color: transparent;
  color: var(--gts-primary);
  border: 2px solid var(--gts-primary);
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.btn-gts-outline:hover,
.btn-gts-outline:focus-visible {
  background-color: var(--gts-primary);
  color: #fff;
}

.btn-gts-white {
  background-color: #fff;
  color: var(--gts-primary);
  border: 2px solid #fff;
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.btn-gts-white:hover,
.btn-gts-white:focus-visible {
  background-color: #f0f0f0;
  color: var(--gts-primary-dark);
}

/* ----- Navigation ----- */
/* ----- Utility Bar ----- */
.utility-bar {
  background: #fff;
  color: var(--gts-text);
  font-size: 0.8rem;
  padding: 0.5rem 0 0.2rem;
  line-height: 1.3;
}
.utility-bar .container-fluid {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.utility-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.utility-bordered {
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid #767676;
}
.utility-phone a {
  color: var(--gts-text);
  text-decoration: none;
}
.utility-phone a:hover {
  color: var(--gts-primary);
}
.utility-login {
  color: var(--gts-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}
.utility-login:hover {
  color: var(--gts-primary);
}
@media (max-width: 767.98px) {
  .utility-bar .container-fluid {
    justify-content: center;
  }
  .utility-bar {
    padding-bottom: 0.5rem;
  }
}
@media (max-width: 575.98px) {
  .utility-bar {
    font-size: 0.72rem;
  }
}

header.sticky-top {
  background: #fff;
  will-change: transform;
  transition: box-shadow 0.2s ease;
}

header.sticky-top.scrolled {
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.1);
}

.navbar {
  padding: 0.5rem 0;
  background-color: #fff;
}

.navbar-brand img {
  height: 69px;
  width: auto;
  margin-top: -20px;
}
@media (max-width: 767.98px) {
  .navbar-brand img {
    margin-top: -10px;
  }
}
@media (max-width: 991.98px) {
  .navbar-collapse {
    padding-bottom: 1.25rem;
  }
}

.navbar .nav-link {
  color: var(--gts-text);
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  margin: 0 1rem;
  font-size: 0.95rem;
  position: relative;
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .nav-link {
    margin: 0 0.5rem;
  }
}
.navbar .nav-link:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.25rem;
  right: 0.25rem;
  height: 2px;
  background: var(--gts-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.navbar .nav-link:not(.dropdown-toggle):hover::after,
.navbar .nav-link:not(.dropdown-toggle).active::after {
  transform: scaleX(1);
}
.navbar .dropdown-toggle::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.25rem;
  right: 0.25rem;
  height: 2px;
  background: var(--gts-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.navbar .dropdown-toggle:hover::before,
.navbar .dropdown-toggle.active::before {
  transform: scaleX(1);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--gts-primary);
}

.navbar .nav-item:last-child {
  margin-left: 0.75rem;
}

.navbar .btn-gts,
.navbar .btn-gts-dark {
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

.dropdown-menu {
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius-sm);
  box-shadow: var(--gts-shadow);
  padding: 0.5rem 0;
}

.dropdown-item {
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
}
.dropdown-item:hover {
  background-color: var(--gts-bg-light);
  color: var(--gts-primary);
}

/* ----- Sections ----- */
.section {
  padding: 5rem 0;
}
/* Tighter band for the Why GTS Connect intro only */
#iot-connectivity {
  padding: 3.5rem 0;
}

.section-light {
  background-color: var(--gts-bg-light);
}

.section-dark {
  background-color: var(--gts-text);
  color: #fff;
}
.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-primary {
  background-color: var(--gts-primary);
  color: #fff;
}
.section-primary h2,
.section-primary h3 {
  color: #fff;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gts-primary);
  margin-bottom: 0.75rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url('../img/star.svg') no-repeat center / contain;
  flex-shrink: 0;
}

.section-dark .section-label,
.section-primary .section-label {
  color: rgba(255,255,255,0.7);
}
/* Reversed (burgundy/dark) sections: white star icon, white subtitle + card copy */
.section-primary .section-label::before,
.section-dark .section-label::before {
  filter: brightness(0) invert(1);
}
.section-primary .section-subtitle,
.section-dark .section-subtitle {
  color: rgba(255,255,255,0.85);
}
.section-primary .feature-card p,
.section-dark .feature-card p {
  color: rgba(255,255,255,0.9);
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--gts-text);
  max-width: 760px;
  line-height: 1.7;
}

/* ----- Hero ----- */
.hero {
  padding: 4rem 0 2.5rem;
  background-color: #fff;
}

.hero h1 {
  margin-bottom: 1.5rem;
}

.hero .lead {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--gts-text);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.hero-image {
  border-radius: var(--gts-radius);
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  display: block;
}

.hero-globe {
  display: inline-block;
  width: 100%;
  max-width: 460px;
}

.hero-globe dotlottie-player {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .hero-globe {
    max-width: 300px;
    margin-top: 0.5rem;
  }
}

.hero-video {
  border-radius: var(--gts-radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.video-play-btn i {
  color: #fff;
  font-size: 2rem;
  margin-left: 4px;
}

.video-facade:hover .video-play-btn {
  background: var(--gts-primary);
  transform: translate(-50%, -50%) scale(1.1);
}

/* ----- Hardware Partner Bar ----- */
.partner-bar {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--gts-accent);
  text-align: center;
}

.partner-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gts-text);
  margin-bottom: 1.5rem;
}

.partner-logos {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 4rem);
}

.partner-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #adb5bd;
  letter-spacing: 0.02em;
}

.partner-logo {
  height: 80px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.partner-logo[alt="Geometris"] {
  position: relative;
  top: -10px;
}

.partner-logo[alt="ATrack"],
.partner-logo[alt="Queclink"] {
  height: 45px;
}

@media (max-width: 1299.98px) {
  .partner-logo {
    height: 60px;
  }
  .partner-logo[alt="ATrack"],
  .partner-logo[alt="Queclink"] {
    height: 35px;
  }
}

@media (max-width: 991.98px) {
  .partner-logos {
    flex-wrap: wrap;
    justify-content: center;
  }
  .partner-logo {
    height: 55px;
  }
  .partner-logo[alt="ATrack"],
  .partner-logo[alt="Queclink"] {
    height: 32px;
  }
}

@media (max-width: 575.98px) {
  .partner-logo {
    height: 45px;
  }
  .partner-logo[alt="ATrack"],
  .partner-logo[alt="Queclink"] {
    height: 28px;
  }
}

/* ----- Feature Cards ----- */
.feature-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--gts-radius);
  transition: box-shadow 0.2s ease;
  height: 100%;
}

/* Wider support cards: extra side padding narrows the copy so lines don't orphan a single word */
.feature-card.support-card {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}
@media (max-width: 575.98px) {
  .feature-card.support-card {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

.feature-card:hover {
  box-shadow: var(--gts-shadow);
}

.feature-card .feature-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.75rem;
  color: var(--gts-primary);
  padding: 0;
}

.feature-card .feature-icon img {
  display: block;
  width: 56px;
  height: auto;
  max-height: 56px;
}

/* Offset GTS road icon so the circle portion is visually centered */
.feature-card .feature-icon img[src*="rl-gts-icon"] {
  position: relative;
  left: 4px;
}

.feature-card h2,
.feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.feature-card p {
  font-size: 1.2rem;
  color: var(--gts-text);
  margin-bottom: 0;
}

/* ----- Content Blocks (alternating image/text) ----- */
.content-block {
  /* No extra vertical padding; the parent .section already provides 5rem,
     so two-column content-block sections match the other sections. */
  padding: 0;
}

/* Full-bleed 1px divider above the Who We Are section */
#about {
  border-top: 1px solid #e6e6e6;
}

.content-block img {
  border-radius: var(--gts-radius);
  display: block;
  max-width: 85%;
  height: auto;
  margin: 0 auto;
}

/* Image frames */
.img-frame,
.img-frame-white {
  border-radius: var(--gts-radius);
}

.img-frame img,
.img-frame-white img {
  display: block;
  width: 100%;
  border-radius: var(--gts-radius-sm);
}


.content-block .img-frame {
  margin-top: 2.4rem;
}

@media (max-width: 991.98px) {
  .content-block .img-frame {
    margin-top: 0;
  }
}

.content-block .placeholder-img {
  box-shadow: none;
}

/* ----- Service page image frames ----- */
.services-grid .img-frame img {
  max-width: 100%;
}

.content-block h2 {
  margin-bottom: 1.25rem;
}

.content-block p {
  color: var(--gts-text);
  font-size: 1.2rem;
  line-height: 1.7;
}

.feature-list {
  list-style: none;
  padding: 0;
}
/* Standard icon list: a fixed-width inline-block icon (baseline-aligns to the first
   line automatically, whatever the row spacing) + negative text-indent for a clean
   hanging indent on wrapped lines. Inline text/bold flow normally (spaces kept). */
.feature-list li {
  padding: 0.5rem 0 0.5rem 1.7rem;
  text-indent: -1.7rem;
}
.feature-list li i {
  margin-right: 0.2rem;
  color: var(--gts-primary);
  text-indent: 0;   /* don't inherit the list's negative indent */
}
/* Bridge-plan list: keep bullets left-aligned but nudge the block toward center */
.feature-list.bridge-plan-list {
  padding-left: 3.5rem;
}
@media (max-width: 575.98px) {
  .feature-list.bridge-plan-list { padding-left: 1.5rem; }
}
/* Billing pair under the rate table: tighter vertical spacing, but KEEP the left
   padding the absolutely-positioned icon needs (shorthand would reset it to 0). */
.feature-list.billing-list li {
  padding: 0.2rem 0 0.2rem 1.7rem;
}

/* Rate table: pull the right-aligned figures in from the edge so they read more centered under each header */
.rate-table th.text-end { padding-right: 1rem; }
.rate-table td.text-end { padding-right: 2.25rem; }

/* FAQ accordion: no borders/ring; open item is solid burgundy with white text + white chevron */
.accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: var(--gts-primary);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* Open FAQ panel: full-width burgundy rule at the bottom so the answer's end is clear */
.accordion-collapse.show {
  border-bottom: 1px solid var(--gts-primary);
}
/* No bottom rule on the last FAQ item (nothing follows it) */
.accordion-item:last-child .accordion-collapse.show {
  border-bottom: 0;
}
/* FAQ text matches content body size (Bootstrap sets accordion-button smaller) */
.accordion-button,
.accordion-body {
  font-size: 1.2rem;
}

/* Wufoo embed: fit the card content box exactly so fields and Wufoo's full-width
   focus highlight don't overflow past the padding or get clipped at the edge. */
/* Wufoo static iframe: full width of its container so the form reflows to fit (no clipping) */
.wufoo-iframe,
iframe[src*="wufoo"] {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

/* Featured-service SIM image stack (left column): centered images with captions */
.sim-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* align the block to the column (container) left edge */
  gap: 1.5rem;
}
.sim-stack__item {
  margin: 0;
  width: 200px;              /* fixed figure width so the images and captions line up */
  max-width: 100%;
  text-align: center;
}
.sim-stack__item picture {
  display: block;          /* picture is inline by default; make it block so no line-box gap is added below the card */
}
.sim-stack__item img {
  height: auto;
  display: block;          /* kill the inline-image baseline gap below the card */
  margin: 0 auto;
}
/* Decreasing sizes so the form-factor differences stay apparent */
.sim-stack__item--lg img { width: 200px; }
.sim-stack__item--md img { width: 150px; }
.sim-stack__item--sm img { width: 115px; }
/* Artboards have consistent minimal bottom whitespace, so ONE uniform margin
   gives an identical caption gap on all three (no per-size values). */
.sim-stack__item figcaption {
  margin-top: 0.25rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--gts-text);
}

/* Contact page: icon-led contact details */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  line-height: 1.5;
}
/* Horizontal contact details when shown full-width below the form */
@media (min-width: 768px) {
  .contact-list--row {
    display: flex;
    gap: 2.5rem;
  }
  .contact-list--row li {
    flex: 1;
  }
}
.contact-list li i {
  color: var(--gts-primary);
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.content-block .feature-list {
  margin: 1.5rem 0 0;
}

.content-block .feature-list li {
  padding: 0.5rem 0 0.5rem 1.7rem;
  font-size: 1.2rem;
  color: var(--gts-text);
}

.content-block .feature-list li i {
  color: var(--gts-primary);
  margin-right: 0.2rem;
}

/* ----- Product Cards ----- */
.product-card {
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  padding: 2rem;
  text-align: center;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: var(--gts-shadow-lg);
  border-color: var(--gts-primary);
  transform: translateY(-2px);
}

.product-card img,
.product-card .placeholder-img {
  height: auto;
  width: auto;
  margin: 0 auto 1.5rem;
  object-fit: contain;
}

.product-card > img {
  height: 180px;
  width: 100%;
  object-fit: contain;
}

.product-logo {
  margin-bottom: 1.25rem;
}

.product-logo img {
  width: 48px;
  height: 48px;
}

.product-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.product-card p {
  font-size: 0.9rem;
  color: var(--gts-text);
}

.product-card .badge-powered {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--gts-text);
  border: 1px solid var(--gts-border);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  margin-top: auto;
}

.product-card .badge-spacer {
  visibility: hidden;
}

/* ----- Stats Bar (Social Proof) ----- */
.stats-bar {
  background-color: var(--gts-primary);
  color: #fff;
  padding: 3.5rem 0;
}

.stats-bar-number {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stats-bar-label {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
}

/* ----- Stats (general) ----- */
.stat-item {
  text-align: center;
  padding: 1.5rem;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--gts-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--gts-text);
}

/* ----- Device Categories ----- */
.device-card {
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.device-card .device-icon {
  margin-bottom: 1.25rem;
}
.device-card .device-icon img {
  max-height: 120px;
  width: auto;
}
.device-card .device-icon i {
  font-size: 2.5rem;
  color: var(--gts-primary);
}

.device-card h3 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.device-card p {
  font-size: 0.95rem;
  color: var(--gts-text);
}

.device-card .manufacturers {
  font-size: 0.85rem;
  color: var(--gts-text);
  border-top: 1px solid var(--gts-border);
  padding-top: 1rem;
  margin-top: auto;
}

/* ----- CTA Banner ----- */
.cta-banner {
  background: linear-gradient(135deg, var(--gts-primary) 0%, var(--gts-accent) 100%);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}

.cta-banner h2 {
  color: #fff;
  margin-bottom: 1rem;
}

.cta-banner p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ----- No-Contract Section ----- */
.no-contract {
  background: linear-gradient(135deg, var(--gts-text) 0%, #3a3536 100%);
  color: #fff;
  padding: 5rem 0;
}

.no-contract h2 {
  color: #fff;
}

.no-contract .section-label {
  color: rgba(255,255,255,0.9);
}

.no-contract-text {
  max-width: 700px;
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
}

.no-contract-stat {
  color: #fff;
}

.no-contract-stat-label {
  color: rgba(255,255,255,0.9);
}

.no-contract .plan-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 1.5rem;
  margin: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ----- Footer ----- */
.site-footer {
  background-color: var(--gts-text);
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
}

.site-footer .footer-heading {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.site-footer a {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
}
.site-footer a:focus-visible {
  outline-color: #fff;
}

.site-footer .footer-brand img {
  height: 54px;
  margin-bottom: 1rem;
}

.site-footer .footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  margin-top: 3rem;
  font-size: 0.85rem;
}

/* Inconspicuous build-version stamp, lower-left of the copyright band (WCAG AA on dark footer) */
.site-footer .site-version {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 575.98px) {
  .site-footer .site-version {
    position: static;
    margin-top: 0.75rem;
  }
}

.site-footer .footer-bottom a {
  display: inline;
  font-size: inherit;
  padding: 0;
  margin: 0 0.15rem;
}

/* Contact column: keep phone/email links inline with their icons (not stacked) */
.site-footer .footer-contact a {
  display: inline;
  padding: 0;
}
.site-footer .footer-bottom .footer-bottom-link + .footer-bottom-link {
  margin-left: 0.25rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255,255,255,0.3);
}

/* ----- Inner Page Hero ----- */
.page-hero {
  background-color: var(--gts-bg-light);
  padding: 4rem 0 3rem;
  text-align: center;
}

.page-hero h1 {
  margin-bottom: 1rem;
}

.page-hero .lead {
  color: var(--gts-text);
  font-size: 1.15rem;
  max-width: 820px;
  margin: 0 auto;
}

/* "Powered by" badge in page heroes */
.badge-powered-hero {
  display: inline-block;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--gts-text);
  margin-top: 0.75rem;
}

/* ----- Section-Primary CTA text ----- */
.section-primary .cta-text {
  max-width: 640px;
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
}

/* ----- Outline button on dark/primary backgrounds ----- */
.btn-gts-outline-light {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.btn-gts-outline-light:hover,
.btn-gts-outline-light:focus-visible {
  background-color: #fff;
  color: var(--gts-primary);
}

/* ----- Device Card Feature List ----- */
.device-card .feature-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.device-card .feature-list li {
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--gts-text);
}

.device-card .feature-list li i {
  color: var(--gts-primary);
  margin-right: 0.5rem;
}

/* ----- Contact Info Cards ----- */
.contact-card {
  background: var(--gts-bg-light);
  border-radius: var(--gts-radius);
  padding: 2rem;
  margin-bottom: 2rem;
}

/* ----- Demo CTA Card ----- */
.demo-card {
  background: #fff;
  border-radius: var(--gts-radius);
  padding: 3rem;
  box-shadow: var(--gts-shadow);
  text-align: center;
}

.demo-card-icon {
  font-size: 3rem;
  color: var(--gts-primary);
  margin-bottom: 1.5rem;
}

/* ----- Pricing Plan Badge (light bg) ----- */
.plan-badge-light {
  display: inline-block;
  background: rgba(111,15,16,0.06);
  border: 1px solid rgba(111,15,16,0.15);
  color: var(--gts-primary);
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ----- Billing Tiers ----- */
.billing-tier {
  padding: 1rem 0;
}

.billing-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gts-primary);
  margin-top: 0.75rem;
  line-height: 1.2;
}

.billing-period {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gts-text);
}

.billing-annual {
  font-size: 0.85rem;
  color: var(--gts-text);
  margin-top: 0.25rem;
}

/* ----- Product Card Price ----- */
.product-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gts-primary);
  margin-bottom: 0.75rem;
}

.product-price + .product-price {
  margin-top: -0.5rem;
}

.product-price-period {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gts-text);
}

.product-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--gts-text);
  text-align: left;
}

.product-includes li {
  padding: 0.25rem 0 0.25rem 1.25rem;
  position: relative;
}

.product-includes li::before {
  content: "\f26a";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  color: var(--gts-primary);
  font-size: 0.75rem;
}

/* ----- Pricing Card Bottom (setup note + CTA aligned as unit) ----- */
.product-card-bottom {
  margin-top: auto;
}
.product-card-bottom .product-setup-note {
  margin-top: 0;
}

/* ----- Pricing Setup Note ----- */
.product-setup-note {
  font-size: 0.8rem;
  color: var(--gts-text);
  margin-top: auto;
  margin-bottom: 0.5rem;
}

/* ----- Pricing Product Card CTA ----- */
.product-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gts-border);
}

/* When a setup note exists, it gets margin-top:auto; CTA follows naturally */
.product-setup-note ~ .product-card-cta {
  margin-top: 0;
}

/* ----- Pricing Product Icon ----- */
.product-card-icon {
  font-size: 2.5rem;
  color: var(--gts-primary);
  margin-bottom: 1rem;
}

/* ----- Stat Card (light bg) ----- */
.stat-card {
  background: var(--gts-bg-light);
  border-radius: var(--gts-radius);
  padding: 2rem 1rem;
}

/* ----- Image Shadow Utility ----- */
.img-shadow {
  box-shadow: var(--gts-shadow-lg);
}

/* ----- Comparison Table (Customer Transition) ----- */
.comparison-table {
  border-radius: var(--gts-radius);
  overflow: hidden;
  box-shadow: var(--gts-shadow);
}

.comparison-table th {
  background-color: var(--gts-primary);
  color: #fff;
  font-weight: 600;
  padding: 1rem;
  font-size: 0.95rem;
}

.comparison-table td {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  vertical-align: middle;
}

.comparison-table .bi-check-circle-fill {
  color: #198754;
}

.comparison-table .bi-x-circle-fill {
  color: #dc3545;
}

/* ----- Timeline ----- */
.timeline-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2rem;
  border-left: 2px solid var(--gts-border);
}

.timeline-item:last-child {
  border-left-color: transparent;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--gts-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--gts-primary);
}

.timeline-item h3,
.timeline-item h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.timeline-item .timeline-date {
  font-size: 0.85rem;
  color: var(--gts-primary);
  font-weight: 600;
}

/* ----- 404 Error Page ----- */
.error-page {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.error-code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--gts-primary);
  line-height: 1;
  margin-bottom: 1rem;
}

.error-text {
  max-width: 500px;
  margin: 0 auto;
}

/* ----- Comparison Table Subtitle ----- */
.comparison-table .th-subtitle {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* ----- Info Card (bordered feature card) ----- */
.info-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  padding: 2rem;
  height: 100%;
}

.info-card .feature-icon {
  margin: 0;
}

.info-card p {
  color: var(--gts-text);
}

/* ----- Dark Section Cards (login/access) ----- */
.dark-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--gts-radius);
  padding: 2rem;
  height: 100%;
}

.dark-card-highlight {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

.dark-card h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.dark-card .dark-card-meta {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.dark-card .dark-card-text {
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.25rem;
}

.dark-card .btn-gts-outline-light {
  border-color: rgba(255,255,255,0.4);
}

.dark-card .btn-disabled {
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  opacity: 0.6;
  cursor: default;
}

/* ----- Dark Section Light Cards (light grey cards on dark bg) ----- */
.dark-card-light {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
}

.dark-card-light h3 {
  color: var(--gts-text);
}

.dark-card-light .dark-card-meta {
  color: var(--gts-text);
}

.dark-card-light .event-list li {
  color: var(--gts-text);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ----- Dark Section Subtitle / Footnotes ----- */
.section-dark .section-subtitle {
  color: rgba(255,255,255,0.7);
}

.dark-footnote {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}

.dark-callout {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}

/* ----- Utilities ----- */
.text-gts {
  color: var(--gts-primary);
}

.bg-gts {
  background-color: var(--gts-primary);
}

.rounded-gts {
  border-radius: var(--gts-radius);
}

.max-w-prose {
  max-width: 720px;
}

/* ----- Policy / Legal Pages ----- */
.policy-content h2 {
  font-size: 1.5rem;
}
.policy-content h2:not(:first-child) {
  margin-top: 2.5rem;
}
.policy-content h3 {
  font-size: 1.25rem;
}
@media (max-width: 767.98px) {
  .policy-content h2 {
    font-size: 1.25rem;
  }
  .policy-content h3 {
    font-size: 1.1rem;
  }
}

.policy-content a {
  text-decoration: underline;
}

/* WCAG 1.4.1 (link-in-text-block): content text links must be distinguishable
   beyond color alone. Underline inline links inside prose within content
   sections; exclude .btn so button-styled links keep their own treatment. */
.section p a:not(.btn),
.section li a:not(.btn),
.section blockquote a:not(.btn),
.section td a:not(.btn) {
  text-decoration: underline;
}

/* ----- Inclusion Badges (Add-On Services) ----- */
.badge-included {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #166534;
  background-color: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.5rem;
}

.badge-optional {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9a3412;
  background-color: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.5rem;
}

/* ----- Partner Feature Cards (Devices Page — no circle) ----- */
.partner-feature-card .feature-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.partner-feature-card .feature-icon img {
  width: auto;
  max-width: 200px;
  max-height: 72px;
}

/* ----- Event Scenario Cards (FleetCam) ----- */
.event-scenario-card {
  background: #fff;
  border-radius: var(--gts-radius);
  border: 1px solid var(--gts-border);
  padding: 1.5rem;
  height: 100%;
}

.event-scenario-card img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.event-scenario-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.event-scenario-card p {
  font-size: 0.9rem;
  color: var(--gts-text);
  margin-bottom: 0;
}

/* ----- Event List (FleetCam Dark Cards) ----- */
.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

.event-list li:last-child {
  border-bottom: none;
}

/* ----- Pricing Page Product Logos ----- */
.product-card .product-logo img {
  max-height: 45px;
  width: auto;
}

/* ----- Quote Form Placeholder ----- */
.quote-form-placeholder {
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius-sm);
  padding: 2rem;
}
.quote-form-placeholder .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.quote-form-placeholder .form-control,
.quote-form-placeholder .form-select,
.quote-form-placeholder .form-check-label,
.quote-form-placeholder .form-check-input ~ .form-check-label,
.quote-form-placeholder option {
  color: var(--gts-text);
  font-size: 0.875rem;
}
.quote-form-placeholder .form-control,
.quote-form-placeholder .form-select {
  border-radius: 4px;
}
.quote-form-placeholder .form-check-input {
  opacity: 1;
}
.fpo-notice {
  text-align: center;
  color: #856404;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.fpo-success {
  text-align: center;
  color: #0f5132;
  background: #d1e7dd;
  border: 1px solid #badbcc;
  border-radius: 4px;
  padding: 1.5rem;
  margin-top: 1rem;
}
.fpo-success i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.fpo-success p {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

/* ----- Password Reset Instructions Card ----- */
.password-reset-card {
  background: #fff;
  border: 2px solid var(--gts-primary);
  border-radius: var(--gts-radius);
  overflow: hidden;
  box-shadow: var(--gts-shadow);
}

.password-reset-header {
  background-color: var(--gts-primary);
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.password-reset-body {
  padding: 1.5rem 2rem 2rem;
}

.password-reset-steps {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.password-reset-steps li {
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--gts-text);
  line-height: 1.6;
}

.password-reset-steps li strong {
  color: var(--gts-text);
}

.password-reset-note {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #856404;
}

/* ----- Placeholder Price (bright red xxx) ----- */
.placeholder-price {
  color: #dc3545;
  font-weight: 800;
  font-size: 0.85rem;
}

/* ----- Subscription Value Props ----- */
.value-prop-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--gts-radius);
  padding: 2rem;
  height: 100%;
}

.value-prop-card h2 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.value-prop-subtitle {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.value-prop-icon {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0.75rem;
}

.value-prop-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.value-prop-list li {
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}

.value-prop-list li i {
  color: #198754;
  margin-right: 0.5rem;
}

.value-prop-note {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* ----- Pricing Static Text (replaces button) ----- */
.pricing-static-text {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gts-primary);
  padding: 0.75rem 0 0;
}

/* ----- Product Price Secondary (FleetCam monthly) ----- */
.product-price-secondary {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gts-primary);
  margin-bottom: 0.75rem;
}

/* ----- Product Price Add-on Line ----- */
.product-price-addon {
  font-size: 0.8rem;
  color: var(--gts-text);
  background: var(--gts-bg-light);
  border-radius: var(--gts-radius-sm);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  flex-grow: 0;
}

/* ----- Collateral Cards (Devices Page) ----- */
.collateral-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  padding: 1.5rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.collateral-card:hover {
  border-color: var(--gts-primary);
  text-decoration: none;
  color: inherit;
}

.collateral-logo {
  width: 56px;
  height: 56px;
  max-width: 56px;
  margin-bottom: 1rem;
  border-radius: 0;
}

.collateral-card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.badge-coming-soon {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
}

/* ----- Department Cards (Support Page) ----- */
.department-card {
  background: var(--gts-bg-light);
  border-radius: var(--gts-radius);
  padding: 1.5rem;
  text-align: center;
}

.department-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.department-card a {
  font-size: 0.9rem;
  color: var(--gts-primary);
  font-weight: 600;
}

/* ----- Utility Bar Support Link ----- */
.utility-link {
  color: var(--gts-text);
  text-decoration: none;
  font-size: 0.8rem;
}
.utility-link:hover {
  color: var(--gts-primary);
}

/* ----- Back to Top Button ----- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gts-primary);
  color: #ffffff;
  border-radius: var(--gts-radius-sm);
  font-size: 1.25rem;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1040;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.back-to-top:hover {
  background-color: var(--gts-accent);
  color: #ffffff;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   Platform Video Guides (support page)
   ============================================ */
.video-card {
  background: var(--gts-bg-white);
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  box-shadow: var(--gts-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover,
.video-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--gts-shadow-lg);
}
.video-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease, filter .3s ease;
}
.video-card__thumb:hover img,
.video-card__thumb:focus-visible img {
  transform: scale(1.04);
  filter: brightness(.85);
}
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--gts-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: background .2s ease, transform .2s ease;
  pointer-events: none;
}
.video-card__thumb:hover .video-card__play,
.video-card__thumb:focus-visible .video-card__play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
.video-card__thumb:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}
.video-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.video-card__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gts-primary);
  margin-bottom: .35rem;
}
.video-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--gts-text);
}
.video-card__desc {
  font-size: .95rem;
  color: var(--gts-text);
  margin: 0;
  line-height: 1.5;
}

/* Video modal (lightbox) */
#videoModal .modal-content {
  background: #000;
  border: 0;
  border-radius: var(--gts-radius);
  overflow: hidden;
}
#videoModal .modal-header {
  background: #111;
  color: #fff;
  border-bottom: 1px solid #222;
  padding: .75rem 1rem;
}
#videoModal .modal-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}
#videoModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
#videoModal .modal-body {
  padding: 0;
  background: #000;
}
#videoModal .ratio video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Full-width section divider */
.section-divider {
  border: 0;
  border-top: 1px solid var(--gts-border);
  margin: 0;
  height: 0;
}

/* ============================================
   GTS Connect additions (rebuild)
   ============================================ */

/* Bootstrap-Icon glyphs inside the round feature-icon badge */
.feature-card .feature-icon i {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gts-primary);
}
/* Optical centering: a few BI glyphs have their visual mass off the em-box center.
   Measured centroids (16-unit grid): cash-coin (8.51, 6.65) sits high/right;
   shield-lock (8.00, 7.24) sits high. Shift each so its mass lands on center. */
.feature-card .feature-icon i.bi-cash-coin { transform: translate(-0.032em, 0.084em); }
.feature-card .feature-icon i.bi-shield-lock { transform: translateY(0.048em); }
/* data-plan icons: calendar-check (8.02,6.74) sits high; bucket-fill (8.00,9.38) sits low */
.feature-card .feature-icon i.bi-calendar-check { transform: translateY(0.079em); }
.feature-card .feature-icon i.bi-bucket-fill { transform: translateY(-0.086em); }
/* industry icons: router-fill (7.96,9.01) and droplet-fill (7.90,9.38) sit low */
.feature-card .feature-icon i.bi-router-fill { transform: translateY(-0.063em); }
.feature-card .feature-icon i.bi-droplet-fill { transform: translateY(-0.086em); }

/* "Featured" button — Panoramic Power nav emphasis.
   Logo black (#231f20 = --gts-text) with white text: high contrast, on-brand.
   Identical sizing to .btn-gts so the two nav buttons match in height. */
.btn-gts-dark {
  background-color: var(--gts-text);
  color: #fff;
  border: 2px solid var(--gts-text);
  border-radius: var(--gts-radius-sm);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.btn-gts-dark:hover,
.btn-gts-dark:focus-visible {
  background-color: #3d3839;
  border-color: #3d3839;
  color: #fff;
}

/* Hero globe — star nodes are baked into the Lottie animation itself (see globe-animation.json) */

/* ============================================================
   v4 conversion / credibility components
   ============================================================ */

/* ----- Customer logo strip ----- */
.logo-strip {
  padding: 2.25rem 0;
  background-color: #fff;
  border-bottom: 1px solid var(--gts-border);
}
.logo-strip p {
  text-align: center;
  margin: 0;
}
.logo-strip p:first-child {
  font-size: 1.05rem;
  color: var(--gts-text);
  font-weight: 500;
}
.logo-strip .logo-strip__note {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #8a8a8a;
}

/* ----- How it works: numbered steps ----- */
.step-card {
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  padding: 2rem 1.75rem;
  height: 100%;
}
.step-number {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--gts-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.step-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.step-card p {
  font-size: 1.1rem;
  color: var(--gts-text);
  margin: 0;
}

/* ----- Service promise (dark risk-reversal band) ----- */
.service-promise {
  background: linear-gradient(135deg, var(--gts-text) 0%, #3a3536 100%);
  color: #fff;
  padding: 5rem 0;
}
.service-promise h2 { color: #fff; }
.service-promise .section-label { color: rgba(255,255,255,0.9); }
.service-promise .section-label::before { filter: brightness(0) invert(1); }
.service-promise .section-subtitle { color: rgba(255,255,255,0.9); }
.service-promise .stat-number { color: #fff; }
.service-promise .stat-label { color: rgba(255,255,255,0.8); }

/* ----- Testimonials ----- */
.testimonial-card {
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  padding: 2rem;
  height: 100%;
}
.testimonial-card .testimonial-quote {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--gts-text);
  margin-bottom: 1.25rem;
}
.testimonial-card .testimonial-author {
  font-weight: 700;
  color: var(--gts-text);
}
.testimonial-card .testimonial-role {
  font-size: 0.9rem;
  color: #6a6a6a;
}
/* staging-only cue that these are placeholders, not real quotes */
.testimonial-placeholder {
  border-style: dashed;
  border-color: #c9c9c9;
}

/* ----- Staging placeholder marker (canary-yellow alert) -----
   Flags content that still needs real data from the client.
   Remove the .placeholder-note wrapper when the real content lands. */
.placeholder-note {
  display: inline-block;
  background-color: #fff4a3;
  color: #5a4b00;
  border: 1px solid #e0c200;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
}
.placeholder-note::before {
  content: "\26A0";        /* warning triangle */
  margin-right: 0.45rem;
}

/* ----- FAQ (static, two-column; no accordion) ----- */
.faq-item {
  border-left: 3px solid var(--gts-primary);
  padding-left: 1.1rem;
  height: 100%;
}
.faq-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* ============================================================
   v5 positioning components (ChatGPT edits, Jun 2026)
   ============================================================ */
/* Hero eyebrow — context line above the H1 */
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gts-primary);
  margin-bottom: 0.75rem;
}
/* Billing-model callout (Panoramic pricing) */
.billing-callout {
  background-color: #fbeeee;
  border: 1px solid #e7c4c4;
  border-left: 4px solid var(--gts-primary);
  border-radius: var(--gts-radius);
  padding: 1.75rem 2rem;
}
.billing-callout h3 {
  color: var(--gts-primary);
  font-size: 1.3rem;
  margin: 0 0 1.1rem;
}
.billing-steps {
  list-style: none;
  counter-reset: bstep;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
}
.billing-steps li {
  counter-increment: bstep;
  position: relative;
  padding-left: 2.1rem;
  font-weight: 600;
  font-size: 1.05rem;
}
.billing-steps li::before {
  content: counter(bstep);
  position: absolute;
  left: 0;
  top: -0.05em;
  width: 1.55rem;
  height: 1.55rem;
  background-color: var(--gts-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.billing-callout__note {
  color: var(--gts-text);
  font-size: 1rem;
}

/* Managed Connectivity Services: capability chips (centered, wrapping) */
.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid var(--gts-border);
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--gts-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.service-chip i {
  color: var(--gts-primary);
  font-size: 1.05rem;
}

/* "Why Customers Choose Cellular" benefit box: the parent .feature-card is
   center-aligned, which centers each row and misaligns the checkmarks. Keep the
   UL centered as a block, but left-align its items so the checks line up. */
#visibility .feature-list {
  display: inline-block;
  text-align: left;
}

.faq-item p {
  font-size: 1.1rem;
  color: var(--gts-text);
  margin: 0;
}

/* ===== Enzuzo-managed legal pages (privacy / site-use policy) =====
   Mirror the site's own scale. Enzuzo owns the H1, so it can't sit in the gray
   page-hero band, but we match the hero's centered alignment and 3rem size;
   section headings use the legal-page .policy-content scale (h2 1.5rem /
   h3 1.25rem) and body copy the 1.2rem site base (this site sets
   main{font-size:1.2rem}). Scoped to #main-content to out-specify Enzuzo's
   [ez-*] rules without !important. Embed pages only. */
#main-content .ez-container {
  max-width: 100%;
  padding: 0;
}
/* Page title -> centered, matching the site's page-hero H1 */
#main-content [ez-title],
#main-content .ez-title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gts-text);
}
/* Section headings -> site legal-page h2 scale */
#main-content [ez-policy] [ez-flat-title] {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gts-text);
}
/* Content sub-headings -> site legal-page h3 scale (leave Enzuzo's small
   icon sub-headers, class enzuzo-*, at their own size) */
#main-content [ez-policy] h3:not([class*="enzuzo-"]) {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gts-text);
}
/* Body copy + lists at the site base size (1.2rem here) */
#main-content [ez-policy],
#main-content [ez-policy] p,
#main-content [ez-policy] li {
  font-size: 1.2rem;
  line-height: 1.7;
}
/* Links -> site brand color, underlined (matches .policy-content a) */
#main-content [ez-policy] a {
  color: var(--gts-primary);
  text-decoration: underline;
}
#main-content [ez-policy] a:hover {
  color: var(--gts-primary-light);
}
/* Mobile -> mirror the site's responsive heading sizes */
@media (max-width: 767.98px) {
  #main-content [ez-title],
  #main-content .ez-title { font-size: 2rem; }
  #main-content [ez-policy] [ez-flat-title] { font-size: 1.25rem; }
  #main-content [ez-policy] h3:not([class*="enzuzo-"]) { font-size: 1.1rem; }
}

/* ===== Enzuzo consent UI — standard overrides (keeps the Enzuzo dashboard at
   neutral defaults). See FRAMEWORK/procedures/enzuzo-setup.md §5 / bbb-starter §13. */
/* AA link contrast: Enzuzo's default link color #1082EC fails AA (3.87:1);
   #0375DF is ~4.6:1. Override Enzuzo's own theme variables (defined on
   .ez-consent without !important) — covers banner + preference-center links. */
.ez-consent {
  --ez-banner-link-color: #0375df !important;
  --ez-preferences-link-color: #0375df !important;
}
/* Light drop shadow on the floating "revisit" cookie-manager button;
   drop-shadow (not box-shadow) follows the icon shape (transparent bg). */
#ez-cookie-manager-button {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;
}