:root {
  --ink: #213b32;
  --muted: #768079;
  --line: #e0e5dd;
  --paper: #f7f8f4;
  --green: #264e3c;
  --lime: #d8eaa0;
}
.import-options {
  margin-bottom: 22px;
}
.job-actions {
  flex-wrap: wrap;
}
.job {
  align-items: flex-start;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 25px;
}
body {
  margin: 0;
  background: var(--paper);
  font:
    14px "DM Sans",
    Arial,
    sans-serif;
  color: var(--ink);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
a {
  color: inherit;
  text-decoration: none;
}
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 230px;
  background: #eff1e9;
  border-right: 1px solid var(--line);
  padding: 35px 23px;
  display: flex;
  flex-direction: column;
}
.identity {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -1.3px;
}
.symbol {
  display: grid;
  place-items: center;
  background: var(--green);
  color: #e1edb9;
  font-size: 28px;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  font-style: italic;
}
.beta {
  font-size: 8px;
  letter-spacing: 1px;
  border: 1px solid #b9c3af;
  border-radius: 4px;
  padding: 3px;
  margin-left: 3px;
}
.aside-caption {
  font-size: 9px;
  letter-spacing: 2.2px;
  margin-top: 17px;
  color: #829079;
}
nav {
  display: grid;
  gap: 8px;
  margin-top: 59px;
}
nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 12px;
  border-radius: 7px;
  color: #6e7b6b;
  font-size: 13px;
}
nav a.selected {
  background: #dfe7d4;
  color: #254b37;
  font-weight: 600;
}
.sidebar-note {
  margin-top: auto;
  font-size: 11px;
}
.sidebar-note p {
  font-size: 11px;
  line-height: 1.9;
  color: #83907f;
}
.small-dot {
  display: inline-block;
  background: #6f8754;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
}
.back {
  border-top: 1px solid #dbe1d3;
  margin-top: 22px;
  padding-top: 24px;
  font-size: 11px;
  color: #6f7c69;
}
.main {
  margin-left: 230px;
}
header {
  height: 78px;
  border-bottom: 1px solid var(--line);
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.slash {
  color: #b4bdb0;
  padding: 0 13px;
}
.service-badge {
  color: #7f887a;
  font-size: 10px;
}
.quiet {
  border: 0;
  background: transparent;
  color: #6c7d68;
  font-size: 12px;
  padding: 9px;
}
.main main {
  max-width: 1450px;
  padding: 48px 4vw 0;
  margin: auto;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #829171;
}
h1 {
  font-size: clamp(38px, 4.4vw, 65px);
  line-height: 1.05;
  letter-spacing: -3px;
  font-weight: 500;
  margin: 20px 0;
}
.intro {
  line-height: 1.8;
  color: #7e887b;
  font-size: 14px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.architecture {
  text-align: center;
  margin: 0 30px;
  color: #8b977e;
}
.architecture > span {
  font-size: 8px;
  letter-spacing: 1px;
}
.architecture i {
  font-style: normal;
  margin: 0 8px;
}
.orbit {
  font-size: 60px;
  font-style: italic;
  border: 1px solid #d7dfcc;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  border-radius: 35px;
  transform: rotate(-9deg);
  margin: 0 auto 30px;
  background: linear-gradient(140deg, #ebefd9, #f7f8f4);
  box-shadow: 12px 12px 0 #e8eddf;
  color: #6b8159;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 35px 0;
  gap: 24px;
}
.metrics > div {
  border-left: 1px solid #d9dfd0;
  padding: 0 20px;
}
.metrics > div:first-child {
  padding-left: 0;
  border: 0;
}
.metrics span {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #8a9483;
}
.metrics strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  margin: 10px 0;
}
.metrics small {
  font-size: 11px;
  color: #8b9387;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 29px;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
h2 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 8px 0;
}
.pill {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.8px;
  padding: 7px 9px;
  background: #f0f3eb;
  color: #7b8d69;
  border-radius: 5px;
}
.input-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.3fr;
  gap: 17px;
}
label {
  display: grid;
  gap: 9px;
  color: #6a7765;
  font-size: 11px;
}
input,
select {
  width: 100%;
  height: 46px;
  border: 1px solid #dfe5d9;
  border-radius: 6px;
  background: #fff;
  color: #3b5139;
  padding: 0 13px;
  outline: none;
}
input:focus,
select:focus {
  border-color: #869d67;
  box-shadow: 0 0 0 3px #e8efd9;
}
.url-input {
  position: relative;
}
.url-input > span {
  position: absolute;
  left: 14px;
  top: 14px;
  color: #8b9a7e;
}
.url-input input {
  padding-left: 36px;
}
input::placeholder {
  color: #9ca895;
}
.form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 20px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
}
.check input {
  width: 14px;
  height: 14px;
  margin: 1px 0;
  accent-color: var(--green);
}
.check small {
  display: block;
  margin-top: 6px;
  color: #a0a895;
  font-size: 10px;
}
.primary,
.secondary {
  border: 0;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
  padding: 15px 22px;
  font-size: 12px;
  background: var(--green);
  color: #fff;
}
.primary:hover {
  background: #183d2a;
}
.primary span {
  font-size: 18px;
  line-height: 1;
}
.secondary {
  background: #ecf1e4;
  color: var(--green);
  justify-content: center;
}
.jobs-section {
  margin-top: 36px;
}
.count {
  font-size: 10px;
  padding: 4px 7px;
  background: #e9eddf;
  border-radius: 5px;
  margin-left: 8px;
}
.empty {
  padding: 40px;
  text-align: center;
  color: #85927b;
  font-size: 13px;
  background: #f4f6ef;
  border-style: dashed;
}
.empty small {
  display: block;
  font-size: 11px;
  margin-top: 9px;
  color: #a1aa98;
}
.job {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
  gap: 20px;
}
.job:first-child {
  padding-top: 0;
}
.job:last-child {
  border: 0;
  padding-bottom: 0;
}
.job strong {
  font-weight: 500;
}
.job p {
  font-size: 11px;
  color: #88957d;
  margin: 7px 0;
}
.job-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.job-actions a,
.job-actions button {
  font-size: 11px;
}
.error {
  color: #a7473f;
  font-size: 12px;
}
.savings {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 40px;
  margin: 36px 0;
}
.muted {
  color: #8a9582;
  font-size: 12px;
  line-height: 1.7;
}
.audit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 23px;
}
.audit-grid input {
  height: 39px;
}
.audit-grid .secondary {
  margin-top: 20px;
  height: 39px;
}
.saving-result {
  border-radius: 8px;
  background: #eff3e6;
  padding: 30px;
  color: #4b6640;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.saving-result > span {
  font-size: 9px;
  letter-spacing: 1.5px;
}
.saving-result > strong {
  font-size: 55px;
  letter-spacing: -3px;
  font-weight: 500;
  margin-top: 18px;
}
.saving-result > strong small {
  font-size: 14px;
  letter-spacing: 0;
  color: #93a080;
  margin-left: 7px;
}
.saving-result > p {
  font-size: 11px;
  line-height: 1.8;
  margin: 6px 0;
}
.saving-result hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #dbe3cf;
  margin: 24px 0;
}
.saving-result a {
  font-size: 10px;
  margin-top: 12px;
  text-decoration: underline;
  color: #83936f;
}
.connections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.connections strong {
  font-weight: 500;
}
.connections p {
  font-size: 11px;
  color: #909b87;
  line-height: 1.6;
}
.connections .panel {
  padding: 23px;
}
.footnote {
  font-size: 10px;
  color: #96a18c;
  line-height: 1.8;
  margin-top: 18px;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 45px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: #9aa58f;
}
footer strong {
  font-size: 17px;
  color: #657b55;
}
footer strong span {
  font-size: 9px;
  font-weight: 400;
  margin-left: 5px;
}
.login {
  max-width: 440px;
  margin-top: 30px;
}
.login label {
  margin-bottom: 18px;
}
.login button {
  width: 100%;
}
#detail {
  margin-top: 25px;
}
#detail ul {
  padding-left: 20px;
  color: #7d8973;
  font-size: 12px;
  line-height: 1.9;
}
#detail .product-sample {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 20px 0;
}
#detail .product-sample > div {
  padding: 16px;
  background: #f3f5ee;
  border-radius: 8px;
  font-size: 12px;
}
#detail h3 {
  font-size: 14px;
}
.deploy-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 20px 0;
}
#logout {
  margin-left: 15px;
}
[hidden] {
  display: none !important;
}
@media (min-width: 1600px) {
  .main main {
    padding-top: 64px;
  }
}
@media (max-width: 1000px) {
  aside {
    width: 185px;
    padding: 25px 15px;
  }
  .main {
    margin-left: 185px;
  }
  .architecture {
    display: none;
  }
  .input-row {
    grid-template-columns: 1fr 1fr;
  }
  .url-label {
    grid-column: 1/-1;
  }
  .savings {
    grid-template-columns: 1fr;
  }
  .saving-result {
    padding: 25px;
  }
  .metrics small {
    line-height: 1.7;
    display: block;
  }
}
@media (max-width: 650px) {
  aside {
    position: static;
    width: auto;
    padding: 17px 22px;
    border-bottom: 1px solid var(--line);
  }
  aside nav,
  aside .aside-caption,
  aside .sidebar-note,
  aside .back {
    display: none;
  }
  .main {
    margin: 0;
  }
  header {
    height: 55px;
    padding: 0 22px;
  }
  .service-badge {
    display: none;
  }
  .main main {
    padding: 30px 20px 0;
  }
  h1 {
    font-size: 42px;
    letter-spacing: -2px;
  }
  .metrics {
    gap: 10px;
  }
  .metrics > div {
    padding: 0 10px;
  }
  .metrics strong {
    font-size: 14px;
  }
  .metrics span {
    font-size: 7px;
  }
  .metrics small {
    font-size: 10px;
  }
  .panel {
    padding: 21px;
  }
  .section-top .pill {
    display: none;
  }
  .form-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .primary {
    justify-content: space-between;
  }
  .connections {
    grid-template-columns: 1fr;
  }
  .job {
    align-items: flex-start;
    flex-direction: column;
  }
  .job-actions {
    flex-wrap: wrap;
  }
  footer > span {
    max-width: 150px;
    line-height: 1.8;
  }
  .desktop {
    display: none;
  }
}