/* Clarity and web tool walkthroughs. Official extension media has its own component. */
.product-demo{--demo-accent:#6440dd;--demo-soft:#eee9fc;margin:0;border:1px solid #dcd5e5;border-radius:16px;overflow:hidden;background:#fff;color:var(--ink);isolation:isolate;min-width:0}.demo-heading{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid #e7e2eb;font-size:11px;flex-wrap:wrap}.demo-heading strong{font-weight:750;letter-spacing:-.015em}.demo-kind{margin-left:auto;font-size:9px;color:#72657e}.demo-live-dot{width:6px;height:6px;border-radius:50%;background:var(--demo-accent);flex-shrink:0}.demo-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(255px,.8fr)}.demo-viewport{position:relative;min-width:0;background:#f3eff9;display:grid;align-items:center;overflow:hidden;border-right:1px solid #e7e2eb}.demo-frame{grid-area:1/1;min-width:0;animation:demo-reveal .38s ease both}.demo-capture{display:block;position:relative;background:white}.demo-capture img{width:100%;height:auto;aspect-ratio:1363/936;object-fit:contain;object-position:top}.capture-expand{position:absolute;right:12px;bottom:12px;padding:5px 9px;background:#fffef5ed;border:1px solid #d1dedb;border-radius:5px;font-size:10px;font-weight:750;color:#294c48;box-shadow:0 2px 8px #143c3b15}.demo-capture:hover .capture-expand{background:#d8f3eb}.demo-explanation{padding:25px;display:flex;flex-direction:column;justify-content:center;min-width:0}.demo-step-tabs{display:flex;gap:6px;margin-bottom:25px;flex-wrap:wrap}.demo-step-button{border:1px solid #e3ddea;background:#f8f6fb;padding:7px 9px;color:#766782;border-radius:6px;font-size:9px;font-weight:650;display:flex;gap:6px;align-items:center;line-height:1.5}.demo-step-button>span{font-variant-numeric:tabular-nums;opacity:.7;font-size:8px}.demo-step-button.is-current{border-color:var(--demo-accent);background:var(--demo-soft);color:var(--demo-accent)}.demo-step-button:hover{border-color:var(--demo-accent)}.demo-captions{min-height:153px}.demo-caption>strong{display:block;font-size:22px;line-height:1.3;letter-spacing:-.035em;font-weight:700;margin-bottom:13px}.demo-caption>p{font-size:12px;line-height:1.8;color:#71677b;max-width:46em}.demo-controls{border-top:1px solid #e9e3ee;margin-top:20px;padding-top:17px;display:flex;align-items:center;gap:12px}.demo-controls>button{background:none;border:0;padding:5px 0;color:var(--demo-accent);font-size:11px;font-weight:750;display:flex;align-items:center;gap:7px;min-height:32px}.demo-controls>button:hover{color:var(--ink)}.demo-controls [data-play-icon]{width:14px;text-align:center;font-size:12px}.demo-position{font-size:9px;letter-spacing:.06em;color:#9a8ca6;margin:auto;font-variant-numeric:tabular-nums}.demo-position b{font-weight:750;color:var(--demo-accent)}.demo-controls>.demo-next{font-size:10px}.demo-note{font-size:9px!important;line-height:1.7!important;color:#83758e!important;padding:12px 20px;border-top:1px solid #e7e2eb;max-width:none!important;margin:0!important;background:#fbfafc}.demo-example-stamp{position:absolute;right:12px;bottom:9px;font-size:7px;color:#9a8aad;text-transform:uppercase;letter-spacing:.08em;pointer-events:none}.demo-compact .demo-body{display:block}.demo-compact .demo-viewport{border-right:0;border-bottom:1px solid #e7e2eb}.demo-compact .demo-explanation{padding:19px 21px}.demo-compact .demo-heading{padding:12px 17px}.demo-compact .demo-kind{margin-left:0;flex-basis:100%;padding-left:15px;font-size:8px}.demo-compact .demo-step-tabs{margin-bottom:16px}.demo-compact .demo-caption>strong{font-size:19px;margin-bottom:8px}.demo-compact .demo-caption>p{font-size:11px}.demo-compact .demo-captions{min-height:107px}.demo-compact .demo-controls{margin-top:13px;padding-top:12px}.demo-compact .demo-note{font-size:8px!important;padding:10px 17px}
.demo-clarity{--demo-accent:#6752bd;--demo-soft:#eeeafa}.clarity-simulation{margin:24px;background:white;border:1px solid #d7cfdf;border-radius:10px;box-shadow:0 14px 30px #59436c0a;overflow:hidden}.sim-toolbar{padding:14px 17px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e9e4ee;font-size:12px}.sim-toolbar>span:last-child{font-size:9px;color:#94839f;margin-left:auto}.sim-app-icon{width:29px;height:29px;display:grid;place-items:center;background:linear-gradient(140deg,#7966d2,#b6a6e3);border-radius:8px;color:white;font-weight:800;font-size:17px}.sim-clarity-content{padding:15px 19px 18px}.sim-form-row{padding:10px 9px;border:1px solid transparent;border-radius:6px;display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;font-size:10px;gap:10px;margin-bottom:5px;min-height:42px}.sim-form-row>span{color:#887793}.sim-form-row code{font-size:11px;color:#604e76}.sim-form-row>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.sim-placeholder{font-size:10px;color:#b4a5bc}.sim-value{background:#ede8f6;color:#6d5592;border-radius:4px;padding:3px 6px;font-size:9px}.sim-consent-box{border:1px solid #e9e3ee;border-radius:7px;padding:12px;margin-top:8px;background:#faf8fc}.sim-section-name{display:block;color:#877192;font-size:8px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:9px}.sim-consent-box>div{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;margin-top:7px}.sim-consent-box code{font-size:10px;color:#695477}.sim-state{font-size:8px;font-weight:650;padding:3px 8px;border:1px solid #e0d8e6;border-radius:4px;color:#93829e;background:#f0ecf5}.sim-state.granted{background:#dbf1e9;border-color:#b7dbcc;color:#376953}.sim-highlight{background:#f0ebfe!important;border-color:#baa8ec!important;box-shadow:0 0 0 3px #bca4f215;animation:demo-highlight .7s ease both}.sim-flow-result{display:flex;align-items:center;gap:9px;font-size:9px;color:#897596;margin-top:14px;line-height:1.6}.sim-flow-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#ece6f6;color:var(--purple);font-size:15px;flex-shrink:0}
.clarity-spotlight{padding-block:90px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#f1edf9,#f7f6f2 65%)}.clarity-spotlight-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.clarity-copy>.eyebrow{color:var(--purple);font-size:10px;margin-bottom:22px}.clarity-copy h2{font-size:clamp(36px,4.2vw,57px);letter-spacing:-.055em;line-height:1.12;max-width:480px}.clarity-copy h2>span{color:var(--purple)}.clarity-copy>p{font-size:15px;line-height:1.9;margin-top:23px;max-width:405px}.clarity-copy .button{margin-top:28px}.clarity-capabilities{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.clarity-capabilities>span{font-size:10px;line-height:1.6;padding:5px 10px;border:1px solid #d9cee8;border-radius:5px;color:#756388}.clarity-spotlight .product-demo{box-shadow:0 20px 40px #5c3e7b0b}.extension-feature.extension-with-demo{padding:31px 29px;min-height:0;gap:28px}.extension-with-demo .feature-content h3{max-width:none;font-size:30px}.extension-with-demo .feature-content p{max-width:470px;font-size:13px}.extension-with-demo .feature-content{min-height:205px}.extension-with-demo .product-demo{margin-top:auto}.extension-with-demo .demo-captions{min-height:120px}.extension-with-demo .demo-viewport{min-height:405px}.extension-release{display:inline-flex;margin-top:15px;padding:4px 8px;background:#f7f3ff;border:1px solid #cfc1e9;border-radius:5px;font-size:9px;color:#806294}.web-tools-section{border-top:1px solid var(--line);background:#f0f5f3}.web-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.web-tool-feature{min-width:0}.web-tool-feature>.eyebrow{font-size:9px;color:#528078;margin-bottom:12px}.web-tool-feature h3{font-size:35px;margin-bottom:15px;letter-spacing:-.045em}.web-tool-feature>p{font-size:13px;line-height:1.9;min-height:75px;max-width:520px}.web-tool-feature .product-demo{margin-top:25px;--demo-accent:#397e77;--demo-soft:#e6f2ef;border-color:#cfded9}.web-tool-feature .demo-viewport{background:#f2f7f6}.web-tool-actions{display:flex;justify-content:space-between;gap:20px;margin-top:24px;padding-bottom:10px}.web-tool-actions .text-link{font-size:12px}.web-tool-actions>.text-link:last-child{color:#5a7971;font-size:11px}.web-author-link{font-weight:750;text-decoration:underline;text-underline-offset:3px}.web-tools-section .section-heading>p{max-width:300px}.web-tool-feature .demo-captions{min-height:129px}
@keyframes demo-reveal{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-highlight{from{box-shadow:0 0 0 5px #a586e826}to{box-shadow:0 0 0 3px #bca4f215}}
@media(max-width:1150px){.clarity-spotlight-grid{gap:38px;grid-template-columns:.9fr 1.1fr}.clarity-copy h2{font-size:43px}.clarity-copy>p{font-size:13px}.demo-body{grid-template-columns:minmax(0,1.35fr) minmax(250px,1fr)}.demo-explanation{padding:21px}.demo-step-button{font-size:8px;padding:6px 7px;gap:4px}.extension-feature.extension-with-demo{padding:27px 24px}.extension-with-demo .feature-content h3{font-size:27px}.extension-with-demo .feature-content p{font-size:12px}.debug-sim-layout{grid-template-columns:92px minmax(0,1fr)}.debug-event-list{font-size:8px;padding-inline:6px}.debug-console-data{font-size:9px;padding-inline:11px}.debug-console-data>.debug-item-object{font-size:8px}.debug-console-bar>span:last-child{display:none}.web-tool-feature>p{min-height:95px}.extension-with-demo .demo-captions{min-height:145px}}
@media(max-width:900px){.clarity-spotlight{padding-block:65px}.clarity-spotlight-grid{grid-template-columns:1fr;gap:35px}.clarity-copy h2{max-width:620px;font-size:46px}.clarity-copy>p{max-width:580px;font-size:14px}.clarity-spotlight .product-demo{max-width:680px;width:100%;margin-inline:auto}.clarity-spotlight .demo-compact .demo-body{display:grid;grid-template-columns:1.2fr 1fr}.clarity-spotlight .demo-viewport{border-right:1px solid #e7e2eb;border-bottom:0}.clarity-spotlight .clarity-simulation{margin:16px 12px}.clarity-spotlight .sim-form-row{grid-template-columns:80px minmax(0,1fr);padding-inline:5px}.clarity-spotlight .sim-clarity-content{padding:12px}.clarity-spotlight .sim-toolbar{font-size:10px;padding:12px}.clarity-spotlight .sim-toolbar>span:last-child{font-size:7px}.extension-grid{grid-template-columns:1fr}.extension-feature.extension-with-demo{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;padding:26px;align-items:center}.extension-with-demo .feature-content{min-height:0}.extension-with-demo .feature-content h3{font-size:29px}.extension-with-demo .demo-viewport{min-height:0}.extension-with-demo .demo-captions{min-height:130px}.web-tools-grid{gap:20px}.web-tool-feature h3{font-size:29px}.web-tool-feature>p{font-size:12px;min-height:115px}.web-tool-feature .demo-captions{min-height:165px}.web-tool-feature .demo-compact .demo-heading{font-size:10px}.demo-controls>.demo-next{font-size:9px}.demo-note{font-size:8px!important}.demo-heading{font-size:10px}.demo-kind{font-size:8px}.demo-captions{min-height:185px}.debug-simulation{min-height:330px}.debug-sim-layout{min-height:285px}}
@media(max-width:650px){.clarity-spotlight{padding-block:55px}.clarity-copy h2{font-size:39px}.clarity-copy>.eyebrow{font-size:9px}.clarity-copy>p{font-size:14px}.clarity-copy .button{font-size:12px}.clarity-capabilities>span{font-size:9px}.clarity-spotlight .demo-compact .demo-body{display:block}.clarity-spotlight .demo-viewport{border-right:0;border-bottom:1px solid #e7e2eb}.clarity-spotlight .clarity-simulation{margin:20px}.clarity-spotlight .sim-form-row{grid-template-columns:90px minmax(0,1fr)}.product-demo .demo-body{display:block}.demo-viewport{border-right:0;border-bottom:1px solid #e7e2eb}.demo-explanation{padding:20px}.demo-heading{padding:13px 17px;gap:7px;font-size:10px}.demo-kind{margin-left:0;flex-basis:100%;padding-left:13px}.demo-captions,.demo-compact .demo-captions{min-height:124px}.demo-caption>strong{font-size:21px}.demo-caption>p{font-size:12px}.demo-step-tabs{gap:6px;margin-bottom:18px}.demo-step-button{font-size:9px;padding:7px 9px}.demo-controls{margin-top:15px}.demo-controls>button{font-size:11px}.demo-controls>.demo-next{font-size:10px}.demo-note{padding:11px 17px}.extension-feature.extension-with-demo{display:block;padding:27px 22px}.extension-with-demo .feature-content{margin-bottom:27px}.extension-with-demo .feature-content h3{font-size:29px}.extension-with-demo .feature-content p{font-size:13px}.extension-with-demo .demo-compact .demo-explanation{padding:17px}.extension-with-demo .demo-step-button{font-size:8px;padding:6px 7px}.extension-with-demo .demo-captions{min-height:137px}.utils-simulation{width:calc(100% - 32px);margin-block:18px 27px;padding:18px}.utils-sim-header strong{font-size:25px}.sim-version{font-size:6px;padding-inline:5px}.utils-sim-domain>span{font-size:7px}.utils-sim-row{font-size:10px}.utils-sim-input>span{font-size:6px}.debug-simulation{margin:16px 12px 24px;min-height:324px}.debug-sim-layout{min-height:278px;grid-template-columns:85px minmax(0,1fr)}.debug-event-list{font-size:8px;gap:14px}.debug-console-data{font-size:8px;padding:13px 9px}.debug-console-data>div{gap:5px}.debug-console-data>.debug-item-object{font-size:7px;padding-left:3px}.debug-sim-head{font-size:8px;padding-inline:11px}.sim-device{font-size:6px}.debug-console-bar{font-size:7px;padding:11px}.debug-empty{padding:35px 10px}.debug-empty>p{font-size:9px}.clarity-simulation{margin:20px}.sim-toolbar{font-size:11px;padding:12px}.sim-toolbar>span:last-child{font-size:8px}.sim-clarity-content{padding:12px}.sim-form-row{grid-template-columns:88px minmax(0,1fr);font-size:9px;padding-inline:6px}.sim-form-row code{font-size:10px}.sim-consent-box code{font-size:9px}.sim-form-row>div{gap:5px}.sim-value{font-size:8px}.sim-flow-result{font-size:8px}.web-tools-grid{grid-template-columns:1fr;gap:45px}.web-tool-feature h3{font-size:34px}.web-tool-feature>p{font-size:13px;min-height:0}.web-tool-feature .demo-captions{min-height:125px}.web-tool-actions .text-link{font-size:12px}.web-tool-actions>.text-link:last-child{font-size:10px}.demo-capture .capture-expand{font-size:8px;padding:4px 7px;right:8px;bottom:8px}.product-demo:not(.demo-compact) .demo-captions{min-height:140px}}
@media(prefers-reduced-motion:reduce){.demo-frame,.sim-highlight{animation:none}.sim-toggle:after{transition:none}}