/* Shared shell for the legal pages. They are documents, not marketing: one readable column,
   generous line height, and the brand only in the header and footer. */

body { margin: 0; background: #ffffff; color: #1f2937; }
a { color: #1565c0; }
a:focus-visible { outline: 2px solid #35c0ff; outline-offset: 3px; border-radius: 4px; }
.rhd { font-family: 'Red Hat Display', system-ui, 'Segoe UI', sans-serif; }
.inter, body { font-family: 'Inter', system-ui, sans-serif; }

.topbar { background: #0b2545; color: #eaf1fb; }
.topbar-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 26px clamp(20px, 5.6vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-word { font-weight: 700; font-size: 20px; letter-spacing: -0.015em; }
.topbar a { color: #b9cbe4; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.topbar a:hover { color: #ffffff; }

main {
  max-width: 760px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5.6vw, 40px) 80px;
}
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; color: #101828; }
.updated { color: #64748b; font-size: 14px; margin: 0 0 40px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 40px 0 12px; color: #101828; }
h2:first-of-type { margin-top: 32px; }
p, li { font-size: 15.5px; line-height: 1.7; color: #3f4a5a; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
dl { margin: 0; }
dt { font-weight: 600; color: #101828; font-size: 14px; margin-top: 16px; }
dd { margin: 4px 0 0; font-size: 15.5px; color: #3f4a5a; line-height: 1.7; }

/* Deliberately loud. A placeholder that is easy to miss is a placeholder that gets published — an
   imprint missing legally required details is worse than an obviously unfinished one. */
.todo {
  border: 1px solid #f0b429; background: #fffbeb; border-radius: 10px;
  padding: 14px 16px; margin: 16px 0; font-size: 14.5px; line-height: 1.6; color: #7a5008;
}
.todo strong { color: #7a5008; }

.foot { background: #0b2545; color: #93a9c9; }
.foot-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 34px clamp(20px, 5.6vw, 72px);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; line-height: 1.8;
}
.foot a { color: #dbe6f5; text-decoration: none; }
.foot a:hover { text-decoration: underline; }