.faq {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: content-start / content-end;
  padding-block: var(--tome-space-xl);
  gap: var(--tome-space-lg);
}

.header {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--tome-space-xs);
}

.badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--tome-space-1) var(--tome-space-2);
  font-size: var(--tome-type-size-micro);
  font-weight: var(--tome-type-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tome-type-tracking-widest);
  color: var(--tome-color-primary);
  background-color: color-mix(in oklch, var(--tome-color-primary) 10%, transparent);
  border-radius: var(--tome-radius-sm);
}

.headline {
  font-size: var(--tome-type-size-3xl);
  line-height: var(--tome-type-leading-tight);
  font-weight: var(--tome-type-weight-bold);
  color: var(--tome-color-foreground);
}

.intro {
  font-size: var(--tome-type-size-base);
  line-height: var(--tome-type-leading-normal);
  color: var(--tome-color-on-surface-muted);
  max-width: 65ch;
}

.list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.item {
  border-block-end: 1px solid var(--tome-color-border);
}

.question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tome-space-sm) 0;
  font-size: var(--tome-type-size-md);
  font-weight: var(--tome-type-weight-semibold);
  color: var(--tome-color-foreground);
  cursor: pointer;
  list-style: none;
  transition: color var(--tome-motion-fast) var(--tome-motion-ease-out);
}

.question::-webkit-details-marker {
  display: none;
}

.question::after {
  content: '+';
  font-size: var(--tome-type-size-lg);
  font-weight: var(--tome-type-weight-regular);
  color: var(--tome-color-on-surface-muted);
  transition: transform var(--tome-motion-fast) var(--tome-motion-ease-out);
}

.item[open] .question::after {
  content: '\2212';
}

.question:hover {
  color: var(--tome-color-primary);
}

.answer {
  padding-block-end: var(--tome-space-sm);
  font-size: var(--tome-type-size-base);
  line-height: var(--tome-type-leading-normal);
  color: var(--tome-color-on-surface-muted);
}

.callout {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tome-space-sm);
  padding: var(--tome-space-md);
  background-color: var(--tome-color-surface);
  border-radius: var(--tome-radius-md);
  text-align: center;
}

.calloutText {
  font-size: var(--tome-type-size-base);
  color: var(--tome-color-foreground);
}

.calloutLink {
  display: inline-flex;
  padding: var(--tome-space-xs) var(--tome-space-md);
  font-size: var(--tome-type-size-sm);
  font-weight: var(--tome-type-weight-semibold);
  color: var(--tome-color-on-primary);
  background-color: var(--tome-color-primary);
  border-radius: var(--tome-radius-md);
  text-decoration: none;
  transition: opacity var(--tome-motion-fast) var(--tome-motion-ease-out);
}

.calloutLink:hover {
  opacity: 0.9;
}

/* Layout variants */
.layout-narrow { max-width: 50rem; margin-inline: auto; }
.layout-fullWidth { grid-column: 1 / -1; }

/* Background colors */
.bg-white { background-color: var(--tome-color-background); }
.bg-light-gray { background-color: color-mix(in oklch, var(--tome-color-background) 95%, transparent); }
.bg-dark { background-color: var(--tome-color-foreground); color: var(--tome-color-background); }
Install
