/* Key Collective — membership-core widget stylesheet. Generated from packages/themes; do not paste into a site head. */

[data-ms-magic-error]:not(.ms-on),[data-ms-form-error]:not(.ms-on),
[data-ms-enroll-error]:not(.ms-on),[data-ms-signup-error]:not(.ms-on),
[data-ms-login-error]:not(.ms-on),[data-ms-code-error]:not(.ms-on),[data-ms-password-mismatch]:not(.ms-on),
[data-ms-sent-msg]:not(.ms-on),[data-ms-family-error]:not(.ms-on),
[data-ms-family-link-box]:not(.ms-on),[data-ms-apply-error]:not(.ms-on),
[data-ms-apply-success]:not(.ms-on),[data-ms-sms-blocked]:not(.ms-on),
[data-ms-sms-locked],[data-ms-shipment]:not(.ms-on),[data-ms-shipment-status]:not(.ms-on),
[data-ms-shipment-track]:not(.ms-on),[data-ms-shipment-sku]{display:none!important}

:root{
  --ms-font: Akkurat, Tahoma, "Helvetica Neue", Arial, sans-serif;
  --ms-font-display: Louize, Georgia, "Times New Roman", serif;
  --ms-font-eyebrow: Louize, Georgia, serif;
  --ms-bg: #051b23;
  --ms-surface: #1f4a5a;
  --ms-text: #f2f2f2;
  --ms-muted: #d9cca8;
  --ms-border: #d9cca8;
  --ms-primary: #d9cca8;
  --ms-primary-hover: #e7e6d6;
  --ms-on-primary: #051b23;
  --ms-input-bg: #051b23;
  --ms-input-text: #ffffff;
  --ms-input-border: #d9cca8;
  --ms-placeholder: #8d8d8d;
  --ms-focus: #d9cca8;
  --ms-radius: 0.5rem;
  --ms-radius-input: 0.5rem;
  --ms-radius-btn: 100rem;
  --ms-space: 16px;
  --ms-btn-font: var(--ms-font-display);
  --ms-btn-tracking: 3.2px;
  --ms-btn-transform: uppercase;
  --ms-btn-weight: 400;
  --ms-btn-pad: 1rem 2rem;
  --ms-input-pad: 0 1rem;
  --ms-input-height: 3.5rem;
  --ms-btn-bg: #d9cca8;
  --ms-btn-bg-hover: #e7e6d6;
  --ms-btn-fg: #051b23;
  --ms-label-size: 0.9rem;
  --ms-label-color: var(--ms-text);
  --ms-label-indent: 0;
}

/* The account page's in-place edit forms (/member/account). Scoped to the
   engine's own attributes, so nothing else on the site is touched. Labels and
   links use the site's display type; inputs and the save button keep the
   site's own input-form-base and button-outline classes. */
[data-ms-section-form].ms-on{display:flex!important;flex-direction:column;gap:1.25rem;margin:1rem 0 0;max-width:28rem}
[data-ms-section-form] .item-input-group{display:flex;flex-direction:column;gap:.5rem;margin:0}
[data-ms-section-form] label.label-data-account{font-weight:400;font-size:.75rem;opacity:.75;margin:0}
[data-ms-section-form] .input-form-base{margin:0}
[data-ms-section-form] .wp-first-name-and-last-name{display:flex;align-items:center;gap:2rem;margin-top:.25rem}
[data-ms-section] [data-ms-edit],[data-ms-section-form] [data-ms-edit-cancel]{font-family:var(--ms-font-display);font-size:.8rem;letter-spacing:3.2px;text-transform:uppercase;color:var(--ms-primary);text-decoration:none}
[data-ms-section] [data-ms-edit]:hover,[data-ms-section-form] [data-ms-edit-cancel]:hover{color:var(--ms-primary-hover)}
[data-ms-section-form] .checkbox-input-form{display:flex;align-items:flex-start;gap:.75rem;margin:0!important;padding:0!important}
[data-ms-section-form] .w-checkbox-input{float:none;flex:none;margin:.3rem 0 0}
[data-ms-section-form] .w-form-label{font-weight:400;font-size:1rem;line-height:1.5;color:var(--ms-text)}
.w-form:has(>[data-ms-section-form]){margin:0}
[data-ms-section-form] [data-ms-form-error]{color:#f2b3a3;font-size:.9rem;line-height:1.4;margin:0}
[data-ms-sms-fields].ms-on{display:flex;flex-direction:column;gap:1.25rem}
/* "Changes saved": a pill pinned to the bottom of the screen, so it is seen wherever the
   member was editing. The engine shows it for 4s; the animation fades out inside that. */
[data-ms-section-saved].ms-on{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:1000;display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 1.75rem;background:var(--ms-bg);border:1px solid var(--ms-primary);border-radius:100rem;box-shadow:0 10px 30px rgba(0,0,0,.35);color:var(--ms-primary);font-family:var(--ms-font-display);font-size:.8rem;letter-spacing:3.2px;text-transform:uppercase;white-space:nowrap;pointer-events:none;animation:ms-saved 4s ease forwards}
[data-ms-section-saved].ms-on::before{content:"";width:.9rem;height:.5rem;margin-top:-.35rem;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
@keyframes ms-saved{0%{opacity:0;transform:translate(-50%,.75rem)}8%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){[data-ms-section-saved].ms-on{animation:ms-saved-fade 4s linear forwards}}
@keyframes ms-saved-fade{0%{opacity:0;transform:translateX(-50%)}8%,85%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}
/* The past-due notice on the account page ([data-gate="past-due"]). */
[data-gate="past-due"].ms-on{display:flex;flex-direction:column;gap:.5rem;margin:2rem 0 0;padding:1.25rem 1.5rem;border:1px solid var(--ms-primary);border-radius:.5rem}
[data-ms-section-view]:has(>[data-ms-edit]){margin-top:.75rem}
[data-ms-section="sms"] [data-ms-section-view] .value-data-account+.value-data-account{margin-top:1rem}
[data-ms-sms-on].ms-on,[data-ms-sms-off].ms-on,[data-ms-sms-txn-on].ms-on,[data-ms-sms-txn-off].ms-on{display:block;margin-top:.25rem;font-family:var(--ms-font-display);font-size:.75rem;letter-spacing:3.2px;text-transform:uppercase;color:var(--ms-primary)}
/* Why texts cannot reach them ([data-ms-sms-blocked], read back from Klaviyo): a STOP
   reply, a deactivated number, a block. Boxed like the past-due notice. */
[data-ms-sms-blocked].ms-on{display:block;margin:1.25rem 0 0;padding:1rem 1.25rem;border:1px solid var(--ms-primary);border-radius:.5rem;font-size:.9rem;line-height:1.5;color:var(--ms-text)}
[data-ms-sms-blocked] p{margin:0 0 .75rem}
[data-ms-sms-blocked] a{font-family:var(--ms-font-display);font-size:.8rem;letter-spacing:3.2px;text-transform:uppercase;color:var(--ms-primary);text-decoration:none}
[data-ms-sms-blocked] a:hover{color:var(--ms-primary-hover)}

/* The enrol gate as a panel, from the original Figma enrolment form (file
   DIe4niGdXX0lTGQLZdLuqM, node 5251:7680), "Founding Member" copy retired. It
   restyles only the gate stage of <ms-enroll-flow>; plans and signup keep the
   dark theme. The variables are re-pointed INSIDE the panel, which flips the
   engine's inputs, button and links to dark-on-cream without touching the rest
   of the page. Heading and intro spacing is PADDING, not margin: the engine
   re-asserts .ms-h/.ms-sub margins with a layered !important. */
ms-enroll-flow [data-ms-stage="gate"]{
  --ms-text:#051b23;--ms-muted:#051b23;--ms-label-color:#051b23;
  --ms-input-bg:rgba(5,27,35,.04);--ms-input-text:#19191e;--ms-input-border:#19191e;
  --ms-placeholder:rgba(25,25,30,.6);--ms-focus:#1f4a5a;
  --ms-btn-bg:#1f4a5a;--ms-btn-bg-hover:#051b23;--ms-btn-fg:#ffffff;
  --ms-primary:#1f4a5a;--ms-border:rgba(25,25,30,.5);--ms-error:#8a1c1c;
  max-width:734px;box-sizing:border-box;padding:56px clamp(24px,9vw,96px);
  background:#d9cca8;border-radius:21px;text-align:center}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-icon{margin:0 0 46px}
ms-enroll-flow [data-ms-stage="gate"] .ms-h{font-family:var(--ms-font-display);font-size:2rem;font-weight:400;line-height:1.2;letter-spacing:-.04em;padding-bottom:11px}
ms-enroll-flow [data-ms-stage="gate"] .ms-h em{font-style:italic}
ms-enroll-flow [data-ms-stage="gate"] .ms-sub{font-size:1rem;line-height:1.6;padding-bottom:30px}
ms-enroll-flow [data-ms-stage="gate"] .ms-form{align-items:center;gap:24px}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-field{width:100%;max-width:320px;gap:8px;font-weight:400}
ms-enroll-flow [data-ms-stage="gate"] .ms-input{height:40px;border-radius:4px;text-align:center}
ms-enroll-flow [data-ms-stage="gate"] .ms-btn{font-size:.875rem;letter-spacing:2.24px;padding:15px 30px;border-radius:41px}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-links{margin-top:46px}
ms-enroll-flow [data-ms-stage="gate"] .ms-divider{max-width:464px;margin:0 auto 30px;border-top:.5px solid var(--ms-border)}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-note{color:#1f4a5a;line-height:1.6}
ms-enroll-flow [data-ms-stage="gate"] .ms-link{color:#1f4a5a;text-decoration:underline}

/* Shipping status on the Spirits page's release cards ([data-ms-shipment],
   filled from GET /v1/me/shipments). The block sits at the foot of the card
   in the site's own outline box (wp-skip-the-line), and only appears when
   there is a status (the engine adds .ms-on). Inside: the card's label style
   as an eyebrow (cms-bottle-type-1), the status in the bottle-name style
   (cms-bottle-name-1), and the site's pill button (button-outline). Those
   classes carry bottom margins built for the card's stacked text; the box's
   own gap spaces them here. */
[data-ms-shipment].ms-on{align-self:stretch;margin-top:1.5rem}
[data-ms-shipment] .cms-bottle-type-1,[data-ms-shipment] .cms-bottle-name-1{margin:0}
[data-ms-shipment-track].ms-on{align-self:flex-start;margin-top:.5rem}

/* The plan cards (data-plan-layout="cards"), from the Figma plan cards (node
   5102:6029): outlined in light gold, centred, name and price in Louize, each
   card with its own pill button. */
ms-enroll-flow .ms-plan-cards{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),310px));gap:24px}
ms-enroll-flow .ms-plan-card{--ms-text:#fff;padding:36px 40px;gap:24px;
  border:1px solid #d9cca8;border-radius:10px;background:transparent}
ms-enroll-flow .ms-plan-card .ms-plan-name{font-size:2rem;line-height:1.2;letter-spacing:-.04em;color:#d9cca8}
ms-enroll-flow .ms-plan-desc{font-size:.875rem;line-height:30px}
ms-enroll-flow .ms-plan-amount{font-size:2.75rem;line-height:.88;letter-spacing:-.04em;color:#d9cca8}
ms-enroll-flow .ms-plan-per{font-size:1.125rem;line-height:1.2}
ms-enroll-flow .ms-plan-card .ms-plan-save{font-family:var(--ms-font);line-height:30px}
ms-enroll-flow .ms-plan-save-amount{color:#d9cca8}
ms-enroll-flow .ms-plan-benefits-link{line-height:30px}
ms-enroll-flow .ms-plan-select{font-size:.875rem;letter-spacing:2.24px;padding:15px 30px;border-radius:41px}
/* The billing switch (Figma node 5102:6024): a midnight pill with a gold rule,
   two equal segments flush to its edge, the chosen one solid gold. The engine
   forces the segments' font and text colour with a layered !important (against
   Webflow's button reset), so those are set through the variables it reads:
   --ms-font-eyebrow for the font, --ms-text / --ms-bg for the two colours. */
ms-enroll-flow .ms-billing{--ms-font-eyebrow:var(--ms-font);--ms-text:#fff;--ms-bg:#051b23;
  display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:0;
  background:#051b23;border:1px solid #d9cca8;border-radius:100px;overflow:hidden}
ms-enroll-flow .ms-billing-opt{padding:16px 24px;border-radius:100px;font-size:.875rem;font-weight:700;
  letter-spacing:3.64px;line-height:normal}
ms-enroll-flow .ms-billing-opt[aria-checked="true"]{background:#d9cca8}