:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #183d36;
  background: #f5f6f1;
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header,
main,
footer {
  max-width: 1260px;
  margin: auto;
  padding: 28px 36px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #dce3d6;
}
.brand {
  text-decoration: none;
  color: #173d36;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 3px;
}
.brand span {
  font-weight: 350;
}
.status {
  font-size: 11px;
  border: 1px solid #ced9c6;
  border-radius: 20px;
  padding: 9px 14px;
  color: #60714e;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #718568;
  margin-top: 45px;
}
h1 {
  font-family: Georgia, serif;
  font-size: 68px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -2px;
  margin: 25px 0;
}
.intro {
  max-width: 620px;
  color: #6a7c6e;
  line-height: 1.8;
  font-size: 15px;
}
.workspaces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 42px 0;
}
.workspaces article {
  background: var(--tint);
  color: var(--color);
  border: 1px solid var(--border);
  border-top: 5px solid var(--color);
  border-radius: 10px;
  padding: 25px 22px;
  display: flex;
  flex-direction: column;
  min-height: 265px;
}
.owner {
  --color: #654714;
  --tint: #f4eedc;
  --border: #ded1af;
}
.manager {
  --color: #174b75;
  --tint: #e8f0f8;
  --border: #c4d8e6;
}
.staff {
  --color: #174d3b;
  --tint: #e8f1e5;
  --border: #c6d9bf;
}
.sales {
  --color: #693867;
  --tint: #f1e8f4;
  --border: #dfcce3;
}
.symbol {
  font-size: 33px;
  margin-bottom: 20px;
}
.workspaces strong {
  font-size: 23px;
  letter-spacing: 1px;
}
.workspaces h2 {
  font-size: 10px;
  letter-spacing: 1.3px;
  margin-top: 8px;
}
.workspaces p {
  font-size: 12px;
  line-height: 1.7;
  max-width: 210px;
  opacity: 0.85;
}
.workspaces small {
  font-size: 9px;
  margin-top: auto;
  padding-top: 18px;
  opacity: 0.75;
}
.access {
  padding: 22px 26px;
  background: #edf1e6;
  border: 1px solid #d7dfcd;
  border-radius: 8px;
}
.access h2 {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 10px;
}
.access p {
  font-size: 12px;
  color: #66785a;
  line-height: 1.8;
  margin: 0;
  max-width: 830px;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  color: #76876d;
  border-top: 1px solid #dce3d6;
  margin-top: 35px;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}
@media (max-width: 950px) {
  .workspaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  h1 {
    font-size: 58px;
  }
}
@media (max-width: 520px) {
  header,
  main,
  footer {
    padding-inline: max(20px, env(safe-area-inset-left));
  }
  header {
    flex-wrap: wrap;
    padding-block: 22px;
  }
  h1 {
    font-size: 45px;
    letter-spacing: -1px;
  }
  .eyebrow {
    margin-top: 25px;
    font-size: 9px;
  }
  .workspaces {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 30px 0;
  }
  .workspaces article {
    min-height: 220px;
  }
  .intro {
    font-size: 14px;
  }
  .access {
    padding: 20px;
  }
  .workspaces strong {
    font-size: 27px;
  }
  .workspaces h2 {
    font-size: 12px;
  }
  footer {
    flex-wrap: wrap;
  }
}

.preview-button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:48px; padding:14px 20px; margin:18px 0 12px; background:#173d36; color:#fff; border-radius:7px; font-size:13px; font-weight:600; text-decoration:none; }
.preview-button:hover { background:#23564a; }
.preview-button:focus-visible { outline:3px solid #9a7a3c; outline-offset:4px; }
.access .preview-note { font-size:11px; }