/* ==========================================================================
   THE HOMEPAGE FAQ IS THE FAQ        /doctor/home-faq-one/hfaq2.css
   --------------------------------------------------------------------------
   index.html's #faq10 now holds the SAME COMPONENT the Google Ads page does:
   the same markup, the same class names, the same stylesheets, the same
   engine. The section's inner div carries id="gfaq", so every rule and both
   scripts written for the Google Ads FAQ reach it unchanged — the title
   plate and its rule, the bracket, the 400px window, the card, the Q./A.
   squares, the seam, the +/- mark, all of it, from one set of files.

   Only two things are the homepage's own, and they are what this file is:

     1 · the section heading, in the homepage's own title style
     2 · the seams — #faq10 is the section, #gfaq is the component inside it,
         and shelf.css has an opinion about both

   Loads after every file the component brings with it.
   ========================================================================== */


/* ── 0 · the ten tokens this page does not declare ────────────────────────
   google-ads.html links site/ds.css; index.html does not — it
   carries its own inline :root, and ten of the values the component reads
   are not in it. A missing custom property does not fall back quietly: a
   declaration that references one is INVALID AT COMPUTED-VALUE TIME, so
   `border-color: var(--fx-frame)` where --fx-frame resolves to nothing
   reverts to `currentColor` — which is why the first build of this page
   drew the bracket in near-black, and drew no heading rule at all.

   The values are site/ds.css's, character for character. This is the same
   job gads-pkg-faq/bridge.css part 1 does for the two tokens the Google Ads
   page was missing. Scoped to #faq10, so nothing else on the homepage can
   pick them up by accident. */
#faq10{
  --line-b:      #DEE5F1;
  --line-2:      #EFF1F4;
  --mist:        #F6F8FC;
  --ground:      #F4F7FC;
  --ground-2:    #EDF2F9;
  --ds-tint:     #EEF4FE;
  --ds-tint-2:   #F5F9FF;
  --ds-edge:     #CFE0FD;
  --accent-soft: #EAF1FE;
  --shadow-s:    0 1px 2px rgba(11,13,18,.035), 0 6px 18px rgba(15,27,61,.045);
  --ease:        cubic-bezier(.4,0,.2,1);
}


/* ── 1 · the heading ──────────────────────────────────────────────────────
   Every major section on this homepage carries the same three parts,
   centred: a tracked mono eyebrow, an 800-weight headline with the accent
   full stop, and a supporting line. The values here are #hp1's — Client
   Proof, the section with a headline of a similar length — so the FAQ's
   title is the same object as the four above it rather than a near miss.

       #ss1  #about5  #indwork   clamp(38-40px, 6-6.6vw, 72-76px)
       #hp1                      clamp(38px, 5.6vw, 64px)   <- taken

   The Google Ads page's own FAQ heading is not used: that page's headings
   are a step smaller than this one's, and the brief is that the title match
   the homepage. */
#faq10 .faq-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(24px, 2.6vw, 34px);
}
#faq10 .faq-eyebrow{
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
}
#faq10 .faq-head h2{
  margin: .36em auto 0;
  max-width: 20ch;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .98;
  font-size: clamp(38px, 5.6vw, 64px);
  color: var(--ink);
  text-wrap: balance;
}
#faq10 .faq-head h2 i{ font-style: normal; color: var(--accent); }
#faq10 .faq-sub{
  margin: clamp(12px, 1.3vw, 16px) auto 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.58;
  color: var(--ink-2);
}


/* ── 2 · the two seams ────────────────────────────────────────────────────

   #gfaq IS THE COMPONENT, NOT A SECTION. On google-ads.html the
   two are the same element, so gfaq.css and site/shelf.css both dress #gfaq
   as a block: a ground, a hairline top and bottom, the aisle, the block
   padding. Here #faq10 is the block and #gfaq is inside it, so all of that
   has to come off the inner div or the page gets a block inside a block. */
#faq10 #gfaq{
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

/* #FAQ10 IS NOW A SHELF. site/shelf.css part 3 had it as EDITORIAL, with the
   reason written next to it: "the block is dominated by the call, not by the
   questions. A page whose FAQ is only questions gets a shelf — see #gfaq,
   #answers." The call has gone, so the section is only questions and the
   file's own rule says shelf. That classification is changed in shelf.css
   itself, where it is documented; this is only the close.

   The classification is set here rather than in shelf.css on purpose: it
   travels with the component's own link block, so taking those links off the
   page puts the section back to EDITORIAL in the same move that puts the
   call back. shelf.css carries a pointer to this file.

   It is written unconditionally, which is what settles shelf.css's own
   @media (max-width:760px) restatement of `#faq10{ background: floor }` — a
   media query adds no specificity, and this file is later. */
#faq10{
  background: var(--sh-shelf);
  border-top: 1px solid var(--sh-edge);
  margin-block: var(--sh-aisle);
  padding-block: var(--sh-pt) var(--sh-pb);
}

/* THE CLOSE. shelf.css part 4 takes the bottom edge and the aisle off the
   last block on every page, which works where the last block changes colour
   at the seam. It does not here: #faq10 is now --ground and #sfoot is
   --ground, so with no aisle and no bottom edge the FAQ and the footer are
   one uninterrupted surface. The FAQ takes back the ordinary block ending —
   its edge, then the aisle of floor white, then the footer's own edge. This
   is gads-faq-head-r6q/faqhead.css part 2, for this page. */
#faq10{
  padding-bottom: clamp(40px, 4vw, 58px);
  border-bottom: 1px solid var(--sh-edge);
  margin-bottom: var(--sh-aisle);
}