:root{color-scheme:light;font-family:system-ui,-apple-system,sans-serif;color:#e9e4d3;background:#252c26}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 38%,#455141,#252c26 70%)}
.preview-heading{max-width:800px;margin:0 auto;padding:25px 24px 20px;display:flex;gap:20px;align-items:center;justify-content:space-between}
.preview-heading p{font-size:12px;line-height:1.6;color:#c3c7b4;margin:7px 0 0}
.preview-heading .eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#c5b37f;margin:0}
h1{font-family:Georgia,serif;font-size:28px;font-weight:normal;margin:5px 0}
a{color:#e5d6aa;font-size:12px;text-decoration:none;border:1px solid #8b917762;padding:10px 13px;white-space:nowrap}
a:hover{background:#ffffff0c;border-color:#c5b37f}
a:focus-visible{outline:2px solid #d9c58b;outline-offset:4px}
main{display:grid;justify-items:center;padding:0 14px 24px}
.phone-frame{background:#161c18;padding:0 9px;border-radius:30px;border:2px solid #78816a;box-shadow:0 15px 65px #0007;max-width:100%}
.phone-speaker{height:24px;position:relative}
.phone-speaker:after{content:"";position:absolute;width:44px;height:4px;left:50%;top:10px;transform:translateX(-50%);background:#56604e;border-radius:3px}
iframe{display:block;width:390px;max-width:calc(100vw - 50px);height:844px;border:0;background:#eee9d9;border-radius:4px}
.phone-bottom{height:20px;display:grid;place-items:center}
.phone-bottom span{display:block;width:96px;height:3px;background:#6e785f;border-radius:4px}
.preview-note{max-width:390px;text-align:center;font-size:11px;line-height:1.7;color:#bac1aa;margin:17px 0 0}
@media(max-width:500px){.preview-heading{padding:20px 16px;gap:12px}.preview-heading h1{font-size:22px}.preview-heading p{font-size:10px}.preview-heading a{font-size:10px;padding:9px}.preview-heading .eyebrow{font-size:8px}}