/*
 * 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-blue:#0b7fc2;
  --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{
  /* One value sets the block's whole vertical rhythm: the space above the company lockup, the space
     between it and the network name below, and the space under that name are all this, so the three
     bands read as evenly spaced rather than three numbers that happen to sit near each other. Change
     the rhythm here and all three move together. */
  --pan-brand-rhythm:2rem;
  background:var(--pan-ink);
  color:var(--pan-on-ink);
  padding:var(--pan-brand-rhythm) 1.5rem;
  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}
/* "presents the" opens the second band, so it carries the full rhythm above it. The name that follows
   does not: those two lines are one lockup -- a lead-in and the thing it leads into -- and a rhythm-sized
   gap between them would break them into two separate announcements. */
.pan-brand-presents{margin:var(--pan-brand-rhythm) 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:.25rem 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;
}
.pan-footer-link{color:var(--pan-blue)}
.pan-footer-link:hover,.pan-footer-link:focus{color:var(--pan-blue)}

@media (max-width:32rem){
  /* Retuning the one rhythm value tightens all three bands at once. */
  .pan-brand{--pan-brand-rhythm:1.5rem;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}
}