/* "Join the pre-launch test" — the block at the end of every story (and the entry page's jump link to it).
   Its own file, linked after style.css, so the story pages' stylesheet stays as it is: a restyle of style.css lands without touching this.
   Every colour is read from the stylesheet's own variables (--accent, --ink, --muted, --line, --paper, and --panel where a restyle defines it), so the block follows the
   page's colours. Two buttons and a QR code, no script: the Android choice is a <details> disclosure, which works without one. */

.join{margin:56px 0 8px;padding:40px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;background:var(--panel,#f4f7fc);border:1px solid var(--line);border-radius:14px}
.join .small-label{margin:0 0 10px}
.join h2{margin:0 0 14px;line-height:1.15}
.join p{margin:0 0 14px;color:var(--muted)}
.join-copy>p:not(.small-label){max-width:34em}
.join-ways{display:flex;flex-wrap:wrap;gap:22px 28px;margin:22px 0 14px}
.join-way{flex:1 1 220px;max-width:300px}
.join-way p{margin:8px 0 0;font-size:15px;line-height:1.5}

.join-btn{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:0 22px;border:2px solid var(--accent);border-radius:6px;font:inherit;font-weight:700;font-size:16px;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.join-btn.solid{background:var(--accent);color:#fff}
.join-btn.solid:hover{filter:brightness(.92)}
.join-btn.line{background:transparent;color:var(--accent)}
.join-btn.line:hover{background:var(--accent);color:#fff}
.join-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Join on Android: one button that opens the two ways in. */
.join-android>summary{list-style:none}
.join-android>summary::-webkit-details-marker{display:none}
.join-android>summary::after{content:"\25BE";margin-left:10px;font-size:.9em}
.join-android[open]>summary::after{content:"\25B4"}
.join-options{display:grid;gap:8px;margin-top:10px}
.join-or{text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.join-qr{margin:0;justify-self:center;text-align:center}
.join-qr img{display:block;width:min(100%,220px);height:auto;margin:0 auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.join-qr figcaption{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.45;max-width:16em}

.join-contact{font-size:15px}
.join-contact a{color:inherit}

/* The entry page's jump link, under the folio. */
.join-jump{margin:18px 0 0}
.join-jump a{display:inline-block;padding:10px 18px;border:2px solid var(--accent);border-radius:6px;font-weight:700;font-size:15px;text-decoration:none;color:var(--accent)}
.join-jump a:hover{background:var(--accent);color:#fff}

@media(max-width:850px){
  .join{grid-template-columns:1fr;padding:28px;gap:24px}
}
/* A phone cannot scan its own screen, so the code is for the desktop and the printed page. */
@media(max-width:600px){
  .join-qr{display:none}
}