/* Responsive layer
   Desktop (>860px) is untouched. Most layout values live in inline styles,
   so the overrides below use !important and the hook classes added in index.html. */

/* ---------- global safety ---------- */
img, svg { max-width: 100%; }
.page { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- "Beyond and above" bento: always 2 x 2 on desktop ----------
   Rows are 7/5 then 5/7 columns. Below 948px the cards stack (original flex-wrap behaviour). */
@media (min-width: 948px) {
  .bento { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento > :nth-child(1) { grid-column: span 7; }
  .bento > :nth-child(2) { grid-column: span 5; }
  .bento > :nth-child(3) { grid-column: span 5; }
  .bento > :nth-child(4) { grid-column: span 7; }
}

/* ---------- tablet and below ---------- */
@media (max-width: 860px) {
  .wrap { padding-left: 24px !important; padding-right: 24px !important; }

  .hero { padding-top: 56px !important; padding-bottom: 40px !important; gap: 48px !important; }
  .hero-h1 { font-size: clamp(36px, 8vw, 60px) !important; }
  .h2 { font-size: clamp(30px, 6vw, 44px); }
  .h2-lg { font-size: clamp(30px, 6vw, 46px) !important; }
  .band-title { font-size: clamp(22px, 4.4vw, 30px) !important; }

  .strip-wrap { padding-bottom: 56px !important; }
  .pcell { flex-basis: 100% !important; border-right: 0 !important; border-bottom: 1px solid #ECE6DC; }
  .pcell:last-child { border-bottom: 0; }

  .sec-b { padding-bottom: 80px !important; gap: 44px !important; }
  .sec-tb { padding-top: 80px !important; padding-bottom: 80px !important; gap: 44px !important; }
  .sec-v { padding-top: 80px !important; padding-bottom: 80px !important; gap: 36px !important; }
  .cta-wrap { padding-bottom: 80px !important; }
  .cta-box { padding: 64px 28px !important; border-radius: 30px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* header */
  .nav-inner { min-height: 64px !important; gap: 8px !important; }
  .site-header img { height: 28px !important; }
  .site-header .nav-inner > a { padding: 12px 0 !important; }
  .site-nav { gap: 14px !important; }
  .site-nav .navlink { font-size: 14px; }
  .site-nav .btn { padding: 9px 16px !important; font-size: 14px !important; }

  /* hero */
  .hero { padding-top: 40px !important; gap: 40px !important; }
  .hero-art .fchip:nth-child(1) { left: 6px !important; }
  .hero-art .fchip:nth-child(2) { right: 6px !important; }
  .hero-art .fchip { font-size: 12px; padding: 7px 12px 7px 7px; gap: 8px; }

  /* pricing strip */
  .pcell { padding: 20px 22px !important; }

  /* sections and cards */
  .sec-b { padding-bottom: 64px !important; gap: 36px !important; }
  .sec-tb { padding-top: 64px !important; padding-bottom: 64px !important; gap: 36px !important; }
  .sec-v { padding-top: 64px !important; padding-bottom: 64px !important; }
  .band-copy { padding-top: 48px !important; padding-bottom: 28px !important; }
  .cta-wrap { padding-bottom: 64px !important; }
  .cta-box { padding: 52px 22px !important; border-radius: 26px !important; }

  .eyebrow { font-size: 12px; }
  .panel { height: 260px; }
  .cbody { padding: 0 16px; gap: 14px; }
  .cbody h3 { font-size: 24px; }
  .cbody .lead { font-size: 17px; }
  .bcard { padding: 26px 22px; border-radius: 26px; }
  .bh { font-size: 22px; }
  .plan-list { padding: 4px 20px !important; }
  .plan-list li { font-size: 15px !important; align-items: flex-start !important; }
  .pc { padding: 28px 22px; border-radius: 24px; }
  .pc-num { font-size: 44px; }
  .ucard-media { height: auto !important; aspect-ratio: 520 / 260; }
  .caro { padding-bottom: 28px; }
  .cgrp { gap: 18px; padding-right: 18px; }

  /* footer */
  .foot-inner { justify-content: center !important; text-align: center; padding-top: 28px !important; padding-bottom: 28px !important; }
  .foot-inner nav { justify-content: center; }
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .site-nav { gap: 12px !important; }
  .navlink { font-size: 14px; }
  .site-nav .btn { padding: 9px 14px !important; }
  .hero-h1 { font-size: 34px !important; }
  .btn { max-width: 100%; }
  .hero .btn, .cta-box .btn { width: 100%; }
  .cbody .desc, .bp { font-size: 14.5px; }
}