/* ==== refinements.css · layer 1 of 4 ==== */
/* ==========================================================================
   FAQ — THE REPAIRS               an earlier layer of this file
   --------------------------------------------------------------------------
   THIS FILE CHANGES NO MARKUP AND NO STRUCTURE.

   The section stays exactly what it is: the heading, the FAQ title plate,
   the bracketed box, the fixed-height inner scroll, one card per question,
   the Q. and A. squares, the +/- mark, the 0fr->1fr open. Every element in
   assets/services/faq/faq.css is still there, in the same place, in the same
   order, driven by [archived], which is not touched.

   What is here is the set of faults that are faults in any design — the
   things that are measurably wrong rather than a matter of taste. The five
   looks (refinements.css … [archived]) sit on top and only re-declare its --fx-* tokens.

     1 · the tokens the five looks set
     2 · the tap colour — the "strange colour on click"
     3 · the title plate's ground and its notch
     4 · the box — a symmetrical inside, and an honest bottom edge
     5 · the scroll — a bar, a lead, and no chaining
     6 · the card and its states
     7 · the Q. / A. column
     8 · the +/- mark, drawn instead of typed
     9 · the answer's setting
    10 · phones
   ========================================================================== */


/* ── 1 · tokens ───────────────────────────────────────────────────────────
   Declared on #gfaq, not :root — an unprefixed shared token collides
   exactly like a class name, and all five files set the same names. */
#gfaq{
  --fx-frame:        var(--line-b);      /* the bracket's colour      */
  --fx-frame-w:      10px;               /* and its weight            */
  --fx-frame-r:      25px;               /* its rounded corners       */
  --fx-frame-l:      0px;                /* the open side, unless a
                                            look chooses to close it  */
  --fx-box-bg:       transparent;        /* what is inside the bracket */
  --fx-behind:       var(--ground);      /* == what the plate paints, and
                                            what the bottom fade fades to */
  --fx-box-shadow:   none;

  --fx-pad:          20px;               /* the inside gutter         */
  --fx-pad-top:      30px;               /* air under the title plate */
  --fx-scroll-h:     400px;
  --fx-fade:         30px;

  --fx-card-bg:      var(--paper);
  --fx-card-line:    var(--line);
  --fx-card-r:       12px;
  --fx-card-pad:     12px;
  --fx-card-gap:     10px;
  --fx-card-shadow:  none;

  --fx-open-bg:      var(--paper);
  --fx-open-line:    var(--ds-edge);
  --fx-open-shadow:  var(--shadow-s);

  --fx-badge-bg:     #E7ECF3;
  --fx-badge-ink:    var(--navy);
  --fx-badge-line:   transparent;
  --fx-badge-r:      6px;
  --fx-open-badge-bg:  #E7ECF3;
  --fx-open-badge-ink: var(--accent);

  --fx-ease: cubic-bezier(.4,0,.2,1);
}


/* ── 2 · the tap colour ───────────────────────────────────────────────────
   The one the brief calls "an unintended browser/default/system effect",
   and it is exactly that. A <button> with `background:none` still carries
   the UA's tap highlight, its own button chrome, and text selection.
   Nothing in faq.css turns any of them off, so on a phone the whole row
   flashes grey under a finger and a double-tap selects the question.
   Four properties — and then the section draws its own press instead. */
#gfaq .gfaq-q{
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#gfaq .gfaq-q:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}


/* ── 3 · the title plate ──────────────────────────────────────────────────
   faq.css gives the plate `background: var(--paper)` and writes down why:
   "Its background must equal the section ground or the notch fills in."
   That was right; the ground moved out from under it. assets/shared/design/shelf.css makes
   #gfaq a shelf at --ground #F4F7FC, so the plate no longer cuts a notch
   out of the bracket — it prints a WHITE RECTANGLE on a grey section, which
   is the "label treatment near the FAQ heading is not integrated" fault,
   and at the bottom of the list it is a white rectangle sitting over a row
   scrolling underneath it. One value: the plate paints whatever is behind
   the bracket, whatever a look decides that is.

   The left inset goes with it. The bracket has no left side, so the plate's
   16px left padding was anchored to nothing — the word floated 16px inside
   the lane while the heading above it and the cards below it start at the
   lane. Flush left, and the three line up. */
#gfaq .gfaq-title{
  background: var(--fx-behind);
  padding-left: 0;
  padding-right: 18px;
}


/* ── 4 · the box ──────────────────────────────────────────────────────────
   THE INSIDE IS NOT SYMMETRICAL. Measured on the live page at 1440:
   `padding: 20px 20px 20px 0` with `border-left: 0` puts the cards' left
   edge at x=160 — the box's own outer edge — while their right edge stops
   30px short of it. The cards lean against the open side of the bracket and
   stand 30px off the closed one. The fix is a left gutter: every card is
   now --fx-pad from the frame's inner surface on all three closed sides and
   --fx-pad from the box edge on the open one, so the block of cards sits
   centred in the bracket's opening. */
#gfaq .gfaq-box{
  background: var(--fx-box-bg);
  border-style: solid;
  border-color: var(--fx-frame);
  border-width: var(--fx-frame-w);
  border-left-width: var(--fx-frame-l);
  border-top-right-radius: var(--fx-frame-r);
  border-bottom-right-radius: var(--fx-frame-r);
  padding: var(--fx-pad-top) var(--fx-pad) var(--fx-pad) var(--fx-pad);
  box-shadow: var(--fx-box-shadow);
}

/* THE BOTTOM EDGE. 28 questions are 2,184px of content in a 400px window,
   so the list always continues past the bottom — and it currently ends in a
   hard cut through the middle of a card, which is the loudest "broken" cue
   in the section. A fade says "there is more" without moving anything and
   without a row ever being sliced. It is drawn on the box rather than as a
   mask on the scroller, so a visible scrollbar is not faded out with it. */
#gfaq .gfaq-box::after{
  content: "";
  position: absolute;
  left: var(--fx-pad);
  right: var(--fx-pad);
  bottom: var(--fx-pad);
  height: var(--fx-fade);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fx-behind));
}


/* ── 5 · the scroll ───────────────────────────────────────────────────────
   The window stays — it is what the section is. It gets the three things a
   400px window over 2,184px of content has to have and does not. */
#gfaq .gfaq-scroll{
  height: var(--fx-scroll-h);
  /* a wheel over the list stops at the end of the list instead of carrying
     on down the page — the thing that makes a nested scroller feel broken */
  overscroll-behavior: contain;
  /* [archived] brings an opened card to the top of the window; this is the lead
     it leaves above it */
  scroll-padding-block: 10px;
  scroll-behavior: smooth;
  /* THE BAR. faq.css hides it — `scrollbar-width:none` and a
     ::-webkit-scrollbar{display:none} — so nothing on screen says the list
     moves at all. assets/shared/design/ui-finish.css already carries the site's own bar (a
     cool neutral thumb, never brand blue, 3:1 on all three legal grounds);
     these two rules simply stop hiding it. A look that would rather not
     show one sets --fx-bar: none. */
  scrollbar-width: var(--fx-bar, thin);
}
#gfaq .gfaq-scroll::-webkit-scrollbar{
  display: var(--fx-bar-wk, block);
  width: var(--sb-size, 10px);
  background: transparent;
}


/* ── 6 · the card ─────────────────────────────────────────────────────────
   Same box, same radius, same rhythm. What it gains is a ground that can be
   seen and the two states it never had: nothing in faq.css responds to a
   pointer at all, and the only sign a card was open was the blue A square
   in part 7.

   THE GROUND. --mist #F6F8FC cards on the section's --ground #F4F7FC are
   two steps apart on a 255 scale, which is why the cards read as smudges
   rather than as objects. #pricing, the section directly above this one,
   puts white cards on that same ground; so does every card on the page. */
#gfaq .gfaq-item{
  margin: var(--fx-card-gap) 0;
  padding: var(--fx-card-pad);
  background: var(--fx-card-bg);
  border-color: var(--fx-card-line);
  border-radius: var(--fx-card-r);
  box-shadow: var(--fx-card-shadow);
  transition: background .2s var(--fx-ease), border-color .2s var(--fx-ease),
              box-shadow .2s var(--fx-ease);
}
#gfaq .gfaq-item:hover{ border-color: var(--ds-edge); }
#gfaq .gfaq-t{ transition: color .18s var(--fx-ease); }
#gfaq .gfaq-q:hover .gfaq-t{ color: var(--accent); }
#gfaq .gfaq-q:active .gfaq-t{ opacity: .7; }

#gfaq .gfaq-item.is-open{
  background: var(--fx-open-bg);
  border-color: var(--fx-open-line);
  box-shadow: var(--fx-open-shadow);
}
#gfaq .gfaq-item.is-open .gfaq-t{ color: var(--accent); }


/* ── 7 · the Q. / A. column ───────────────────────────────────────────────
   The pair is the section's own idea and a good one: the Q square stretches
   to the row so it always meets the A square below it, and together they
   make one unbroken column down the left of an open card. It fails on one
   thing — the A square is filled --accent-soft and ringed
   rgba(26,115,232,.28), so opening a card produces a blue block that
   appears nowhere else in the section and reads as a browser's own selected
   state. The blue leaves the block and goes into the letter: same square,
   same size, same column, the accent still marks the answer. */
#gfaq .gfaq-qb,
#gfaq .gfaq-ab{
  background: var(--fx-badge-bg);
  color: var(--fx-badge-ink);
  box-shadow: inset 0 0 0 1px var(--fx-badge-line);
  transition: background .2s var(--fx-ease), color .2s var(--fx-ease),
              box-shadow .2s var(--fx-ease);
}
#gfaq .gfaq-item.is-open .gfaq-qb{
  background: var(--fx-open-badge-bg);
  color: var(--fx-open-badge-ink);
}
#gfaq .gfaq-ab{
  background: var(--fx-open-badge-bg);
  color: var(--fx-open-badge-ink);
  box-shadow: inset 0 0 0 1px var(--fx-badge-line);
  font-size: 12px;
  font-weight: 700;
}
/* the pair reads as one column — the Q square rounds its top corners, the A
   square rounds its bottom ones, and the join between them stays square. A
   closed card has no A square under it, so its Q square is a whole shape. */
#gfaq .gfaq-item.is-open .gfaq-qb{ border-radius: var(--fx-badge-r) var(--fx-badge-r) 0 0; }
#gfaq .gfaq-item.is-open .gfaq-ab{ border-radius: 0 0 var(--fx-badge-r) var(--fx-badge-r); }
#gfaq .gfaq-item:not(.is-open) .gfaq-qb{ border-radius: var(--fx-badge-r); }


/* ── 8 · the mark ─────────────────────────────────────────────────────────
   faq.css types the mark: content "+", then content "\2212" when open. The
   two glyphs do not share an optical centre in the system font — the minus
   sits about 2px high and a little narrow against the plus — so the mark
   moves every time a card is opened or shut, in a column of 28 of them.
   Drawn as two bars it has one centre, and only the upright leaves. Same
   size, same place, same behaviour. */
#gfaq .gfaq-m{
  width: 22px;
  height: 22px;
  right: 7px;
  font-size: 0;
  color: var(--pk-muted);
  transition: color .2s var(--fx-ease);
}
#gfaq .gfaq-m::before,
#gfaq .gfaq-item.is-open .gfaq-m::before,
#gfaq .gfaq-m::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.8px;
  margin: -.9px 0 0 -6.5px;
  border-radius: 2px;
  background: currentColor;
}
#gfaq .gfaq-m::after{
  transform: rotate(90deg);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
#gfaq .gfaq-item.is-open .gfaq-m::after{ transform: rotate(90deg) scaleX(0); }
#gfaq .gfaq-q:hover .gfaq-m{ color: var(--ink-2); }
#gfaq .gfaq-item.is-open .gfaq-m{ color: var(--accent); }


/* ── 9 · the answer ───────────────────────────────────────────────────────
   13px is a step below the smallest body size on the site and it is
   carrying the longest prose in the section — Q.17 runs to three paragraphs
   and two lists. 14px at 1.65 is the setting the rest of the page reads at. */
#gfaq .gfaq-body{
  font-size: 14px;
  line-height: 1.65;
  padding-top: 6px;
}
#gfaq .gfaq-body p{ margin: 0 0 8px; }
#gfaq .gfaq-body li{ margin-bottom: 6px; }
#gfaq .gfaq-body ul{ padding-left: 20px; }


/* ── 10 · phones ──────────────────────────────────────────────────────────
   The same repairs at 640px, where faq.css restates its own values. Its
   phone rule is `padding-right: 6px; border-left: 0`, so the cards run out
   of the frame on the left and stop 13px short on the right; and the window
   is still 400px, in which a phone sees Q.1's answer, two questions and
   half of a third. The window grows with the screen instead. */
@media (max-width: 640px){
  #gfaq{
    --fx-frame-w: 7px;
    --fx-pad: 12px;
    --fx-pad-top: 24px;
    --fx-card-pad: 11px;
    --fx-card-gap: 9px;
    --fx-scroll-h: clamp(380px, 62vh, 560px);
    --fx-fade: 26px;
  }
  #gfaq .gfaq-title{ padding-left: 0; padding-right: 14px; }
  #gfaq .gfaq-box{
    padding: var(--fx-pad-top) var(--fx-pad) var(--fx-pad) var(--fx-pad);
  }
  #gfaq .gfaq-body{ font-size: 14px; }
  #gfaq .gfaq-m{ right: 5px; }
}

/* ==== refinements.css · layer 2 of 4 ==== */
/* ==========================================================================
   V1 · AS IT IS, REPAIRED — the design untouched, the faults gone
   --------------------------------------------------------------------------
   This version restyles NOTHING. The bracket keeps the weight it has today
   (10px), the colour it has today (--line-b #DEE5F1), its open left side
   and its two rounded right corners. The card keeps its 12px radius. The
   Q. and A. squares keep their neutral #E7ECF3.

   The only differences from the live section are the nine repairs in
   refinements.css — the tap colour, the plate's ground and its alignment, the
   box's symmetry, the card's ground, the blue A square, the bottom edge,
   the mark's optical centre, and opening a card near the foot of the
   window. If you want the section you have, only working, this is it.

   The one thing that changes colour is the card: --mist #F6F8FC on
   --ground #F4F7FC is two steps apart, and that is the reason the section
   reads as unsettled. White is what every other card on this page is.
   ========================================================================== */
#gfaq{
  --fx-frame:       var(--line-b);       /* exactly as today */
  --fx-frame-w:     10px;                /* exactly as today */
  --fx-frame-r:     25px;                /* exactly as today */

  --fx-card-bg:     var(--paper);
  --fx-card-line:   var(--line);
  --fx-card-r:      12px;                /* exactly as today */

  --fx-open-bg:     var(--paper);
  --fx-open-line:   var(--ds-edge);
  --fx-open-shadow: var(--shadow-s);

  --fx-badge-bg:    #E7ECF3;             /* exactly as today */
  --fx-badge-ink:   var(--navy);
  --fx-open-badge-bg:  #E7ECF3;
  --fx-open-badge-ink: var(--accent);
}

/* ==== refinements.css · layer 3 of 4 ==== */
/* ==========================================================================
   FAQ · TWO PRECISION REFINEMENTS   an earlier layer of this file
   --------------------------------------------------------------------------
   Loads after an earlier layer of this file and an earlier layer of this file — the
   shortlisted design. Nothing here changes a colour, the section ground, the
   content, the numbering, the type, the mark, the accordion or the layout.

   Two things only:

     1 · the heading and its rule, rebuilt as one responsive component
     2 · the question and its answer, made one geometry

   Plus one repair to my own layering, noted at the end.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1 · THE HEADING AND ITS RULE
   --------------------------------------------------------------------------
   WHAT IS WRONG. faq.css draws the rule as the box's top border and hides
   the part in front of the word by pulling the box up under an opaque
   plate: `.gfaq-box{ margin-top: -30px }`. 30 is a number measured once,
   against a 28px heading whose line box is 33.6px. It is right at exactly
   one heading size and wrong everywhere else. Measured on the live page:

     1440   heading 326.1 -> 359.7, rule band 329.7 -> 339.7
            the rule's centre is 5.1px ABOVE the cap centre — it grazes the
            tops of the letters instead of crossing their middle
      390   heading 254.9 -> 275.3, rule band 246.9 -> 256.9
            the rule is ENTIRELY ABOVE the heading

   And because the word is masking a border rather than sitting beside a
   rule, the rule does pass behind it, and it does begin at the box's left
   edge — both of which the brief rules out.

   THE FIX. The heading becomes a flex row and the rule becomes a real
   element in it, so the three parts are laid out rather than positioned:

       [ the text, its own width ] [ gap ] [ the rule, flex: 1 ]

   Nothing is measured against the word "FAQ". The first item is the text
   node itself, so it is exactly as wide as whatever the heading says; the
   gap is one value; the rule takes what is left. "Why Us", "Our Process"
   and "Client Proof" all land correctly with no other change.

   THE VERTICAL, and the thing that is easy to get wrong. The rule has to
   cross the OPTICAL centre of the letters — the middle of the cap band,
   from the top of the F to the baseline — not the middle of the line box.
   Those two are only the same when the font's own box happens to match the
   line-height, and MEASURING IT is the only way to know:

     -apple-system / SF   ascent .956em, descent .244em  = 1.200em
     the heading's line-height                             1.2

   They match, so `align-items: center` puts the rule 0.13px off the cap
   centre at 1440 and 0.07px off at 390 — and no nudge is wanted at all. A
   first pass here lifted it by .11em on the assumption that the font box was
   1.0em, which pushed the rule 3.6px above the caps; [archived] measures the
   cap band off the glyphs with canvas metrics and caught it. The lift stays
   as a token, at zero, so a future family with a different box has one
   number to set rather than a rule to rewrite.
   ══════════════════════════════════════════════════════════════════════════ */
#gfaq{
  /* faq.css's own two values for the heading, restated so the rule below
     can be derived from them instead of guessed against them */
  --fx-h-fs:      clamp(19px, 2.4vw, 28px);
  --fx-h-lh:      1.2;
  /* how far the cap centre sits ABOVE the line-box centre, in em. Zero for
     this family — measured, not assumed. See the note above. */
  --fx-h-optical: 0;
  /* the one intentional gap between the word and the rule */
  --fx-h-gap:     clamp(12px, 1.3vw, 18px);
  /* the line box, and the lift, derived — never typed as a pixel offset */
  --fx-h-box:     calc(var(--fx-h-fs) * var(--fx-h-lh));
  --fx-h-lift:    calc(var(--fx-h-optical) * 2 * var(--fx-h-fs));
}

#gfaq .gfaq-title{
  display: flex;
  align-items: center;
  gap: var(--fx-h-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  /* the plate is gone: the word no longer masks anything, so it needs no
     ground of its own and can never be caught out by the section's */
  background: none;
  font-size: var(--fx-h-fs);
  line-height: var(--fx-h-lh);
}

/* THE RULE. Same weight and same colour as the frame it continues into,
   because it IS the frame's top edge — the box no longer draws one. */
#gfaq .gfaq-title::after{
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: var(--fx-frame-w);
  background: var(--fx-frame);
  border-top-right-radius: var(--fx-frame-r);
  margin-top: calc(var(--fx-h-lift) * -1);
}

/* the box's top edge is now that rule, so the box gives up its own and is
   raised until the two meet. The expression is the geometry written out:
   the rule's bottom sits at (lineBox + ruleHeight - lift) / 2 from the top
   of the heading, and the box's top has to be there. */
#gfaq .gfaq-box{
  border-top-width: 0;
  border-top-right-radius: 0;
  margin-top: calc((var(--fx-frame-w) - var(--fx-h-lift) - var(--fx-h-box)) / 2);
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · THE QUESTION AND ITS ANSWER, ONE GEOMETRY
   --------------------------------------------------------------------------
   WHAT IS WRONG. Measured on the live page, on the open card:

     1440   question text  243 -> 1197      answer text  243 -> 1237
      390   question text   87 ->  304      answer text   87 ->  338

   The left edges already agree. The right edges do not, and they are out by
   exactly the width of the reserve the question keeps for the +/- mark —
   40px, 34 on a phone. So the answer runs wider than the question it
   belongs to, on every card, at every width. That is the whole of the
   "not perfectly aligned" reading: one block is 40px longer than the other.

   THE FIX is to stop writing that reserve twice. It becomes one value, and
   the question and the answer both hold to it, so the two blocks are the
   same column: same left edge, same right edge, same width, at any size.
   ══════════════════════════════════════════════════════════════════════════ */
#gfaq{
  --fx-rail: 40px;     /* the reserve the +/- mark stands in */
}
#gfaq .gfaq-q     { padding-right: var(--fx-rail); }
#gfaq .gfaq-ai-in { padding-right: var(--fx-rail); }

/* THE FIRST LINE. The answer opened 6px under the top of the A square, so
   its first line sat 2.5px above that square's letter — close enough to
   read as a mistake rather than as a decision. The A square is 40px and its
   letter is on its centre; the answer's first line is put on the same
   centre, so the two start on one horizontal. 8px is the measured value:
   the A is on the 40px square's centre, and a 14px line at 1.65 puts its own
   cap centre 12px below the top of its line box. */
#gfaq .gfaq-body{ padding-top: 8px; }

/* THE CORNERS. Restrained, and the same rule everywhere: the card comes
   down from 12px to 8, and the Q./A. rail from 6 to 4 — the card's radius
   less its 12px padding is 8-4, so the rail's curve is concentric with the
   card's, which is what stops a rounded thing inside a rounded thing from
   reading as a second, floating box. The rail keeps its square join, so the
   Q. half and the A. half are still one continuous shape. */
#gfaq{
  --fx-card-r:  8px;
  --fx-badge-r: 4px;
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · ONE LAYERING REPAIR
   --------------------------------------------------------------------------
   Not a design change — a bug in how these files stack. refinements.css sets
   `--fx-frame-w: 7px` inside its 640px block; refinements.css then sets
   `--fx-frame-w: 10px` with no media query at all. A media query adds no
   specificity, and refinements.css is the later file, so the unconditional 10px was
   winning on phones too. faq.css's own phone rule has always been 7px, and
   at 7px the rule is in proportion to a 17px heading where 10px is not.
   Restated here, in the last file, where it wins.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  #gfaq{
    --fx-frame-w: 7px;
    /* faq.css's own phone values, restated so the derivations above use
       the real numbers rather than the desktop clamp */
    --fx-h-fs:  17px;
    --fx-h-gap: 12px;
    --fx-rail:  34px;
  }
}

/* ==== refinements.css · layer 4 of 4 ==== */
/* ==========================================================================
   FAQ · ONE CARD, TWO PARTS         an earlier layer of this file
   --------------------------------------------------------------------------
   Replaces [archived], which split the item into two standalone rectangles.
   That was the wrong reading. An opened item is ONE card, with a question
   header at the top and an answer body under it, and the two are told apart
   by a rule inside the card rather than by being two cards.

       ┌─────────────────────────────────────────────┐
       │  Q.1   Will I get instant leads after…    −  │   the header
       ├─────────────────────────────────────────────┤   one internal rule
       │  A     Leads typically start within 3–7…     │   the body
       └─────────────────────────────────────────────┘   one outer box

   Nothing else moves. Not a colour — the card's ground and its border are
   still the ones assets/shared/design/paper.css sets — not the heading and its rule, not the
   type, not the content, not the +/- mark or what it does, not the
   accordion, not the section.

   HOW IT IS BUILT, and why this way. The card's padding moves OFF the card
   and ONTO its two parts. That is the whole trick: with the padding on the
   card, an internal rule could only ever be an inset line floating inside
   it; with the padding on the parts, the rule spans the card edge to edge
   and reads as the seam between a header and a body. The two parts then
   carry one identical padding, so the question and the answer sit on the
   same left edge, the same right edge and the same measure.
   ========================================================================== */

#gfaq{
  --fx-card-r:   6px;    /* low and square-ish, one value for the card   */
  --fx-badge-r:  4px;    /* the two squares                              */
  --fx-part-pad: 12px;   /* header and body, identical                   */
  --fx-mark-in:  12px;   /* == the padding, so three edges read as one   */
  --fx-rail:     44px;   /* padding + the 22px mark + its air            */
  --fx-badge-h:  40px;
  --fx-card-gap: 16px;   /* one item to the next                         */
  /* the seam. One notch lighter than the card's own edge, so the outer
     shape stays the firmer line and the division inside it stays quiet. */
  --fx-seam:     var(--line);
}


/* ── the card ─────────────────────────────────────────────────────────────
   Its ground, its border colour and its lift are untouched — refinements.css
   and assets/shared/design/paper.css still set them. Only the padding leaves, so the seam
   below can reach both edges, and the radius comes down one step. */
#gfaq .gfaq-item{
  padding: 0;
  border-radius: var(--fx-card-r);
  margin: var(--fx-card-gap) 0;
}
#gfaq .gfaq-item:first-child{ margin-top: 0; }
#gfaq .gfaq-item:last-child { margin-bottom: 0; }


/* ── the two parts, one padding ───────────────────────────────────────────
   Written together so they cannot be given different insets by a later
   edit. Neither is a box: no ground, no border of its own, no radius. */
#gfaq .gfaq-q,
#gfaq .gfaq-ai-in{
  box-sizing: border-box;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--fx-part-pad) var(--fx-rail) var(--fx-part-pad) var(--fx-part-pad);
}

/* THE SEAM — the one internal division, edge to edge because the card has
   no padding left to hold it off. It exists only while the item is open,
   because .gfaq-ai-in is only ever rendered then. */
#gfaq .gfaq-ai-in{
  border-top: 1px solid var(--fx-seam);
  margin-top: 0;
}


/* ── the two squares, one shape ───────────────────────────────────────────
   faq.css stretches the Q square to its row so that it would meet the A
   square below; the seam is what joins the two parts now, and a Q square
   that grows to 55px on a two-line question beside an A square of 40px is
   the geometry the brief keeps calling awkward. Both are the same square,
   at the top of their own part, and each part's first line of text is
   optically centred on it. */
#gfaq .gfaq-q{ align-items: flex-start; }
#gfaq .gfaq-qb{
  height: var(--fx-badge-h);
  min-height: var(--fx-badge-h);
  align-self: flex-start;
}
/* fix-base splits the pair's radius — top corners on the Q, bottom on the A
   — so the two would read as one rail. They no longer touch, so each is a
   whole shape. Written at (1,2,0) to settle fix-base's own open-state rule. */
#gfaq .gfaq-item .gfaq-qb,
#gfaq .gfaq-item .gfaq-ab,
#gfaq .gfaq-item.is-open .gfaq-qb,
#gfaq .gfaq-item.is-open .gfaq-ab{ border-radius: var(--fx-badge-r); }

/* the question's first line, on the Q square's centre */
#gfaq .gfaq-t{ align-self: flex-start; padding: 9px 0; }
/* the answer's first line, on the A square's centre — measured in refinements.css */
#gfaq .gfaq-body{ padding-top: 8px; }

/* the mark is inset by the header's own padding */
#gfaq .gfaq-m{ right: var(--fx-mark-in); }


/* ── phones ──────────────────────────────────────────────────────────────
   faq.css's own phone values for the squares and the gap are 36px and 9px;
   the parts follow those rather than the desktop set. */
@media (max-width: 640px){
  #gfaq{
    --fx-part-pad: 11px;
    --fx-mark-in:  10px;
    --fx-rail:     40px;
    --fx-badge-h:  36px;
    --fx-card-gap: 13px;
  }
  #gfaq .gfaq-t{ padding: 8px 0; }
  #gfaq .gfaq-body{ padding-top: 6px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MICRO-POLISH · 2026-09-10
   Two things found by looking at the corners at 4x and by measuring the
   mark at 390px. Neither changes the design, the colours or the type.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · the frame's two right corners, made the same corner ──────────────
   The bracket's top-right is drawn by the heading's rule and its
   bottom-right by the box, and at 25px they cannot match: the rule is only
   --fx-frame-w tall, so a 25px radius clamps to the rule's own height and
   renders as a 10px quarter-round with a square inside, while the box below
   renders the full 25px outer with a 15px inner curve. Photographed at 4x
   they are plainly two different corners on one frame.

   A radius equal to the frame's own weight is the one value that makes them
   identical: the outer curve is a quarter-round of exactly that radius at
   both ends, and the inner corner is square at both ends, because
   `radius - borderWidth` is zero at both. Written as the token rather than
   as a number, so the phone's 7px frame gets a 7px corner without a second
   rule. It is also the corner the 6px cards inside it belong to. */
#gfaq{ --fx-frame-r: var(--fx-frame-w); }


/* ── 2 · the mark, anchored to the Q square ───────────────────────────────
   faq.css centres the mark on the whole header — `top: 50%` — which is
   right only while the question is one line. Measured at 390px, where every
   question wraps:

       Q.1–Q.4   header 77px   the mark sits 10px below the Q square's centre
       Q.5       header 97px   19px below

   so the marker column and the mark column disagree by a different amount
   on almost every row. The mark belongs to the question's first line, which
   is the line the Q square marks, so it is pinned to that square's centre
   instead — the header's own padding plus half the square. It then holds
   still whether the question runs to one line or three. */
#gfaq .gfaq-m{
  top: calc(var(--fx-part-pad) + var(--fx-badge-h) / 2);
}