/* The shell every page on the new design shares: the tokens, the header, the
   scrolling pill row that replaces it on a narrow screen, the account chip, the
   footer, and the dialogs that assets/site.js and assets/legal.js inject into
   whatever page they are loaded on. Nothing that belongs to any one page.

   It was inlined in each generated page, which is fine for the three pages the
   generator writes and no use at all to the thirty-odd it does not. Those are
   still on assets/site.css, an older system that happens to use several of the
   same variable names for different colours - so a page cannot load both. This
   is what a page moves TO, not something it adds.

   Extracted from public/pricing.html rather than rewritten, so a page using it
   gets the same header, not a copy that will drift away from it. */

:root{--paper:#fff8ef;--cream:#f3eadf;--card:#fffdf8;--ink:#251111;--muted:#69544f;--red:#8d1f1f;--red2:#bd4336;--green:#1d725e;--line:rgba(37,17,17,.15);--serif:"Playfair Display",Georgia,serif;--sans:Manrope,Arial,sans-serif;--mono:"DM Mono",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
.hidden{display:none!important}
.brand{display:inline-flex;align-items:center;gap:.25em;font-size:19px;font-weight:800;letter-spacing:-.055em;white-space:nowrap}
.brand .soft{font-weight:700;opacity:.5}
.brand .mark{width:1.94em;height:1.94em;display:block;color:#171717;overflow:visible;flex:0 0 auto}
.brand .mark .mnum{fill:var(--paper)}
.site-nav{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}
.nav-links{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:700;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-button{padding:12px 18px!important;border-radius:999px;background:var(--ink);color:var(--paper)!important}
.nav-button:hover{background:var(--red)}
.site-footer{border-top:1px solid var(--line);padding:29px 0 38px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
.footer-links{display:flex;gap:18px}
@media(max-width:650px){
  .wrap{width:min(100% - 28px,1180px)}
  .site-nav{height:66px}
  .brand{font-size:15px}
  .nav-links > a:not(.nav-button){display:none}
  .nav-button{padding:10px 12px!important;font-size:10px}
  .site-footer{align-items:flex-start;flex-direction:column}
  .footer-links{flex-wrap:wrap}
}
.mobile-nav{display:none}
@media(max-width:650px){
  .mobile-nav{display:flex;gap:8px;overflow-x:auto;padding:8px 0 11px;border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mobile-nav::-webkit-scrollbar{display:none}
  .mobile-nav a{flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:10px;font-weight:800;white-space:nowrap}
  .mobile-nav a[href="/dashboard"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .mobile-nav a.hidden{display:none!important}
}
.acct{position:relative;display:inline-flex;align-items:center;gap:8px}
.acct-btn{display:none;border:0;background:transparent;padding:0;cursor:pointer}
.acct-ini{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 13px/1 var(--serif);border:2px solid transparent}
.acct-ini.pro{border-color:var(--green)}
.acct-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:60;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 32px rgba(37,17,17,.16);padding:6px;display:flex;flex-direction:column;gap:2px}
.acct-menu[hidden]{display:none}
.acct-menu .acct-who{padding:8px 10px 9px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;font:600 13px var(--sans);color:var(--muted);padding:9px 10px;border-radius:7px;cursor:pointer}
.acct-menu a:hover,.acct-menu button:hover{background:var(--paper);color:var(--ink)}
.acct-pro{font:500 9px var(--mono);text-transform:uppercase;color:var(--green)}
.acct-em{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-out{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);cursor:pointer;font:700 11px var(--sans);padding:6px 10px}
.dlg,.lmodal{position:fixed;inset:0;background:rgba(37,17,17,.64);z-index:350;display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(8px)}
.dlg.hidden,.lmodal.hidden{display:none!important}
.dlg-in,.lmodal-in{background:var(--card);border:1px solid var(--line);box-shadow:0 28px 80px rgba(37,17,17,.3)}
.dlg-in{width:min(420px,100%);padding:24px;display:flex;flex-direction:column;gap:13px;border-radius:18px}
.dlg-in h3{font:600 24px var(--serif);margin:0}
.dlg-body{font-size:14px;line-height:1.6;color:var(--muted)}
.dlg-acts{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.lmodal{z-index:300}
.lmodal-in{width:min(760px,100%);max-height:min(86vh,900px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden}
.lmodal-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--line);flex:none}
.lmodal-hd .eyebrow{font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.lmodal-hd h2{font:600 28px var(--serif);margin:4px 0 0}
.lmodal-x{border:0;background:transparent;font-size:27px;color:var(--muted);cursor:pointer}
.lmodal-body{overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:24px}
.lmodal-ft{border-top:1px solid var(--line);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--paper);flex:none}
.lmodal-ft .row{display:flex;gap:9px;flex-wrap:wrap}
.lmodal-body section{display:flex;flex-direction:column;gap:11px;padding:0;border:0}
.lmodal-body h2{font:600 20px var(--serif);margin:0}
.lmodal-body p,.lmodal-body li{font-size:13px;line-height:1.62;color:var(--muted)}
.lmodal-body ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.lnote{border-left:3px solid #8a5b12;background:#faf0dc;padding:12px 14px;font-size:13px;line-height:1.55;color:var(--muted)}
.ltable{width:100%;border-collapse:collapse;font-size:12px;display:block;overflow-x:auto}
.ltable th,.ltable td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
@media(max-width:720px){
  .acct-btn{display:block}
  .acct-em,.acct-out,.acct-pro{display:none}
  .nav-links [data-acct]{display:block}
  .lmodal{padding:0}
  .lmodal-in{max-height:100vh;height:100%;width:100%;border:0;border-radius:0}
  .lmodal-hd{padding:16px}
  .lmodal-body{padding:18px 16px}
  .lmodal-ft{padding:12px 16px}
  .lmodal-ft .row{width:100%}
  .lmodal-ft .btn{flex:1}
  .dlg-acts{flex-direction:column-reverse}
  .dlg-acts .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media(max-width:1080px){
  .site-nav .nav-links a[href="#why"],.site-nav .nav-links a[href="/#why"]{display:none}
}
@media(max-width:900px){
  .site-nav .nav-links > a:not(.nav-button){display:none}
  .mobile-nav{display:flex;gap:8px;overflow-x:auto;padding:8px 0 11px;
    border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mobile-nav::-webkit-scrollbar{display:none}
  .mobile-nav a{flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);
    border-radius:999px;background:var(--card);color:var(--ink);font-size:11px;
    font-weight:700;white-space:nowrap;text-decoration:none}
  .mobile-nav a[href="/dashboard"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .mobile-nav a.hidden{display:none!important}
}
.nav-intel{display:inline-flex;align-items:center;gap:8px;padding:10px 16px!important;
  border:1px solid var(--ink);border-radius:999px;color:var(--ink)!important;
  transition:background .16s,color .16s}
.nav-intel:hover{background:var(--ink);color:var(--paper)!important}
.nav-intel i{width:6px;height:6px;border-radius:50%;background:var(--red);display:block;
  flex:0 0 auto}
.nav-intel:hover i{background:var(--paper)}

/* The button, because assets/site.js writes "btn sm" and "btn ghost sm" into
   the sign-out confirmation on whatever page it is loaded on, and a dialog
   whose buttons are unstyled text is worse than no dialog. The base is the one
   the generated pages use; sm and ghost are the two variants the script asks
   for and the design did not yet name. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:16px 23px;background:var(--red);color:var(--paper);font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 13px 24px rgba(141,31,31,.17);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 17px 29px rgba(141,31,31,.24);background:#731818}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn.dark{background:var(--ink)}
.btn.dark:hover:not(:disabled){background:#3a1c1c}
.btn.sm{padding:10px 16px;font-size:12px;box-shadow:none}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover:not(:disabled){background:var(--cream);color:var(--ink);box-shadow:none}