/* Site-wide components shared by the homepage (index.html) and the Request a
   demo page (request-a-demo.html): animated highlights and the stensul.com
   footer. Loaded after homepage.css. */

/* ---------- Highlights ---------- */
/* One band per wrapped line, one line tall, sitting on the glyphs (see the
   hero title note above). Like the animated headlines on stensul.com, the band
   draws in left to right over 1.2s the first time it scrolls into view:
   js/site.js adds .is-drawn, and <html>.hl-anim (set in <head> unless
   the viewer prefers reduced motion) holds it at zero width until then. */
/* .hero-title .highlight matches the shared homepage.css rule's specificity,
   so this band (loaded later) replaces its solid full-height background. */
.highlight,
.hero-title .highlight {
  --hl-color: #FFFA66;
  --hl-width: 100%;
  /* 0.96em at 70%: with the tighter heading leading (css/type.css) this keeps the
     band >= 3.8px clear of the descenders above and 5px of the line below, while
     still covering the word's ascenders and descenders (measured 2026-10-10). */
  background: linear-gradient(var(--hl-color), var(--hl-color)) 0 70% / var(--hl-width) .96em no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 1.2s cubic-bezier(.45, 0, .25, 1);
}

.highlight--blue,
.hero-title .highlight--blue {
  --hl-color: #C9FEFF;
}

.hl-anim .highlight:not(.is-drawn) {
  --hl-width: 0%;
}

/* The section heading is set tight (1.1); give its highlight the same room as
   the hero title so a wrapped band never touches the line above. */
.section-heading .highlight,
.connect-embed .hero-title .highlight {
  padding: 0 .06em;
}

/* ---------- Footer: stensul.com layout ---------- */
/* Mirrors the stensul.com footer (measured at 1440px): brand + newsletter
   column, then Platform / Resources / Company link columns, social buttons,
   and the legal row. The newsletter is Stensul's live Marketo form #1112;
   Marketo's theme is switched off in js/site.js, so it is styled here. */

.sf-footer {
  background: #0D2828;
  color: #ffffff;
  font-family: 'Synapse', 'Inter', system-ui, sans-serif;
}

.sf-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 80px 38px;
}

.sf-top {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: clamp(48px, 15vw, 215px);
}

.sf-logo img {
  display: block;
  width: 104px;
  height: auto;
}

.sf-address {
  margin: 20px 0 0;
  font-size: 15.2px;
  line-height: 24px;
  color: rgba(255, 255, 255, .6);
}

.sf-rule {
  margin: 40px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.sf-news-heading {
  margin: 40px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #ffffff;
}

.sf-news-thanks,
.sf-consent {
  margin: 14px 0 0;
  font-size: 14.4px;
  line-height: 20.16px;
  color: rgba(255, 255, 255, .6);
}

.sf-news-thanks {
  color: #ffffff;
}

.sf-news-thanks[hidden],
.sf-consent[hidden],
.sf-news-form[hidden] {
  display: none;
}

/* Marketo form #1112 (their markup, restyled). Space is reserved so the
   footer does not jump when the form script arrives. */
.sf-news-form {
  width: 240px;
  max-width: 100%;
  min-height: 107px;
  margin: 25px 0 0;
  padding: 0;
  font-family: inherit;
}

.sf-news-form *,
.sf-news-form *::before,
.sf-news-form *::after {
  box-sizing: border-box;
}

.sf-news-form .mktoFormRow,
.sf-news-form .mktoFieldDescriptor,
.sf-news-form .mktoFormCol,
.sf-news-form .mktoFieldWrap,
.sf-news-form .mktoButtonRow,
.sf-news-form .mktoButtonWrap {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.sf-news-form .mktoOffset,
.sf-news-form .mktoGutter,
.sf-news-form .mktoClear,
.sf-news-form .mktoAsterix {
  display: none;
}

.sf-news-form .mktoLabel {
  display: block;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: #ffffff;
}

.sf-news-form input.mktoField {
  display: block;
  width: 100%;
  height: 43px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #AEB0B6;
  border-radius: 3px;
  background: #ffffff;
  font: 400 14px/1.2 'Synapse', 'Inter', sans-serif;
  color: #000000;
  box-shadow: none;
}

.sf-news-form input.mktoField:focus-visible {
  outline: 2px solid #FFFA66;
  outline-offset: 2px;
}

.sf-news-form .mktoButtonRow {
  margin-top: 20px;
}

.sf-news-form .mktoButton {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #FFFA66;
  font: 400 14px/17.5px 'Synapse', 'Inter', sans-serif;
  color: #201F1D;
  cursor: pointer;
  transition: background-color .15s ease;
}

.sf-news-form .mktoButton:hover {
  background: #FFFDC7;
}

.sf-news-form .mktoButton:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.sf-news-form .mktoError {
  position: static;
  margin-top: 6px;
}

.sf-news-form .mktoErrorArrowWrap {
  display: none;
}

.sf-news-form .mktoErrorMsg {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.4;
  color: #FFFA66;
  text-shadow: none;
}

/* Link columns */
.sf-nav {
  display: flex;
  align-items: flex-start;
  gap: 61px;
  padding-top: 7px;
}

.sf-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
}

.sf-sub {
  margin: 16px 0 0;
  font-size: 14.4px;
  line-height: 18px;
  color: rgba(255, 255, 255, .6);
}

.sf-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.sf-col ul + .sf-sub {
  margin-top: 22px;
}

.sf-col .sf-list--first {
  margin-top: 16px;
}

.sf-col a {
  font-size: 15.2px;
  line-height: 24px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.sf-col a:hover,
.sf-legal a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sf-social {
  display: flex;
  gap: 8px;
  margin-left: auto;
  margin-top: -7px;
}

.sf-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: #ffffff;
  transition: border-color .15s ease, background-color .15s ease;
}

.sf-social a:hover {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .06);
}

.sf-social svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sf-footer a:focus-visible {
  outline: 2px solid #FFFA66;
  outline-offset: 3px;
}

/* Legal row */
.sf-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 150px;
  font-size: 14.4px;
  line-height: 24px;
  color: rgba(255, 255, 255, .5);
}

.sf-legal {
  display: flex;
  gap: 24px;
}

.sf-legal a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .sf-inner {
    padding: 64px 40px 32px;
  }

  .sf-top {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }

  .sf-nav {
    flex-wrap: wrap;
    gap: 40px 56px;
    padding-top: 0;
  }

  .sf-bottom {
    margin-top: 72px;
  }
}

@media (max-width: 640px) {
  .sf-inner {
    padding: 48px 20px 28px;
  }

  .sf-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .sf-col a {
    white-space: normal;
  }

  .sf-social {
    grid-column: 1 / -1;
    margin: 0;
  }

  .sf-news-form {
    width: 100%;
  }

  .sf-bottom {
    flex-direction: column;
    margin-top: 56px;
  }
}