/* The three legal pages -- trust.html, privacy.html and dpa.html -- loaded from
   each template's head block, so between site.css and the reference stack,
   which is the documented slot for a page's own sheet. Everything here is
   either a `legal-` class the reference sheets have never heard of, or a
   two-class override of one of theirs, which outranks a later single-class
   rule on specificity rather than on order.

   This file is privacy.css promoted, exactly as privacy.css's own header said
   to do when a third legal page landed: trust.css and privacy.css were the
   same 250 lines under two prefixes, and dpa.html would have made three. The
   pages are read as a set -- the footer's legal row links all four of them from
   every page on the site -- and a document that looked like a different site
   would read as a different company's.

   Three rules are per-page and all three say why:
   `.site-page--trust` cancels the centred column (that page opens with a
   full-width card band the column has to line up under) and the rail's bottom
   padding (its next band brings its own). Nothing else here knows which page
   it is on. */

/* ---------------------------------------------------------------- the rail */

/* A plain chip row under the hero, not the sticky sub-nav .pim-anchors is on
   features and the case studies: it names the sections so the page declares
   its own length before anyone scrolls, and then it gets out of the way.
   Sticky would also not have worked as written -- the bar only travels while
   its containing block is taller than it is, and this one's wrapper is exactly
   its own height.

   Scoped by the wrapper rather than by a body class, so a fourth legal page
   needs no new selector here. */
.legal-rail-wrap .pim-anchors {
  position: static;
  margin-inline: 0;
  padding: var(--pim-space-3) 0 0;
  border-bottom: 0;
  background: none;
  backdrop-filter: none;
}

/* The shell is what keeps the chips off the edge of a phone: below 820px
   site.css turns this row into a horizontal scroller, and unwrapped it starts
   its scroll at x=0 while every other line on the page begins at 1.5rem. */
.legal-rail-wrap { padding-bottom: var(--pim-space-6); }

/* Trust's next band is a white section carrying its own 6.2rem of top air; the
   other two open straight into the tinted topic band, which needs the gap. */
.site-page--trust .legal-rail-wrap { padding-bottom: 0; }

/* The sentence under the hero that sends customers to the DPA. Wider than
   .pim-note's default measure, which is sized for a caption under a button. */
.legal-note {
  max-width: 74ch;
  margin-top: var(--pim-space-3);
}

/* ------------------------------------------------------------ the essentials */

/* Trust only: the four cards above its topic column. Two by two, fixed --
   .pim-grid--2's auto-fit floor is 330px, which in an 1160px shell is three
   columns and a fourth card alone on its own row. */
.legal-essentials .pim-heading { margin-bottom: var(--pim-space-4); }

.legal-essentials-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pim-space-3);
}

/* -------------------------------------------------------------- the topics */

/* One row per section: a label rail on the left, the prose on the right, a
   hairline between. Twelve of these read as one document. Twelve <section>s
   with their own eyebrow, heading and lede -- which is what the rest of the
   site does -- would have read as twelve pages. */
.legal-topic {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 66ch);
  /* Centred rather than left-aligned: a label rail plus a 66ch measure is
     under 900px, and left in the corner of an 1160px shell it leaves a third
     of the band empty on the right. The hairlines still run the full width,
     which is what holds the rows together as one list. */
  justify-content: center;
  gap: var(--pim-space-2) var(--pim-space-5);
  padding-block: var(--pim-space-5);
  border-top: 1px solid var(--pim-line);
  /* Clears the fixed header when the chip row jumps here. */
  scroll-margin-top: 92px;
}

/* Trust's column sits under a full-width band of cards, and centring it there
   puts a visible jog in the page's left edge. The other two open with the
   column, so there is no edge for it to disagree with. */
.site-page--trust .legal-topic { justify-content: normal; }

.legal-topic:first-child {
  padding-top: 0;
  border-top: 0;
}

.legal-topic:last-child { padding-bottom: 0; }

/* Sticky so the label is still on screen at the bottom of a long section --
   several of them run past a screenful. `align-self: start` is what makes the
   rail its own height rather than the row's; without it there is nothing for
   sticky to travel inside. */
.legal-topic-rail {
  position: sticky;
  top: 92px;
  align-self: start;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.legal-topic-glyph {
  display: inline-flex;
  color: var(--ref-blue-600);
}

.legal-topic-glyph .pim-icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* Not .pim-h2: pass4 pins that class's size with !important, and a section
   label is a rail item at body size, not a band heading at 40px. The element
   stays an h2 because that is what it is to a screen reader working the page
   by headings. */
.legal-topic-label {
  margin: 0;
  color: var(--ref-ink);
  font-family: var(--pim-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* The DPA numbers its sections because a contract gets cited by number. Muted
   and tabular so twelve of them line up down the rail without reading as part
   of the label. */
.legal-topic-number {
  flex: none;
  min-width: 1.35rem;
  color: var(--ref-muted);
  font-family: var(--pim-font-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.legal-topic-body { min-width: 0; }

.legal-topic-body p {
  margin: 0 0 0.95rem;
  color: var(--ref-copy);
  line-height: 1.7;
}

.legal-topic-body > :last-child { margin-bottom: 0; }

/* The one sentence of each section worth reading if you read nothing else. */
.legal-topic-claim {
  color: var(--ref-ink) !important;
  font-family: var(--pim-font-display);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 1.1rem !important;
}

/* -------------------------------------------------------- terms in a section */

/* The DPA's subject matter, duration and purpose: three one-line definitions
   inside a section, not a two-up grid. .pim-deflist's 300px auto-fit floor
   would pair two of the three and leave the third hanging. */
.legal-defs {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pim-space-2);
  margin-bottom: 1.2rem;
}

.legal-defs .pim-def dt { font-size: 1rem; }

/* site.css sizes a definition body for a drawer caption. These three are
   contract terms and are read at the same size as the prose around them. */
.legal-defs .pim-def dd {
  margin-top: 0.15rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------- the regions */

/* The two standard regions, as two chips rather than a bulleted list: there
   are two of them and they are the answer to the question above them. */
.legal-regions {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.legal-regions li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ref-line);
  border-radius: 999px;
  background: var(--ref-paper);
}

.legal-region-name {
  color: var(--ref-ink);
  font-family: var(--pim-font-display);
  font-weight: 600;
}

.legal-region-place {
  color: var(--ref-muted);
  font-size: 0.93em;
}

/* --------------------------------------------------------------- the ticks */

/* .pim-ticks is built for a pricing card, where it stretches to push the
   button to the bottom of the card. Inside a paragraph column it must not. */
.legal-ticks {
  flex: none;
  margin: 0 0 1.1rem;
  gap: 0.5rem;
}

.legal-ticks li {
  color: var(--ref-copy);
  line-height: 1.6;
}

/* And its type is sized for a card, not for a paragraph column: pass5 pins
   `.pim-ticks > li > span` at 14px !important, which is right inside a pricing
   card and two sizes small in a column of 16px prose. The span is what carries
   the text, so a rule on the li alone does nothing; this one outranks pass5 on
   specificity, since order cannot beat a sheet that loads later. */
.legal-topic-body .legal-ticks > li > span {
  font-size: 1rem !important;
}

/* ----------------------------------------------------------- the addresses */

/* Label above address, one pair per row, so the mailboxes are scannable
   without reading the sentence that introduces them. A definition list would
   be the stricter markup; this is a list of contact rows, and .pim-deflist is
   a two-up grid whose floor would put these side by side at widths where the
   address wraps mid-domain. */
.legal-contacts {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.legal-contacts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
}

.legal-contact-label {
  color: var(--ref-muted);
  font-size: 0.93rem;
  /* Fixed rather than auto so two addresses line up under each other. */
  flex: none;
  min-width: 11rem;
}

.legal-contacts a {
  color: var(--ref-blue-700);
  font-family: var(--pim-font-display);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* An address is one long unbreakable token on a narrow screen. */
  overflow-wrap: anywhere;
}

.legal-contacts a:hover { color: var(--ref-navy-800); }

/* ------------------------------------------------------- the closing block */

/* Trust closes on GDPR controller/processor, privacy on the same pair for
   tenant data, and the DPA states it in its own first lines -- so the block is
   one shape with one set of names. */
.legal-customer { scroll-margin-top: 92px; }

.legal-customer .pim-heading { margin-bottom: var(--pim-space-4); }

.legal-customer-body { max-width: 66ch; }

.legal-customer-body p {
  margin: 0 0 0.95rem;
  color: var(--ref-copy);
  line-height: 1.7;
}

.legal-customer-scope { margin-bottom: 1.1rem !important; }

/* Controller and processor are one fact each, so the pair sits in the two-up
   definition list the agent page already uses. */
.legal-roles {
  /* .pim-deflist--two auto-fits at a 300px floor, which inside a 66ch prose
     column is one column and a stacked pair. Two facts of three words each
     belong side by side. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--pim-space-4);
}

.legal-roles .pim-def dd { margin-top: 0.15rem; }

/* --------------------------------------------------------------- imprint */

/* The legal notice has no topic column -- five facts on one screen -- so the
   measure is set here instead of by a grid track. */
.legal-imprint-body { max-width: 66ch; }

/* <address> renders italic by default, which a postal address does not want.
   One line per grid row rather than <br>, so the block is a list of lines to
   anything reading it aloud. */
.legal-address {
  display: grid;
  gap: 0.15rem;
  margin-bottom: var(--pim-space-4);
  color: var(--ref-copy);
  font-style: normal;
  line-height: 1.7;
}

.legal-address-name {
  color: var(--ref-ink);
  font-family: var(--pim-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

/* The rail label reused as this page's one subheading, so it needs the top air
   a rail item never does. */
.legal-subhead { margin-top: var(--pim-space-4) !important; }

/* ----------------------------------------------------------- narrow view */

@media (max-width: 860px) {
  /* The rail stops being a column and becomes a heading over its own prose, so
     sticky has nothing left to do. */
  .legal-topic {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pim-space-2);
    padding-block: var(--pim-space-4);
  }

  .legal-topic-rail {
    position: static;
    top: auto;
  }

  .legal-customer-body { max-width: none; }

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

@media (max-width: 760px) {
  .legal-essentials-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 660px) {
  /* The label column stops paying for itself once the address wraps under it
     anyway. */
  .legal-contact-label { min-width: 0; }
}