/* THE PUBLIC PAGES (SaaS Session 5): /start, its confirmation, /privacy and
   /terms. Served before a sign-in, after chrome.css, so the tokens there
   (--bg, --go, --t2 and the rest) are the same ones the console uses and a
   club signing up meets the product it will be using. No script anywhere
   on these pages; nothing here depends on one. */

body.pub { background:var(--bg); color:var(--t1); font-family:var(--font);
           font-size:15px; line-height:1.5; }
body.pub main { max-width:440px; margin:0 auto; padding:32px 16px 24px; }
body.pub .mark { text-align:center; margin-bottom:18px; }
body.pub h1 { font-family:var(--display); font-weight:800; font-size:34px;
              letter-spacing:.3px; line-height:1.1; margin:0 0 8px;
              overflow-wrap:anywhere; }
body.pub .lede { color:var(--t2); margin-bottom:20px; }
body.pub .small { color:var(--t3); font-size:13px; margin-top:16px; }
body.pub a { color:var(--go); }
body.pub .bad { color:var(--bad); background:rgba(224,75,75,0.10);
                border-radius:10px; padding:10px 12px; margin-bottom:16px;
                font-size:14px; }

body.pub form label { display:block; font-size:13.5px; color:var(--t2);
                      margin-bottom:14px; }
body.pub form label .aside { color:var(--t3); }
body.pub input:not([type=checkbox]) { display:block; width:100%; margin-top:6px;
    background:var(--card); color:var(--t1); font:inherit; font-size:16px;
    border:1.5px solid var(--line2); border-radius:10px; padding:12px;
    outline:none; }
body.pub input:focus { border-color:rgba(255,241,1,0.6);
                       box-shadow:0 0 0 3px rgba(255,241,1,0.12); }
body.pub input[type=file] { padding:10px; font-size:14px; }
body.pub label.tick { display:flex; gap:10px; align-items:flex-start;
                      color:var(--t1); }
body.pub label.tick input { width:22px; height:22px; flex:none; margin-top:1px;
                            accent-color:var(--go); }
/* the honeypot: a field a person never sees and a form-filling bot does */
body.pub label.hp { position:absolute; left:-10000px; width:1px; height:1px;
                    overflow:hidden; }
body.pub button, body.pub a.button { display:block; width:100%; text-align:center;
    background:var(--go); color:#111; border:none; border-radius:10px;
    padding:14px; font:inherit; font-weight:700; font-size:16px;
    cursor:pointer; text-decoration:none; margin-top:6px; }

body.pub footer { max-width:440px; margin:0 auto; padding:8px 16px 40px;
                  color:var(--t3); font-size:12.5px; text-align:center; }
body.pub footer a { color:var(--t2); }

body.pub article.legal h1 { font-size:30px; }
body.pub article.legal h2 { font-size:16px; margin:22px 0 6px; }
body.pub article.legal p, body.pub article.legal li { color:var(--t2);
                                                      margin-bottom:8px; }
body.pub article.legal ul { padding-left:20px; }
body.pub article.legal b { color:var(--t1); }
body.pub article.legal .meta { color:var(--t3); font-size:13px; }

/* ON A PHONE THE FORM IS THE POINT. At full size the pavilion took the
   first 330px of a 812px screen and the first field started below the
   fold; smaller, it still says whose page this is. */
@media (max-width:560px) {
  body.pub main { padding-top:18px; }
  body.pub .art { max-width:200px; }
}