/* Brand first, then a specific tier. Keep the picker stable while selecting. */
.compare-picker-intro{font-size:16px;line-height:1.8;color:#53657e;max-width:850px;margin:12px 0 22px}
.compare-picker-search{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:0 0 24px;font-size:14px;font-weight:650;color:#233b5d}
.compare-picker-search input{width:100%;min-height:48px;padding:12px 15px;border:1px solid #cbd6e6;border-radius:9px;background:#fff;font:inherit;font-size:16px;color:#142e54}
.compare-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.compare-brand{min-width:0;overflow:hidden;border:1px solid #dce4ef;border-radius:16px;background:#fff;box-shadow:0 4px 16px #162c4d05;display:flex;flex-direction:column}
.compare-brand[hidden]{display:none}
.compare-brand-preview{height:210px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 45% 20%,#fff,#edf0f5);padding:28px}
.cinema-site.immersive-site .compare-brand-preview .uniform-card-face{width:min(100%,240px);max-width:240px;transform:rotate(-3deg);filter:drop-shadow(0 2px 1px #14244022) drop-shadow(0 13px 10px #14244030)}
.compare-brand-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:22px}
.compare-brand-body>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:32px;margin-bottom:8px}
.compare-brand-body h3{font-size:23px;font-weight:750;line-height:1.3;letter-spacing:-.025em;margin:0;color:#152d50}
.compare-brand-body>header>span{flex-shrink:0;font-size:12px;font-weight:650;color:#3560bc;background:#edf3ff;border-radius:20px;padding:5px 9px}
.compare-brand-body>label{font-size:14px;font-weight:700;line-height:1.5;color:#233b5d}
.compare-brand-body>select{width:100%;min-height:48px;padding:11px 12px;font:inherit;font-size:16px;font-weight:650;color:#17375c;background:#f7f9fd;border:1px solid #c6d4e8;border-radius:8px}
.compare-tier-details{display:flex;flex-direction:column;flex:1;gap:10px;padding-top:4px}
.compare-tier-details h4{font-size:16px;font-weight:650;line-height:1.5;margin:0;min-height:3em;color:#1d375a}
.compare-tier-details h4 a:hover{color:#2854ef;text-decoration:underline}
.compare-tier-details>.status{align-self:flex-start;max-width:100%;font-size:12px;line-height:1.5;padding:4px 8px;white-space:normal}
.compare-tier-details dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:auto 0 4px;padding-top:18px}
.compare-tier-details dl>div{border-top:1px solid #e2e8f1;padding-top:12px;min-width:0}
.compare-tier-details dt{font-size:12px;line-height:1.6;font-weight:500;color:#5b6d83;margin:0 0 6px}
.compare-tier-details dd{font-size:15px;line-height:1.6;font-weight:700;color:#172f50;margin:0;overflow-wrap:anywhere}
.compare-brand-action{margin-top:12px}
.cinema-site .compare-brand-action .compare-select-btn{width:100%;min-height:46px;font-size:15px;font-weight:700;border-radius:8px;border:1px solid #9bb4ef;background:#fff;color:#2854ef}
.cinema-site .compare-brand-action .compare-select-btn[aria-pressed=true]{background:#eaf1ff;border-color:#2854ef;color:#1e4ace}
.compare-brand-action .compare-select-btn:hover{box-shadow:0 0 0 2px #2854ef15}
.compare-picker :is(input,select,button,a):focus-visible{outline:3px solid #638dff;outline-offset:3px}
#compareTray[hidden]{display:none}
#compareTray{border-top:1px solid #bdccec;box-shadow:0 -8px 32px #152e5420;padding-bottom:env(safe-area-inset-bottom);animation:compare-tray-enter .2s ease-out}
#compareTray .compare-tray-inner{max-width:1440px;padding-block:16px;gap:18px}
#compareTray .compare-tray-inner>strong{color:#19385e;font-size:15px;font-weight:750}
#compareTray .tray-card{font-size:13px;font-weight:600;line-height:1.5;padding:7px 10px}
#compareTray .tray-card button{min-width:30px;min-height:30px}
#compareTray .solid-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;font-size:16px;font-weight:700;line-height:1.5;background:#2854ff;color:#fff;border-radius:10px;box-shadow:0 4px 12px #2854ff22}
#compareTray .tray-clear{font-size:14px;font-weight:600}
@keyframes compare-tray-enter{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(max-width:1050px){.compare-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#compareTray .tray-cards{flex-wrap:nowrap;overflow-x:auto}#compareTray .tray-card{flex-shrink:0}#compareTray .compare-tray-inner{gap:12px}}
@media(max-width:700px){#compareTray .compare-tray-inner{padding:12px 16px;gap:10px}#compareTray .tray-actions{width:100%}#compareTray .solid-link{max-width:none;flex:1}body.has-compare-tray{padding-bottom:calc(170px + env(safe-area-inset-bottom))}.compare-notice{bottom:calc(180px + env(safe-area-inset-bottom))}}
@media(max-width:560px){.compare-brand-grid{grid-template-columns:1fr;gap:20px}.compare-brand-preview{height:205px}.compare-brand-body{padding:20px}.compare-brand-body h3{font-size:22px}.compare-tier-details h4{min-height:0}.compare-picker-intro{font-size:15px}.compare-picker-search{max-width:none}}
@media(prefers-reduced-motion:reduce){#compareTray{animation:none}}
body.has-compare-tray{padding-bottom:calc(var(--compare-tray-height,170px) + 16px)}
body.has-compare-tray .compare-notice{bottom:calc(var(--compare-tray-height,170px) + 12px)}
@media(max-width:760px){body.has-compare-tray .clarity-mobile-actions{bottom:var(--compare-tray-height,170px)}body.clarity-detail-active.has-compare-tray{padding-bottom:calc(var(--compare-tray-height,170px) + 100px)}}
