/* Shared artwork and motion for Pane's public pages. */
.marketing .lucide{display:inline-block;flex-shrink:0;vertical-align:middle}
.marketing a:has(>.lucide){display:inline-flex;align-items:center;gap:7px}
.marketing .button span[aria-hidden],.marketing .quiet-link span[aria-hidden]{display:inline-flex;align-items:center}
.marketing .provider-logo{display:flex;align-items:center;gap:12px;transition:transform .25s ease,color .25s ease}
.marketing .provider-logo img{width:40px;height:40px;flex-shrink:0}
.marketing img[src="/brands/grok.png"]{border-radius:24%}
.marketing .provider-logo:hover{transform:translateY(-4px)}
.marketing .provider-strip .provider-logo b{color:#ded8ce;font-size:21px}
.marketing .provider-strip>div{gap:58px}
.marketing .feature-art{display:flex;align-items:center;gap:7px;color:#c6a88d;margin-bottom:24px;min-height:34px}
.marketing .feature-art img{height:30px;width:30px}
.marketing .preview-nav>span{display:flex;align-items:center;gap:9px}
.marketing .preview-nav>span>span{padding:0;background:none}
.marketing .preview-search{display:flex;gap:7px;align-items:center}
.marketing .preview-search kbd{margin-left:auto;float:none}
.marketing .profile-symbol{border:0;background:none}
.marketing .profile-symbol img{width:32px;height:32px}
.marketing .plan li{display:flex;align-items:flex-start;gap:9px}
.marketing .plan li::before{content:none}
.marketing .plan li .lucide{margin-top:3px;color:#ba9676}
.marketing .desktop-art{height:172px;max-width:260px;background:radial-gradient(ellipse at 15% 100%,#9b573c99,transparent 65%),radial-gradient(ellipse at 90% 10%,#67638766,transparent 60%),#24201f}
.marketing .desktop-window{inset:20px 14px 43px 25px;padding:0;overflow:hidden;background:#171716f2}
.marketing .desktop-title{display:flex;align-items:center;gap:5px;border-bottom:1px solid #50463c;padding:6px 8px}
.marketing .desktop-window .desktop-title span{background:none;width:auto;height:auto;margin:0;font-size:8px;color:#c1b6a6}
.marketing .desktop-document{padding:9px 10px}
.marketing .desktop-document strong{font-size:10px;font-weight:500;color:#e7ddd0;display:block}
.marketing .desktop-document p{font-size:7px;margin:3px 0 8px;line-height:1.4;color:#aaa091}
.marketing .desktop-window .desktop-task{display:flex;gap:4px;align-items:center;margin-top:4px;color:#c3a180}
.marketing .desktop-window .desktop-task span{width:auto;height:auto;background:none;margin:0;font-size:7px;color:#b8ac9b}
.marketing .desktop-dock{gap:5px;padding:4px 7px;bottom:5px;background:#2b2523d9}
.marketing .desktop-dock img{width:22px;height:22px}
.marketing .download-visual{min-height:410px;position:relative;overflow:hidden}
.marketing .download-app-art{display:flex;flex-direction:column;align-items:center;position:relative}
.marketing .download-app-art>img{width:220px;height:220px;filter:drop-shadow(0 24px 30px #0006)}
.marketing .download-provider-row{display:flex;align-items:center;gap:18px;margin-top:18px}
.marketing .download-art-caption{font-size:12px;color:#aca092;margin:24px 0 0}
.marketing .faq details{overflow:hidden}
.marketing .faq summary{transition:color .2s ease}
.marketing .faq summary:hover{color:#fff}
.marketing .faq summary::after{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.marketing .faq details[open] summary::after{content:'+';transform:rotate(45deg)}
.marketing .faq details p{animation:faq-content .3s ease both}
.motion-toggle{position:fixed;right:20px;bottom:18px;z-index:25;border:1px solid #4c443b;border-radius:5px;background:#1a1816eF;backdrop-filter:blur(12px);color:#c6b9a8;padding:8px 12px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 4px 20px #0003;display:flex;align-items:center;gap:8px}
.motion-toggle::before{content:'';width:7px;height:9px;border-inline:2px solid currentColor}
.motion-toggle[aria-pressed=true]::before{height:0;width:0;border:5px solid transparent;border-left:7px solid currentColor;border-right:0}
.motion-toggle:hover{color:white;border-color:#8b705b}
.marketing .motion-region{--motion-state:paused}
.marketing .motion-region.in-view{--motion-state:running}
.marketing.motion-enabled .hero-grid{animation:grid-drift 22s linear infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .hero h1 span::after{animation:cursor-blink 1.2s steps(1,end) infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .hero>*{animation:rise-in .8s cubic-bezier(.22,1,.36,1) both}
.marketing.motion-enabled .hero h1{animation-delay:.08s}
.marketing.motion-enabled .hero-description{animation-delay:.16s}
.marketing.motion-enabled .hero-actions{animation-delay:.24s}
.marketing.motion-enabled .hero-caption{animation-delay:.32s}
.marketing.motion-enabled .tour-panel{animation:panel-in .5s cubic-bezier(.22,1,.36,1) both}
.marketing.motion-enabled .sample-message,.marketing.motion-enabled .agenda-row{animation:rise-in .65s cubic-bezier(.22,1,.36,1) both}
.marketing.motion-enabled .sample-message:nth-child(3),.marketing.motion-enabled .agenda-row:nth-child(3){animation-delay:.18s}
.marketing.motion-enabled .sample-message:nth-child(4),.marketing.motion-enabled .agenda-row:nth-child(4){animation-delay:.36s}
.marketing.motion-enabled .sample-checklist>span{animation:rise-in .5s ease both;animation-delay:.4s}
.marketing.motion-enabled .sample-checklist>span:nth-child(2){animation-delay:.6s}
.marketing.motion-enabled .sample-checklist>span:nth-child(3){animation-delay:.8s}
.marketing.motion-enabled .desktop-orbit{animation:orbit-drift 12s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .desktop-window{animation:desktop-float 7s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .desktop-dock img{animation:dock-breathe 5s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .desktop-dock img:nth-child(2){animation-delay:.5s}
.marketing.motion-enabled .desktop-dock img:nth-child(3){animation-delay:1s}
.marketing.motion-enabled .desktop-dock img:nth-child(4){animation-delay:1.5s}
.marketing.motion-enabled .provider-logo{animation:logo-float 6s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .provider-logo:nth-child(2){animation-delay:-2s}
.marketing.motion-enabled .provider-logo:nth-child(3){animation-delay:-4s}
.marketing.motion-enabled .profile-stack article{animation:profile-float 8s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .profile-stack article:nth-child(2){animation-delay:-2.6s}
.marketing.motion-enabled .profile-stack article:nth-child(3){animation-delay:-5.2s}
.marketing.motion-enabled .principle-grid.has-entered article,.marketing.motion-enabled .team-features.has-entered article,.marketing.motion-enabled .download-details.has-entered article{animation:rise-in .75s cubic-bezier(.22,1,.36,1) both}
.marketing.motion-enabled .principle-grid.has-entered article:nth-child(2),.marketing.motion-enabled .team-features.has-entered article:nth-child(2),.marketing.motion-enabled .download-details.has-entered article:nth-child(2){animation-delay:.12s}
.marketing.motion-enabled .principle-grid.has-entered article:nth-child(3),.marketing.motion-enabled .team-features.has-entered article:nth-child(3),.marketing.motion-enabled .download-details.has-entered article:nth-child(3){animation-delay:.24s}
.marketing.motion-enabled .team-features.has-entered article:nth-child(4){animation-delay:.36s}
.marketing.motion-enabled .plan.has-entered,.marketing.motion-enabled .get-started.has-entered,.marketing.motion-enabled .download-hero.has-entered,.marketing.motion-enabled .auth-panel.has-entered{animation:rise-in .8s cubic-bezier(.22,1,.36,1) both}
.marketing.motion-enabled .download-app-art>img{animation:app-float 7s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .download-provider-row img{animation:logo-float 6s ease-in-out infinite;animation-play-state:var(--motion-state)}
.marketing.motion-enabled .download-provider-row img:nth-child(2){animation-delay:-2s}
.marketing.motion-enabled .download-provider-row img:nth-child(3){animation-delay:-4s}
.marketing .button .lucide,.marketing .quiet-link .lucide{transition:transform .22s ease}
.marketing .button:hover .lucide,.marketing .quiet-link:hover .lucide{transform:translate(2px,-2px)}
.marketing.motion-paused *, .marketing.motion-paused *::before, .marketing.motion-paused *::after{animation-play-state:paused!important}
.marketing.motion-paused .hero>*,.marketing.motion-paused .tour-panel,.marketing.motion-paused .sample-message,.marketing.motion-paused .agenda-row,.marketing.motion-paused .sample-checklist>span,.marketing.motion-paused .principle-grid article,.marketing.motion-paused .team-features article,.marketing.motion-paused .download-details article,.marketing.motion-paused .plan,.marketing.motion-paused .get-started,.marketing.motion-paused .download-hero,.marketing.motion-paused .auth-panel,.marketing.motion-paused .faq details p{animation:none!important;opacity:1;transform:none}
@keyframes rise-in{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-in{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes faq-content{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes grid-drift{to{background-position:56px 56px}}
@keyframes cursor-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes orbit-drift{0%,100%{transform:translate(0,0) rotate(-25deg)}50%{transform:translate(14px,-8px) rotate(8deg)}}
@keyframes desktop-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes dock-breathe{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-4px)}}
@keyframes logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes profile-float{0%,100%{transform:translate(0,0)}50%{transform:translate(-7px,-4px)}}
@keyframes app-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@media(max-width:760px){.marketing .provider-strip>div{gap:24px 28px;max-width:none}.marketing .provider-strip .provider-logo b{font-size:16px}.marketing .provider-logo{gap:8px}.marketing .provider-logo img{width:30px;height:30px}.marketing .download-visual{min-height:335px}.marketing .download-app-art>img{width:170px;height:170px}.motion-toggle{right:12px;bottom:12px;font-size:10px;padding:7px 9px}.marketing .feature-art{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.marketing *, .marketing *::before, .marketing *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-toggle{display:none}}