.product-guide{--pg-ink:var(--text-primary,#f5f1e8);--pg-muted:var(--text-secondary,#b8b6b0);box-sizing:border-box;margin:auto;max-width:none;width:min(940px,calc(100vw - 40px));max-height:min(780px,calc(100dvh - 40px));padding:28px;border:1px solid var(--border-hover,rgba(255,255,255,.2));border-radius:28px;background:var(--bg-primary,#11131b);color:var(--pg-ink);box-shadow:0 32px 100px #0008;font-family:var(--font-body,system-ui);overflow:auto}
.product-guide::backdrop{background:rgba(5,7,12,.72);backdrop-filter:blur(12px)}
.product-guide *{box-sizing:border-box}.pg-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pg-eyebrow{font-size:.73rem;text-transform:uppercase;letter-spacing:.14em;color:var(--pg-muted);margin:0 0 6px}.pg-header h2{font-size:1.65rem;line-height:1.2;margin:0;font-weight:750;letter-spacing:-.035em}.pg-close{flex:none;width:42px;height:42px;border:1px solid var(--border-hover,#ffffff26);border-radius:50%;background:transparent;color:inherit;font-size:28px;cursor:pointer}.pg-intro{color:var(--pg-muted);font-size:.95rem;line-height:1.5;margin:16px 0 24px;max-width:640px}.pg-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;min-height:340px}.pg-apps{display:flex;flex-direction:column;gap:4px;max-height:370px;overflow-y:auto;scrollbar-width:thin;padding:2px 10px 2px 2px}.pg-apps button{flex:none;min-height:42px;width:100%;padding:10px 14px;text-align:left;border:1px solid transparent;border-radius:12px;color:var(--pg-muted);background:transparent;font:inherit;font-size:.9rem;cursor:pointer}.pg-apps button:hover{background:rgba(127,127,127,.1);color:var(--pg-ink)}.pg-apps button[aria-pressed=true]{background:rgba(127,127,127,.14);border-color:var(--border-hover,#ffffff26);color:var(--pg-ink);font-weight:650}.product-guide :is(button,a):focus-visible{outline:2px solid var(--accent,#82aaff);outline-offset:3px}.pg-preview{border:1px solid var(--border-hover,#ffffff20);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;background:rgba(127,127,127,.035)}.pg-demo{display:grid;place-items:center;min-height:205px;flex:1;padding:16px;color:var(--accent,#82aaff);background:radial-gradient(ellipse at center,rgba(127,127,127,.09),transparent 75%)}.pg-demo svg{display:block;width:min(100%,320px);height:200px}.pg-copy{padding:20px 24px 24px;border-top:1px solid var(--border,#ffffff14)}.pg-count{margin:0 0 7px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pg-muted)}.pg-copy h3{margin:0 0 8px;font-size:1.3rem;letter-spacing:-.025em}.pg-description{margin:0;font-size:.95rem;line-height:1.55;color:var(--pg-muted);max-width:440px}.pg-footer{flex-direction:row;text-align:left;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border,#ffffff20);display:flex;align-items:center;justify-content:space-between;gap:20px}.pg-footer>div{min-width:0}.pg-resume-title{font-size:.86rem;font-weight:600}.pg-resume-label{margin:5px 0 0;font-size:.8rem;color:var(--pg-muted);overflow-wrap:anywhere}.pg-open{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:48px;padding:12px 23px;border-radius:14px;background:var(--accent,#82aaff);color:var(--on-accent,#0b1324);font-weight:700;text-decoration:none;flex:none}.pg-open:hover{filter:brightness(1.1)}
.pg-draw{stroke-dasharray:500;animation:pg-draw 4s ease-in-out infinite}.pg-pulse{animation:pg-pulse 3s ease-in-out infinite}.pg-move{animation:pg-move 4s ease-in-out infinite}.pg-scan{animation:pg-scan 4s ease-in-out infinite}.pg-bar{transform-box:fill-box;transform-origin:center bottom;animation:pg-grow 3.5s ease-in-out infinite}.pg-delay-1{animation-delay:.15s}.pg-delay-2{animation-delay:.35s}.pg-delay-3{animation-delay:.55s}
@keyframes pg-draw{0%{stroke-dashoffset:500;opacity:.3}50%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.3}}@keyframes pg-pulse{0%,100%{opacity:.35}50%{opacity:1}}@keyframes pg-move{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}@keyframes pg-scan{0%,100%{transform:translateX(0)}60%{transform:translateX(120px)}}@keyframes pg-grow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@media(max-width:600px){.product-guide{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:20px;border-radius:22px}.pg-intro{margin:12px 0 18px;font-size:.88rem}.pg-body{grid-template-columns:minmax(0,1fr);gap:14px;min-height:0}.pg-apps{flex-direction:row;max-height:none;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}.pg-apps button{width:auto;white-space:nowrap;min-height:44px}.pg-demo{min-height:150px;padding:8px}.pg-demo svg{height:155px}.pg-copy{padding:16px 18px}.pg-description{font-size:.88rem}.pg-footer{margin-top:18px;padding-top:16px;gap:12px}.pg-open{padding:12px 18px;gap:16px}.pg-resume-label{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.product-guide svg *{animation:none!important;stroke-dashoffset:0!important}}

.pg-product{display:flex;align-items:center;gap:14px;min-width:0}.pg-product-icon{width:62px;height:62px;flex:none;object-fit:cover;border-radius:14px;corner-shape:squircle;border:1px solid rgba(127,127,127,.25)}
@media(max-width:600px){.pg-product{gap:11px}.pg-product-icon{width:52px;height:52px;border-radius:12px}.pg-header h2{font-size:1.45rem}.pg-eyebrow{font-size:.65rem;letter-spacing:.1em}}

.pg-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
a.pg-sec{text-decoration:none}.pg-sec{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:14px;border:1px solid var(--border,#ffffff30);background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.pg-sec:hover{border-color:var(--accent,#82aaff)}
.pg-panel{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding:14px;border:1px solid var(--border,#ffffff20);border-radius:16px}
.pg-panel[hidden]{display:none}
.pg-ship{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;border-radius:12px;border:1px solid var(--border,#ffffff30);color:inherit;text-decoration:none;font-weight:600}
.pg-ship:hover,.pg-ship.on{border-color:var(--accent,#82aaff)}
.pg-join{display:flex;gap:10px;width:100%}
.pg-join input{flex:1;min-width:0;min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--border,#ffffff30);background:transparent;color:inherit;font:inherit}
.pg-join .pg-open{gap:0}
@media(max-width:600px){.pg-footer{flex-direction:column;align-items:stretch}.pg-actions{justify-content:stretch}.pg-actions>*{flex:1}.pg-join{flex-direction:column}}