/* Mobile and small-tablet overrides. Loaded after site.css and the page
   stylesheet so these rules win. Desktop layout is untouched above 760px. */

/* The hamburger toggle only exists on small screens. The checkbox stays in the
   DOM (visually hidden) so keyboard users can reach it. */
.nav-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-burger { display: none; }

@media (max-width: 760px) {

  /* --- Nav: logo + CTA + hamburger on one row; links drop down when toggled --- */
  .nav-div-2 { flex-wrap: wrap; padding: 12px 20px; gap: 10px; }
  .nav-a-3 { white-space: nowrap; font-size: 17px; margin-right: auto; }
  .nav-a-7 { order: 2; font-size: 13px; padding: 9px 12px; }
  .nav-burger {
    order: 3; display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 36px; padding: 8px 9px; border: 1px solid #1a1713; border-radius: 4px;
    cursor: pointer; background: transparent;
  }
  .nav-burger span { display: block; height: 2px; background: #1a1713; border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid #1f6f5f; outline-offset: 2px; }
  .nav-div-5 {
    order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    white-space: normal; overflow: visible; font-size: 15px; margin-top: 4px; border-top: 1px solid #d8d0bf;
  }
  .nav-div-5 > a { padding: 13px 0; border-bottom: 1px solid #e6e0d3; }
  .nav-div-5 > a:last-child { border-bottom: 0; }
  .nav-toggle:checked ~ .nav-div-5 { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- Section rhythm: tighter vertical padding, same 20px gutter everywhere --- */
  .page-div-1 > section > div:first-child,
  .page-div-1 > header > div:first-child { padding-left: 20px; padding-right: 20px; }
  .hero-div-1 { padding-top: 56px; padding-bottom: 64px; gap: 40px; }
  .footer-div-2 { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Sticky side columns pin on desktop; stacked on a phone they would slide over the content below. */
  .changelog-div-1, .console-div-5, .prd-blueprint-aside-29, .sample-report-div-23, .shared-div-46 { position: static; }

  /* Long mono strings (log lines, PRD outline, code) may wrap instead of clipping. */
  .adopt-or-build-span-11 { white-space: normal; overflow: visible; }
  .deployment-span-6 { white-space: normal; animation: none; }

  /* --- index.html --- */
  .agents-div-1 { grid-template-columns: 1fr; justify-items: center; }
  .agents-div-7 { width: 100%; }
  .problem-div-10 { grid-template-columns: 1fr 1fr; }
  .problem-div-12 { font-size: 36px; }
  .factory-div-2, .factory-div-5 { gap: 8px; }
  .comparison-div-2, .shared-div-54 { grid-template-columns: 1fr 1fr 1fr; font-size: 14px; }
  .pricing-ul-9, .pricing-div-18 { grid-template-columns: 1fr; }

  /* --- platform.html --- */
  .build-div-9 { grid-template-columns: 1fr; }
  .build-div-17 { grid-template-columns: 1fr; text-align: left; }
  .build-div-23 { grid-template-columns: repeat(3, 1fr); }
  .build-div-28 { grid-template-columns: 1fr; }
  .run-div-10 { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .run-div-10 > :first-child { grid-column: 1 / -1; }
  .run-div-18 { grid-template-columns: 1fr; gap: 4px; }
  .trust-div-2 { grid-template-columns: 1.2fr repeat(4, 1fr); font-size: 10px; gap: 4px; }
  .trust-div-19 { grid-template-columns: repeat(3, 1fr); }
  .platform-hero-div-3 { grid-template-columns: 1fr 1fr; }

  /* --- factory.html --- */
  .prd-blueprint-div-5 { grid-template-columns: 1fr; }
  .prd-blueprint-article-6 { padding: 24px 20px; }
  .agent-hand-off-div-7 { grid-template-columns: 1fr 1fr; }
  .sample-report-div-4, .sample-report-button-9 { gap: 8px; }
  .adopt-or-build-div-14 { grid-template-columns: 26px 1fr; }
  .adopt-or-build-div-14 > :last-child { grid-column: 2; }

  /* --- agents.html --- */
  .memory-div-2 { grid-template-columns: 1fr 1fr; }
  .shared-div-29 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .changelog-div-4 { grid-template-columns: 56px 1fr; gap: 8px 12px; }
  .changelog-div-4 > :last-child { grid-column: 2; }
  .modes-and-roles-button-1 { padding: 12px; }

  /* --- blueprints.html --- */
  .catalog-div-2 { flex-direction: column; align-items: stretch; }
  .shared-li-86 { flex-wrap: wrap; }
  .catalog-input-4 { flex: 1 1 100%; min-width: 0; width: 100%; }
  .catalog-button-5 { white-space: normal; }
  .how-deploy-works-div-18 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  /* Narrow phones: only logo + hamburger in the bar; the CTA joins the open menu. */
  .nav-a-7 { display: none; order: 5; flex-basis: 100%; text-align: center; margin-top: 12px; padding: 12px; font-size: 14px; }
  .nav-toggle:checked ~ .nav-a-7 { display: block; }
  .hero-h1-3 { font-size: 40px; }
  .shared-div-29 { grid-template-columns: 1fr 1fr; }
  .trust-div-19 { grid-template-columns: repeat(2, 1fr); }
  .agent-hand-off-div-7 { grid-template-columns: 1fr; }
  .how-deploy-works-div-18 { grid-template-columns: 1fr 1fr; }
}