/* Clarity Corner – Cream theme with teal accent, fully responsive */
:root{
  --cream:#F6F1E9;
  --card:#FFFFFF;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#F4A65B; --brand-600:#E38D33;  /* CTA accent (orange) */
  --teal:#0f766e;                         /* headline teal */
  --line:#E8E2D9;
  --shadow:0 20px 60px rgba(31,41,55,.08);
  --rad:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--cream);
  /* doodle bg */
  background-image:
    radial-gradient(150px 150px at 20% 10%, rgba(244,166,91,.10), transparent),
    radial-gradient(200px 200px at 80% 70%, rgba(244,166,91,.08), transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23e3dccf' stroke-width='1'%3E%3Cpath d='M10 30c8-18 22-8 28 2M8 88c16-6 20 10 30 0M62 18c10 10 20 0 28-6M70 86c8-6 18-2 26 6'/%3E%3Ccircle cx='20' cy='60' r='3'/%3E%3Ccircle cx='95' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
}
a{color:inherit;text-decoration:none}

/* Header – grid keeps title centered and logout on the right */
.wrap{max-width:1100px;margin:0 auto;padding:20px clamp(12px,4vw,20px) 56px}
.header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;     /* left spacer | brand | actions */
  align-items:center;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:18px; justify-self:center}
.brand img{width:56px;height:56px;border-radius:14px;object-fit:cover;box-shadow:inset 0 0 0 1px #0b3f4022}
.headline{margin:0;color:var(--teal);font-weight:800;letter-spacing:.2px;font-size:clamp(24px,4.5vw,44px);text-align:center}
.actions{justify-self:end}

/* Logout pill styled like the orange CTA (but compact) */
.logout-btn{
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 0 var(--brand-600);
  line-height:1;
}
.logout-btn:active{transform:translateY(1px);box-shadow:0 3px 0 var(--brand-600)}

/* spacing between header and login content */
.spacer-hero{height:clamp(32px,7vh,72px)}

/* Buttons (primary + outline) */
.btn{background:var(--brand);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;transition:transform .03s,box-shadow .15s;box-shadow:0 6px 0 var(--brand-600)}
.btn:active{transform:translateY(1px);box-shadow:0 5px 0 var(--brand-600)}
.btn.outline{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none}

/* Grid */
.grid{display:grid;gap:28px;grid-template-columns:1fr minmax(280px,560px) 1fr;align-items:start}

/* Illustrations fixed height so they don't grow with the card */
.illo{border-radius:18px;border:1px dashed #e9dfcf;height:420px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #00000008;background-color:#fff}
.illo-left { background-image:url("https://claritycorner.in/assets/img/login1.png"); }
.illo-right{ background-image:url("https://claritycorner.in/assets/img/login2.png"); }

@media (max-width:1024px){
  .grid{grid-template-columns:1fr;gap:22px}
  .illo{display:none}
}

/* Card + form */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);padding:clamp(22px,3.5vw,32px)}
.card h2{margin:4px 0 8px;text-align:center;font-size:clamp(22px,3.2vw,30px)}
.card .sub{margin:0 0 18px;text-align:center;color:var(--muted)}
.form{display:grid;gap:14px}
label{display:grid;gap:8px;font-weight:600;font-size:14px}
.input{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.input input{border:0;outline:none;font-size:16px;width:100%;background:transparent;color:var(--text);min-height:44px}
.flag{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:#faf7f1;font-weight:700;white-space:nowrap}
.flag svg{width:18px;height:18px;border-radius:3px}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.helper{color:var(--muted);font-size:13px}
.err{color:#c63737}
.ok{color:#107c41}

.footer{margin-top:34px;text-align:center;color:#6b7280;font-size:13px}

/* OTP visibility lock */
#otpForm{display:none}
body.otp-ready #otpForm{display:grid}