/* The user guide at /help/documentation. Measurements are copied from
   iLovePDF's /help/documentation stylesheet (pages.css .guide*, web.css
   .block*), because the client asked for that page's shape: a white block, a
   centred title and subtitle, and an 840px reading column where each family is
   a grey uppercase heading over a hairline and each tool is a 24px mark plus
   copy. Only the colours come from our theme. */

main.doc-main { max-width: none; padding: 0; background: #fff; }

.doc-block {
  position: relative;
  padding: 64px 0 72px;
  background: #fff;
}
.doc-block-inner {
  width: 92%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Their block__header: centred, up to 1100px, title then subtitle. */
.doc-head {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.doc-head h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--brand-navy);
}
.doc-sub {
  margin: 24px auto 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: #47474f;
}

/* Their .guide: the 840px column, 64px under the header. */
.doc-guide {
  max-width: 840px;
  margin: 64px auto 0;
}

/* Their .guide__title */
.doc-cat {
  margin: 0 0 32px;
  padding: 24px 0 12px;
  border-bottom: 1px solid #aeaeb2;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #969696;
  scroll-margin-top: 88px;
}
.doc-cat-lead {
  margin: -16px 0 28px;
  font-size: 16px;
  line-height: 26px;
  color: #47474f;
}
.doc-cat-lead a, .doc-policy-list a { color: var(--ocean-blue); }

/* Their .guide__item — a 24px mark, then the copy. */
.doc-entry {
  display: flex;
  margin: 0 0 24px;
  padding: 0 0 24px;
  scroll-margin-top: 88px;
}
.doc-entry-ico {
  flex: 0 0 24px;
  margin-right: 12px;
  line-height: 1;
}
.doc-entry-ico i {
  font-size: 20px;
  line-height: 24px;
  color: var(--c, var(--brand));
}
.doc-entry-copy { flex: 1 1 auto; min-width: 0; }
.doc-entry-copy h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0;
  color: #383e45;
}
/* The heading is the link to the tool: same ink, so the row still reads as
   their plain heading. */
.doc-entry-copy h3 a {
  color: inherit;
  text-decoration: none;
}
.doc-entry-copy h3 a:hover { color: var(--brand); text-decoration: underline; }
.doc-entry-copy p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 26px;
  color: #47474f;
}
.doc-entry-copy p:last-child { margin-bottom: 0; }
.doc-entry-copy p a { color: var(--ocean-blue); }
.doc-entry-copy p a:hover { color: var(--brand-dark); }
.doc-entry-links {
  font-size: 15px !important;
  color: var(--muted) !important;
}

/* Their page has no policy block; ours closes with the same quiet type. */
.doc-policy-list {
  margin: 0 0 24px;
  padding: 0 0 0 18px;
  font-size: 16px;
  line-height: 26px;
  color: #47474f;
}
.doc-policy-list li { margin: 0 0 8px; }
.doc-policy-list b { color: #383e45; }

@media (max-width: 900px) {
  .doc-block { padding: 40px 0 48px; }
  .doc-guide { margin-top: 40px; }
  .doc-cat { font-size: 20px; margin-bottom: 24px; padding-top: 18px; }
  .doc-sub { line-height: 26px; }
}
@media (max-width: 560px) {
  .doc-entry-copy h3 { font-size: 18px; line-height: 24px; }
  .doc-entry-copy p { font-size: 15px; line-height: 24px; }
}
@media print {
  .doc-block { padding: 0; }
  .doc-entry-links { display: none; }
}