/* collect.quest — THE SITE SHELL: header, phone menu, footer (NAV-SHELL-2).
   One stylesheet for every public page, loaded LAST by the generated qs:head
   region (scripts/site-shell.mjs). It carries its own tokens and sets its own
   type, colour and spacing, so it looks the same whether the page underneath is
   built on launch.css, vault.css or show.css. Every class is qs-prefixed so it
   can never collide with a page's own classes.

   Theme, the launch shell's rule: dark is the default; light follows the
   visitor's system setting (prefers-color-scheme), and [data-theme] on <html>
   forces either for review. The look is the launch shell's (export17), moved
   here from launch.css so there is one copy. */

:root{
  --qs-bg:#080706; --qs-panel:#0E0D0B; --qs-rule:#2A2620;
  --qs-text:#F0E9DA; --qs-text-2:#CFC7B8; --qs-text-3:#9C9486;
  --qs-accent:#D8A94E; --qs-btn:#D8A94E; --qs-btn-text:#17140F;
  --qs-sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --qs-serif:'Instrument Serif',Georgia,serif;
  --qs-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --qs-wrap:1152px; --qs-gutter:64px;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --qs-bg:#F6F1E7; --qs-panel:#FBF8F2; --qs-rule:#D8CFBE;
    --qs-text:#17140F; --qs-text-2:#3B352B; --qs-text-3:#6B6355;
    --qs-accent:#7A5714; --qs-btn:#17140F; --qs-btn-text:#F6F1E7;
  }
}
:root[data-theme="light"]{
  --qs-bg:#F6F1E7; --qs-panel:#FBF8F2; --qs-rule:#D8CFBE;
  --qs-text:#17140F; --qs-text-2:#3B352B; --qs-text-3:#6B6355;
  --qs-accent:#7A5714; --qs-btn:#17140F; --qs-btn-text:#F6F1E7;
}

/* the shell's own ground rules — a page's `*{margin:0}` or `a{color:…}` stops here */
.qs-top,.qs-foot,.qs-skip{font-family:var(--qs-sans);-webkit-font-smoothing:antialiased;text-align:left}
.qs-top *,.qs-top *::before,.qs-top *::after,.qs-foot *,.qs-foot *::before,.qs-foot *::after{box-sizing:border-box}
.qs-top a,.qs-foot a,.qs-top a:hover,.qs-foot a:hover{text-decoration:none}
.qs-top :focus-visible,.qs-foot :focus-visible,.qs-skip:focus-visible{outline:2px solid var(--qs-accent);outline-offset:3px}
.qs-wrap{max-width:calc(var(--qs-wrap) + 2*var(--qs-gutter));margin:0 auto;padding:0 var(--qs-gutter)}
.qs-skip{position:absolute;left:-999px;top:0}
.qs-skip:focus{left:16px;top:16px;z-index:50;background:var(--qs-btn);color:var(--qs-btn-text);padding:8px 12px;border-radius:6px;font-size:15px}
#qs-content{display:block;height:0;outline:0}

/* ---------- header ---------- */
/* The header wordmark is HOME's (vault.css .nav-wordmark): 36px tall while the
   links show, 30px once they fold into the menu. Home is the canonical shell;
   the other pages come to it. Width follows the mark's own 1990:718 shape. */
.qs-mark{display:block;height:36px;width:auto;aspect-ratio:1990/718;background:var(--qs-text);
  -webkit-mask:url(/assets/brand/quest-wordmark-cream.svg) no-repeat left center/contain;
          mask:url(/assets/brand/quest-wordmark-cream.svg) no-repeat left center/contain}
.qs-top{position:sticky;top:0;z-index:20;background:var(--qs-bg);border-bottom:1px solid var(--qs-rule);margin:0;padding:0}
.qs-top-in{display:flex;align-items:center;height:83px;gap:28px}
.qs-brand{display:flex;align-items:flex-start;flex:none}
/* Trademark marks (Rob, 12 Oct 2026: a TM where Quest and Lexi are; word marks
   only, never the stylized L). Small, raised, the text colour; decorative to
   screen readers, which already hear the name. */
.qs-tm{font:500 11px/1 var(--qs-sans);color:var(--qs-text);margin:1px 0 0 2px}
.tm{font-size:.62em;line-height:0;vertical-align:.6em;margin-left:.05em;letter-spacing:0;font-weight:inherit}
.qs-nav{display:flex;gap:28px;margin-left:auto;margin-right:auto}
.qs-nav a,.qs-util a.qs-signin{font:500 15px/1 var(--qs-sans);color:var(--qs-text-2);padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.qs-nav a:hover,.qs-util a.qs-signin:hover{color:var(--qs-text)}
.qs-nav a[aria-current="page"]{color:var(--qs-text);border-bottom-color:var(--qs-accent)}
.qs-util{display:flex;align-items:center;gap:32px}
.qs-util a.qs-signin{color:var(--qs-text)}
.qs-btn,.qs-btn:hover{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 22px;border-radius:999px;background:var(--qs-btn);color:var(--qs-btn-text);font:600 15px/1 var(--qs-sans);white-space:nowrap}
.qs-btn:hover{text-decoration:underline;text-underline-offset:4px}

/* --- How It Works sub-nav (desktop only) --- */
.qs-sub{background:var(--qs-bg);border-bottom:1px solid var(--qs-rule)}
.qs-sub-in{display:flex;gap:24px;padding-top:10px;padding-bottom:10px}
.qs-sub a{font:400 14px/1 var(--qs-sans);color:var(--qs-text-3);white-space:nowrap}
.qs-sub a:hover{color:var(--qs-text)}

/* --- NAV2 links in .qs-util (before Sign in) --- */
.qs-util a:not(.qs-signin):not(.qs-btn){font:500 15px/1 var(--qs-sans);color:var(--qs-text-2);padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.qs-util a:not(.qs-signin):not(.qs-btn):hover{color:var(--qs-text)}
.qs-util a:not(.qs-signin):not(.qs-btn)[aria-current="page"]{color:var(--qs-text);border-bottom-color:var(--qs-accent)}

/* phone menu: a <details>; assets/shell.js adds Escape and click-outside */
.qs-menu{display:none}
.qs-menu>summary{list-style:none;cursor:pointer;width:48px;height:48px;border:1px solid var(--qs-rule);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--qs-text)}
.qs-menu>summary::-webkit-details-marker{display:none}
.qs-menu .qs-i-close{display:none}
.qs-menu[open] .qs-i-open{display:none}
.qs-menu[open] .qs-i-close{display:block}
.qs-sheet{position:absolute;left:0;right:0;top:100%;background:var(--qs-panel);border-bottom:1px solid var(--qs-rule);padding:6px 20px 24px;max-height:calc(100vh - 71px);overflow-y:auto}
.qs-sheet a.qs-row{display:flex;justify-content:space-between;align-items:center;height:53px;border-bottom:1px solid var(--qs-rule);font:500 18px/1 var(--qs-sans);color:var(--qs-text)}
.qs-sheet a.qs-row[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--qs-accent)}
.qs-sheet a.qs-row-util{color:var(--qs-text-2);border-bottom:0}
.qs-sheet a.qs-row.qs-row-cta{display:flex;justify-content:center;align-items:center;height:48px;margin-top:8px;border-radius:999px;background:var(--qs-btn);color:var(--qs-btn-text);font:600 16px/1 var(--qs-sans);border-bottom:0}
.qs-sheet .qs-row-label{display:block;padding:18px 0 4px;font:500 12px/1 var(--qs-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--qs-text-3);border-bottom:1px solid var(--qs-rule)}
.qs-sheet a.qs-row-sub{padding-left:20px;font-size:16px;color:var(--qs-text-2);height:46px}

/* ---------- footer ---------- */
.qs-foot{border-top:1px solid var(--qs-rule);padding:56px 0 34px;margin:96px 0 0;background:var(--qs-bg);color:var(--qs-text-3)}
.qs-foot-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:24px}
.qs-foot .qs-mark{width:80px;height:29px}
.qs-foot .qs-line{font:italic 400 21px/27px var(--qs-serif);color:var(--qs-text-2);margin:18px 0 0;max-width:260px}
.qs-foot .qs-fine{font:400 13px/1.55 var(--qs-sans);color:var(--qs-text-3);margin:14px 0 0;max-width:280px}
.qs-foot h4{font:500 12px/1 var(--qs-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--qs-text-3);margin:6px 0 22px}
.qs-foot ul{list-style:none;padding:0;margin:0}
.qs-foot li{margin:0 0 18px}
.qs-foot li a{font:400 15px/1.3 var(--qs-sans);color:var(--qs-text-2)}
.qs-foot li a:hover{color:var(--qs-text)}
.qs-foot-base{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--qs-rule);margin-top:30px;padding-top:22px;font:400 14px/1.4 var(--qs-sans);color:var(--qs-text-3)}
.qs-foot-base a{color:var(--qs-text-3)}

@media (max-width:1100px){
  .qs-nav{gap:20px}
  .qs-util{gap:20px}
}
@media (max-width:1000px){
  .qs-nav,.qs-util>a.qs-signin,.qs-util>a:not(.qs-signin):not(.qs-btn):not(.qs-menu){display:none}
  .qs-sub{display:none}
  .qs-menu{display:block}
  .qs-util{margin-left:auto;gap:10px}
  .qs-top .qs-mark{height:30px}
  .qs-foot-grid{grid-template-columns:repeat(3,1fr)}
  .qs-foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--qs-gutter:20px}
  .qs-top-in{height:71px}
  .qs-foot{margin-top:56px}
  .qs-foot-grid{grid-template-columns:1fr 1fr;gap:28px 16px}
  .qs-foot-base{font-size:13px;flex-wrap:wrap}
}