/*
 * THE BORDER BETWEEN THE TWO HALVES OF THE SITE
 *
 *   Public / marketing pages (index, about, card-terminals, pricing
 *   pages, privacy, terms, the public Statement Checker)
 *       -> the DARK theme.
 *
 *   Anything a person sees while signing up, signing in, accepting an
 *   invite, resetting a password, or using the app itself
 *       -> the LIGHT theme, same as portal.html.
 *
 * Pages on the portal side load this file and set <body class="portal-page">.
 * The colours below are the portal's own (slate + indigo), so these
 * pages read as the front door of the app, not as part of the website.
 * A new portal-side page should use these classes rather than copying
 * the dark site's styles.
 */

*{box-sizing:border-box}

body.portal-page{
  margin:0;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:#f8fafc;color:#0f172a;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.hidden{display:none !important}

.pp-wrap{width:100%;max-width:24rem}
.pp-logo{display:flex;justify-content:center;margin-bottom:1.5rem}
.pp-logo img{height:2.5rem}

.pp-card{
  background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;
  padding:1.5rem;box-shadow:0 1px 2px rgba(15,23,42,.05);
}

.pp-title{font-size:1.125rem;font-weight:600;margin:0 0 .25rem;letter-spacing:-.01em}
.pp-sub{font-size:.8125rem;color:#64748b;margin:0 0 1.1rem;line-height:1.5}

.pp-label{display:block;font-size:.8125rem;font-weight:500;color:#334155;margin:0 0 .25rem}
.pp-hint{color:#94a3b8;font-weight:400}

/* 16px stops iOS Safari zooming the page when a field is focused —
   same reason the portal does it. */
.pp-input{
  width:100%;height:2.5rem;padding:0 .75rem;margin:0 0 .75rem;
  font-size:16px;font-family:inherit;color:#0f172a;
  background:#fff;border:1px solid #cbd5e1;border-radius:.375rem;
}
.pp-input::placeholder{color:#94a3b8}
.pp-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.35)}
.pp-input:disabled{background:#f1f5f9;color:#64748b}

.pp-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;height:2.5rem;margin-top:.5rem;
  background:#4f46e5;color:#fff;border:0;border-radius:.5rem;
  font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;
}
.pp-btn:hover{background:#4338ca}
.pp-btn:disabled{opacity:.6;cursor:default}

.pp-spinner{
  display:none;width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:pp-spin .7s linear infinite;
}
@keyframes pp-spin{to{transform:rotate(360deg)}}

.pp-msg{font-size:.8125rem;line-height:1.5;margin:0 0 .75rem}
.pp-msg.muted{color:#64748b}
.pp-msg.error{color:#e11d48}
.pp-msg.success{color:#059669}

.pp-foot{text-align:center;margin:.9rem 0 0;font-size:.75rem;color:#64748b;line-height:1.5}
.pp-foot a,.pp-link{color:#4f46e5;text-decoration:underline}

/* The "check your email" state — deliberately a clearly tinted panel,
   so it can't be mistaken for a blank screen. */
.pp-panel{
  background:#eef2ff;border:1px solid #c7d2fe;border-radius:.75rem;
  padding:1.5rem 1.25rem;text-align:center;
}
.pp-panel .pp-title{margin-top:.25rem}
.pp-panel p{font-size:.875rem;color:#475569;line-height:1.65;margin:.5rem 0 0}
.pp-panel strong{color:#0f172a}
.pp-icon{
  width:3.5rem;height:3.5rem;margin:0 auto .75rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.6rem;
  background:#4f46e5;box-shadow:0 0 0 8px rgba(99,102,241,.15);
}

/* Terms agreement tick box */
.pp-agree{display:flex;align-items:flex-start;gap:.6rem;margin:.25rem 0 .9rem;font-size:.8125rem;line-height:1.5;color:#475569}
.pp-agree input{flex:none;width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:#4f46e5;cursor:pointer}
.pp-agree label{cursor:pointer}
.pp-agree a{color:#4f46e5;text-decoration:underline}
.pp-agree.invalid{color:#be123c}
.pp-agree.invalid input{outline:2px solid #be123c;outline-offset:1px}