/* The demo request remains an email draft until the visitor sends it. */
.demo-page { background: #f7f8fc; }
.demo-main { padding: 117px 0 76px; background: radial-gradient(ellipse at 3% 25%, #efedff 0, transparent 44%), #f7f8fc; }
.demo-main .breadcrumbs { margin-bottom: 34px; color: #68738b; }
.demo-main .breadcrumbs [aria-current] { color: #52617b; }
.demo-main .breadcrumbs a:hover { color: var(--ps-blue); }
.demo-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 78px; }
.demo-intro { padding-top: 12px; }
.demo-intro h1 { margin: 20px 0 24px; font-size: clamp(38px, 4.2vw, 56px); font-weight: 750; letter-spacing: -2.8px; line-height: 1.12; text-wrap: balance; }
.demo-intro h1 em { color: var(--ps-blue); font-style: normal; }
.demo-intro > p { margin: 0; font-size: 16px; line-height: 1.85; color: #606c82; }
.demo-jump { display: none; margin-top: 23px; }
.demo-steps { list-style: none; padding: 0; margin: 34px 0; }
.demo-steps li { display: flex; align-items: start; gap: 16px; padding: 19px 0; border-top: 1px solid #dfe3ee; }
.demo-steps li > span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: #e9eafd; color: #4756bd; font-size: 11px; font-weight: 700; }
.demo-steps h2 { margin: 2px 0 6px; font-size: 15px; font-weight: 650; line-height: 1.5; }
.demo-steps p { margin: 0; color: #657086; font-size: 13px; line-height: 1.8; }
.demo-direct { padding: 24px; background: #fff; border: 1px solid var(--ps-line); border-radius: 12px; }
.demo-direct h2 { margin: 0 0 9px; font-size: 15px; font-weight: 650; line-height: 1.5; }
.demo-direct > a { display: inline-block; margin: 2px 0 7px; color: var(--ps-blue); font-size: 16px; font-weight: 650; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }
.demo-direct p { margin: 8px 0 0; font-size: 12px; color: #647086; line-height: 1.8; }
.demo-reading { display: flex; flex-wrap: wrap; gap: 9px 23px; margin-top: 25px; font-size: 12px; color: #4b59a1; }
.demo-reading a { padding-block: 5px; text-decoration: underline; text-underline-offset: 4px; }
.demo-card { background: #fff; padding: 32px; border: 1px solid #e0e4ef; border-radius: 16px; box-shadow: 0 18px 44px #252f5708; min-width: 0; }
.demo-card h2 { font-size: 21px; letter-spacing: -.5px; line-height: 1.4; margin: 0 0 10px; }
.demo-card h2 { scroll-margin-top: 100px; }
.demo-card > p { color: #647086; font-size: 13px; line-height: 1.8; margin: 0 0 26px; }
.demo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.demo-field { min-width: 0; }
.demo-field-wide { grid-column: 1 / -1; }
.demo-field label, .demo-message-label { display: block; color: #38455e; margin: 0 0 8px; font-size: 12px; line-height: 1.5; font-weight: 650; }
.demo-field label span { color: #747c8d; font-size: 11px; font-weight: 400; }
.demo-field input, .demo-field select, .demo-field textarea, .demo-message { width: 100%; max-width: 100%; min-width: 0; min-height: 46px; border: 1px solid #dbe0eb; border-radius: 7px; background: #fcfcfe; padding: 11px 12px; color: #283650; font: inherit; font-size: 14px; line-height: 1.6; }
.demo-field input::placeholder, .demo-field textarea::placeholder { color: #7b8495; opacity: 1; }
.demo-field textarea { resize: vertical; min-height: 98px; }
.demo-field select { padding-right: 7px; }
.demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus { background: #fff; border-color: var(--ps-blue); }
.demo-field-help { margin: 7px 0 0; color: #68738a; font-size: 11px; line-height: 1.7; }
.demo-submit { width: 100%; margin-top: 23px; cursor: pointer; }
.demo-privacy { margin: 13px 0 0; color: #6b7589; font-size: 11px; line-height: 1.85; }
.demo-preview { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--ps-line); }
.demo-preview h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.5; letter-spacing: -.3px; }
.demo-preview > p { margin: 0 0 18px; font-size: 12px; line-height: 1.8; color: #647086; }
.demo-recipient { display: grid; gap: 6px; margin: 0 0 20px; font-size: 12px; line-height: 1.7; color: #5c6780; }
.demo-recipient div { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-recipient dt { font-weight: 650; color: #38455e; }
.demo-recipient dd { margin: 0; overflow-wrap: anywhere; }
.demo-message { display: block; height: 240px; resize: vertical; font-size: 13px; background: #f8f9fd; }
.demo-preview-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 17px; }
.demo-preview-actions .ps-button { min-height: 46px; font-size: 12px; padding-inline: 14px; gap: 10px; cursor: pointer; }
.demo-copy { border-color: #dbe0eb; background: #fff; color: #465473; }
.demo-status { color: #43587d; font-size: 12px; line-height: 1.85; margin: 16px 0 0; }
.demo-status:empty { margin: 0; }
.demo-noscript { margin: 0; color: #606c82; font-size: 14px; line-height: 1.85; }
.demo-noscript a { color: var(--ps-blue); text-decoration: underline; text-underline-offset: 4px; }
.demo-card [hidden] { display: none !important; }
@media (max-width: 1100px) { .demo-layout { gap: 36px; } .demo-card { padding: 25px; } }
@media (max-width: 850px) { .demo-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .demo-intro { padding-top: 0; } .demo-intro h1 { max-width: 590px; } .demo-intro > p { max-width: 640px; } .demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 20px; } .demo-steps li { display: block; } .demo-steps li > span { margin-bottom: 13px; } .demo-direct { max-width: 640px; } .demo-card { padding: 32px; } }
@media (max-width: 640px) { .demo-main { padding-top: 96px; padding-bottom: 48px; } .demo-main .breadcrumbs { margin-bottom: 26px; } .demo-intro h1 { font-size: 39px; letter-spacing: -1.9px; margin-top: 17px; } .demo-intro > p { font-size: 15px; } .demo-steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 26px; } .demo-steps li { display: flex; padding: 17px 0; } .demo-steps li > span { margin: 0; } .demo-card { padding: 23px 20px; border-radius: 12px; } .demo-fields { gap: 17px; } .demo-field { grid-column: 1 / -1; } .demo-field input, .demo-field select, .demo-field textarea { font-size: 16px; } .demo-preview-actions { flex-direction: column; } .demo-preview-actions .ps-button { width: 100%; } .demo-direct { padding: 21px; } }
@media (prefers-reduced-motion: reduce) { .demo-page .ps-button:hover { transform: none; } }
@media (max-width: 850px) { .demo-jump { display: inline-flex; } }