/* The site's header and footer, on the pages that do not load base.css.

   The markup is one source: build-postlever.py writes the homepage's header and
   footer, and writes the same markup, with its links adjusted for the folder
   depth, between the site-header and site-footer markers in every other page.
   The homepage draws it with base.css and home.css; this sheet draws it to the
   same measurements for the legal pages and the OPTIZMO page, which are a column
   of text and a hand-written page and carry neither.

   The bar behaves as the homepage's does: clear at the top, white glass with a
   hairline once scrolled. Colour comes from tokens.css on the light ground. */

/* ---- the bar ---- */

/* Clear at the top of the page, with no hairline, then white glass and the
   hairline once the page has scrolled, the class site.js sets on every page, as
   the homepage's bar does. The side padding and the width are the homepage's, so
   the logo and the button sit on the same lines on every page. */
nav.dark-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: 20px clamp(1.25rem, 4vw, 3rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  font-family: var(--font-body);
  transition: background-color 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth);
}
nav.dark-nav.scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--color-border);
}
/* A page that opens on a band runs the band up behind the clear bar, as the
   homepage's hero runs behind its own: the bar gives back its height, and the
   band's top border, transparent, takes it, so the band's ground fills it and
   its content stays where it was. site.js sets --chrome-nav-h. */
nav.dark-nav:has(~ main > .band:first-child) { margin-bottom: calc(-1 * var(--chrome-nav-h, 0px)); }
nav.dark-nav ~ main > .band:first-child { border-top: var(--chrome-nav-h, 0px) solid transparent; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-lg);
  margin: 0 auto;
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-wordmark { display: block; height: 21px; width: auto; }
.nav-links {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 32px;
  margin: 0 0 0 clamp(56px, 5vw, 72px);
  padding: 0;
  list-style: none;
}
/* Two kinds of link: the site's pages, in the ink, from the logo; and Log in,
   quieter and pushed right to the button. */
.nav-links > li.nav-aside { margin-left: auto; }
.nav-links > li > a {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.65;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.nav-links > li > a.nav-util { font-weight: var(--font-regular); color: var(--color-text-muted); }
.nav-links > li > a:hover { color: var(--color-text); }
/* The page the reader is on, in the accent: the page links are all in the full
   ink already, so the ink alone marked nothing. No underline, border or fill,
   which would read as a second button beside Create account. */
.nav-links > li > a[aria-current="page"] { color: var(--color-accent); }
.nav-links > li > a.nav-cta,
.mobile-menu a.nav-cta {
  display: inline-flex;
  padding: 0.55rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--brand-fill);
  color: var(--color-on-accent);
  font-weight: var(--font-semibold);
}
.nav-links > li > a.nav-cta:hover,
.mobile-menu a.nav-cta:hover { background: var(--brand-fill-hover); color: var(--color-on-accent); }
.nav-links a:focus-visible,
.mobile-toggle:focus-visible,
.mobile-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

.mobile-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

@media (min-width: 1920px) {
  .nav-inner { max-width: var(--container-xl); }
}
@media (max-width: 1100px) {
  .nav-links { gap: 1.25rem; }
  .nav-links > li > a { font-size: 0.82rem; }
}

/* ---- the Integrations menu ----
   home.css carries the same rules for the homepage, which does not load this
   sheet. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-links > li.nav-menu { position: relative; }
.nav-menu-button {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1.65;
  color: var(--color-text);
}
.nav-chevron { transition: transform var(--duration-fast) ease; }
.nav-menu.open .nav-chevron { transform: rotate(180deg); }
.nav-external { display: inline-block; vertical-align: 0; margin-left: 3px; opacity: 0.6; }
/* The panel: the app's light surface, one hairline and the soft shadow, under
   its button. Hidden until the menu is open. */
.nav-menu-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: -16px; z-index: 10;
  width: 320px; padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.nav-menu-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-menu.open .nav-menu-panel { display: grid; gap: 2px; }
.nav-menu-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--color-text); text-decoration: none;
}
.nav-menu-item:hover, .nav-menu-item:focus-visible { background: var(--paper-band); }
.nav-menu-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.nav-menu-icon { flex: none; margin-top: 1px; color: var(--color-accent); }
.nav-menu-item b { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.4; }
.nav-menu-item b + span { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); }
.nav-menu-item[aria-current="page"] b { color: var(--color-accent); }
/* On the OPTIZMO page the menu's button is the current page's place in the
   nav, and takes the same accent. */
.nav-menu:has([aria-current="page"]) > .nav-menu-button { color: var(--color-accent); }

/* ---- the sheet that stands in for the links on a phone or a tablet ----
   From 1079px down: the two groups of links no longer fit on one line there
   without wrapping. From 600px up the sheet is a panel down the right edge
   rather than the whole screen. */

.mobile-menu { display: none; }

@media (max-width: 1079px) {
  nav.dark-nav { padding: 13px var(--space-5); }
  .nav-links { display: none; }
  .mobile-toggle { display: block; }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-nav);
    flex-direction: column;
    overflow-y: auto;
    background: var(--color-bg);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
  }
  .mobile-menu-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-6) var(--space-6) var(--space-4);
  }
  .mobile-menu-body a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
  }
  .mobile-menu-body a:not(.nav-cta):hover { background: var(--paper-band); }
  .mobile-menu-body a.nav-util { font-weight: var(--font-regular); color: var(--color-text-muted); }
  /* The page the reader is on, in the accent, as in the bar. */
  .mobile-menu-body a[aria-current="page"] { color: var(--color-accent); }
  .mobile-menu-gap { height: var(--space-5); }
  .mobile-menu-label {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4) 0;
    font-size: 0.8rem; font-weight: var(--font-semibold); color: var(--color-text-muted);
  }
  .mobile-menu-body a.mobile-sub { padding-left: var(--space-8); }

  .mobile-menu a.nav-cta {
    display: block;
    margin-top: var(--space-3);
    padding: 0.85rem var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
  }
  .mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
  }
}

@media (min-width: 600px) and (max-width: 1079px) {
  .mobile-menu {
    left: auto;
    width: 400px;
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
}

/* "See pricing" at the end of the early-access line: the line's own size, in
   the accent, with a small chevron. */
.note-link { font-weight: var(--font-semibold); color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.note-link:hover { color: var(--color-accent-strong); }
.note-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }
.note-chevron {
  display: inline-block; width: 0.8em; height: 0.8em; margin-left: 2px; vertical-align: -0.05em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms ease;
}
.note-link:hover .note-chevron { transform: translateX(2px); }

/* ---- the foot ---- */

footer {
  position: relative;
  padding: var(--space-16) 48px var(--space-8);
  background: var(--paper-band);
  font-family: var(--font-body);
}
/* The page's last line, in the hero band's colours: ACCESS's warm into PostLever's blue. */
footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #FB8C5A 0%, #F7748F 30%, #8B8FF6 65%, #2563EB 100%);
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.footer-logo { display: block; height: 28px; width: auto; margin-bottom: var(--space-4); }
.footer-brand-col p {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.footer-col h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.footer-col a {
  display: block;
  padding: var(--space-1) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer-col a:hover { color: var(--color-text); }
.footer-col a[aria-current="page"] { color: var(--color-text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.footer-tagline { letter-spacing: var(--tracking-wide); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 480px) {
  footer { padding: var(--space-8) var(--space-4) var(--space-6); }
}