@font-face{font-family:"Instrument Sans";src:url("/fonts/InstrumentSans-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/fonts/InstrumentSerif-Italic.ttf") format("truetype");font-style:italic;font-display:swap}

:root{
  --ink:#111512;--panel:#18201a;--panel2:#222c24;--line:#344233;
  --line2:#52614d;--mint:#32faab;--paper:#f5f0e3;--sage:#bfd8c0;
  --sage2:#9fbca5;--gold:#faa832;--red:#ff3850
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);font-family:"Instrument Sans",Arial,sans-serif}
body{margin:0;min-height:100vh}
button,input{font:inherit}

.mast{height:96px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,76px)}
.mast img{width:190px;display:block}
.login{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:9px 18px;font-weight:650}
.login:hover,.login:focus-visible{color:var(--ink);border-color:var(--mint);background:var(--mint);outline:none}

main{padding:clamp(58px,7.5vw,108px) clamp(24px,7vw,120px)}
.membership,.success{max-width:1080px;margin:auto}
.eyebrow{margin:0;font-size:14px;letter-spacing:.18em;color:var(--mint);font-weight:750;text-transform:uppercase}
.membership h1,.success h1{font-size:clamp(54px,7vw,94px);line-height:.96;letter-spacing:-.052em;max-width:920px;margin:28px 0 34px}
.lede{font-size:clamp(20px,2.05vw,29px);line-height:1.42;max-width:900px;color:var(--sage)}
.foundingline{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(23px,2.25vw,34px);line-height:1.25;margin:38px 0;color:var(--paper)}

.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:46px 0 30px}
.price{position:relative;text-align:left;background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:20px;padding:27px 30px;min-height:184px;cursor:pointer}
.price:hover,.price:focus-visible{border-color:var(--line2);background:var(--panel);outline:none}
.price.selected{border-color:var(--mint);background:var(--panel)}
.price.selected:after{content:'✓';position:absolute;right:26px;top:22px;color:var(--mint);font-size:24px;font-weight:800}
.period,.amount,.regular{display:block}
.period{color:var(--sage);font-size:17px;margin-bottom:21px}
.amount{font-size:23px}
.amount b{font-size:clamp(42px,4.6vw,64px);letter-spacing:-.05em}
.regular{margin-top:14px;color:var(--sage)}
.recommend{position:absolute;right:28px;bottom:25px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.14em}

.cta{display:inline-flex;min-height:56px;align-items:center;justify-content:center;background:var(--mint);color:var(--ink);border:1px solid var(--mint);border-radius:999px;padding:15px 28px;font-weight:800;font-size:15px;letter-spacing:.04em;cursor:pointer;text-decoration:none}
.cta:hover,.cta:focus-visible{background:var(--paper);border-color:var(--paper);outline:none}
.cta:disabled{opacity:.5;cursor:wait}
.support,.message{color:var(--sage);max-width:760px;line-height:1.5}
.support{margin-top:20px}
.renewal{max-width:700px;margin:12px 0 0;color:var(--paper);font-weight:700}
.message{border-left:3px solid var(--gold);padding-left:16px}
.cancel-status{max-width:700px;margin-top:32px;padding:22px 24px;border:1px solid var(--gold);border-radius:16px;color:var(--paper)}
.cancel-status strong{display:block;color:var(--gold);font-size:14px;letter-spacing:.15em}
.cancel-status p{margin:10px 0 0;color:var(--sage);line-height:1.5}
.pulse{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--mint);border-radius:50%;animation:spin 1s linear infinite;margin:40px 0}
.success .link{margin-top:28px}
@keyframes spin{to{transform:rotate(360deg)}}

dialog{width:min(560px,calc(100% - 32px));background:var(--panel);color:var(--paper);border:1px solid var(--line2);border-radius:20px;padding:40px}
dialog::backdrop{background:#050806dd}
.close{position:absolute;right:16px;top:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--sage);background:transparent;border:1px solid var(--line2);font-size:25px;line-height:1;cursor:pointer}
.close:hover,.close:focus-visible{color:var(--ink);background:var(--mint);border-color:var(--mint);outline:none}
dialog h2{font-size:clamp(34px,5vw,46px);line-height:1.02;letter-spacing:-.04em;margin:20px 0}
dialog p{color:var(--sage);line-height:1.5}
label{display:block;margin:28px 0 8px;color:var(--sage);font-weight:650}
input{width:100%;background:var(--ink);border:1px solid var(--line2);border-radius:999px;color:var(--paper);padding:16px 20px;margin-bottom:14px}
input:focus{outline:2px solid var(--mint);outline-offset:2px}

@media(max-width:680px){
  .mast{height:76px;padding-inline:20px}.mast img{width:148px}
  .login{min-height:40px;padding:8px 14px;font-size:14px}
  main{padding:52px 20px 72px}.prices{grid-template-columns:1fr;margin-top:36px}
  .membership h1,.success h1{font-size:clamp(48px,15vw,66px)}
  .price{min-height:172px;padding:24px}
  .recommend{position:static;display:block;margin:0 42px 12px 0}
  .cta{width:100%}dialog{padding:34px 22px 26px}
}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}}

/* This is the plan-selection step: keep the offer and action in the first view. */
.mast{height:76px}.mast img{width:164px}
main{padding:24px clamp(20px,5vw,72px) 28px}
.membership{max-width:880px}
.membership h1{font-size:clamp(32px,3.4vw,46px);line-height:1.06;max-width:760px;margin:16px 0;text-wrap:balance}
.membership .lede{font-size:16px;line-height:1.5;max-width:760px;margin:0 0 16px}
.foundingline{font:500 15px/1.5 "Instrument Sans",Arial,sans-serif;margin:16px 0}
.prices{margin:18px 0;gap:14px;max-width:760px}
.price{padding:20px;min-height:170px;border-radius:16px}
.period{font-size:14px;margin:12px 0 10px}
.amount{font-size:16px}.amount b{font-size:36px}
.regular{font-size:13px;margin-top:8px}
.recommend{top:12px;bottom:auto;right:20px;font-size:9px;letter-spacing:.06em}
.price.selected:after{top:36px;right:20px;font-size:18px}
.membership .cta{min-height:48px;padding:12px 28px}
.support{font-size:12px;margin:14px 0 0}
@media(max-width:680px){
 .mast{height:68px}.mast img{width:140px}
 main{padding:20px 18px 24px}
 .membership h1{font-size:32px;margin:14px 0;max-width:22ch}
 .membership .lede{font-size:14px;line-height:1.45}
 .foundingline{font-size:13px;margin:14px 0}
 .prices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
 .price{min-height:164px;padding:12px}
 .period{font-size:12px;margin:16px 0 10px}
 .amount{font-size:12px}.amount b{font-size:30px}
 .regular{font-size:11px;line-height:1.4}
 .recommend{position:absolute;top:10px;right:12px;margin:0;font-size:8px;letter-spacing:0}
 .price.selected:after{top:30px;right:12px;font-size:14px}
 .support{font-size:11px;line-height:1.5}
}

.price{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}

/* Shared public-site eyebrow weight. */
.eyebrow{font-weight:600}

#annualperweek{color:#32faab;font-weight:600}