/* ============================================================
   SIGN-UP — on the portal's own design system.

   The signed-out pages were the last thing still running the old Inter shell,
   so the first screen a client ever saw looked like a different product from
   the one they were signing into. This file is the same tokens, the same Oswald
   display face, the same 2px no-fill cards and the single blue signal.

   Only the skin changed. Every class name, every id and all the behaviour in
   join.html and _shell.js is untouched, because that flow works and a redesign
   is no reason to risk it.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the two-up shell ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}

/* left: the picture and the promise */
.visual{position:relative;overflow:hidden;background:var(--site-black)}
.visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.wash{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,20,20,.35) 0%,rgba(20,20,20,.72) 55%,rgba(20,20,20,.96) 100%)}
.say{position:absolute;left:0;right:0;bottom:0;padding:56px 48px 52px;color:#fff}
.tile{width:54px;height:54px;border-radius:14px;background:var(--accent);
  display:grid;place-items:center;margin-bottom:26px;box-shadow:var(--accent-lift)}
.tile img{position:static;width:30px;height:30px;object-fit:contain}
.say h1{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.96;
  font-size:clamp(34px,3.6vw,54px);margin:0 0 14px;color:#fff;
}
.role{font-size:var(--fs-body-sm);color:rgba(255,255,255,.62);margin-bottom:26px;
  letter-spacing:.02em}
.pills{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  font-size:var(--fs-body-sm);color:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.pill svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* right: the form */
.pane{position:relative;display:flex;flex-direction:column;
  padding:28px clamp(24px,4vw,64px) 56px;
  /* the ambient grid, same as the app */
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size)}
.top{display:flex;justify-content:flex-end;margin-bottom:22px}
.themebtn{width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:var(--card-dark);color:var(--fg-secondary);
  display:grid;place-items:center;transition:border-color var(--t-micro),color var(--t-micro)}
.themebtn:hover{border-color:var(--border-strong);color:var(--fg)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* progress: three steps, filled as they go */
.bar{display:flex;gap:7px;max-width:520px;width:100%;margin:0 auto 22px}
.bar i{flex:1;height:3px;border-radius:2px;background:var(--rule);
  transition:background var(--t-short) var(--ease-out)}
.bar i.on{background:var(--accent)}

.card{width:100%;max-width:520px;margin:0 auto;
  background:var(--card-dark);border:var(--border-card-width) solid var(--border);
  border-radius:var(--radius-card);padding:36px 34px;box-shadow:var(--lift)}

h1{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(26px,2.6vw,34px);margin:0 0 12px;color:var(--fg)}
.lede{color:var(--fg-secondary);font-size:var(--fs-body-sm);line-height:1.62;margin:0 0 26px}
.lede b{color:var(--fg);font-weight:600}
.hint{color:var(--fg-tertiary);font-size:var(--fs-meta);line-height:1.55}

label{display:block;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-tertiary);font-weight:600;margin:20px 0 8px}

.ip{width:100%;padding:13px 15px;border-radius:var(--radius-small);
  border:1px solid var(--border);background:var(--bg);color:var(--fg);
  font-family:inherit;font-size:var(--fs-body-sm);
  transition:border-color var(--t-micro),box-shadow var(--t-micro)}
.ip::placeholder{color:var(--fg-tertiary)}
.ip:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.ip.code{font-family:var(--font-mono);font-size:26px;letter-spacing:.42em;text-align:center;
  padding:16px 15px}

/* ---------- the pick lists ---------- */
.pick{display:flex;flex-direction:column;gap:9px;margin:4px 0 4px}
.p{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:14px 16px;border-radius:var(--radius-small);
  border:1px solid var(--border);background:var(--bg);
  font-size:var(--fs-body-sm);color:var(--fg);line-height:1.45;
  transition:border-color var(--t-micro),background var(--t-micro)}
.p:hover{border-color:var(--border-strong)}
.p.sel{border-color:var(--accent);background:var(--accent-wash)}
.bx{flex:none;width:19px;height:19px;margin-top:1px;border-radius:5px;
  border:1.8px solid var(--border-strong);position:relative;
  transition:border-color var(--t-micro),background var(--t-micro)}
.p.sel .bx{border-color:var(--accent);background:var(--accent)}
.p.sel .bx::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.p.svc b{display:block;font-weight:600;margin-bottom:2px}
.p.svc small{display:block;color:var(--fg-secondary);font-size:var(--fs-meta);line-height:1.5}

/* ---------- buttons ---------- */
.btn{width:100%;margin-top:22px;padding:14px 20px;border:0;cursor:pointer;
  border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-size:var(--fs-body-sm);font-weight:600;letter-spacing:.02em;
  transition:transform var(--t-micro),box-shadow var(--t-micro),opacity var(--t-micro)}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--accent-lift)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sec{margin-top:10px;background:transparent;color:var(--fg-secondary);
  border:1px solid var(--border)}
.btn.sec:hover{border-color:var(--border-strong);color:var(--fg);box-shadow:none;transform:none}

.gbtn{display:flex;align-items:center;justify-content:center;gap:11px;
  padding:13px 20px;border-radius:var(--radius-pill);text-decoration:none;
  border:1px solid var(--border);background:var(--bg);color:var(--fg);
  font-size:var(--fs-body-sm);font-weight:600;
  transition:border-color var(--t-micro)}
.gbtn:hover{border-color:var(--border-strong)}
.gbtn svg{width:18px;height:18px}
.or{display:flex;align-items:center;gap:14px;margin:20px 0 4px;
  color:var(--fg-tertiary);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------- messages ---------- */
.flash{margin:0;font-size:var(--fs-body-sm);line-height:1.5}
.flash:not(:empty){padding:12px 15px;border-radius:var(--radius-small);margin:0 0 20px;
  border:1px solid var(--border)}
.flash.err:not(:empty){border-color:var(--warn);background:rgba(245,158,11,.10);color:var(--warn)}
.flash.ok:not(:empty){border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}

/* ---------- the stack strip ---------- */
.apps{width:100%;max-width:520px;margin:34px auto 0;text-align:center}
.at{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-tertiary);font-weight:600;margin-bottom:16px}
.appgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.appgrid div{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:var(--card-dark);
  font-size:var(--fs-meta);color:var(--fg-secondary)}
.appgrid img{width:15px;height:15px;object-fit:contain}

.foot{width:100%;max-width:520px;margin:30px auto 0;text-align:center;
  font-size:var(--fs-body-sm);color:var(--fg-secondary)}
.foot a{color:var(--accent);font-weight:600;text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- narrow ---------- */
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  /* the picture becomes a banner rather than disappearing: it carries the only
     photograph of the person they are about to hand their business to */
  .visual{min-height:340px}
  /* the banner crops from the top on a phone, which cut her forehead off.
     Pull the framing down so the face sits above the headline. */
  .visual img{object-position:center 18%}
  .wash{background:linear-gradient(180deg,rgba(20,20,20,.25) 0%,rgba(20,20,20,.55) 45%,
    rgba(20,20,20,.94) 100%)}
  .say{padding:34px 26px 26px}
  .say h1{font-size:clamp(26px,7.4vw,34px)}
  .tile{width:44px;height:44px;margin-bottom:16px}
  .tile img{width:25px;height:25px}
  .role{margin-bottom:18px}
  .pills{flex-direction:row;flex-wrap:wrap}
  .pane{padding:22px 20px 44px}
  .card{padding:28px 22px;border-radius:var(--radius-card)}
}
@media(max-width:420px){
  .card{padding:24px 18px}
  .ip.code{font-size:22px;letter-spacing:.3em}
}

/* sign-in only */
.alt{margin-top:22px;text-align:center;font-size:var(--fs-body-sm);color:var(--fg-secondary)}
.alt a{color:var(--accent);font-weight:600;text-decoration:none}
.alt a:hover{text-decoration:underline}

/* ---------- the fixed frame ----------
   Samuel: the page itself must not scroll — the photograph holds still and only
   the right pane moves. Desktop only; the stacked phone layout keeps normal
   page flow because a fixed 100dvh split with a 340px banner leaves no room. */
@media(min-width:901px){
  html,body{height:100%;overflow:hidden}
  .split{height:100dvh}
  .visual{height:100dvh}
  .pane{height:100dvh;overflow-y:auto;overscroll-behavior:contain}
}