/* The top bar and footer shared by every spidee.ai page.
   Markup: scripts/marketing-chrome/nav.html and footer.html, stamped into each page
   between <!-- site-chrome:nav --> and <!-- site-chrome:footer --> markers by
   scripts/marketing-chrome/stamp.mjs. Edit the snippets, run the script, never the pages.
   Self-contained on purpose: it sits on the Tailwind pages (home, MyTable) and the
   plain-CSS pages (About, Blog) alike, so every value is explicit and every selector is
   prefixed sn-. Colours and type are the homepage tokens (index.html tailwind.config). */

.sn-header,.sn-footer{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#2A241E;-webkit-font-smoothing:antialiased;text-align:left}
.sn-header *,.sn-footer *{box-sizing:border-box}
/* Some pages style bare <nav> and <footer> elements (sticky bars, dark footers). Neutralise that here. */
.sn-header nav,.sn-footer nav{position:static;top:auto;left:auto;right:auto;z-index:auto;height:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin:0}
.sn-footer{padding:0;margin:0}

/* ── Top bar ── */
.sn-header{position:sticky;top:0;z-index:50;background:rgba(246,241,232,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(222,213,198,.7)}
.sn-bar{max-width:72rem;margin:0 auto;padding:0 1.5rem;height:4rem;display:flex;align-items:center;gap:1rem;position:relative}
.sn-logo{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-lead);font-weight:700;color:#1B1714;letter-spacing:-.01em;text-decoration:none;flex-shrink:0;line-height:1}
.sn-logo img{display:block;width:30px;height:30px}
.sn-logo:hover{text-decoration:none;color:#1B1714}

.sn-header .sn-nav{display:flex;align-items:center;gap:1.75rem;margin-left:1.25rem;font-size:var(--fs-small);font-weight:500}
.sn-nav>a,.sn-group>summary{color:#2A241E;text-decoration:none;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:.3rem;padding:.5rem 0;line-height:1;font-size:var(--fs-small);font-weight:500}
.sn-nav>a:hover,.sn-group>summary:hover,.sn-group[open]>summary{color:#1B1714;text-decoration:none}
.sn-nav>a[aria-current="page"]{color:#1B1714;font-weight:600}
.sn-group{position:relative}
.sn-group>summary{list-style:none}
.sn-group>summary::-webkit-details-marker{display:none}
.sn-chev{width:.85rem;height:.85rem;transition:transform .15s;flex-shrink:0}
.sn-group[open] .sn-chev{transform:rotate(180deg)}
.sn-panel{position:absolute;left:-.75rem;top:calc(100% + .4rem);min-width:18rem;padding:.5rem;background:#FFFDF8;border:1px solid #DED5C6;border-radius:1rem;box-shadow:0 18px 50px -18px rgba(80,45,20,.28);z-index:60;white-space:normal}
.sn-panel a{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;border-radius:.75rem;text-decoration:none;color:#2A241E}
.sn-panel a:hover,.sn-panel a[aria-current="page"]{background:#FCEFE3;text-decoration:none}
.sn-panel a img,.sn-panel a .sn-ic{display:block;flex-shrink:0;width:28px;height:28px}
.sn-panel b{display:block;font-size:var(--fs-body);font-weight:700;color:#1B1714;line-height:1.35}
.sn-panel small{display:block;font-size:var(--fs-small);font-weight:400;color:#6E655A;line-height:1.45;margin-top:.1rem}

.sn-right{margin-left:auto;display:flex;align-items:center;gap:1.25rem;flex-shrink:0}
.sn-login{font-size:var(--fs-small);font-weight:500;color:#2A241E;text-decoration:none;white-space:nowrap}
.sn-login:hover{color:#1B1714;text-decoration:none}
.sn-cta{display:inline-block;background:#C85A38;color:#fff;font-size:var(--fs-small);font-weight:600;line-height:1.25;padding:.5rem 1rem;border-radius:9999px;text-decoration:none;white-space:nowrap;box-shadow:0 8px 24px -12px rgba(80,45,20,.22);transition:background .15s}
.sn-cta:hover{background:#A8472B;color:#fff;text-decoration:none}

/* Phone menu: one button, one sheet listing every group. */
.sn-burger{display:none;position:static}
.sn-burger>summary{list-style:none;cursor:pointer;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;color:#1B1714;margin-right:-.25rem}
.sn-burger>summary::-webkit-details-marker{display:none}
.sn-burger>summary svg{width:1.25rem;height:1.25rem;display:block}
.sn-burger>summary .sn-i-close{display:none}
.sn-burger[open]>summary .sn-i-open{display:none}
.sn-burger[open]>summary .sn-i-close{display:block}
.sn-header .sn-sheet{position:absolute;left:0;right:0;top:100%;background:#FFFDF8;border-bottom:1px solid #DED5C6;box-shadow:0 18px 50px -18px rgba(80,45,20,.28);padding:.5rem 1rem 1.25rem;max-height:calc(100vh - 4rem);overflow-y:auto;display:grid;gap:.125rem;z-index:60}
.sn-sheet h2{font:600 var(--fs-caption)/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6E655A;margin:1rem 0 .35rem;padding:0 .75rem}
.sn-sheet a{display:block;padding:.625rem .75rem;border-radius:.75rem;font-size:var(--fs-body);font-weight:500;color:#1B1714;text-decoration:none;line-height:1.3}
.sn-sheet a:hover,.sn-sheet a[aria-current="page"]{background:#FCEFE3;text-decoration:none}
.sn-sheet a.sn-cta{display:block;text-align:center;margin-top:1rem;padding:.8rem 1rem;color:#fff;font-weight:600}
.sn-sheet a.sn-cta:hover{background:#A8472B}
.sn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:899px){
  .sn-header .sn-nav,.sn-login{display:none}
  .sn-burger{display:block}
  .sn-bar{gap:.5rem}
  .sn-right{gap:.5rem}
  .sn-cta{padding:.5rem .875rem}
}
@media (min-width:900px) and (max-width:1023px){
  .sn-header .sn-nav{gap:1.1rem;margin-left:.75rem}
  .sn-right{gap:.75rem}
}

/* ── Footer ── */
.sn-footer{background:#F6F1E8;border-top:1px solid #DED5C6;color:#2A241E}
.sn-foot{max-width:72rem;margin:0 auto;padding:3.5rem 1.5rem 2.25rem}
.sn-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
.sn-brand p{margin:.85rem 0 0;font-size:var(--fs-small);color:#6E655A;line-height:1.55;max-width:18rem}
.sn-brand p a{color:#2A241E;text-decoration:none}
.sn-brand p a:hover{color:#C85A38}
.sn-col h2{font:700 var(--fs-caption)/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#1B1714;margin:0 0 .95rem;padding:0}
.sn-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sn-col li{margin:0;padding:0}
.sn-col a{font-size:var(--fs-small);color:#2A241E;text-decoration:none;line-height:1.4}
.sn-col a:hover{color:#C85A38;text-decoration:none}
.sn-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #DED5C6;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;font-size:var(--fs-small);color:#6E655A;line-height:1.5}
.sn-legal p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.sn-legal a{color:inherit;text-decoration:underline}
.sn-legal a:hover{color:#1B1714}
@media (max-width:899px){
  .sn-foot{padding:2.75rem 1rem 2rem}
  .sn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .sn-brand{grid-column:1/-1}
}