body{margin:0}
/* The Goalside header, footer and buttons. Every page loads this, so every page looks like the homepage. Uses the colour tokens from page.css. */
.hin{max-width:var(--w,1080px);margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));box-sizing:border-box}
.hin[data-flush]{padding:0}
.hnav{border-bottom:1px solid var(--line);background:var(--ground)}
.hnav .hin{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;min-height:64px;padding-top:8px;padding-bottom:8px}
.hnav .hin[data-flush]{padding-top:8px;padding-bottom:8px}
.hnav .brand{display:inline-flex;line-height:0;color:var(--ink);text-decoration:none}
.hnav .brand svg{height:26px;width:auto}
.hnav nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap}
.hnav nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:16px}
.hnav nav a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--ground)!important;font:700 17px/1 var(--body);text-decoration:none!important;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)!important}
.btn.small{min-height:40px;padding:0 18px;font-size:15px}
.btn:hover{opacity:.88}
.btn:focus-visible,.hnav a:focus-visible,.hfoot a:focus-visible{outline:3px solid #F26A1B;outline-offset:3px}
.hfoot{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 48px;font-size:15px}
.hfoot .fl{margin:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.hfoot a{color:var(--ink)}
.hfoot .fine{margin:12px 0 0;color:var(--ink-2);font-size:14px;max-width:70ch}
@media (max-width:560px){.hnav nav{gap:6px 16px}.hnav nav a{font-size:15px}}
/* account, plus, terms, privacy: the content column lines up with the header */
.gwrap{max-width:1080px;box-sizing:border-box}
.gwrap>*{max-width:760px}
.gwrap>.hero,.gwrap>h1{max-width:none}