/* ---------------------------------------------------------------------------
   Answer-first lead + FAQ block for the existing service pages.

   LEGACY PALETTE ON PURPOSE. These are existing pages, and per CLAUDE.md and
   the geeks-invention-design skill an existing page keeps whatever palette it
   already uses. The design system (#FF7903 / navy / Satoshi) is for NEW
   surfaces such as /ai. Do not mix the two in one page — if you find yourself
   wanting design-system tokens here, the page needs a full migration first,
   which is a visual redesign and a separate decision.

   Legacy values used here, matching geeks-main.css:
     accent  #f16522   ink #23252c   muted #5a5f6a   hairline #e4e4e6

   Loaded only by the pages that use these blocks, so nothing else on the site
   is affected. Class names are prefixed `gi-` to stay clear of the legacy
   namespace — geeks-main.css carries global bare-element rules and reused
   class names (`.blog-filter` is the known trap), so a generic name like
   `.faq` or `.answer` would risk colliding with something already defined.
--------------------------------------------------------------------------- */

/* --- Answer-first lead ---------------------------------------------------
   A 40–60 word plain-English answer to the question the page title implies.
   Sits directly under the hero because a large share of AI-answer citations
   are drawn from the opening of a page. */
.gi-answer {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 20px 0;
    box-sizing: border-box;
}

/* Deliberately a <div>, not a <p>.

   This block sits inside the hero (`.pm-t` / `.pm-center`), and geeks-main.css
   carries `.pm-t p { color: white; opacity: .8; display: inline-block }` plus a
   more specific `.pm_services-title .pm-t p { opacity: .6 }`. A <p> here
   inherits that dimming and cannot override it without a specificity fight or
   !important. A <div> simply does not match those selectors.

   The hero background measures rgb(22,24,28) on six of these pages and
   rgb(35,37,44) on /android/, so the text is WHITE. An earlier version of this
   file set the legacy ink #23252c here, which rendered the paragraph
   invisible on /android/ (1:1 contrast) and near-invisible on the rest. */
.gi-answer__text {
    margin: 0;
    display: block;
    opacity: 1;
    font-family: "Satoshi", Helvetica, Arial, sans-serif;
    font-size: 21px;
    line-height: 1.6;
    color: #ffffff;
    text-align: center;
}

/* --- FAQ block ------------------------------------------------------------ */
.gi-faq {
    padding: 80px 20px;
    background: #fafafa;
    box-sizing: border-box;
}

.gi-faq__inner {
    max-width: 820px;
    margin: 0 auto;
}

.gi-faq__title {
    font-family: "Satoshi", Helvetica, Arial, sans-serif;
    font-size: 36px;
    line-height: 1.25;
    font-weight: normal;
    color: #23252c;
    margin: 0 0 32px;
    text-align: center;
}

.gi-faq__item {
    border-bottom: 1px solid #e4e4e6;
}

.gi-faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: "Satoshi", Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.4;
    color: #23252c;
}

.gi-faq__item summary::-webkit-details-marker { display: none; }

.gi-faq__item summary::after {
    content: "+";
    flex: none;
    font-size: 26px;
    line-height: 1;
    /* #f16522 on #fafafa measures 3.3:1 — fine for a 26px glyph (large text
       needs 3:1) but it is decorative reinforcement, never the only
       affordance: the summary text itself carries the full contrast. */
    color: #f16522;
}

.gi-faq__item[open] summary::after { content: "\2212"; }

.gi-faq__item p {
    margin: 0;
    padding: 0 0 24px;
    font-family: "Satoshi", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #4a4f5a;   /* 7.4:1 on #fafafa */
}

@media only screen and (max-width: 767px) {
    .gi-answer { padding-top: 32px; }
    .gi-answer__text { font-size: 18px; text-align: left; }
    .gi-faq { padding: 48px 20px; }
    .gi-faq__title { font-size: 26px; margin-bottom: 20px; }
    .gi-faq__item summary { font-size: 17px; padding: 18px 0; }
}