/* ==========================================================================
   Privacy Policy (/privacy-policy/)
   --------------------------------------------------------------------------
   A dark document page: light text on black, red headings and rules,
   between the shared (white) header and (red) footer.

   Contents
     1. Page tokens and frame
     2. Title block and summary
     3. Sections, lists and links
     4. Table
     5. Document footer
   ========================================================================== */


/* 1. Page tokens and frame ---------------------------------------------- */

:root {
  --policy-bg: var(--color-black);
  --policy-panel: #1a1a1a;          /* summary box */
  --policy-text: #d9d9d9;           /* running text */
  --policy-text-strong: #ededed;
  --policy-text-soft: #b3b3b3;      /* subtitle */
  --policy-text-faint: #8c8c8c;     /* dates, document footer */
  --policy-rule: var(--color-red);  /* red lines under headings */
  --policy-line: #333;              /* grey hairlines */
  --policy-accent: #ff4d40;         /* red text on black: readable contrast */
}

.policy-page {
  background: var(--policy-bg);
  color: var(--policy-text);
}

.policy {
  max-width: calc(880px + 2 * var(--gutter));
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem);
  line-height: 1.65;
  letter-spacing: -0.01em;
}


/* 2. Title block and summary -------------------------------------------- */

.policy__header {
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--policy-rule);
}

.policy__title {
  margin-bottom: 0.75rem;
  color: var(--policy-accent);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.policy__subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin-bottom: 0.25rem;
  color: var(--policy-text-soft);
  font-size: 1rem;
}

.policy__divider {
  color: var(--policy-text-faint);
}

.policy__updated {
  color: var(--policy-text-faint);
  font-size: 0.875rem;
  font-style: italic;
}

.policy__summary {
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--policy-rule);
  background: var(--policy-panel);
  color: var(--policy-text-strong);
}


/* 3. Sections, lists and links ------------------------------------------ */

.policy__section {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.policy__section h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--policy-rule);
  color: var(--policy-accent);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.policy__address {
  margin-bottom: 1em;
  font-style: normal;
}

.policy__list {
  margin: 0 0 1em;
  padding-left: 1.4rem;
}

.policy__list li {
  margin-bottom: 0.4em;
  padding-left: 0.25rem;
}

.policy__list li::marker {
  color: var(--policy-accent);
}

.policy a {
  color: var(--policy-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.policy a:hover {
  color: var(--color-white);
}


/* 4. Table (purpose / why) ---------------------------------------------- */

.policy__table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.policy__table th,
.policy__table td {
  padding: 0.7rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.policy__table th {
  border-bottom: 1px solid var(--policy-line);
  color: var(--policy-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.policy__table td {
  border-bottom: 1px solid #262626;
}

.policy__table tr:last-child td {
  border-bottom: 0;
}

/* The first column is the short label; keep it from getting squeezed. */
.policy__table td:first-child {
  width: 34%;
  color: var(--policy-text-strong);
}

@media (max-width: 520px) {
  .policy__table th,
  .policy__table td {
    padding-inline: 0.4rem;
  }

  .policy__table td:first-child {
    width: 40%;
  }
}


/* 5. Document footer ---------------------------------------------------- */

.policy__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--policy-line);
  color: var(--policy-text-faint);
  font-size: 0.8125rem;
}