/* Mobile refinements, loaded on every page. Inline styles set the desktop layout; these override on small screens. */
@media (max-width: 720px) {
  /* Nav: keep only the logo and the CTA */
  .nav-link { display: none !important; }

  /* Tighter vertical rhythm */
  [style*="padding: 112px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 96px 32px"], [style*="padding: 88px 32px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 72px 32px 96px"] { padding-top: 32px !important; padding-bottom: 56px !important; }

  /* Side gutters: 20px on phones */
  [style*="32px"][style*="max-width: 1200px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .wrap, .doc { padding-left: 20px !important; padding-right: 20px !important; }

  /* Pricing plan finder: 4 per row so each button is a comfortable tap */
  .count-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Cards and panels breathe less */
  [style*="padding: 40px"] { padding: 28px !important; }
  [style*="padding: 36px"] { padding: 24px !important; }

  /* Full-width primary buttons are easier to hit */
  .cta-main { display: block !important; text-align: center; }

  /* Hero graphic: a little smaller so the headline leads */
  .hero-graphic svg { max-width: 320px !important; }
}

/* Triangle animation (homepage hero) */
.tri-outline { stroke-dasharray: 6 6; animation: tri-flow 6s linear infinite; }
.tri-core { animation: tri-breathe 6s ease-in-out infinite; }
.tri-node { opacity: .35; animation: tri-node 6s ease-in-out infinite; }
.tri-node.n2 { animation-delay: 2s; }
.tri-node.n3 { animation-delay: 4s; }
.tri-label { opacity: .55; animation: tri-label 6s ease-in-out infinite; }
.tri-label.n2 { animation-delay: 2s; }
.tri-label.n3 { animation-delay: 4s; }
.tri-verified { animation: tri-blink 1.4s steps(2, start) infinite; }
@keyframes tri-flow { to { stroke-dashoffset: -72; } }
@keyframes tri-breathe { 0%, 100% { fill-opacity: .06; } 50% { fill-opacity: .18; } }
@keyframes tri-node { 0%, 25% { opacity: 1; } 34%, 100% { opacity: .35; } }
@keyframes tri-label { 0%, 25% { opacity: 1; } 34%, 100% { opacity: .55; } }
@keyframes tri-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .tri-outline, .tri-core, .tri-node, .tri-label, .tri-verified { animation: none !important; opacity: 1 !important; }
  .tri-runner { display: none !important; }
}

@media (max-width: 720px) {
  /* Pricing cards: no forced height on phones */
  [style*="min-height: 360px"] { min-height: 0 !important; }
}