/* Header menus and footer directory for the landing (SiteHeader / SiteFooter).
   Not part of the prototype: it extends the prototype's .nav bar and closing
   footer with the production site's menus, in the same materials — the
   pricing-card surface for panels, prototype greys for text. */

/* ── Header bar ───────────────────────────────────────────────────────── */

/* The prototype offset the bar by its 38px review strip. */
.site-nav { top: 0; }
.site-nav[data-open="true"] { position: fixed; background: #060606; }
.site-nav nav { align-items: center; }
.site-nav nav > a,
.site-menu > summary { color: #bbb; transition: color .2s; }
.site-nav nav > a:hover,
.site-menu > summary:hover,
.site-menu[open] > summary { color: #fff; }

.site-nav__actions { display: flex; align-items: center; gap: 22px; }
.site-nav__signin { color: #bbb; font-size: 13px; transition: color .2s; }
.site-nav__signin:hover { color: #fff; }

/* ── Dropdowns ────────────────────────────────────────────────────────── */

/* Panels anchor to the full-width header, so they open centred on the screen
   rather than under their own trigger. */
.site-menu { position: static; }
.site-menu > summary {
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none; cursor: pointer; user-select: none;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu__caret { width: 12px; height: 12px; transition: transform .2s; }
.site-menu[open] .site-menu__caret { transform: rotate(180deg); }
.site-menu > summary:focus-visible,
.site-menu__item:focus-visible,
.site-mobile a:focus-visible,
.site-mobile summary:focus-visible { outline: 1px solid #ffffff66; outline-offset: 3px; border-radius: 4px; }

.site-menu__panel {
  position: absolute; top: calc(100% - 2px); left: 50%; z-index: 20;
  width: 680px; padding: 20px 18px 14px;
  transform: translateX(-50%);
  border: 1px solid transparent; border-radius: var(--ml-radius-card, 10px);
  background:
    linear-gradient(150deg, #1b1b1b, #111 52%, #151515) padding-box,
    linear-gradient(150deg, #555, #252525 45%, #393939) border-box;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 3px 6px #0005, 0 24px 60px #000c;
  animation: site-menu-in .18s ease-out;
}
.site-menu__panel--narrow { width: 520px; }
@keyframes site-menu-in { from { opacity: 0; transform: translate(-50%, -4px); } }

.site-menu__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.site-menu__panel--narrow .site-menu__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-menu__title {
  margin: 0 0 6px; padding: 0 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #777;
}
.site-menu__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--ml-radius-control, 6px);
  transition: background .15s;
}
.site-menu__item:hover { background: #ffffff0a; }
.site-menu__icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border: 1px solid #ffffff14; border-radius: var(--ml-radius-control, 6px);
  background: linear-gradient(#232323, #161616);
  color: #ccc;
}
.site-menu__icon svg { width: 18px; height: 18px; }
.site-menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-menu__text b { font-weight: 500; font-size: 13px; line-height: 1.3; color: #eee; }
.site-menu__text small { font-size: 12px; line-height: 1.3; color: #888; }
.site-menu__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding: 12px 10px 0;
  border-top: 1px solid #ffffff12;
  font-size: 12px;
}
.site-menu__foot a { color: #ddd; transition: color .2s; }
.site-menu__foot a:hover { color: #fff; }
.site-menu__foot span { color: #666; }

/* ── Mobile menu ──────────────────────────────────────────────────────── */

.site-nav__burger {
  display: none; place-content: center; gap: 6px;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid #ffffff1c; border-radius: var(--ml-radius-control, 6px);
  background: #ffffff0d; cursor: pointer;
}
.site-nav__burger span { display: block; width: 16px; height: 1.5px; background: #eee; transition: transform .2s; }
.site-nav[data-open="true"] .site-nav__burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
.site-nav[data-open="true"] .site-nav__burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.site-mobile {
  position: fixed; inset: 76px 0 0; z-index: 30;
  overflow-y: auto; padding: 8px 20px 32px;
  background: #060606; border-top: 1px solid #ffffff0f;
}
.site-mobile[hidden] { display: none; }
.site-mobile__row,
.site-mobile__group > summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 2px; border-bottom: 1px solid #ffffff0f;
  font-size: 17px; color: #eee;
}
.site-mobile__group > summary { list-style: none; cursor: pointer; }
.site-mobile__group > summary::-webkit-details-marker { display: none; }
.site-mobile__group > summary .site-menu__caret { width: 14px; height: 14px; color: #888; transition: transform .2s; }
.site-mobile__group[open] > summary .site-menu__caret { transform: rotate(180deg); }
.site-mobile__list { display: grid; gap: 2px; padding: 8px 0 14px; border-bottom: 1px solid #ffffff0f; }
.site-mobile__all { padding: 10px 10px 2px; font-size: 13px; color: #bbb; }
.site-mobile__cta { display: grid; gap: 10px; margin-top: 28px; }
.site-mobile__cta .button { width: 100%; }
.site-mobile__signin {
  display: flex; justify-content: center; align-items: center; min-height: 48px;
  border: 1px solid #ffffff14; border-radius: var(--ml-radius-control, 6px);
  background: #ffffff0d; color: #fff; font-size: 14px;
}

/* Tablet: the bar's side padding matches the 28px content gutter below it
   (it kept a 32px minimum, so the logo sat 4px off the frame). */
@media (min-width: 541px) and (max-width: 1100px) {
  header.nav.site-nav { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 800px) {
  .site-nav__signin { display: none; }
  .site-nav__actions { gap: 10px; }
  .site-nav__burger { display: inline-grid; }
}

/* ── Footer directory ─────────────────────────────────────────────────── */

/* The footer sits in the same 1200px frame as the bar and the sections
   (the prototype's closing footer was 1100px). */
.site-footer.closing-footer { max-width: none; }

.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); gap: 56px; }
.site-footer__brand .brand { color: #fff; }
.site-footer__brand p { margin: 16px 0 0; max-width: 240px; font-size: 13px; line-height: 1.55; color: #888; }
.site-footer .closing-links { grid-template-columns: 0.9fr 1.35fr 1.15fr 1fr 0.8fr; gap: 28px; }
.site-footer__legal { display: flex; align-items: center; gap: 22px; }
.site-footer__legal a,
.site-footer__legal button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; transition: color .2s;
}
.site-footer__legal a:hover,
.site-footer__legal button:hover { color: #fff; }

@media (max-width: 1000px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 36px; }
  .site-footer .closing-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .site-footer .closing-links { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .closing-legal { flex-wrap: wrap; gap: 14px 22px; }
}

/* Inline header mark (BrandMark): same box as the former .brand img. */
.brand>svg{display:block;flex:none}
@media(max-width:540px){.nav .brand>svg{width:32px;height:32px}}

/* Fixed header: the same full-width bar as before, kept on screen. Scrolling down past 120px
   slides it up out of view (SiteHeader sets data-hidden); scrolling up slides it back. The
   glass blur keeps the menu readable over any section. The open mobile menu always shows. */
.site-nav {
  position: fixed; z-index: 50;
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.site-nav[data-hidden="true"]:not([data-open="true"]) {
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.4, 0, .6, 1), opacity .35s ease;
}
/* A backdrop-filter (or transform) makes the bar the containing block of its fixed children, which
   squeezed the full-screen mobile menu (.site-mobile, inset 76px 0 0) into the bar's own height.
   Without the blur the open bar must be solid; .nav.ml-chrome (subpages) is otherwise #060606e8. */
.nav.site-nav[data-open="true"] { -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; background: #060606; }
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav[data-hidden="true"]:not([data-open="true"]) { transform: none; transition: opacity .2s ease; }
}