/* Shared audience navigation and the overview on the general homepage. */
.site-header { position: relative; z-index: 20; }
.use-menu { position: relative; }
.use-menu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.use-menu > summary::-webkit-details-marker { display: none; }
.menu-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.use-menu[open] > summary,
.use-menu:has([aria-current="page"]) > summary { color: var(--amber); }
.use-menu[open] .menu-chevron { transform: translateY(2px) rotate(225deg); }
.use-menu-panel {
  position: absolute;
  top: calc(100% + 17px);
  left: -16px;
  width: 270px;
  padding: 8px;
  border: 1px solid #514a40;
  border-radius: 15px;
  background: #202225;
  box-shadow: 0 18px 40px #0006;
}
.use-menu-panel a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.use-menu-panel a::after { display: none; }
.use-menu-panel a > span:last-child { color: #a09c95; }
.use-menu-panel a:hover,
.use-menu-panel a[aria-current="page"] { background: #ffb34012; color: var(--amber); }
.use-menu-panel a[aria-current="page"] > span:last-child { color: var(--amber); }
.use-menu-panel a:focus-visible { outline-offset: -2px; }
.hero-preview { min-width: 0; }
.demo-note { margin: 14px 6px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hero-preview .demo-tabs { flex-wrap: wrap; }
.hero-preview .demo-caption { white-space: nowrap; }
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.audience-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #1b1d1f;
  color: var(--text);
}
.audience-card:hover { color: var(--text); }
.audience-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #ffb34026;
  border-radius: 12px;
  background: #ffb34008;
  color: var(--amber);
}
.audience-body { display: flex; flex-direction: column; height: 100%; }
.audience-body h3 { margin: 0 0 7px; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.6px; }
.audience-role { display: block; color: #b8b6af; font-size: 12px; line-height: 1.5; }
.audience-body p { margin: 20px 0 24px; max-width: 43ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.audience-body .text-link { margin-top: auto; font-size: 14px; }
.audience-body .text-link > span { display: inline-block; margin-left: 8px; }
.plan-strip { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.plan-strip > div { max-width: 700px; }
.plan-strip p:not(.section-label) { color: var(--muted); margin: 0; }
.plan-strip .button { flex-shrink: 0; }

@media (prefers-reduced-motion: no-preference) {
  .menu-chevron { transition: transform 220ms ease; }
  .use-menu[open] .use-menu-panel { animation: menu-enter 180ms ease-out; }
  .audience-card { transition: border-color 220ms ease, background-color 220ms ease; }
  .audience-body .text-link > span { transition: transform 220ms ease; }
  @keyframes menu-enter { from { opacity: 0; translate: 0 -5px; } to { opacity: 1; translate: 0 0; } }
}
@media (hover: hover) and (pointer: fine) {
  .audience-card:hover { border-color: #9c804d; background-color: #222320; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .audience-card:hover .text-link > span { transform: translateX(4px); }
}
@media (max-width: 1100px) {
  .audience-card { padding: 24px; gap: 18px; grid-template-columns: 44px minmax(0, 1fr); }
  .audience-icon { width: 44px; height: 44px; }
  .audience-body h3 { font-size: 25px; }
  .plan-strip { align-items: start; flex-direction: column; gap: 24px; }
  .hero-preview .demo-footer { align-items: start; }
}
@media (max-width: 760px) {
  .nav { gap: 8px; }
  .use-menu-panel { left: 0; width: min(290px, calc(100vw - 36px)); top: calc(100% + 12px); }
  .audience-grid { grid-template-columns: 1fr; gap: 14px; }
  .audience-card { padding: 24px 20px; gap: 16px; grid-template-columns: 32px minmax(0, 1fr); }
  .audience-icon { width: 32px; height: 32px; border: 0; border-radius: 0; background: none; }
  .audience-body h3 { font-size: 24px; }
  .audience-body p { font-size: 14px; margin: 16px 0 20px; }
  .audience-body .text-link { font-size: 13px; }
  .demo-note { margin: 12px 0 0; }
}