/* MODIT Nations: Shared public page styles (landing, about, privacy, cookies)
   Single source of truth — every public page links to this file. */

:root{
  --royal:#2A4FD7;--royal-mid:#1E3A8A;--royal-soft:#EEF2FF;
  --bg:#F6F8FC;--card:#fff;--ink:#111827;--ink-2:#374151;
  --muted:#6B7280;--line:#E5EAF2;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand-m{width:34px;height:34px;border-radius:7px;background:var(--royal);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-weight:700;font-size:13px;letter-spacing:.4px;flex:none}
.brand-n{font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand-s{font-size:11.5px;color:var(--muted);font-weight:400}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:7px 12px;border-radius:6px;transition:background .12s}
.nav a:hover{background:var(--bg)}
.nav .go{background:var(--royal);color:#fff;font-weight:600;padding:8px 16px}
.nav .go:hover{background:var(--royal-mid);color:#fff}

/* content page (about, privacy, cookies) */
.page{max-width:680px;margin:0 auto;padding:48px 32px 64px}
.page h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.page .sub{font-size:14px;color:var(--muted);margin-bottom:32px}
.page h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:32px 0 10px;
  color:var(--ink)}
.page p{margin-bottom:14px;color:var(--ink-2)}
.page ul{margin:0 0 16px 20px;color:var(--ink-2)}
.page li{margin-bottom:6px}
.page strong{color:var(--ink);font-weight:600}
.page a{color:var(--royal);text-decoration:none}
.page a:hover{text-decoration:underline}
.page code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;background:var(--bg);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px}
.page h3{font-size:14.5px;font-weight:600;margin:20px 0 6px;color:var(--ink)}
.page table{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0 16px}
.page th,.page td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.page th{font-weight:600;color:var(--ink);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.page td{color:var(--ink-2)}
.page .updated{font-size:12.5px;color:var(--muted);margin-bottom:32px}
.sep{border:none;border-top:1px solid var(--line);margin:32px 0}

/* developer contact box */
.dev-box{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:22px 24px;margin:24px 0}
.dev-box h3{font-size:15px;font-weight:600;margin-bottom:4px}
.dev-box p{font-size:13px;color:var(--muted);margin-bottom:12px}
.dev-links{display:flex;gap:10px;flex-wrap:wrap}
.wa-btn{display:inline-flex;align-items:center;gap:7px;background:#25D366;
  color:#fff;font-size:13px;font-weight:600;padding:9px 16px;border-radius:6px;
  text-decoration:none;transition:background .12s}
.wa-btn:hover{background:#1fb855;color:#fff}
.wa-btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.em-btn{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  color:var(--royal);font-size:13px;font-weight:600;padding:9px 16px;
  border-radius:6px;border:1px solid var(--line);text-decoration:none;
  transition:border-color .12s,background .12s}
.em-btn:hover{border-color:var(--royal);background:var(--royal-soft)}
.em-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* developer section (landing) */
.dev{max-width:940px;margin:0 auto;padding:0 32px 56px}
.dev-card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:28px 32px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px}
.dev-info h3{font-size:16px;font-weight:600;margin-bottom:4px}
.dev-info>p{font-size:13px;color:var(--muted);margin-bottom:14px}

/* footer */
.foot{border-top:1px solid var(--line);padding:20px 32px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;color:var(--muted)}
.foot-links{display:flex;gap:16px}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .12s}
.foot-links a:hover{color:var(--royal)}

@media(max-width:640px){
  .top{padding:12px 16px}
  .brand-s{display:none}
  .nav a:not(.go){display:none}
  .page{padding:32px 16px 48px}
  .page h1{font-size:22px}
  .foot{padding:16px;flex-direction:column;align-items:flex-start}
  .dev{padding:0 16px 40px}
  .dev-card{padding:20px;flex-direction:column;align-items:flex-start}
}