:root{
  --lagoon:#0b3a3c; --lagoon-2:#12504f; --foam:#e9f1ed; --paper:#fbfdfb; --ink:#10272a; --muted:#52696a;
  --mango:#f0a31b; --rule:#c7d8d1;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--foam);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
.mast{background:var(--lagoon);color:#fff;padding:22px 20px 20px;text-align:center;border-bottom:4px solid var(--mango)}
.mast-name{margin:0;font-family:var(--serif);font-size:1.35rem;line-height:1.2}
.mast-club{margin:4px 0 0;font-size:.9rem;color:#bcd8d0;letter-spacing:.02em}
.wrap{width:100%;max-width:520px;margin:0 auto;padding:22px 16px 28px;flex:1}
.wrap.narrow{padding-top:44px}
.hello{margin:0 0 14px;color:var(--muted)}
.title{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.15;margin:0 0 14px}
.lede{color:var(--muted);margin:0;max-width:44ch}

/* the tab: a printed check with a torn lower edge */
.tab{position:relative;background:var(--paper);padding:22px 22px 30px;border:1px solid var(--rule);border-bottom:0;
  --t:10px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--t) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--t) 100%;
  margin-bottom:28px}
.tab-label{margin:0;font-weight:600;color:var(--lagoon-2)}
.tab-amount{margin:2px 0 0;font-family:var(--serif);font-size:3.4rem;line-height:1.1;color:var(--lagoon);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.tab-sub{margin:0 0 18px;color:var(--muted)}
.tab-life{margin:0;display:flex;gap:28px;border-top:2px dotted var(--rule);padding-top:14px}
.tab-life dt{font-size:.85rem;color:var(--muted)}
.tab-life dd{margin:0;font-weight:600;font-size:1.15rem;font-variant-numeric:tabular-nums}

.sect{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:0 0 8px}
.months,.tx{list-style:none;margin:0;padding:0}
.months>li{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:14px 0 10px;display:block}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid var(--mango);outline-offset:2px}
.m-row,.tx li{display:flex;align-items:baseline;gap:8px}
.m-name{font-weight:500}
.m-dots{flex:1;border-bottom:2px dotted #9db5ac;transform:translateY(-4px);min-width:16px}
.m-sum{font-weight:600;font-variant-numeric:tabular-nums}
.m-bar{display:block;height:6px;background:#d6e5de;border-radius:3px;margin-top:8px;overflow:hidden}
.m-bar i{display:block;height:100%;background:var(--mango);border-radius:3px}
.tx{padding:2px 0 14px 14px;color:var(--muted)}
.tx li{padding:4px 0;font-variant-numeric:tabular-nums}
.tx small{color:#7c908f}
.empty{color:var(--muted);margin:4px 0 14px}.empty.small{padding:0 0 12px 14px}
.stamp{margin:26px 0 4px;font-weight:600;color:var(--lagoon-2)}
.note{margin:0;font-size:.85rem;color:var(--muted);max-width:46ch}
.foot{text-align:center;padding:16px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--rule)}
.foot p{margin:0}
@media (prefers-reduced-motion:no-preference){.tab{animation:rise .5s ease-out both}@keyframes rise{from{opacity:0;transform:translateY(8px)}}}
.nw{white-space:nowrap}

/* membership levels */
.chip{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:600;white-space:nowrap}
.chip.t-basic{background:#d9ebe5;color:#0b3a3c}
.chip.t-silver{background:#e3e8ec;color:#2f4452}
.chip.t-gold{background:#fbe3a8;color:#5b3a00}
.chip.t-platinum{background:#0b3a3c;color:#fff}
.tab{border-top-width:6px}
.tab.t-basic{border-top-color:#7fb3a6}
.tab.t-silver{border-top-color:#9fb0bd}
.tab.t-gold{border-top-color:#f0a31b}
.tab.t-platinum{border-top-color:#0b3a3c}
.freemeal{margin:0 0 16px;padding:10px 12px;background:#fff6e0;border-left:4px solid var(--mango);border-radius:4px;font-weight:500}
.ladder{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:8px}
.ladder li{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:#f5faf7;color:var(--muted)}
.ladder li.on{background:#fff;border:2px solid var(--lagoon);padding:11px 13px;color:var(--ink)}
.l-name{font-weight:600}
.l-perk{font-weight:600;text-align:right}
.l-req{font-size:.85rem}
.l-here{font-size:.8rem;font-weight:600;color:var(--lagoon-2);text-align:right}
.m-name small{font-weight:400;color:var(--muted)}

/* Gourmet Club: free-wine meter */
.wine{background:#fff;border:1px solid #d9e5df;border-radius:14px;padding:18px 18px 16px;margin:0 0 6px}
.wine-month{margin:0 0 10px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#5a6f70}
.meter{height:16px;border-radius:99px;background:#e6efeb;overflow:hidden;box-shadow:inset 0 1px 2px rgba(11,58,60,.12)}
.meter span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8e1b3a,#b3294d);transition:width .9s ease}
.wine.got .meter span{background:linear-gradient(90deg,#f0a31b,#f7c453)}
.meter-ends{display:flex;justify-content:space-between;gap:12px;margin:7px 0 0;font-size:.78rem;color:#5a6f70}
.wine-msg{margin:14px 0 0;font-weight:600;color:#0b3a3c}
.wine.got .wine-msg{color:#8a5a00}
.wine-fine{margin:8px 0 0;font-size:.8rem;color:#5a6f70}
/* install hint */
.install{margin:22px 0 4px;padding:16px 18px;background:#fff;border:1px solid #d9e5df;border-radius:14px}
.install .sect{margin-bottom:4px}.install p{margin:4px 0 0;color:#52696a}
.install button{margin-top:12px;font:inherit;font-weight:600;padding:10px 16px;border:0;border-radius:8px;background:#0b3a3c;color:#fff;cursor:pointer}
.install-how{font-size:.9rem}