/* Help guides (/help on the platform) and the club app's install page and poster (/app, /app-poster on club hosts). */
.help-hero, .help-head { padding-top: var(--s-7); padding-bottom: var(--s-5); }
.help-hero > *, .help-head > * { max-width: 860px; }
.help-hero .lead, .help-head .lead { max-width: 640px; }
.help-head .crumbs a { color: var(--text-2); }
.help-index { display: grid; gap: var(--s-4); padding-bottom: var(--s-8); }
.help-index > h2 { font-size: 20px; }
.help-index > h2 { margin: var(--s-4) 0 0; }
.help-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.help-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-fast); }
.help-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.help-card > span:last-child { display: grid; gap: 4px; min-width: 0; }
.help-card strong { font: 700 17px/1.3 var(--font-display); }
.help-card-go { color: var(--brand); font-weight: 600; margin-top: 4px; }
:root[data-mode="light"] .help-card-go { color: var(--brand-on-light); }
.help-card-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); }
.help-card-ic .icon { width: 22px; height: 22px; }

.help-layout { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); }
@media (min-width: 980px) { .help-layout { grid-template-columns: 220px minmax(0, 760px); } }
.help-toc { align-self: start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.help-toc ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.help-toc a { color: var(--text-2); }
@media (min-width: 980px) { .help-toc { position: sticky; top: 88px; } }
@media (max-width: 979px) { .help-toc ol { columns: 2; display: block; } .help-toc li { margin-bottom: 6px; break-inside: avoid; } }
.help-body { min-width: 0; display: grid; gap: var(--s-6); }
.help-body section { scroll-margin-top: 90px; }
.help-body h2 { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--font-display); margin: 0 0 var(--s-3); }
.help-body p { line-height: 1.6; }
.help-body a, .club-app a { color: var(--brand); }
:root[data-mode="light"] .help-body a, :root[data-mode="light"] .club-app a { color: var(--brand-on-light); }

.help-steps { list-style: none; counter-reset: hs; margin: 0; padding: 0; display: grid; gap: 14px; }
.help-steps > li { counter-increment: hs; position: relative; padding-left: 46px; line-height: 1.55; font-size: 16px; }
.help-steps > li::before { content: counter(hs); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font: 800 15px/1 var(--font-display); }
.help-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.55; }
.help-list li::marker { color: var(--brand); }

.help-shot { margin: 14px 0 4px; }
.help-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 70%); background: var(--surface-2); }
.help-shot.is-phone img { max-width: 280px; border-radius: 28px; border: 6px solid #0b0d12; }
.help-shot figcaption { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.help-shots { display: flex; flex-wrap: wrap; gap: 20px; }
.help-shots .help-shot { flex: 1 1 220px; max-width: 280px; }

.help-tip { margin-top: var(--s-4); padding: 14px 16px; border-radius: var(--r-md); border-left: 4px solid var(--brand); background: color-mix(in oklab, var(--brand) 9%, var(--surface)); }
.help-tip p { margin: 6px 0 0; }
.help-faq { display: grid; gap: 8px; }
.help-faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.help-faq summary { cursor: pointer; padding: 14px 16px; min-height: 44px; font-weight: 700; }
.help-faq details p { margin: 0; padding: 0 16px 14px; }

.help-videos h2 { margin-bottom: var(--s-3); }
.help-video-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.help-video { display: grid; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; }
.help-video-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.help-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.help-video-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / 55%); color: #fff; }
.help-video-body { display: grid; gap: 4px; padding: 12px 14px; }
.help-more { display: grid; gap: var(--s-4); }
.help-ask { margin-top: var(--s-4); }
.help-aside { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }

/* /app on a club host */
.club-app { display: grid; gap: var(--s-4); max-width: 800px; padding-top: var(--s-6); padding-bottom: var(--s-8); }
.club-app-hero { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.club-app-hero .h1 { margin: 2px 0 6px; }
.club-app-hero .lead { margin: 0; }
.club-app-icon { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 14px 30px -14px rgb(0 0 0 / 70%); background: var(--surface-2); }
@media (max-width: 520px) { .club-app-hero { grid-template-columns: 72px 1fr; } .club-app-icon { width: 72px; height: 72px; border-radius: 18px; } }
.club-app-install { justify-self: start; gap: 8px; min-height: 52px; }
.club-app-install .icon { width: 20px; height: 20px; }
.club-app-ways { display: grid; gap: 12px; }
.club-app-share { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--brand); vertical-align: middle; }
.club-app-qr { width: 180px; padding: 8px; background: #fff; border-radius: 12px; }
.club-app-qr svg { display: block; width: 100%; height: auto; }
.club-app [hidden] { display: none !important; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* /app-poster: A4, the club's colours, prints edge to edge */
.app-poster-page { background: var(--bg); }
.poster-tools { display: flex; justify-content: space-between; gap: 12px; max-width: 210mm; margin: 16px auto 0; padding: 0 16px; }
.poster { box-sizing: border-box; width: min(210mm, calc(100vw - 32px)); aspect-ratio: 210 / 297; margin: 16px auto 32px; padding: clamp(18px, 6%, 56px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(8px, 2.2%, 22px);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--brand) 30%, var(--surface)) 0%, var(--surface) 62%); color: var(--text);
  border-top: 12px solid var(--brand); border-radius: 6px; box-shadow: 0 30px 80px -40px rgb(0 0 0 / 80%); container-type: inline-size; }
.poster-head { display: flex; align-items: center; gap: 12px; }
.poster-logo { display: inline-grid; width: 9cqi; height: 9cqi; }
.poster-logo img, .poster-logo svg { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.poster-club { font: 800 4.2cqi/1.1 var(--font-display); }
.poster-h { margin: 2% 0 0; font: 900 9cqi/1.02 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.poster-sub { margin: 0; font: 700 4.6cqi/1.2 var(--font-body); color: var(--brand); }
:root[data-mode="light"] .poster-sub { color: var(--brand-on-light); }
.poster-qr { width: 52cqi; padding: 3cqi; background: #fff; border-radius: 4cqi; box-shadow: 0 0 0 1.2cqi var(--brand); }
.poster-qr svg { display: block; width: 100%; height: auto; }
.poster-url { margin: 0; font-size: 3.4cqi; color: var(--text-2); word-break: break-all; }
.poster-benefits { margin: 0; font: 600 3.4cqi/1.35 var(--font-body); }
.poster-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqi; font: 600 3.1cqi/1.3 var(--font-body); }
.poster-steps li { padding: 1.6cqi 3cqi; border-radius: 2cqi; background: color-mix(in oklab, var(--brand) 14%, var(--surface-2)); }
.poster-foot { margin-top: auto; opacity: .8; }
.poster-foot .wordmark-img { height: 4cqi; width: auto; }
@media print {
  @page { size: A4; margin: 0; }
  .no-print, .skip, .backdrop, .app-dock, .app-tabs, .app-ptr { display: none !important; }
  body, .app-poster-page { background: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .poster { width: 210mm; height: 297mm; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; }
}