.product-story{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,58px);align-items:center;margin-block:clamp(48px,8vw,104px)}
.product-story>div:first-child{max-width:720px}
.product-story h2,.product-demo h2,.product-boundary h2{font-size:clamp(31px,4vw,52px);letter-spacing:-.035em;margin-bottom:20px}
.product-story p,.product-demo p,.product-boundary p{font-size:16px;line-height:1.78;color:var(--muted,#5d626c)}
.product-scene{position:relative;min-width:0;border:1px solid #c9d8ef;border-radius:20px;background:#edf3ff;box-shadow:0 24px 70px #33518014;overflow:hidden;isolation:isolate}
.product-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#f8fbff 0%,#e8f0ff 58%,#f5f8ff 100%);z-index:-2}
.product-scene:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#9fb8e412 1px,transparent 1px),linear-gradient(90deg,#9fb8e412 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 88%);z-index:-1}
.diagram-canvas{display:grid;grid-template-columns:minmax(170px,.85fr) 44px minmax(220px,1.15fr) 44px minmax(180px,.9fr);align-items:center;gap:0;min-height:390px;padding:clamp(24px,4vw,48px)}
.diagram-card{position:relative;min-width:0;border:1px solid #c7d6ec;border-radius:15px;background:#fff;padding:18px;box-shadow:0 14px 34px #33518012}
.diagram-stack,.diagram-variants,.diagram-brief{display:grid;gap:12px;min-width:0}
.diagram-label{display:block;font-family:DM,"DM Sans",Arial,sans-serif;font-size:14px;line-height:1.38;color:#263348;overflow-wrap:anywhere}
.diagram-eyebrow{margin-bottom:8px;color:#245fe8;font-weight:700;letter-spacing:.065em;text-transform:uppercase}
.diagram-heading{font-size:18px;line-height:1.25;color:#111827}
.diagram-copy{margin-top:7px;color:#4e5c70}
.diagram-meta{margin-top:8px;color:#68758a}
.diagram-metric{margin-top:5px;font-size:27px;letter-spacing:-.035em;color:#111827}
.diagram-source,.diagram-status,.diagram-approval,.diagram-badge,.diagram-chip{width:max-content;max-width:100%;margin-top:10px;border-radius:999px;padding:6px 9px;background:#e8f0ff;color:#174fcb;font-weight:650}
.diagram-badge{margin:0 0 10px;background:#2f6bff;color:#fff}
.diagram-approval{background:#111827;color:#fff}
.diagram-chip{display:inline-block;margin:9px 5px 0 0;background:#f0f4fb;color:#445269}
.diagram-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;border-radius:8px;padding:8px 10px;background:#f5f8fd;color:#25334a}
.diagram-row b{font-weight:650}.diagram-row small{font:inherit;color:#68758a;text-align:right}
.diagram-row.is-selected{background:#e4edff;color:#174fcb;box-shadow:inset 3px 0 #2f6bff}
.diagram-checkline{margin-top:10px;padding-bottom:8px;border-bottom:1px solid #e3e9f2;color:#405068}
.diagram-checkline:last-child{border-bottom:0}
.diagram-check .diagram-label{font-family:DM,"DM Sans",Arial,sans-serif}
.diagram-check .diagram-code{border-radius:7px;padding:8px;background:#111827;color:#e6edff}
.diagram-connector{position:relative;height:22px;display:flex;align-items:center;justify-content:center;color:#2f6bff;font-size:19px;font-weight:700}
.diagram-connector i{position:absolute;left:4px;right:4px;height:2px;background:#9ebcff}
.diagram-connector span{position:relative;margin-left:auto;background:#edf3ff}
.diagram-connector:before{content:"";position:absolute;left:4px;width:8px;height:8px;border-radius:50%;background:#2f6bff;box-shadow:0 0 0 5px #2f6bff20;animation:diagram-travel 3.4s ease-in-out infinite}
.mini-bars{display:grid;gap:7px;margin-top:17px}.mini-bars i{display:block;height:9px;border-radius:9px;background:#2f6bff;transform-origin:left;animation:diagram-bar 3.2s ease-in-out infinite}.mini-bars .bar-a{width:88%}.mini-bars .bar-b{width:61%;opacity:.67;animation-delay:-.7s}.mini-bars .bar-c{width:34%;opacity:.4;animation-delay:-1.4s}
.diagram-advisory{border-color:#7ea5f5;box-shadow:0 16px 44px #2f6bff20;animation:diagram-emphasis 4.8s ease-in-out infinite}
.diagram-signal .diagram-status{animation:diagram-status 4s ease-in-out infinite}
.diagram-draft{border-top:4px solid #2f6bff}.diagram-draft .diagram-approval{animation:diagram-status 4s ease-in-out infinite}
.diagram-canvas--persona{grid-template-columns:minmax(180px,.62fr) minmax(420px,1.38fr);grid-template-areas:"role brief" "questions questions";gap:18px}
.diagram-role{grid-area:role}.diagram-brief{grid-area:brief;grid-template-columns:1fr 1fr}.diagram-questions{grid-area:questions;display:grid;grid-template-columns:140px 1.25fr 1fr;align-items:center;gap:16px;animation:diagram-emphasis 4.8s ease-in-out infinite}.diagram-questions .diagram-eyebrow,.diagram-questions .diagram-copy{margin:0}
.diagram-hypotheses{border-style:dashed}.diagram-hypotheses .diagram-row{border:1px dashed #a8bce0;background:#fff}
.brand-sample{display:flex;align-items:center;gap:7px;margin:10px 0}.brand-sample i{width:22px;height:22px;border-radius:6px;background:#2f6bff}.brand-sample i:nth-child(2){background:#111827}.brand-sample i:nth-child(3){background:#dbe7ff}
.diagram-post{padding:13px 15px;animation:post-drift 6s ease-in-out infinite}.diagram-post .diagram-badge{display:inline-block;margin:0 8px 5px 0;padding:4px 7px}.diagram-post strong{display:inline}.diagram-post .diagram-copy{margin-top:5px}.diagram-post:nth-child(2){animation-delay:-2s}.diagram-post:nth-child(3){animation-delay:-4s}
.scene-key{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #cbd9ee;background:#fff}
.scene-key>span{display:flex;min-width:0;min-height:78px;flex-direction:column;gap:2px;justify-content:center;padding:13px 15px;border-right:1px solid #d9e2f0}
.scene-key>span:last-child{border-right:0}
.scene-key strong,.scene-key small{display:block;overflow-wrap:anywhere;font-family:DM,"DM Sans",Arial,sans-serif;font-size:14px;line-height:1.35}
.scene-key strong{color:#225ddd;font-weight:650}.scene-key small{color:#4f5968}
.product-demo{display:grid;grid-template-columns:minmax(0,.72fr) minmax(320px,1.28fr);grid-template-areas:"intro controls" "intro output";column-gap:clamp(28px,6vw,82px);row-gap:15px;align-items:start;margin-block:clamp(56px,9vw,116px);padding:clamp(28px,5vw,64px);border-radius:18px;background:#111214;color:#fff}
.product-demo__intro{grid-area:intro}.product-demo__intro p{color:#c7d0df}.sample-flag{font-size:14px!important;letter-spacing:.06em;text-transform:uppercase;color:#8fb1ff!important;margin-bottom:11px}
.demo-controls{grid-area:controls;display:flex;flex-wrap:wrap;gap:9px}
.demo-controls button{min-height:44px;border:1px solid #556276;border-radius:7px;padding:9px 14px;background:#1d2026;color:#fff;font-size:14px}
.demo-controls button:hover{border-color:#8fb1ff;background:#252d3c}.demo-controls button[aria-pressed="true"]{border-color:#8fb1ff;background:#2f6bff}
.demo-output{grid-area:output;min-height:132px;margin:0;padding:23px;border:1px solid #3d485b;border-radius:12px;background:#181b21;color:#fff!important;font-size:17px!important;display:flex;align-items:center}
.product-boundary{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,110px);margin-block:clamp(58px,9vw,120px)}
.product-boundary h3{font-size:22px;margin-bottom:14px}.product-boundary a{color:#245de5;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* ponytail: native details provide keyboard disclosure without another script. */
.product-features{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,72px);margin-block:clamp(48px,7vw,88px)}
.product-features h2{font-size:clamp(31px,4vw,44px);letter-spacing:-.035em;margin-bottom:16px}
.product-features p{font-size:16px;line-height:1.78;color:var(--muted,#5d626c)}
.product-features details{border-bottom:1px solid #c9d8ef;padding:0 18px;background:#f5f8ff}
.product-features details:first-child{border-top:1px solid #c9d8ef;border-radius:12px 12px 0 0}
.product-features details:last-child{border-radius:0 0 12px 12px}
.product-features summary{min-height:56px;padding:17px 0;font-size:17px;font-weight:650;line-height:1.4;color:#172844;cursor:pointer}
.product-features summary:hover,.product-features details[open] summary{color:#245de5}
.product-features summary:focus-visible{outline:2px solid #245de5;outline-offset:4px;border-radius:3px}
.product-features details p{margin:0;padding-bottom:22px}
@media(max-width:800px){.product-features{grid-template-columns:1fr;gap:20px}}
@keyframes diagram-travel{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(28px);opacity:1}}
@keyframes diagram-bar{0%,100%{transform:scaleX(.75)}50%{transform:scaleX(1)}}
@keyframes diagram-emphasis{0%,100%{box-shadow:0 16px 44px #2f6bff12}50%{box-shadow:0 18px 48px #2f6bff32}}
@keyframes diagram-status{0%,100%{opacity:.68}50%{opacity:1}}
@keyframes post-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(max-width:900px){.diagram-canvas{grid-template-columns:1fr;gap:0;min-height:0;padding:24px}.diagram-connector{height:42px;width:100%}.diagram-connector i{left:50%;right:auto;top:4px;bottom:4px;width:2px;height:auto}.diagram-connector span{margin:0;background:#edf3ff;transform:rotate(90deg)}.diagram-connector:before{left:calc(50% - 3px);top:4px;animation:diagram-travel-mobile 3.4s ease-in-out infinite}.diagram-canvas--persona{grid-template-areas:"role" "brief" "questions";gap:14px}.diagram-brief{grid-template-columns:1fr}.diagram-questions{grid-template-columns:1fr;gap:7px}.diagram-canvas--zupa .diagram-variants{gap:10px}}
@keyframes diagram-travel-mobile{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(28px);opacity:1}}
@media(max-width:800px){.product-story,.product-demo,.product-boundary{grid-template-columns:1fr}.product-story{gap:28px}.product-demo{grid-template-areas:"intro" "controls" "output";row-gap:18px;padding:27px 22px}.demo-output{min-height:0}.product-boundary{gap:25px}}
@media(max-width:620px){.scene-key{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-key>span{min-height:68px}.scene-key>span:nth-child(2){border-right:0}.scene-key>span:nth-child(-n+2){border-bottom:1px solid #d9e2f0}.diagram-canvas{padding:18px}.diagram-card{padding:15px}.diagram-heading{font-size:17px}.diagram-metric{font-size:24px}}
@media(prefers-reduced-motion:reduce){.product-scene *{animation:none!important}.demo-output{transition:none!important}}