/* kwd — the sign-in and join pages (www/login.php): the brand on the left, the form on the right. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{color-scheme:light;}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--surface-2);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);min-height:100vh}

/* the brand side */
.brand{position:relative;overflow:hidden;color:var(--white);padding:56px 64px;display:flex;flex-direction:column;
  background:linear-gradient(90deg,transparent,var(--highlight)) left bottom/100% 4px no-repeat,linear-gradient(var(--accent-green) 0 0) left bottom/100% 4px no-repeat,
    linear-gradient(135deg,color-mix(in srgb,var(--black) 76%,transparent) 0%,color-mix(in srgb,var(--black) 51%,transparent) 42%,color-mix(in srgb,var(--black) 22%,transparent) 78%,transparent 100%),var(--accent-2)}
.brand::before{content:"";position:absolute;right:-120px;top:-90px;width:560px;height:560px;opacity:.08;background:url("/assets/img/mark-light.svg") center/contain no-repeat}
.brand::after{content:"";position:absolute;left:-160px;bottom:-220px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--highlight) 18%,transparent),color-mix(in srgb,var(--highlight) 0%,transparent) 65%)}
.brand > *{position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:14px;font-weight:750;font-size:30px;letter-spacing:-.02em}
.logo img{width:60px;height:60px}
.logo b{color:var(--highlight-light);font-weight:700}
/* the name underlined with the logo's gradient, as on every page */
.logo span{background:linear-gradient(90deg,transparent,var(--highlight-soft)) left bottom/100% .11em no-repeat,linear-gradient(var(--accent-light) 0 0) left bottom/100% .11em no-repeat;padding-bottom:.16em}
.mlogo span{background-image:linear-gradient(90deg,transparent,var(--highlight)),linear-gradient(var(--accent) 0 0)}
.pitch{margin:auto 0;max-width:560px;padding:48px 0}
.pitch h1{font-size:44px;line-height:1.08;letter-spacing:-.03em;margin:0 0 18px;font-weight:750}
.pitch h1 span{background:linear-gradient(90deg,transparent,var(--highlight-light)),var(--accent-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.pitch > p{font-size:17px;line-height:1.6;color:var(--ink-hero);margin:0 0 34px;max-width:480px}
.tools{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.tools li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start}
.tools i{width:42px;height:42px;border-radius:11px;background:color-mix(in srgb,var(--white) 8%,transparent);border:1px solid color-mix(in srgb,var(--white) 14%,transparent);display:grid;place-items:center;font-style:normal}
.tools b{display:block;font-size:15px;font-weight:650;margin-bottom:2px}
.tools span{font-size:14px;color:var(--ink-hero-2);line-height:1.45}
/* a glimpse of the work: score rings and ranks, as they appear in the reports */
.glimpse{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.chip{background:color-mix(in srgb,var(--white) 7%,transparent);border:1px solid color-mix(in srgb,var(--white) 13%,transparent);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:11px;backdrop-filter:blur(2px)}
.chip svg{flex:none}
.chip b{display:block;font-size:13px;font-weight:650}
.chip span{font-size:12px;color:var(--ink-hero-2)}
.rk{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:99px;font-size:12px;font-weight:700;padding:0 7px}
.foot{font-size:13px;color:var(--ink-hero-3);display:flex;gap:18px;flex-wrap:wrap}
a.co{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
a.co:hover{color:var(--highlight-light)}
.copy a.co:hover{color:var(--accent)}

/* the form side */
.form{position:relative;display:flex;flex-direction:column;justify-content:center;padding:64px clamp(32px,6vw,88px);background:var(--white);border-left:1px solid var(--border-soft)}
.box{width:100%;max-width:380px;margin:0 auto}
.box .mlogo{display:none}
.box h2{font-size:30px;letter-spacing:-.02em;margin:0 0 6px;font-weight:720}
.box .sub{color:var(--ink-3);margin:0 0 30px;font-size:15px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 7px}
.field{position:relative;margin-bottom:18px}
input[type=text],input[type=email],input[type=password]{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--border-soft);border-radius:9px;background:var(--white);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.show{position:absolute;right:8px;bottom:7px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:13px;font-weight:600;padding:6px 8px;border-radius:6px;cursor:pointer}
.show:hover{color:var(--accent);background:var(--surface-2)}
.row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 24px;font-size:14px;color:var(--ink-2)}
.row label{display:flex;align-items:center;gap:9px;margin:0;font-weight:500;cursor:pointer}
.row input{width:17px;height:17px;accent-color:var(--accent);margin:0}
button.go{width:100%;font:inherit;font-size:15px;font-weight:650;color:var(--white);background:linear-gradient(135deg,color-mix(in srgb,var(--black) 15%,transparent),transparent),var(--accent-2);border:0;border-radius:9px;padding:13px;cursor:pointer;
  box-shadow:0 1px 0 color-mix(in srgb,var(--white) 20%,transparent) inset,0 6px 16px -6px color-mix(in srgb,var(--accent) 55%,transparent);transition:filter .15s,transform .05s}
button.go:hover{filter:brightness(1.08)}
button.go:active{transform:translateY(1px)}
button.go:disabled{filter:grayscale(.4);opacity:.7;cursor:default}
.msg{border-radius:9px;padding:11px 14px;font-size:14px;margin:0 0 20px;line-height:1.45}
.msg.bad{background:var(--danger-soft);color:var(--danger-strong);border:1px solid var(--danger-light)}
.msg.ok{background:var(--success-soft);color:var(--success-strong);border:1px solid var(--success-light)}
.msg.info{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border-soft)}
/* the form sits in the true middle; the copyright is pinned to the foot */
.alt{margin:22px 0 0;text-align:center;font-size:14px;color:var(--ink-3)}
.alt a{color:var(--accent);font-weight:600;text-decoration:none}
.alt a:hover{text-decoration:underline}
.hint{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.4}
input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.copy{position:absolute;left:0;right:0;bottom:24px;font-size:12px;color:var(--ink-disabled);text-align:center}

@media (max-width:980px){
  body{grid-template-columns:1fr}
  .brand{padding:32px 28px 36px}
  .pitch{padding:28px 0 0;margin:0}
  .pitch h1{font-size:32px}
  .glimpse,.foot{display:none}
  .form{border-left:0;padding:40px 24px}
  .copy{position:static;margin-top:36px}
}
@media (max-width:560px){ .brand{display:none} .box .mlogo{display:flex;margin-bottom:28px} .box .mlogo b{color:var(--accent)} }

/* ---- while the page waits: the big mark drifts, the glow wanders, the
   headline shimmers, and the carousel turns every few seconds. Still, for
   anyone who has asked their system for less motion. ---- */
.brand::before{animation:kt-drift 28s ease-in-out infinite alternate}
.brand::after{animation:kt-wander 34s ease-in-out infinite alternate}
@keyframes kt-drift{from{transform:translate(0,0) rotate(0deg) scale(1)}to{transform:translate(-26px,18px) rotate(-4deg) scale(1.04)}}
@keyframes kt-wander{0%{transform:translate(0,0);opacity:.85}50%{transform:translate(150px,-60px);opacity:1}100%{transform:translate(60px,-140px);opacity:.75}}
.pitch h1 span{background-size:220% 100%;animation:kt-shimmer 14s ease-in-out infinite alternate}
@keyframes kt-shimmer{from{background-position:0% 0}to{background-position:100% 0}}
/* the carousel: everything under the logo, one slide at a time */
.pitch.carousel{margin:auto 0;padding:40px 0 0;max-width:600px;display:flex;flex-direction:column}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(56px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .5s ease}
.slide.gone{transform:translateX(-56px)}
.slides.back .slide{transform:translateX(-56px)}.slides.back .slide.gone{transform:translateX(56px)}.slides .slide.on{transform:none}
.tools{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.tools li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start}
.tools i{width:42px;height:42px;border-radius:11px;background:color-mix(in srgb,var(--white) 8%,transparent);border:1px solid color-mix(in srgb,var(--white) 14%,transparent);display:grid;place-items:center;font-style:normal}
.tools b{display:block;font-size:15px;font-weight:650;margin-bottom:2px}
.tools span{font-size:14px;color:var(--ink-hero-2);line-height:1.45}
/* a glimpse of the work: score rings and ranks, as they appear in the reports */
.glimpse{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.chip{background:color-mix(in srgb,var(--white) 7%,transparent);border:1px solid color-mix(in srgb,var(--white) 13%,transparent);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:11px;backdrop-filter:blur(2px)}
.chip svg{flex:none}
.chip b{display:block;font-size:13px;font-weight:650}
.chip span{font-size:12px;color:var(--ink-hero-2)}
.rk{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:99px;font-size:12px;font-weight:700;padding:0 7px}
.slide .lede{font-size:17px;line-height:1.6;color:var(--ink-hero);margin:0 0 30px;max-width:500px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--highlight-light);margin-bottom:12px}
.slide .demo{max-width:520px;font-size:14px;padding:16px 18px}
.slide .rankdemo .rr{padding:9px 0}
.slide .kwdemo .kr{padding:10px 0}
.slide figcaption{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;margin-bottom:18px}
.slide figcaption i{width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--highlight-light) 10%,transparent);border:1px solid color-mix(in srgb,var(--highlight-light) 28%,transparent);display:grid;place-items:center;font-style:normal}
.slide figcaption b{display:block;font-size:16px;font-weight:650;margin-bottom:3px}
.slide figcaption span{font-size:14px;color:var(--ink-hero-2);line-height:1.45}
.demo{background:color-mix(in srgb,var(--black) 16%,transparent);border:1px solid color-mix(in srgb,var(--white) 8%,transparent);border-radius:11px;padding:12px 14px;font-size:13px}
.rankdemo .rh,.rankdemo .rr{display:grid;grid-template-columns:1fr 54px 54px 54px;align-items:center;gap:6px;text-align:center}
.rankdemo .rh{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-hero-3);font-weight:650;padding-bottom:6px}
.rankdemo .rh span:first-child,.rankdemo .rr span{text-align:left}
.rankdemo .rr{padding:6px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent)}
.rankdemo em{font-style:normal;justify-self:center;min-width:28px;padding:1px 7px;border-radius:99px;font-size:12px;font-weight:700}
.c1{background:var(--accent-strong);color:var(--white)}.c2{background:var(--accent-2);color:var(--white)}.c3{background:var(--success-bright);color:var(--surface-hero-2)}.c0{color:var(--ink-hero-3)}
.kwdemo .kr{display:grid;grid-template-columns:18px 1fr 90px 48px;align-items:center;gap:10px;padding:7px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent)}
.kwdemo .kr:first-child{border-top:0}
.kwdemo .kr i{font-style:normal;width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--accent-green);color:var(--white)}
.kwdemo .kr b{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--demand) var(--w),color-mix(in srgb,var(--white) 12%,transparent) var(--w))}
.kwdemo .kr em{font-style:normal;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.kwdemo .kr.off{color:var(--ink-hero-3)}.kwdemo .kr.off i{background:color-mix(in srgb,var(--white) 14%,transparent)}
.kwdemo .kr.off small{grid-column:3 / 5;justify-self:end;font-size:11px;background:color-mix(in srgb,var(--danger-light) 14%,transparent);color:var(--danger-light);border-radius:4px;padding:1px 7px}
.hdemo{display:flex;align-items:center;gap:22px}
.hdemo .rings{display:flex;gap:14px}
.hdemo .rings div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink-hero-3)}
.hdemo .aiready{flex:1}
.hdemo .aiready span{display:block;font-size:12.5px;color:var(--ink-hero);margin-bottom:7px}
.hdemo .aiready b{color:var(--white)}
.hdemo .segs{display:flex;gap:3px}.hdemo .segs i{flex:1;height:8px;border-radius:2px;background:var(--accent-green)}.hdemo .segs i.w{background:var(--warning)}
.dots{display:flex;gap:7px;margin-top:34px}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--white) 28%,transparent);cursor:pointer;transition:width .3s,background .3s}
.dots button.on{width:22px;background:var(--highlight-light)}
@media (prefers-reduced-motion:reduce){.brand::before,.brand::after,.pitch h1 span{animation:none}.slide,.slide.on{transition:none;transform:none}}