/* Homepage teaser only. The full local recordings remain available in the dialog. */
#creative-studio{padding-block:38px}
#creative-studio>.wrap>.section-heading{grid-template-columns:170px minmax(0,1fr);gap:30px;margin-bottom:24px}
#creative-studio .section-heading h2{font-size:clamp(30px,3.2vw,46px);line-height:1.08;margin:0;max-width:820px}
#creative-studio .section-heading>div>p{font-size:13px;line-height:1.6;max-width:780px;margin-top:13px}
#creative-studio .hc-studio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#creative-studio .hc-studio-grid>:is(.csl-card,.csl-shop){display:flex;flex-direction:column;gap:0;padding:8px;margin:0;border:0;border-radius:22px 22px 5px 22px;align-items:stretch;min-width:0;background:var(--smoke)}
#creative-studio .hc-studio-grid :is(.csl-art,.csl-shop-stage){grid-column:auto;grid-row:auto;aspect-ratio:16/9;width:100%;height:auto;max-height:none;margin:0;border-radius:15px 15px 4px 15px;background:#17171f;flex-shrink:0}
#creative-studio .cst-preview-open{position:absolute;inset:0;z-index:4;border:0;background:transparent;cursor:pointer;padding:0}
#creative-studio .cst-preview-open:after{content:"";position:absolute;right:9px;bottom:9px;width:22px;height:22px;border-radius:7px 7px 2px 7px;background:#fff url('../design-assets/tiposka_plus.svg') center/11px no-repeat;box-shadow:0 2px 10px #0002;opacity:0;transition:opacity .18s}
#creative-studio .cst-preview-open:is(:hover,:focus-visible):after{opacity:1}
#creative-studio .hc-studio-grid .hc-studio-copy{grid-column:auto;grid-row:auto;padding:14px 9px 7px;justify-content:start;min-width:0;flex:1}
#creative-studio .hc-studio-grid .hc-studio-copy .eyebrow{font-size:8px;margin:0 0 9px;letter-spacing:.07em;line-height:1.4}
#creative-studio .hc-studio-grid .hc-studio-copy h3{font-size:clamp(19px,1.7vw,26px);line-height:1.12;margin:0 0 12px;font-weight:600;letter-spacing:-.025em}
#creative-studio .hc-studio-grid .hc-studio-copy h3 br{display:none}
#creative-studio .hc-studio-grid .hc-studio-copy>p:not(.eyebrow),#creative-studio .hc-studio-grid .csr-record-note,#creative-studio .hc-studio-grid .csl-tabs{display:none}
#creative-studio .hc-studio-grid .csr-card-actions{margin-top:auto;gap:12px;flex-wrap:wrap}
#creative-studio .hc-studio-grid .csl-open,#creative-studio .hc-studio-grid .csr-try,#creative-studio .hc-studio-grid .cst-shop-open{font:600 10px/1.4 Montserrat,sans-serif;padding:6px 0;margin:0;border:0;border-bottom:1px solid #ff450a;border-radius:0;background:transparent;color:#272733;cursor:pointer}
#creative-studio .hc-studio-grid .csr-try{font-weight:500;color:#71717d;border-color:transparent}
#creative-studio .hc-studio-grid .csl-shop-start{position:absolute;inset:0;z-index:4;margin:0;border:0;border-radius:0;padding:0;background:transparent;color:transparent;font-size:0}
#creative-studio .hc-studio-grid .csl-shop-cover video{object-fit:contain}
#creative-studio .csl-section-tools{margin-top:12px;gap:16px;align-items:center}
#creative-studio .csl-section-tools p{font-size:9px;line-height:1.4;max-width:600px}
#creative-studio .csl-motion{font-size:9px;padding:7px 10px}
#creative-studio .hc-precision{grid-template-columns:.9fr 1.5fr;gap:30px;padding:20px 24px;margin-top:22px;border-radius:22px 22px 5px 22px}
#creative-studio .hc-precision-copy .eyebrow{font-size:9px;margin:0 0 10px}
#creative-studio .hc-precision-copy h3{font-size:clamp(21px,2.1vw,30px);line-height:1.12;margin:0;max-width:330px;overflow-wrap:normal}
#creative-studio .hc-precision-copy>p:not(.eyebrow){display:none}
#creative-studio .hc-message-demo{display:grid;grid-template-columns:100px minmax(0,1fr);gap:9px 14px;align-items:center}
#creative-studio .hc-message-tabs{flex-direction:column;gap:5px;margin:0;grid-column:1;grid-row:1}
#creative-studio .hc-message-tabs button{font-size:10px;padding:10px 8px;min-height:36px;white-space:nowrap}
#creative-studio .hc-ad-example{grid-column:2;grid-row:1;min-height:0;height:148px;padding:17px;border-radius:15px 15px 4px 15px}
#creative-studio .hc-ad-example h4{font-size:23px;line-height:1.08;margin:30px 0 0;max-width:65%}
#creative-studio .hc-ad-example>p,#creative-studio .hc-ad-cta{display:none}
#creative-studio .hc-ad-label{font-size:7px;padding:3px 5px}
#creative-studio .csl-frame-index{font-size:8px;bottom:12px;right:12px}
#creative-studio .hc-demo-note{grid-column:2;grid-row:2;font-size:8px;margin:0;line-height:1.4}
#creative-studio>.wrap>.actions{margin-top:18px;gap:18px;align-items:center}
#creative-studio>.wrap>.actions .button{font-size:11px;padding:11px 15px;min-height:38px}
#creative-studio .cst-dialog-examples{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
#creative-studio .cst-dialog-examples button{font:500 11px/1.4 Montserrat,sans-serif;padding:8px 12px;background:#fff;border:1px solid #d5d5de;border-radius:9px 9px 2px 9px;color:#272733;cursor:pointer}
#creative-studio .cst-dialog-examples button[aria-pressed=true]{background:#ff450a;border-color:#ff450a;color:#fff}
#creative-studio .cst-dialog-description{font-size:12px;line-height:1.6;margin:14px 0 0;color:#71717d;max-width:800px}
@media(max-width:1050px) and (min-width:601px){
 #creative-studio .hc-studio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #creative-studio .hc-studio-grid>:is(.csl-card,.csl-shop){display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
 #creative-studio .hc-studio-grid .hc-studio-copy{padding:10px 12px}
 #creative-studio .hc-studio-grid .hc-studio-copy h3{font-size:21px;margin-bottom:12px}
 #creative-studio .hc-precision{gap:20px;padding:18px}
 #creative-studio .hc-message-demo{grid-template-columns:88px minmax(0,1fr);gap:8px}
 #creative-studio .hc-ad-example h4{font-size:20px}
}
@media(max-width:600px){
 #creative-studio{padding-block:30px}
 #creative-studio>.wrap>.section-heading{display:block;margin-bottom:20px}
 #creative-studio .section-heading>.eyebrow{padding:0;font-size:9px;margin-bottom:12px}
 #creative-studio .section-heading h2{font-size:30px;line-height:1.1}
 #creative-studio .section-heading .brand-word{font-size:1em}
 #creative-studio .section-heading>div>p{font-size:12px;line-height:1.55;margin-top:12px}
 #creative-studio .hc-studio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #creative-studio .hc-studio-grid>:is(.csl-card,.csl-shop){padding:6px;border-radius:16px 16px 4px 16px}
 #creative-studio .hc-studio-grid :is(.csl-art,.csl-shop-stage){border-radius:11px 11px 3px 11px}
 #creative-studio .hc-studio-grid .hc-studio-copy{padding:11px 5px 4px}
 #creative-studio .hc-studio-grid .hc-studio-copy .eyebrow{font-size:7px;margin-bottom:7px;letter-spacing:.03em}
 #creative-studio .hc-studio-grid .hc-studio-copy h3{font-size:clamp(15px,4.2vw,20px);min-height:2.25em;margin-bottom:8px;line-height:1.12}
 #creative-studio .hc-studio-grid .csr-card-actions{gap:5px 10px}
 #creative-studio .hc-studio-grid .csl-open,#creative-studio .hc-studio-grid .csr-try,#creative-studio .hc-studio-grid .cst-shop-open{font-size:9px;min-height:30px;display:flex;align-items:center}
 #creative-studio .hc-studio-grid .csr-try{display:none}
 #creative-studio .csl-section-tools p{max-width:200px;font-size:8px}
 #creative-studio .csl-motion{font-size:8px;padding:8px}
 #creative-studio .hc-precision{grid-template-columns:1fr;padding:16px;gap:14px;margin-top:18px}
 #creative-studio .hc-precision-copy .eyebrow{font-size:8px;margin-bottom:7px}
 #creative-studio .hc-precision-copy h3{font-size:23px;max-width:none}
 #creative-studio .hc-precision-copy h3 br{display:none}
 #creative-studio .hc-message-demo{grid-template-columns:1fr;gap:8px}
 #creative-studio .hc-message-tabs{grid-column:1;grid-row:1;flex-direction:row;gap:5px}
 #creative-studio .hc-message-tabs button{flex:1;font-size:9px;padding:8px 5px;min-height:32px}
 #creative-studio .hc-ad-example{grid-column:1;grid-row:2;height:116px;padding:14px}
 #creative-studio .hc-ad-example h4{font-size:21px;margin-top:22px;max-width:60%}
 #creative-studio .hc-demo-note{grid-column:1;grid-row:3;font-size:7px}
 #creative-studio>.wrap>.actions{gap:9px;flex-wrap:nowrap;margin-top:15px}
 #creative-studio>.wrap>.actions .button{flex:1;font-size:9px;line-height:1.4;padding:10px;gap:8px;min-height:42px}
 #creative-studio>.wrap>.actions .brand-clasp{width:14px;height:14px;flex-shrink:0}
 #creative-studio .cst-preview-open:after{opacity:1;width:18px;height:18px;background-size:9px;right:6px;bottom:6px}
 #creative-studio .cst-dialog-examples button{font-size:10px;padding:8px}
}
@media(prefers-reduced-motion:reduce){#creative-studio .cst-preview-open:after{transition:none}}