/* The Join chooser (cms JoinChooser, 2026-10-07): a card for each thing a
   person can join, opening that product's own form. Loaded by the chooser
   only. Six cards make two even rows of three; tablets two, phones one.
   Every selector starts with `html`: block-loaded CSS loads before site.css
   and would lose ties to it. */
html .join-cards{list-style:none;margin:var(--space-8,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5,20px)}
@media (max-width:980px){html .join-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html .join-cards{grid-template-columns:minmax(0,1fr)}}
html .join-cards > li{display:flex;min-width:0}
html .join-card{display:flex;flex:1;flex-direction:column;gap:10px;padding:28px;border-radius:var(--radius-md,16px);color:inherit;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
html .join-card:hover{border-color:var(--plum,#35004f)}
html .join-card:focus-visible{outline:3px solid var(--lime,#8fc641);outline-offset:3px}
html .join-card-title{font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1.25;color:var(--plum-dark,#260033)}
html .join-card-text{color:var(--copy,#625b7f);line-height:1.55}
html .join-card .arrow{margin-top:auto;padding-top:8px;gap:8px}
html .join-note{margin:var(--space-6,24px) 0 0;color:var(--copy,#625b7f)}
/* The way back on a line of its own, above the form's eyebrow. */
html .join-back{display:flex;width:fit-content;align-items:center;gap:8px;min-height:44px;margin-bottom:8px;font-weight:700;color:var(--primary)}
html .join-back::before{content:"\2190"}
@media (prefers-reduced-motion:reduce){html .join-card{transition:none}}