/* A working design sample, framed as a miniature studio. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 40%,#b6d9940c,transparent 55%)}
.hero-playground{isolation:isolate}
.playground-stage::before{content:"";position:absolute;inset:8% -5%;z-index:-1;background-image:linear-gradient(#c9ee8309 1px,transparent 1px),linear-gradient(90deg,#c9ee8309 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,#000 10%,transparent 73%)}
.site-window{border-color:#bfcaa866;box-shadow:0 35px 65px #0006,0 0 0 6px #ffffff03}
.offer-preview{--sample-bg:#edf0e4;--sample-ink:#273222;--sample-muted:#667456;--sample-tile:#d3dfa9;--sample-strong:#304825;--sample-button-text:#f2f5eb;background:var(--sample-bg);color:var(--sample-ink);transition:background .5s,color .5s}
.offer-preview[data-palette="blue"]{--sample-bg:#192e59;--sample-ink:#f4f1e9;--sample-muted:#b2c7ed;--sample-tile:#6c9dff;--sample-strong:#d4e4ff;--sample-button-text:#182c53}
.offer-preview[data-palette="clay"]{--sample-bg:#f1e5d9;--sample-ink:#4e2b24;--sample-muted:#8e6357;--sample-tile:#e5a58d;--sample-strong:#8f3d2d;--sample-button-text:#fff2e7}
.offer-preview .live-copy>span,.offer-preview .live-copy p,.offer-preview .live-footer{color:var(--sample-muted)}
.offer-preview .live-enter{background:var(--sample-strong);color:var(--sample-button-text);border-radius:30px;padding:10px 13px;font-size:7px;transition:background .5s,color .5s,transform .3s}
.offer-preview .live-enter:hover{transform:translateY(-2px)}
.offer-preview .live-nav{left:7%;right:7%}
.offer-preview .live-copy{width:54%;top:30%}
.offer-preview .live-copy h2{font-size:clamp(33px,3.3vw,52px);line-height:1.08}
.offer-preview .live-copy p{max-width:170px;line-height:1.7}
.preview-services{top:25%;right:6%;width:29%;padding:0;background:transparent;transform:rotate(5deg);color:var(--sample-ink)}
.preview-services>strong,.preview-services>div:not(.preview-poster),.preview-services-label{display:none}
.preview-poster{height:225px;position:relative;background:var(--sample-tile);padding:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #ffffff20;box-shadow:0 12px 20px #0001;border-radius:70px 70px 4px 4px;transition:background .5s,border-radius .5s}
.preview-poster::after{content:"";position:absolute;inset:50% -30% -50%;border:1px solid currentColor;border-radius:50%;opacity:.16;transform:rotate(-30deg)}
.preview-poster>span{font-size:5px;line-height:1.5;letter-spacing:.1em;align-self:center;text-align:center;margin-top:17px;color:#26351e}
.preview-poster>b{font-size:clamp(60px,8vw,110px);font-weight:500;letter-spacing:-.12em;line-height:.9;color:#26351e;position:relative;align-self:center;padding-right:12px}
.preview-poster>b>span{position:absolute;font-size:24px;right:-7px;top:-7px;letter-spacing:0}
.preview-poster>i{font-style:normal;font-size:4px;letter-spacing:.1em;color:#26351e;z-index:1}
[data-palette="blue"] .preview-poster{border-radius:4px 65px 4px 4px}
[data-palette="clay"] .preview-poster{border-radius:4px 4px 65px 4px}
[data-type="editorial"] .live-copy h2,[data-type="editorial"] .live-nav strong,[data-type="editorial"] .preview-poster>b{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em}
[data-type="editorial"] .live-copy h2{font-style:italic;font-size:clamp(36px,3.7vw,58px)}
.design-controls{margin-top:22px;border-top:1px solid #ffffff20;padding-top:13px;display:grid;gap:12px}
.design-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.design-control-row>span{font-size:10px;color:#a4b098}
.palette-switch,.type-switch{display:flex;gap:5px}
.palette-switch button,.type-switch button{background:transparent;border:1px solid transparent;color:#9da696;border-radius:30px;display:flex;align-items:center;gap:7px;padding:7px 9px;min-height:34px;transition:background .2s,border-color .2s,color .2s;font-size:10px}
.palette-switch button[aria-pressed="true"],.type-switch button[aria-pressed="true"]{color:#eff4e7;border-color:#82937066;background:#ffffff08}
.palette-switch button:hover,.type-switch button:hover{background:#ffffff0c;color:#fff}
.palette-switch i{height:13px;width:13px;border-radius:50%;background:#d3dfa9;box-shadow:0 0 0 2px #ffffff0a}
.palette-switch [data-palette="blue"] i{background:#6c9dff}
.palette-switch [data-palette="clay"] i{background:#e5a58d}
.palette-switch span,.type-switch span{font-size:9px}
.type-switch button{min-width:91px;justify-content:center;font-size:15px}
.type-switch [data-type="editorial"]{font-family:Georgia,serif;font-style:italic}
.type-switch span{font-family:Manrope,Arial,sans-serif;font-style:normal}
.playground-tools{margin-top:12px;padding-top:12px}
.preview-explanation{max-width:330px;font-size:10px;color:#a1ae94}
.hero-grid{padding-top:42px;gap:7%;padding-bottom:45px}
.feature-art{height:200px;background:#e6e8dc;position:relative;overflow:hidden;margin-bottom:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;isolation:isolate}
.feature-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#40552c08 1px,transparent 1px),linear-gradient(90deg,#40552c08 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.art-caption{position:absolute;bottom:14px;left:17px;font-size:6px;letter-spacing:.11em;color:#6b775e}
.mini-sheet{background:#faf9f1;width:140px;padding:15px 17px 20px;box-shadow:0 10px 25px #33371c15;transform:rotate(-7deg) translateY(-4px);transition:transform .6s var(--ease);border:1px solid #d4d8c8}
.mini-sheet>span{font-size:7px;font-weight:600}
.mini-sheet>strong{font:53px/1.4 Georgia,serif;display:flex;align-items:center;justify-content:space-between;letter-spacing:-.05em}
.mini-sheet>strong span{font:22px Manrope,sans-serif;color:#7e905b}
.mini-sheet>i{display:block;width:80%;height:2px;background:#ccd1bf;margin-top:5px}
.mini-sheet>i:last-child{width:60%}
.mini-swatches{display:flex;position:absolute;right:20%;bottom:43px;transform:rotate(10deg);box-shadow:0 4px 16px #0001;transition:transform .6s var(--ease)}
.mini-swatches i{width:29px;height:40px;background:#c9ee83;border:3px solid #f9f8f0}
.mini-swatches i:nth-child(2){background:#283d23}.mini-swatches i:nth-child(3){background:#e5a58d}
.mini-desktop{width:190px;height:115px;border:5px solid #313e29;border-radius:6px;background:#f4f3e9;padding:12px;box-shadow:0 10px 18px #0001;transform:translate(-8px,-8px)}
.mini-desktop>i,.mini-phone>i{display:block;width:23px;height:2px;background:#8f9e7c;margin-bottom:13px}
.mini-desktop>strong{display:block;font-size:23px;font-weight:500;letter-spacing:-.07em}
.mini-desktop>span,.mini-phone>span{display:block;background:#d4dfbf;width:60%;height:3px;margin-top:7px}
.mini-desktop>span:last-child{width:40%}
.mini-phone{position:absolute;width:59px;height:107px;background:#d4e4b8;border:4px solid #313e29;border-radius:10px;right:20%;top:62px;padding:12px 7px;box-shadow:0 7px 15px #0002;transform:rotate(7deg);transition:transform .6s var(--ease)}
.mini-phone>i{width:15px;margin-bottom:12px}
.mini-phone>strong{font-size:13px;font-weight:500;letter-spacing:-.06em;line-height:1.1;display:block}
.mini-phone>span{background:#91a777;width:85%}
.launch-address{display:flex;align-items:center;gap:12px;padding:15px;background:#f9f9f1;border:1px solid #cdd5be;border-radius:7px;font-size:12px;box-shadow:0 10px 20px #0001;transform:translateY(-20px);transition:transform .6s var(--ease)}
.launch-address>i{width:6px;height:6px;background:#7b9c52;border-radius:50%}
.launch-address>b{font-size:18px;font-weight:400;margin-left:10px}
.launch-path{position:absolute;display:flex;align-items:center;bottom:48px;width:150px;gap:8px}
.launch-path>i{width:16px;height:16px;border:1px solid #acb89a;border-radius:50%;font:10px Manrope,sans-serif;display:grid;place-items:center;background:#f5f6ec}
.launch-path>span{flex:1;height:1px;background:#adb99b}
.launch-path>i:last-child{background:#324928;color:#d8edbd;border-color:#324928}
.deliverables-grid article{border:0;padding:0}
.deliverables-grid article:hover .mini-sheet{transform:rotate(-2deg) translateY(-8px)}
.deliverables-grid article:hover .mini-swatches{transform:rotate(-2deg) translateY(3px)}
.deliverables-grid article:hover .mini-phone{transform:rotate(0) translateY(-7px)}
.deliverables-grid article:hover .launch-address{transform:translateY(-25px)}
@media(min-width:1100px){.hero-grid{grid-template-columns:1.05fr 1fr}.hero-playground{max-width:590px}.hero{min-height:auto}.hero-copy{padding-bottom:70px}}
@media(max-width:760px){.hero-grid{gap:40px}.design-controls{margin-top:15px}.design-control-row>span{font-size:10px}.palette-switch span{font-size:8px}.palette-switch button{padding:7px}.preview-poster{height:200px;padding:12px}.preview-poster>b{font-size:70px}.preview-poster>span{font-size:4px}.offer-preview .live-copy h2{font-size:31px}.offer-preview[data-type="editorial"] .live-copy h2{font-size:35px}.offer-preview .live-enter{font-size:6px}.preview-services{width:28%;top:26%;right:5%}.offer-preview .live-copy p{max-width:145px;font-size:6px}.preview-explanation{font-size:9px}.feature-art{grid-column:1/-1;height:180px;margin-bottom:8px}.deliverables-grid article>span{grid-row:2/4}.mini-swatches{right:29%}.mini-phone{right:30%}.hero-copy{padding-bottom:0}}
.is-mobile .offer-preview .live-copy{top:30%;width:calc(100% - 34px)}
.is-mobile .offer-preview .live-copy h2{font-size:33px}
.is-mobile .offer-preview[data-type="editorial"] .live-copy h2{font-size:37px}
.offer-preview{container-type:inline-size}
.offer-preview .live-copy{width:60%}
.offer-preview .live-copy h2{font-size:8cqw}
.offer-preview[data-type="editorial"] .live-copy h2{font-size:8.4cqw}
.is-mobile .offer-preview .live-copy h2{font-size:33px}
.is-mobile .offer-preview[data-type="editorial"] .live-copy h2{font-size:37px}
@media(max-width:370px){.palette-switch button{padding:6px 5px;gap:5px}.palette-switch span{font-size:7px}.palette-switch i{height:11px;width:11px}.design-control-row>span{font-size:9px}.offer-preview .live-copy h2{font-size:27px}.offer-preview[data-type="editorial"] .live-copy h2{font-size:29px}.preview-poster>b{font-size:57px}.preview-poster{height:185px}.preview-poster>b>span{font-size:18px}.offer-preview .live-copy p{max-width:120px}.offer-preview .live-enter{gap:10px}}
@media(max-width:370px){.offer-preview .live-copy h2{font-size:8cqw}.offer-preview[data-type="editorial"] .live-copy h2{font-size:8.4cqw}.is-mobile .offer-preview .live-copy h2{font-size:33px}.is-mobile .offer-preview[data-type="editorial"] .live-copy h2{font-size:37px}}