/* Analyzze demonstration navigation; loaded only on sample pages. */
.demo-notice { position:sticky; top:0; z-index:70; font-size:12px; }
.demo-notice .demo-container { min-height:52px; padding-block:8px; gap:8px 20px; flex-wrap:wrap; }
.demo-notice-links { display:flex; gap:8px 18px; flex-wrap:wrap; }
.demo-notice-links a { display:inline-flex; min-height:36px; align-items:center; color:#fff; text-decoration:underline; text-underline-offset:4px; }
.demo-header { position:relative; }
.demo-contact-example { pointer-events:none; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
section[id] { scroll-margin-top:90px; }
.hero-grid>*,.expert-grid>*,.contact-grid>* { min-width:0; }

/* The overlay is a sibling of the clipped panel, not a child of it. */
.hero-visual { padding:16px 24px 24px; overflow:visible; }
.visual-stage { position:relative; isolation:isolate; width:min(420px,100%); min-width:0; flex:none; overflow:visible; }
.visual-stage > .visual-panel { width:100%; max-width:none; margin:0; z-index:0; }
.visual-stage > .visual-floats { display:block; position:absolute; inset:0; z-index:2; overflow:visible; pointer-events:none; }
.visual-stage .float-chip { max-width:calc(100% - 24px); }
.visual-stage .float-chip b { min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.visual-stage .float-icon { flex-shrink:0; }
@media(max-width:980px) {
  .visual-stage { width:min(430px,100%); }
  .visual-stage .float-chip-1 { left:-16px; top:96px; }
  .visual-stage .float-chip-2 { right:-16px; top:156px; }
}
@media(max-width:680px) {
  .demo-notice .demo-container { align-items:flex-start; gap:2px; }
  .demo-notice-links { width:100%; justify-content:space-between; }
  .demo-notice-links a { font-size:11px; min-height:40px; }
  .demo-contact-example small { overflow-wrap:anywhere; }
  section[id] { scroll-margin-top:105px; }
  .hero-visual { padding:12px 18px 30px; }
  .visual-stage { width:min(360px,100%); }
  .visual-stage .float-chip { padding:7px 9px; gap:6px; font-size:10px; }
  .visual-stage .float-chip-1 { left:-12px; top:62px; }
  .visual-stage .float-chip-2 { right:-12px; top:116px; }
  .visual-stage .float-chip-3 { left:12px; bottom:-12px; top:auto; }
}
