/* EmailBridge shared shell — one header + one footer for every page.
   Everything is prefixed .eb- so it never collides with a page's own
   .nav/.logo/.btn rules, and this file is linked AFTER each page's inline
   <style> so `header.eb-head` beats a bare `header{}` rule left behind. */

:root{
  --eb-ink:#16181d; --eb-ink-soft:#3a3d45; --eb-muted:#6b6f7a;
  --eb-line:#e6e7ea; --eb-bg:#ffffff; --eb-bg-soft:#f7f8f9;
  --eb-lime:#effd5f; --eb-lime-deep:#3a4500; --eb-lime-line:#d8e23a;
  --eb-maxw:1120px;
}

/* ---------- header ---------- */
header.eb-head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--eb-line);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.eb-nav{
  max-width:var(--eb-maxw); margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.eb-logo{min-height:44px;
  display:flex; align-items:center; gap:8px;
  font-family:"Space Grotesk",Inter,-apple-system,sans-serif;
  font-weight:700; font-size:18px; letter-spacing:-.02em;
  color:var(--eb-ink); text-decoration:none;
}
.eb-dot{width:10px;height:10px;border-radius:50%;background:var(--eb-lime);border:1px solid var(--eb-lime-line)}
.eb-links{display:flex;gap:28px;font-size:14.5px;font-weight:500;color:var(--eb-ink-soft)}
.eb-links a{color:inherit;text-decoration:none}
.eb-links a:hover{color:var(--eb-ink)}
.eb-links a[aria-current="page"]{color:var(--eb-ink);font-weight:600}
.eb-cta{display:flex;align-items:center;gap:18px}
.eb-login{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:15px;font-weight:500;color:var(--eb-muted);text-decoration:none;white-space:nowrap}
.eb-login:hover{color:var(--eb-ink)}
.eb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 20px;border-radius:999px;
  font-size:14px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;
  color:var(--eb-lime-deep);
  background:linear-gradient(180deg,#f5ff8d 0%,var(--eb-lime) 55%,#e4f542 100%);
  border:1px solid var(--eb-lime-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 6px 18px rgba(200,215,40,.34);
  transition:background .15s ease, box-shadow .2s ease, transform .12s ease;
}
.eb-btn:hover{
  background:linear-gradient(180deg,#f9ffab 0%,#eaff3a 55%,#dcf01f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 9px 24px rgba(200,215,40,.46);
}
.eb-btn:active{transform:translateY(1px)}

/* ---------- footer ---------- */
footer.eb-foot{
  background:var(--eb-bg); border-top:1px solid var(--eb-line);
  padding:34px 0; margin-top:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--eb-ink); font-size:16px; line-height:1.6; text-align:left;
}
.eb-foot-in{
  max-width:var(--eb-maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.eb-tag{font-size:14px;color:var(--eb-muted)}
.eb-fl{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--eb-muted)}
.eb-fl a{display:inline-flex;align-items:center;min-height:44px}
.eb-fl a{color:inherit;text-decoration:none}
.eb-fl a:hover{color:var(--eb-ink)}

/* A table is the one block that cannot reflow — let it scroll inside its own
   box instead of pushing the whole page sideways on a phone. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---------- "it's really shipped" proof chip ---------- */
.eb-proof{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  font-size:13px;font-weight:500;text-decoration:none;
  background:var(--eb-bg-soft);border:1px solid var(--eb-line);color:var(--eb-ink-soft);
}
.eb-proof:hover{border-color:var(--eb-lime-line)}
.eb-proof .eb-live{
  width:7px;height:7px;border-radius:50%;background:#1d7a55;
  box-shadow:0 0 0 3px rgba(29,122,85,.16);
}
.eb-proof.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#c8ccd4}
.eb-proof.on-dark:hover{border-color:var(--eb-lime-line)}

@media (max-width:900px){
  .eb-links{display:none}
  .eb-foot-in{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:520px){
  /* Login stays reachable on a phone — hiding it strands returning users,
     since the nav links are already gone at this width. Shrink, don't drop. */
  .eb-nav{gap:12px}
  .eb-login{font-size:14px}
  .eb-btn{height:44px;padding:0 16px}
}