/* Isolated compact composition. >=1280 keeps all accepted desktop geometry. */
.site-header { background:var(--paper); }
.compact-menu-toggle, .site-header #compact-menu { display:none; }

@media (max-width:1279px) {
  :root { --hero-size:clamp(52px,5.2vw,62px); --heading-size:48px; }
  .container { width:calc(100% - 64px); }
  .hero { height:auto; overflow:visible; padding-bottom:32px; }
  .hero-copy { padding-top:64px; }
  .hero-copy h1 { width:100%; max-width:720px; }
  .hero-description { width:auto; max-width:460px; }
  .hero-product { position:relative; top:auto; left:auto; width:calc(100% - 64px); height:auto; margin:64px auto 0; }
  .sheet-back { inset:-12px 0 132px 16px; }
  .camera-sheet { position:relative; inset:auto; height:auto; }
  .hero-feed { height:auto; aspect-ratio:16 / 9; }
  .hero-event { top:auto; left:24px; bottom:190px; width:420px; max-width:calc(100% - 48px); }
  .hero-event img { width:100%; }
  .hero-time-sheet { position:relative; top:auto; left:auto; width:calc(100% - 32px); margin:-1px auto 0; }
  .hero-timeline img { left:calc(60% - 1099.006211px); }
  .event-time-link { width:100%; height:100%; }

  .archive-section { padding-top:32px; }
  .archive-heading { display:block; margin-bottom:32px; }
  .archive-heading h2 { max-width:none; }
  .archive-heading>p { width:auto; max-width:460px; margin-top:24px; padding-bottom:0; }
  .archive-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .archive-feed { margin-left:0; width:100%; height:auto; aspect-ratio:16 / 9; }
  .archive-controls { display:grid; grid-template-columns:200px minmax(0,1fr) minmax(0,1.2fr); align-items:center; gap:32px; padding:24px 0 0; }
  .time-readout,.event-jump { margin-top:0; }
  .event-jump { border:0; padding:8px 0; }
  .archive-timeline { width:100%; margin:24px 0 0; }
  .archive-timeline img { left:calc(60% - 263.130435px); }

  #analytics,#architecture { padding-top:96px; }
  #analytics .an-heading-row,#architecture .ar-heading-row { grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
  #analytics h2,#architecture h2 { font-size:48px; }
  #analytics .an-support,#architecture .ar-support { max-width:650px; }
  #analytics .an-camera { height:auto; aspect-ratio:16 / 9; }
  #analytics .an-event-card { top:24px; right:24px; width:300px; padding:16px; }
  #analytics .an-event-head { gap:12px; }
  #analytics .an-event-head img { width:80px; height:60px; }
  #analytics .an-event-chips { margin-top:16px; }
  #analytics .an-open-record { margin-top:16px; }
  #analytics .an-step { padding-right:16px; }
  #analytics .an-step+.an-step { padding-left:16px; }

  /* Real nodes reflow; diagram coordinates follow their actual boxes. */
  #architecture .ar-scene {
    height:auto; display:grid;
    grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);
    grid-template-areas:"cameras core" ". storage" "access cloud";
    gap:56px 64px; padding:16px 0 0;
  }
  #architecture .ar-paths { z-index:0; }
  #architecture .ar-cameras { grid-area:cameras; position:relative; top:auto; left:auto; width:auto; height:auto; display:grid; align-content:start; gap:16px; }
  #architecture .ar-camera-sheet { position:relative; top:auto; left:auto; width:calc(100% - 24px); max-width:260px; }
  #architecture .ar-camera-two { margin-left:24px; }
  #architecture .ar-camera-sheet img { height:100px; }
  #architecture .ar-discovery { position:static; margin-left:24px; }
  #architecture .ar-core { grid-area:core; position:relative; left:auto; top:auto; width:auto; height:300px; }
  #architecture .ar-core-sheet { grid-area:core; position:relative; left:12px; top:12px; width:auto; height:300px; }
  #architecture .ar-storage { grid-area:storage; position:relative; left:auto; top:auto; width:auto; height:108px; margin:0 12px; }
  #architecture .ar-storage-sheet { grid-area:storage; position:relative; left:10px; top:10px; width:auto; height:108px; margin:0 12px; }
  #architecture .ar-access { grid-area:access; position:relative; left:auto; top:auto; width:auto; height:auto; padding:24px 0 0; border-left:0; border-top:1px solid var(--hairline); }
  #architecture .ar-cloud { grid-area:cloud; position:relative; left:auto; top:auto; width:auto; align-self:start; padding-top:24px; }
  #architecture .ar-stream-label,#architecture .ar-storage-path-label,#architecture .ar-local-label,#architecture .ar-remote-label { z-index:1; background:var(--canvas); padding:2px 4px; }
  #architecture .ar-stream-label { transform:translate(-50%,-50%); }
  #architecture .ar-footnote { gap:32px; }
  #architecture .ar-footnote>span { max-width:200px; }
}

@media (max-width:1119px) {
  .site-header { position:relative; z-index:20; }
  .site-header nav:not(#compact-menu),.header-account { display:none; }
  .compact-menu-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; margin-left:auto; background:var(--paper); border:1px solid var(--hairline); border-radius:6px; font-size:14px; }
  .compact-menu-toggle[aria-expanded=true] { border-color:var(--accent); color:var(--accent); }
  .header-install { flex:none; margin-left:16px; }
  .site-header #compact-menu:not([hidden]) { display:flex; flex-direction:column; position:absolute; top:calc(100% - 1px); right:32px; width:300px; max-width:calc(100% - 64px); margin:0; padding:12px; gap:0; border:1px solid var(--hairline); border-radius:0 0 12px 12px; background:var(--paper); font-size:15px; z-index:30; }
  #compact-menu a { padding:14px 12px; border-radius:6px; }
  #compact-menu a:hover { background:var(--accent-soft); }
  #compact-menu a:focus-visible { outline-offset:0; }
}

@media (max-width:899px) {
  :root { --heading-size:44px; }
  #analytics h2,#architecture h2 { font-size:44px; }
  #analytics .an-steps { grid-template-columns:minmax(0,1fr); }
  #analytics .an-step,#analytics .an-step+.an-step { padding:20px 0; }
  #analytics .an-step-copy { margin-top:4px; }
  #analytics .an-event-card { right:16px; top:16px; width:280px; }
  .archive-controls { gap:20px; grid-template-columns:184px minmax(0,1fr) minmax(0,1.2fr); }
  .mode-controls { width:184px; }
  #architecture .ar-scene { grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:56px 48px; }
  #architecture .ar-core { padding:24px; }
  #architecture .ar-storage { padding:20px; gap:16px; }
  #architecture .ar-storage h3 { font-size:24px; }
  #architecture .ar-footnote { display:block; }
  #architecture .ar-footnote>span { display:block; margin-top:12px; max-width:none; }
}
/* Widths below768 are not a signed-off mobile design. This prevents minimum
   grid tracks from causing page overflow while keeping the compact proof usable. */
@media (max-width:767px) {
  .container,.hero-product { width:calc(100% - 40px); }
  .hero-copy h1 { font-size:clamp(32px,6.8vw,52px); }
  .hero-actions { width:auto; flex-wrap:wrap; gap:20px; }
  .archive-controls { grid-template-columns:1fr; }
  #architecture .ar-scene { grid-template-columns:minmax(0,1fr); grid-template-areas:"cameras" "core" "storage" "access" "cloud"; }
  .header-install { font-size:11px; padding:0 10px; margin-left:8px; }
  .compact-menu-toggle { padding:0 10px; }
}