/*
 * The Pay Attention Network's own stylesheet. One file, hand-written, no build step -- the same
 * choice Auth made, for the same reason: this product is a few static pages, and a pipeline would
 * be more machinery than page.
 *
 * The brand values are the Foundation Software brand style guide's, restated here rather than
 * shared, because these three products (this, Auth, payattnlabs.com) deliberately ship no common
 * stylesheet. Keeping them in step is a matter of the tokens below matching auth.css's.
 */

@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --pan-ink:#101010;
  --pan-on-ink:#f1f0f0;
  --pan-on-ink-mute:#a8a8a8;
  --pan-yellow:#fcd602;
  --pan-link:#acceed;
  --pan-bg:#f4f5f7;
  --pan-surface:#ffffff;
  --pan-text:#1f2933;
  --pan-muted:#616e7c;
  --pan-border:#d9dee3;
  --pan-radius:8px;
  --pan-font:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--pan-bg);
  color:var(--pan-text);
  font-family:var(--pan-font);
  font-size:16px;
  line-height:1.6;
}

/* The identity block, matching auth.css rule for rule so that arriving here from the sign-in page
   reads as one place rather than two sites that happen to share a palette. */
.pan-brand{
  background:var(--pan-ink);
  color:var(--pan-on-ink);
  padding:3rem 1.5rem 3.25rem;
  text-align:center;
  font-family:var(--pan-font);
}
.pan-brand-company{display:flex;align-items:center;justify-content:center;gap:.6rem}
.pan-brand-mark{display:block;flex:0 0 auto;width:auto;height:45px}
.pan-brand-name{font-size:20px;line-height:30px;font-weight:700;text-align:left}
.pan-brand-presents{margin:.9rem 0 0;font-size:.85rem;line-height:1.2;font-weight:400;letter-spacing:.08em;color:var(--pan-on-ink-mute)}
.pan-brand-network{margin:.2rem 0 0;font-size:2.25rem;line-height:1.2;font-weight:700;color:var(--pan-yellow)}
.pan-brand-tagline{margin:1rem auto 0;max-width:34rem;font-size:1rem;line-height:1.5;color:var(--pan-on-ink-mute)}

.pan-main{max-width:44rem;margin:0 auto;padding:2.5rem 1.5rem 3rem}

.pan-section{
  background:var(--pan-surface);
  border:1px solid var(--pan-border);
  border-radius:var(--pan-radius);
  padding:1.75rem 1.75rem 1.5rem;
  margin:0 0 1.25rem;
}
.pan-section h2{margin:0 0 .6rem;font-size:1.15rem;line-height:1.3;font-weight:700}
.pan-section p{margin:0 0 .85rem}
.pan-section p:last-child{margin-bottom:0}
.pan-section ul{margin:0 0 .85rem;padding-left:1.2rem}
.pan-section li{margin:0 0 .4rem}

.pan-lede{font-size:1.05rem;color:var(--pan-text)}
.pan-muted{color:var(--pan-muted);font-size:.95rem}

a{color:#1f5fbf;text-underline-offset:2px}
a:hover,a:focus{color:var(--pan-ink)}

.pan-footer{
  padding:1.5rem;
  text-align:center;
  color:var(--pan-muted);
  font-size:.85rem;
}

@media (max-width:32rem){
  .pan-brand{padding-left:1rem;padding-right:1rem}
  .pan-brand-mark{height:38px}
  .pan-brand-name{font-size:17px;line-height:24px}
  .pan-brand-network{font-size:1.6rem}
  .pan-section{padding:1.25rem}
}