*{box-sizing:border-box}body{margin:0;background:#f6f3ec;color:#242c30;font:16px/1.6 system-ui,sans-serif}header{display:flex;justify-content:space-between;gap:1rem;padding:1.3rem max(5vw,1.25rem);border-bottom:1px solid #c5c7bd}a{color:inherit}main{max-width:1360px;margin:auto;padding:4rem max(5vw,1.25rem)}h1{font:400 clamp(2.8rem,6vw,5.5rem)/1.03 Georgia,serif;letter-spacing:-.045em;margin:1.5rem 0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem}.intro{max-width:44rem;color:#505b60;font-size:1.1rem}.controls{display:flex;gap:1rem 2rem;flex-wrap:wrap;align-items:center;border-block:1px solid #c5c7bd;padding:1.2rem 0;margin:2.5rem 0}select{font:inherit;padding:.5rem;border:1px solid #a4ada8;background:#fff;margin-left:.5rem;max-width:100%}.controls p{margin:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 1.6rem}.preview{display:block;height:300px;background:#e3e5dc;border:1px solid #c5c7bd;overflow:hidden}.preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.phone .preview img{object-fit:contain;object-position:top;background:#e3e5dc}.phone .preview{height:430px}h2{font:400 1.8rem/1.2 Georgia,serif;margin:1rem 0 .5rem}article>p{font-size:.9rem;color:#505b60;margin:0}.note{border-top:1px solid #c5c7bd;margin-top:4rem;padding-top:1.5rem;max-width:55rem;color:#505b60}a:focus-visible,select:focus-visible{outline:3px solid #286158;outline-offset:4px}[hidden]{display:none!important}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.grid{grid-template-columns:1fr}.controls label{display:block;width:100%}.preview{height:320px}}