@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext-v20.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-v20.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --party-canvas: #f2f4f1;
  --party-surface: #ffffff;
  --party-sunk: #f7f9f6;
  --party-line: #dde2dd;
  --party-line-strong: #c3ccc4;
  --party-text: #18201c;
  --party-muted: #65716a;
  --party-faint: #8a958e;
  --party-accent: #b4e600;
  --party-accent-ink: #5f7d00;
  --party-accent-soft: rgba(180, 230, 0, .18);
  --party-ink: #0d0f0e;
  --party-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:has(.party-shell) { color-scheme: light; background: var(--party-canvas); }
body:has(.party-shell) { min-height: 100vh; margin: 0; color: var(--party-text); background: var(--party-canvas); font-family: var(--party-sans); font-optical-sizing: auto; }
.party-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--party-canvas); }

.party-topbar { min-height: 4.4rem; padding: .7rem max(1.25rem, 4vw); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--party-line); background: rgba(242,244,241,.94); }
.party-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--party-text); text-decoration: none; }
.party-brand-mark { width: 2.1rem; height: 2.1rem; display: block; }
.party-brand > span { display: flex; align-items: baseline; gap: .04rem; font-size: 1rem; font-weight: 700; letter-spacing: .015em; text-transform: uppercase; }
.party-brand strong { font-weight: 700; }
.party-brand em { color: var(--party-accent-ink); font-style: normal; }

/* The card is the whole page here, so it sits in the optical middle of what is
   left between the bar and the footer rather than hanging from the top. */
.party-main { width: min(100% - 2.5rem, 27.5rem); margin: 0 auto; padding: clamp(2rem, 7vh, 4.5rem) 0 clamp(2rem, 6vh, 4rem); display: grid; align-content: center; }

.party-card { width: 100%; padding: clamp(1.5rem, 4vw, 2.35rem); background: var(--party-surface); border: 1px solid var(--party-line); box-shadow: 0 .6rem 2rem rgba(24,32,28,.05); }
.party-eyebrow { margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; color: var(--party-accent-ink); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.party-eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--party-line); }
.party-card h1 { margin: 0; color: var(--party-text); font-size: clamp(1.6rem, 4.5vw, 2.05rem); font-weight: 640; letter-spacing: -.035em; line-height: 1.12; }
.party-lead { margin: .6rem 0 1.6rem; color: var(--party-muted); font-size: .88rem; line-height: 1.55; }

.party-form { display: grid; gap: .85rem; }
.party-form label { display: grid; gap: .4rem; color: var(--party-muted); font-size: .66rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.party-form input { width: 100%; min-height: 2.85rem; padding: .6rem .75rem; box-sizing: border-box; border: 1px solid var(--party-line-strong); border-radius: 0; outline: 0; color: var(--party-text); background: var(--party-sunk); font: inherit; font-size: .9rem; letter-spacing: normal; text-transform: none; transition: border-color .16s, box-shadow .16s, background .16s; }
.party-form input::placeholder { color: var(--party-faint); }
.party-form input:focus { border-color: var(--party-accent-ink); background: var(--party-surface); box-shadow: 0 0 0 3px var(--party-accent-soft); }

/* One button treatment across the gateway: black by default, lime on hover, so
   the accent only ever appears where something is about to happen. */
.party-button { min-height: 2.9rem; padding: 0 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 0; color: #f7faf6; background: var(--party-ink); font: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .16s, color .16s; }
.party-button span { transition: transform .16s; }
.party-button:hover { color: var(--party-ink); background: var(--party-accent); }
.party-button:hover span { transform: translateX(.2rem); }
.party-form .party-button { margin-top: .35rem; }

.party-notice, .party-error { margin: 0 0 1rem; padding: .75rem .85rem; border-left: 3px solid var(--party-accent-ink); color: var(--party-text); background: var(--party-accent-soft); font-size: .82rem; line-height: 1.45; }
.party-error { border-color: #a9332e; background: rgba(169,51,46,.08); }

.party-nav-user { display: flex; align-items: center; gap: .65rem; }
.party-nav-user-avatar { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; background: var(--party-accent-soft); border-radius: 50%; }
.party-nav-user-avatar svg { width: 1.15rem; height: 1.15rem; }
.party-nav-user-details { min-width: 0; display: grid; gap: .05rem; line-height: 1.2; }
.party-nav-user-details strong { color: var(--party-text); font-size: .78rem; font-weight: 700; }
.party-nav-user-details span { max-width: 12rem; overflow: hidden; color: var(--party-faint); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
/* A bordered ghost rather than an underlined word: it has to read as the one
   control in the bar without competing with the account it sits next to. */
.party-nav-logout { margin: 0 0 0 .35rem; }
.party-nav-logout button { padding: .45rem .7rem; border: 1px solid var(--party-line-strong); color: var(--party-muted); background: transparent; font: inherit; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: color .16s, border-color .16s, background .16s; }
.party-nav-logout button:hover { color: #f7faf6; border-color: var(--party-ink); background: var(--party-ink); }

/* The membership page is a document, not a card. It starts on the topbar's own
   left edge rather than centring, so the brand, the greeting and every row all
   hang off one margin, and only caps its measure so the rows stay readable on a
   wide screen. */
.party-main-page { width: 100%; max-width: 56rem; margin: 0; padding: clamp(2rem, 6vh, 3.5rem) max(1.25rem, 4vw) clamp(2rem, 6vh, 4rem); box-sizing: border-box; align-content: start; }
.party-welcome { margin: 0 0 2.2rem; color: var(--party-text); font-size: clamp(1.5rem, 4vw, 1.95rem); font-weight: 700; letter-spacing: -.03em; }
.party-main-page .party-notice, .party-main-page .party-error { margin-bottom: 1.8rem; }

/* app.css owns the structure of .account-section and .account-rows; everything
   below only re-points their colours at the light origin, so the gateway and
   the catalogue keep sharing one set of rows. */
.party-shell .account-section { margin-bottom: 0; }
/* Space between sections rather than under each one, so the last section never
   pushes the footer away from the content. */
.party-shell .account-section + .account-section { margin-top: 2.75rem; }
.party-shell .account-section-heading { margin: 0 0 1.1rem; padding-bottom: .5rem; color: var(--party-accent-ink); border-bottom: 1px solid var(--party-line); font-size: 1.05rem; font-weight: 750; letter-spacing: -.015em; }
.party-shell .account-rows > div { padding: .7rem 0; border-bottom: 1px solid var(--party-line); }
.party-shell .account-rows dt { color: var(--party-faint); font-size: .82rem; font-weight: 650; }
.party-shell .account-rows dd { color: var(--party-text); font-size: .9rem; }
.party-shell .account-rows > div > span { display: flex; gap: .5rem; }
.party-shell .row-note { color: var(--party-faint); }
.party-shell .party-lifetime { color: var(--party-accent-ink); font-weight: 750; }
.party-shell .countdown { color: var(--party-accent-ink); }
.party-shell .countdown.is-expired { color: #a9332e; }
/* Cards rather than rows: a plan is a thing to compare, not a field to read. */
.party-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.party-plan { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem; border: 1px solid var(--party-line); background: var(--party-sunk); transition: border-color .16s, background .16s; }
.party-plan:hover { border-color: var(--party-line-strong); background: var(--party-surface); }
.party-plan h3 { margin: 0; color: var(--party-text); font-size: 1.05rem; font-weight: 750; letter-spacing: -.02em; }
/* With party.js loaded the card itself is the buy target, so it reads as one. */
.party-plan[data-party-plan] { cursor: pointer; }
.party-plan[data-party-plan]:hover .cn-button { border-color: var(--party-accent-ink); }
.party-price { margin: 0; color: var(--party-text); font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; }
.party-plan-list { margin: 0; padding: 0; display: grid; gap: .4rem; list-style: none; }
.party-plan-list li { padding-left: 1.05rem; position: relative; color: var(--party-muted); font-size: .8rem; line-height: 1.4; }
.party-plan-list li::before { content: "+"; position: absolute; left: 0; color: var(--party-accent-ink); font-weight: 800; }
/* The lists differ in length, so the buttons are pushed to a shared baseline. */
.party-plan form { margin-top: auto; }
.party-shell .party-plan .cn-button[disabled] { color: var(--party-faint); background: var(--party-sunk); border-color: var(--party-line-strong); cursor: not-allowed; }
.party-prose { max-width: 42rem; margin: 0; color: var(--party-muted); font-size: .9rem; line-height: 1.65; }
.party-prose a { color: inherit; text-underline-offset: .2rem; }
.party-prose a:hover { color: var(--party-text); }
.party-shell .cn-button { border-radius: 0; font-size: .82rem; font-weight: 700; }
.party-shell .cn-button-variant-default { color: #f7faf6; background: var(--party-ink); border-color: var(--party-ink); }
.party-shell .cn-button-variant-default:hover { color: var(--party-ink); background: var(--party-accent); border-color: var(--party-accent); }

.party-footer { padding: 1rem max(1.25rem, 4vw) 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--party-line); color: var(--party-faint); font-size: .68rem; }
.party-footer nav { display: flex; gap: 1rem; }
.party-footer a { color: inherit; text-underline-offset: .2rem; }
.party-footer a:hover { color: var(--party-muted); }
.cf-turnstile { min-height: 0; }

@media (max-width: 560px) {
  .party-topbar { min-height: 4rem; padding-inline: 1.15rem; }
  .party-main { width: min(100% - 1.5rem, 44rem); padding-top: 2rem; }
  .party-main-page { padding: 2rem 1.15rem 2.5rem; }
  .party-card { padding: 1.35rem; }
  .party-shell .account-rows > div > span { flex-wrap: wrap; }
  .party-nav-user-details span { display: none; }
  .party-footer { flex-direction: column; align-items: flex-start; gap: .5rem; }
}