/* 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: var(--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: var(--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; }

/* The top half is the app's picture, fading down into dark with the pitch
   on it, the way the app's own hero does. */
#membership-join#membership-join .membership-join__art {
    position: relative !important; flex: none !important; height: 46vh !important; min-height: 300px !important; max-height: 440px !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important;
    background-color: #111214 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; overflow: hidden !important;
}
#membership-join#membership-join .membership-join__art::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.82) 100%) !important; }
#membership-join#membership-join .membership-join__art.is-blank::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%) !important; }
#membership-join#membership-join .membership-join__art-initial { position: absolute !important; right: -6px !important; top: 40px !important; font-size: 220px !important; line-height: 1 !important; font-weight: 800 !important; color: rgba(255, 255, 255, 0.07) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.07) !important; pointer-events: none !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 {
    position: relative !important; z-index: 1 !important; 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__bar-spacer { justify-self: end !important; }
/* The same switch as the login sheet, so the two read as one surface. */
#membership-join#membership-join .membership-join__tabs { flex: none !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; margin: 14px 18px 0 !important; padding: 4px !important; border-radius: 999px !important; background: #EFEFEB !important; }
#membership-join#membership-join .membership-join__tab, #membership-join#membership-join .membership-join__tab:disabled { height: 38px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer; opacity: 1 !important; }
#membership-join#membership-join .membership-join__tab.is-on { background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; box-shadow: 0 6px 14px -8px rgba(17, 18, 20, 0.5) !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: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; cursor: pointer;
}
#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: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; }

#membership-join#membership-join .membership-join__body { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 0 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 .fas { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; font-weight: 900 !important; }
#membership-join#membership-join .membership-join__identity { position: relative !important; z-index: 1 !important; padding: 0 18px 16px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#membership-join#membership-join .membership-join__identity-name { display: flex !important; align-items: center !important; gap: 10px !important; font-size: calc(34px * var(--identity-scale, 1)) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
#membership-join#membership-join .membership-join__identity-name i { font-size: 18px !important; color: #22C55E !important; -webkit-text-fill-color: #22C55E !important; }
#membership-join#membership-join .membership-join__identity-role { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 6px !important; font-size: 13px !important; font-weight: 500 !important; }
#membership-join#membership-join .membership-join__identity-role span { color: rgba(255, 255, 255, 0.82) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important; }
#membership-join#membership-join .membership-join__identity-role i { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.5) !important; display: inline-block !important; }
#membership-join#membership-join .membership-join__identity-rule { height: 1px !important; margin: 12px 0 !important; border: 0 !important; background: rgba(255, 255, 255, 0.22) !important; }
#membership-join#membership-join .membership-join__identity-org { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; font-size: 13px !important; font-weight: 500 !important; }
#membership-join#membership-join .membership-join__identity-org span { color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }
#membership-join#membership-join .membership-join__identity-place { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
#membership-join#membership-join .membership-join__identity-place i { font-size: 12px !important; color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }
#membership-join#membership-join .membership-join__hero { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px !important; margin: 0 !important; padding: 18px 0 0 !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: 0 2px 0 !important; font-size: 26px !important; line-height: 1.1 !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: 10px 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__count > span { 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; }

/* Google fills the name in; the PIN is still theirs to pick. */
#membership-join#membership-join .membership-join__google,
#membership-join#membership-join .membership-join__tiktok { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid #E3E3DE !important; border-radius: 16px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04) !important; text-decoration: none !important; cursor: pointer; }
#membership-join#membership-join .membership-join__google:active,
#membership-join#membership-join .membership-join__tiktok:active { background: #F4F4F1 !important; }
#membership-join#membership-join .membership-join__google.is-done,
#membership-join#membership-join .membership-join__tiktok.is-done { background: #F4F4F1 !important; border-color: #E3E3DE !important; pointer-events: none !important; }
#membership-join#membership-join .membership-join__google span,
#membership-join#membership-join .membership-join__tiktok span { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.01em !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__google svg,
#membership-join#membership-join .membership-join__tiktok svg { width: 20px !important; height: 20px !important; flex: none !important; filter: none !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#4285F4"] { fill: #4285F4 !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#34A853"] { fill: #34A853 !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#FBBC05"] { fill: #FBBC05 !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#EA4335"] { fill: #EA4335 !important; }
#membership-join#membership-join .membership-join__or { display: flex !important; align-items: center !important; gap: 10px !important; margin: -2px 0 !important; }
#membership-join#membership-join .membership-join__or i { flex: 1 1 auto !important; height: 1px !important; background: #EAEAE6 !important; display: block !important; }
#membership-join#membership-join .membership-join__or span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

/* The account fields, the same filled pills as the login sheet. */
#membership-join#membership-join .membership-join__form { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 18px !important; }
#membership-join#membership-join .membership-join__image-row { position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 10px 12px 10px 10px !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; cursor: pointer; overflow: hidden !important; }
#membership-join#membership-join .membership-join__image-row .membership-join__tile { border-radius: 50% !important; width: 46px !important; height: 46px !important; flex: 0 0 46px !important; }
#membership-join#membership-join .membership-join__image-copy { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
#membership-join#membership-join .membership-join__image-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__image-copy small { font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__image-cta { flex: none !important; height: 32px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; background: #111214 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#membership-join#membership-join .membership-join__image-row input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; margin: 0 !important; padding: 0 !important; }
#membership-join#membership-join .membership-join__pin-row { display: flex !important; gap: 10px !important; }
#membership-join#membership-join .membership-join__field { display: flex !important; flex-direction: column !important; gap: 6px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
#membership-join#membership-join .membership-join__label { margin: 0 0 0 4px !important; 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__field input {
    width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 16px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; background-color: #F4F4F1 !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #111214 !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
#membership-join#membership-join .membership-join__field input:focus { box-shadow: 0 0 0 1.5px #111214 inset !important; }
#membership-join#membership-join .membership-join__field input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; font-weight: 500 !important; }
#membership-join#membership-join .membership-join__field input[type="password"] { letter-spacing: 0.18em !important; }
#membership-join#membership-join .membership-join__field input:disabled { opacity: 0.6 !important; }
#membership-join#membership-join .membership-join__tile { position: relative !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; margin: 0 !important; border-radius: 16px !important; border: 1.5px dashed #D6D6D1 !important; background: #F4F4F1 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; }
#membership-join#membership-join .membership-join__tile svg { width: 18px !important; height: 18px !important; fill: none !important; }
#membership-join#membership-join .membership-join__tile svg * { fill: none !important; stroke: #63635F !important; }
#membership-join#membership-join .membership-join__tile img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#membership-join#membership-join .membership-join__tile img[hidden] { display: none !important; }
#membership-join#membership-join .membership-join__tile input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; margin: 0 !important; padding: 0 !important; }
#membership-join#membership-join .membership-join__form-note { margin: -2px 4px 0 !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.45 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !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; }