/* Intellica homepage — FAQ as an iMessage thread (2026-10-12). Loaded after home.css by index.html and index-alt.html. */
/* Calvin: centred like heyclicky's FAQ, styled like Flora's iMessage thread. Questions are received bubbles (grey)
   with a plus; the open one turns blue and its answer arrives as a blue sent bubble with a tail. Blue means a person. */

.imq { padding: 114px 0 120px; }
.imq-head { text-align: center; margin-bottom: 34px; }
.imq-m { display: none; }   /* the phone's heading (Calvin, 2026-10-17): "faqs." */
.imq-thread { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; font-family: var(--sans); }

.imq details { display: block; }
.imq summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; width: fit-content; max-width: 88%; }
.imq summary::-webkit-details-marker { display: none; }
.imq summary:focus-visible { outline: none; }
.imq summary:focus-visible .q { box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 35%, transparent); }
/* the question: a received bubble */
.imq .q { display: block; padding: 12px 19px 13px; border-radius: 22px; background: #E9E9EB; color: #0B0B0F;
  font-size: 18px; line-height: 1.34; letter-spacing: -.01em; transition: background .25s, color .25s; }
.imq summary:hover .q { background: #E1E1E4; }
/* the plus, a minus once it's open */
.imq .tg { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: background .25s, border-color .25s; }
.imq .tg::before, .imq .tg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 1px; background: var(--ink-3); translate: -50% -50%; transition: rotate .25s, opacity .25s, background .25s; }
.imq .tg::after { rotate: 90deg; }
.imq summary:hover .tg { border-color: var(--ink-2); }
.imq details[open] .q { background: color-mix(in oklab, var(--blue) 13%, #fff); color: var(--blue); }
.imq details[open] .tg { background: var(--blue); border-color: var(--blue); }
.imq details[open] .tg::before { background: #fff; }
.imq details[open] .tg::after { background: #fff; rotate: 0deg; opacity: 0; }
/* the answer: a sent bubble, iMessage blue, with its tail */
.imq .a { position: relative; width: fit-content; max-width: 78%; margin: 8px 8px 8px auto; padding: 13px 18px 14px; border-radius: 22px;
  background: var(--blue); color: #fff; font-size: 17px; line-height: 1.45; letter-spacing: -.005em; }
.imq .a { border-bottom-right-radius: 5px; }
/* the tail: the bubble's bottom-right corner curls out to a point (an ellipse cut from a small box, so nothing masks the page) */
.imq .a::after { content: ""; position: absolute; right: -11px; bottom: 0; width: 19px; height: 20px;
  background: radial-gradient(19px 20px at 100% 0, transparent 96%, var(--blue) 100%); }
.imq details[open] .a { animation: imq-in .42s var(--ease) both; }
@keyframes imq-in { from { opacity: 0; translate: 0 8px; scale: .98; } }

@media (max-width: 640px) {
  .imq { padding: 56px 0 64px; }   /* the phone rhythm, a third tighter (Calvin, 2026-10-17) */
  .imq-d { display: none; }
  .imq-m { display: inline; }
  .imq .q { font-size: 17px; }
  .imq .a { max-width: 88%; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .imq details[open] .a { animation: none; } }