/* Shared by every page: tokens, type, the header with the account button. White, quiet, type-led. */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --ink2:#444444;
  --mute:#9b9b9b;
  --line:#e8e8e8;
  --tile:#f3f3f3;
  --rec:#e5382b;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --hdr:56px;
  --side:240px;
  --gap:clamp(24px,4vw,56px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg);color:var(--fg);font:400 13px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-within{outline:1px solid var(--fg);outline-offset:3px}

.hdr{
  position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  height:calc(var(--hdr) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;justify-content:space-between;
}
.hdr .logo{display:block;line-height:0}
.hdr .logo img{display:block;height:20px;width:auto}
.acct{position:relative}
.acct-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{border-color:var(--fg)}
.acct-btn svg{width:18px;height:18px}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;background:var(--bg);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.acct-menu strong{font-weight:400}
.acct-menu span{color:var(--mute)}

.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1600px;margin:0 auto}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* account menu: sign-in form, or who's signed in */
.acct-btn.in{border-color:var(--fg)}
.acct-menu{min-width:240px}
.acct-menu a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;width:max-content}
.acct-form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.acct-form input[type=email],.acct-form input.code{font:inherit;border:0;border-bottom:1px solid var(--line);padding:6px 0;background:transparent;color:var(--fg);outline:none}
.acct-form input[type=email]:focus,.acct-form input.code:focus{border-bottom-color:var(--fg)}
.acct-go{font:inherit;background:var(--fg);color:var(--bg);border:0;padding:9px 12px;cursor:pointer}
.acct-go:disabled{opacity:.5;cursor:default}
.acct-note{font-size:12px}
.acct-email{color:var(--fg)!important;overflow-wrap:anywhere}
.acct-link{font:inherit;background:none;border:0;padding:0;color:var(--mute);cursor:pointer;text-align:left;width:max-content}
.acct-link:hover{color:var(--fg)}

/* the consent tick at sign-in */
.consent{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--mute);cursor:pointer}
.consent input{margin:2px 0 0;accent-color:var(--fg);flex:none}
.consent a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
/* the footer: who sells, how to reach them, the documents */
.foot{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:18px;padding-bottom:28px;border-top:1px solid var(--line);font-size:11px;color:var(--mute)}
.foot a{color:var(--mute)}
.foot a:hover{color:var(--fg)}

/* the code step of signing in */
.acct-note{margin:0}
.acct-form input.code,.signin input.code{letter-spacing:.2em;font-variant-numeric:tabular-nums}
.again{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.linkish{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkish:disabled{opacity:.4;cursor:default}