/* The participant one-pager. Deliberately larger and calmer than /guide: it is
   read once, on a phone, by someone who did not choose to be here. */
.join{max-width:760px}
.join article{max-width:none}
.lede-j{font-size:17px !important; color:var(--dim); margin:0 0 26px; line-height:1.7}

/* The organiser's own code, when they send /join?code=THEIRS */
.codecard{
  display:flex; flex-direction:column; gap:4px; margin:0 0 26px;
  padding:16px 20px; border-radius:10px;
  background:rgba(63,185,80,.07); border:1px solid rgba(63,185,80,.28);
}
.codelabel{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--live)}
.codeval{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:23px; letter-spacing:.08em; color:var(--ink); word-break:break-all;
}
.codehint{font-size:12.5px; color:var(--faint)}

/* Bigger step numbers — this is the only thing on the page that matters. */
.steps.big > li{padding:0 0 30px 50px; font-size:15.5px}
.steps.big > li::before{width:31px; height:31px; font-size:13.5px}

/* An honest illustration of the Garmin Connect settings screen. Styled as
   obviously ours rather than mocked up to look like a real screenshot —
   Garmin's layout differs by phone and app version, and a fake screenshot
   that does not match what someone sees is worse than none. */
.youll-see{margin:16px 0 10px !important; color:var(--ink) !important; font-weight:500}
.settings-mock{
  border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:#0d1117; margin:0 0 8px;
}
/* Garmin's screen has a title bar with Save at the right. People miss Save, so
   it is drawn rather than only mentioned. */
.smock-bar{
  display:flex; align-items:center; justify-content:center; position:relative;
  padding:11px 14px; background:#12161d; border-bottom:1px solid var(--line);
}
.smock-title{font-size:13.5px; font-weight:600; color:var(--ink)}
.smock-save{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--ink); background:#232935;
  border:1px solid #39424f; border-radius:999px; padding:3px 12px;
}
.srow{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:13px 15px; border-bottom:1px solid var(--line);
}
.srow:last-child{border-bottom:none}
.sname{font-size:14.5px; color:var(--ink); font-weight:500}
.sval{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  color:var(--dim); text-align:right; align-self:center; word-break:break-all;
}
.sval.toggle{
  color:var(--live); background:rgba(63,185,80,.12);
  border:1px solid rgba(63,185,80,.28); border-radius:999px; padding:2px 10px;
  font-family:inherit; font-size:11.5px; letter-spacing:.05em;
}
.sdesc{grid-column:1 / -1; font-size:12.5px; color:var(--faint); line-height:1.55}
.sval.dim{color:var(--faint)}
/* Garmin does not show the prompt text on that screen, so the explanations sit
   outside the illustration rather than being drawn into a screen that has none. */
.field-notes{margin:0 0 18px !important; padding-left:20px; font-size:13.5px !important}
.field-notes li{margin-bottom:6px; color:var(--dim)}
.field-notes b{color:var(--ink); font-weight:500}
.mockcap{font-size:12.5px !important; color:var(--faint) !important; margin:0 0 18px !important}
.foot-link{margin-top:34px !important}

/* ---------- video ----------
   A click-to-load facade, not a live iframe. Nothing is requested from Vimeo
   until someone presses play, so a page that also carries our privacy policy
   does not quietly hand every visitor to a third party — and the embed then
   loads with dnt=1. It also keeps the page weight where it is. */
.video{margin:0 0 26px}
.video-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:#0d1117;
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-facade{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; cursor:pointer; border:0; padding:20px;
  background:radial-gradient(ellipse at 50% 40%, #182030 0%, #0d1117 70%);
  color:var(--dim); font:inherit; text-align:center;
}
.video-facade:hover{color:var(--ink)}
.video-facade .play{
  width:60px; height:60px; border-radius:50%;
  border:1px solid var(--line); background:#1b2029;
  display:grid; place-items:center; transition:all .15s;
}
.video-facade:hover .play{background:#232935; border-color:#39424f; transform:scale(1.04)}
.video-facade .play svg{width:22px; height:22px; margin-left:3px; fill:var(--ink)}
.video-facade .vtitle{font-size:15px; color:var(--ink); font-weight:500}
.video-facade .vnote{font-size:12.5px; color:var(--faint); max-width:38ch; line-height:1.55}
.video-cap{margin:9px 0 0; font-size:12.5px; color:var(--faint)}

@media (max-width:600px){
  .lede-j{font-size:16px !important}
  .steps.big > li{padding-left:42px; font-size:15px}
  .codeval{font-size:20px}
  .srow{grid-template-columns:1fr; padding:12px 13px}
  /* Stacked, the value must not stretch — a full-width "on" pill reads as a
     button rather than as the state of a switch. */
  .sval{text-align:left; justify-self:start}
  .video-facade .play{width:52px; height:52px}
}