/* The Create an account page (D460 layout): one compact card, about 38rem wide. Email on its own line, the two names side by side, the company and country side by side, then the way of joining as a segmented
   control (three radio buttons), then only the part the chosen way needs. Under 40rem everything is one column. The store's own inputs, colours and fonts (store.css, tokens.css) are used as they are. */
.card.join { max-width: 38rem; margin: 1.5rem auto; }
.join form { display: grid; gap: .7rem; }
.join label { margin: 0; }
.join input[type=text], .join input[type=email], .join select, .join textarea { display: block; width: 100%; min-height: 2.6rem; margin-top: .25rem; }
.join textarea { min-height: 4.5rem; }
.join .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.join .pair > label { min-width: 0; }
.join label.half { max-width: 50%; }
.join fieldset { margin: 0; min-width: 0; }
.join .ways { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.join .way-link { background: none; border: 0; padding: .2rem 0; font: inherit; color: var(--accent-tx); cursor: pointer; text-align: left; }
.join .way-link::before { content: "\25B8"; display: inline-block; width: 1.1em; }
.join .way-link[aria-expanded="true"]::before { content: "\25BE"; }
.join .way-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.join .muted { margin: .3rem 0 0; }
.join .part { border: 1px solid var(--rule); border-radius: 6px; padding: .7rem .8rem; margin-top: .6rem; display: grid; gap: .6rem; }
.join [hidden] { display: none !important; }
.join .why summary, .join .note-box summary { cursor: pointer; color: var(--accent-tx); }
.join .note-box { margin: 0; }
.join .note-box[open] summary { margin-bottom: .5rem; }
.join .check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.join .check input { margin-top: .3rem; }
.join .check.small { font-size: .9rem; color: var(--ink-2); }
.join .fine { font-size: .85rem; margin: -.4rem 0 0 1.55rem; }
.join button.primary { justify-self: start; }
.join #code-form { display: grid; gap: .7rem; max-width: 24rem; }
@media (max-width: 40rem) {
  .join .pair { grid-template-columns: 1fr; }
  .join label.half { max-width: none; }
  .join button.primary { justify-self: stretch; }
}