/* Membership popup in the Store Front language: white dialog, navy ink, square corners,
   Contexta headings, and the Shop's three fills for the tiers (navy Co-Pilot, pale Fan,
   green Free). Self-contained, so it works on the old-design pages too. */
@font-face{font-family:Contexta;src:url('../fonts/contexta-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

.mp{--mp-navy:#313445;--mp-navy-dark:#222430;--mp-accent:#FF0B0B;--mp-pale:#eee0df;--mp-pale-dark:#d9c9c8;--mp-green:#3D6762;--mp-green-dark:#2c4a47;--mp-ease:cubic-bezier(.4,0,.2,1);
    position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,2.5vw,40px);
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(14px,1vw,17px);line-height:1.45;color:var(--mp-navy)}
.mp[hidden]{display:none}
html.fp-signup-popup-open{overflow:hidden}
.mp-backdrop{position:absolute;inset:0;background:rgba(17,18,26,.72)}
.mp-dialog{position:relative;width:min(1240px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#fff}

.mp-head{display:flex;align-items:center;gap:26px;padding:4px 4px 0;margin-bottom:12px}
.mp-mark{flex:0 0 auto;display:flex;width:clamp(28px,2vw,36px);color:#420900}
.mp-mark svg{width:100%;height:auto}
/* the Store Front header's brand line, not a headline */
.mp-title{margin:0;font:400 clamp(14px,1.12vw,21px)/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#420900}
.mp-close{margin-left:auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--mp-navy);cursor:pointer;transition:background-color .3s var(--mp-ease),color .3s var(--mp-ease)}
.mp-close:hover,.mp-close:focus-visible{background:var(--mp-accent);color:#fff}
.mp-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.mp-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mp-tier{display:flex;flex-direction:column;padding:clamp(20px,2vw,32px);color:#fff;background:var(--mp-navy)}
.mp-tier--fan{background:var(--mp-pale);color:#220b13}
.mp-tier--free{background:var(--mp-green)}
.mp-price{margin:0 0 14px;font-size:.88em;letter-spacing:.03em;opacity:.8}
.mp-name{margin:0;font-family:Contexta,"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:clamp(28px,2.4vw,42px);line-height:1}
.mp-tagline{margin:6px 0 0}
.mp-deal{margin:16px 0 0;font-weight:700}
.mp-deal span{font-weight:400;opacity:.75;margin-left:6px}
.mp-list{margin:20px 0 24px;padding:0;list-style:none}
.mp-list li{position:relative;padding:8px 0 8px 22px;border-top:1px solid rgba(255,255,255,.22)}
.mp-tier--fan .mp-list li{border-top-color:rgba(34,11,19,.18)}
.mp-list li::before{content:'+';position:absolute;left:0;font-weight:700}
.mp-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}

.mp-cta{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .3s var(--mp-ease),color .3s var(--mp-ease),border-color .3s var(--mp-ease)}
.mp-cta--solid{background:#fff;border-color:#fff;color:var(--mp-navy)}
.mp-tier--fan .mp-cta--solid{background:var(--mp-navy);border-color:var(--mp-navy);color:#fff}
.mp-tier--free .mp-cta--solid{color:var(--mp-green)}
.mp-cta:hover,.mp-cta:focus-visible{background:var(--mp-accent);border-color:var(--mp-accent);color:#fff}
.mp-note{margin:16px 0 0;font-size:.82em;opacity:.75}

.mp-form{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.mp-label{font-size:.82em;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.mp-input{min-height:48px;padding:0 14px;border:1px solid #fff;border-radius:0;background:#fff;color:var(--mp-navy);font:inherit}
.mp-input::placeholder{color:#A48F8D}
.mp-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--mp-navy)}
.mp-submit-loading,.mp-success,.mp-error{display:none}
.mp-form.loading .mp-submit-label{display:none}
.mp-form.loading .mp-submit-loading{display:inline}
.mp-form.success .mp-success,.mp-form.error .mp-error{display:block;margin:4px 0 0}
.mp-form.success .mp-input,.mp-form.success .mp-submit,.mp-form.success .mp-label{display:none}

.mp-signin{margin:18px 0 0;text-align:center}
.mp-signin a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mp-signin a:hover{color:var(--mp-accent)}

@media(max-width:900px){
    .mp{padding:0;align-items:stretch}
    .mp-dialog{max-height:none;height:100%;padding:12px 12px 20px}
    .mp-tiers{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.mp-close,.mp-cta{transition:none}}