/* ===========================================================================
   The download gate (/try). A single centered column — nothing to read, one
   thing to do. No client JS on this page, so the error state is driven by
   :target from the /try#error redirect the API route issues.
   =========================================================================== */

.gate { padding-block:100px 40px; max-width:560px; text-align:center;
  display:flex; flex-direction:column; align-items:center; }

.gate .appicon { margin-bottom:36px; }

.gate-eyebrow { font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); font-weight:700; margin-bottom:14px; }
.gate h1 { font-size:clamp(28px,4.4vw,40px); font-weight:700; line-height:1.2; }
.gate .lede { color:var(--ink-mid); font-size:14.5px; margin-top:16px; }

/* Hidden until the server bounces the visitor back to /try#error. */
.gate-error { display:none; margin-top:28px; padding:14px 18px; border-radius:8px;
  border:1px solid #5c2626; background:#1c1214; color:#e8a0a0; font-size:13px;
  text-align:left; }
.gate-error:target { display:block; }

.gate-form { display:flex; flex-direction:column; gap:12px; width:100%;
  max-width:400px; margin-top:32px; }
.gate-input { font-family:var(--mono); font-size:14px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; color:var(--ink);
  padding:14px 16px; width:100%; outline:none; transition:border-color .15s ease; }
.gate-input::placeholder { color:var(--ink-dim); }
.gate-input:focus { border-color:var(--amber-dim); }
.gate-form .btn { width:100%; padding:14px 26px; }

/* The optional marketing tick on the download form. */
.gate-check { display:flex; align-items:flex-start; gap:10px; text-align:left; cursor:pointer;
  font-family:var(--brand-sans); font-size:13px; line-height:1.55; color:var(--ink-mid); }
.gate-check input { width:16px; height:16px; margin:3px 0 0; flex:none; accent-color:var(--amber); cursor:pointer; }

.gate-fine { margin-top:24px; color:var(--ink-dim); font-size:12px; line-height:1.7;
  max-width:400px; }
.gate-fine a { color:var(--ink-mid); text-decoration:underline; }

.gate-alt { margin-top:36px; padding-top:26px; border-top:1px solid var(--line-soft);
  color:var(--ink-dim); font-size:12.5px; width:100%; max-width:400px; }

@media (max-width:480px) {
  .gate { padding-block:64px 20px; }
}

/* Usually invisible (interaction-only); centre it for the times it renders. */
.gate-form .cf-turnstile { display:flex; justify-content:center; margin:2px 0; }
.gate-form .cf-turnstile:empty { margin:0; }

/* The optional note on a beta request. */
.gate-note { resize:vertical; min-height:84px; font-family:var(--mono); line-height:1.6; }

/* ---------- beta chooser: one row per app ----------
   Open betas are checkboxes; a released app links to its download; the rest
   are listed, greyed, as not open yet. The whole row is the click target. */
.gate-apps { border:0; padding:0; margin:0 0 4px; display:grid; gap:8px; text-align:left; }
.gate-app { display:grid; grid-template-columns:20px 44px minmax(0,1fr) auto; align-items:center;
  gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease; }
.gate-app:hover { border-color:var(--ink-dim); text-decoration:none; }
.gate-app:has(input:checked) { border-color:var(--amber-dim); background:var(--panel-2); }
.gate-app:has(input:focus-visible) { outline:2px solid var(--amber); outline-offset:2px; }
.gate-app input { width:18px; height:18px; margin:0; accent-color:var(--amber); cursor:pointer; }
.gate-app img, .gate-app-mark { width:44px; height:44px; border-radius:10px; display:block; }
.gate-app-mark { display:flex; align-items:center; justify-content:center; border:1px solid var(--line-soft);
  background:linear-gradient(145deg,#2a2a30 0%,#101013 78%); }
.gate-app-mark svg { width:26px; height:26px; }
.gate-app-text { min-width:0; }
.gate-app-text b { display:block; font-family:var(--brand-sans); font-weight:500; font-size:15px; }
.gate-app-text small { display:block; color:var(--ink-dim); font-size:11.5px; line-height:1.45; }
.gate-app-state { font-style:normal; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); white-space:nowrap; }
.gate-app-box { width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--teal); }
/* A released app: the row is a link to its own free-download page. */
.gate-app-link { color:inherit; cursor:pointer; }
.gate-app-closed { cursor:default; opacity:.5; }
.gate-app-closed:hover { border-color:var(--line); }
.gate-app-closed .gate-app-state { color:var(--ink-dim); }
@media (max-width:480px) {
  .gate-app { grid-template-columns:20px 40px minmax(0,1fr); }
  .gate-app img, .gate-app-mark { width:40px; height:40px; }
  .gate-app-state { grid-column:3; }
}