/* ==========================================================================
   Cadence landing — M3 responsive layer.
   Breakpoints: 1024px (nav collapses to sheet, hero stacks), 640px
   (compact adjustments). The auto-fit grids in sections.css handle most
   content reflow on their own; this file owns chrome + the hero.
   ========================================================================== */

/* ---- ≤ 1024px: top app bar collapses into a dropdown sheet --------------- */
@media (max-width: 1024px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: var(--container-pad);
    right: var(--container-pad);
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: var(--md-sys-shape-corner-extra-large);
    background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 92%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--md-sys-elevation-level3), inset 0 0 0 1px var(--md-sys-color-outline-variant);
  }
  .nav__links.is-open { display: flex; }

  .nav__links > a:not(.btn) {
    justify-content: space-between;
    padding: 0.9rem 1rem;
    font-size: 1rem;
  }
  .nav__cta {
    justify-content: center;
    margin-left: 0;
    margin-top: 0.35rem;
    height: 3rem;
  }

  /* Keep the sheet anchored to the bar */
  .nav__inner { position: relative; }

  /* With the links out of flow, push brand left / icons right */
  .nav__actions {
    margin-left: auto;
    gap: 0.375rem;
    padding: 2px 0;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__art {
    order: -1;              /* device above the copy on tablets */
    max-width: 22rem;
    margin-inline: auto;
  }
  .hero__sub { max-width: none; }
}

/* Phones: hide the device mockup entirely (original behaviour) */
@media (max-width: 760px) {
  .hero__art { display: none; }
}

@media (min-width: 1025px) {
  /* Desktop never shows the hamburger or the panel state */
  .nav__toggle { display: none !important; }
}

/* ---- ≤ 640px: compact phone pass ------------------------------------------ */
@media (max-width: 640px) {
  html { scroll-padding-top: 4.5rem; }
  .nav__inner { min-height: 3.5rem; }

  .hero { padding-top: 2rem; }
  .hero__title { margin-block: 0.85rem 1rem; }
  .hero__cta .btn--lg { width: 100%; }       /* full-width primary actions */
  .hero__trust-pills { gap: 0.4rem; }
  .trust-pill { height: 1.75rem; font-size: 0.8125rem; padding-inline: 0.75rem; }

  .phone { width: min(19rem, 88vw); }

  .ptoggle { width: 100%; justify-content: stretch; }
  .ptoggle__btn { flex: 1; justify-content: center; padding-inline: 1rem; }

  .pricing__card-inner { padding: 1.4rem; }
  .pricing__amount { font-size: 2.15rem; }

  .refgate { padding: 1.25rem; }

  .cta-card { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-card__text p { margin-inline: auto; }
  .cta-card__actions .btn { width: 100%; }

  .mobile-cta__inner { padding-left: 1rem; }
  .mobile-cta__text { font-size: 0.95rem; }

  /* Phones only: show the sticky CTA and lift the footer above it */
  .mobile-cta { display: block; }
  .footer { padding-bottom: 84px; }
}

/* ---- Bento collapse (features grid) --------------------------------------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .grid--3 > :nth-child(n) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  .grid--3 { grid-template-columns: 1fr; }
}

/* ---- Short-viewport laptops: trim vertical rhythm -------------------------- */
@media (min-width: 641px) and (max-height: 760px) and (min-width: 1025px) {
  :root { --section-pad: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
}