/* ==========================================================================
   Policy pages — Terms of Services and Privacy Policy
   --------------------------------------------------------------------------
   One stylesheet, two documents. The reference these were drawn from sets a
   long legal document as a single measured column under a mono datestamp,
   with numbered headings and nothing else on the page; this is that, in the
   theme's own voice — Mono/Dark ground, the site's two faces, and the same
   48-gutter the mastheads use.

   Unlike the marketing pages this is not a fixed canvas. A document's height
   is its content, and its content changes whenever the policy does, so the
   column is a flow block on a measure rather than a composition on a grid.
   The 1920 unit still drives the type and the rhythm, so it scales with
   every other page.
   ========================================================================== */

.policy {
  position: relative;
  top: auto;
  /* The left edge is the nav bar's, not the logo's: 335 is where the pill
     holding Technology / Solutions / About starts, so the document reads as
     a column hung off the menu rather than off the mark. */
  padding: calc(220 * var(--s)) calc(48 * var(--s)) calc(200 * var(--s)) calc(335 * var(--s));
  background: var(--c-mono-dark);
}

/* The measure. 1100 is about 90 characters at this size, which is as wide as
   a line of this type stays comfortable -- but it sits against the section's
   own gutter rather than centring, so the document's left edge is the
   masthead's left edge. */
.policy__doc {
  width: 100%;
  max-width: calc(1100 * var(--s));
  margin-inline: 0;
}

.policy__stamp {
  margin: 0;
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  letter-spacing: calc(0.5 * var(--s));
  color: var(--c-accent-yellow);
  text-transform: uppercase;
}

.policy__h {
  margin: calc(28 * var(--s)) 0 0;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(72 * var(--s));
  line-height: 1.15;
  letter-spacing: calc(-2.88 * var(--s));
  color: var(--c-mono-light);
}

.policy__lede {
  margin: calc(32 * var(--s)) 0 0;
  font-size: calc(20 * var(--s));
  line-height: 1.55;
  letter-spacing: calc(-0.4 * var(--s));
  color: var(--c-light-grey-02);
}

/* The rule under the head, drawn the way every other rule on the site is. */
.policy__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: calc(56 * var(--s)) 0 0;
  background: rgba(236, 247, 255, 0.15);
}

.policy__section { margin-top: calc(64 * var(--s)); }

.policy__section h2 {
  margin: 0 0 calc(20 * var(--s));
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(32 * var(--s));
  line-height: 1.25;
  letter-spacing: calc(-1.28 * var(--s));
  color: var(--c-mono-light);
}

/* The number rides in the margin on a wide screen and folds into the line
   below it when there is no margin to ride in. */
.policy__section h2 .policy__n {
  display: inline-block;
  min-width: calc(52 * var(--s));
  font-family: var(--f-tech);
  font-size: calc(16 * var(--s));
  letter-spacing: calc(1 * var(--s));
  color: var(--c-accent-yellow);
  vertical-align: calc(6 * var(--s));
}

.policy__section h3 {
  margin: calc(32 * var(--s)) 0 calc(12 * var(--s));
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: calc(20 * var(--s));
  line-height: 1.3;
  letter-spacing: calc(-0.4 * var(--s));
  color: var(--c-mono-light);
}

.policy__section p,
.policy__section li {
  font-size: calc(17 * var(--s));
  line-height: 1.65;
  letter-spacing: calc(-0.34 * var(--s));
  color: var(--c-light-grey-02);
}

.policy__section p { margin: 0 0 calc(16 * var(--s)); }
.policy__section p:last-child { margin-bottom: 0; }

.policy__section ul {
  margin: 0 0 calc(16 * var(--s));
  padding-left: calc(22 * var(--s));
  list-style: none;
}
.policy__section li { position: relative; margin-bottom: calc(10 * var(--s)); }
.policy__section li::before {
  content: "";
  position: absolute;
  left: calc(-22 * var(--s));
  top: calc(12 * var(--s));
  width: calc(6 * var(--s));
  height: 1px;
  background: var(--c-accent-yellow);
}

.policy__section a {
  color: var(--c-mono-light);
  text-decoration: underline;
  text-underline-position: from-font;
}
.policy__section a:hover { color: var(--c-accent-yellow); }

/* A button dropped into a policy section (the 404 page's actions) is a button,
   not a document link: keep the .btn look, not the underlined-link style. */
.policy__section a.btn { text-decoration: none; }
.policy__section a.btn:hover { color: inherit; }

/* ---- Editor content -----------------------------------------------------
   The document is now the page's own editor content, so it arrives as plain
   <h2>/<p> rather than the old .policy__section markup. These rules give that
   content the same document voice, and a counter numbers the headings so the
   editor never types "01". The old .policy__section rules above stay for the
   404 page, which still composes its own markup. */
.policy__content { counter-reset: policy-n; }

/* The opening paragraph is the lede. */
.policy__content > p:first-child {
  margin: calc(32 * var(--s)) 0 0;
  font-size: calc(20 * var(--s));
  line-height: 1.55;
  letter-spacing: calc(-0.4 * var(--s));
  color: var(--c-light-grey-02);
}

.policy__content h2 {
  margin: calc(64 * var(--s)) 0 calc(20 * var(--s));
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(32 * var(--s));
  line-height: 1.25;
  letter-spacing: calc(-1.28 * var(--s));
  color: var(--c-mono-light);
}
/* The number rides in the margin, auto-generated, matching .policy__n. */
.policy__content h2::before {
  counter-increment: policy-n;
  content: counter(policy-n, decimal-leading-zero);
  display: inline-block;
  min-width: calc(52 * var(--s));
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: calc(16 * var(--s));
  letter-spacing: calc(1 * var(--s));
  color: var(--c-accent-yellow);
  vertical-align: calc(6 * var(--s));
}

.policy__content h3 {
  margin: calc(32 * var(--s)) 0 calc(12 * var(--s));
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: calc(20 * var(--s));
  line-height: 1.3;
  letter-spacing: calc(-0.4 * var(--s));
  color: var(--c-mono-light);
}

.policy__content p,
.policy__content li {
  font-size: calc(17 * var(--s));
  line-height: 1.65;
  letter-spacing: calc(-0.34 * var(--s));
  color: var(--c-light-grey-02);
}
.policy__content p { margin: 0 0 calc(16 * var(--s)); }

.policy__content ul {
  margin: 0 0 calc(16 * var(--s));
  padding-left: calc(22 * var(--s));
  list-style: none;
}
.policy__content li { position: relative; margin-bottom: calc(10 * var(--s)); }
.policy__content li::before {
  content: "";
  position: absolute;
  left: calc(-22 * var(--s));
  top: calc(12 * var(--s));
  width: calc(6 * var(--s));
  height: 1px;
  background: var(--c-accent-yellow);
}

.policy__content a {
  color: var(--c-mono-light);
  text-decoration: underline;
  text-underline-position: from-font;
}
.policy__content a:hover { color: var(--c-accent-yellow); }

/* The one thing on the page that is not the document: a standing note that
   this is a draft until counsel has read it. Deliberately hard to miss and
   trivial to delete -- one element, one rule. */
.policy__notice {
  margin-top: calc(56 * var(--s));
  padding: calc(24 * var(--s)) calc(28 * var(--s));
  border: 1px solid var(--c-accent-yellow);
  background: rgba(255, 209, 26, 0.06);
}
.policy__notice p {
  margin: 0;
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(15 * var(--s)));
  line-height: 1.6;
  color: var(--c-accent-yellow);
}

/* --- reflow --------------------------------------------------------------
   Nothing structural changes: a column of text is already the phone layout.
   Only the frame comes in and the type comes down. */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  /* The masthead is in the flow here, not absolute on the canvas, so the
     section's top padding would push it down the page. The space belongs to
     the document instead. */
  .policy { padding: 0 20px 96px; }
  .policy__doc { margin-top: 64px; }
  .policy__doc { max-width: none; }
  .policy__stamp { font-size: 10px; letter-spacing: 0.5px; }
  .policy__h { margin-top: 16px; font-size: 32px; letter-spacing: -1.28px; }
  .policy__lede { margin-top: 20px; font-size: 13px; line-height: 1.55; letter-spacing: -0.26px; }
  .policy__rule { margin-top: 32px; }
  .policy__section { margin-top: 40px; }
  .policy__section h2 { margin-bottom: 14px; font-size: 20px; letter-spacing: -0.8px; }
  .policy__section h2 .policy__n { min-width: 34px; font-size: 11px; vertical-align: 3px; }
  .policy__section h3 { margin: 22px 0 8px; font-size: 14px; letter-spacing: -0.28px; }
  .policy__section p,
  .policy__section li { font-size: 12px; line-height: 1.6; letter-spacing: -0.24px; }
  .policy__section p { margin-bottom: 12px; }
  .policy__section ul { padding-left: 16px; }
  .policy__section li::before { left: -16px; top: 9px; width: 5px; }
  /* Editor content, same reflow as the sections above. */
  .policy__content > p:first-child { margin-top: 20px; font-size: 13px; line-height: 1.55; letter-spacing: -0.26px; }
  .policy__content h2 { margin: 40px 0 14px; font-size: 20px; letter-spacing: -0.8px; }
  .policy__content h2::before { min-width: 34px; font-size: 11px; vertical-align: 3px; }
  .policy__content h3 { margin: 22px 0 8px; font-size: 14px; letter-spacing: -0.28px; }
  .policy__content p,
  .policy__content li { font-size: 12px; line-height: 1.6; letter-spacing: -0.24px; }
  .policy__content p { margin-bottom: 12px; }
  .policy__content ul { padding-left: 16px; }
  .policy__content li::before { left: -16px; top: 9px; width: 5px; }
  .policy__notice { margin-top: 36px; padding: 16px 18px; }
  .policy__notice p { font-size: 11px; }
}