/* Private Stock Society — 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: gotham, "Gotham", "Helvetica Neue", Arial, sans-serif;
  --ms-font-display: "Engr", "Engravers MT", Copperplate, Georgia, serif;
  --ms-font-eyebrow: gotham, "Gotham", "Helvetica Neue", Arial, sans-serif;
  --ms-bg: #e3d7ca;
  --ms-surface: #e3d7ca;
  --ms-text: #221f20;
  --ms-muted: #4a4445;
  --ms-border: #221f20;
  --ms-primary: #221f20;
  --ms-primary-hover: #1c2f3a;
  --ms-on-primary: #e3d7ca;
  --ms-input-bg: #e3d7ca;
  --ms-input-text: #221f20;
  --ms-input-border: #221f20;
  --ms-placeholder: #5a524a;
  --ms-focus: #221f20;
  --ms-radius: 10px;
  --ms-radius-input: 0;
  --ms-radius-btn: 0;
  --ms-space: 16px;
  --ms-btn-font: var(--ms-font-eyebrow);
  --ms-btn-tracking: 2.64px;
  --ms-btn-transform: uppercase;
  --ms-btn-weight: 700;
  --ms-btn-pad: 16px 30px;
  --ms-input-pad: 8px 0;
  --ms-input-height: 40px;
  --ms-btn-bg: #1c2f3a;
  --ms-btn-bg-hover: #221f20;
  --ms-btn-fg: #e3d7ca;
  --ms-label-size: 12px;
  --ms-label-color: var(--ms-text);
  --ms-label-indent: 0;
  --ms-label-transform: uppercase;
  --ms-label-tracking: 2.64px;
}

/* The homepage's flow sits in a bare div between #become-member and #faqs, so
   its light stages would show the body's flat ivory. The design puts the gate
   and the account step on KRAFT: the site's own texture, the one its
   .new-section.form-enroll (#become-member) and .is-paper-texture paint, with
   the measured #dccaab underneath. The navy plan stage paints over it. */
html:has(script[src$="/membership.js"]) #become-member ~ :has(> ms-enroll-flow){
  background:#dccaab url("https://cdn.prod.website-files.com/687e7d464206f037c033cdf5/688a218122ea86dba67c54fd_texture-vainilla-full.avif") 50% 50% / cover no-repeat}

/* The page colors, light by default and re-pointed on the navy member panel. */
:root{--ps-ink:#221f20;--ps-accent:#221f20;--ps-label:#221f20;--ps-line:#221f20;--ps-placeholder:rgba(34,31,32,.7);
  --ps-error:#9a1824;--ps-btn-bg:#1c2f3a;--ps-btn-fg:#e3d7ca;--ps-btn-bg-hover:#221f20;--ps-btn-fg-hover:#e3d7ca;--ps-outline:#1c2f3a}
.wp-content-page-member{--ps-ink:#e3d7ca;--ps-accent:#d0a36b;--ps-label:#d0a36b;--ps-line:#e3d7ca;--ps-placeholder:rgba(227,215,202,.7);
  --ps-error:#f2b3a3;--ps-btn-bg:#d0a36b;--ps-btn-fg:#000000;--ps-btn-bg-hover:#e3d7ca;--ps-btn-fg-hover:#221f20;--ps-outline:#e3d7ca}

/* Error lines the engine reveals on the site's own forms (/login, /signin,
   /password/*, complete-account): crimson #bc202f reads 3.9:1 on kraft, so the
   design's darker #9a1824 (5.2:1); #f2b3a3 on the navy panel (7.8:1). */
[data-ms-magic-error],[data-ms-form-error],[data-ms-login-error],[data-ms-code-error],
[data-ms-password-mismatch],[data-ms-family-error],[data-ms-email-error]{color:var(--ps-error)}

/* ---------- The sign-in pages' own fields, on KRAFT ----------
   /login (link and password panels), /signin's code, /set-password,
   /password/new, /password/reset: the site's input-form-base would be a filled,
   rounded gray box. The design field (Figma 4982:2065, as the gate's): no fill,
   a 1px midnight bottom rule, radius 0, 40px, Gotham 14 (16 on phones, where
   iOS zooms into anything smaller); labels Gotham Bold 12, uppercase, 22%
   tracking. Placeholders at 70% midnight (the design's 30% reads 1.8:1).
   Scoped to the forms the engine drives on those pages (set-password by its
   new-password field, so complete-account's data-ms-profile form is left
   alone) and never inside the navy member panel, whose editors have their own
   inverted fields below. The page's own text alignment is kept. */
:is(form[data-ms-magic-link],form[data-ms-login],form[data-ms-code-signin],form[data-ms-forgot-password],form[data-ms-reset-password],form[data-ms-profile]:has([data-ms-name="new-password"])):not(.wp-content-page-member *) :is(.input-form-base,.input-form-base-2){
  height:40px;box-sizing:border-box;margin:0;padding:8px 0;background:transparent;border:0;border-bottom:1px solid #221f20;border-radius:0;box-shadow:none;
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;font-weight:400;line-height:22px;letter-spacing:0;text-transform:none;color:#221f20}
:is(form[data-ms-magic-link],form[data-ms-login],form[data-ms-code-signin],form[data-ms-forgot-password],form[data-ms-reset-password],form[data-ms-profile]:has([data-ms-name="new-password"])):not(.wp-content-page-member *) :is(.input-form-base,.input-form-base-2)::placeholder{
  color:rgba(34,31,32,.7);opacity:1;font-size:inherit}
:is(form[data-ms-magic-link],form[data-ms-login],form[data-ms-code-signin],form[data-ms-forgot-password],form[data-ms-reset-password],form[data-ms-profile]:has([data-ms-name="new-password"])):not(.wp-content-page-member *) :is(.input-form-base,.input-form-base-2):focus-visible{
  border-bottom-color:#1c2f3a;outline:2px solid #1c2f3a;outline-offset:2px}
:is(form[data-ms-magic-link],form[data-ms-login],form[data-ms-code-signin],form[data-ms-forgot-password],form[data-ms-reset-password],form[data-ms-profile]:has([data-ms-name="new-password"])):not(.wp-content-page-member *) :is(.label-input-base,.label-input-base-2){
  display:block;margin:0 0 4px;font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;line-height:18px;letter-spacing:2.64px;text-transform:uppercase;color:#221f20}
@media (max-width:767px){
  :is(form[data-ms-magic-link],form[data-ms-login],form[data-ms-code-signin],form[data-ms-forgot-password],form[data-ms-reset-password],form[data-ms-profile]:has([data-ms-name="new-password"])):not(.wp-content-page-member *) :is(.input-form-base,.input-form-base-2){font-size:16px}
}

/* ---------- The enroll flow on a LIGHT ground: gate and account step ----------
   Gate: Figma 4566:17783 (only /invite shows it under open enrollment).
   Account step: Figma 4696:2145, without the zip field (§3 item 27).
   Kicker Gotham Bold 16 / 15% over an Engravers heading; labels Gotham Bold 12
   uppercase 22% above 40px fields with only a 1px midnight bottom rule; a navy
   44px button with ivory capitals that goes midnight on hover. The design's
   torn button edge and the textured rule under the form are images, left out. */
ms-enroll-flow [data-ms-stage="gate"],ms-enroll-flow [data-ms-stage="signup"],ms-enroll-flow [data-ms-stage="closed"]{
  --ms-space:0px;--ms-text:#221f20;--ms-muted:#4a4445;--ms-label-color:#221f20;--ms-primary:#221f20;--ms-border:#221f20;
  --ms-input-bg:transparent;--ms-input-text:#221f20;--ms-input-border:#221f20;--ms-placeholder:rgba(34,31,32,.7);--ms-focus:#1c2f3a;
  --ms-btn-bg:#1c2f3a;--ms-btn-bg-hover:#221f20;--ms-btn-fg:#e3d7ca;--ms-error:#9a1824;
  box-sizing:border-box;margin:0 auto;padding:64px 16px;background:none;border:0;border-radius:0;box-shadow:none;text-align:center;color:#221f20}
/* The padding is the stage's own air and phone gutter: on the homepage the flow
   sits in a bare div between #become-member and #faqs, with no container. */
ms-enroll-flow [data-ms-stage="gate"],ms-enroll-flow [data-ms-stage="closed"]{max-width:508px}
ms-enroll-flow [data-ms-stage="signup"]{max-width:736px}
ms-enroll-flow .ms-kicker{font-family:gotham,"Gotham","Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:2.4px;text-transform:uppercase;padding-bottom:8px}
ms-enroll-flow [data-ms-stage="gate"] .ms-kicker,ms-enroll-flow [data-ms-stage="signup"] .ms-kicker{color:#221f20}
/* HEADINGS FIT THEIR COLUMN, and never break inside a word. Engravers is very
   wide (MEMBER is 5.75em, MEMBERSHIP 8.9em, ENROLLMENT 9.2em), and the column
   is narrower than the window: /invite's is 295px at a 375px phone. So each
   stage is a size container and its heading is sized in cqi, the stage's own
   width: 17cqi fits MEMBER (97.8%), 10.5cqi fits MEMBERSHIP and ENROLLMENT
   (94–97%), each up to the design's size. Lines wrap between words only; a
   longer word in new copy would overflow into the stage's 16px gutter rather
   than split. The vw line before each is for browsers without cqi. */
ms-enroll-flow [data-ms-stage]{container-type:inline-size}
ms-enroll-flow [data-ms-stage] .ms-h{overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
ms-enroll-flow [data-ms-stage="gate"] .ms-h,ms-enroll-flow [data-ms-stage="signup"] .ms-h,ms-enroll-flow [data-ms-stage="closed"] .ms-h{
  font-family:"Engr","Engravers MT",Copperplate,Georgia,serif;font-size:clamp(28px,12vw,82px);font-size:clamp(28px,17cqi,82px);font-weight:400;line-height:.9;letter-spacing:0;text-transform:uppercase;color:#221f20;padding-bottom:24px}
ms-enroll-flow [data-ms-stage="closed"] .ms-h{font-size:clamp(24px,8vw,82px);font-size:clamp(24px,10.5cqi,82px)}
ms-enroll-flow [data-ms-stage="gate"] .ms-sub,ms-enroll-flow [data-ms-stage="gate"] .ms-gate-detail,ms-enroll-flow [data-ms-stage="closed"] .ms-sub{
  margin:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;font-weight:400;line-height:22px;color:#221f20}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-detail{padding-top:8px}
ms-enroll-flow [data-ms-stage="gate"] .ms-form{align-items:stretch;gap:24px;padding-top:46px}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-field{width:100%;margin:0;gap:4px;align-items:stretch;display:flex}
ms-enroll-flow .ms-gate-label{font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;line-height:18px;letter-spacing:2.64px;text-transform:uppercase;text-align:center;color:#221f20}
ms-enroll-flow [data-ms-stage="gate"] .ms-input,ms-enroll-flow [data-ms-stage="signup"] .ms-input{
  --ms-font:gotham,"Gotham",Arial,sans-serif;height:40px;box-sizing:border-box;padding:8px 0;margin:0;background:transparent;
  border:0;border-bottom:1px solid #221f20;border-radius:0;box-shadow:none;font-size:14px;font-weight:400;line-height:22px}
ms-enroll-flow [data-ms-stage="gate"] .ms-input{text-align:center}
ms-enroll-flow [data-ms-stage="gate"] .ms-input:focus-visible,ms-enroll-flow [data-ms-stage="signup"] .ms-input:focus-visible{outline:2px solid #1c2f3a;outline-offset:2px;border-bottom-color:#1c2f3a}
ms-enroll-flow [data-ms-stage="gate"] .ms-btn,ms-enroll-flow [data-ms-stage="signup"] .ms-form .ms-btn{
  min-height:44px;box-sizing:border-box;margin:0;padding:0 30px;border:0;border-radius:0;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px}
ms-enroll-flow [data-ms-stage="gate"] .ms-btn{width:100%}
ms-enroll-flow [data-ms-stage="gate"] .ms-error,ms-enroll-flow [data-ms-stage="signup"] .ms-error{font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;color:#9a1824;text-align:center}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-links{margin:0;padding-top:46px;display:flex;flex-direction:column;gap:16px}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-links[hidden]{display:none}
ms-enroll-flow [data-ms-stage="gate"] .ms-divider{display:none}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-note,ms-enroll-flow [data-ms-stage="signup"] .ms-skip{
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;font-weight:400;line-height:22px;color:#221f20;text-align:center}
ms-enroll-flow [data-ms-stage="gate"] .ms-gate-note[hidden]{display:none}
ms-enroll-flow [data-ms-stage="gate"] .ms-link,ms-enroll-flow [data-ms-stage="signup"] .ms-link,
ms-enroll-flow [data-ms-stage="signup"] .ms-legal a,ms-enroll-flow [data-ms-stage="signup"] .ms-cancel-note a{color:#221f20!important;text-decoration:underline;text-underline-offset:.15em}
ms-enroll-flow [data-ms-stage="gate"] .ms-link:hover,ms-enroll-flow [data-ms-stage="signup"] .ms-link:hover{color:#1c2f3a!important}

/* The account step: the design's two columns (first / last, password /
   confirm), email across both now that zip is gone. The engine's .ms-row is
   dissolved into the grid so its two fields take the columns. */
ms-enroll-flow [data-ms-stage="signup"] .ms-plan-chosen{box-sizing:border-box;margin:0 0 32px;padding:0 0 12px;border:0;border-bottom:1px solid #221f20;
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;color:#221f20}
ms-enroll-flow [data-ms-stage="signup"] .ms-plan-chosen-label{font-size:14px;color:#221f20}
ms-enroll-flow [data-ms-stage="signup"] .ms-plan-change{font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;color:#221f20!important;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
ms-enroll-flow [data-ms-stage="signup"] .ms-form{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:24px;padding-top:22px;text-align:left}
ms-enroll-flow [data-ms-stage="signup"] .ms-form > *{grid-column:1 / -1}
ms-enroll-flow [data-ms-stage="signup"] .ms-row{display:contents}
ms-enroll-flow [data-ms-stage="signup"] .ms-row > .ms-field,ms-enroll-flow [data-ms-stage="signup"] .ms-form > .ms-field:has(input[type="password"]){grid-column:auto}
ms-enroll-flow [data-ms-stage="signup"] .ms-field{gap:4px}
ms-enroll-flow [data-ms-stage="signup"] .ms-label{display:block;margin:0;padding:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700!important;line-height:18px;letter-spacing:2.64px;text-transform:uppercase;color:#221f20}
ms-enroll-flow [data-ms-stage="signup"] .ms-password-intro{gap:16px;padding-top:22px;text-align:center}
ms-enroll-flow [data-ms-stage="signup"] .ms-password-heading{font-family:gotham,"Gotham",Arial,sans-serif;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:2.4px;text-transform:uppercase;color:#221f20}
ms-enroll-flow [data-ms-stage="signup"] .ms-password-note{max-width:460px;margin:0 auto;font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;color:#221f20}
ms-enroll-flow [data-ms-stage="signup"] [data-ms-checkout-legal]{text-align:center}
ms-enroll-flow [data-ms-stage="signup"] .ms-legal,ms-enroll-flow [data-ms-stage="signup"] .ms-cancel-note,ms-enroll-flow [data-ms-stage="signup"] .ms-assure-line{
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-style:normal;line-height:18px;color:#221f20}
ms-enroll-flow [data-ms-stage="signup"] .ms-cancel-note{font-size:14px;line-height:22px;padding-top:8px}
ms-enroll-flow [data-ms-stage="signup"] .ms-legal{padding-top:12px}
ms-enroll-flow [data-ms-stage="signup"] .ms-legal strong{color:#221f20;font-weight:700}
ms-enroll-flow [data-ms-stage="signup"] .ms-form .ms-btn{justify-self:center;width:auto;min-width:146px;margin-top:22px}
ms-enroll-flow [data-ms-stage="signup"] .ms-skip{padding-top:24px}
ms-enroll-flow [data-ms-stage="signup"] .ms-assure{padding-top:16px}
ms-enroll-flow [data-ms-stage="signup"] .ms-lock{color:#221f20}
@media (max-width:600px){
  ms-enroll-flow [data-ms-stage="signup"] .ms-form{grid-template-columns:1fr}
  ms-enroll-flow [data-ms-stage="signup"] .ms-row > .ms-field,ms-enroll-flow [data-ms-stage="signup"] .ms-form > .ms-field:has(input[type="password"]){grid-column:1 / -1}
}
/* iOS zooms into any field set under 16px; phones get 16px, the design's 14 above. */
@media (max-width:767px){
  ms-enroll-flow [data-ms-stage="gate"] .ms-input,ms-enroll-flow [data-ms-stage="signup"] .ms-input,ms-apply .ms-input{font-size:16px}
}

/* ---------- The plan chooser on NAVY (Figma 10:2462, cards layout) ----------
   A full-width navy band (the shadow paints it, the clip keeps it to the
   stage's own height, and a shadow adds no scrollable overflow). Kicker "Select
   your" over an Engravers heading in ivory, a white Gotham eyebrow, the pill
   switch (gold rule, the chosen half gold with #051b23 text), and #213845 cards
   radius 10: Gotham Bold tier name in ivory, italic white line, Knockout gold
   price with a white "/ YEAR", white saving with the amount in gold, a white
   benefits link, and a gold button with black capitals (ivory on hover).
   The engine forces the switch's colors and fonts and the buttons' and links'
   colors with a layered !important, so those go through its variables. */
/* /invite puts the widget in the right half of /login's two-column grid. Its
   plan stage would squeeze both cards into that half beside a welcome column
   whose midnight text vanishes on the navy (cutover, 2026-10-05). While the
   plans show, the welcome column goes and the widget's column takes the grid's
   full width, as on the homepage. Keyed on data-ms-force-gate, which only
   /invite carries, and on .ms-on, the engine's mark of the visible stage; the
   !important beats Webflow's per-node grid placement. */
.grid:has(ms-enroll-flow[data-ms-force-gate] [data-ms-stage="plans"].ms-on) > :not(:has(ms-enroll-flow)){display:none!important}
.grid:has(ms-enroll-flow[data-ms-force-gate] [data-ms-stage="plans"].ms-on) > :has(ms-enroll-flow){grid-column:1/-1!important;grid-row:auto!important;max-width:none!important;justify-self:stretch!important}
ms-enroll-flow [data-ms-stage="plans"]{
  --ms-space:0px;--ms-text:#ffffff;--ms-muted:#e3d7ca;--ms-primary:#d0a36b;--ms-border:#d0a36b;--ms-bg:#1c2f3a;--ms-surface:#213845;
  --ms-focus:#d0a36b;--ms-btn-bg:#d0a36b;--ms-btn-bg-hover:#e3d7ca;--ms-btn-fg:#000000;--ms-error:#f2b3a3;
  max-width:880px;box-sizing:border-box;margin:0 auto;padding:80px 16px;border:0;border-radius:0;
  background:#1c2f3a;box-shadow:0 0 0 100vmax #1c2f3a;clip-path:inset(0 -100vmax);color:#ffffff;text-align:center}
ms-enroll-flow [data-ms-stage="plans"] .ms-kicker{color:#e3d7ca}
ms-enroll-flow [data-ms-stage="plans"] .ms-h{font-family:"Engr","Engravers MT",Copperplate,Georgia,serif;font-size:clamp(24px,8vw,79px);font-size:clamp(24px,10.5cqi,79px);font-weight:400;line-height:.9;letter-spacing:0;
  text-transform:uppercase;color:#e3d7ca;padding-inline:max(0px,calc((100% - 734px) / 2));padding-bottom:64px}
ms-enroll-flow [data-ms-stage="plans"] .ms-plans-eyebrow{font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px;text-transform:uppercase;color:#ffffff;padding-bottom:64px}
ms-enroll-flow [data-ms-stage="plans"] [data-ms-plans]{padding:0;align-items:center}
ms-enroll-flow [data-ms-stage="plans"] .ms-billing{--ms-font-eyebrow:gotham,"Gotham",Arial,sans-serif;--ms-text:#ffffff;--ms-bg:#051b23;
  display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;width:303px;max-width:100%;box-sizing:border-box;gap:0;margin:0 auto 64px;padding:0;
  background:#1c2f3a;border:1px solid #d0a36b;border-radius:100px;overflow:hidden}
ms-enroll-flow [data-ms-stage="plans"] .ms-billing-opt{height:38px;margin:0;padding:0 24px;border-radius:100px;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px;background:transparent}
ms-enroll-flow [data-ms-stage="plans"] .ms-billing-opt[aria-checked="true"]{background:#d0a36b}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-cards{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),330px));gap:24px;width:100%}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-card{--ms-text:#ffffff;gap:24px;padding:36px 40px;border:0;border-radius:10px;background:#213845;color:#ffffff}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-text,ms-enroll-flow [data-ms-stage="plans"] .ms-plan-cost{gap:6px}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-card .ms-plan-name{font-family:gotham,"Gotham",Arial,sans-serif;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:2.4px;text-transform:uppercase;color:#e3d7ca}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-desc{margin:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;font-style:italic;line-height:22px;color:#ffffff}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-card .ms-plan-price{margin:0;gap:6px;align-items:baseline;font-family:Knockout,"Arial Narrow",Arial,sans-serif}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-amount{font-family:Knockout,"Arial Narrow",Arial,sans-serif;font-size:40px;font-weight:400;line-height:.9;color:#d0a36b}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-per{font-family:Knockout,"Arial Narrow",Arial,sans-serif;font-size:20px;font-weight:400;line-height:.9;letter-spacing:3.2px;text-transform:uppercase;color:#ffffff}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-card .ms-plan-save{margin:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;font-style:normal;line-height:22px;color:#ffffff}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-save-amount{color:#d0a36b}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-benefits-link{font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;text-decoration:underline;text-underline-offset:.15em}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-select{min-height:44px;box-sizing:border-box;margin:0;padding:0 30px;border:0;border-radius:0;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px}
ms-enroll-flow [data-ms-stage="plans"] .ms-plan-select:hover:not([disabled]){--ms-btn-fg:#221f20}
ms-enroll-flow [data-ms-stage="plans"] .ms-error{font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;color:#f2b3a3}
ms-enroll-flow [data-ms-stage="plans"] .ms-muted{color:#e3d7ca}

/* ---------- /apply (<ms-apply>), on a light page ----------
   No new design is in scope (/apply forwards home while enrollment is open), so
   it takes the account step's field, label and button treatment. */
ms-apply{
  --ms-space:0px;--ms-text:#221f20;--ms-muted:#4a4445;--ms-label-color:#221f20;--ms-primary:#221f20;--ms-border:#221f20;
  --ms-input-bg:transparent;--ms-input-text:#221f20;--ms-input-border:#221f20;--ms-placeholder:rgba(34,31,32,.7);--ms-focus:#1c2f3a;
  --ms-btn-bg:#1c2f3a;--ms-btn-bg-hover:#221f20;--ms-btn-fg:#e3d7ca;--ms-error:#9a1824;--ms-success:#221f20;
  display:block;color:#221f20}
ms-apply .ms-card{max-width:704px;box-sizing:border-box;margin:0 auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:left}
ms-apply .ms-h{font-family:"Engr","Engravers MT",Copperplate,Georgia,serif;font-size:clamp(32px,9vw,56px);font-weight:400;line-height:.9;text-transform:uppercase;color:#221f20;padding-bottom:24px;text-align:center}
ms-apply .ms-form{gap:24px}
ms-apply .ms-row{gap:24px}
ms-apply .ms-field{gap:4px}
ms-apply .ms-label{display:block;margin:0;padding:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700!important;line-height:18px;letter-spacing:2.64px;text-transform:uppercase;color:#221f20}
ms-apply .ms-label .ms-muted{font-weight:400;letter-spacing:0;text-transform:none;color:#4a4445}
ms-apply .ms-input{--ms-font:gotham,"Gotham",Arial,sans-serif;height:40px;box-sizing:border-box;padding:8px 0;margin:0;background:transparent;border:0;border-bottom:1px solid #221f20;border-radius:0;font-size:14px;line-height:22px}
ms-apply [data-ms-apply-extra]{max-width:none;margin:0;padding:0;background:none;border:0}
ms-apply .ms-check{gap:16px;padding:8px 0 0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#221f20}
ms-apply .ms-check input{accent-color:#1c2f3a}
ms-apply .ms-check-text{font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;line-height:18px;color:#221f20}
ms-apply .ms-check-text a,ms-apply .ms-link{color:#221f20!important;text-decoration:underline}
ms-apply .ms-fine{color:#4a4445}
ms-apply .ms-form .ms-btn{align-self:center;min-height:44px;margin-top:22px;padding:0 30px;border:0;border-radius:0;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px}
ms-apply .ms-error{font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;color:#9a1824}
ms-apply [data-ms-apply-success] .ms-muted{font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;text-align:center;color:#221f20}

/* ---------- The account page's editors (/member/account) ----------
   They sit on the member pages' NAVY content panel, built by Lane W on the
   site's own classes (input-form-base / input-form-base-2, label-input-base /
   label-data-account, button-fill / is-gold / button-outline). The design has
   NO fields or buttons on navy, so these are derived, not read off a frame:
   the fields mirror the light design inverted (no fill, a 1px ivory bottom
   rule, ivory type, ivory placeholder at 70%, radius 0, 40px), the labels are
   the panel's own gold label-data-account look, and the save button is the
   design's DARK button (gold fill, black capitals; ivory with midnight text on
   hover), the same as the plan cards' and the page's own is-gold portal button.
   Everything reads --ps-*, so a form placed on a light page instead keeps the
   light design's colors. */
[data-ms-section-form].ms-on,[data-ms-email-form].ms-on{display:flex!important;flex-direction:column;gap:24px;margin:16px 0 0;max-width:448px}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) .item-input-group{display:flex;flex-direction:column;gap:4px;margin:0}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(label.label-input-base,label.label-input-base-2,label.label-data-account,.label-data-account){
  display:block;margin:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;line-height:18px;letter-spacing:2.64px;text-transform:uppercase;text-align:left;color:var(--ps-label)}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(.input-form-base,.input-form-base-2,select){
  height:40px;box-sizing:border-box;margin:0;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--ps-line);border-radius:0;box-shadow:none;
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:16px;line-height:22px;color:var(--ps-ink)}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) select option{color:#221f20;background:#e3d7ca}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(.input-form-base,.input-form-base-2):focus{border-bottom-color:var(--ps-accent);outline:2px solid var(--ps-accent);outline-offset:2px}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(.input-form-base,.input-form-base-2)::placeholder{color:var(--ps-placeholder);opacity:1;font-size:inherit}
/* Webflow's default "Example text" placeholder, wherever a field kept it. */
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) input[placeholder="Example text"]::placeholder{color:transparent}
[data-ms-section-form] .wp-first-name-and-last-name{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px}
/* Only the field pair splits into equal columns. Webflow reuses this row class
   for the Save + Cancel row, where an equal split squeezed "Send confirmation
   link" to half the panel and clipped it (2026-10-03). width:100% keeps the
   pair full width where the site's own phone CSS stacks the row as a column,
   which with align-items:flex-end otherwise pushed both fields to the right. */
[data-ms-section-form] .wp-first-name-and-last-name > .item-input-group{flex:1 1 0;min-width:0;width:100%}
[data-ms-section-form] .wp-first-name-and-last-name > :not(.item-input-group){flex:0 1 auto;max-width:100%}
[data-ms-section-form] .wp-first-name-and-last-name:not(:has(> .item-input-group)){align-items:center}
/* The save button: the site's button-fill (navy, which vanishes on the navy
   panel) or is-gold, or any submit. button-outline is the quiet alternative. */
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(.button-fill,[type="submit"]):not(.button-outline){
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;margin:0;padding:0 30px;border:0;border-radius:0;background:var(--ps-btn-bg);color:var(--ps-btn-fg);
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px;text-transform:uppercase;cursor:pointer;align-self:flex-start}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(.button-fill,[type="submit"]):not(.button-outline):hover{background:var(--ps-btn-bg-hover);color:var(--ps-btn-fg-hover)}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) .button-outline{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;margin:0;padding:0 30px;border:1px solid var(--ps-outline);border-radius:0;background:transparent;color:var(--ps-outline);
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:2.64px;text-transform:uppercase;align-self:flex-start}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) .button-outline:hover{background:color-mix(in srgb,var(--ps-outline) 12%,transparent)}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) :is(.button-fill,.button-outline,[type="submit"]):focus-visible{outline:2px solid var(--ps-accent);outline-offset:2px}
/* Edit and cancel: links in the accent (gold on navy, 6:1; midnight on light). */
[data-ms-section] [data-ms-edit],:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) [data-ms-edit-cancel]{
  align-self:flex-start;padding:0;background:none;border:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:2.64px;text-transform:uppercase;
  color:var(--ps-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;cursor:pointer}
[data-ms-section] [data-ms-edit]:hover,:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) [data-ms-edit-cancel]:hover{color:var(--ps-ink)}
[data-ms-section-view]:has(>[data-ms-edit]){margin-top:12px}
/* Webflow's checkbox element carries its own inline label, which Fifty-Six's
   page left holding the field name between the box and the real description.
   Hidden only where a description follows the checkbox inside the same
   checkbox-input-form wrapper, so a lone checkbox keeps its label. */
[data-ms-section-form] .checkbox-input-form{display:flex;align-items:flex-start;gap:12px;margin:0!important;padding:0!important}
[data-ms-section-form] .checkbox-input-form .w-checkbox{display:block;flex:none;margin:0;padding:0}
[data-ms-section-form] .checkbox-input-form:has(> .w-checkbox + *) .w-checkbox > .w-form-label{display:none}
[data-ms-section-form] .w-checkbox-input{float:none;flex:none;margin:3px 0 0;width:18px;height:18px;accent-color:#d0a36b}
[data-ms-section-form] :is(.w-form-label,label:not([class])){display:inline;margin:0;font-family:gotham,"Gotham",Arial,sans-serif;font-weight:400;font-size:14px;line-height:22px;color:var(--ps-ink)}
.w-form:has(>[data-ms-section-form]),.w-form:has(>[data-ms-email-form]){margin:0}
:is([data-ms-section-form],[data-ms-email-form],[data-ms-change-password]) [data-ms-form-error]{margin:0;font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;color:var(--ps-error)}
[data-ms-sms-fields].ms-on{display:flex;flex-direction:column;gap:24px}
[data-ms-sms-contact].ms-on{display:block;font-size:14px;line-height:22px;color:var(--ps-ink)}
[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:4px;font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:2.64px;text-transform:uppercase;color:var(--ps-accent)}
/* "Changes saved": a pill pinned to the bottom of the screen, navy with a gold
   rule (it floats over both the light nav column and the navy panel). The
   engine shows it for 4s; the animation fades out inside that. */
[data-ms-section-saved].ms-on{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:1000;display:inline-flex;align-items:center;gap:12px;padding:14px 28px;
  background:#1c2f3a;border:1px solid #d0a36b;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.35);color:#e3d7ca;
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:2.64px;text-transform:uppercase;white-space:nowrap;pointer-events:none;animation:ms-saved 4s ease forwards}
[data-ms-section-saved].ms-on::before{content:"";width:14px;height:8px;margin-top:-6px;border-left:1.5px solid #d0a36b;border-bottom:1.5px solid #d0a36b;transform:rotate(-45deg)}
@keyframes ms-saved{0%{opacity:0;transform:translate(-50%,12px)}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 and why texts cannot reach a member, boxed in the accent. */
[data-gate="past-due"].ms-on{display:flex;flex-direction:column;gap:8px;margin:32px 0 0;padding:20px 24px;border:1px solid var(--ps-accent);border-radius:0;
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;color:var(--ps-ink)}
[data-gate="past-due"] a,[data-ms-sms-blocked] a{color:var(--ps-accent);text-decoration:underline;text-underline-offset:.2em}
[data-ms-sms-blocked].ms-on{display:block;margin:20px 0 0;padding:16px 20px;border:1px solid var(--ps-accent);font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;line-height:22px;color:var(--ps-ink)}
[data-ms-sms-blocked] p{margin:0 0 12px}
[data-ms-section="sms"] [data-ms-section-view] .value-data-account+.value-data-account{margin-top:16px}

/* "We've emailed you" confirmations, on /login and /password/reset. Plain small
   text under a button reads as an error on kraft (Lawrence, 2026-10-03), so it
   is a framed note with a check, wherever the page places it. The /login copy
   sits in the template's .wp-passwordless-login box, whose own border is ~9%
   gray and invisible on kraft; this frame replaces it. */
[data-ms-sent-msg].ms-on{display:flex!important;flex-direction:row;align-items:flex-start;gap:12px;box-sizing:border-box;width:100%;margin:16px 0;padding:16px 20px;
  border:1px solid rgba(34,31,32,.35);background:rgba(255,255,255,.3);color:#221f20;text-align:left;
  font-family:gotham,"Gotham",Arial,sans-serif;font-size:14px;font-weight:400;line-height:22px}
[data-ms-sent-msg].ms-on::before{content:"\2713";flex:none;width:22px;height:22px;border-radius:50%;background:#1c2f3a;color:#e3d7ca;
  font-size:12px;font-weight:700;line-height:22px;text-align:center}
[data-ms-sent-msg].ms-on > .wp-passwordless-login{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;text-align:left}
[data-ms-sent-msg].ms-on :is(div,p){font-size:14px;line-height:22px;color:#221f20;margin:0}
[data-ms-sent-msg].ms-on a{color:#221f20;text-decoration:underline;text-underline-offset:.2em}
[data-ms-sent-msg].ms-on [class^="space-"]{height:8px;min-height:0}

[data-ms-section]:has([data-ms-section-form].ms-on > .item-input-group [data-ms-name="city"]){grid-column:1/-1}
[data-ms-section-form].ms-on:has(> .item-input-group [data-ms-name="city"]){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:end;max-width:720px}
[data-ms-section-form].ms-on:has(> .item-input-group [data-ms-name="city"]) > *{grid-column:1/-1;justify-self:start;margin:0}
[data-ms-section-form].ms-on:has(> .item-input-group [data-ms-name="city"]) > .item-input-group{justify-self:stretch;min-width:0}
[data-ms-section-form].ms-on > .item-input-group:has([data-ms-name="address"]){grid-column:span 4}
[data-ms-section-form].ms-on > .item-input-group:has([data-ms-name="address-2"]){grid-column:span 2}
[data-ms-section-form].ms-on > .item-input-group:has([data-ms-name="city"]){grid-column:span 3}
[data-ms-section-form].ms-on > .item-input-group:has([data-ms-name="state"]){grid-column:span 2}
[data-ms-section-form].ms-on > .item-input-group:has([data-ms-name="zip"]){grid-column:span 1}
@media (max-width:767px){[data-ms-section-form].ms-on:has(> .item-input-group [data-ms-name="city"]) > .item-input-group{grid-column:1/-1}}