/* Selected founder-supplied Uiverse ideas, adapted for NAVE.
   cssbuttons-io: expanding circle; Admin12121: navigation highlight;
   kennyotsu: rolling words. MIT notices in THIRD_PARTY_NOTICES.md. */
.accessible-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* Keep all labels visible and link geometry stable. */
.desktop-nav { gap:14px; flex-wrap:wrap; min-width:0; }
.footer-links { flex-wrap:wrap; min-width:0; }
@media(min-width:768px) and (max-width:1100px) { .header-inner { height:auto; min-height:88px; padding-block:12px; } .desktop-nav { flex:1; row-gap:0; } }
.desktop-nav a { position:relative; isolation:isolate; padding:12px 10px; border-radius:7px; }
.desktop-nav a:before { content:""; position:absolute; inset:0; border-radius:7px; background:#f2e2de; z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.desktop-nav a:is(:hover,:focus-visible,[aria-current=page]):before { transform:scaleX(1); }
.desktop-nav a:is(:hover,:focus-visible,[aria-current=page]) { color:var(--red-text); text-decoration:none; }
.menu-glyph { width:22px; height:22px; display:inline-block; position:relative; vertical-align:middle; margin-left:8px; }
.menu-glyph i { position:absolute; left:0; top:7px; width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease); }
.menu-glyph i:last-child { top:13px; }
.menu-toggle[aria-expanded=true] .menu-glyph i:first-child,.menu-glyph-close i:first-child { transform:translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .menu-glyph i:last-child,.menu-glyph-close i:last-child { transform:translateY(-3px) rotate(-45deg); }
.mobile-dialog[open] .menu-glyph-close { animation:menu-arrive .4s var(--ease); }
@keyframes menu-arrive { from { transform:rotate(-45deg); opacity:.4; } to { transform:none; opacity:1; } }
/* Use red on the diagram, not the whole reading panel. */
.example-story { background:#faf8f7; color:var(--ink); }
.example-story .eyebrow { color:var(--red-text); }
.example-story .eyebrow:before { background:var(--signal); }
.example-story :focus-visible { outline-color:var(--red-text); }
.example-story .text-link:hover { color:var(--red-text); }
.business-diagram { background:var(--signal); color:white; border-color:transparent; }
.business-diagram rect,.business-diagram circle { fill:var(--signal); }
/* From Uiverse.io by cssbuttons-io. Fluid label replaces fixed/absolute text. */
.learn-link { position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:13px; min-height:48px; max-width:100%; padding:0 17px 0 0; margin-top:20px; color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; border-radius:26px; }
.learn-link:before { content:""; position:absolute; inset:0; z-index:-1; border-radius:26px; background:var(--red-text); clip-path:inset(0 calc(100% - 48px) 0 0 round 26px); transition:clip-path .45s cubic-bezier(.65,0,.076,1); }
.learn-circle { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; color:white; }
.learn-circle span { font-size:22px; transition:transform .45s cubic-bezier(.65,0,.076,1); }
.learn-label { position:relative; line-height:1.4; padding-block:10px; }
.learn-link:is(:hover,:focus-visible) { color:white; text-decoration:none; }
.learn-link:is(:hover,:focus-visible):before { clip-path:inset(0 0 0 0 round 26px); }
.learn-link:is(:hover,:focus-visible) .learn-circle span { transform:translateX(4px); }
.example-story .learn-link { margin-top:auto; }
/* From Uiverse.io by kennyotsu. One 4.5s run; no loading state or infinite loop. */
.stage-copy .rolling-note { margin:24px 0; font-size:clamp(18px,2vw,24px); color:var(--ink); letter-spacing:-.025em; }
.rolling-visual { display:flex; gap:.28em; flex-wrap:wrap; }
.rolling-window { height:1.5em; overflow:hidden; display:inline-block; width:6.6em; color:var(--red-text); }
.rolling-track { display:block; transform:translateY(-3em); }
.rolling-track>span { display:block; height:1.5em; line-height:1.5; white-space:nowrap; }
.rolling-note.asset-enter .rolling-track { animation:nave-word-roll 4.5s var(--ease) both; }
@keyframes nave-word-roll { 0%,22% { transform:translateY(0); } 35%,60% { transform:translateY(-1.5em); } 75%,100% { transform:translateY(-3em); } }
@media(prefers-reduced-motion:reduce) { .rolling-note.asset-enter .rolling-track { animation:none!important; transform:translateY(-3em); } }
@media print { .learn-link { color:black; } .learn-link:before { display:none; } .learn-circle { color:black; } .business-diagram { background:white; color:black; } .business-diagram rect,.business-diagram circle { fill:white; } }