/* ============================================================
   SECTION  -  QUESTIONS PEOPLE ASK                  2026-08-20

   The nav carried a #questions link to a section that never existed.
   This is it, and the answers are the CLIENT'S OWN, carried across
   from their live page at site/index.html:267-275 rather than written
   here. They are his product, his facts and his phrasing; a landing
   page does not get to invent answers to questions the person who
   knows the product has already answered.

   NATIVE <details>. No JavaScript at all. Every answer is in the
   markup and readable with the script dead, the disclosure widget is
   the browser's own so it is keyboard and screen reader correct
   without a line of code, and the first one ships open so the section
   is never a wall of closed bars.

   TWO ANSWERS ARE ARM SPECIFIC, and they were arm specific on the
   client's own page too (.va / .vb there, .arm--text / .arm--app
   here). They are the only words in this section that differ between
   arms, and they differ on a genuine product fact rather than on
   tone: in one arm the sender texts a number, in the other there is
   an app. Anything else differing here would be measuring the FAQ
   instead of the page.

   Everything is scoped with #questions, because a section stylesheet
   that uses bare classes loses to any id-scoped rule elsewhere and
   fails silently.
   ============================================================ */

/* paper-2, not paper. After the reorder #thing sits directly above this
   and is also paper; two identical grounds touching is the flat run
   was caught between sections 5 and 6. */
/* GROUND DARKENED AND CONTENT PUT ON A CARD, 2026-08-21. This sat on
   paper-2 directly under #thing on paper. Those two differ by about one
   percent of luminance, so the pair read as a single very long section
   with no seam. The card gives this one its own edge; the darker ground
   gives the card something to sit on. Same treatment and the same values
   as the card in section 3, so the two read as siblings. */
#questions{background:var(--paper-3)}

#questions .qcard{
  display:block;
  background:var(--paper);
  border:1px solid rgba(0,27,61,.20);
  border-radius:20px;
  padding:clamp(22px,3vw,38px) clamp(18px,3vw,40px) clamp(20px,2.6vw,32px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 2px 4px -2px rgba(4,20,43,.16),
    0 16px 34px -24px rgba(4,20,43,.42);
}
/* the list already has its own top rule; inside a card that doubles up */
#questions .qcard .q-list{border-top:none; margin-top:clamp(16px,2vw,24px)}

/* px, not ch, for the same reason recorded in why.css: 24ch on a 17px
   wrapper is 257px and would have folded this headline too. */
#questions .head{max-width:none}
#questions .head h2{
  margin:8px 0 0; max-width:560px;
  font-size:clamp(26px,3.1vw,40px); line-height:1.12; letter-spacing:-.021em;
}

#questions .q-list{
  margin:clamp(20px,2.6vw,32px) 0 0;
  border-top:1px solid rgba(0,27,61,.14);
  max-width:720px;
}

#questions details{
  border-bottom:1px solid rgba(0,27,61,.14);
}
#questions summary{
  /* the marker is drawn below, so the native one goes */
  list-style:none;
  cursor:pointer; position:relative;
  padding:clamp(15px,1.9vw,20px) 44px clamp(15px,1.9vw,20px) 0;
  font-family:var(--display); font-weight:400; letter-spacing:-.013em;
  font-size:clamp(17px,1.8vw,21px); line-height:1.3; color:var(--ink);
}
#questions summary::-webkit-details-marker{display:none}
#questions summary:hover{color:var(--ink-2)}
#questions summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(122,204,255,.45);
  border-radius:4px;
}

/* the sign. A plus that becomes a minus, drawn in two rules so there
   is no glyph to go missing in a font that does not have it. */
#questions summary::before,
#questions summary::after{
  content:""; position:absolute; right:8px; top:50%;
  background:var(--ember); border-radius:2px;
  transition:transform .24s cubic-bezier(.3,.7,.2,1), opacity .24s ease;
}
#questions summary::before{width:15px; height:2px; margin-top:-1px}
#questions summary::after {width:2px; height:15px; margin-top:-7.5px; right:14.5px}
#questions details[open] summary::after{transform:rotate(90deg); opacity:0}

#questions details p{
  margin:0; padding:0 44px clamp(18px,2.2vw,24px) 0;
  max-width:600px;
  font-size:15.5px; line-height:1.6; color:var(--ink-2);
}

/* only one of the two arm-specific questions is ever in the document */
#questions .arm{display:none}
body.v-text #questions .arm--text{display:block}
body.v-app  #questions .arm--app{display:block}
html.no-js  #questions .arm--text{display:block}

#questions .q-more{
  margin:clamp(20px,2.4vw,28px) 0 0; max-width:520px;
  font-size:15px; line-height:1.55; color:var(--ink-3);
}

html.no-js #questions .rv,
.rv-force #questions .rv{opacity:1; transform:none; transition:none}

@media (prefers-reduced-motion:reduce){
  #questions .rv{transition:none}
  #questions summary::before, #questions summary::after{transition:none}
}