/* The public front door and the FAQ.

   Loaded only by welcome.html and faq.html, on top of app.css for the brand
   tokens and the typefaces.  Kept in its own file because the outside of the
   building has nothing in common with the inside: no ribbon, no tables, no
   density.  Mixing the two stylesheets would mean every future change to the
   app's chrome having to be checked against a marketing page. */

.welcome {
  background: var(--surface, #F4F6F8);
  color: var(--ink, #16202E);
  font-size: 17px;
  line-height: 1.62;
}
/* app.css sets h2 as a small uppercase section label, which is right inside the
   application and wrong on a page whose headings are headlines.  Reset here
   rather than there: the app has a hundred of those labels and this has six
   headings. */
.welcome h1, .welcome h2, .welcome h3 {
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}
.welcome .w-wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

/* ---------- the holding page ---------- */
/* One screen, centred, navy.  Nothing to scroll and nothing to read twice. */
.holding { background: var(--navy, #1F3A6E); min-height: 100vh;
  display: flex; flex-direction: column; }
.h-stage { flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px 28px; }
.h-inner { max-width: 760px; text-align: center; }
.h-mark { height: 34px; width: auto; margin: 0 auto 52px; display: block; }
.holding h1 {
  font-family: var(--font-display, inherit); font-weight: 700; color: #fff;
  font-size: clamp(28px, 5.4vw, 54px); line-height: 1.16;
  letter-spacing: -.015em; margin: 0;
}
.h-rule { width: 56px; height: 3px; border-radius: 2px;
  background: var(--olive, #9A9500); margin: 40px auto 0; }
.h-foot { padding: 0 28px 34px; text-align: center; }
.h-foot a {
  color: #7E90B2; text-decoration: none; font-size: 13.5px;
  font-family: var(--font-display, inherit); letter-spacing: .04em;
}
.h-foot a:hover { color: #C9D3E4; text-decoration: underline; }

/* ---------- the FAQ's own bar, and the page ---------- */
.w-top { background: var(--navy, #1F3A6E); display: flex; align-items: center;
  gap: 24px; padding: 16px 28px; flex-wrap: wrap; }
.w-lockup img { height: 30px; width: auto; display: block; }
.w-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.w-nav a { color: #C9D3E4; text-decoration: none; font-size: 15px;
  font-family: var(--font-display, inherit); font-weight: 500; }
.w-nav a:hover { color: #fff; }
.w-nav .w-signin { color: var(--navy, #1F3A6E); background: #fff;
  padding: 8px 18px; border-radius: 7px; font-weight: 600; }
.w-wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }
.w-foot { background: var(--navy-deep, #152A52); color: #8FA0BE;
  padding: 30px 0; font-size: 14px; }
.w-foot .w-wrap { display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; }
.w-foot p { margin: 0; }
.w-foot strong { color: #C9D3E4; }
.w-foot a { color: #C9D3E4; text-decoration: none; }
.w-foot a:hover { color: #fff; text-decoration: underline; }

.w-faq { padding: 56px 0 80px; }
.w-faq h1 {
  font-family: var(--font-display, inherit); font-weight: 700;
  font-size: clamp(30px, 4vw, 42px); color: var(--navy, #1F3A6E);
  letter-spacing: -.015em; margin: 0 0 10px;
}
.w-faq .w-sub { color: var(--slate, #5A6472); max-width: 60ch; margin: 0 0 36px; }
.w-faq-group { margin-bottom: 40px; }
.w-faq-group > h2 {
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 22px;
  color: var(--navy, #1F3A6E); margin: 0 0 4px;
}
.w-faq-group > .w-blurb {
  color: var(--slate, #5A6472); font-size: 15px; margin: 0 0 18px;
}
.w-qa {
  background: #fff; border: 1px solid var(--border, #DDE3EA);
  border-radius: 10px; margin-bottom: 10px; overflow: hidden;
}
.w-qa > summary {
  cursor: pointer; padding: 16px 22px; list-style: none;
  font-family: var(--font-display, inherit); font-weight: 600; font-size: 16.5px;
  color: var(--navy, #1F3A6E); display: flex; align-items: center; gap: 12px;
}
.w-qa > summary::-webkit-details-marker { display: none; }
.w-qa > summary::before {
  content: "+"; color: var(--olive-deep, #7A7600); font-weight: 700;
  font-size: 19px; line-height: 1; flex: none; width: 14px;
}
.w-qa[open] > summary::before { content: "\2212"; }
.w-qa > summary:hover { background: var(--surface, #F4F6F8); }
.w-qa-body { padding: 0 22px 18px 48px; font-size: 16px; }
.w-qa-body p { margin: 0; }

.w-faq-foot {
  background: var(--olive-wash, #F2F1DC); border-left: 5px solid var(--olive, #9A9500);
  border-radius: 0 10px 10px 0; padding: 22px 26px; margin-top: 12px;
}
.w-faq-foot p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .w-top { gap: 14px; }
  .w-nav { gap: 16px; width: 100%; }
  .h-mark { margin-bottom: 36px; }
}