/* Maintenance & Care — inherits tokens from index.css */

/* Hero */
.maint-hero { padding: calc(6rem + var(--navH)) 0 2rem; }
.maint-hero__grid{
  display:grid; align-items:center; gap:3rem;
  grid-template-columns: 1.2fr 1fr;
  max-width:1200px; margin:0 auto; padding:0 2rem;
}
.maint-hero__cta{ display:flex; gap:.75rem; margin-top:1rem; }
@media (max-width:1024px){
  .maint-hero__grid{ grid-template-columns:1fr; text-align:center; }
  .maint-hero__cta{ justify-content:center; }
}

/* Device mock visuals (same pattern as other pages) */
.hero-mock{ position:relative; display:grid; place-items:center; min-height:340px; }
.hero-mock .mock{
  display:block; border-radius:14px; background:#0b1020;
  border:1px solid rgba(255,255,255,.06); object-fit:cover;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.mock.laptop{ width:min(520px, 88%); aspect-ratio:16/10; transform:rotate(-2deg) translateY(6px); }
.mock.phone{
  position:absolute; right:6%; bottom:-6%;
  width:150px; max-width:28%; aspect-ratio:10/19; border-radius:24px; transform:rotate(8deg);
}
@media (max-width:980px){ .mock.phone{ right:3%; bottom:-4%; width:130px; } }

/* Included features */
.included .container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.features-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1100px){ .features-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .features-grid{ grid-template-columns: 1fr; } }

.f-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.f-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.f-ico{ font-size:1.4rem; margin-bottom:.4rem; }

/* Process rail (horizontal) */
.process .container{ max-width:1200px; margin:0 auto; padding:0 2rem; }

.process-rail{
  list-style: none;         
  margin: 0;                /* reset UA margin */
  padding: 0 0 .25rem;      /* keep your bottom pad only */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 26vw, 280px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.process-rail::-webkit-scrollbar{ height:8px; }
.process-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:999px; }

.step{
  scroll-snap-align:start;
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: rgba(var(--primary-rgb), .12); color: var(--text-light);
  border:1px solid rgba(var(--primary-rgb), .25); font-weight:600; margin-bottom:.35rem;
}

/* Desktop: fixed grid */
@media (min-width:1100px){
  .process-rail{
    overflow:visible; grid-auto-flow:initial; grid-auto-columns:initial;
    grid-template-columns: repeat(6, 1fr);
  }
}

/* SLAs & support */
.slas .container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.sla-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1020px){ .sla-grid{ grid-template-columns:1fr; } }

.sla-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1.25rem;
}
.list{ margin: .25rem 0 0 1.2rem; }
.list li{ color: var(--text-light); }
.note{ color: var(--text-gray); margin-top:.5rem; }
.cta-row{ display:flex; gap:.75rem; justify-content:center; margin-top: 2rem; }

/* FAQ (details/summary) */
.maint-faq .container{ max-width:900px; margin:0 auto; padding:0 2rem; }
.faq{ background: var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.75rem 1rem; }
.faq + .faq{ margin-top:.6rem; }
.faq summary{
  cursor:pointer; list-style:none; color: var(--text-light); font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq[open] summary{ color: var(--white); }
.faq-body{ color: var(--text-gray); margin-top:.5rem; }

/* Perf niceties */
.maint-hero, .included, .process, .slas, .maint-faq{ content-visibility:auto; contain-intrinsic-size: 800px; }


/* ===== Maintenance & Care — Horizontal scroller ===== */
#pricing-maintenance .price-scroller-wrap{ position:relative; }
#pricing-maintenance .price-scroller{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
}
#pricing-maintenance .price-scroller::-webkit-scrollbar{ height: 8px; }
#pricing-maintenance .price-scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }

#pricing-maintenance .hplan{
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:grid; grid-template-rows: auto 1fr auto; gap: .7rem;
  min-height: 260px;
}
#pricing-maintenance .hplan:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
#pricing-maintenance .hplan.featured{ border-color: rgba(var(--primary-rgb,64,92,156), .35); box-shadow: 0 14px 36px rgba(0,0,0,.24); }

#pricing-maintenance .ribbon{
  position:absolute; top: 12px; right: 12px;
  background: var(--gradient, linear-gradient(135deg,#405c9c,#fec200));
  color:#fff; font-size:.78rem; font-weight:600;
  padding:.35rem .55rem; border-radius:999px;
}

#pricing-maintenance .hplan-head{ margin-bottom: .2rem; }
#pricing-maintenance .hplan-name{ color: var(--white); margin: 0 0 .1rem; font-size: 1.12rem; }
#pricing-maintenance .hplan-tag{ color: var(--text-gray); margin: 0; }

#pricing-maintenance .hprice span{
  display:inline-flex; align-items:baseline; gap:.3rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding:.42rem .7rem;
  color: var(--text-light);
}
#pricing-maintenance .hprice strong{ color: var(--white); font-size: 1.05rem; }

#pricing-maintenance .hplan-list{
  list-style: none; padding: 0; margin: 0;
  display:grid; gap:.42rem; color: var(--text-light);
}
#pricing-maintenance .hplan-list li::before{ content:"✓ "; color: var(--primary-light, #9fb6ff); }

#pricing-maintenance .hplan-cta{ display:grid; gap:.35rem; }
#pricing-maintenance .hplan-cta .note{ color: var(--text-gray); font-size:.85rem; }

/* Desktop: 3-up row like your steps section */
@media (min-width: 1100px){
  #pricing-maintenance .price-scroller{
    overflow: visible;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(3, 1fr);
    scroll-snap-type: none;
  }
}

/* Add-ons */
#pricing-maintenance .addons-title{
  color: var(--white);
  margin: 1.1rem 0 .4rem; font-size: 1.05rem;
}
#pricing-maintenance .addons-list{
  list-style: none; padding: 0; margin: 0 0 .6rem;
  display: grid; gap: .35rem; color: var(--text-light);
}
#pricing-maintenance .addons-note{ color: var(--text-gray); }


/* Billing Toggle */
.billing-toggle{
  display:flex; justify-content:center; margin-bottom:1.25rem;
}
.toggle-label{
  display:flex; align-items:center; gap:.6rem; font-size:.95rem; color:var(--text-light);
}
.toggle-label em{ font-size:.8rem; color:var(--primary-light); }

/* Switch style */
.toggle-label input{ display:none; }
.slider{
  position:relative; width:42px; height:22px;
  background:rgba(255,255,255,.2); border-radius:999px;
  cursor:pointer; transition:.25s;
}
.slider::before{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; transition:.25s;
}
.toggle-label input:checked + .slider{ background:var(--gradient, #405c9c); }
.toggle-label input:checked + .slider::before{ transform:translateX(20px); }

/* Show/Hide prices */
.hprice.yearly{ display:none; }
body.billing-yearly .hprice.monthly{ display:none; }
body.billing-yearly .hprice.yearly{ display:block; }