.oa-acct {
  --oa-acct-bg: #f4f6f7;
  --oa-acct-accent-bg: var(--oa-green-100);
  --oa-acct-accent-fg: var(--oa-green-500);
  background: var(--oa-acct-bg);
  box-sizing: border-box;
}
.oa-acct *, .oa-acct *::before, .oa-acct *::after { box-sizing: border-box; }
.oa-acct p { margin: 0; }

.oa-acct-content-wrap[data-oa-acct-active="2"] {
  --oa-acct-accent-bg: var(--oa-orange-bg);
  --oa-acct-accent-fg: var(--oa-orange-text);
}

.oa-acct-content-wrap { padding: 120px var(--oa-content-padding); }

.oa-acct-head {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.oa-acct-eyebrow {
  font-family: var(--oa-font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oa-text-regular);
}

.oa-acct-headline {
  font-family: var(--oa-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.28;
  color: var(--oa-text-dark);
}

.oa-acct-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  margin-top: 12px;
  border-radius: 14px;
  background: #e9ebee;
}

.oa-acct-tabs .oa-acct-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  margin: 0;
  border: 0 !important;
  outline: none;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--oa-text-regular);
  font-family: var(--oa-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.oa-acct-tabs .oa-acct-tab:focus-visible {
  outline: 2px solid var(--oa-acct-accent-fg);
  outline-offset: 2px;
}
.oa-acct-tab-icon { display: flex; color: inherit; opacity: .7; transition: color .18s ease, opacity .18s ease; }
.oa-acct-tab-icon svg { width: 18px; height: 18px; display: block; }

.oa-acct-tabs .oa-acct-tab.is-active {
  background: #fff !important;
  color: var(--oa-acct-accent-fg);
  box-shadow: 0 1px 2px rgba(19, 27, 37, .08), 0 4px 12px rgba(19, 27, 37, .06) !important;
}
.oa-acct-tabs .oa-acct-tab.is-active .oa-acct-tab-icon { color: var(--oa-acct-accent-fg); opacity: 1; }

.oa-acct-tabs .oa-acct-tab:not(.is-active):hover { color: var(--oa-text-dark); }

.oa-acct-panel[hidden] { display: none !important; }

.oa-acct-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}

.oa-acct-card {
  display: flex;
  flex-direction: column;
  height: 311px;
  padding: 28px;
  background: #fff;

  border-radius: 8px;
}

.oa-acct-card-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--oa-acct-accent-bg);
  color: var(--oa-acct-accent-fg);
  transition: background-color .18s ease, color .18s ease;
}
.oa-acct-card-icon svg { width: 22px; height: 22px; display: block; }
.oa-acct-card-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.oa-acct-card-icon--image {
  background: transparent;
  color: inherit;
}
.oa-acct-card-icon--image img {
  width: 100%;
  height: 100%;
}

.oa-acct-card-text { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.oa-acct-card-title {
  font-family: var(--oa-font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--oa-text-dark);
}

.oa-acct-card-desc {
  font-family: var(--oa-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: #747b86;
}

@media (max-width: 1100px) {
  .oa-acct-content-wrap { padding-top: 96px; padding-bottom: 96px; }
  .oa-acct-headline { font-size: 34px; }
  .oa-acct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
}

@media (max-width: 767px) {
  .oa-acct-content-wrap { padding: 64px 20px; }
  .oa-acct-headline { font-size: clamp(26px, 7.5vw, 30px); }
  .oa-acct-tabs { flex-direction: column; width: 100%; max-width: 320px; }
  .oa-acct-tab { justify-content: center; }
  .oa-acct-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .oa-acct-card { height: auto; min-height: 240px; padding: 24px; }
}

@media (max-width: 380px) {
  .oa-acct-content-wrap { padding-left: 16px; padding-right: 16px; }
}