/* HostingMaa — bespoke styles that sit on top of Tailwind
   ------------------------------------------------------
   Palette  deep #0E3B34 · marigold #F2B705 · kumkum #A6194B
            paper #F4F6F3 · line #D7E0DA · ink #12211E
   Type     Bricolage Grotesque (display) · Karla (body) · Noto Sans Telugu
*/

:root {
  --deep: #0E3B34;
  --deep2: #17564B;
  --deep3: #1F7566;
  --marigold: #F2B705;
  --kumkum: #A6194B;
  --paper: #F4F6F3;
  --line: #D7E0DA;
  --ink: #12211E;
  --muted: #56655E;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* ---------- accessibility ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--marigold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- hero uptime strip ----------
   90 thin bars, one per day. This is the signature element of the page:
   a hosting company's most honest claim, drawn rather than written. */

.uptime {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 56px;
}
.uptime span {
  flex: 1 1 auto;
  min-width: 2px;
  border-radius: 2px;
  background: var(--deep3);
  opacity: .85;
}
.uptime span.full { height: 100%; }
.uptime span.high { height: 78%; background: var(--marigold); }
.uptime span.dip  { height: 52%; background: var(--kumkum); opacity: .7; }

/* ---------- rack rows ----------
   Plans are drawn as 1U rack units, not as identical marketing cards:
   mounting holes on the rails, specs across the face, price at the end. */

.rack {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.rack + .rack { margin-top: 10px; }

.rack-unit {
  position: relative;
  padding: 22px 22px 22px 40px;
}
.rack-unit::before,
.rack-unit::after {
  content: "";
  position: absolute;
  left: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.18);
}
.rack-unit::before { top: 20px; }
.rack-unit::after  { bottom: 20px; }

.rack.is-featured {
  border-color: var(--deep);
  box-shadow: 0 0 0 1px var(--deep);
}
.rack.is-featured .rack-unit::before,
.rack.is-featured .rack-unit::after { background: var(--marigold); }

.spec {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.spec b {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}

/* ---------- section rule with a label built into it ---------- */

.rule {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- accordion ---------- */

details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--deep3);
  line-height: 1;
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .faq-body { padding: 0 44px 22px 0; color: var(--muted); line-height: 1.7; }

/* ---------- floating WhatsApp ---------- */

.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1FA855;
  color: #fff;
  box-shadow: 0 6px 20px rgba(14, 59, 52, .28);
  transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.06); }

/* ---------- prose readability ---------- */

.measure { max-width: 62ch; }

/* ---------- honeypot ---------- */

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}