/* ==========================================================================
   deploy.css — additions to the generated design, kept in one separate file
   so styles.css stays the untouched design-token sheet.
   1. Focus visibility (keyboard users)
   2. Mobile navigation (the prototype hid the nav links below 980px)
   3. Small-screen form layout
   4. prefers-reduced-motion
   ========================================================================== */

/* 1. Focus ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.slot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.nav .logo:focus-visible,
.foot a:focus-visible { border-radius: 4px; }

/* 2. Mobile navigation ---------------------------------------------------- */
.navtoggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
}
.navtoggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.nav.menu-open .navtoggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .navtoggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .navtoggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilemenu { display: none; }

@media (max-width: 980px) {
  .navtoggle { display: flex; }
  .mobilemenu {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 12px 22px 28px;
    box-shadow: 0 30px 60px -40px rgba(20, 18, 70, .5);
  }
  .mobilemenu.open { display: flex; flex-direction: column; }
  .mobilemenu a:not(.btn) {
    padding: 14px 0;
    font-size: 17px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
}

/* 3. Small-screen form ---------------------------------------------------- */
@media (max-width: 560px) {
  .form-pair { grid-template-columns: 1fr !important; }
  .slots { grid-template-columns: repeat(2, 1fr) !important; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}

/* 4. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee-track { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hl::after { animation: none !important; }
}

/* 5. Footer: industries are plain labels (no industry pages exist yet) */
.foot span{display:block;color:var(--ink-3);margin-bottom:10px;font-size:15px}
/* Utility: small print under the demo form */
.form-note{font-size:12px;color:rgba(245,242,236,.55);text-align:center}

/* 6. Signature detail fix: the marigold highlight bar behind the last hero word
   was painted behind the page background in the prototype (z-index:-1 with no
   stacking context), so it never showed. isolation gives it its own context. */
.hl{isolation:isolate}

/* 7. Phone fixes found in review (390px) */
@media (max-width: 700px) {
  /* nav: the LAUNCHPAD pill collided with the Book a demo button */
  .nav .wrap { gap: 14px; }
  .nav .prod { display: none; }
  .nav .logo img { height: 32px; }
  .nav .right .btn.sm { height: 40px; padding: 0 14px; font-size: 13px; }
  /* floating demo tags were clipped at the screen edge */
  .float-tag { display: none; }
  /* hero demo window: tighter tabs, shorter stage */
  .demo-shell { overflow: hidden; }
  .stage-tab { font-size: 11px; }
  .stage-tab .n { font-size: 9.5px; margin-right: 4px; }
  .stage-body { height: 300px; }
  .compare-labs .lab, .ba .lab { font-size: 9px; letter-spacing: .06em; padding: 5px 8px; }
}

@media (max-width: 560px) {
  /* integration tiles: 3 columns could not shrink, which made the page scroll sideways */
  .integ { grid-template-columns: repeat(2, 1fr) !important; }
  .integ-tile { min-width: 0; }
  .integ-tile b, .integ-tile small { overflow-wrap: anywhere; }
  .stage-body { height: 260px; }
}

/* 8. Anchor targets must clear the sticky 76px nav */
section[id], main[id], footer[id] { scroll-margin-top: 92px; }

/* 9. Tighter nav offset on phones */
@media (max-width: 700px) {
  section[id] { scroll-margin-top: 84px; }
}

/* 10. Small mono labels were 2.6:1 against the paper — under WCAG AA (4.5:1).
   Same hue, darker: the hierarchy still reads tertiary. */
:root { --ink-3: rgba(31, 29, 82, .62); }