.mule-site {
  --mule-cream: #faf6ec;
  --mule-ink: #25362e;
  --mule-muted: #536259;
  --mule-accent: #a54a29;
  --mule-rule: #ded9ca;
  color: var(--mule-ink);
  background: var(--mule-cream);
  min-height: 100vh;
}

.mule-site p { color: var(--mule-muted); font-size: 16px; }
.mule-site section[id] { scroll-margin-top: 24px; }
.mule-container { width: min(1184px, calc(100% - 80px)); margin: 0 auto; }
.mule-main { display: block; padding: 0; max-width: none; }
.mule-mark { width: 37px; height: 37px; flex: 0 0 auto; }
.mule-header { border-bottom: 1px solid var(--mule-rule); }
.mule-header-inner, .mule-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mule-header-inner { min-height: 82px; }
.mule-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mule-ink);
  font: 800 30px/1 Manrope, system-ui, sans-serif;
  letter-spacing: -1.7px;
}
.mule-wordmark span { color: var(--mule-accent); margin-left: -8px; }
.mule-nav { display: flex; gap: 30px; font-weight: 650; font-size: 14px; }
.mule-nav a:hover, .mule-jump:hover, .mule-footer > a:last-child:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.mule-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
}
.mule-button svg, .mule-jump svg { flex-shrink: 0; }
.mule-button-outline { border-color: #bdc4b8; }
.mule-button-outline:hover { background: #eeeade; }
.mule-button-dark { background: var(--mule-ink); color: white; }
.mule-button-dark:hover { background: #3a5144; }
.mule-button-light { background: var(--mule-cream); color: var(--mule-ink); }
.mule-button-light:hover { background: #e5e8d9; }
.mule-skip {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 10;
  padding: 12px 20px;
  background: white;
}
.mule-skip:focus { top: 10px; }
.mule-hero {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(32px, 5vw, 74px);
  padding-block: clamp(60px, 9vw, 128px) clamp(58px, 8vw, 106px);
}
.mule-kicker {
  display: inline-block;
  color: var(--mule-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
}
.mule-hero-tag { display: flex; align-items: center; gap: 9px; }
.mule-hero-tag i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #c66d43; }
.mule-hero h1 {
  margin: 20px 0 22px;
  font-size: clamp(40px, 5.3vw, 76px);
  line-height: 1.035;
  letter-spacing: -.06em;
  font-weight: 800;
}
.mule-hero h1 em { color: var(--mule-accent); font-style: normal; }
.mule-hero-copy p { max-width: 475px; margin: 0; font-size: clamp(16px, 1.55vw, 19px); }
.mule-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.mule-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }

.mule-preview {
  min-width: 0;
  padding: clamp(14px, 2.8vw, 30px);
  background-color: #e6e8da;
  background-image: radial-gradient(#bfc7b5 1px, transparent 1px);
  background-size: 13px 13px;
  border: 1px solid #d4dac9;
  border-radius: 20px;
}
.mule-preview-window {
  overflow: hidden;
  border: 1px solid #d0d6cb;
  border-radius: 12px;
  background: #fffdfa;
  box-shadow: 0 15px 42px #2d423222;
}
.mule-window-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e6e8e0;
  font-size: 11px;
  font-weight: 700;
}
.mule-window-dots { display: flex; gap: 4px; }
.mule-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c8d0c4; }
.mule-window-dots i:first-child { background: #cb805f; }
.mule-preview-badge { padding: 4px 6px; border-radius: 4px; background: #efeee7; font-size: 9px; }
.mule-window-body { display: grid; grid-template-columns: 106px minmax(0, 1fr); }
.mule-preview-sidebar { padding: 17px 7px; background: var(--mule-ink); color: #f5f1e6; }
.mule-preview-sidebar .mule-mark { width: 28px; height: 28px; margin: 0 0 12px 6px; color: #496152; }
.mule-preview-sidebar span { display: flex; align-items: center; gap: 5px; padding: 8px 5px; font-size: 10px; }
.mule-preview-sidebar span svg { width: 13px; height: 13px; flex-shrink: 0; }
.mule-preview-selected { background: #435a4a; border-radius: 5px; font-weight: 700; }
.mule-preview-content { padding: clamp(13px, 2vw, 23px); }
.mule-preview-content .mule-kicker { font-size: 8px; }
.mule-preview-content h2 { margin: 5px 0 15px; font-size: 21px; font-weight: 800; }
.mule-preview-job, .mule-preview-time {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mule-preview-job { padding: 11px 0; border-top: 1px solid #ecece5; }
.mule-preview-job strong, .mule-preview-time strong { display: block; font-size: 11px; line-height: 1.4; }
.mule-preview-job small, .mule-preview-time small {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  color: #5b6a5e;
  font-size: 9px;
}
.mule-preview-job small svg { flex-shrink: 0; }
.mule-preview-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 6px;
  background: #f6e6d8;
  color: var(--mule-accent);
}
.mule-preview-icon-neutral { background: #e7eee2; color: #405b48; }
.mule-job-status {
  border-radius: 4px;
  padding: 4px 5px;
  background: #e5efe0;
  color: #325b39;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
}
.mule-status-later { background: #f3eee2; color: #69512c; }
.mule-preview-time { margin-top: 10px; padding: 10px; border-radius: 7px; background: #eaf0e5; }
.mule-preview-time > span { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mule-preview figcaption { margin-top: 14px; font-size: 11px; font-weight: 600; color: #435549; text-align: center; }

.mule-workflow { padding: 76px 0; background: #fffdf7; border-block: 1px solid var(--mule-rule); }
.mule-section-intro { max-width: 620px; }
.mule-site h2:not(.mule-preview-content h2) {
  margin: 12px 0 16px;
  font-size: clamp(29px, 4vw, 49px);
  line-height: 1.12;
  letter-spacing: -.05em;
  font-weight: 800;
}
.mule-section-intro p { margin: 0; }
.mule-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
}
.mule-steps li { padding: 24px 0 0; border-top: 2px solid var(--mule-rule); }
.mule-step-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--mule-accent);
  background: #f5e8d8;
}
.mule-steps .mule-step-icon { margin-bottom: 16px; }
.mule-site h3 { font-size: 19px; margin: 7px 0 9px; font-weight: 800; letter-spacing: -.03em; }
.mule-steps p, .mule-roles p { font-size: 15px; margin: 0; }
.mule-crew { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding-block: 76px; }
.mule-crew > div:first-child p { max-width: 415px; }
.mule-roles { display: grid; gap: 15px; align-content: center; }
.mule-roles article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 21px;
  border: 1px solid var(--mule-rule);
  border-radius: 10px;
  background: #fffdf7;
}
.mule-roles h3 { margin-top: 0; }
.mule-cta { padding: 58px 0; background: var(--mule-ink); color: #fffdf7; }
.mule-cta-inner { display: flex; gap: 25px; justify-content: space-between; align-items: center; }
.mule-cta-inner > div { max-width: 665px; }
.mule-cta .mule-kicker { color: #f1b591; }
.mule-cta p { color: #e3e9df; margin: 0; }
.mule-cta .mule-button { flex-shrink: 0; }
.mule-footer { padding-block: 25px; color: var(--mule-muted); font-size: 13px; }
.mule-footer .mule-wordmark { font-size: 25px; }
.mule-footer .mule-mark { width: 30px; height: 30px; }
.mule-footer > a:last-child { display: flex; align-items: center; gap: 6px; font-weight: 700; }

@media (max-width: 1040px) {
  .mule-window-body { grid-template-columns: 84px minmax(0, 1fr); }
  .mule-preview-sidebar span { font-size: 9px; }
  .mule-preview-content { padding: 13px; }
  .mule-preview-job { grid-template-columns: auto minmax(0, 1fr); }
  .mule-job-status { grid-column: 2; justify-self: start; }
}

@media (max-width: 800px) {
  .mule-container { width: min(650px, calc(100% - 42px)); }
  .mule-header-inner { min-height: 69px; }
  .mule-hero { grid-template-columns: 1fr; padding-block: 50px; }
  .mule-hero h1 { font-size: clamp(40px, 8vw, 63px); }
  .mule-window-body { grid-template-columns: 106px minmax(0, 1fr); }
  .mule-preview-job { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mule-job-status { grid-column: auto; }
  .mule-workflow, .mule-crew { padding-block: 52px; }
  .mule-steps { gap: 18px; }
  .mule-crew { gap: 22px; }
  .mule-cta-inner { flex-wrap: wrap; }
}

@media (max-width: 550px) {
  .mule-container { width: calc(100% - 36px); }
  .mule-nav { display: none; }
  .mule-hero { padding-block: 39px 42px; gap: 30px; }
  .mule-hero h1 { margin-top: 16px; font-size: clamp(36px, 9vw, 49px); }
  .mule-hero-tag { font-size: 9px; }
  .mule-actions { gap: 11px 16px; }
  .mule-button { padding-inline: 12px; font-size: 13px; }
  .mule-jump { font-size: 13px; }
  .mule-preview { padding: 11px; border-radius: 14px; }
  .mule-window-body { grid-template-columns: minmax(0, 1fr); }
  .mule-preview-sidebar { display: none; }
  .mule-steps, .mule-crew { grid-template-columns: 1fr; }
  .mule-steps { gap: 21px; margin-top: 24px; }
  .mule-steps li { padding-top: 16px; }
  .mule-footer { flex-wrap: wrap; gap: 13px; }
  .mule-footer > span { order: 3; width: 100%; }
}