/* ============================================================
   JOIN CARD in the /trial card style (MH Nov 11 2026): teal flag strip,
   big price, orange-check perks list, orange button, spots-left bar,
   then fine print. Used on home, /join and /start (one card, one plan).
   Keeps the old .plan markup and classes so the buy-link and phone
   scripts keep working; this file only restyles them.
   ============================================================ */
.plans.plans--one { display: block; max-width: 440px; margin-inline: auto; }
.plans--one .plan.plan--pick { display: flex; flex-direction: column; grid-row: auto; padding: 0 !important; overflow: hidden; height: auto !important; min-height: 0 !important; text-align: center;
  background: var(--open-3, #FCF9F5); border: 1.5px solid rgba(1,31,35,.14); border-radius: 22px;
  box-shadow: 0 18px 40px -26px rgba(1,31,35,.45); }
.mc__flag { margin: 0; padding: 10px 16px; background: var(--flow-0); color: var(--open-0);
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.mc__body { padding: 24px clamp(20px, 6vw, 34px) 24px; display: flex; flex-direction: column; }
.plans--one .plan__price { margin: 0; font-size: clamp(64px, 40px + 6vw, 96px); line-height: 1; }
.plans--one .plan__billing { margin: 6px 0 0; }
.plans--one .plan__billing--live .plan__tag { margin: 0; font-family: var(--font-body); font-size: 15px; letter-spacing: .04em; color: var(--deep-2); }
.mc__list { list-style: none; padding: 0; margin: 20px auto 22px; display: grid; gap: 10px; width: fit-content; max-width: 100%;
  text-align: left; font-family: var(--font-body); font-size: var(--t-body, 17px); line-height: 1.35; color: var(--deep-1); }
.mc__list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.plans--one .plan__cta { margin: 0; padding: 0; }
.mc__fine { margin: 14px 0 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--deep-2); }
/* phones used to hide the card's own button and show a separate one under it;
   with one card the card's own button is the button everywhere */
.plans--one .plan .plan__cta { display: flex !important; }
.plan__cta.mbuy { display: none !important; }
.plans--one .plan__billing { display: none; } /* "Cancel anytime" now lives in the list */

/* the pages' own .plan rules load after this file; these win so the card matches /trial */
html body .plans--one .plan .mc__body { padding: 26px clamp(20px, 6vw, 34px) 26px !important; }
html body .plans--one .plan .plan__price { margin: 0 !important; }
html body .plans--one .plan .plan__cta { margin: 0 !important; padding: 0 !important; width: 100%; gap: 0; }
html body .plans--one .plan .plan__cta a.plan__buy { width: 100%; max-width: none; margin: 0; min-height: 58px; border-radius: 14px; }
html body .plans--one .plan [data-afull] { margin-top: 16px; }

/* scarcity line under the button: bigger (MH Nov 11) */
html body .plans--one .plan .afull__t { font-size: clamp(16px, 4.4vw, 19px) !important; letter-spacing: .04em; white-space: normal !important; line-height: 1.25; text-align: center; }
html body .plans--one .plan .afull__t b { display: block; }

/* ---------- bullets: a hand-drawn box ticked in orange (MH Nov 11, replaced the chairs) ---------- */
.mc__list li { grid-template-columns: 30px 1fr; }
.mc__list li::before { content: ""; display: block; width: 28px; height: 28px; justify-self: center; background: center / contain no-repeat url("/shared/svg/checks/marker-box.svg"); }

/* ---------- lighter card, a taped paper note like the review cards (MH Nov 11) ---------- */
/* shared: a calmer button, no orange glow, shorter, smaller label */
html body .plans--one .plan .plan__cta a.plan__buy {
  min-height: 48px; font-size: 18px; letter-spacing: .12em; border-radius: 10px; padding: 12px 20px; box-shadow: none; }
html body .plans--one .plan .plan__cta a.plan__buy:hover { box-shadow: none; transform: translateY(-1px); }

/* quieter details: muted /mo, scarcity on one line over a thicker bar */
html body .plans--one .plan__price .per { color: var(--deep-2); }
html body .plans--one .plan .afull__t { font-size: clamp(12px, 3.4vw, 14px) !important; letter-spacing: .05em; white-space: nowrap !important; }
html body .plans--one .plan .afull__t b { display: inline !important; margin-left: .3em; }
html body .plans--one .afull__bar { height: 8px; width: 100%; }
html body .plans--one .plan [data-afull] { margin-top: 20px; }

/* the taped note */
html body .plans--one .plan.plan--pick { overflow: visible; border: 0; border-radius: 10px; transform: rotate(-.8deg) !important;
  box-shadow: 0 1px 2px rgba(1,31,35,.06), 0 10px 26px -14px rgba(1,31,35,.22); }
html body .plans--one .plan.plan--pick::before { content: ""; display: block !important; position: absolute; top: -11px; left: 50%; width: 96px; height: 24px;
  transform: translateX(-50%) rotate(-3deg) !important; background: color-mix(in srgb, var(--ground-1) 70%, transparent) !important; box-shadow: 0 1px 2px rgba(1,31,35,.08) !important;
  border: 0 !important; border-radius: 2px !important; opacity: 1 !important; margin: 0 !important; }

/* /friend: the $50 from the member who sent them, under the price */
.mc__gift { margin: 8px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.4; color: var(--deep-1); text-wrap: balance; }
.mc__gift s { color: var(--deep-2); text-decoration-color: var(--aperitivo-0); text-decoration-thickness: 2px; }
.mc__gift b { color: var(--aperitivo-0); font-weight: 700; }