/* faq.css — homepage lead intro + lab-notebook FAQ accordion (smooth grid-rows open) */

/* --- lead intro (lab-notebook: kicker in the left margin, text in a wide column) --- */
.lead { max-width: 1180px; margin: 0 auto; padding: 48px 20px 8px; }
.lead .lead-kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #b8482a; margin: 0 0 18px; }
.lead .lead-text { color: #43392f; font-size: 17px; line-height: 1.75; margin: 0 0 18px; }
.lead .lead-text:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
  .lead { display: grid; grid-template-columns: 190px 1fr; column-gap: 48px; align-items: start; }
  .lead .lead-kicker { grid-column: 1; grid-row: 1; margin: 5px 0 0; padding-top: 6px; border-top: 2px solid #b8482a; }
  .lead .lead-text { grid-column: 2; max-width: 68ch; }
  .lead .lead-text:first-of-type { margin-top: 0; }
}

/* --- faq --- */
.faq { max-width: 1180px; margin: 0 auto; padding: 56px 20px; }
.faq .faq-title { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #b8482a; padding-bottom: 14px; border-bottom: 1px solid #d8cfc0; margin: 0 0 8px; }
.faq .faq-item { border-bottom: 1px solid #d8cfc0; }
.faq .faq-q { cursor: pointer; list-style: none; display: flex; gap: 16px; align-items: baseline; padding: 22px 2px; font-size: 18px; font-weight: 700; color: #211c17; }
.faq .faq-q::-webkit-details-marker { display: none; }
.faq .faq-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #b8482a; flex-shrink: 0; line-height: 1.5; }
.faq .faq-q-text { flex: 1; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.faq .faq-q::after { content: "+"; margin-left: 12px; font-size: 26px; font-weight: 400; line-height: 1; color: #b8482a; transition: transform 0.3s ease; }
.faq .faq-item[open] .faq-q::after { transform: rotate(45deg); }
/* smooth open: animate grid row height 0fr -> 1fr + fade */
.faq .faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.32s ease, opacity 0.32s ease; }
.faq .faq-item[open] .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq .faq-answer-inner { overflow: hidden; }
.faq .faq-answer-inner p { max-width: 74ch; color: #43392f; font-size: 16px; line-height: 1.75; margin: 0 0 20px; padding-left: 36px; }

@media (prefers-reduced-motion: reduce) {
  .faq .faq-answer, .faq .faq-q::after { transition: none; }
}