:root {
  --primary-bg: #222;
  --secondary-bg: #f4f4f4;
  --tertiary-bg: #e7e7e7;
  --contact-bg: #ddd;
  --details-bg: #bfbfbf;
  --text-light: #fff;
  --text-dark: #222;
  --max-width: 900px;
}

/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a.external::after { content: ' ↗'; font-size: 0.8em; }

/* =====================================================
   HEADER — IDENTICAL TO PRIVACY POLICY PAGE
   ===================================================== */

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 220px;
  background: var(--primary-bg);
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  padding: 20px 20px 0 20px;
}

.logo {
  max-width: 350px;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
}

.header-text {
  margin-top: 10px;
  font-size: 1.1rem;
}

/* =====================================================
   FOOTER
   ===================================================== */

footer {
  background: var(--primary-bg);
  color: var(--text-light);
  text-align: center;
  font-style: italic;
  padding: 20px 0;
}

footer .footer-inner { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  max-width: var(--max-width); 
  margin: 0 auto; 
  padding: 0 20px;
}
footer .footer-inner p { margin: 5px 0; }
footer .footer-inner a { font-style: normal; color: var(--text-light); text-decoration: none; }
footer .footer-inner a:hover { text-decoration: underline; }

/* =====================================================
   SECTIONS
   ===================================================== */

main { width: 100%; }

section {
  padding: 60px 20px;
  width: 100%;
  display: block;
  text-align: center;
}

.inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }

h2, h3 { font-size: 2rem; margin-top: 0; margin-bottom: 40px; }
p { margin: 0 0 20px 0; }
ul { list-style: none; padding: 0; margin: 0 0 20px 0; }
li { margin-bottom: 10px; }
strong { font-weight: bold; }

/* Section backgrounds */
.what-i-do, .what-info, .collection-bases, .sources { background: var(--secondary-bg); }
.what-makes-me-different, .data-use { background: var(--tertiary-bg); }
.contact, .lawful-bases, .how-to-complain { background: var(--contact-bg); }
.contact-details { background: var(--details-bg); }

/* =====================================================
   WHAT I DO — ADDED LINE SPACING (OPTION 1)
   ===================================================== */

.what-i-do ul li {
  margin-bottom: 22px; /* clean readable spacing */
}

/* =====================================================
   ICONS — MATERIAL SYMBOLS VARIABLE FONT
   ===================================================== */

.icon-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 15px;
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 600,
    "GRAD" 0,
    "opsz" 48;
  line-height: 1;
  color: var(--text-dark);
}

/* Large icon sizes (Option B) */
.icon-small {
  font-size: 5rem;
}

.icon-diamond {
  font-size: 7.5rem; /* 1.5× larger */
}

/* Fix line spacing in Privacy Policy-style pages */
.what-makes-me-different ul li {
  margin-bottom: 1.5em;
}

.what-makes-me-different ul li p {
  margin-bottom: 0;
  line-height: 1.6;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 600px) {

  header {
    height: 170px;
    padding-top: 15px;
  }

  .logo { max-width: 220px; margin-bottom: 5px; }

  section { padding: 30px 15px; }

  h2, h3 { font-size: 1.5rem; margin-bottom: 30px; }

  .icon-row {
    gap: 20px;
    flex-wrap: wrap;
  }

  .icon-small { font-size: 3rem; }
  .icon-diamond { font-size: 4.5rem; }

  li { margin-bottom: 8px; }

  footer .footer-inner { 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    padding: 0 10px; 
  }
  footer .footer-inner p { text-align: center; }
}