Website: fix visual bugs found in a page-by-page review

- Gradient buttons showed a dark sliver on the right: the background shorthand reset
  background-origin, so the gradient repeated under the transparent border.
- Phone header: keep the brand on one line and drop the GitHub button under 480px.
- Hero pill: put the platform list on its own line on phones instead of orphaning one item.
- Privacy page: plain sections instead of open accordions whose x looked like a close button.
- Same header (GitHub button) and footer links on every page; legend spacing on the form.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

site/public/css/site.css

@@ -32,12 +32,14 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg
        -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
 .top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
 .brand { display: flex; align-items: center; gap: 10px; color: var(--bright); font-weight: 700; letter-spacing: 2.2px; font-size: 14px; text-transform: uppercase; }
+.brand { white-space: nowrap; }
 .brand img { width: 30px; height: 30px; }
 .top nav { display: flex; gap: 22px; margin-left: 8px; }
 .top nav a { color: var(--muted); font-size: 14.5px; font-weight: 500; }
 .top nav a:hover, .top nav a[aria-current] { color: var(--bright); }
 .top .end { margin-left: auto; display: flex; gap: 10px; align-items: center; }
 @media (max-width: 880px) { .top nav { display: none; } }
+@media (max-width: 480px) { .top .end .ghost { display: none; } }
 
 /* ---- buttons ---- */
 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: 10px;
@@ -46,6 +48,8 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg
 .btn:hover { background: rgba(103, 112, 123, .4); color: var(--bright); }
 .btn.primary { background: var(--action); box-shadow: 0 8px 28px rgba(26, 159, 255, .28); }
 .btn.primary:hover { background: var(--action-hi); transform: translateY(-1px); }
+/* The background shorthand resets this; without it the gradient repeats under the transparent border. */
+.btn.primary, .btn.primary:hover { background-origin: border-box; }
 .btn.ghost { background: transparent; border-color: var(--line); }
 .btn.ghost:hover { border-color: rgba(143,152,160,.4); background: rgba(255,255,255,.03); }
 .btn.small { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
@@ -63,6 +67,8 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg
 .eyebrow { display: inline-block; max-width: 100%; padding: 6px 14px; border-radius: 999px; font-size: 13.5px;
            color: var(--link); background: rgba(26,159,255,.1); border: 1px solid rgba(102,192,244,.22); margin-bottom: 26px; }
 .eyebrow b { color: var(--bright); font-weight: 600; }
+.eyebrow .plats { white-space: nowrap; }
+@media (max-width: 520px) { .eyebrow { border-radius: 16px; } .eyebrow .sep { display: none; } .eyebrow .plats { display: block; } }
 .hero h1 { max-width: 880px; margin: 0 auto; }
 .hero h1 span { background: linear-gradient(90deg, #66c0f4, #1a9fff 45%, #8a6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
 .lede { max-width: 680px; margin: 22px auto 0; font-size: 19px; color: var(--text); }
@@ -135,6 +141,8 @@ section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
 .faq details[open] summary::after { transform: rotate(45deg); }
 .faq details > div { padding: 0 0 20px; color: var(--muted); }
 .faq details > div p + p { margin-top: 10px; }
+.faq.notes section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px 20px; color: var(--muted); }
+.faq.notes h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--bright); margin: 0 0 10px; }
 
 .split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .split .card { padding: 36px; }
@@ -160,6 +168,7 @@ aside.panel p { color: var(--muted); font-size: 15px; }
 aside.panel p + h3 { margin-top: 26px; }
 .field { display: grid; gap: 8px; margin-bottom: 22px; }
 .field > label, .field > legend { color: var(--bright); font-weight: 600; font-size: 14.5px; padding: 0; }
+.field > legend { margin-bottom: 10px; }  /* fieldset grids ignore gap for the legend */
 .field small { color: var(--muted); font-size: 13px; font-weight: 400; }
 .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
 @media (max-width: 640px) { .row3 { grid-template-columns: 1fr; } }