/* ============================================================
   Cipherverse — responsive.css (redesign)
   Base styles are the phone layout. These add columns as room appears.
   ============================================================ */

/* ── Phone menu (below 820px) ──────────────────────────── */
@media (max-width: 819px) {
  .topbar-cta { padding: 0 0.9rem; }
  .brand img { width: 128px; }

  .menu-toggle {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2);
  }
  .menu-toggle span { display: block; width: 16px; height: 1.5px; background: var(--white); transition: transform var(--fast) ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

  .menu {
    position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line);
    padding: var(--s-1) var(--gutter) var(--s-3);
    display: none;
  }
  .menu.is-open { display: flex; }
  /* Glass panel. The bar drops its own blur while the menu is open, because a
     blurred parent would stop the menu from blurring the page behind it. */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .menu {
      background: rgba(0, 0, 0, 0.86);
      -webkit-backdrop-filter: blur(22px) saturate(140%);
      backdrop-filter: blur(22px) saturate(140%);
    }
    .topbar.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .menu-link {
    display: flex;
    min-height: 56px; border-radius: 0; padding: 0;
    font-size: var(--t-lg); color: var(--white); border-bottom: 1px solid var(--line);
  }
  .menu-link.is-active { background: none; color: var(--lime); }
  .topbar.menu-open { background: var(--black); border-bottom-color: var(--line); }
}

@media (max-width: 380px) {
  .brand img { width: 112px; }
  .topbar-cta { font-size: 0.85rem; padding: 0 0.75rem; }
}

/* ── Tablet up ─────────────────────────────────────────── */
@media (min-width: 600px) {
  :root { --gutter: 1.5rem; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .build-cols { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .closer-card { padding: var(--s-6) var(--s-5); }
}

@media (min-width: 820px) {
  :root { --gutter: 2rem; }
  .head-split { grid-template-columns: 1.4fr 1fr; gap: var(--s-5); }
  .head-split .head-note { justify-self: end; }

  .compare-row { grid-template-columns: 0.6fr 1fr 1.2fr; gap: var(--s-4); align-items: baseline; }
  .compare-row--head { display: grid; padding-block: var(--s-2); font-size: var(--t-sm); color: var(--grey); }
  .compare-row--head span:last-child { color: var(--lime); }
  .compare-them::before { content: none; }
  .compare-k { font-size: var(--t-base); color: var(--white); }

  .faq { grid-template-columns: repeat(2, 1fr); }
  .faq-col + .faq-col { border-top: 1px solid var(--line); }

  .footer-top { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; }
  .footer-about { grid-column: auto; }

  .stage { grid-template-columns: 5fr 7fr; gap: var(--s-5); align-items: start; padding-top: var(--s-4); }
  .after { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-5); }
  .contact { grid-template-columns: 7fr 5fr; gap: var(--s-6); }
  .contact-side { position: sticky; top: calc(var(--bar-h) + var(--s-3)); }

  /* ERP Agent + service pages */
  .erp-split { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
  .say-row { grid-template-columns: 1.3fr 1fr; column-gap: var(--s-5); align-items: baseline; }
  .say-gloss { grid-row: 2; }
  .say-result { grid-row: 1 / span 2; grid-column: 2; }
  .agents { grid-template-columns: repeat(2, 1fr); }
  .road-item { grid-template-columns: 8rem 1fr; align-items: baseline; }
  .svc-gets { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-5); }
}

/* ── Desktop ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }
  .hero { padding-top: var(--s-7); }
  .section { padding-block: var(--s-7); }
  .closer-card { grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: var(--s-5); }
  .closer-title { grid-row: 1 / span 2; }

  /* Work: alternating wide / narrow so the 2×2 doesn't read as a grid of equals */
  .tiles { grid-template-columns: repeat(12, 1fr); }
  .tile--wide   { grid-column: span 7; }
  .tile--narrow { grid-column: span 5; }
  .tile--narrow .tile-shot { height: 100%; }
  .tile--narrow .tile-shot img { height: 100%; aspect-ratio: auto; min-height: 0; object-position: left top; }
  .tile { display: grid; grid-template-rows: 1fr auto; }

  /* What you get: heading left, staggered card columns */
  .build { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .build-head { grid-column: 1 / span 12; flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .build-cols { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .build-col:nth-child(2) { margin-top: var(--s-6); }
  .build-col:nth-child(3) { margin-top: var(--s-4); }


  .page-hero { padding-block: var(--s-7) var(--s-5); }
  .page-title { font-size: clamp(3rem, 1rem + 3.6vw, 4.5rem); }
  .mosaic { grid-template-columns: repeat(4, 1fr); }

  /* ERP hero: copy left, the voice panel right */
  .erp-hero { padding-block: var(--s-6) var(--s-7); }
  .erp-hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .vx-panel { padding: var(--s-4); }
  /* How it works: the pipeline turns horizontal */
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
  .flow-step { padding-left: 0; padding-top: 4.5rem; }
  .flow-step:not(:last-child)::before { left: 44px; right: calc(-1 * var(--s-3)); top: 21px; bottom: auto; width: auto; height: 1px; }
  .agents-grid { grid-template-columns: 2fr 1fr; gap: var(--s-4); }
  .control { position: sticky; top: calc(var(--bar-h) + var(--s-3)); }
  .erp-band-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

@media (min-width: 1440px) {
  :root { --gutter: 3rem; }
  .mosaic { grid-template-columns: repeat(6, 1fr); }
}

/* Phones: a shorter ledger mosaic */
@media (max-width: 599px) {
  .mosaic li:nth-child(n+7) { display: none; }
}