/* Shared by the static public pages: features, faq, contact, security, privacy,
   terms and the guides. Loaded after each page's own styles.

   1. The header. The same one as the homepage and About, so nothing moves between
      pages. components/SiteNav.tsx and #prerender in index.html are the other two
      copies: change all three together.
   2. The dark theme, by changing the colours those pages' own styles use. */

/* ---- Keep the page width the same on short pages and long ones ---- */
html { overflow-y: scroll; scroll-padding-top: 80px; }

/* ---- 1. Header ---- */
.fos-nav {
  position: sticky; top: 0; z-index: 100; width: 100%;
  background: #0f172a; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.fos-nav-in {
  max-width: 1280px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.fos-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.fos-logo img { width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; display: block; object-fit: cover; }
.fos-logo-words { line-height: 1.25; }
.fos-word { display: block; font-size: 18px; line-height: 28px; font-weight: 900; letter-spacing: -0.05em; color: #fff; }
.fos-word span { color: #818cf8; }
.fos-sub { display: none; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; color: #64748b; }
.fos-links { display: flex; align-items: center; gap: 6px; }
.fos-link {
  display: none; padding: 8px 12px; font-size: 12px; line-height: 16px; font-weight: 900;
  letter-spacing: 0.1em; color: #94a3b8; text-decoration: none; transition: color 0.15s;
}
.fos-link:hover, .fos-link[aria-current] { color: #fff; }
.fos-btn {
  display: block; white-space: nowrap; padding: 8px 10px; border-radius: 12px; font-size: 12px; line-height: 16px;
  font-weight: 900; color: #fff; text-decoration: none; transition: background 0.15s;
  border: 1px solid transparent;
}
.fos-btn:hover { color: #fff; }
.fos-btn-quiet { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.fos-btn-quiet:hover { background: rgba(255,255,255,0.1); }
.fos-btn-main { background: #4f46e5; box-shadow: 0 20px 25px -5px rgba(99,102,241,0.2), 0 8px 10px -6px rgba(99,102,241,0.2); }
.fos-btn-main:hover { background: #6366f1; }
/* Phones and tablets: the links go in a menu. Phones have room for one button
   beside it, and the homepage has its own trial button further down, but every
   page needs a way in from the top: Sign in goes in the menu, first to be seen. */
.fos-btn-quiet { display: none; }
.fos-menu > summary {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 12px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.fos-menu > summary::-webkit-details-marker { display: none; }
.fos-menu-close, .fos-menu[open] .fos-menu-open { display: none; }
.fos-menu[open] .fos-menu-close { display: block; }
.fos-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; padding: 4px 16px 16px;
  background: #0f172a; border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.fos-menu-panel a {
  display: block; padding: 12px 0; font-size: 14px; line-height: 20px; font-weight: 900; color: #cbd5e1;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fos-menu-panel a:hover, .fos-menu-panel a[aria-current] { color: #fff; }
.fos-menu-panel a.fos-menu-signin {
  margin-top: 12px; text-align: center; color: #fff; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; background: rgba(255,255,255,0.05);
}
@media (max-width: 359px) { .fos-logo-words { display: none; } }
@media (min-width: 640px) {
  .fos-nav-in { padding: 12px 32px; }
  .fos-logo { gap: 12px; }
  .fos-logo img { width: 40px; height: 40px; }
  .fos-word { font-size: 20px; }
  .fos-sub { display: block; }
  .fos-links { gap: 8px; }
  .fos-btn { padding: 8px 16px; letter-spacing: 0.1em; }
  .fos-btn-quiet { display: block; }
  .fos-menu > summary { width: 34px; height: 34px; }
  .fos-menu-panel { padding-left: 32px; padding-right: 32px; }
  .fos-menu-panel a.fos-menu-signin { display: none; }
}
@media (min-width: 1024px) { .fos-link { display: block; } .fos-menu { display: none; } }
@media (min-width: 1280px) { .fos-link { padding: 8px 16px; } }

/* ---- 2. Dark theme ---- */
:root {
  /* Security, privacy, terms, FAQ and contact */
  --ink: #fff; --body: #cbd5e1; --muted: #94a3b8; --line: rgba(255,255,255,0.1); --soft: rgba(255,255,255,0.04);
  /* Features and the guides. These name a shade, and now hold its opposite for text and lines */
  --slate-900: #fff; --slate-800: #e2e8f0; --slate-700: #cbd5e1; --slate-600: #94a3b8; --slate-500: #94a3b8;
  --slate-200: rgba(255,255,255,0.1); --slate-100: rgba(255,255,255,0.06); --slate-50: rgba(255,255,255,0.04);
  --indigo-50: rgba(99,102,241,0.12); --indigo-100: rgba(99,102,241,0.3);
  --amber-50: rgba(251,191,36,0.1); --amber-600: #fbbf24;
  --emerald-50: rgba(16,185,129,0.12); --emerald-600: #34d399;
}
body { background: #0f172a; color: #e2e8f0; }
a { color: #818cf8; }
a:hover { color: #a5b4fc; }

/* What used --slate-900 as a background */
.article-header { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); }
.site-footer, .mobile-cta { background: #0f172a; }
.footer-logo-text { color: #fff; }
.mobile-cta a:hover { color: #fff; }

/* Indigo that was text on white */
.feature-icon, .feature-kicker, .box-indigo .info-box-label { color: #818cf8; }

/* Colours set directly */
.deadline-item { background: rgba(255,255,255,0.04); border-color: rgba(251,191,36,0.35); }
.deadline-first { background: rgba(239,68,68,0.12); border-color: #ef4444; }
.deadline-first strong { color: #fca5a5; }
.box-amber { border-color: rgba(251,191,36,0.3); }
.worry-col:first-child { background: rgba(239,68,68,0.1); }
.worry-col:first-child .worry-label { color: #fca5a5; }

/* The next MTD deadline on the guides: its own line under the article's details */
.deadline-badge { display: inline-flex; align-items: baseline; gap: 0.5rem; margin: 1rem 0 0; padding: 0.5rem 0.875rem; border-radius: 0.75rem; font-size: 0.8rem; font-weight: 800; line-height: 1.45; }