/* A stable tools stage: artwork never determines the card or section height. */
#tools { background:#171714; color:#fff; padding:24px 0; scroll-margin-top:calc(var(--tool-header-height,78px) - 92px); }
#tools>.refresh-wrap { display:grid; grid-template-rows:auto minmax(0,1fr); gap:20px; height:min(720px,calc(100svh - var(--tool-header-height,78px) - 48px)); }
#tools .section-heading { height:100px; margin:0; grid-template-columns:1.25fr .75fr; gap:40px; }
#tools .section-eyebrow { color:#ffcb05; font-size:11px; margin:0 0 9px; }
#tools .section-heading h2 { font-size:clamp(28px,2.6vw,40px); line-height:1.08; max-width:25ch; margin:0; }
#tools .section-heading .section-lead { font-size:15px; line-height:1.45; max-width:43ch; color:#d2cfc5; }
#tools .tools-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; min-height:0; }
#tools .tool-tabs { display:grid; grid-template-rows:repeat(9,minmax(0,1fr)); align-content:stretch; gap:6px; min-height:0; }
#tools .tool-tabs button { display:flex; align-items:center; gap:10px; min-height:0; min-width:0; padding:7px 13px; border:1px solid #39392f; border-radius:10px; background:#24241f; color:#e8e5dc; text-align:left; font:inherit; cursor:pointer; }
#tools .tool-tabs button>span:first-child { flex:0 0 20px; color:#9f9e92; font-size:10px; font-weight:800; }
#tools .tool-tabs strong { font-size:13px; line-height:1.2; }
#tools .tool-tabs__arrow { margin-left:auto; font-size:18px; opacity:0; }
#tools .tool-tabs button[aria-selected="true"] { background:#ffcb05; border-color:#ffcb05; color:#171714; }
#tools .tool-tabs button[aria-selected="true"]>span:first-child { color:#53461a; }
#tools .tool-tabs button[aria-selected="true"] .tool-tabs__arrow { opacity:1; }
#tools .tool-tabs button:focus-visible { outline:2px solid #ffcb05; outline-offset:2px; }
#tools .tool-panels { position:relative; min-width:0; min-height:0; background:#fff; color:#171714; border:1px solid #dedacf; border-radius:20px; overflow:hidden; }
#tools .tool-panel { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(270px,.9fr); grid-template-rows:minmax(0,1fr); min-width:0; min-height:0; }
#tools .tool-panel[hidden] { display:grid; visibility:hidden; pointer-events:none; }
#tools .tool-panel__visual { position:relative; display:block; min-width:0; min-height:0; max-height:none; padding:0; background:#f2eee4; overflow:hidden; border-right:1px solid #e6e1d5; }
#tools .tool-panel__copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:0; min-width:0; padding:24px; }
#tools .tool-count { color:#787567; font-size:10px; font-weight:800; letter-spacing:.1em; margin:0 0 13px; }
#tools .tool-panel__copy h3 { font-size:clamp(23px,2vw,32px); line-height:1.12; letter-spacing:-.03em; max-width:25ch; margin:0 0 15px; }
#tools .tool-panel__copy>p:not(.tool-count) { color:#55544f; font-size:14px; line-height:1.5; max-width:48ch; margin:0; }
#tools .tool-panel__copy>a { display:inline-block; font-weight:800; font-size:13px; line-height:1.4; margin-top:20px; text-decoration-color:#ffcb05; text-decoration-thickness:2px; text-underline-offset:5px; }
#tools .tool-example-label { position:absolute; bottom:15px; left:14px; right:14px; width:auto; max-width:none; margin:0; padding:0; text-align:center; font-size:10px; line-height:1.4; color:#68665b; background:none; }
.tool-stage { position:absolute; inset:50px 18px 52px; min-height:0; min-width:0; }
.tool-stage__canvas { position:absolute; top:50%; left:50%; width:var(--art-width,600px); display:grid; place-items:center; transform:translate(-50%,-50%) scale(var(--tool-scale,.4)); transform-origin:center; opacity:0; }
.tool-stage__canvas.is-fitted { opacity:1; }
[data-tool-artwork="email"] { --art-width:900px; }
[data-tool-artwork="website"] { --art-width:240px; }
[data-tool-artwork="social"] { --art-width:740px; }
[data-tool-artwork="momo"] { --art-width:720px; height:470px; overflow:hidden; border-radius:16px; }
[data-tool-artwork="whatsapp"] { --art-width:280px; }
[data-tool-artwork="brand"] { --art-width:900px; }
[data-tool-artwork="ads"] { --art-width:500px; }
[data-tool-artwork="security"] { --art-width:420px; }
[data-tool-artwork="data"] { --art-width:1100px; }
.tool-dashboard { max-width:none; }
.tool-stage__canvas .tool-inbox__image img { max-height:none; }
.tool-stage__canvas .tool-website { align-self:auto; width:240px; border-radius:26px; }
.tool-stage__canvas .tool-website>img { display:block; width:100%; height:auto; }
.tool-stage__canvas .tool-momo { bottom:25px; }
.tool-stage__canvas .tool-photo { border-radius:16px; }
#tools .tool-panel__visual--website { background:#ffcb05; }
.tool-expand { position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:6px 10px; border:1px solid #d8d3c7; border-radius:8px; background:#fff; color:#171714; font:700 11px/1.2 Arial,sans-serif; cursor:pointer; }
.tool-expand svg { width:14px; height:14px; }
.tool-expand:focus-visible { outline:2px solid #171714; outline-offset:3px; }
.tool-preview { width:min(1200px,calc(100vw - 40px)); height:calc(100dvh - 40px); max-width:none; max-height:none; margin:auto; padding:0; border:1px solid #d7d2c5; border-radius:20px; background:#f2eee4; color:#171714; }
.tool-preview::backdrop { background:#080806b8; }
.tool-preview__header { height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 20px; background:#fff; border-bottom:1px solid #dedacf; }
.tool-preview__header h2 { font-size:20px; line-height:1.2; margin:0; }
.tool-preview__close { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:#f2eee4; font-size:26px; cursor:pointer; }
.tool-preview .tool-stage { inset:82px 24px 24px; }
@media(min-width:1600px) {
 #tools .section-heading { height:112px; }
 #tools .tools-layout { grid-template-columns:260px minmax(0,1fr); gap:24px; }
 #tools .tool-tabs strong { font-size:15px; }
 #tools .tool-panel__copy { padding:32px; }
 #tools .tool-panel__copy>p:not(.tool-count) { font-size:16px; }
}
@media(min-width:1024px) and (max-height:680px) {
 #tools { padding-block:18px; }
 #tools>.refresh-wrap { height:calc(100svh - var(--tool-header-height,78px) - 36px); gap:14px; }
 #tools .section-heading h2 { font-size:27px; }
 #tools .section-heading { height:82px; }
 #tools .section-heading .section-lead { font-size:13px; }
 #tools .tool-panel__copy { padding:18px; }
 #tools .tool-panel__copy h3 { font-size:23px; }
 #tools .tool-panel__copy>p:not(.tool-count) { font-size:13px; line-height:1.4; }
}
@media(max-width:1023px) {
 #tools { padding:40px 0; }
 #tools>.refresh-wrap { height:auto; gap:22px; }
 #tools .section-heading { height:auto; grid-template-columns:1fr; gap:14px; }
 #tools .section-heading h2 { font-size:32px; max-width:24ch; }
 #tools .section-heading .section-lead { font-size:16px; }
 #tools .tools-layout { grid-template-columns:1fr; gap:14px; }
 #tools .tool-tabs { display:flex; gap:7px; overflow-x:auto; overscroll-behavior-inline:contain; padding:3px 3px 9px; margin-inline:-3px; scrollbar-width:none; }
 #tools .tool-tabs::-webkit-scrollbar { display:none; }
 #tools .tool-tabs button { flex:0 0 auto; min-height:48px; max-width:220px; padding:10px 13px; }
 #tools .tool-tabs__arrow { display:none; }
 #tools .tool-panels { height:490px; }
 #tools .tool-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 #tools .tool-panel__copy h3 { font-size:27px; }
}
@media(max-width:700px) {
 #tools .tool-panels { height:755px; }
 #tools .tool-panel { grid-template-columns:minmax(0,1fr); grid-template-rows:330px minmax(0,1fr); }
 #tools .tool-panel__visual { border-right:0; border-bottom:1px solid #e6e1d5; }
 #tools .tool-panel__copy { padding:22px; }
 #tools .tool-panel__copy h3 { font-size:26px; }
 #tools .tool-panel__copy>p:not(.tool-count) { font-size:15px; line-height:1.45; }
 .tool-stage { inset:44px 15px 42px; }
 .tool-preview { width:calc(100vw - 20px); height:calc(100dvh - 20px); border-radius:14px; }
 .tool-preview .tool-stage { inset:80px 14px 20px; }
}
@media(max-width:350px) {
 #tools .tool-panel__copy h3 { font-size:24px; }
 #tools .tool-panel__copy>p:not(.tool-count) { font-size:14px; }
}
html:not(.js) #tools>.refresh-wrap { height:auto; }
html:not(.js) #tools .tool-tabs,html:not(.js) #tools .tool-expand { display:none; }
html:not(.js) #tools .tool-panels { height:auto; display:block; }
html:not(.js) #tools .tool-panel,html:not(.js) #tools .tool-panel[hidden] { position:relative; visibility:visible; pointer-events:auto; min-height:500px; }
html:not(.js) .tool-stage__canvas { opacity:1; }