.compare{max-width:1280px;margin:auto;padding:24px}.compare>h1{font-size:clamp(2rem,4vw,3.5rem);margin:24px 0 12px;letter-spacing:-.035em}.compare>p{max-width:780px}.controls{display:flex;flex-wrap:wrap;gap:24px;align-items:center;background:var(--paper);padding:20px;border:1px solid var(--line);border-radius:12px}.controls label{font-weight:700}select{font:inherit;margin-left:8px;padding:10px;max-width:100%;background:white;color:var(--ink);border:1px solid var(--ink);border-radius:6px}fieldset{display:flex;gap:16px;border:0;margin:0;padding:0}legend{font-size:14px;margin-bottom:4px}.placements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0}.placements h2{font-family:Arial,sans-serif;font-size:16px;letter-spacing:0}.sample{height:160px;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.sample img{max-height:120px;max-width:100%;object-fit:contain}.header-sample,.compact-sample{background:var(--bone)}.compact-sample img{max-width:110px;max-height:110px}.section-sample{background:var(--mist)}.footer-sample{background:var(--ink);color:var(--bone)}.footer-sample .logo-plate{padding:8px;background:var(--bone);border-radius:6px}.sample .current-mark{width:36px;height:36px}.sample span{font-size:14px;font-weight:bold}.frame-shell{background:#dedbd2;padding:12px;border-radius:12px;overflow:auto}iframe{display:block;width:100%;height:760px;border:0;background:var(--bone);margin:auto}.frame-shell.mobile iframe{width:375px;max-width:100%}@media(max-width:760px){.placements{grid-template-columns:repeat(2,minmax(0,1fr))}.compare{padding:16px}.controls{display:block}fieldset{margin-top:16px}select{margin:8px 0;display:block;width:100%}.sample{height:140px;padding:10px}iframe{height:680px}}
.controls{gap:20px}.controls fieldset{flex-wrap:wrap}.controls legend{font-weight:700}.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.directions button{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:700 16px Arial;cursor:pointer;min-height:92px}.directions button[aria-pressed=true]{border:2px solid var(--cobalt);background:var(--mist)}.directions img{width:76px;height:68px;object-fit:contain}.directions button:first-child img{width:110px}.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:22px 0 12px}.preview-heading h2{font:700 22px Arial;margin:0;letter-spacing:0}.preview-heading a{font-size:16px}.placement-heading{font:700 22px Arial;margin-top:32px;letter-spacing:0}body[data-family=floral] .header-sample,body[data-family=floral] .compact-sample{background:#fbf6ec}body[data-family=floral] .section-sample,body[data-family=floral] .footer-sample{background:#e8eee3}body[data-family=badge] .header-sample,body[data-family=badge] .footer-sample{background:#062333}body[data-family=badge] .section-sample{background:#fff7df}body[data-family=badge] .logo-plate{background:transparent}.frame-shell{padding:8px}iframe{height:800px}@media(max-width:640px){.directions{gap:8px}.directions button{flex-direction:column;padding:10px 6px;font-size:14px}.directions img,.directions button:first-child img{width:80px;height:62px}.preview-heading{align-items:flex-start;flex-direction:column}.controls fieldset{gap:12px}iframe{height:740px}}