/* The join page, in the composer look the owner sheets share: paper, white
   cards, mono eyebrows, one black button. Doubled id and !important
   throughout, because the page under it repaints anything fixed. */
#membership-join#membership-join {
    position: fixed !important; inset: 0 !important; z-index: 2147482000 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    color-scheme: light !important;
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#membership-join#membership-join[hidden] { display: none !important; }
#membership-join#membership-join * { box-sizing: border-box; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#membership-join#membership-join button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; }
html.membership-join-open, body.membership-join-open { overflow: hidden !important; }

/* Three columns with equal sides, so the label sits on the page's centre line
   whatever the two buttons beside it measure. */
#membership-join#membership-join .membership-join__bar {
    flex: none !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px !important;
}
#membership-join#membership-join .membership-join__close { justify-self: start !important; }
#membership-join#membership-join .membership-join__bar-title { justify-self: center !important; text-align: center !important; }
#membership-join#membership-join .membership-join__have { justify-self: end !important; text-align: right !important; }
#membership-join#membership-join .membership-join__close, #membership-join#membership-join .membership-join__have {
    height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#membership-join#membership-join .membership-join__have { font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__bar-title { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }

#membership-join#membership-join .membership-join__body { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 6px 18px 24px !important; }
/* The pitch leads, with the app's picture beside it as a circle: the page is
   about joining this app, and its face is the only chrome the top needs. */
#membership-join#membership-join .membership-join__hero { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin-top: 10px !important; }
#membership-join#membership-join .membership-join__hero-copy { flex: 1 1 auto !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__avatar { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; border-radius: 50% !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.06), 0 0 0 1px #EAEAE6 !important; }
#membership-join#membership-join .membership-join__avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#membership-join#membership-join .membership-join__avatar span { font-size: 14px !important; font-weight: 800 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#membership-join#membership-join .membership-join__app-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__app-copy strong { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#membership-join#membership-join .membership-join__eyebrow { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#membership-join#membership-join .membership-join__section { display: block !important; margin: 22px 4px 8px !important; }
#membership-join#membership-join .membership-join__pitch { margin: 4px 2px 0 !important; font-size: 28px !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__count { display: flex !important; align-items: center !important; gap: 10px !important; margin: 14px 2px 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__faces { display: inline-flex !important; }
#membership-join#membership-join .membership-join__faces i { width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 2px solid #FBFBF9 !important; background: #DCE3E6 !important; margin-left: -6px !important; display: block !important; }
#membership-join#membership-join .membership-join__faces i:first-child { margin-left: 0 !important; background: #E4DFD3 !important; }
#membership-join#membership-join .membership-join__faces i:nth-child(3) { background: #EADCD6 !important; }

#membership-join#membership-join .membership-join__perks { display: flex !important; flex-direction: column !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; }
#membership-join#membership-join .membership-join__perk { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 13px 14px !important; }
#membership-join#membership-join .membership-join__perk + .membership-join__perk { border-top: 1px solid #EFEFEB !important; }
#membership-join#membership-join .membership-join__perk-mark { flex: 0 0 26px !important; width: 26px !important; height: 26px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(15, 191, 164, 0.14) !important; color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; font-size: 12px !important; font-weight: 800 !important; }
#membership-join#membership-join .membership-join__perk-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__perk-copy strong { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__perk-copy small { font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

#membership-join#membership-join .membership-join__table { border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; }
#membership-join#membership-join .membership-join__row { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; padding: 0 14px !important; }
#membership-join#membership-join .membership-join__row + .membership-join__row { border-top: 1px solid #EFEFEB !important; }
#membership-join#membership-join .membership-join__row > span { font-size: 13px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__row > span:not(:first-child) { text-align: center !important; }
#membership-join#membership-join .membership-join__row--head { min-height: 36px !important; background: #F7F7F4 !important; }
#membership-join#membership-join .membership-join__row--head > span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 8.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#membership-join#membership-join .membership-join__yes { color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; font-weight: 800 !important; }
#membership-join#membership-join .membership-join__no { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; }

#membership-join#membership-join .membership-join__plan { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px !important; border: 1.5px solid #111214 !important; border-radius: 18px !important; background: #FFFFFF !important; }
#membership-join#membership-join .membership-join__plan-copy { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__plan-copy strong { font-size: 14px !important; font-weight: 800 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__plan-copy small { font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__plan-price { display: flex !important; align-items: baseline !important; gap: 4px !important; flex: none !important; }
#membership-join#membership-join .membership-join__plan-price b { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__plan-price small { font-size: 11px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

#membership-join#membership-join .membership-join__foot { flex: none !important; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, rgba(251, 251, 249, 0), #FBFBF9 30%) !important; }
#membership-join#membership-join .membership-join__cta, #membership-join#membership-join .membership-join__cta:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}
#membership-join#membership-join .membership-join__cta:disabled { opacity: 0.55 !important; }
#membership-join#membership-join .membership-join__fine { margin: 9px 0 0 !important; text-align: center !important; font-size: 11px !important; font-weight: 500 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }