/* Cevran marketing — responsive overrides.
   Most prototypes use fixed multi-column grids via inline styles.
   These rules use [style*=…] substring selectors with !important to
   override those on tablet/mobile widths. */

/* ── Mobile nav (hamburger + dropdown panel) — base, hidden on desktop ─
   Lives here (not chrome.css) so every page — including subpages that link
   only tokens.css + responsive.css — picks it up. Shown ≤900px below. */
.cv-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 9px;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--hairline-hard);
  border-radius: 2px;
  cursor: pointer;
}
.cv-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-standard),
              opacity var(--dur-2) var(--ease-standard);
}
.cv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.cv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.cv-mobile-nav {
  display: none; /* shown only ≤900px (rule below) */
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 9;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}
.cv-mobile-nav a {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hairline-soft);
}
.cv-mobile-nav a.active { color: var(--rust); }
.cv-mobile-nav .cv-mobile-signin { color: var(--ink-2); }
.cv-mobile-nav .cv-mobile-cta {
  margin-top: 14px;
  justify-content: center;
  border-bottom: none;
  padding: 14px 18px;
  font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .cv-burger span { transition: none; }
}

/* ── Tablet / phone (≤ 900px) ────────────────────────────────── */
@media (max-width: 900px) {

  /* Header — hide desktop nav, condense the bar */
  .cv-header,
  .hdr {
    padding: 0 16px !important;
    gap: 12px !important;
    height: 56px !important;
  }
  .cv-nav,
  .hdr .nav {
    display: none !important;
  }
  .cv-header .cv-signin,
  .hdr .signin {
    display: none !important;
  }
  /* Show hamburger; the inline bar CTA moves into the panel to avoid crowding */
  .cv-burger { display: inline-flex !important; }
  .cv-header-cta,
  .hdr .btn-ink { display: none !important; }
  .cv-mobile-nav:not([hidden]) { display: flex !important; }

  /* Section padding — tighten left/right gutters */
  main > section,
  section[style*="padding: 96px 48px"],
  section[style*="padding: 80px 48px"],
  section[style*="padding: 112px 48px"],
  section[style*="padding: 64px 48px"],
  section[style*="padding: 96px 48px 88px"],
  section[style*="padding: 80px 48px 96px"],
  section[style*="padding: 96px 0 80px"],
  section.block,
  section.hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[style*="padding: 96px 48px"],
  section[style*="padding: 112px 48px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 80px 48px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Headlines — scale down */
  h1, h1.display { font-size: clamp(32px, 8vw, 56px) !important; line-height: 1.05 !important; }
  h2, h2.section { font-size: clamp(28px, 6vw, 40px) !important; line-height: 1.1 !important; }

  /* Hero stats: 4 cols → 2x2 */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Two-column splits → stack */
  [style*="grid-template-columns: 5fr 7fr"],
  [style*="grid-template-columns: 7fr 5fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Neutralize order: 2 so the title (right column) ends up first
     visually on mobile in reverse FeatureRows. */
  [style*="order: 2"] { order: 0 !important; }
  [style*="order: 1"] { order: 1 !important; }

  /* 3-column grids (security, pricing, loop) → stack */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] > [style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid var(--hairline) !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] > [style*="border-right: none"] {
    border-bottom: none !important;
  }

  /* Loop diagram — kill right border (→ arrows are absolute-positioned, hide them) */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="border: 1px solid var(--hairline)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="border: 1px solid var(--hairline)"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--hairline) !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="border: 1px solid var(--hairline)"] > div:last-child {
    border-bottom: none !important;
  }
  /* Hide the absolute-positioned arrow circles */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="border: 1px solid var(--hairline)"] > div > div[style*="right: -7px"] {
    display: none !important;
  }

  /* 6-column integration strip → 3 cols */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(6, 1fr)"] > * {
    border-right: 1px solid var(--hairline) !important;
    border-bottom: 1px solid var(--hairline) !important;
  }
  [style*="grid-template-columns: repeat(6, 1fr)"] > *:nth-child(3n) {
    border-right: none !important;
  }

  /* Connection tiles for features page: 3 cols → 2 cols */
  .tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .tile:nth-child(3n) { border-right: 1px solid var(--hairline) !important; }
  .tile:nth-child(2n) { border-right: none !important; }

  /* Feature matrix — let it scroll horizontally instead of squashing */
  .matrix { font-size: 13px !important; }
  table.matrix { display: block; overflow-x: auto; white-space: nowrap; }

  /* Use case rows: 140px tag | 1fr quote | 220px tools | 24px arrow → stack */
  [style*="grid-template-columns: 140px 1fr 220px 24px"] {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    padding: 18px 18px !important;
  }
  [style*="grid-template-columns: 140px 1fr 220px 24px"] > *:nth-child(3),
  [style*="grid-template-columns: 140px 1fr 220px 24px"] > *:nth-child(4) {
    display: none !important;
  }

  /* Hide static-by-id arrow chips between flex items */
  .meta-row { flex-wrap: wrap !important; }

  /* Sticky panels — unstick on mobile */
  [style*="position: sticky"][style*="top: 96px"] {
    position: static !important;
  }

  /* Asymmetric buttons row (final CTA) — let them wrap */
  [style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap !important; }

  /* Pricing card padding tighten */
  [style*="padding: 32px"] { padding: 24px 20px !important; }

  /* Footer */
  .cv-footer,
  footer {
    padding: 32px 20px 24px !important;
    margin-top: 48px !important;
  }
  .cv-footer-grid,
  .footgrid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .cv-footer-meta,
  .footbar {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* OAuth / security commitments meta row — let it wrap */
  [style*="display: flex"][style*="letter-spacing: 0.14em"] { flex-wrap: wrap !important; }
}

/* ── Phone (≤ 540px) ─────────────────────────────────────────── */
@media (max-width: 540px) {
  /* Tighter still */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(6, 1fr)"] > *:nth-child(3n) {
    border-right: 1px solid var(--hairline) !important;
  }
  [style*="grid-template-columns: repeat(6, 1fr)"] > *:nth-child(2n) {
    border-right: none !important;
  }

  /* Smaller hero */
  h1 { font-size: clamp(34px, 11vw, 56px) !important; }

  /* Specimen log rows: narrow timestamp column */
  .cv-log-row,
  .row {
    grid-template-columns: 56px 14px 1fr auto !important;
    column-gap: 8px !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
}