/* Shared pieces for the AEO solutions pages. Tokens come from each page. */

.crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  font-family:var(--sans);
  font-size:.86rem;
  color:var(--muted);
}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent-2)}
.crumb [aria-current="page"]{color:var(--txt-hi); font-weight:600}

.product-chip{
  display:inline-block;
  margin:0 0 12px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--cat);
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

h1.title{overflow-wrap:break-word; text-wrap:balance}

.faq-list{display:flex; flex-direction:column; gap:10px; margin:0 0 8px}
.faq-list details{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0 18px;
}
.faq-list summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  font-family:var(--sans);
  font-weight:700;
  color:var(--txt-hi);
  cursor:pointer;
  list-style:none;
  padding:16px 0;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  flex:none;
  color:var(--cat);
  font-weight:500;
  font-size:1.2rem;
  line-height:1.2;
}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details[open] summary{border-bottom:1px solid var(--line)}
.faq-list summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.faq-list details p{margin:14px 0 16px}

.cta-alt{margin:14px 0 0 !important; font-family:var(--sans); font-size:.92rem}
.cta .doit{margin-top:4px}

@media (max-width:639px){
  main{padding:36px 0 12px}
  h1.title{font-size:1.65rem}
  .crumb{font-size:.8rem}
  .cta{padding:22px 16px}
}