.projects {
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:20px;
  font-family: "Matter SemiMono", monospace;
}

.projects a.project {
  text-decoration:none;
  border:1px solid var(--gridline);
  border-radius:8px;
  color:var(--soft-black);
  transition:transform 0.9s;
}

.projects a.project.archived {
  opacity:0.75;
}

.projects a.project:hover {
  transform:scale(1.01);
  transition:transform 0.1s;
}

.projects a.project .name {
  padding:14px;
  border-bottom:1px solid var(--gridline);
  font-family:"Ivar", serif;
  font-size:19px;
}

.projects a.project .insights_count {
  padding:18px 14px;
  font-size:14px;
  color:var(--soft-grey);
}

@media (min-width:1000px) {
  .projects {
    flex-direction:row;
    gap:10px;
    flex-wrap:wrap;
    justify-content: flex-start;
  }
  .projects a.project {
    flex: 0 0 calc(50% - 5px);
    box-sizing: border-box;
  }
}

.account_settings_wrapper {
  padding:20px;
}

.account_settings {
  padding:20px;
  background-color:var(--gentle-grey);
  border:1px solid var(--gridline);
  border-radius:9px;
  font-family:"Matter SemiMono", monospace;
  margin-bottom:20px;
}

.account_settings:last-child {
  margin-bottom:0;
}

.account_settings h3 {
  font-size:29px;
}

.account_settings h4 {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight:700;
  font-size:20px;
  margin-bottom:4px;
}

.account_settings p {
  margin-bottom:12px;
  font-size:15px;
}

.billing_options {
  margin-bottom:0;
}

.subscription_details p.plan_name {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight:700;
  font-size:17px;
  margin-bottom:4px;
}

.trial_ended_banner {
  text-align:center;
  padding:17px 0;
  border:1px solid #d0d4d4;
  border-radius:8px;
  font-size:14px;
  box-shadow: var(--box-shadow-combined);
  font-family: "Matter SemiMono", -apple-system, system-ui;
  color:#fff;
  background-color:var(--forest);
}

.plan_message {
  margin-bottom:15px;
}

img.integration_screenshot {
  height:auto;
  width:100%;
  max-width:700px;
  border-radius:16px;
  border:1px solid var(--gridline);
}

details.integration_guide {
  margin-bottom:20px;
  border:1px solid var(--subtle-border);
  border-radius:8px;
  background:var(--off-white);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

details.integration_guide summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:var(--soft-black);
  border-bottom:1px solid transparent;
  transition:background-color 150ms ease, border-color 200ms ease;
}

details.integration_guide summary::-webkit-details-marker {
  display:none;
}

details.integration_guide summary::after {
  content:"";
  flex-shrink:0;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform 250ms ease;
}

details.integration_guide summary:hover {
  background:var(--shaded-white);
  border-radius:8px;
}

details.integration_guide[open] summary {
  border-bottom-color:var(--subtle-border);
  border-radius:8px 8px 0 0;
}

details.integration_guide[open] summary::after {
  transform:translateY(2px) rotate(-135deg);
}

details.integration_guide .integration_guide_step {
  padding:33px 22px;
}

details.integration_guide .integration_guide_step + .integration_guide_step {
  border-top:1px solid var(--subtle-border);
}

details.integration_guide .integration_guide_step p.instruction {
  margin-bottom:20px;
}

details.integration_guide::details-content {
  height:0;
  opacity:0;
  overflow:clip;
  transition: height 250ms ease, opacity 250ms ease, content-visibility 250ms allow-discrete;
}

details.integration_guide[open]::details-content {
  height:auto;
  opacity:1;
}