/* ==========================================================================
   Privacy policy — long-form legal copy
   Comp geometry (live render, measured):
     mobile  section padding 36/20, heading 30/35.4, body 16/24, block gap 8
     1440    section padding 36/48, two columns 632 + 80 + 632,
             heading 42/47.88, body 18/27.9, block gap 18
   ========================================================================== */

.pp-block {
  background: #fff;
  padding: 36px var(--pad);
}
.pp-block h1,
.pp-block h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 30px; line-height: 35.4px; color: var(--ink);
}
.pp-body {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 16px; line-height: 24px; color: #3c4443;
  /* Figma bundles a Lato ~2.3% wider than the Google Fonts cut; without this
     the long legal paragraphs wrap a line earlier than the comp */
  letter-spacing: 0.01em;
}
.pp-body ul { padding-left: 24px; list-style: disc; }
.pp-body ul ul { padding-left: 24px; margin-top: 0; }
.pp-body li { margin: 0; }
.pp-body a { color: inherit; text-decoration: underline; }
.pp-body u { text-decoration: underline; }
/* a few body blocks are set one step larger on mobile */
.pp-lg { font-size: 18px; line-height: 27.9px; }

/* hero and the section dividers the comp uses to break up the document */
.pp-hero { background: var(--dark); padding: 160px var(--pad) 36px; }
.pp-hero h1 { color: var(--gray-200); }
.pp-hero .pp-body { color: var(--gray-200); }
.pp-heading-only { background: var(--line); }
/* the comp pins this one section's column to the 375 frame width */
.pp-pin > h2,
.pp-pin > .pp-body { max-width: 335px; margin-inline: auto; }

/* ---- the purposes table: one 335px column at mobile, three at 1440 ---- */
.pp-table-block { background: #fff; padding: 48px var(--pad) 64px; }
.pp-table-scroll { max-width: 335px; overflow-x: auto; }
.pp-table {
  width: 1255px; table-layout: fixed;
  border-collapse: collapse;
  box-shadow: inset 0 0 0 1px #3c4443;
  text-align: left;
}
.pp-table col { width: 335px; }
/* the off-screen columns are given room so the visible one sets row height */
.pp-table col:nth-child(2), .pp-table col:nth-child(3) { width: 460px; }
.pp-table th,
.pp-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #3c4443;
  vertical-align: top;
}
.pp-table th {
  position: relative;
  padding: 8px 20px;
  background: var(--line);
  font-family: var(--font-serif); font-weight: 400;
  font-size: 20px; line-height: 24px; color: var(--ink);
}
.pp-table td { font-size: 16px; line-height: 24px; color: #3c4443; }
.pp-table td p + p { margin-top: 8px; }
.pp-table tr:last-child td { border-bottom: 0; }
/* the comp sets the last five rows one step larger at mobile */
.pp-table tbody tr:nth-child(n+4) td { font-size: 18px; line-height: 27.9px; }

/* red "scroll right" affordance pinned to the first header cell */
.pp-table-next {
  position: absolute; top: 0; right: 0; width: 48px; height: 100%;
  background: var(--red) url(../assets/icons/misc/arrow-right-white.svg) no-repeat center / 20px 7px;
  border: 0; cursor: pointer;
}
/* paging arrows below the table, as in the mobile comp */
.pp-table-nav { display: flex; justify-content: space-between; padding-top: 20px; }
.pp-table-nav button {
  width: 40px; height: 40px; border: 0; cursor: pointer;
  background: var(--red) url(../assets/icons/misc/arrow-right-white.svg) no-repeat center / 20px 7px;
}
.pp-table-nav button:first-child { transform: scaleX(-1); }

/* ==========================================================================
   Desktop comp
   ========================================================================== */
@media (min-width: 1440px) {
  .pp-block {
    padding: 36px 48px;
    display: grid; grid-template-columns: 632px 632px; column-gap: 80px;
    align-items: start;
  }
  .pp-block h1,
  .pp-block h2 { font-size: 42px; line-height: 47.88px; }
  .pp-h-sm h2 { font-size: 24px; line-height: 30.72px; }
  .pp-body { margin-top: 0; gap: 18px; font-size: 18px; line-height: 27.9px; }
  .pp-lg { font-size: 18px; line-height: 27.9px; }
  .pp-body ul { padding-left: 27px; }
  .pp-body ul ul { padding-left: 27px; }

  .pp-hero { padding: 125px 48px 63px; }
  .pp-pin > h2,
  .pp-pin > .pp-body { max-width: none; margin-inline: 0; }
  .pp-heading-only { display: block; padding: 63px 48px; }

  .pp-table-block { padding: 48px 64px 112px; }
  .pp-table-scroll { max-width: none; overflow-x: visible; }
  .pp-table { width: 1312px; }
  .pp-table th, .pp-table td { padding: 16px 24px; }
  .pp-table th { font-size: 24px; line-height: 30.72px; }
  .pp-table td { font-size: 18px; line-height: 27.9px; }
  .pp-table tbody tr:nth-child(n+4) td { font-size: 18px; line-height: 27.9px; }
  .pp-table td p + p { margin-top: 17px; }
  .pp-table-nav { display: none; }
  .pp-table col:nth-child(1) { width: 583px; }
  .pp-table col:nth-child(2), .pp-table col:nth-child(3) { width: auto; }
  .pp-table col:nth-child(2) { width: 372px; }
  .pp-table col:nth-child(3) { width: 357px; }
  /* the comp's rows are fixed-height frames, taller than their copy */
  .pp-table thead tr { height: 125px; }
  .pp-table tbody tr:nth-child(1) { height: 105px; }
  .pp-table tbody tr:nth-child(2) { height: 245px; }
  .pp-table tbody tr:nth-child(3) { height: 275px; }
  .pp-table tbody tr:nth-child(4) { height: 250px; }
  .pp-table tbody tr:nth-child(5) { height: 310px; }
  .pp-table tbody tr:nth-child(6) { height: 300px; }
  .pp-table tbody tr:nth-child(7) { height: 205px; }
  .pp-table tbody tr:nth-child(8) { height: 255px; }
  .pp-table-next { display: none; }
}