
/* Kindos onboarding/auth utility pages
   Additive stylesheet — intentionally does not modify the marketing site's styles.css */
.auth-page{
  min-height:calc(100vh - 76px);
  display:grid;
  place-items:center;
  padding:52px 20px 72px;
  background:
    radial-gradient(circle at 12% 18%, rgba(226,176,66,.13), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(95,191,140,.12), transparent 26%),
    linear-gradient(180deg,#fbf8f2 0%,#f8f5ef 100%);
}
.auth-shell{width:min(720px,100%);margin:auto}
.auth-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(24,49,83,.08);
  border-radius:30px;
  box-shadow:0 24px 64px rgba(24,49,83,.11);
  padding:40px;
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,#e2b042,#5fbf8c,#8c79db);
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  font-size:1.25rem;
  margin-bottom:32px;
}
.auth-brand .brandmark{width:46px;height:46px;flex:0 0 46px}
.auth-icon{
  width:70px;height:70px;border-radius:22px;
  display:grid;place-items:center;
  margin-bottom:22px;
  font-size:2rem;font-weight:950;
  background:#ecf8f2;color:#1f5b47;
  border:1px solid rgba(95,191,140,.18);
}
.auth-icon.error{background:#fff1eb;color:#a14f36;border-color:#f2d8ce}
.auth-eyebrow{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#8f6d17;
  font-weight:950;
  margin-bottom:10px;
}
.auth-card h1{
  font-size:clamp(2.15rem,7vw,3.35rem);
  letter-spacing:-.04em;
  margin-bottom:14px;
}
.auth-lead{
  font-size:1.08rem;
  line-height:1.65;
  color:#50627d;
  max-width:58ch;
}
.auth-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:28px 0;
}
.auth-step{
  background:#fbf8f2;
  border:1px solid #e8dfd2;
  border-radius:18px;
  padding:16px;
}
.auth-step span{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:#183153;color:#fff;
  font-weight:900;font-size:.85rem;
  margin-bottom:10px;
}
.auth-step b{display:block;margin-bottom:5px}
.auth-step p{font-size:.91rem;margin:0;line-height:1.45}
.auth-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.auth-note{
  margin-top:24px;
  padding:15px 17px;
  border-radius:16px;
  background:#f7f4ee;
  color:#50627d;
  font-size:.92rem;
  border:1px solid #e8dfd2;
}
.auth-note b{color:#183153}
.auth-mini-footer{
  text-align:center;
  color:#718097;
  font-size:.86rem;
  margin-top:20px;
}
.auth-mini-footer a{text-decoration:underline;text-underline-offset:3px}
.support-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:28px 0 4px;
}
.support-tile{
  display:block;
  padding:20px;
  border-radius:20px;
  background:#fff;
  border:1px solid #e8dfd2;
  transition:transform .18s ease,box-shadow .18s ease;
}
.support-tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(24,49,83,.08)}
.support-tile .emoji{font-size:1.4rem;margin-bottom:10px}
.support-tile b{display:block;margin-bottom:6px}
.support-tile p{margin:0;font-size:.94rem}
@media (max-width:680px){
  .auth-page{padding:30px 16px 48px;place-items:start center}
  .auth-card{padding:28px 22px;border-radius:24px}
  .auth-brand{margin-bottom:24px}
  .auth-steps,.support-grid{grid-template-columns:1fr}
  .auth-actions{flex-direction:column}
  .auth-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .support-tile,.btn{transition:none!important}
}
