/* =========================================================
   MetaWorks — Responsive overrides
   ========================================================= */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  :root { --gutter: 24px; }

  .nav-links, .navbar .btn { display: none; }
  .nav-toggle { display: flex; }

  .navbar.is-open .nav-links {
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background-color: rgba(21, 21, 21, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-line);
  }
  .navbar.is-open .nav-links a:not(.btn) {
    padding: var(--space-4) 0;
    font-size: var(--label);
    border-bottom: 1px solid var(--color-line);
  }

  /* CTA inside the open menu */
  .navbar.is-open .nav-links .nav-cta {
    display: inline-flex;
    width: 100%;
    margin-top: var(--space-4);
    color: var(--color-on-primary); /* override .nav-links a muted color */
  }

  /* Blur the page behind the open menu */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: 90;
    background-color: rgba(21, 21, 21, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }
  .navbar.is-open ~ .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .benefits .cols--3,
  .process .cols--4,
  .plans__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Vertical divider: left column only (right column sits on the safe edge) */
  .benefit:nth-child(odd),
  .process-step:nth-child(odd),
  .plan:nth-child(odd) { border-right: 1px solid var(--color-line); }
  .benefit:nth-child(even),
  .process-step:nth-child(even),
  .plan:nth-child(even) { border-right: none; }
  /* Horizontal dividers between rows; the grid's own bottom border closes the last row */
  .benefit,
  .process-step,
  .plan { border-bottom: 1px solid var(--color-line); }

  .faq .safe { grid-template-columns: 1fr; }
  .faq__list { border-left: none; border-top: 1px solid var(--color-line); }
  .faq__intro { padding: var(--space-12) var(--gutter); }

  /* Use cases: tabs | text on top row, visual spans full width below */
  .usecases__body { grid-template-columns: 260px 1fr; }
  .uc-visual {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-line);
  }
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
  :root { --gutter: 20px; }

  .section-pad,
  .hero .safe,
  .cta .safe { padding-top: var(--space-16); padding-bottom: var(--space-16); }

  /* Smaller lead / subtitle text on phones */
  .lead { font-size: var(--body); }
  .hero__title { font-size: 32px; }
  .section-head__title { font-size: 26px; }
  .hero__sub,
  .section-head__lead { font-size: var(--body-sm); }

  .benefits .cols--3,
  .process .cols--4,
  .plans__grid,
  .usecases__body,
  .footer__top {
    grid-template-columns: 1fr;
  }
  .cell { border-right: none; border-bottom: 1px solid var(--color-line); }
  .cell:last-child { border-bottom: none; }

  /* More generous top/bottom padding so sections read as separated */
  .section-head { padding-top: var(--space-24); padding-bottom: var(--space-8); }
  .section-head__title { margin: var(--space-3) 0 var(--space-2); }
  .benefits .safe,
  .usecases .safe,
  .process .safe,
  .plans .safe,
  .faq .safe { padding-bottom: var(--space-20); }

  /* No trailing border on the last block in a section — the row border
     already divides sections, so an inner bottom border doubles up */
  .benefits .cols,
  .process .cols { border-bottom: none; }
  .usecases__body { border-top: none; border-bottom: none; }
  .faq-item:last-child { border-bottom: none; }

  /* Compact, evenly-divided grid items */
  .benefit, .process-step {
    border-right: none !important;
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-8) var(--gutter);
    gap: var(--space-3);
  }
  .benefit__icon { margin-bottom: var(--space-2); }
  .benefit__icon img { width: 40px; height: 40px; }

  /* Plans become a horizontally-scrollable carousel of compact cards */
  .plans__grid {
    border: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-4);
    padding: 0 var(--gutter) var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .plans__grid::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 76%;
    max-width: 290px;
    border: 1px solid var(--color-line) !important;
    border-radius: var(--radius);
    overflow: hidden;
    scroll-snap-align: start;
  }
  .plan__name,
  .plan__price-block { padding: var(--space-4) var(--space-6); }
  /* Slightly smaller price inside the narrower cards */
  .plan__price { font-size: var(--h4); }

  /* Use-case selectors become a scrollable row of pills */
  .uc-tabs {
    border: none;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 0 var(--gutter) var(--space-4);
    scrollbar-width: none;
  }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab {
    flex: none;
    width: auto;
    white-space: nowrap;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: var(--space-2) var(--space-4);
  }
  .uc-tab[aria-selected="true"] {
    background-color: rgba(0, 255, 225, 0.08);
    border-color: rgba(0, 255, 225, 0.4);
  }
  .uc-text { border-right: none; border-bottom: 1px solid var(--color-line); }

  /* FAQ: drop the divider between intro and list, tighten the gap */
  .faq__intro { padding: var(--space-24) var(--gutter) var(--space-4); }
  .faq__list {
    border-top: none;
    padding: var(--space-2) var(--gutter) var(--space-8);
  }

  .logos .safe { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .logos__track { gap: var(--space-8); }

  .footer__top { gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
}