:root { --gold: #ffd978; --glass: linear-gradient(165deg, rgba(30, 38, 66, .5), rgba(11, 16, 33, .66) 60%); --edge: rgba(236, 238, 245, .14); }

/* the night meadow behind the top of every page, fading into the night blue */
body.inner { position: relative; }
body.inner::before {
  content: ""; position: absolute; inset: 0 0 auto; height: min(560px, 80vh); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 23, 43, .45), rgba(16, 23, 43, .82) 55%, var(--night)),
              url(img/night-starless.webp) center 62% / cover no-repeat;
}
body.inner { isolation: isolate; }

/* header: the home page's, with the Growth Portal */
.top { background: rgba(11, 16, 33, .9); }
.nav { align-items: center; }
.nav a.nav-portal { display: inline-flex; align-items: center; gap: 7px; }
.spark { width: 12px; height: 12px; fill: var(--gold); flex: none; filter: drop-shadow(0 0 4px rgba(255, 217, 120, .6)); }
.book { border-width: 1px; }

/* title area */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumbs::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--gold);
  clip-path: polygon(50% 0, 57.5% 42.5%, 100% 50%, 57.5% 57.5%, 50% 100%, 42.5% 57.5%, 0 50%, 42.5% 42.5%); }
article h1 { text-shadow: 0 2px 24px rgba(5, 8, 20, .6); text-wrap: balance; }
article h2 { text-wrap: balance; }
.glyph.hub { display: block; width: 92px; height: 72px; margin: 6px 0 10px; overflow: visible; }
.glyph .gl { fill: none; stroke: #c4d0ee; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.glyph .gd { fill: #f5efd8; }
.glyph .gs path { fill: var(--gold); }
.glyph .gh { fill: rgba(255, 217, 120, .2); }

/* frosted glass for the boxes, tables and cards */
.tbl, .offer, details.qa, .lookup, .help, .facts, .policy, .review, figure.flow {
  background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 36px rgba(4, 7, 18, .28);
}
.offer { transition: border-color .3s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.offer:hover { border-color: rgba(255, 217, 120, .34); transform: translateY(-2px); }
details.qa { padding-inline: 18px; margin-bottom: 10px; }
.chip { background: rgba(255, 217, 120, .14); color: #ffe7a3; border: 1px solid rgba(255, 217, 120, .3); }
.tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid rgba(168, 175, 195, .4); color: var(--mist);
  font: 600 10.5px/1.6 var(--body); letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; }

/* buttons: the home page's */
article .cta, .cta { background: var(--dusk); color: #1b1209; border: 0; padding: 12px 20px; font: 600 15px/1 var(--body);
  text-decoration: none; display: inline-block; box-shadow: 0 8px 22px rgba(234, 149, 91, .18); transition: filter .2s, transform .2s; }
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* contents rail */
.toc a.on { color: #fff3cf; }
.toc p { color: var(--gold); }

/* footer: the home page's */
footer { background: var(--deep); border-top: 1px solid var(--line); padding: 40px var(--gut-r) calc(40px + env(safe-area-inset-bottom, 0px)) var(--gut-l); }
footer .in { display: flex; flex-wrap: wrap; gap: 16px 36px; justify-content: space-between; align-items: center; max-width: 1080px; margin: 0 auto; }
footer .fmark { font: 300 22px/1 var(--display); letter-spacing: .14em; }
footer .fmark em { display: block; margin-top: 6px; font: italic 500 17px/1 var(--display); letter-spacing: 0; color: var(--mist); }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer nav a, footer .mail { text-decoration: none; color: var(--mist); font-size: 15px; }
footer nav a:hover, footer .mail:hover { color: var(--moonlight); }
footer small { color: var(--mist); }

/* phones: the Menu button (pages/build_pages.py) */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; border: 1px solid currentColor; padding: 8px 11px; font: 600 13.5px/1 var(--body); min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; display: grid; padding: 8px 0;
  background: var(--deep); border: 1px solid var(--edge); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.mnav nav a { padding: 12px 18px; text-decoration: none; font: 500 15px/1.2 var(--body); }
.mnav nav a:hover { background: rgba(255, 255, 255, .05); }
/* reading width: about 70 characters a line (site-reviewer) */
article p, article li { max-width: 70ch; }
article .tbl li, article td p, .offer p { max-width: none; }
/* tap targets: 44 px tall (site-reviewer) */
footer nav a, footer .mail { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 640px) {
  .mnav { display: block; }
  .nav { display: flex; gap: 14px; }   /* phones: the Growth Portal stays in the header; the rest is in the footer */
  .nav a:not(.nav-portal) { display: none; }
  .nav a.nav-portal { font-size: 14px; white-space: nowrap; }
  .left { gap: 12px; }
  .book { display: none; }             /* phones: Contact us is in the Menu */
  .home { font-size: 17px; }
  .glyph.hub { width: 72px; height: 56px; }
}
@media (max-width: 820px), (pointer: coarse) { .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 16, 33, .97); } }
@media (prefers-reduced-motion: reduce) { .offer, .cta { transition: none; } .offer:hover, .cta:hover { transform: none; } }
/* what's left of the guides' research notes: advice a reader can act on ("Check your state's deadline.") */
.hint { color: var(--mist); font-size: .92em; font-style: italic; }
/* long web addresses written out in notes wrap instead of pushing a phone screen wider */
article p, article li, article dd, .note { overflow-wrap: anywhere; }
/* guides: the first chapter sits right under the search and filter row (site-reviewer: an empty band there) */
.tb-none + .tb-ch > h2 { margin-top: .4em; }