:root{
  --cobalt:#1B2BFF;
  --chalk:#F2F2EE;
  --ink:#070B52;
  --signal:#FFE600;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%;background:var(--cobalt);color:var(--chalk);font-family:var(--body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:clamp(1.25rem,3.5vw,2.5rem);overflow:hidden}

.top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:.01em;text-decoration:none;line-height:1}
.wordmark span{color:var(--signal)}
.status{font-weight:500;font-size:.95rem;padding:.35rem .8rem;border:2px solid var(--chalk);border-radius:999px}

.hero{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding:clamp(2rem,5vw,3.5rem) 0}

/* The two bars are the brand's "11": two lane lines, one chalk, one signal. */
.bars{display:flex;gap:clamp(.9rem,3vw,2.2rem);align-items:flex-end;justify-content:center;height:clamp(16rem,58vh,34rem)}
.bar{display:block;width:clamp(3.5rem,13vw,9rem);height:100%;transform-origin:bottom;border-radius:2px;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.bar-a{background:var(--chalk)}
.bar-b{background:var(--signal);animation-delay:.18s}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.copy{max-width:34rem}
h1{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,6.2vw,5rem);line-height:.98;letter-spacing:-.005em;margin-bottom:1.25rem}
.lede{max-width:30rem;margin-bottom:2rem;opacity:.92}

.notify label{display:block;font-weight:500;font-size:.95rem;margin-bottom:.5rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
input{flex:1 1 14rem;min-width:0;font:inherit;color:var(--ink);background:var(--chalk);border:3px solid var(--chalk);border-radius:4px;padding:.8rem 1rem}
input::placeholder{color:#5a5f9e}
input[aria-invalid="true"]{border-color:var(--signal)}
button{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:.02em;color:var(--ink);background:var(--signal);border:3px solid var(--signal);border-radius:4px;padding:.65rem 1.5rem;cursor:pointer;transition:background .15s,color .15s}
button:hover{background:var(--ink);color:var(--signal)}
.msg{min-height:1.6em;margin-top:.7rem;font-weight:500}

.foot{font-size:.9rem;opacity:.85}

@media (max-width:780px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .bars{height:clamp(11rem,30vh,16rem)}
  .bar{width:clamp(2.6rem,16vw,4.5rem)}
  .copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bar{animation:none}
  button{transition:none}
}