.device-showcase{padding:32px 28px 22px;background:#f0f2ec;border-bottom:1px solid #ded5cb}.device-toolbar{max-width:1240px;margin:0 auto 24px;display:flex;justify-content:space-between;gap:22px;align-items:center}.device-toolbar h2{margin:5px 0 9px;font-size:29px}.device-toolbar p{margin:0;font-size:13px}.device-toolbar .eyebrow{font-size:10px}.preview-device-controls{display:flex;gap:7px;flex-wrap:wrap}.preview-device-controls button[aria-pressed=true]{background:#183f34;color:#fff;border-color:#183f34}.real-phone-note{display:none}.device-shell{margin:auto;border:10px solid #202e32;background:#202e32;box-shadow:0 20px 45px #173b3b20;transition:width .15s ease;max-width:100%}.device-shell[data-device=phone]{width:440px;border-radius:43px}.device-shell[data-device=tablet]{width:840px;border-radius:25px}.device-shell[data-device=desktop]{width:1240px;border-radius:13px}.device-status{height:31px;display:flex;justify-content:space-between;align-items:center;position:relative;color:#24373a;background:#fff;padding:0 18px;font-size:10px;border-radius:31px 31px 0 0}.device-camera{height:14px;width:66px;border-radius:20px;background:#202e32;position:absolute;left:50%;transform:translateX(-50%)}[data-device=tablet] .device-camera{width:9px;height:9px}[data-device=desktop] .device-status{border-radius:4px 4px 0 0;height:22px}[data-device=desktop] .device-camera{height:6px;width:6px}.device-screen{container-type:inline-size;container-name:club-screen;background:#f8f6f2;max-height:820px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border-radius:0 0 30px 30px}.device-screen:focus-visible{outline:3px solid #b78226;outline-offset:3px}[data-device=tablet] .device-screen{max-height:900px;border-radius:0 0 14px 14px}[data-device=desktop] .device-screen{max-height:850px;border-radius:0 0 4px 4px}.device-screen header{padding:20px 24px}.device-screen main{padding:26px 24px 40px}.device-caption{text-align:center;font-size:11px;color:#675958;margin:14px 0}.device-screen #status{scroll-margin-top:20px}.device-screen h1{scroll-margin-top:15px}
@container club-screen (max-width:850px){.device-screen .grid{grid-template-columns:1fr;gap:0}.device-screen header{padding:18px 20px;gap:16px}.device-screen nav{margin:0;width:100%;justify-content:space-between}.device-screen nav button{flex:1}.device-screen h1{font-size:34px}.device-screen .card{margin:18px 0}}
@container club-screen (max-width:600px){.device-screen header{padding:18px 16px;gap:14px}.device-screen #club-brand{font-size:13px;margin-left:auto}.device-screen .logo{width:39px;height:39px}.device-screen .halo-home{font-size:18px}.device-screen .halo-home span{max-width:145px}.device-screen header nav{display:grid;grid-template-columns:1fr 1fr;gap:7px}.device-screen header nav button{font-size:12px;min-height:48px;padding:10px 6px}.device-screen main{padding:23px 16px 35px}.device-screen h1{font-size:31px}.device-screen h2{font-size:26px}.device-screen h3{font-size:23px}.device-screen .card{padding:19px}.device-screen .lead{font-size:14px}.device-screen input:not([type=checkbox]),.device-screen textarea,.device-screen select{font-size:16px}.device-screen .actions button{min-height:46px}.device-screen .sms{padding:15px}.device-screen .toolbar{flex-direction:column}}
@container club-screen (max-width:360px){.device-screen #club-brand{margin-left:0}.device-screen h1{font-size:29px}.device-screen .sms{padding:12px;border-width:6px}.device-screen .card{padding:16px}.device-screen .actions{gap:7px}.device-screen .actions button{padding:10px;font-size:12px}}
@media(max-width:600px){.device-showcase{padding:18px 0 0}.device-toolbar{padding:0 16px;margin-bottom:16px}.device-toolbar h2{font-size:25px}.device-hint,.preview-device-controls{display:none}.real-phone-note{display:block}.device-shell{width:100%!important;max-width:none;border:0;border-radius:0;box-shadow:none}.device-status{display:none}.device-screen,.device-shell[data-device=tablet] .device-screen,.device-shell[data-device=desktop] .device-screen{max-height:none;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;border-radius:0}.device-caption{padding:0 16px;font-size:10px;margin:14px 0}.device-screen header{padding:18px 16px}.device-toolbar .eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){.device-shell{transition:none}}
@media print{.device-toolbar,.device-status,.device-caption{display:none}.device-showcase{padding:0}.device-shell{width:100%!important;border:0;box-shadow:none}.device-screen{max-height:none;overflow:visible}}
.device-shell{transition:none}