/* SMT shared stylesheet - source of truth for nav, footer, brand, and global rules.
   V23b: populated with the V4 brand system extracted from index.html.

   Each marketing page links this file IMMEDIATELY BEFORE </head>, so it is the
   LAST CSS loaded in the document. For same-specificity rules cascade picks the
   later declaration, so site.css wins against each page's inline V4 duplicates.
   Result: site.css is the effective source of truth as soon as V23b ships.

   The inline V4 blocks on each page remain as dead code (overridden by cascade).
   They are harmless and can be removed in an optional future V23c cleanup pass.
   Any future edit to nav/footer/brand styling happens HERE, in this one file,
   and propagates to all 7 pages via cascade.
*/

/* Scrollbar gutter stability - prevents nav right-edge from jumping when a page
   has a vertical scrollbar vs not. Was added per-page in V22; centralized here. */
html { scrollbar-gutter: stable; }

/* SMT Brand System */
.smt-nav-logo {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: inherit !important;
  flex-shrink: 0;
}
.smt-nav-logo:link, .smt-nav-logo:visited,
.smt-nav-logo:hover, .smt-nav-logo:active {
  text-decoration: none !important;
  color: inherit !important;
}
.logo-icon {
  display: inline-block !important;
  height: 44px !important;
  width: 44px !important;
  flex: 0 0 44px !important;
  vertical-align: middle;
}
.smt-wordmark {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  vertical-align: middle;
}
/* !important on the three wordmark color rules: faq.html declares these inline
   with !important, and without matching the importance site.css would lose
   cascade specifically for that page. Adding !important here guarantees
   site.css remains the source of truth for ALL 7 marketing pages, not just 6. */
.smt-wm-save  { color: #e2e8f0 !important; font-weight: 400 !important; }
.smt-wm-my    { color: #2f6fff !important; font-weight: 700 !important; }
.smt-wm-trade { color: #e2e8f0 !important; font-weight: 400 !important; }
footer .logo-icon { height: 36px !important; width: 36px !important; flex: 0 0 36px !important; }
footer .smt-wordmark { font-size: 18px !important; }

/* V4: force nav + footer wordmark to render like homepage (font + colors) */
nav .smt-wordmark,
nav .nav-links a,
nav .nav-cta,
footer .smt-wordmark {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
nav .nav-links a:not(.nav-cta) { color: #8B95A1 !important; }
nav .nav-links a:not(.nav-cta):hover { color: #F0F2F5 !important; }
/* Login text only at small breakpoints (matches the existing 768/480 carve-outs) */
@media (max-width: 768px) {
  nav .nav-links li:nth-last-child(2) a:not(.nav-cta) { color: #C2CDD8 !important; }
}

/* V24: Normalize nav typography to fix vertical button drift.
   Each marketing page inherits body line-height from a different font
   render state (system-ui fallback vs DM Sans), making the Free Trial
   button sit at slightly different Y positions across pages. Forcing
   explicit line-height on nav children removes the inheritance variance. */
nav .nav-links { line-height: 1 !important; }
nav .nav-links li { line-height: 1 !important; }
nav .nav-links a { line-height: 1 !important; }
nav .nav-cta { line-height: 1 !important; }

/* V25: make each <li> a flex container that centers its child (the button).
   V24 normalized line-height but the button sits via baseline (display:inline)
   inside list-item li. Making li flex with align-items:center makes the
   button center vertically inside li regardless of font/baseline metrics. */
nav .nav-links li { display: flex !important; align-items: center !important; }

/* V26: zero margin on nav li. Legal pages (privacy, terms, refund) have a
   broad `li { margin-bottom: 8-12px }` rule for their content bullet lists,
   which also matches nav lis and inflates UL flex height, shifting the
   centered UL upward. Explicit margin: 0 on nav .nav-links li blocks that. */
nav .nav-links li { margin: 0 !important; }

/* V27: restore mobile responsive nav. V25 added display:flex !important
   on nav li which inadvertently overrode each page's media queries that
   hid most nav items below 768px (and below 480px). Without these the
   nav crams all 6 items at narrow widths and they wrap/overlap. Adding
   the same hide rules here with !important re-establishes the behavior. */
@media (max-width: 768px) {
  nav .nav-links li:not(:last-child):not(:nth-last-child(2)) { display: none !important; }
}
@media (max-width: 480px) {
  /* V28: keep Login visible alongside Free Trial at narrow mobile widths.
     Matches the 768px rule behavior: hide items that are neither Login
     (nth-last-child(2)) nor Free Trial (last-child). */
  nav .nav-links li:not(:last-child):not(:nth-last-child(2)) { display: none !important; }
  nav .nav-links li:nth-last-child(2) { display: flex !important; }
}