/* ============================================================================
   LEGAL PAGE STYLES
   ----------------------------------------------------------------------------
   Terms and conditions are a long, ordered document read top to bottom. They
   get a single measured column, comfortable line height and a back-to-contents
   affordance, rather than the card grid used elsewhere on the site. A card
   layout would break the sense of order the clauses depend on.
   ========================================================================== */

.sd-legal {
  padding: clamp(48px, 7vw, 96px) 0;
  background: #fff;
}

/* Breadcrumb trail - the same <nav class="sd-breadcrumb"><ol> markup every
   other page uses, kept to one row and aligned to the same content gutter.
   The shared block in css/software-development.css is tuned for the dark hero
   (light text, absolutely positioned); on this white page the trail sits in
   normal flow above the heading, so the colours are restated for a light
   background and the geometry is inherited from the section's own container. */
.sd-legal > .sd-breadcrumb {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  background: none;
}

.sd-legal .sd-breadcrumb ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  line-height: 20px;
  color: #5a7290;
  font-size: 14px;
  font-weight: 600;
}

.sd-legal .sd-breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.sd-legal .sd-breadcrumb a {
  color: #0a7ea4;
  text-decoration: none;
}

.sd-legal .sd-breadcrumb a:hover {
  text-decoration: underline;
}

.sd-legal .sd-breadcrumb a:focus-visible {
  outline: 2px solid #0a7ea4;
  outline-offset: 3px;
  border-radius: 3px;
}

.sd-legal .sd-breadcrumb li:last-child {
  color: #0b2545;
}

.sd-legal .sd-breadcrumb li + li::before {
  content: '/';
  margin-right: 10px;
  color: #9db2c8;
}

@media (max-width: 575px) {
  /* Keep the row to one line by trimming the ancestors, so the current page
     - the part that carries the information - always stays readable. */
  .sd-legal .sd-breadcrumb li:not(:last-child) {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sd-legal .sd-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

.sd-legal h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
  margin: 6px 0 14px;
  color: #0b2545;
}

.sd-legal-intro {
  font-size: 18px;
  line-height: 1.6;
  color: #46586e;
  margin: 0 0 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid #e4ebf3;
}

/* One clause per paragraph, in the original order. */
.sd-legal-body p {
  font-size: 16.5px;
  line-height: 1.78;
  color: #33465c;
  margin: 0 0 18px;
}

/* Clause text is often enumerated inside the paragraph. Give those a little
   more separation so the list reads as a list without restyling the wording. */
.sd-legal-body p + p {
  margin-top: 18px;
}

.sd-legal-body p strong,
.sd-legal-body p b {
  color: #0b2545;
  font-weight: 700;
}

.sd-legal-body a {
  color: #0a7ea4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-legal-body a:hover,
.sd-legal-body a:focus-visible {
  color: #065f7c;
}

/* Print: these are documents people save and file, so keep them clean. */
@media print {
  .sd-legal {
    padding: 0;
  }

  .sd-legal-body p {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }
}

@media (max-width: 640px) {
  .sd-legal-body p {
    font-size: 15.5px;
    line-height: 1.72;
  }
}