/* ==========================================================================
   SPECIALIZED GOOGLE ADS SOLUTIONS — the CTA, now inside the system's close
   --------------------------------------------------------------------------
   Applied 2026-09-08.  The band was a <section id="gss-cta"> of its own
   between "Our Google Ads System" and "Why Choose Us"; it is now the right
   half of that system's closing row, opposite

       "Every account we run goes through the same system."

   NOTHING about the CTA itself changed — same <b>, same paragraph, same
   .gss-btn.gss-open button, same .gss-note, same id, same panel.  Only the
   two wrappers it used to need as a standalone section (the .gss-cta band
   ground and its .k-wrap) are gone, because the row it now sits in is
   already inside .w8-wrap.

   WHY A FILE OF ITS OWN, LOADED LAST
   .w8-close and .gss-band are drawn by four files that all load before this
   one — sysw8.css, vm.css, v07.css and spec.css.  Two of them reach the CTA
   by inheritance now that it is inside the row:

     · #w8-system .w8-close p   (vm.css, 1-1-1) out-ranks .gss-band-t p
       (0-1-1) and would resize the CTA's own paragraph;
     · .w8-close's flex row would centre a text line against a card.

   So this file re-declares exactly those, at a specificity that settles it
   without !important, and adds nothing else.  Prefixed classes only
   (section-class-name-collisions); minmax(0,1fr) on both tracks
   (grid-1fr-overflows-on-phones).

   Loaded after gads-pkg-faq/bridge.css.
   ========================================================================== */

/* ---------- the closing row: a sentence, then the card ---------- */
/* The sentence needs one line of type and a 200px link under it and nothing
   more, so it is capped rather than given a share: every pixel it does not
   need goes to the card, which is what has to hold a heading, a paragraph
   and a 344px button label that does not wrap.  32% keeps the cap from
   swallowing a narrow row. */
#w8-system .w8-close{
  display: grid;
  grid-template-columns: minmax(0, min(380px, 32%)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
}

/* the sentence keeps its existing link under it, not beside it */
#w8-system .w8-close-say{
  display: grid;
  justify-items: start;
  gap: 9px;
}

/* ---------- the card, exactly as it read as a section ---------- */
/* As a full-width section the card always had ~1300px to put its words on
   the left and its button on the right.  Half a row is 500-900px, and the
   button's label does not wrap, so the width that decides that layout is now
   the CARD's, not the window's — a @container, not a media query.  Below
   820px of card it takes the stacked form spec.css already gives it on a
   phone: words, then the button full width under them.
   Safe as a container here because .gss-in-close is a GRID item, which
   stretches to its track; a contained flex item would have collapsed to 0
   (container-query-zero-width-flex-item). */
#w8-system .gss-in-close{
  min-width: 0;
  container: gssrow / inline-size;
}

/* words above, action below — but the button keeps its own width and sits
   under the words it belongs to.  A 700px pill across the card would read as
   the card's floor, not as one thing to press. */
@container gssrow (max-width: 820px){
  #w8-system .w8-close .gss-band{
    flex-direction: column; align-items: stretch; gap: 18px;
  }
  #w8-system .w8-close .gss-band-a{ width: 100%; align-items: flex-start; }
  #w8-system .w8-close .gss-note{ text-align: left; }
}

/* a phone-width card: spec.css's own phone form — the button is the sheet */
@container gssrow (max-width: 430px){
  #w8-system .w8-close .gss-band-a{ align-items: stretch; }
  #w8-system .w8-close .gss-note{ text-align: center; }
  /* the label wraps rather than pushing the button past the card edge */
  #w8-system .w8-close .gss-btn{
    width: 100%; height: auto; min-height: 52px; padding: 13px 20px;
    white-space: normal; text-align: center; line-height: 1.25;
  }
}

/* .w8-close p and #w8-system .w8-close p both reach this paragraph now;
   these are spec.css's own numbers, restored at a weight that holds. */
#w8-system .w8-close .gss-band-t p{
  margin-top: 8px;
  max-width: 56ch;
  font-size: 14.4px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* THE ONE THAT ACTUALLY BITES.  sysw8.css scopes its reset as
       .w8 :where(button){ font:inherit; color:inherit; background:none; border:0 }
   which is (0,1,0) — the :where() zeroes the button, not the .w8 in front of
   it — so it TIES with .gss-btn and wins on source order, sysw8.css being the
   later file.  Moving the button inside .w8 therefore stripped its blue fill,
   its white label and its weight; measured, not guessed (btnBg came back
   rgba(0,0,0,0)).  spec.css's own values, re-declared where they hold. */
#w8-system .w8-close .gss-btn{
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.012em;
  color: #fff;
  background: var(--brand);
  border: 0;
}

/* ---------- the phone: the row is one column, the card is a sheet ---------- */
/* ONE COLUMN, STILL A GRID.  sysw8.css stacks this row with
   `display:flex; flex-direction:column` — and a container element used as a
   COLUMN FLEX ITEM came back 1072px tall around 236px of card, measured at
   both 700 and 390 (the block axis kept a first-pass height the relayout
   never corrected).  A single-column grid stacks identically and the
   containment behaves, so the grid is kept and only the tracks change. */
@media (max-width: 860px){
  #w8-system .w8-close{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  #w8-system .w8-close-say{ gap: 0; }
  #w8-system .w8-close .gss-band{ padding: 20px; border-radius: 16px; }
}