/* Demonstration uses the existing cloud calculator palette and type scale. */
.trial-demo{margin:28px 0;background:#101712;border:1px solid var(--line);padding:28px;min-width:0}
.trial-demo-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:15px}
.trial-demo-tag,.trial-demo-kicker{color:#a3c4a6;font-size:10px;font-weight:750;letter-spacing:.13em}
.trial-demo h3{margin:10px 0 0;font-size:clamp(21px,2.3vw,28px);letter-spacing:-.03em;font-weight:600}
.trial-demo h3:focus{outline:2px solid var(--green);outline-offset:5px}
.trial-demo h4{margin:15px 0 0;font-size:19px;line-height:1.35;font-weight:600}
.trial-demo-status{padding:7px 10px;border:1px solid #405446;color:#c3ddc5;font-size:11px}
.page-section .trial-demo-note{margin:16px 0 0;color:#c2d1c4;font-size:13px;line-height:1.6;max-width:780px}
.trial-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px}
.trial-demo-controls,.trial-demo-result{min-width:0;border:1px solid #34483a;padding:22px}
.trial-demo-result{background:#152019}
.trial-demo-label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#d3e2d5;font-size:13px;font-weight:650}
.trial-demo-label output{color:#b2f2b1;font-size:14px;white-space:nowrap}
.trial-demo-range-ends{display:flex;justify-content:space-between;color:#9cac9f;font-size:11px;margin-top:5px}
.trial-demo-select{display:grid;gap:8px;margin-top:22px;color:#d3e2d5;font-size:13px;font-weight:650}
.trial-demo-select select{width:100%;min-width:0;padding:12px;border:1px solid #405446;background:#0b120d;color:#f1f7f0;font:inherit}
.trial-demo-select select:focus-visible,.trial-demo-link:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.page-section .trial-demo-hint,.trial-demo-result p{margin:14px 0;color:#a6b5a8;font-size:12px;line-height:1.6}
.trial-demo-controls>.button{margin-top:10px}
.trial-demo-summary{display:grid;gap:7px;margin-bottom:25px}
.trial-demo-summary span,.trial-demo-total span,.trial-demo-metrics span{color:#aebeb0;font-size:12px}
.trial-demo-summary strong{color:#edf4ee;font-size:16px}
.trial-demo-progress{display:block;width:100%;height:7px;margin:18px 0 0;accent-color:#8be897}
.trial-demo-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:16px}
.trial-demo-buttons .button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.trial-demo-link{border:0;background:none;color:#b2eab8;padding:8px 0;font:inherit;font-size:12px;cursor:pointer;text-align:left}
.trial-demo-link:hover{text-decoration:underline}
.trial-demo-total{display:grid;gap:8px;margin:18px 0;padding-bottom:19px;border-bottom:1px solid var(--line)}
.trial-demo-total strong{font-size:clamp(22px,2.4vw,30px);color:#b2f2b1;overflow-wrap:anywhere}
.trial-demo-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trial-demo-metrics div{display:grid;gap:7px;min-width:0}
.trial-demo-metrics strong{font-size:13px;overflow-wrap:anywhere}
.trial-demo-history{margin:18px 0;border-top:1px solid var(--line);padding-top:16px;font-size:13px}
.trial-demo-history summary{cursor:pointer;color:#d8e9da}
.trial-demo-table-wrap{overflow-x:auto;margin-top:12px}
.trial-demo-history table{width:100%;min-width:500px;border-collapse:collapse;text-align:left;font-size:11px}
.trial-demo-history th,.trial-demo-history td{padding:10px 12px 10px 0;border-top:1px solid var(--line);white-space:nowrap}
.trial-demo-links{display:flex;gap:12px 20px;flex-wrap:wrap}
.trial-demo-links .page-action{font-size:12px}
@media(max-width:760px){.trial-demo{padding:20px}.trial-demo-grid{grid-template-columns:1fr}.trial-demo-controls,.trial-demo-result{padding:18px}}
@media(max-width:400px){.trial-demo{padding:16px}.trial-demo-controls,.trial-demo-result{padding:15px}.trial-demo-metrics{grid-template-columns:1fr}}