/**
 * Privacy Policy — built to the supplied wireframes.
 *
 * Conditional sheet, filemtime-versioned, outside the bundle.
 *
 * Responsive behaviour follows the spec: 3-column principles grid on
 * desktop with the accordion left and callout right; 2-column
 * principles on tablet; single column with a full-width accordion and
 * stacked callout on mobile.
 */

.privacy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1200px;
}

/* Editors-only reminder that the legal entity is still outstanding. */
.privacy-admin-note {
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.privacy-admin-note p {
  margin: 0.3rem 0 0;
}

/* ---- Hero ---------------------------------------------------------- */

.privacy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(130deg, #F3F1FE, #EAF2FE 55%, #F6F0FB);
}

.privacy-hero__heading {
  margin: 0 0 0.7rem;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--color-ink-heading);
}

.privacy-hero__lede {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 58ch;
}

.privacy-hero__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.privacy-hero__art {
  position: relative;
  display: block;
  min-height: 200px;
}

.privacy-hero__shield {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-deep));
  color: var(--color-white);
  box-shadow: 0 12px 28px rgba(109, 94, 245, 0.35);
}

.privacy-hero__orb {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.privacy-hero__orb--1 { top: 18%; left: 62%; }
.privacy-hero__orb--2 { top: 34%; left: 24%; }
.privacy-hero__orb--3 { top: 24%; left: 86%; }
.privacy-hero__orb--4 { top: 72%; left: 22%; }
.privacy-hero__orb--5 { top: 80%; left: 74%; }

/* ---- Section headings ---------------------------------------------- */

.privacy-section__title {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  text-align: center;
  color: var(--color-ink-heading);
}

.privacy-section__lede {
  margin: 0 0 1.1rem;
  font-size: 0.83rem;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---- Principles ----------------------------------------------------- */

.privacy-principles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
}

.privacy-principles__item {
  min-width: 0;
  text-align: center;
  padding: 1rem 0.6rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.privacy-principles__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
}

.privacy-principles__title {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.privacy-principles__text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Policy body ---------------------------------------------------- */

.privacy-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 1.25rem;
  align-items: start;
}

.privacy-accordion {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.privacy-accordion__item + .privacy-accordion__item {
  border-top: 1px solid var(--color-border-soft);
}

.privacy-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.privacy-accordion__summary::-webkit-details-marker {
  display: none;
}

.privacy-accordion__summary:hover {
  background: var(--color-surface);
}

.privacy-accordion__chev {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.privacy-accordion__item[open] .privacy-accordion__chev {
  transform: rotate(270deg);
}

.privacy-accordion__body {
  padding: 0 1rem 1rem;
}

.privacy-accordion__body p {
  margin: 0 0 0.6rem;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.privacy-accordion__body p:last-child {
  margin-bottom: 0;
}

/* ---- Help callout ---------------------------------------------------- */

.privacy-callout {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.privacy-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.7rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-primary);
}

.privacy-callout__title {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--color-ink-heading);
}

.privacy-callout__text {
  margin: 0 0 1rem;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- Editor content --------------------------------------------------- */

.privacy-editor {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  font-size: 0.86rem;
  line-height: 1.7;
}

/* ---- Trust banner ------------------------------------------------------ */

.privacy-trust {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.privacy-trust__icon {
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.privacy-trust__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.privacy-trust__copy strong {
  font-size: 0.88rem;
  color: var(--color-primary);
}

.privacy-trust__copy span {
  font-size: 0.79rem;
  color: var(--color-text-muted);
}

/* ---- Focus ------------------------------------------------------------- */

.privacy a:focus-visible,
.privacy summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .privacy-accordion__chev {
    transition: none;
  }
}

/* ---- ≤1199: principles 3-up ------------------------------------------- */

@media (max-width: 1199px) {
  .privacy-principles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- ≤1023: callout below the accordion ------------------------------- */

@media (max-width: 1023px) {
  .privacy-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-hero__art {
    min-height: 160px;
  }

  .privacy-body__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- ≤767: single column ---------------------------------------------- */

@media (max-width: 767px) {
  .privacy {
    gap: 0.9rem;
  }

  .privacy-hero {
    padding: 1.1rem;
  }

  .privacy-hero__heading {
    font-size: 1.35rem;
  }

  .privacy-hero__lede {
    font-size: 0.82rem;
    max-width: none;
  }

  .privacy-principles__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-principles__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.7rem;
    text-align: left;
    padding: 0.85rem;
  }

  .privacy-principles__icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .privacy-trust {
    flex-direction: column;
    align-items: flex-start;
  }

  .privacy-trust .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   Accent palette — privacy.css loads on its own, so it needs its own
   copy of the pair definitions. The nth-child mapping and the icon /
   title rules that consume them live in legalpage.css, which is NOT
   loaded on this page; the mapping is therefore repeated here for the
   one grid this page owns.
   ===================================================================== */

.privacy {
  --a1: #6D5EF5; --a1s: #EDEBFE;
  --a2: #2563EB; --a2s: #DBEAFE;
  --a3: #0F766E; --a3s: #CCFBF1;
  --a4: #DB2777; --a4s: #FCE7F3;
  --a5: #15803D; --a5s: #DCFCE7;
  --a8: #DC2626; --a8s: #FEE2E2;
}

.privacy-principles__item:nth-child(6n+1) { --accent: var(--a1); --accent-soft: var(--a1s); }
.privacy-principles__item:nth-child(6n+2) { --accent: var(--a2); --accent-soft: var(--a2s); }
.privacy-principles__item:nth-child(6n+3) { --accent: var(--a3); --accent-soft: var(--a3s); }
.privacy-principles__item:nth-child(6n+4) { --accent: var(--a4); --accent-soft: var(--a4s); }
.privacy-principles__item:nth-child(6n+5) { --accent: var(--a5); --accent-soft: var(--a5s); }
.privacy-principles__item:nth-child(6n+6) { --accent: var(--a8); --accent-soft: var(--a8s); }

.privacy-principles__icon {
  background: var(--accent-soft, var(--color-surface));
  color: var(--accent, var(--color-primary));
}

.privacy-principles__title {
  color: var(--accent, var(--color-ink-heading));
}

/* Card border picks up a hint of its own accent, as drawn — enough to
   read as a set of coloured tiles rather than six grey boxes. */
.privacy-principles__item {
  border-color: var(--accent-soft, var(--color-border-soft));
}

/* Accordion summaries carry a left accent bar on hover and when open,
   so an expanded section is identifiable without reading it. */
.privacy-accordion__item[open] > .privacy-accordion__summary {
  box-shadow: inset 3px 0 0 var(--color-primary);
  background: var(--color-surface);
}

/* Callout given the wireframe's tinted panel rather than flat grey. */
.privacy-callout {
  background: linear-gradient(160deg, #F1EFFE, #EDF3FE);
}

.privacy-trust {
  background: linear-gradient(120deg, #F1EFFE, #EDF3FE);
}

/* ---- Information We Collect & Why ------------------------------------- */
/* A real <table> with row headers, not a grid of divs: this is tabular
   data, and a screen reader should be able to announce "Cookies —
   essential functionality and preferences" as a pair. */

.privacy-purposes {
  padding: 1.15rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.privacy-purposes__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.privacy-purposes__table th,
.privacy-purposes__table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-soft);
  overflow-wrap: break-word;
}

.privacy-purposes__table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border);
}

.privacy-purposes__table tbody th {
  width: 38%;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.privacy-purposes__table tbody td {
  color: var(--color-text-muted);
}

.privacy-purposes__table tbody tr:last-child th,
.privacy-purposes__table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 767px) {
  .privacy-purposes__table,
  .privacy-purposes__table tbody,
  .privacy-purposes__table tr {
    display: block;
  }

  /* The header row is meaningless once rows stack, but it stays in the
     DOM for screen readers rather than being removed. */
  .privacy-purposes__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .privacy-purposes__table tbody th,
  .privacy-purposes__table tbody td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: 0.15rem 0;
  }

  .privacy-purposes__table tbody tr {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border-soft);
  }
}