/* Product-native working surfaces. Existing ocean/profile art stays untouched. */
#detail-dialog:has([data-product-demo]){width:min(1140px,100%);padding-inline:36px}
#detail-dialog:has([data-product-demo]) .compact-proof{max-width:650px}
#detail-dialog:has([data-product-demo]) .customer-logos{grid-template-columns:repeat(5,minmax(0,1fr))}
.product-demo{--pd-blue:#006dff;--pd-text:#1e293b;--pd-muted:#526176;--pd-border:#dce3ed;color:var(--pd-text);text-align:left;margin:32px 0;font:400 1rem/1.65 var(--font);isolation:isolate}
.product-demo *{box-sizing:border-box}
.product-demo :is(p,h3,h4,h5){color:inherit;font-family:var(--font);letter-spacing:normal;background:none;-webkit-text-fill-color:currentColor}
.product-demo button,.product-demo input,.product-demo select{font:inherit;letter-spacing:normal;color:var(--pd-text);touch-action:manipulation}
.product-demo button{cursor:pointer}.product-demo button:disabled{cursor:default;opacity:.45}
.product-demo :is(button,input,select,summary,[tabindex]):focus-visible{outline:3px solid #0877ff;outline-offset:3px}
.product-demo .pd-intro>p:first-child{font-size:.8125rem;letter-spacing:.12em;font-weight:700;color:#1766d2;margin:0 0 8px}
.product-demo .pd-intro h3{font-size:1.375rem;font-weight:700;line-height:1.55;margin:0 0 8px}
.product-demo .pd-intro>p:last-child{font-size:.9375rem;color:var(--pd-muted);margin:0 0 20px}
.pd-app{background:#fff;border:1px solid #ced9e6;border-radius:12px;overflow:clip;box-shadow:0 12px 40px #12385b0d;scroll-margin-top:64px;container-type:inline-size}
.pd-topbar{display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--pd-border);background:#fff}
.product-demo .pd-topbar img{width:100px;height:32px;object-fit:contain;object-position:left}
.pd-topbar>span{font-size:.875rem;font-weight:600}.pd-demo-badge{margin-left:auto;padding:4px 9px;background:#eef5ff;border:1px solid #d6e5fb;border-radius:4px;color:#2260af!important;font-size:.75rem!important;white-space:nowrap}
.pd-toolbar{padding:20px 22px 16px;background:#fafbfd;border-bottom:1px solid var(--pd-border)}
.pd-search{display:flex;align-items:center;gap:12px;border:1px solid #cfd9e6;background:#fff;border-radius:6px;padding:0 14px;max-width:590px}
.pd-search-icon{font-size:1.625rem;line-height:1;color:#6c7b8e}
.pd-search input{width:100%;min-width:0;background:transparent;border:0;outline-offset:0;padding:12px 0;font-size:1rem;color:#1b2c42;border-radius:3px}
.pd-search input::placeholder{color:#728197}.pd-filter-row{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:14px}
.pd-filter-row label{display:flex;flex-direction:column;gap:5px;font-size:.8125rem;color:var(--pd-muted);min-width:0}
.pd-filter-row select{appearance:auto;max-width:100%;font-size:.875rem;background:#edf3fc;border:1px solid #d5e0ef;border-radius:4px;min-height:44px;padding:9px 28px 9px 10px;color:#1457ac}
.pd-filter-row :is(.pd-direction,.pd-reset){background:transparent;border:0;min-height:44px;padding:8px;font-size:.875rem;white-space:nowrap}
.pd-filter-row .pd-reset{color:#576d85}.pd-result-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:12px 22px;border-bottom:1px solid var(--pd-border)}
.product-demo .pd-result-summary p{margin:0;font-size:.875rem;color:#375271;font-weight:600}.pd-result-summary>span{font-size:.75rem;color:#738298}
.pd-results{display:block}.pd-result{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(300px,1.3fr) 96px;align-items:center;gap:20px;min-width:0;padding:20px;border-bottom:1px solid var(--pd-border);background:#fff}
.pd-result:nth-child(even){background:#fafbfd}.pd-result:has(input:checked){background:#f0f6ff}
.pd-result>.pd-stats{border:0;padding:0;margin:0}
.product-demo .pd-open{width:100%;display:flex;gap:15px;padding:0;border:0;background:transparent;text-align:left;color:var(--pd-text)}
.pd-thumb{position:relative;display:block;flex:0 0 94px;width:94px;aspect-ratio:3/4;overflow:hidden;border-radius:5px;background:#0d1420;align-self:flex-start}
.pd-thumb img{display:block;width:100%;height:100%;object-fit:cover}.pd-thumb small{position:absolute;bottom:5px;right:5px;background:#000b;color:#fff;padding:1px 4px;font-size:.75rem;line-height:1.5;border-radius:3px}
.pd-thumb.pd-sprite{aspect-ratio:1;background-image:url('assets/product-demo/2ndbuzz-screen.png');background-size:1432.83582% 805.97015%;background-position-x:17.07727%;background-position-y:calc(var(--crop-y) / -7.0597015);background-repeat:no-repeat}
.pd-result-copy{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:7px}.pd-result-meta{display:flex;align-items:center;gap:8px;font-size:.75rem;color:#52657d}
.pd-result-meta b{font-variant-numeric:tabular-nums;color:var(--pd-blue);font-size:.8125rem}
.pd-result-copy>strong{font-weight:600;font-size:.9375rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pd-account{font-size:.8125rem;line-height:1.6;color:#62738b;overflow-wrap:anywhere}.pd-inspect{font-size:.8125rem;color:#0065d7;margin-top:auto}
.pd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 12px;border-top:1px solid #edf0f5;padding-top:12px;font-variant-numeric:tabular-nums}
.pd-stats>div{min-width:0}.pd-stats dt{font-size:.75rem;line-height:1.5;color:var(--pd-muted);margin-bottom:4px}.pd-stats dd{font:600 clamp(.875rem,1.6cqw,1.125rem)/1.5 var(--font);margin:0;color:#182d47;overflow-wrap:anywhere}
.pd-stats>div:first-child dd{color:#006ce6}.pd-check{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.875rem;color:#4a617e;cursor:pointer}.pd-check input{appearance:auto;accent-color:var(--pd-blue);width:18px;height:18px;margin:0;flex-shrink:0}
.pd-comparison-tray{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:#f1f6ff;border-top:1px solid #c9daf0;color:#345471;font-size:.875rem}
.pd-comparison-tray>div{display:flex;align-items:center;gap:12px}
.product-demo .pd-primary{background:#006cff;border:1px solid #006cff;border-radius:5px;min-height:44px;color:white!important;font-size:.875rem;font-weight:600;padding:10px 16px}
.product-demo .pd-primary:hover:not(:disabled){background:#0053cc;color:#fff!important}
.product-demo .pd-clear,.product-demo .pd-back{border:0;background:transparent;color:#0865cc;font-size:.875rem;min-height:44px;padding:8px 0}
.pd-body{min-width:0}.pd-record,.pd-comparison{padding:18px 24px 28px}.pd-record-top{display:flex;gap:24px;align-items:flex-start;margin:14px 0 24px}.pd-record-top>.pd-thumb{flex-basis:150px;width:150px}
.product-demo:is([data-view=detail],[data-view=compare]) .pd-toolbar{display:none}
.pd-record-top>div{min-width:0}.product-demo .pd-record h4{font-size:1.25rem;font-weight:700;line-height:1.65;margin:8px 0 12px;overflow-wrap:anywhere}.product-demo .pd-record-top p{font-size:.875rem;margin:0 0 10px;color:#516681}
.product-demo .pd-record-meta{font-size:.8125rem!important}.pd-tag{display:inline-block;font-size:.8125rem;padding:3px 8px;background:#eaf3ff;color:#1462bc;border-radius:3px}
.pd-record .pd-stats{padding:20px;background:#f7faff;border:1px solid #dce7f5;border-radius:6px;gap:18px}.pd-record .pd-stats dd{font-size:clamp(1rem,2.7cqw,1.75rem)}
.pd-extra{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.875rem;color:#426284;margin:20px 0}.pd-extra dd{margin:0;font-weight:600}
.product-demo .pd-reading{font-size:1rem;color:#405b76;margin:20px 0;max-width:660px;line-height:1.9}
.product-demo .pd-static-note{font-size:.75rem;color:#697c94;margin:14px 0 0;line-height:1.8}
.product-demo .pd-comparison h4{font-size:1.125rem;line-height:1.7;margin:14px 0 22px;font-weight:600}.pd-compare-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;border-bottom:1px solid var(--pd-border);padding-bottom:24px}
.pd-compare-head>div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px 12px;align-items:start;min-width:0}.pd-compare-head .pd-thumb{width:110px;grid-column:2}.pd-letter{color:#086bd8;font-weight:700;font-size:1.125rem}
.pd-compare-head strong{font-size:.9375rem;grid-column:2;overflow-wrap:anywhere}.product-demo .pd-compare-head p{font-size:.8125rem;line-height:1.7;color:#5a6f89;margin:0;grid-column:2;overflow-wrap:anywhere}
.pd-compare-metric{padding:20px 0 0}.product-demo .pd-compare-metric h5{font-size:.875rem;font-weight:600;margin:0 0 14px;color:#48617f}.pd-bar-row{display:flex;gap:18px;margin:0 0 14px;align-items:center}.pd-bar-row>span{font-size:.875rem;color:#43709e}.pd-bar-row>div{flex:1;min-width:0}.pd-bar-row strong{display:block;font-size:1.125rem;font-variant-numeric:tabular-nums;margin-bottom:6px}.pd-bar{display:block;width:var(--bar-width);height:8px;background:#0075ff;border-radius:2px}.pd-bar-row:last-child .pd-bar{background:#7aadeb}
.pd-empty{padding:40px 24px;text-align:center}.pd-empty strong{font-size:1rem}.product-demo .pd-empty p{font-size:.875rem;color:#596f87}
.product-demo .pd-feedback{font-size:.8125rem;color:#325e95;margin:0;padding:0 20px}.pd-feedback:not(:empty){padding:12px 20px;border-top:1px solid var(--pd-border)}
.pd-source{margin-top:14px;color:#526b83;font-size:.8125rem}.pd-source summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:.875rem}.product-demo .pd-source p{color:#526b83;font-size:.8125rem;line-height:1.8;margin:10px 0}.product-demo .pd-source a{color:#0968c9;text-decoration:underline}.pd-screen-scroll{overflow:auto;background:white;border:1px solid #cbd8e5;max-height:480px}.pd-screen-scroll img{display:block;width:1200px;max-width:none;height:auto}
@container(max-width:790px){.pd-result{display:block}.pd-result>.pd-stats{border-top:1px solid #edf0f5;padding-top:12px;margin:18px 0 12px}}
@media(max-width:900px){#detail-dialog:has([data-product-demo]){padding-inline:24px}.pd-result{display:block}.pd-result>.pd-stats{border-top:1px solid #edf0f5;padding-top:12px;margin:18px 0 12px}.pd-stats dd{font-size:1rem}}
@media(max-width:600px){
 #detail-dialog:has([data-product-demo]){width:100%;padding-inline:18px;height:92dvh;max-height:calc(100dvh - 24px)}
 #detail-dialog:has([data-product-demo]) .customer-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
 .product-demo{margin:26px -6px}.product-demo .pd-intro{padding:0 6px}.product-demo .pd-intro h3{font-size:1.25rem}
 .pd-app{border-radius:8px}.pd-topbar{padding:15px 14px;gap:10px;flex-wrap:wrap}.pd-topbar>span:not(.pd-demo-badge){font-size:.8125rem}.product-demo .pd-topbar img{width:80px;height:27px}
 .pd-demo-badge{font-size:.75rem!important}.pd-toolbar{padding:14px}.pd-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.pd-filter-row select{width:100%;padding-right:15px}.pd-direction{text-align:left}.pd-reset{text-align:right}
 .pd-result-summary{padding:12px 14px}.pd-result-summary>span{display:none}.pd-result{padding:18px 14px}.pd-open{gap:12px!important}.pd-thumb{flex-basis:82px;width:82px}.pd-result-copy>strong{font-size:.9375rem;-webkit-line-clamp:3}.pd-stats{gap:6px}.pd-stats dd{font-size:.875rem}.pd-stats dt{font-size:.75rem}
 .pd-comparison-tray{padding:12px 14px;gap:10px;flex-wrap:wrap;font-size:.8125rem}.pd-comparison-tray>div{margin-left:auto}.product-demo .pd-primary{padding:9px 13px}
 .pd-record,.pd-comparison{padding:12px 14px 22px}.pd-record-top{gap:14px;flex-direction:column}.pd-record-top>.pd-thumb{flex-basis:auto;width:136px}.product-demo .pd-record h4{font-size:1.125rem}.pd-record .pd-stats{padding:14px;grid-template-columns:1fr;gap:15px}.pd-record .pd-stats>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.pd-record .pd-stats dt{margin:0;font-size:.8125rem}.pd-record .pd-stats dd{font-size:1.125rem}
 .pd-compare-head{gap:14px}.pd-compare-head>div{grid-template-columns:1fr;gap:8px}.pd-compare-head :is(.pd-thumb,strong,p){grid-column:1!important}.pd-compare-head .pd-thumb{width:92px}.pd-source{padding:0 6px}
}
@media(forced-colors:active){.pd-app,.pd-result,.pd-topbar,.pd-toolbar,.pd-comparison-tray{background:Canvas;color:CanvasText}.pd-bar{background:Highlight}.product-demo .pd-primary{border:1px solid ButtonText;color:ButtonText!important;background:ButtonFace}}
