/* ==========================================================================
   Cage Connect — responsive layer
   Tested widths: 320 360 375 390 430 768 1024 1280 1440 1920
   ========================================================================== */

/* Large desktop (1600+) ------------------------------------------------------ */
@media (min-width: 1600px) {
  :root { --maxw: 1480px; }
  .hero__visual { width: min(100%, 620px); }
}

/* Hover-capable pointers only ------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  .feature-preview { display: none; }
}

/* Laptop (<=1199) ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .site-header__inner { gap: 24px; }
  .site-nav__list { gap: 20px; }
  .site-nav__link { font-size: .8rem; }
  .site-footer__top { grid-template-columns: 1.3fr 1fr 1fr; }
  .site-footer__top > :last-child { grid-column: 2 / -1; }
}

/* Tablet (<=1023) ------------------------------------------------------------ */
@media (max-width: 1023px) {
  :root { --header-h: 72px; }
  .site-nav, .site-header__cta { display: none; }
  .menu-toggle { display: block; }
  .site-header.is-scrolled { --header-h: 64px; }

  .section-head--split { grid-template-columns: 1fr; align-items: start; }

  /* hero */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 48px); padding-bottom: 120px; }
  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__content { max-width: 680px; }
  .hero__visual { justify-self: center; width: min(100%, 520px); }
  .hero__bg::after { background: linear-gradient(180deg, rgba(11, 11, 12, .7) 0%, rgba(11, 11, 12, .55) 40%, var(--bg) 100%); }
  .hero__mesh { -webkit-mask-image: radial-gradient(80% 50% at 60% 70%, #000, transparent 75%); mask-image: radial-gradient(80% 50% at 60% 70%, #000, transparent 75%); }
  .hero__glow { width: 120vw; height: 120vw; right: -50vw; bottom: -40vw; }

  /* intro */
  .intro__grid { grid-template-columns: 1fr; }
  .eco { max-width: 480px; }
  .intro__media-inner { aspect-ratio: 16 / 9; }

  /* panels become stacked cards */
  .panels { flex-direction: column; height: auto; gap: 14px; }
  .panel, .panel.is-active { flex: none; min-height: 440px; display: flex; align-items: flex-end; }
  .panel__trigger { display: none; }
  .panel__body, .panel.is-active .panel__body { position: relative; opacity: 1; visibility: visible; transform: none; transition: none; max-width: none; }
  .panel__media img, .panel.is-active .panel__media img { opacity: .55; transform: none; }

  /* features: inline thumbnails replace cursor preview */
  .feature { grid-template-columns: 52px minmax(0, 1fr) 96px; grid-template-rows: auto auto; gap: 8px 18px; align-items: start; }
  .feature__num { grid-row: 1; padding-top: .45em; }
  .feature__title { grid-column: 2; }
  .feature__text { grid-column: 2; grid-row: 2; }
  .feature__thumb {
    --c: 10px;
    display: block; grid-column: 3; grid-row: 1 / 3; align-self: center;
    width: 96px; height: 96px; object-fit: cover; object-position: top;
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); background: #080808;
  }

  /* app: heading, phone, tabs, stores */
  .app__grid { grid-template-columns: 1fr; gap: 0; }
  .app__intro { display: contents; }
  .app__intro > .kicker { order: 1; justify-self: start; }
  .app__intro > .display-lg { order: 2; margin-bottom: 40px; }
  .app__stage { order: 3; margin-bottom: 40px; }
  .app-tabs { order: 4; }
  .app__intro > .store-row { order: 5; }
  .app__oct { right: -40%; top: 40%; width: 120vw; }

  /* why */
  .why__grid { grid-template-columns: 1fr; }
  .why__sticky { position: static; }
  .why__media-inner { aspect-ratio: 16 / 10; }

  /* community */
  .community { min-height: auto; }
  .community__inner { grid-template-columns: 1fr; gap: 24px; }
  .community__count { order: 0; justify-self: start; font-size: clamp(5rem, 26vw, 11rem); }

  /* faq / early */
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .early__grid { grid-template-columns: 1fr; }
  .early__octs { right: -50%; width: 140vw; }

  /* footer */
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__top > :last-child { grid-column: auto; }

  /* inner pages */
  .legal { grid-template-columns: 1fr; }
  .legal__toc { position: static; padding: 22px; background: var(--bg-2); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Small tablet / large phone (<=767) --------------------------------------- */
@media (max-width: 767px) {
  :root { --chamfer: 26px; }

  .hero__frame { inset: 0 0 8% 6%; }
  .hero__phone { width: 40%; left: -1%; }
  .hero__chip { right: 0; bottom: 12%; font-size: .7rem; padding: 8px 12px; }
  .hero__frame-tag { display: none; }
  .hero__scroll { display: none; }
  .ticker { padding-block: 12px; }

  .intro__media-inner { aspect-ratio: 4 / 3; }
  .intro__caption { font-size: 1rem; gap: 6px 12px; }
  .intro__caption span + span::before { margin-right: 12px; }

  .panel, .panel.is-active { min-height: 420px; }

  /* timeline: rail on the left */
  .timeline__track { left: 22px; transform: none; }
  .step { grid-template-columns: 1fr; }
  .step__node { left: 0; top: 34px; transform: none; width: 46px; height: 46px; font-size: 1rem; }
  .step__card, .step:nth-child(even) .step__card { grid-column: 1; margin: 0 0 0 66px; }
  .step__ghost { font-size: 5.5rem; top: -10px; }

  .acc-item__inner { padding-right: 0; }

  .topics { grid-template-columns: minmax(0, 1fr); }

  /* modal: stacked */
  .modal { padding: 12px; align-items: end; }
  .modal__dialog { --c: 20px; grid-template-columns: 1fr; max-height: calc(100svh - 24px); overflow-y: auto; }
  .modal__media { min-height: 0; height: 210px; padding: 24px; }
  .modal__media > img { object-position: 50% 20%; }
  .modal__mark { display: none; }
  .modal__media-copy p { display: none; }
  .modal__title { font-size: 2.1rem; }
  .modal__body { position: static; padding: 28px 22px 26px; overflow: visible; }
  .modal__body > .kicker { display: none; }
  .modal__heading { font-size: 1.5rem; margin-bottom: 20px; }
  .modal__close { top: 14px; right: 14px; background: rgba(10, 10, 10, .7); }
}

/* Phones (<=599) --------------------------------------------------------------- */
@media (max-width: 599px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__inner .btn { width: 100%; }
}

/* Small phones (<=479) ------------------------------------------------------- */
@media (max-width: 479px) {
  :root { --header-h: 66px; }
  .site-header.is-scrolled { --header-h: 60px; }
  .site-header__logo { width: 124px; }
  .menu-toggle { width: 44px; height: 44px; }

  .kicker { font-size: .7rem; letter-spacing: .16em; gap: 10px; }
  .hero { padding-top: calc(var(--header-h) + 36px); padding-bottom: 104px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .btn--lg { min-height: 56px; padding: 0 22px; font-size: .92rem; }
  .hero__stores-label { width: 100%; }
  .hero__inner { gap: 44px; }

  .eco__node { font-size: .68rem; }

  .panel, .panel.is-active { min-height: 400px; }
  .panel__body { padding: 24px; }

  .feature { grid-template-columns: 34px minmax(0, 1fr) 72px; gap: 6px 12px; }
  .feature__thumb { width: 72px; height: 72px; }
  .feature__text { font-size: .95rem; }

  .phone--lg { width: min(290px, 78vw); }
  .app__detail { width: 92%; transform: translateX(-50%); bottom: 8%; }
  .app__detail.is-off { transform: translateX(-50%) translateY(20px); }
  .app-tab { padding-right: 0; }

  .why-item { grid-template-columns: 1fr; gap: 10px; }

  .community__actions .btn { width: 100%; }

  .role-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card { padding: 24px 20px; --c: 20px; }

  .store-row .store-btn { flex: 1 1 150px; min-width: 0; }
  .store-btn__txt { font-size: .98rem; }

  .contact-card { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; }
  .contact-card__icon { width: 44px; height: 44px; }
}

/* Very small phones (<=359) ------------------------------------------------ */
@media (max-width: 359px) {
  .display-xl { font-size: 2.3rem; }
  .display-lg { font-size: 2rem; }
  .hero__chip { display: none; }
  .ticker__group span { padding-inline: 16px; }
  .step__card, .step:nth-child(even) .step__card { margin-left: 58px; padding: 22px 18px; }
  .acc-item__icon { width: 34px; height: 34px; }
}

/* Short landscape phones ------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .modal { align-items: center; }
  .modal__dialog { grid-template-columns: 1fr; }
  .modal__media { display: none; }
}