/* ============================================================
   Letters — shared chrome: nav, mega menu, footer
   Used by all marketing subpages.
   ============================================================ */

/* ---------- NAV ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0); transition: background .25s, border-color .25s; border-bottom: 1px solid transparent; }
.nav.solid, .nav.scrolled { background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { height: 60px; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 17.5px; letter-spacing: -0.03em; }
.brand .logo-mark { transition: transform .35s var(--ease); }
.brand:hover .logo-mark { transform: rotate(-4deg) scale(1.08); }
.nav-links { display: flex; gap: 2px; margin-left: 26px; align-items: center; }
.nav-links > a { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 7px 11px; border-radius: var(--r-sm); transition: background .15s, color .15s; }
.nav-links > a:hover { background: rgba(17,19,23,0.05); color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.navitem { position: relative; display: flex; align-items: center; height: 60px; }
.navitem > .navlink { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 7px 11px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 5px; cursor: pointer; transition: background .15s, color .15s; }
.navitem:hover > .navlink { background: rgba(17,19,23,0.05); color: var(--ink); }
.navlink .chev { transition: transform .2s var(--ease); opacity: .6; }
.navitem:hover .navlink .chev { transform: rotate(180deg); }
.mega { display: none; position: absolute; left: 0; top: 58px; width: min(700px, calc(100vw - 48px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-pop); padding: 16px; }
.navitem:hover .mega, .navitem.mega-open .mega { display: block; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 0.92fr; gap: 14px; }
.mega-col h6 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 4px 9px 6px; font-weight: 500; }
.mlink { display: flex; gap: 11px; padding: 9px; border-radius: 11px; transition: background .15s; align-items: flex-start; }
.mlink:hover { background: var(--bg-2); }
.mlink .mi { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.mlink .mt { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.mlink .md { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.mega-feat { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; }
.mega-feat .mf-img { height: 96px; display: flex; align-items: flex-end; padding: 11px; }
.mega-feat .mf-img .ph-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.9); color: #1a1a1a; }
.mega-feat .mf-b { padding: 13px 14px 14px; background: var(--bg-2); flex: 1; display: flex; flex-direction: column; }
.mega-feat .mf-t { font-size: 13.5px; font-weight: 600; display: block; }
.mega-feat .mf-d { font-size: 11.5px; color: var(--muted); margin: 3px 0 11px; line-height: 1.4; display: block; }
.mega-feat .mf-link { font-size: 12px; font-weight: 600; color: var(--spark); display: inline-flex; align-items: center; gap: 5px; margin-top: auto; align-self: flex-start; }
.mega.mega-sm { width: 264px; left: 0; right: auto; }
.navitem:hover .mega.mega-sm, .navitem.mega-open .mega.mega-sm { transform: none; }
.mega-sm .mega-grid { grid-template-columns: 1fr; gap: 2px; }

/* ---------- FOOTER ---------- */
footer { border-top: 1px solid var(--line); padding: 58px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 28px; }
.foot-col h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; font-weight: 500; }
.foot-col a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 4px 0; }
.foot-col a:hover { color: var(--ink); }
.foot-brand .brand { font-size: 17.5px; color: var(--ink); }
.foot-brand p { font-size: 13.5px; color: var(--muted); margin-top: 12px; max-width: 250px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.foot-bottom .status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--line-2); background: var(--surface); padding: 6px 13px; border-radius: 9px; box-shadow: var(--sh-xs); }
.foot-bottom .status .g { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); animation: statuspulse 2.4s var(--ease) infinite; }

/* ---------- mobile menu ---------- */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; padding: 0 9px; }
.nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 99; background: var(--surface); padding: 16px 24px 24px; overflow-y: auto; max-height: calc(100dvh - 72px); border-radius: 0 0 22px 22px; box-shadow: var(--sh-lg); border-top: 1px solid var(--line); }
.mobile-menu.open { display: block; }
.mobile-menu .mm-grp { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 18px 0 6px; }
.mobile-menu a { display: block; font-size: 17px; font-weight: 540; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .mm-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.mobile-menu .mm-cta a { border: none; padding: 14px; justify-content: center; text-align: center; width: 100%; color: #fff; }
body.menu-open { overflow: hidden; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-signin { display: none; }
  .nav-right { gap: 6px; }
  .nav-right .btn { padding: 7px 11px; font-size: 12.5px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .foot-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}
@media (max-width: 400px) {
  .nav-right .nav-signin { display: none; }
}