/* Original Evidence.astro and Answers.astro styling, scoped to these restored Home sections. */
#why { padding: 112px 9vw 196px; }
#why .facts { display: grid; gap: 28px; margin-top: 56px; }
#why .fact { background: var(--white); border: 1px solid var(--ink-line); border-radius: 20px; padding: 32px 30px 28px; display: flex; flex-direction: column; max-inline-size: none; }
#why .fig { font: 400 clamp(3rem, 2.2rem + 1.8vw, 3.5rem)/1 var(--font-display); color: var(--orange); letter-spacing: -.015em; }
#why .pin { block-size: 52px; inline-size: 40px; fill: var(--orange); }
#why .pin circle { fill: var(--white); }
#why .said { font-size: 19px; margin-top: 16px; }
#why .src { font-size: 15px; color: var(--grey-note); margin-top: auto; padding-top: 18px; }
#why .src a { min-block-size: 24px; text-decoration-thickness: 1px; }
#why .src a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

#questions { padding: 112px 9vw 130px; color: var(--paper); }
#questions .faq { margin-top: 48px; max-inline-size: 860px; position: relative; z-index: 4; }
#questions .faq details { border-top: 2px solid var(--white); }
#questions .faq details:last-child { border-bottom: 2px solid var(--white); }
#questions .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-block-size: 72px; padding: 14px 0; cursor: pointer; list-style: none; font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.625rem)/1.15 var(--font-display); letter-spacing: -.015em; font-variant-numeric: lining-nums; }
#questions .faq summary::-webkit-details-marker { display: none; }
#questions .faq summary:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
#questions .pm { position: relative; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--white); }
#questions .pm::before, #questions .pm::after { content: ""; position: absolute; left: 50%; top: 50%; inline-size: 18px; block-size: 3px; border-radius: 2px; background: var(--white); transition: transform 200ms; }
#questions .pm::before { transform: translate(-50%, -50%); }
#questions .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
#questions details[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
#questions .faq p { font-size: 18px; max-inline-size: 62ch; padding: 0 60px 24px 0; }

@media (hover: hover) {
  #questions .faq summary:hover { background: var(--white-wash); }
}
@media (min-width: 64rem) {
  #why .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 63.99rem) {
  #why { padding: 100px 24px 100px 64px; }
  #why .facts { margin-top: 40px; }
  #questions { padding: 100px 24px 96px 64px; }
}
@media (max-width: 40rem) {
  #why .fact { padding: 28px 22px 24px; }
  #questions .faq summary { align-items: flex-start; gap: 16px; }
  #questions .pm { margin-top: 2px; }
  #questions .faq p { padding-right: 0; }
}

/* The answers end on a way to ask James (the owner, 20 Oct 2026: "ask James a question as the last line of faq instead of a button"):
   a last row like the questions, an arrow in its disc where they have a plus, to the contact page. The old "More straight answers"
   only led back here. */
#questions .faq details:last-of-type { border-bottom: 0; }
#questions .faq-ask { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-block-size: 72px; padding: 14px 0; border-block: 2px solid var(--white); color: inherit; text-decoration: none; font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.625rem)/1.15 var(--font-display); letter-spacing: -.015em; }
#questions .faq-ask:hover { color: inherit; background: var(--white-wash); }
#questions .faq-ask:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
#questions .pm-go::before { inline-size: 22px; block-size: 22px; border-radius: 0; background: var(--white); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
#questions .pm-go::after { content: none; }

/* Six cards, three by three on a laptop (the owner, 20 Oct 2026: three more on why pubs need the services); the closing Facebook line
   became the last card, its words in the figure's place. */
#why .fig-words { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); line-height: 1.05; }