/* Walkthrough, feature sections, menu bar and FAQs. */
:root{--walk-dur:6s;--ease-out:cubic-bezier(.2,.7,.2,1)}

/* ---------- Walkthrough: an animated tour of real app screens ---------- */
.walk-section{max-width:1280px;padding-top:120px;padding-bottom:30px}
.walk{display:grid;grid-template-columns:minmax(290px,.72fr) 1.8fr;gap:48px;align-items:center}
.walk-steps{display:flex;flex-direction:column;gap:4px;counter-reset:none}
.walk-step{appearance:none;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding:17px 20px 20px 18px;border-radius:18px;transition:background .45s,box-shadow .45s}
.walk-step:hover{background:#f8faffcc}
.walk-step:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.walk-num{font-size:12px;font-weight:600;letter-spacing:.6px;color:#a3aec2;font-variant-numeric:tabular-nums;padding-top:4px;transition:color .4s}
.walk-text strong{display:block;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.2px;color:#475569;transition:color .4s}
.walk-desc{display:block;font-size:15px;line-height:1.6;color:#64748b;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease-out),opacity .45s,margin .45s}
.walk-step.is-active{background:#fff;box-shadow:0 16px 36px -18px #3b4f8a40,0 0 0 1px #e7ecf6}
.walk-step.is-active .walk-num{color:var(--indigo)}
.walk-step.is-active strong{color:var(--slate)}
.walk-step.is-active .walk-desc{max-height:120px;opacity:1;margin-top:6px}
.walk-progress{position:absolute;left:60px;right:22px;bottom:9px;height:2px;border-radius:2px;background:#eef1f7;overflow:hidden;opacity:0;transition:opacity .3s}
.walk-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--sky-blue));transform:scaleX(0);transform-origin:left}
.walk.is-playing .walk-step.is-active .walk-progress{opacity:1}
.walk.is-playing .walk-step.is-active .walk-progress i{animation:walk-fill var(--walk-dur) linear forwards}
.walk.is-held .walk-step.is-active .walk-progress i{animation-play-state:paused}
@keyframes walk-fill{to{transform:scaleX(1)}}

.walk-side{position:relative;isolation:isolate;min-width:0}
.walk-side:before{content:'';position:absolute;inset:6% -3% -8% 4%;z-index:-1;background:radial-gradient(45% 55% at 25% 40%,#c7d2fe99,transparent 70%),radial-gradient(40% 50% at 80% 70%,#a5f3fc80,transparent 70%);filter:blur(28px)}
.walk-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 4px 14px}
.walk-caption{font-size:13px;color:#8391a7}
.walk-tools .theme-switch{background:#ffffffb3;border-color:#e3e9f4}
.walk-tools .theme-switch button{font-size:12px;padding:6px 12px;border:0;cursor:pointer}
.walk-tools .theme-switch button.active{color:var(--indigo)}
.walk-tools .theme-switch svg{width:13px;height:13px}
.walk-stage{position:relative;aspect-ratio:1600/1042;border-radius:20px;overflow:hidden;background:#e9eef8;box-shadow:0 50px 90px -40px #1e3a8a59,0 20px 40px -24px #0f172a40,0 0 0 1px #ffffffd9;transition:background .4s}
.walk-stage.is-dark{background:#151a3a;box-shadow:0 50px 90px -40px #1e1b4b8c,0 20px 40px -24px #0f172a66,0 0 0 1px #ffffff1f}
.walk-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(var(--walk-base,1));transform-origin:var(--focus,50% 50%);transition:opacity .8s ease,transform 0s linear .8s}
/* The active screen fades in and slowly drifts closer, toward the part the step is about. */
.walk-shot.is-active{opacity:1;transition:opacity .8s ease,transform calc(var(--walk-dur) + 1s) cubic-bezier(.25,.1,.25,1)}
.walk.is-playing .walk-shot.is-active{transform:scale(var(--walk-zoom,1.045))}

/* ---------- Feature sections ---------- */
.feature-rows{padding-top:30px;padding-bottom:20px}
.feature-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center;padding-top:120px}
.feature-row.is-reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.feature-row.is-reverse .feature-copy{order:2}
.feature-copy .section-label{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1.6px;font-weight:600;color:#6366b3}
.feature-copy .section-label:before{content:'';width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.feature-copy h2{font-size:44px;line-height:1.08;letter-spacing:-1.8px;font-weight:650;color:var(--slate);margin:18px 0 22px}
.feature-copy h2 span{color:var(--indigo)}
.feature-copy p{font-size:17px;line-height:1.75;color:#64748b;margin:0 0 28px;max-width:470px}
.feature-copy code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:#4338ca;background:#eef2ff;border-radius:6px;padding:2px 6px;white-space:nowrap}
.feature-points{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.feature-points li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.45;color:#334155}
.feature-points svg{width:22px;height:22px;padding:5px;box-sizing:border-box;border-radius:50%;background:#eef2ff;color:var(--indigo);stroke-width:2.6}

/* Each screen sits on its own soft panel, tinted from the PortPane palette. */
.feature-visual{--tint-a:#c7d2fe;--tint-b:#bae6fd;--tint-c:#eef2ff;position:relative;display:grid;place-items:center;min-height:420px;padding:48px;border-radius:32px;background:radial-gradient(70% 80% at 0% 0%,var(--tint-a),transparent 70%),radial-gradient(70% 80% at 100% 100%,var(--tint-b),transparent 70%),var(--tint-c);box-shadow:inset 0 0 0 1px #ffffffc0;overflow:hidden}
.feature-row:nth-child(3n+2) .feature-visual{--tint-a:#ddd6fe;--tint-b:#fecdd3;--tint-c:#f5f3ff}
.feature-row:nth-child(3n) .feature-visual{--tint-a:#a5f3fc;--tint-b:#bfdbfe;--tint-c:#ecf6ff}
.shot-frame{margin:0;max-width:100%;border-radius:14px;overflow:hidden;box-shadow:0 34px 60px -30px #1e293b66,0 0 0 1px #0f172a14;background:#fff}
.shot-frame img{display:block;max-width:100%;height:auto}
.shot-frame.is-tall img{max-height:540px;width:auto}
.shot-frame.is-dialog{border-radius:0;overflow:visible;box-shadow:none;background:none}
.shot-frame.is-dialog img{filter:drop-shadow(0 26px 30px #1e293b33) drop-shadow(0 2px 4px #1e293b14)}

/* ---------- Menu bar ---------- */
.menubar-mock{width:100%;max-width:560px;border-radius:18px;overflow:hidden;font-size:13px;color:#1e293b;background:radial-gradient(90% 70% at 15% 10%,#a5b4fc,transparent 70%),radial-gradient(80% 80% at 90% 90%,#67e8f9,transparent 65%),linear-gradient(160deg,#818cf8,#60a5fa 55%,#22d3ee);box-shadow:0 34px 60px -30px #1e293b66,0 0 0 1px #0f172a14}
.mb-bar{display:flex;align-items:center;gap:15px;height:30px;padding:0 14px;background:#ffffff99;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);white-space:nowrap}
.mb-bar b{font-weight:700}
.mb-apple{width:12px;height:12px;border-radius:50%;background:#1e293b;opacity:.8}
.mb-spacer{flex:1}
.mb-tray{display:flex;align-items:center;padding:3px 7px;border-radius:5px}
.mb-tray.is-open{background:#0f172a24}
.mb-tray img{height:13px;width:auto}
.mb-menu{width:300px;margin:6px 62px 34px auto;padding:6px;border-radius:12px;background:#f8f9fcf0;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 22px 50px #0f172a4d,0 0 0 .5px #0f172a40;animation:none}
.mb-title{display:flex;align-items:center;gap:8px;padding:5px 10px 3px;font-size:12px;font-weight:600;color:#64748b}
.mb-title img{height:11px;width:auto}
.mb-menu hr{border:0;height:1px;background:#0f172a17;margin:5px 10px}
.mb-menu ul{list-style:none;margin:0;padding:0}
.mb-item,.mb-plain{display:flex;align-items:center;gap:10px;padding:5px 10px;border-radius:6px;cursor:default}
.mb-item em{font-style:normal;color:#64748b;margin:0 5px}
.mb-item.is-off{color:#64748b}
.mb-menu ul:not(:hover) .mb-item:first-child,.mb-item:hover,.mb-plain:hover{background:#3b82f6;color:#fff}
.mb-menu ul:not(:hover) .mb-item:first-child em,.mb-item:hover em{color:#ffffffd0}
.mb-thumb{position:relative;flex:none;width:24px;height:24px}
.mb-thumb img{width:24px;height:24px;border-radius:6px;object-fit:cover;display:block}
.mb-thumb i{position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;border:1.5px solid #f8f9fc}
.mb-thumb i.on{background:#22c55e}
.mb-thumb i.off{background:#a3aec2}

/* ---------- Appearance ---------- */
.appearance-row .appearance-panel.icon-stage{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:420px;padding:56px 44px;border-radius:32px}
.appearance-row .app-icon-gallery{width:100%;max-width:560px}
.appearance-row .feature-visual{padding:0;background:none;box-shadow:none;overflow:visible}
.appearance-row .appearance-status{font-size:14px;font-weight:500;color:#6366b3;margin:22px 0 0}

/* ---------- FAQs ---------- */
.faq-section{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:72px;align-items:start;border:0;padding-top:130px;padding-bottom:120px}
.faq-section .section-heading{text-align:left;margin:0;position:sticky;top:120px}
.faq-section .section-heading h2{font-size:49px;margin:18px 0 20px}
.faq-section .section-heading>p{max-width:330px}
.faq-grid,.faq-col{display:grid;gap:14px}
.faq-item{background:#ffffffd9;border:1px solid #e6ebf5;border-radius:20px;box-shadow:0 1px 2px #0f172a08;transition:border-color .3s,box-shadow .35s,background .3s}
.faq-item:hover{border-color:#cfd6f6}
.faq-item[open]{background:#fff;border-color:#c7d2fe;box-shadow:0 22px 44px -24px #4f46e54d}
.faq-item summary{list-style:none;display:grid;grid-template-columns:28px 1fr 30px;gap:14px;align-items:center;padding:22px 22px 22px 24px;cursor:pointer;font-size:17px;line-height:1.4;font-weight:600;color:var(--slate);border-radius:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.faq-num{font-size:12px;font-weight:600;letter-spacing:.6px;color:#a5b4fc;font-variant-numeric:tabular-nums;transition:color .3s}
.faq-item[open] .faq-num{color:var(--indigo)}
.faq-icon{position:relative;width:30px;height:30px;border-radius:50%;background:#eef2ff;transition:transform .4s var(--ease-out),background .3s}
.faq-icon:before,.faq-icon:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--indigo);transition:background .3s}
.faq-icon:after{transform:rotate(90deg)}
.faq-item[open] .faq-icon{transform:rotate(135deg);background:var(--indigo)}
.faq-item[open] .faq-icon:before,.faq-item[open] .faq-icon:after{background:#fff}
.faq-a{overflow:hidden}
.faq-a p{margin:0;padding:0 30px 24px 66px;font-size:16px;line-height:1.75;color:#64748b}
.faq-item.is-closing{background:#ffffffd9;border-color:#e6ebf5;box-shadow:0 1px 2px #0f172a08}
.faq-item.is-closing .faq-num{color:#a5b4fc}
.faq-item.is-closing .faq-icon{transform:none;background:#eef2ff}
.faq-item.is-closing .faq-icon:before,.faq-item.is-closing .faq-icon:after{background:var(--indigo)}

/* ---------- Scroll reveal (only when scripts run) ---------- */
.can-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.can-reveal .feature-visual.reveal{transition-delay:.1s}
.can-reveal .reveal.is-in{opacity:1;transform:none}

/* ---------- Smaller screens ---------- */
@media(max-width:1100px){
 .walk{grid-template-columns:minmax(260px,.8fr) 1.5fr;gap:32px}
 .walk-text strong{font-size:17px}
 .feature-row,.feature-row.is-reverse{gap:48px}
 .feature-copy h2{font-size:40px}
 .feature-visual{min-height:360px;padding:36px}
}
@media(max-width:900px){
 .walk-section{padding-top:90px}
 .walk{grid-template-columns:1fr;gap:20px}
 .walk-side{order:-1}
 .walk-steps{gap:2px}
 .feature-row,.feature-row.is-reverse{grid-template-columns:1fr;gap:34px;padding-top:90px}
 .feature-row.is-reverse .feature-copy{order:0}
 .feature-copy p{max-width:none}
 .faq-section{display:block;padding-top:100px;padding-bottom:90px}
 .faq-section .section-heading{position:static;text-align:center;margin:0 auto 36px}
 .faq-section .section-heading>p{max-width:none}
 .faq-grid{max-width:680px;margin:0 auto}
}
@media(max-width:600px){
 .walk-section{padding-top:72px}
 .walk-tools{flex-direction:column;align-items:flex-start;gap:10px}
 .walk-stage{border-radius:12px;aspect-ratio:4/3;--walk-base:1.25;--walk-zoom:1.3}
 .walk-step{padding:14px 16px 18px 12px;grid-template-columns:26px 1fr}
 .walk-text strong{font-size:16px}
 .walk-desc{font-size:14.5px}
 .walk-progress{left:50px;right:16px}
 .feature-row,.feature-row.is-reverse{padding-top:72px;gap:28px}
 .feature-copy h2{font-size:34px;letter-spacing:-1.2px}
 .feature-copy p{font-size:16px}
 .feature-points li{font-size:15px}
 .feature-visual{min-height:0;padding:24px 18px;border-radius:22px}
 .shot-frame{border-radius:10px}
 .shot-frame.is-tall img{max-height:440px}
 .menubar-mock{font-size:12px;border-radius:14px}
 .mb-bar{gap:11px;padding:0 10px}
 .mb-bar>span:nth-child(5){display:none}
 .mb-menu{width:auto;margin:6px 10px 18px}
 .appearance-row .appearance-panel.icon-stage{min-height:0;padding:34px 18px;border-radius:22px}
 .faq-section{padding-top:80px;padding-bottom:70px}
 .faq-section .section-heading h2{font-size:36px}
 .faq-item summary{grid-template-columns:22px 1fr 28px;gap:10px;padding:18px 16px 18px 18px;font-size:16px}
 .faq-icon{width:28px;height:28px}
 .faq-a p{font-size:15px;padding:0 20px 20px 50px}
}
@media(prefers-reduced-motion:reduce){
 .walk-shot,.walk-shot.is-active{transition:opacity .3s}
 .walk.is-playing .walk-shot.is-active{transform:scale(var(--walk-base,1))}
 .walk-desc,.walk-step,.faq-icon{transition:none}
 .can-reveal .reveal{opacity:1;transform:none;transition:none}
}
.skip:not(:focus){opacity:0;pointer-events:none}

/* Setup guides */
.setup-section{max-width:1280px;padding-top:110px}
.setup-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.setup-card{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:26px 26px 22px;background:#ffffffd9;border:1px solid #e6ebf5;border-radius:20px;box-shadow:0 1px 2px #0f172a08,0 22px 44px -32px #4f46e533}
.setup-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.setup-head h3{margin:4px 0 0;font-size:22px;letter-spacing:-.6px;font-weight:650;color:var(--slate)}
.setup-head .mini-label{font-size:10px;letter-spacing:1.4px;font-weight:600;color:#6366b3}
.setup-icon{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,#6f8dff,#4f46e5);box-shadow:0 10px 20px -10px #4f46e5}
.setup-icon.cyan{background:linear-gradient(135deg,#38bdf8,#0891b2);box-shadow:0 10px 20px -10px #0891b2}
.setup-icon.violet{background:linear-gradient(135deg,#a78bfa,#7c3aed);box-shadow:0 10px 20px -10px #7c3aed}
.setup-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.setup-steps{list-style:none;counter-reset:setup;margin:0;padding:0;display:grid;align-content:start;gap:14px;flex:1}
.setup-steps li{counter-increment:setup;position:relative;padding-left:36px;font-size:14.5px;line-height:1.6;color:#475569}
.setup-steps li:before{content:counter(setup);position:absolute;left:0;top:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:700;color:var(--indigo);background:#eef2ff}
.setup-steps b{color:var(--slate);font-weight:600}
.setup-section code{display:inline-block;max-width:100%;box-sizing:border-box;overflow-x:auto;vertical-align:bottom;white-space:nowrap;font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 6px;border-radius:6px;color:#3730a3;background:#eef2ff}
.setup-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;padding-top:16px;border-top:1px solid #edf0f7}
.setup-links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--indigo);text-decoration:none}
.setup-links a:hover{text-decoration:underline;text-underline-offset:3px}
.setup-links svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.setup-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;padding:18px 26px;border-radius:18px;background:linear-gradient(135deg,#eef2ffb3,#f0f9ffb3);border:1px solid #e0e7ff}
.setup-notes p{margin:0;font-size:14px;line-height:1.6;color:#475569}
.setup-notes b{color:var(--slate)}
.setup-inapp{margin:22px auto 0;text-align:center;font-size:14.5px;color:#64748b}
.setup-inapp b{color:var(--slate)}
@media(max-width:1000px){.setup-cards,.setup-notes{grid-template-columns:1fr}.setup-cards{max-width:680px;margin:0 auto}.setup-notes{max-width:680px;margin:18px auto 0;gap:10px}}
@media(max-width:600px){.setup-section{padding-top:72px}.setup-card{padding:22px 20px 18px}.setup-head h3{font-size:20px}.setup-steps li{font-size:14px}.setup-notes{padding:16px 18px}}

/* Hero: one plain sentence on what PortPane is, under the tagline */
.hero-quote.hero-lede{font-size:21px;line-height:1.5;letter-spacing:-.3px;max-width:600px;margin:42px auto 0;text-wrap:balance}
@media(min-width:1600px){.hero-quote.hero-lede{font-size:23px;max-width:660px;margin-top:48px}}
@media(max-width:600px){.hero-quote.hero-lede{font-size:17px;max-width:330px;margin-top:34px}}
@media(max-width:360px){.hero-quote.hero-lede{font-size:16px}}

/* Section links that stay at hand once the hero has scrolled away */
.mini-nav{position:fixed;top:12px;left:50%;z-index:40;display:flex;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:6px 8px 6px 12px;background:#fbfcffd6;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid #e3e9f4;border-radius:16px;box-shadow:0 12px 30px -14px #1e3a8a47;transform:translate(-50%,-150%);opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s,visibility 0s .35s}
.show-mini-nav .mini-nav{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.mini-brand{flex:none;display:flex;align-items:center;gap:6px;padding:4px 12px 4px 0;border-right:1px solid #e3e9f4;font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--slate);text-decoration:none}
.mini-brand img{width:36px;height:24px;object-fit:contain}
.mini-links{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mini-links::-webkit-scrollbar{display:none}
.mini-links a{flex:none;padding:8px 12px;border-radius:10px;font-size:14px;font-weight:500;color:#475a7a;text-decoration:none;white-space:nowrap}
.mini-links a:hover{background:#eef2fb;color:var(--indigo)}
.mini-links a[aria-current="true"]{background:#eef0ff;color:var(--indigo)}
@media(max-width:600px){
 .mini-nav{top:8px;left:8px;right:8px;max-width:none;padding:5px 6px;transform:translateY(-150%)}
 .show-mini-nav .mini-nav{transform:none}
 /* On a phone the bar is only the links, so all five fit. */
 .mini-brand{display:none}
 .mini-links{flex:1;justify-content:space-between}
 .mini-links a{padding:8px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.mini-nav,.show-mini-nav .mini-nav{transition:none}}

/* Footer links */
.brand-footer .footer-links{display:flex;gap:18px}
.footer-links a{padding:6px 0;color:inherit;text-decoration:none}
.footer-links a:hover{color:var(--indigo)}

.footer-platforms .fp{color:inherit}
@media(max-width:600px){.brand-footer .footer-links{justify-content:center}}
@media(max-width:950px){.brand-footer .footer-platforms{flex-direction:column;align-items:flex-start;gap:2px}.footer-platforms span:not(.fp){display:none}}
@media(max-width:600px){.brand-footer .footer-platforms{align-items:center}}
@media(max-width:360px){.setup-card code{white-space:normal;overflow-wrap:anywhere}}

/* Easier to tap */
.setup-links a{padding:6px 0}
.scene-scroll{padding:8px 0}
@media(max-width:600px){.theme-switch button{min-height:34px}}