/* ============================================================
   Dynozen — temporary holding page
   Palette / type match the "paper" (light) theme of the design
   system (apps/portal/src/styles/dynozen.css:17–35), inlined here.
   Base rules from the original export's <style> block, plus real
   :hover/:active (originally fake style-hover/style-active attrs)
   and mobile-first responsive overrides the export lacked.
   ============================================================ */

/* --- Base (from the design export's <style>) --- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F8F4EA;
  font-family: 'Karla', system-ui, sans-serif;
  color: #20241F;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

@keyframes blink { 0%,55% { opacity: 1 } 56%,100% { opacity: 0 } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes spin  { to { transform: rotate(360deg) } }

/* --- Interactive states (were style-hover / style-active in the export) --- */
.nav-link { transition: color .15s ease, background .15s ease; }
.nav-link:hover { color: #114232; background: rgba(17,66,50,.07); }

.btn { transition: transform .06s ease, border-bottom-width .06s ease, background .15s ease; }
.btn-primary:active,
.btn-secondary:active,
.btn-cta:active,
.btn-approve:active,
.btn-deny:active {
  border-bottom-width: 1px;
  transform: translateY(2px);
}
/* Hero "See how it works" CTA: brighten on hover so it clearly invites a click */
.btn-cta:hover { background: #2E9E6B !important; }

.foot-link { transition: color .15s ease; }
.foot-link:hover { color: #114232; }

/* Media/embeds never push the layout wider than the viewport */
img, svg, video { max-width: 100%; }

/* The mock terminal holds long, non-wrapping monospace lines. Let it scroll
   inside its own box instead of stretching the page (safe at every width). */
.hero-term { min-width: 0; overflow-x: auto; }

/* ============================================================
   Responsive (mobile-first overrides).
   The export used fixed px sizes and 3-col grids with no
   breakpoints. These media queries override the inline styles,
   so !important is required to win over element style="".
   Breakpoints: 900 (tablet), 640 (phone), 400 (small phone).
   Checked at ~375px, ~414px, ~768px, ~1024px, ~1440px.
   ============================================================ */

/* Tablet and below */
@media (max-width: 900px) {
  .features-grid,
  .security-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .features-grid .feat-wide {
    grid-column: span 2 !important;
  }

  .hero-h1     { font-size: 46px !important; }
  .security-h2 { font-size: 34px !important; }
  .agent-h2    { font-size: 36px !important; }
  .final-h2    { font-size: 38px !important; }

  /* Agent section: card stops being fixed-width, wraps under the copy */
  .agent-row  { gap: 40px !important; }
  .agent-card { width: 100% !important; max-width: 470px; }
}

/* Phone */
@media (max-width: 640px) {
  /* Single column card grids */
  .features-grid,
  .security-grid {
    grid-template-columns: 1fr !important;
  }
  .features-grid .feat-wide {
    grid-column: span 1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .feat-wide-aside {
    width: 100% !important;
  }

  /* Tighter section padding */
  .section { padding-left: 20px !important; padding-right: 20px !important; }
  .hero    { padding-top: 52px !important; padding-bottom: 44px !important; }
  .agent-section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .final-cta { padding: 48px 20px !important; }
  .nav     { padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important; }
  .footer  { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hide the secondary nav links on narrow screens; the CTA stays */
  .nav-links { display: none !important; }

  /* Headings */
  .hero-h1     { font-size: 34px !important; }
  .hero-sub    { font-size: 15.5px !important; }
  .security-h2 { font-size: 27px !important; }
  .agent-h2    { font-size: 29px !important; }
  .final-h2    { font-size: 30px !important; }

  /* Stack the hero CTA buttons full-width */
  .hero-cta { flex-direction: column !important; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Hero product mock: keep the REAL desktop layout (window tabs, terminal and
     agent panel side by side) and just shrink the whole thing to fit, so it
     reads as a desktop app instead of reflowing its elements onto new rows.
     `zoom` scales the layout footprint too (unlike `transform: scale`), so the
     height collapses correctly with no leftover gap and no floating tabs.
     820px * 0.40 = ~328px, which fits phones down to ~360px wide. */
  .hero-mock {
    width: 820px !important;
    max-width: none !important;
    zoom: 0.40;
    margin: 30px auto 0 !important;
  }

  /* Agent-section copy min-width would otherwise force horizontal overflow */
  .agent-row > div:first-child { min-width: 0 !important; }
  .agent-card { max-width: none !important; }
}

/* Small phones (~360–400px) */
@media (max-width: 400px) {
  .section   { padding-left: 16px !important; padding-right: 16px !important; }
  .nav       { padding-left: 14px !important; padding-right: 14px !important; }
  .final-cta { padding: 42px 16px !important; }

  .hero-h1     { font-size: 30px !important; }
  .hero-sub    { font-size: 15px !important; }
  .security-h2 { font-size: 24px !important; }
  .agent-h2    { font-size: 26px !important; }
  .final-h2    { font-size: 27px !important; }

  /* Shrink the desktop mock a touch more so it also fits ~320px phones */
  .hero-mock { zoom: 0.34; }
}