:root {
  --paper:#f8f8fc;
  --surface:#ffffff;
  --ink:#17141d;
  --muted:#6f6978;
  --line:#e5e1ec;
  --purple:#4400dd;
  --magenta:#c60de9;
  --red:#eb0343;
  --blue:#00a4ff;
  --green:#41cb00;
}
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.landing-nav { width:min(100%,1280px); height:84px; display:flex; align-items:center; justify-content:space-between; margin:auto; padding:0 32px; }
.landing-brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.landing-mark { width:43px; height:43px; }
.landing-brand strong { font:700 20px "Manrope"; letter-spacing:-.04em; }
.nav-trust { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; font-weight:600; }
.nav-trust i { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(65,203,0,.13); }
.signin-page { width:min(100%,1280px); min-height:calc(100vh - 84px); margin:auto; padding:0 32px; }
.signin-hero { min-height:calc(100vh - 174px); display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.72fr); align-items:center; gap:clamp(54px,7vw,94px); padding:54px 0 64px; }
.signin-story { min-width:0; }
.eyebrow,.section-kicker { margin:0; color:var(--purple); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:17px 0 0; font:600 clamp(50px,6.1vw,78px)/.98 "Manrope"; letter-spacing:-.064em; }
h1 em { color:var(--purple); font-style:normal; }
.signin-lead { max-width:690px; margin:24px 0 0; color:var(--muted); font-size:19px; line-height:1.58; }
.signin-usecases { display:grid; gap:0; margin-top:37px; }
.signin-usecases article { display:grid; grid-template-columns:38px minmax(0,1fr); gap:13px; padding:15px 0; border-top:1px solid var(--line); }
.signin-usecases article>span { color:var(--purple); font-size:10px; font-weight:800; }
.signin-usecases strong,.signin-usecases p { display:block; }
.signin-usecases strong { font:600 13px "Manrope"; }
.signin-usecases p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.48; }
.signin-card { padding:34px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 65px rgba(31,22,51,.09); }
.signin-logo { width:58px; height:58px; display:block; margin-bottom:21px; }
.signin-card h2 { margin:8px 0; font:600 30px "Manrope"; letter-spacing:-.045em; }
.signin-copy { margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.62; }
.microsoft-button { min-height:66px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:13px; padding:11px 16px; color:#fff; background:var(--purple); border:1px solid #3900ba; border-radius:13px; text-decoration:none; box-shadow:0 12px 28px rgba(68,0,221,.18); transition:transform .16s,background .16s,box-shadow .16s; }
.microsoft-button:hover { background:#3500ae; box-shadow:0 16px 34px rgba(68,0,221,.24); transform:translateY(-1px); }
.microsoft-button strong,.microsoft-button small { display:block; }
.microsoft-button strong { font:600 12px "Manrope"; }
.microsoft-button small { margin-top:3px; color:#ded5f9; font-size:9px; }
.microsoft-button>b { color:#fff; font-size:18px; }
.microsoft-mark { width:21px; height:21px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.microsoft-mark i:nth-child(1){background:#f35325}.microsoft-mark i:nth-child(2){background:#81bc06}.microsoft-mark i:nth-child(3){background:#05a6f0}.microsoft-mark i:nth-child(4){background:#ffba08}
.signin-guardrails { display:grid; gap:11px; margin-top:23px; padding-top:21px; border-top:1px solid var(--line); }
.signin-guardrails strong,.signin-guardrails span { display:block; }
.signin-guardrails strong { font-size:11px; }
.signin-guardrails span { margin-top:2px; color:var(--muted); font-size:10px; line-height:1.42; }
.security-note { display:flex; gap:9px; align-items:flex-start; margin-top:20px; padding:12px; color:var(--muted); background:#f7f5fb; border-radius:10px; font-size:9px; line-height:1.45; }
.security-note span { width:18px; height:18px; display:grid; place-items:center; flex:none; color:#277500; background:#e8fadb; border-radius:50%; font-weight:800; }
.security-note p { margin:2px 0 0; }
.auth-error { margin:0 0 14px; padding:11px 13px; color:#8f1832; background:#fff0f5; border:1px solid #f1bdc9; border-radius:9px; font-size:10px; }
footer { width:min(100%,1280px); display:flex; justify-content:space-between; gap:20px; margin:auto; padding:20px 32px 30px; color:var(--muted); border-top:1px solid var(--line); font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
@media (max-width:900px) {
  .signin-hero { grid-template-columns:1fr; gap:36px; padding-top:66px; }
  .signin-card { max-width:620px; }
  footer { margin-top:45px; }
}
@media (max-width:600px) {
  .landing-nav { height:70px; padding:0 18px; }
  .nav-trust span { display:none; }
  .signin-page { min-height:0; padding:0 18px; }
  .signin-hero { display:flex; flex-direction:column; align-items:stretch; gap:32px; min-height:0; padding:28px 0 30px; }
  .signin-card { order:-1; padding:24px; }
  .signin-logo { width:50px; height:50px; margin-bottom:17px; }
  .signin-card h2 { font-size:27px; }
  h1 { font-size:43px; }
  .signin-lead { font-size:16px; }
  .signin-usecases { margin-top:24px; }
  footer { display:block; margin-top:20px; padding:18px; }
  footer span { display:block; margin-top:5px; }
}