/* RIB.IT public site: the landing, privacy and support pages. Plain HTML and CSS, no scripts, no tracking. */
:root { --navy: #0b2a4a; --cream: #f6e9c8; --sky: #1f8bd6; --deep: #0b3a66; --link: #0b5fa5; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--navy);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, var(--sky), var(--deep)) fixed;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 28px 16px 56px; }
a.brand { display: block; text-decoration: none; color: inherit; }
header.brand { display: flex; align-items: center; gap: 14px; color: #fff; margin-bottom: 20px; text-decoration: none; }
header.brand img { width: 56px; height: 56px; border-radius: 14px; border: 3px solid var(--navy); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
header.brand b { font-size: 26px; letter-spacing: 1px; }
header.brand span { display: block; font-size: 14px; opacity: 0.85; }
.card { background: var(--cream); border: 3px solid var(--navy); border-radius: 22px; padding: 22px 22px 26px; box-shadow: 0 5px 0 #b9a57a, 0 10px 18px rgba(0, 0, 0, 0.25); }
h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.2; }
h2 { margin: 28px 0 6px; font-size: 20px; }
p, ul { margin: 8px 0; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
a { color: var(--link); }
.updated { margin: 0 0 14px; font-size: 14px; opacity: 0.75; }
.short { padding: 12px 14px; border-radius: 14px; background: #fff7dc; border: 2px solid #d9c48d; }
nav.links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #fff; font-size: 15px; }
nav.links a { color: #fff; }
footer { margin-top: 18px; color: #fff; font-size: 14px; opacity: 0.85; }
.btn { display: inline-block; margin-top: 10px; padding: 10px 18px; border: 3px solid var(--navy); border-radius: 14px; background: #ffe45e; color: var(--navy); font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 #b9a57a; }
@media (max-width: 480px) { body { font-size: 16px; } .card { padding: 18px 16px 22px; } h1 { font-size: 24px; } }
