/* Uptimia FAQ — v3 design language. Loaded globally on every marketing page so
   any page using <details class="faq-item"> gets a consistent look. Self-contained:
   defines its own tokens to avoid relying on homepage-v30/v3.css being present. */

.faq-list {
  --line:    #ededee;
  --line-2:  #e3e3e5;
  --ink:     #0c0c0d;
  --muted:   #3a3a40;
  --accent:  #007e42;

  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Geist', 'SF Pro Display', 'Segoe UI', sans-serif;
  --ease:    cubic-bezier(.22,.61,.36,1);

  max-width: 760px;
  margin: 32px auto 0;
}

.faq-list *, .faq-list *::before, .faq-list *::after { box-sizing: border-box; }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
  margin: 0;
}
.faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 8px 22px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.014em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  transition: color .2s var(--ease);
  outline: none;
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

/* Chevron — rotates on open */
.faq-item summary::after {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' stroke='%230c0c0d' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(180deg); }

.faq-item p {
  padding: 0 8px 24px 0;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch;
  line-height: 1.6;
}
.faq-item p + p { padding-top: 0; }