.demo-intro{padding:82px 0 64px}
.demo-intro h1{max-width:940px;margin:22px 0 24px;font-size:clamp(3.1rem,6.4vw,6.2rem);letter-spacing:-.045em;word-spacing:.04em}
.demo-intro p{max-width:780px;color:#c7c9e1;font-size:1.18rem;line-height:1.7;margin:0}
.demo-example{padding-bottom:98px}
.demo-example-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:23px}
.demo-example h2{font-size:clamp(1.8rem,3.1vw,3rem);letter-spacing:-.055em;margin:9px 0 0}
.demo-badge{color:#9bdce9;border:1px solid #586e91;border-radius:999px;padding:8px 12px;font-size:.78rem;font-weight:700}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.demo-mail,.demo-result{min-width:0;min-height:435px;border:1px solid #7068a3;border-radius:10px;background:#1a1c3b;box-shadow:0 18px 55px #03051455}
.demo-mail{padding:30px;background:linear-gradient(150deg,#27224b,#181b38 68%)}
.demo-mail-top{display:flex;align-items:center;gap:15px;border-bottom:1px solid #71699a75;padding-bottom:22px;margin-bottom:26px}
.demo-mail-icon{display:grid;place-items:center;flex:none;width:47px;height:47px;border-radius:10px;background:#6755af;color:#e8ddff;font-size:1.45rem}
.demo-mail-label{display:block;color:#8fe1ec;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.demo-mail h3{font-size:1.4rem;letter-spacing:-.035em;margin:5px 0 0}
.demo-mail p{color:#e1e1f2;line-height:1.7;margin:0 0 18px}
.demo-mail-foot{border-top:1px solid #71699a75;color:#aeb7d9;padding-top:20px;margin-top:30px;font-size:.84rem}
.demo-result{display:flex;flex-direction:column;padding:29px;background:radial-gradient(circle at 75% 8%,#3d357b 0,transparent 45%),#171a38}
.demo-result-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:375px;padding:24px}
.demo-result-placeholder>span{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#544596;color:#aff0f7;font-size:2rem;margin-bottom:24px}
.demo-result-placeholder h3{font-size:1.55rem;letter-spacing:-.04em;margin-bottom:11px}
.demo-result-placeholder p{max-width:290px;color:#bec5df;line-height:1.6;margin:0}
.demo-result-content:focus{outline:none}
.demo-result-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #71699a75;padding-bottom:16px;margin-bottom:20px}
.demo-result-heading span{color:#82e8f0;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.demo-result-heading strong{color:#d4c2ff;font-size:.76rem;font-weight:700;text-align:right}
.demo-result-block{margin:0 0 17px}
.demo-result-block h3{font-size:1rem;margin:0 0 9px;color:#f0edff}
.demo-result-block p{color:#cdd0e6;line-height:1.55;margin:0}
.demo-result-block ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-result-block li{border:1px solid #625c89;background:#252547;border-radius:5px;padding:10px}
.demo-result-block li span,.demo-result-block li strong{display:block;line-height:1.35}.demo-result-block li span{font-size:.75rem;color:#adb6d8;margin-bottom:4px}.demo-result-block li strong{font-size:.87rem}
.demo-actions{display:flex;align-items:center;gap:22px;margin-top:28px}
.demo-actions .button{cursor:pointer}
.demo-hide{background:none;border:0;border-bottom:1px solid #8e83b7;color:#dccbff;cursor:pointer;padding:7px 0;font-weight:700}.demo-hide:hover{color:#82e8f0;border-color:#82e8f0}
.demo-disclaimer{max-width:820px;color:#aeb6d5;font-size:.87rem;line-height:1.6;margin:20px 0 0}
.demo-explainer{padding:82px 0;border-block:1px solid #6c669155;background:#10142d}
.demo-explainer-inner{display:grid;grid-template-columns:.8fr 1fr;gap:70px;align-items:start}
.demo-explainer h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.08;letter-spacing:-.06em;margin:13px 0 0}
.demo-explainer p{color:#c8cce4;line-height:1.75;font-size:1.05rem;margin:0}
.demo-contact{padding:84px 0 95px;background:linear-gradient(125deg,#4e3996,#29215f)}
.demo-contact-inner{display:flex;align-items:end;justify-content:space-between;gap:45px}
.demo-contact h2{font-size:clamp(2.3rem,4.4vw,4.3rem);line-height:1.05;letter-spacing:-.06em;margin:15px 0 20px}
.demo-contact p{max-width:660px;color:#e0dcf4;line-height:1.65;margin:0}
.demo-contact .button{flex:none;background:#82e5ef;border-color:#82e5ef}
@media(max-width:800px){.demo-intro{padding:67px 0 55px}.demo-grid{grid-template-columns:1fr}.demo-mail,.demo-result{min-height:0}.demo-result-placeholder{min-height:240px}.demo-explainer-inner{grid-template-columns:1fr;gap:25px}.demo-contact-inner{flex-direction:column;align-items:start}}
@media(max-width:520px){.demo-intro h1{font-size:clamp(2.9rem,10vw,4rem)}.demo-intro p{font-size:1rem}.demo-example-head{align-items:start;flex-direction:column;gap:15px}.demo-mail,.demo-result{padding:22px}.demo-result-block ul{grid-template-columns:1fr}.demo-actions{align-items:start;flex-direction:column}.demo-explainer,.demo-contact{padding:70px 0 78px}}
.demo-page [hidden]{display:none!important}
.demo-presets{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.demo-preset{padding:12px 17px;background:#1d2040;border:1px solid #6e659a;border-radius:5px;color:#d8d9ee;font-weight:720;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.demo-preset:hover{transform:translateY(-2px);border-color:#b49af4}
.demo-preset[aria-pressed="true"]{background:#4f3d94;border-color:#bba7f6;color:#fff;box-shadow:inset 0 0 0 1px #bba7f633}
@media(max-width:520px){.demo-presets{display:grid;grid-template-columns:1fr;gap:8px}.demo-preset{text-align:left;padding:13px 15px}}
@media(prefers-reduced-motion:reduce){.demo-preset{transition:none}}
/* Keep the main action beside the example on desktop and directly below it on mobile. */
.demo-mail{grid-column:1;grid-row:1}
.demo-actions{grid-column:1;grid-row:2;margin-top:0;align-self:start}
.demo-result{grid-column:2;grid-row:1/span 2}
@media(max-width:800px){.demo-mail{grid-column:1;grid-row:1}.demo-actions{grid-column:1;grid-row:2}.demo-result{grid-column:1;grid-row:3}}
@media(max-width:800px){.demo-result.is-idle{display:none}}