/* The homepage's styles (site/index.html). A file rather than an inline
   <style> so the Content-Security-Policy in site/vercel.json can say
   style-src 'self' (2026-10-08). */

@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/public-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/public-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/public-sans-latin-600-normal.woff2) format('woff2')}

:root{
  --ground:#eef2f5; --surface:#fff; --sunken:#f6f8fa;
  --line:#e0e6ec; --line-strong:#c8d3dc;
  /* --ink-3 was #75858f: 3.8:1 on white and 3.4:1 on --ground, under the
     4.5:1 that captions, the footnote, the form note and the footer need
     (2026-09-26 sweep). #5f6e78 is 5.3:1 and 4.7:1, still a step lighter
     than --ink-2. */
  --ink:#0d1720; --ink-2:#4a5a68; --ink-3:#5f6e78;
  --brand:#1c5cab; --brand-hover:#184f95; --brand-soft:#e8f0fb; --brand-soft-line:#c8dcf5;
  /* The navy in the NLR mark itself, sampled from the logo file. Deliberately
     not --brand: the mark is darker than the link/button blue. */
  --navy:#0a285a;
  --focus:#3987e5;
  /* The demo form's two outcomes: sent, and something to fix. */
  --ok:#096909; --err:#9e2626;
  --wrap:1060px; --text:660px;
  --head:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Public Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.narrow{max-width:var(--text)}

/* ---------------------------------------------------------------- nav */
header{border-bottom:1px solid var(--line); background:var(--surface)}
/* Three columns rather than space-between. With space-between the middle item
   lands between two elements of different widths, which is not the middle of
   anything; equal 1fr gutters put the company name on the page's centre line. */
.nav{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px; padding-block:20px;
}
/* Height-driven so the fixed-ratio wordmark stays crisp; it shrinks a little
   on a phone so it never crowds the Sign in link. */
.wordmark{display:block; line-height:0; justify-self:start}
.wordmark img{height:30px; width:auto}
@media (max-width:420px){ .wordmark img{height:25px} }

/* The legal entity, set in the page's own heading face so it reads as part of
   the design rather than as stray text. Archivo with a touch of negative
   tracking is exactly what h1/h2 do, which is what makes it look intentional. */
.navname{
  justify-self:center; font-family:var(--head); font-weight:600; font-size:16px;
  letter-spacing:-0.01em; color:var(--navy); white-space:nowrap;
}
/* Below this the three of them start fighting for the same 400px. The footer
   carries the company name on every page, so nothing is actually lost. */
@media (max-width:639px){ .navname{display:none} }

/* Always the third column. Under 640px .navname is hidden and, placed
   automatically, Sign in fell into the middle column beside the logo. */
.signin{font-size:15px; color:var(--ink-2); font-weight:500; justify-self:end; grid-column:3}
.signin:hover{color:var(--brand)}

/* -------------------------------------------------------------- hero */
.hero{padding-block:76px 0}
h1{
  font-family:var(--head); font-weight:700; letter-spacing:-0.025em; line-height:1.08;
  font-size:clamp(2.1rem,5.2vw,3.35rem); margin:0 0 22px;
}
/* The headline break is a DESKTOP typesetting choice. Left in on a phone it
   forces "hired" onto a line by itself and the whole thing reads broken.
   Below this width the line wraps wherever it naturally lands. */
@media (max-width:560px){ h1 .bk{display:none} }
.sub{font-size:clamp(1.02rem,2vw,1.18rem); color:var(--ink-2); margin:0 0 32px; max-width:var(--text)}
.btn{
  display:inline-block; background:var(--brand); color:#fff; font-weight:600; font-size:16px;
  padding:13px 26px; border-radius:8px; border:0; cursor:pointer; font-family:var(--body);
  transition:background .15s ease;
}
.btn:hover{background:var(--brand-hover); text-decoration:none}

/* ------------------------------------------------------------ shots */
/* margin-inline:0 because a <figure> brings 40px each side from the browser:
   the screenshots sat indented from their captions and, on a phone, shrank
   to three quarters of the column. */
.shot{
  margin-top:52px; margin-inline:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--sunken); box-shadow:0 1px 2px rgba(13,23,32,.04), 0 12px 32px rgba(13,23,32,.07);
}
.shot img{width:100%}
/* The hero's screenshot sits flush on its caption (was a style attribute). */
.hero .shot{margin-bottom:0}
.caption{font-size:13.5px; color:var(--ink-3); margin-top:12px}

/* ----------------------------------------------------------- blocks */
section{padding-block:72px}
section + section{border-top:1px solid var(--line)}
.quiet{background:var(--ground); border-top:1px solid var(--line)}
h2{
  font-family:var(--head); font-weight:700; letter-spacing:-0.018em; line-height:1.2;
  font-size:clamp(1.45rem,3.2vw,1.95rem); margin:0 0 28px;
}
.lede p{font-size:clamp(1.05rem,2.2vw,1.24rem); color:var(--ink-2); margin:0 0 18px; line-height:1.5}
.lede p:last-child{margin-bottom:0; color:var(--ink); font-weight:500}

/* steps */
ol.steps{list-style:none; margin:0; padding:0; counter-reset:s}
ol.steps li{counter-increment:s; position:relative; padding-left:48px; margin-bottom:26px}
ol.steps li:last-child{margin-bottom:0}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:1px;
  width:30px; height:30px; border-radius:50%;
  background:var(--brand-soft); border:1px solid var(--brand-soft-line); color:var(--brand);
  font-family:var(--head); font-weight:700; font-size:14px;
  display:grid; place-items:center;
}
ol.steps b{display:block; font-weight:600; margin-bottom:2px}
ol.steps span{color:var(--ink-2); font-size:16px}

/* rules list */
.rules{list-style:none; margin:0; padding:0}
.rules li{margin-bottom:22px; padding-left:22px; position:relative; color:var(--ink-2); font-size:16.5px}
.rules li:last-child{margin-bottom:0}
.rules li::before{
  content:""; position:absolute; left:0; top:11px; width:7px; height:7px;
  border-radius:50%; background:var(--brand);
}
.rules b{color:var(--ink); font-weight:600}
.footnote{margin-top:30px; font-size:14.5px; color:var(--ink-3); font-style:italic}

/* built-for-baseball */
.facts{display:grid; gap:26px; max-width:var(--text)}
.facts p{margin:0; color:var(--ink-2); font-size:16.5px}
.facts b{display:block; color:var(--ink); font-weight:600; font-size:17px; margin-bottom:3px}

/* ------------------------------------------------------------- form */
.close{text-align:center}
.close h2{margin-bottom:10px}
.close .why{color:var(--ink-2); margin:0 auto 34px; max-width:440px}
form{max-width:440px; margin:0 auto; text-align:left}
.field{margin-bottom:16px}
label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
input,select{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface);
}
input:focus,select:focus{border-color:var(--focus); outline:2px solid rgba(57,135,229,.22); outline-offset:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
form .btn{width:100%; margin-top:8px; padding-block:14px}
.formnote{font-size:13px; color:var(--ink-3); margin-top:14px; text-align:center}
/* Empty until there is something to say, and it takes no room until then.
   It is never display:none: a live region has to be on the page before its
   text changes, or a screen reader may not read the change out. */
.msg{margin:0; font-size:15px; text-align:center}
.msg:not(:empty){margin-top:14px}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--err)}
/* The field the problem is in. The blue focus ring stays; the border says why. */
input[aria-invalid="true"], input[aria-invalid="true"]:focus{border-color:var(--err)}

/* ----------------------------------------------------------- footer */
footer{border-top:1px solid var(--line); background:var(--ground); padding-block:34px}
.fnav{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; font-size:14px; color:var(--ink-3)}
.fnav a{color:var(--ink-2)}
.fnav .spacer{flex:1 1 auto}

@media (max-width:560px){
  section{padding-block:56px}
  .hero{padding-block:52px 0}
  .shot{margin-top:36px}
}

/* ------------------------------------------------------ scroll reveal */
/* Text and screenshots rise gently into place as they come into view, once.
   Keyed off html.js, set in <head> before the first paint, so nothing flashes
   and then hides; without JavaScript, or if the reveal script never runs
   (the head script removes .js after 3s), everything simply shows. Calm on
   purpose: no scroll-jacking, no parallax - the buyer is a head coach
   deciding whether to trust us with recruits' data. */
.js .hero h1, .js .hero .sub, .js .hero .btn,
.js .lede p, .js main h2, .js ol.steps li, .js .facts p, .js .rules li,
.js .footnote, .js main figure.shot, .js main .caption, .js .close .why, .js #demo-form{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
}
.js main figure.shot{transform:translateY(30px) scale(.985)}
.js .is-in{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .js .hero h1, .js .hero .sub, .js .hero .btn,
  .js .lede p, .js main h2, .js ol.steps li, .js .facts p, .js .rules li,
  .js .footnote, .js main figure.shot, .js main .caption, .js .close .why, .js #demo-form{
    opacity:1; transform:none; transition:none;
  }
}