/* The landing page's signup envelope, sized for a standalone form. */
:root{
  --join-paper:#FBF8F2;
  --join-ink:#17140F;
  --join-wine:#5D1E29;
  --join-muted:#716D67;
  --join-rule:#B8B4AE;
  --join-fold:rgba(23,20,15,.055);
  --join-shadow:rgba(0,0,0,.2);
  --join-pad:44px;
  --join-stamp:68px;
}
body{min-height:100svh;font-size:16px;letter-spacing:0}
body::before{display:none}
[hidden]{display:none!important}
.join-mast{text-align:center;padding:24px 20px 22px}
.join-mast a{display:inline-flex;min-height:48px;align-items:center;padding:4px}
.join-mast img{width:170px;height:auto;display:block}
.join-main{width:100%;padding:0 28px max(40px,env(safe-area-inset-bottom))}
.join-inner{position:relative;max-width:800px;margin:auto;padding:var(--join-pad);background:var(--join-paper);color:var(--join-ink);border-radius:4px;box-shadow:0 20px 50px -28px var(--join-shadow)}
.join-inner::before{content:"";position:absolute;inset:0 0 auto;height:210px;max-height:25%;background:linear-gradient(180deg,var(--join-fold),transparent);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.join-heading,#form,.done,footer{position:relative;z-index:1}
.join-heading{padding-right:calc(var(--join-stamp) + 24px);min-height:calc(var(--join-stamp) / .82);margin-bottom:26px;display:flex;flex-direction:column;justify-content:center}
h1{font:400 42px/1.15 var(--display);letter-spacing:0;margin:0 0 12px;overflow-wrap:anywhere}
.sub{font:13px/1.6 var(--mono);text-transform:uppercase;letter-spacing:0;color:var(--join-muted);margin:0}
.join-inner .stamp{top:var(--join-pad);right:var(--join-pad);width:var(--join-stamp);background:var(--join-wine);z-index:1}
.join-inner .stamp b{font-size:30px;font-weight:400;color:var(--join-paper)}
.join-inner .stamp span{font-size:9px;letter-spacing:0;color:var(--join-paper);margin-top:5px}
.intent{border:0;padding:0;margin:0 0 26px;min-width:0}
.intent legend,.f label{display:block;font:12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:0;color:var(--join-muted);margin-bottom:10px}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.path{position:relative;cursor:pointer;min-width:0}
.path:last-child{grid-column:1 / -1}
.path input{position:absolute;opacity:0;width:1px;height:1px}
.path span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 10px;border:1px solid var(--join-rule);text-align:center;font:14px/1.4 var(--mono);text-transform:uppercase;letter-spacing:0;overflow-wrap:anywhere;transition:background .15s,color .15s,border-color .15s}
.path:hover span{border-color:var(--join-wine)}
.path input:checked+span{background:var(--join-wine);border-color:var(--join-wine);color:var(--join-paper)}
.path input:focus-visible+span{outline:2px solid var(--join-wine);outline-offset:3px}
.path input:disabled+span{opacity:.65}
.f{position:relative;margin-bottom:22px}
.f label span{text-transform:none}
.f input{width:100%;min-height:52px;border:0;border-bottom:1px solid var(--join-rule);border-radius:0;background:transparent;color:var(--join-ink);padding:10px 0;font:18px/1.5 var(--mono);letter-spacing:0}
.f input::placeholder{color:var(--join-muted);opacity:.75}
.f input:focus-visible{outline:2px solid var(--join-wine);outline-offset:4px;border-bottom-color:transparent}
.f input:disabled{opacity:.65}
.hint{font:13px/1.6 var(--mono);color:var(--join-muted);margin:8px 0 0;max-width:58ch}
.err{color:var(--join-wine);font:14px/1.5 var(--mono);margin:0 0 12px}
.err:empty{display:none}
.go{width:100%;min-height:56px;font:15px/1.4 var(--mono);text-transform:uppercase;letter-spacing:0;border:1px solid var(--join-wine);border-radius:0;margin-top:6px;padding:15px 12px}
.go:hover{background:var(--join-wine);border-color:var(--join-wine);color:var(--join-paper)}
.go:focus-visible{outline:2px solid var(--join-wine);outline-offset:4px}
.ac-list{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;max-height:240px;overflow:auto;background:var(--join-paper);color:var(--join-ink);border:1px solid var(--join-rule);z-index:5;box-shadow:0 12px 24px -12px var(--join-shadow)}
.ac-list li{min-height:48px;padding:10px 12px;cursor:pointer}
.ac-list li b{font:16px/1.4 var(--mono)}
.ac-list li small{font:13px/1.5 var(--mono);color:var(--join-muted)}
.ac-list li:hover,.ac-list li[aria-selected=true]{background:var(--carbon);color:var(--join-paper)}
.ac-list li:hover small,.ac-list li[aria-selected=true] small{color:var(--join-paper)}
.done{text-align:center;padding:50px 0 16px}
.received-mark{display:block;width:112px;height:112px;object-fit:contain;margin:0 auto 24px}
.done h2{font:400 40px/1.15 var(--display);margin:0 0 14px;letter-spacing:0}
.done p{font:16px/1.7 var(--mono);margin:0 auto;max-width:34ch}
.done-link{display:inline-flex;align-items:center;min-height:48px;margin-top:24px;font:14px/1.5 var(--mono);color:var(--join-wine)}
footer{text-align:center;padding:30px 0 0;margin:20px 0 0;color:var(--join-muted)}
footer .fine{font:13px/1.8 var(--body);letter-spacing:0;margin:0}
footer a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
@media(max-width:600px){
  :root{--join-pad:24px;--join-stamp:54px}
  .join-mast{padding:16px 20px 14px}.join-mast img{width:146px}
  .join-main{padding:0 12px max(24px,env(safe-area-inset-bottom))}
  .join-heading{padding-right:calc(var(--join-stamp) + 16px);margin-bottom:26px;justify-content:flex-start}
  h1{font-size:36px;margin-bottom:10px}.sub{font-size:12px}
  .join-inner .stamp b{font-size:26px}.join-inner .stamp span{font-size:8px}
  .path span{font-size:12px;padding:12px 6px}
  .f input{font-size:16px}.intent legend,.f label{font-size:12px}
  .f{margin-bottom:20px}.hint{font-size:12px}.go{font-size:14px}
  footer{padding-top:18px;margin-top:18px}
}
@media(max-width:359px){:root{--join-pad:20px}.join-main{padding-inline:10px}.join-heading{padding-right:68px}h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
