/* "We're almost full! 4 of 200 spots left." (MH, Nov 5 2026): a thin bar under
   the Join button on /join, /start and the home Plan section. Built by
   shared/js/almost-full.js, which holds the numbers. Same type as the /trial
   spots line: Flapjack caps, dark teal words, orange for the spots. */
.afull { flex: 0 0 100%; width: 100%; margin: 4px 0 0; text-align: center; }
.afull__bar { position: relative; height: 6px; width: 82%; margin: 0 auto; border-radius: 6px;
  background: #E4D2C5; overflow: hidden; }
.afull__f { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #344C4F; overflow: hidden; }
.afull__f::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.afull__e { position: absolute; top: 0; bottom: 0; right: 0; width: var(--afull-tip, 2%); background: #F46C37;
  border-radius: 0 6px 6px 0; opacity: 0; }
.afull__t { margin: 9px 0 0; white-space: nowrap; color: #344C4F; font-family: var(--font-display);
  font-size: clamp(11.5px, 3.7vw, 15px); line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.afull__t b { color: #F46C37; font-weight: normal; display: inline-block; }
.afull__n { font-variant-numeric: tabular-nums; }
/* The fill runs once the bar is on screen (the script adds .go). */
.afull.go .afull__f { animation: afull-fill 1.6s cubic-bezier(.16,.8,.3,1) .4s both; }
.afull.go .afull__f::after { animation: afull-shine 3.2s ease-in-out 2.2s infinite; }
.afull.go .afull__e { animation: afull-pop .3s 1.9s both, afull-blink 2.4s ease-in-out 2.2s infinite; }
.afull.go .afull__t b { animation: afull-blink 2.4s ease-in-out 2.2s infinite; }
@keyframes afull-fill { from { width: 0; } to { width: var(--afull-fill, 98%); } }
@keyframes afull-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes afull-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes afull-shine { 0% { left: -30%; } 60%, 100% { left: 100%; } }
/* Still for reduced motion: the final state, no blink or shine. */
@media (prefers-reduced-motion: reduce) {
  .afull .afull__f, .afull.go .afull__f { animation: none; width: var(--afull-fill, 98%); }
  .afull .afull__e, .afull.go .afull__e { animation: none; opacity: 1; }
  .afull .afull__f::after, .afull.go .afull__f::after, .afull.go .afull__t b { animation: none; }
}
/* Phones: the button sits in the .mbuy row under the card, so the bar wraps onto its own line there. */
.mbuy { flex-wrap: wrap; }
.plan__cta:not(.mbuy) > .afull { flex: none; }
/* Words first, then the bar under them (MH, Nov 5, arrangement 2). */
.afull { display: flex; flex-direction: column-reverse; gap: 9px; }
.afull .afull__t { margin: 0; }
/* Desktop (MH, Nov 5, option A): the card stays as it is; a smaller one-line
   "Join the Club" heading and tighter gaps bring Ben's refund line above the
   fold on a laptop. Same on /join, /start and the home Plan section. */
@media (min-width: 961px) {
  /* room under the header (MH Nov 11: it sat right under the nav) */
  html body main > section.join:first-of-type { padding-top: clamp(44px, 4vw, 60px); }
  html body main .join .join__h br.br-mb { display: none; }
  html body main .join h1, html body main .join .join__h { font-size: clamp(60px, 5.6vw, 84px); max-width: none; }
  html body main .join .plans { margin-top: 32px; }
  html body main .join .refund--plans { margin-top: 30px; }
  html body main .join .refund--plans .refund__ben { width: 120px; }
}
/* No "Monthly" label any more (MH, Nov 5: "$100/mo" already says it), so on
   phones and tablets the price takes the label's place on the left. */
@media (max-width: 960px) {
  html body .plans--one .plan__price { grid-column: 1 / -1; justify-self: center; }
  html body .plans--one .plan__billing { grid-column: 1 / -1; text-align: center; }
  html body .plans--one .plan { padding-right: 18px !important; }
}
/* Simpler card (MH, Nov 5): no "Everything included" tab; on desktop the
   price, the cancel line, the button and the spots line sit on an even
   rhythm with the same space above the price as below the bar. */
@media (min-width: 961px) {
  html body .plans--one .plan { display: flex; flex-direction: column; align-items: stretch; text-align: center;
    padding: 40px 40px 40px !important; }
  html body .plans--one .plan__price { margin: 0; line-height: .9; }
  html body .plans--one .plan__billing { margin: -18px 0 0; }
  html body .plans--one .plan__cta { margin: 0; padding-top: 28px; gap: 22px; }
  html body .plans--one .plan { padding-top: 34px !important; }
}
/* Phones and tablets (MH, Nov 5): the same flow as desktop inside one card,
   price, cancel line, button, then the spots line and bar, all centred. The
   separate button row under the card goes. */
@media (max-width: 960px) {
  html body .plans--one .plan { display: flex !important; flex-direction: column; align-items: stretch; text-align: center;
    padding: 30px 20px 26px !important; }
  html body .plans--one .plan__price { margin: 0; font-size: clamp(64px, 20vw, 84px); line-height: .9; justify-self: auto; }
  html body .plans--one .plan__price .per { font-size: 16px; }
  html body .plans--one .plan__billing { margin: -8px 0 0; }
  html body .plans--one .plan__billing--live .plan__tag { font-size: 16px; margin: 0; }
  html body .plans--one .plan__cta:not(.mbuy) { display: flex !important; margin: 0; padding-top: 22px; gap: 18px; }
  html body .plans--one .plan__cta:not(.mbuy) a.plan__buy { min-height: 54px; font-size: 18px; }
  html body .plans--one + .mbuy { display: none !important; }
}
/* Phones: the spots line fits the card; very narrow screens put the spots on a second line. */
@media (max-width: 960px) {
  html body .plans--one .afull__t { font-size: clamp(11px, 3.3vw, 15px); letter-spacing: .03em; }
}
@media (max-width: 370px) {
  html body .plans--one .afull__t b { display: block; }
}