@import url("base.css");
/* BUFFALO BIN WASH — navy night + electric water blue (colors from their live site) */
:root {
  --bg: #0b0d18; --bg-hi: #111527; --bg-lo: #06080f; --bg-soft: #0d1424;
  --ink: #f8feff; --text: #c9e2f2; --accent: #2bb3ff; --ink-on-accent: #04101d;
  --halo: #0b0d18; --scrim: #070a12;
  --footer-bg: #050810; --footer-ink: #d9f2ff;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --display-weight: 700;
  --wordmark-size: 13vw; --wordmark-track: 0.1em;
  --grain-opacity: 0.05;
}

/* Daylight footage + light copy: every act gets a heavy navy halo */
.act-title, .act-body, .act-label, .overline, .tagline {
  text-shadow: 0 0 28px rgba(4, 8, 18, 0.95), 0 0 12px rgba(4, 8, 18, 0.85), 0 1px 3px rgba(4, 8, 18, 0.7);
}
.act-label { color: #7cd4ff; }
.tagline { font-style: normal; font-weight: 650; }

/* nav over bright morning footage */
#nav .nav-mark, #nav .nav-links a, #nav .nav-cta {
  text-shadow: 0 0 16px rgba(4, 8, 18, 0.9), 0 0 6px rgba(4, 8, 18, 0.8);
}
.nav-cta { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); font-weight: 700; }
.nav-cta:hover { background: #7cd4ff; color: #04101d; }

/* pricing cards */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); max-width: 900px; }
.plan { background: var(--bg-hi); border: 1px solid rgba(124, 212, 255, 0.18); border-radius: 10px; padding: clamp(22px, 3vw, 34px); }
.plan.hot { border-color: var(--accent); box-shadow: 0 24px 70px -30px rgba(43, 179, 255, 0.45); position: relative; }
.plan.hot::before { content: "Most popular"; position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--ink-on-accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); margin-bottom: 6px; }
.plan .price { font-family: var(--font-display); font-size: 2.6rem; color: #7cd4ff; margin: 8px 0 2px; }
.plan .per { font-size: 0.85rem; color: var(--text); margin-bottom: 16px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; }
.plan li { font-size: 0.92rem; line-height: 1.8; color: var(--text); }
.plan li::before { content: "✓  "; color: var(--accent); font-weight: 700; }
.plans-note { margin-top: 22px; font-size: 0.9rem; color: var(--text); }

/* how it works steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 2vw, 26px); }
.step { background: var(--bg-hi); border: 1px solid rgba(124, 212, 255, 0.14); border-radius: 10px; padding: 20px 18px; }
.step .n { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
.step h4 { font-size: 0.98rem; color: var(--ink); margin: 10px 0 8px; }
.step p { font-size: 0.85rem; line-height: 1.6; color: var(--text); }

/* area chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { border: 1px solid rgba(124, 212, 255, 0.4); color: #cfeeff; border-radius: 999px; padding: 10px 22px; font-size: 0.95rem; font-weight: 600; }
.chip.more { border-style: dashed; color: var(--text); }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
}