/* Readable type, visible motion, and live appearance controls. */
.site-header .brand{font-size:27px}.site-header .brand img{width:62px;height:44px}
.site-header nav{font-size:16px;gap:30px}.nav-cta{font-size:14px;padding:12px 18px}
.scene-scroll{font-size:15px;gap:12px}.scene-scroll>span:last-child{font-size:23px}
.scene-toggle{font-size:13px;padding:10px 14px}
.section-heading>p{font-size:17px}.section-heading .section-label,.mini-label,.appearance-copy .section-label,.privacy-copy .section-label,.faq-section .section-label{font-size:12px;letter-spacing:1.6px}
.visual-feature p,.appearance-copy p,.protocol-cards p{font-size:16px;line-height:1.75}
.visual-feature h3{font-size:29px}.feature-art{height:220px}
.appearance-panel{padding:45px;grid-template-columns:1fr 1fr;gap:45px;transition:background .35s,box-shadow .35s}
.appearance-copy p{max-width:430px;margin-bottom:20px}.appearance-copy .text-link{font-size:15px}
.appearance-copy .appearance-status{font-size:14px;font-weight:600;line-height:1.5;color:var(--indigo);margin:0 0 18px}
.app-icon-sample{border:0;background:transparent;padding:7px;border-radius:24px;cursor:pointer;color:inherit;transition:transform .25s,background .25s}
.app-icon-sample>span{font-size:15px;margin-top:23px;font-weight:500;color:#4f6380}
.app-icon-sample>div{transition:box-shadow .25s,transform .25s}
.app-icon-sample:hover>div{transform:translateY(-5px)}
.app-icon-sample.active>div{outline:3px solid var(--indigo);outline-offset:5px}
.app-icon-sample.active>span{color:var(--indigo);font-weight:700}
.app-icon-sample.active>span:after{content:' ✓';color:inherit}
.appearance-panel.is-dark{background:radial-gradient(ellipse at 85% 15%,#35466f,#142033 85%);border-color:#536783;box-shadow:0 18px 45px #0f172a2b}
.appearance-panel.is-dark h2{color:#f1f5ff}.appearance-panel.is-dark p{color:#bccbe0}
.appearance-panel.is-dark .section-label,.appearance-panel.is-dark .text-link,.appearance-panel.is-dark .text-link span,.appearance-panel.is-dark .appearance-status,.appearance-panel.is-dark .app-icon-sample>span{color:#c4b5fd}
.appearance-panel.is-dark .app-icon-sample.active>div{outline-color:#c4b5fd}
.appearance-panel.is-glass{background:radial-gradient(ellipse at 0 0,#22d3ee38,transparent 65%),linear-gradient(120deg,#eefbffb3,#cddaff9e,#d8c8ff9e);box-shadow:inset 0 1px 2px white,0 18px 45px #6366f126}
.preview-glass .app-window.is-glass{background:radial-gradient(ellipse at 0 0,#a5f3fc99,transparent 75%),linear-gradient(120deg,#e5f7ffba,#ded6ffbd);border-color:#fff;box-shadow:0 18px 40px #6366f120,inset 0 1px 2px #fff}
.is-glass .device-card{background:#ffffff80;border-color:#fff}.is-glass .device-details{background:#ffffff35}
.protocol-cards p{min-height:85px}.protocol-foot{font-size:13px}.protocol-disclaimer{font-size:12px;color:#64748b}
.privacy-panel{grid-template-columns:.85fr 1.15fr;padding:38px 48px;gap:35px}
.privacy-copy h2{font-size:44px}.privacy-copy p{font-size:18px;line-height:1.75;max-width:490px}
.privacy-points{gap:14px 22px;margin-top:25px}.privacy-points span{font-size:15px;line-height:1.5}.privacy-points svg{width:18px;height:18px}
.faq-section{gap:55px;grid-template-columns:.75fr 1.25fr}.faq-section h2{font-size:44px}
.faq-section>div>p{font-size:17px;line-height:1.75;color:#64748b}.faq-list{padding:7px 28px}
.faq-list summary{font-size:17px;line-height:1.5;padding:23px 0;gap:20px}.faq-list summary span{flex-shrink:0}
.faq-list details p{font-size:16px;line-height:1.8;padding:0 12px 23px 0;color:#64748b}
.brand-footer p{font-size:14px}.brand-footer{gap:20px;flex-wrap:wrap}.brand-footer .brand{font-size:24px}
.mountain-pan{inset:-6%;width:112%;height:112%;animation:alpine-drift 18s ease-in-out infinite alternate;transform-origin:50% 55%}
.cloud-ribbon{left:-30%;top:14%;width:95%;height:16%;background:radial-gradient(ellipse,#fff9,transparent 66%);filter:blur(13px);animation:cloud-sail 16s ease-in-out infinite alternate;opacity:.75}
.ribbon-two{top:32%;left:15%;height:11%;opacity:.6;animation-duration:21s;animation-delay:-8s;animation-direction:alternate-reverse}
.valley-mist{left:-25%;width:150%;bottom:13%;height:24%;filter:blur(12px);background:radial-gradient(ellipse,#eaf5ffc7,transparent 66%);animation:valley-flow 12s ease-in-out infinite alternate}
.mist-two{bottom:35%;height:12%;animation-duration:17s;animation-direction:alternate-reverse}
.sky-glow{animation:daylight 9s ease-in-out infinite alternate}
.hero-logo{animation:logo-hover 6s ease-in-out infinite}
.spectrum-scroll span{height:5px;background:linear-gradient(90deg,var(--indigo),var(--sky-blue),var(--aqua),var(--periwinkle),var(--indigo));background-size:300% 100%;animation:spectrum-flow 3s linear infinite;box-shadow:0 0 0 4px #ffffff70,0 0 18px #22d3ee55}
@keyframes alpine-drift{from{transform:translate3d(-1.5%,.4%,0) scale(1)}to{transform:translate3d(1.5%,-.8%,0) scale(1.065)}}
@keyframes cloud-sail{from{transform:translate3d(-12%,0,0)}to{transform:translate3d(29%,4%,0)}}
@keyframes valley-flow{from{transform:translate3d(-9%,2%,0);opacity:.35}to{transform:translate3d(9%,-6%,0);opacity:.85}}
@keyframes daylight{from{opacity:.2;transform:scale(.95)}to{opacity:.85;transform:scale(1.15)}}
@keyframes logo-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spectrum-flow{from{background-position:0% 50%}to{background-position:150% 50%}}
@media(max-width:1200px){.brand-footer{justify-content:center;gap:18px 22px}.brand-footer p{font-size:13px}.footer-signature{font-size:23px}.appearance-panel{padding:36px;gap:30px}.appearance-copy h2{font-size:36px}.privacy-copy h2{font-size:40px}}
@media(max-width:950px){.site-header nav{gap:19px;font-size:15px}.site-header .brand{font-size:24px}.nav-cta{font-size:13px;padding:11px 14px}.app-icon-gallery{gap:10px}.appearance-panel{grid-template-columns:1fr;text-align:center;gap:35px}.appearance-copy p{margin-left:auto;margin-right:auto}.app-icon-gallery{max-width:475px;width:100%;margin:auto}.app-icon-sample{max-width:145px}.privacy-panel{padding:32px;grid-template-columns:.75fr 1.25fr;gap:25px}.privacy-copy p{font-size:17px}.faq-section{grid-template-columns:1fr;gap:25px}.faq-section>div>p br{display:none}.brand-footer{justify-content:stretch}.brand-footer .footer-values{display:block;grid-column:2;grid-row:3}.brand-footer p{font-size:13px}.footer-signature{grid-row:1/4}}
@media(max-width:600px){.site-header .brand{font-size:22px}.site-header .brand img{width:47px;height:35px}.site-header nav{display:none}.nav-cta{font-size:12px;padding:10px 13px}.nav-wrap{padding:0 20px}.scene-footer{padding:0 17px;bottom:23px}.scene-scroll{font-size:13px;gap:8px}.scene-scroll>span:last-child{font-size:20px}.scene-toggle{font-size:12px;padding:9px 11px}.section-heading>p{font-size:16px;padding:0 3px}.section-heading .section-label,.mini-label,.appearance-copy .section-label,.privacy-copy .section-label,.faq-section .section-label{font-size:11px;letter-spacing:1.3px}.visual-feature{grid-template-columns:36% 64%;padding:24px 23px 24px 4px;column-gap:0}.visual-feature .mini-label{font-size:11px}.visual-feature h3{font-size:25px}.visual-feature p{font-size:15px;line-height:1.65}.feature-art{height:195px}.appearance-panel{padding:30px 24px 34px;gap:30px}.appearance-copy h2{font-size:34px}.appearance-copy p{font-size:16px;line-height:1.75}.appearance-copy .appearance-status{font-size:14px}.appearance-copy .text-link{font-size:14px}.app-icon-gallery{gap:8px}.app-icon-sample{padding:6px;border-radius:14px}.app-icon-sample>span{font-size:14px;margin-top:20px}.app-icon-sample.active>div{outline-width:2px;outline-offset:4px}.protocol-cards .mini-label{font-size:11px}.protocol-cards h3{font-size:25px}.protocol-cards p{font-size:16px;min-height:0}.protocol-foot{font-size:13px}.protocol-disclaimer{font-size:12px;max-width:100%}.privacy-panel{padding:12px 25px 32px}.privacy-copy h2{font-size:36px}.privacy-copy p{font-size:17px;max-width:100%}.privacy-points{align-items:flex-start;max-width:280px;margin-left:auto;margin-right:auto;text-align:left}.privacy-points span{font-size:15px}.privacy-art{height:220px}.faq-section h2{font-size:36px}.faq-section>div>p{font-size:16px}.faq-list{padding:4px 20px}.faq-list summary{font-size:16px;padding:21px 0}.faq-list details p{font-size:15px;line-height:1.8;padding-right:0}.brand-footer{display:grid;grid-template-columns:1fr;gap:13px;text-align:center;padding:28px 20px 33px}.brand-footer .brand,.brand-footer .footer-tagline,.brand-footer .footer-platforms,.brand-footer .footer-teams,.brand-footer .footer-values,.brand-footer .footer-signature{grid-column:1;grid-row:auto;justify-self:center}.brand-footer p,.brand-footer .footer-tagline,.brand-footer .footer-platforms,.brand-footer .footer-teams,.brand-footer .footer-values{font-size:13px}.brand-footer .brand{font-size:23px}.brand-footer .footer-signature{font-size:25px;margin:7px 0 0}.valley-mist{bottom:15%;height:22%}.mist-two{bottom:35%;height:13%}}
@media(max-width:360px){.nav-cta{font-size:11px;padding:10px}.site-header .brand{font-size:20px}.scene-scroll{font-size:12px}.scene-toggle{font-size:11px}.visual-feature{grid-template-columns:1fr;padding:20px 24px 26px;text-align:center}.feature-art{grid-column:1;grid-row:auto;height:180px}.visual-feature .mini-label,.visual-feature h3,.visual-feature p{grid-column:1}.feature-art img{width:100%;height:100%}}
@media(prefers-reduced-motion:reduce){.scene-motion{animation:none!important}.appearance-panel,.app-icon-sample,.app-icon-sample>div{transition:none}.app-icon-sample:hover>div{transform:none}}

/* Features in the app */
.capability-section{padding-top:85px}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.capability-grid article{padding:26px 26px 24px;background:linear-gradient(135deg,#ffffffb5,#f3f9ff65);border:1px solid #fff;border-radius:20px;box-shadow:0 8px 25px #4b7cbb0d}
.capability-grid h3{font-size:22px;letter-spacing:-.6px;font-weight:600;margin:16px 0 10px;color:var(--slate)}
.capability-grid p{font-size:15px;line-height:1.7;color:#64748b;margin:0}
.capability-grid code{font:500 .92em ui-monospace,SFMono-Regular,Menlo,monospace;color:#334155;background:#e8f0fb;padding:1px 5px;border-radius:5px}
@media(max-width:950px){.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.capability-section{padding-top:55px}.capability-grid{grid-template-columns:1fr;gap:13px}.capability-grid article{padding:22px 20px}.capability-grid h3{font-size:21px}}

/* Real app icon choices (Auto, Light, Dark, Vivid) */
.icon-choices-4 .app-icon-sample{transform:none}
.icon-choices-4 .app-icon-sample>span{transform:none}
.icon-choices-4 .app-icon-sample:nth-child(even){transform:translateY(-10px)}
.app-icon-sample.real-icon>div{background:transparent;border:0;box-shadow:none;border-radius:22%;position:relative}
.app-icon-sample.real-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px #3769aa40)}
.app-icon-sample.auto-icon img{position:absolute;inset:0}
.app-icon-sample.auto-icon img+img{clip-path:polygon(100% 0,100% 100%,0 100%)}
@media(max-width:600px){.icon-choices-4{gap:6px}.icon-choices-4 .app-icon-sample:nth-child(even){transform:none}}

/* Demo: the real PortPane interface, scaled to fit */
.app-stage{position:relative;width:100%;aspect-ratio:1536/1000;overflow:hidden;border-radius:18px;background:#e8eef9;box-shadow:inset 0 0 0 1px #ffffffb3}
.app-stage.is-dark{background:#111a3a}
.app-frame{position:absolute;left:0;top:0;width:1536px;height:1000px;border:0;transform-origin:0 0;transform:scale(var(--app-scale,.72));background:transparent;color-scheme:normal}
.preview-caption .demo-open{margin-left:10px;color:var(--indigo);font-weight:600;text-decoration:none;white-space:nowrap}
.preview-caption .demo-open:hover{text-decoration:underline}
@media(max-width:600px){.app-stage{border-radius:12px}}
.demo-mobile-note{display:none}
@media(max-width:600px){.demo-mobile-note{display:block;margin:14px 6px 0;font-size:13px;line-height:1.5;color:#64748b;text-align:center}}