/* Kova compositions: text and character occupy separate grid areas. */
.mascot-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px 20px;align-items:center}
.mascot-layout>.mascot-slot{grid-column:2;grid-row:1;position:relative;width:100%;height:100%;min-width:0;min-height:0;align-self:stretch}
.mascot-layout>.mascot-slot>img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;object-fit:contain}
.mascot-layout>.campaign-folio,.mascot-layout>.blueprint,.mascot-layout>.workspace,.mascot-layout>.studio-canvas,.mascot-layout>.creative-poster{grid-column:1;grid-row:1;position:relative;inset:auto;width:100%;max-width:none;min-width:0;justify-self:stretch}
.mascot-layout>.campaign-folio{padding:18px;rotate:-3deg}
.mascot-layout>.campaign-folio p{font-size:clamp(24px,2.4vw,36px);margin:18px 0}
.mascot-layout .folio-route{flex-wrap:wrap;gap:7px;font-size:11px}
.mascot-layout>.blueprint{rotate:-3deg}
.mascot-layout .blueprint-content{padding:18px}
.mascot-layout .blueprint p{font-size:clamp(26px,2.8vw,40px)}
.mascot-layout>.workspace{top:auto;left:auto;transform:rotate(-3deg)}
.mascot-layout>.art-note{grid-column:1/-1;grid-row:2;position:relative;inset:auto;justify-self:center;width:max-content;max-width:100%;margin:0;rotate:-2deg;text-align:center}
.crm-stage.mascot-layout>figcaption{grid-column:1/-1;grid-row:2;position:static;margin:0;text-align:center}
.creative-stage.mascot-layout{grid-template-rows:minmax(0,1fr) auto auto;gap:10px 20px}
.creative-stage.mascot-layout>.studio-canvas{top:auto;left:auto;transform:rotate(-3deg)}
.creative-stage.mascot-layout .canvas-body{padding:18px}
.creative-stage.mascot-layout .canvas-title{font-size:clamp(28px,2.8vw,40px)}
.creative-stage.mascot-layout .canvas-selection{display:none}
.creative-stage.mascot-layout>.stage-note{grid-column:1/-1;grid-row:2;position:relative;inset:auto;justify-self:center;max-width:100%;padding:8px 14px;rotate:2deg;text-align:center}
.creative-stage.mascot-layout>figcaption{grid-column:1/-1;grid-row:3;position:static;margin:0;text-align:center}
.creative-visual.mascot-layout{grid-template-rows:minmax(0,1fr);gap:20px;padding-top:14px}
.creative-visual.mascot-layout>.creative-poster{top:auto;left:auto;padding:14px;rotate:-3deg}
.creative-visual.mascot-layout>.creative-poster p{font-size:clamp(23px,2.4vw,30px)}
.api-visual.mascot-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.api-visual.mascot-layout>.api-zero{grid-column:1;grid-row:1;position:static;transform:none;font-size:clamp(120px,12vw,170px);letter-spacing:-.05em}
.api-visual.mascot-layout>.api-zero span{transform:none;margin-left:0}
.api-visual.mascot-layout>.api-bubble{grid-column:1/-1;grid-row:2;position:relative;inset:auto;width:max-content;max-width:100%;justify-self:center;margin:0;transform:rotate(-2deg)}
.closing-art.mascot-layout,.contact-art.mascot-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:18px}
.closing-art.mascot-layout{height:clamp(280px,32vw,420px)}
.closing-art.mascot-layout>.speech,.contact-art.mascot-layout>.speech-note{position:relative;inset:auto;grid-column:1;grid-row:1;justify-self:center;width:max-content;max-width:100%;margin:0;rotate:-2deg;text-align:center}
.closing-art.mascot-layout>.mascot-slot,.contact-art.mascot-layout>.mascot-slot{grid-column:1;grid-row:2}
.analyst-studio .analyst-thought{margin-right:18px}
.offer-summary{display:grid;grid-template-columns:minmax(0,1fr) clamp(68px,9vw,130px);gap:18px;align-items:center}
.offer-summary .offer-identity>div,.offer-summary .offer-price{max-width:none}
.offer-summary .offer-price{flex-wrap:wrap;row-gap:3px}
.offer-summary>.offer-mascot{position:static;inset:auto;width:100%;height:auto;max-height:150px;object-fit:contain;justify-self:center}
.details-art>.developer-note{position:relative;inset:auto;justify-self:start;margin-top:4px}

@media(max-width:1100px){
 .mascot-layout{column-gap:16px}
 .mascot-layout .workspace-content{padding:13px}
 .mascot-layout .workspace-row{gap:7px;margin-top:10px;padding-top:8px}
 .mascot-layout .workspace-content>b{font-size:17px}
 .analyst-studio .analyst-thought{margin-right:14px;white-space:nowrap}
}
@media(max-width:800px){
 .mascot-layout{column-gap:14px;row-gap:10px}
 .mascot-layout>.campaign-folio{padding:12px}
 .mascot-layout>.campaign-folio p{font-size:24px;margin:12px 0}
 .mascot-layout .blueprint-content{padding:12px}
 .mascot-layout .blueprint p{font-size:28px}
}
@media(max-width:700px){
 .offer-summary{grid-template-columns:minmax(0,1fr) 88px;gap:12px}
 .crm-stage.mascot-layout .workspace{font-size:11px;transform:none}
 .crm-stage.mascot-layout .workspace-content{padding:10px}
 .crm-stage.mascot-layout .workspace-row{display:none}
 .crm-stage.mascot-layout .workspace-content>b{font-size:16px}
 .creative-stage.mascot-layout{grid-template-rows:minmax(0,1fr) auto auto;gap:8px 14px}
 .creative-stage.mascot-layout>.studio-canvas{transform:rotate(-2deg)}
 .creative-stage.mascot-layout .canvas-body{padding:12px}
 .creative-stage.mascot-layout .canvas-title{font-size:24px;margin:0}
 .creative-stage.mascot-layout .canvas-bar,.creative-stage.mascot-layout .canvas-label,.creative-stage.mascot-layout .canvas-cta,.creative-stage.mascot-layout .canvas-swatches{display:none}
 .creative-stage.mascot-layout>.stage-note{font-size:11px;padding:6px 12px}
 .creative-stage.mascot-layout>.stage-note em{font-size:14px}
 .contact-art.mascot-layout{gap:14px}
 .api-visual.mascot-layout{column-gap:12px;row-gap:12px}
 .api-visual.mascot-layout>.api-zero{font-size:100px}
}
@media(max-width:600px){
 .mascot-layout>.campaign-folio p{font-size:20px;margin:4px 0}
 .mascot-layout .folio-label,.mascot-layout .folio-route{display:none}
 .mascot-layout>.campaign-folio{padding:12px;rotate:-2deg}
 .mascot-layout .blueprint-content{padding:10px}
 .mascot-layout .blueprint p{font-size:22px;margin:6px 0}
 .mascot-layout .blueprint-eyebrow,.mascot-layout .wire-row,.mascot-layout .wire-lines{display:none}
 .mascot-layout>.art-note{font-size:14px;padding:8px 12px;rotate:0deg}
 .creative-visual.mascot-layout{grid-template-columns:minmax(0,1fr)}
 .creative-visual.mascot-layout>.mascot-slot{grid-column:1}
 .closing-art.mascot-layout{height:210px;gap:12px}
 .closing-art.mascot-layout>.speech{font-size:15px;padding:8px 14px}
}
@media(max-width:600px) and (max-height:720px){
 .mascot-layout .blueprint-bar{display:none}
 .mascot-layout>.art-note{font-size:13px;padding:6px 10px}
 .closing-art.mascot-layout{height:150px;gap:12px}
 .closing-art.mascot-layout>.speech{font-size:13px;padding:6px 12px}
}
@media(max-width:700px) and (max-height:700px){
 .api-visual.mascot-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .api-visual.mascot-layout>.mascot-slot{grid-column:1;grid-row:1}
}
@media(max-width:370px){
 .creative-stage.mascot-layout .canvas-title{font-size:21px}
 .creative-stage.mascot-layout .canvas-body{padding:9px}
 .creative-stage.mascot-layout>.stage-note{font-size:10px;padding:5px 8px}
 .creative-stage.mascot-layout>.stage-note em{font-size:13px}
}
@media(min-width:801px) and (max-height:620px), (min-width:601px) and (max-height:420px){
 .marketing-hero .mascot-layout,.creative-visual.mascot-layout{grid-template-columns:minmax(0,1fr)}
 .marketing-hero .mascot-layout>.mascot-slot,.creative-visual.mascot-layout>.mascot-slot{grid-column:1}
}
@media(orientation:landscape) and (max-height:500px){
 .offer-summary{grid-template-columns:minmax(0,1fr) 68px;gap:10px}
 .mascot-layout{gap:8px 14px}
 .crm-stage.mascot-layout .workspace-row{display:none}
 .creative-stage.mascot-layout .canvas-bar,.creative-stage.mascot-layout .canvas-label,.creative-stage.mascot-layout .canvas-cta,.creative-stage.mascot-layout .canvas-swatches{display:none}
 .creative-stage.mascot-layout .canvas-title{font-size:26px;margin:0}
 .creative-stage.mascot-layout .canvas-body{padding:12px}
 .creative-stage.mascot-layout>.stage-note{font-size:11px;padding:5px 10px}
 .creative-stage.mascot-layout>.stage-note em{font-size:14px}
 .closing-art.mascot-layout{height:215px;gap:12px}
 .closing-art.mascot-layout>.speech{font-size:14px;padding:7px 12px}
}
