/* PILOT landing — FAQ (Daylight module, with pricing and the arrival).
   Still on paper after pricing: the page turned light once and stays light.
   One centred reading column with the heading above it; each question is a
   hairline row with a drawn 14 px cross that folds to a minus when open. */

.faq-section { --q: clamp(16px, 1.25vw, 18px); padding-block: clamp(40px, 4.4vw, 64px) clamp(64px, 6vw, 96px); background: var(--paper); color: var(--ink); }
.faq-grid { width: min(760px, 100% - var(--gutter) * 2); }
.faq-intro { min-width: 0; }
.faq-intro h2 { font-size: var(--h2-m); }
/* Japanese sets the heading's second line (13 full-width characters, about
   13.7em, no spaces) whole on a phone instead of splitting a word in it. */
:lang(ja) .faq-intro h2 { font-size: min(var(--h2-m), (100vw - var(--gutter) * 2) / 14); }
.faq-intro > p { max-width: 36em; margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--ink-muted); }
.faq-list { min-width: 0; margin-top: clamp(28px, 3vw, 40px); border-block-start: 1px solid var(--ink); }
.faq-list details { border-block-end: 1px solid var(--ink-line); }
.faq-list summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; min-height: 44px; padding-block: 16px; list-style: none; cursor: pointer; font: 650 var(--q)/1.45 var(--font-text); letter-spacing: -.01em; text-decoration: underline 1px transparent; text-underline-offset: .24em; transition: text-decoration-color var(--t-ui) var(--ease), text-decoration-thickness var(--t-ui) var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* The cross is drawn, not typed: two 14 px strokes centred on the first line. */
.faq-list summary > span { position: relative; flex: none; inline-size: 14px; block-size: 14px; margin-block-start: calc((var(--q) * 1.45 - 14px) / 2); font-size: 0; color: var(--ink); }
.faq-list summary > span::before, .faq-list summary > span::after { content: ""; position: absolute; inset: 50% 0 auto; block-size: 1.5px; margin-block-start: -.75px; border-radius: 1px; background: currentColor; transition: rotate .45s var(--ease); }
.faq-list summary > span::after { rotate: 90deg; }
.faq-list details[open] summary > span::after { rotate: 180deg; }
.faq-list details > p { max-width: 64ch; margin: -4px 0 0; margin-inline-end: 46px; padding-block-end: 22px; font-size: 15px; line-height: 1.8; color: var(--ink-muted); }
.faq-list details > p a { color: var(--ink); text-decoration: underline 1px; text-underline-offset: 3px; }
.faq-list details > p a:hover { text-decoration-thickness: 2px; }
.faq-support { margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}

@media (max-width: 640px) {
  .faq-section { --q: 16px; }
  .faq-intro > p { font-size: 15px; }
  .faq-list summary { gap: 20px; padding-block: 14px; }
  .faq-list details > p { margin-inline-end: 0; padding-block-end: 20px; font-size: 14px; }
}