@font-face{font-family:Manrope;src:url(/assets/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
/* Shared visual treatment for the existing policy and installation pages. */
body {
  background: #f1f1eb;
  color: #242820;
  font-family: "Manrope", Arial, sans-serif;
  line-height: 1.75;
}
a {
  color: #2b4be9;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid #2b4be9;
  outline-offset: 4px;
}
.support-header {
  background: #242820;
  color: #f1f1eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px max(24px, 5vw);
  margin-bottom: 0;
}
.support-brand {
  display: inline-flex !important;
  gap: 12px;
  align-items: center;
  color: #f1f1eb;
  text-decoration: none;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -1px;
}
.support-brand img {
  width: 30px;
  height: 30px;
}
.support-header > a:last-child {
  color: #b7c3ff;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.container {
  max-width: 850px;
  margin: 65px auto;
  padding: 0 25px 70px;
}
.container h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(36px, 5vw, 55px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1.2;
  margin-bottom: 17px;
}
.container h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 22px;
  font-weight: 550;
  letter-spacing: -0.6px;
  color: #242820;
  margin-top: 40px;
}
.container p,
.container li {
  color: #62665e;
  font-size: 15px;
}
.container .updated {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #7d866e;
  padding-bottom: 25px;
  border-bottom: 1px solid #d3d9c8;
}
.container .contact-box {
  border-radius: 0;
  background: #e8edde;
  border: 1px solid #cbd4bc;
  padding: 27px;
}
.support-footer {
  border-top: 1px solid #ced5c3;
  padding: 25px max(24px, 5vw);
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #647454;
}
.support-footer a {
  color: inherit;
}
body.guide-page .hero {
  max-width: 850px;
  padding: 50px 24px 0;
  margin: 0 auto;
}
body.guide-page .hero h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(32px, 5vw, 49px);
  letter-spacing: -1.8px;
  font-weight: 500;
  color: #242820;
  line-height: 1.15;
}
body.guide-page .hero p {
  color: #717e63;
  margin-top: 19px;
}
body.guide-page .content {
  max-width: 850px;
  padding: 0 24px 65px;
}
.code-strip,
.step-block,
.platform-card,
.help-card {
  border-radius: 0;
  border: 1px solid #d0d8c3;
  box-shadow: none;
  background: #fafbf6;
}
.code-strip-label {
  font-size: 10px;
  color: #61734d;
}
.code-box {
  background: #263322;
  color: #b7c3ff;
  border-radius: 0;
  padding-right: 74px;
}
.copy-btn {
  border-radius: 0;
  color: #b7c3ff;
}
.step-block-header {
  border-color: #d9dfcf;
}
.step-num-big {
  background: #b7c3ff;
  color: #334922;
  border-radius: 0;
}
.step-block-title,
.platform-name,
.micro-text strong,
.help-card strong {
  color: #2a3c20;
}
.step-block-sub,
.micro-text,
.help-card p {
  color: #637155;
}
.micro-num {
  background: #e8efd9;
  color: #4c672d;
}
.ptab {
  border-radius: 0;
  border: 1px solid #ced9bd;
  color: #536943;
}
.ptab:hover {
  border-color: #749148;
  color: #344e20;
}
.ptab.active {
  background: #2d3d24;
  color: #e0f1c7;
  border-color: #2d3d24;
}
.tip,
.warn {
  border-radius: 0;
}
.help-card a {
  color: #4a622c;
}
.platform-card.open .platform-header {
  border-color: #dce3d0;
}
.platform-header:hover {
  background: #edf1e5;
}
@media (max-width: 500px) {
  .support-header {
    padding: 22px;
  }
  .support-brand {
    font-size: 20px;
  }
  .support-header > a:last-child {
    font-size: 10px;
  }
  .container {
    margin: 40px auto;
  }
  .container p,
  .container li {
    font-size: 14px;
  }
  .container h2 {
    font-size: 20px;
  }
  .code-strip {
    padding: 17px;
  }
  .step-block-body {
    padding: 18px;
  }
  .step-block-header {
    padding: 20px 18px;
  }
  .step-block-title {
    font-size: 17px;
  }
  .code-box {
    padding: 15px 12px 48px;
    font-size: 12px;
  }
  .copy-btn {
    top: auto;
    bottom: 10px;
  }
  .platform-body {
    padding: 18px;
  }
  .ptab {
    padding: 10px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}