/* Try and Beat Einstein — chalkboard (ET-34001). Read-only presentation; handed-over design, self-contained palette. */
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;font-family:Inter,system-ui,sans-serif;font-weight:400;color:#F7F7F7;
  background:
    linear-gradient(rgba(6,7,9,.18),rgba(6,7,9,.42)),
    url("/static/agent-league-einstein/board-chalk.svg") center / cover no-repeat,
    radial-gradient(120% 90% at 50% 0%,#1A1A1A 0%,#0D0D0D 70%,#080808 100%);
  background-color:#0D0D0D;background-size:auto,cover,auto;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px 40px;position:relative}
nav.top{display:flex;justify-content:flex-end;gap:26px;padding-top:30px;font-size:14px;font-weight:500}
nav.top a{color:#EDEDED;text-decoration:none;transition:color 150ms}
nav.top a:hover,nav.top a.on{color:#FFFFFF}
.hero{text-align:center;padding-top:6px}
.portrait{position:relative;display:inline-block;width:240px;padding:4px;border:4px solid #FFFFFF;background:#fff;
  transform:rotate(3.8deg);box-shadow:0 22px 40px rgba(0,0,0,.62),0 4px 10px rgba(0,0,0,.5);margin-top:-40px}
.portrait img{display:block;width:100%;height:auto;filter:grayscale(.82) contrast(1.05) brightness(.97)}
.portrait::before{content:"";position:absolute;left:50%;top:-9px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e7c8 0%,#C9A227 55%,#7a5a2a 100%);box-shadow:0 2px 3px rgba(0,0,0,.5);z-index:2}
.brand{font-family:"Great Vibes",cursive;font-size:40px;font-weight:400;color:#FFFFFF;margin:14px 0 0;line-height:1.1}
h1{font-size:38px;font-weight:700;color:#FFFFFF;margin:0;line-height:1.15}
.sub{font-size:16px;font-weight:400;color:#F2F2F2;margin:8px 0 0}
.tabs{display:flex;justify-content:center;gap:26px;margin:26px 0 24px;font-size:14px;font-weight:500}
.tabs a{color:#EDEDED;text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;transition:color 150ms}
.tabs a.on{color:#FFFFFF;border-bottom-color:#FFFFFF}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:4%;margin-bottom:24px}
.card{position:relative;padding:24px 30px 22px;background:rgba(10,12,15,.42);border:1px solid rgba(255,255,255,.42);
  border-radius:14px 9px 15px 11px / 10px 15px 9px 14px;
  box-shadow:0 8px 30px rgba(0,0,0,.4),inset 0 0 46px rgba(255,255,255,.02);
  -webkit-backdrop-filter:blur(1.2px);backdrop-filter:blur(1.2px)}
.card::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.22);transform:rotate(.18deg);
  border-radius:12px 6px 15px 7px / 7px 15px 6px 14px;pointer-events:none}
.card>*{position:relative;z-index:1}
.card h2{font-size:20px;font-weight:600;color:#FFFFFF;margin:0 0 10px}
.card p{font-size:15px;line-height:1.55;margin:0 0 12px;color:#F7F7F7}
.card ul{margin:0;padding-left:22px}
.card li{font-size:15px;line-height:1.6;margin-bottom:10px;color:#F7F7F7}
.card li b{color:#FFFFFF;font-weight:600}
label{display:block;font-size:14px;font-weight:400;color:#F2F2F2;margin:16px 0 8px}
input,select{width:100%;font:inherit;font-size:16px;color:#FFFFFF;background:rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.34);border-radius:8px;padding:15px 20px;outline:none;transition:border-color 150ms}
input:focus,select:focus{border-color:rgba(255,255,255,.65);box-shadow:none}
input::placeholder{color:#B5B5B5}
select option{background:#0D0D0D;color:#fff}
button{width:100%;margin-top:14px;font:inherit;font-size:16px;font-weight:500;color:#FFFFFF;background:#5FB3E6;border:0;
  border-radius:8px;padding:16px;cursor:pointer;transition:color 150ms,background-color 150ms}
button:hover{filter:brightness(1.06)}
.card p.fine,.fine{font-size:12px;font-weight:300;color:#DCDCDC;margin:16px 0 0}
.state{display:none;margin-top:14px;padding:12px 14px;border-radius:8px;font-size:14px;color:#FFFFFF;border:1px solid}
.state.ok{display:block;background:rgba(63,191,143,.12);border-color:rgba(63,191,143,.5)}
.state.bad{display:block;background:rgba(200,121,184,.12);border-color:rgba(200,121,184,.5)}
.state.rec{display:block;background:rgba(95,180,214,.10);border-color:rgba(95,180,214,.4)}
.strip{margin-bottom:26px}
.strip a{color:#FFFFFF}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:6px 0 0}
.metrics div{border-top:1px solid rgba(255,255,255,.34);padding-top:12px}
.metrics .n{font-size:32px;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums;line-height:1.2}
.metrics .l{font-size:12px;font-weight:400;color:#E8E8E8}
footer{margin-top:34px;padding-top:16px;border-top:1px solid rgba(255,255,255,.34);text-align:center;font-size:11px;font-weight:300;color:#C4C4C4;line-height:1.9}
.lead{max-width:760px;margin:22px auto 30px;font-size:16px;line-height:1.7;color:#EDEDED}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.quotes .card{padding:22px 26px}
.quotes .q{font-size:18px;font-weight:400;color:#FFFFFF;margin:0 0 14px;line-height:1.45}
.quotes .src{font-size:13px;font-weight:300;color:#DCDCDC;margin:0}
.dates{font-size:14px;letter-spacing:.04em;color:#EDEDED;margin:8px 0 0}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:24px}.quotes{grid-template-columns:1fr}h1{font-size:32px}}
@media(max-width:620px){.metrics{grid-template-columns:1fr 1fr}.card{padding:22px 22px 20px}nav.top{gap:16px;font-size:13px;flex-wrap:wrap}.portrait{width:200px;margin-top:8px}}
.card h3{font-size:16px;font-weight:600;color:#FFFFFF;margin:16px 0 8px;scroll-margin-top:16px}
.plist{margin:0;padding-left:22px}.plist li{font-size:15px;line-height:1.5;margin-bottom:6px}
.plist a{color:#FFFFFF}.plist .meta{display:block;font-size:12px;font-weight:300;color:#DCDCDC}
section[id]{scroll-margin-top:16px}
