/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIT, 17 Sep 2026.

   Narrow-screen spacing and overflow fixes found in one audit of every step at
   320, 360, 390 and 414px, standalone and inside the portal (Grow mounts us
   beside its rail, so our cards get roughly 70px less than the viewport says).

   LINKED LAST OF THE EMBEDDED STYLESHEETS, straight after
   referral-services-accordion.css, and listed in assets/embed-manifest.json so
   the portal receives it. Several rules it corrects in app.v2.css carry
   !important, which is why a few here do too.

   WHERE A RULE DEPENDS ON SPACE IT KEYS OFF THE CARD'S OWN WIDTH, via the
   container .svc already declares (container-type: inline-size, app.v2.css),
   and not off the window. Inside the portal the window is wider than the card,
   so a viewport breakpoint fires too late there. That is exactly how the talent
   card below reached the portal broken whilst app.gogorilla.com at the same
   phone width looked only slightly loose.

   Every rule is scoped to .gg-scope like the rest of the estate.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. WHITE-LABEL TALENT CARDS: THE EMPTY BLOCK BESIDE THE ICON ──────────────
   Reported by Alexander on the portal (Grow, Dedicated Resources · Full-Time).
   app.v2.css reserves the top right of the title for the commission badge with a
   300 x 76px floated spacer (Batch 4, 19 Jun). On narrow cards the badge has
   already been lifted onto its own row above the icon, but the spacer stayed, and
   300px is wider than the whole title column there, so it filled a line on its
   own: an empty 76px block beside the icon, with TALENT and the title pushed
   below it.

   The corner commitment bar has the same kind of spacer and was already switched
   off at 600px; this one never was. Both are now switched off whenever the
   corner cluster is stacked, which is the same pair of conditions app.v2.css uses
   to stack it (viewport 960px, card 860px). The card condition is also met on
   desktop, where a service card in the two-column layout is about 710 to 790px
   wide, so the same empty gap between GROWTH and the service title closes there
   too (checked at 1280px, before and after).

   And since the badge row has room to its left, the icon moves up into it
   (Alexander's mark on the screenshot), and the title and description take the
   full card width below instead of an indented column. ── */
@media (max-width: 960px) {
  .gg-scope .svc:has(.svc__talent-comm) .svc__title-wrap::before,
  .gg-scope .svc:has(.svc__head-right .svc__commit-bar--corner) .svc__title-wrap::before{ display: none; }
  .gg-scope .svc:has(.svc__talent-comm) .svc__icon{ order: -2; }
  .gg-scope .svc:has(.svc__talent-comm) .svc__head-right{
    order: -1 !important;
    width: auto !important;
    flex: 1 1 auto;
    margin-left: auto !important;
  }
  .gg-scope .svc:has(.svc__talent-comm) .svc__title-wrap{ flex: 1 1 100%; min-width: 0; }
}
@container (max-width: 860px) {
  .gg-scope .svc:has(.svc__talent-comm) .svc__title-wrap::before,
  .gg-scope .svc:has(.svc__head-right .svc__commit-bar--corner) .svc__title-wrap::before{ display: none; }
  .gg-scope .svc__head:has(.svc__talent-comm) .svc__icon{ order: -2; }
  .gg-scope .svc__head:has(.svc__talent-comm) .svc__head-right{
    order: -1 !important;
    width: auto !important;
    flex: 1 1 auto;
    margin-left: auto !important;
  }
  .gg-scope .svc__head:has(.svc__talent-comm) .svc__title-wrap{ flex: 1 1 100%; min-width: 0; }
}


/* ── 2. TALENT ROLE CARDS SPILL PAST THE CARD INSIDE THE PORTAL ────────────────
   dedicated-flow.css picks the role grid's columns by WINDOW width: two columns
   up to 480px, one at 360px. Inside the portal a 390px phone leaves the Talent
   card 294px wide, so it still asked for two columns, and two role cards cannot
   be narrower than their longest word ("Implementation", "Representative"), so
   the grid came out 340px wide in a 267px space and the right-hand column ran
   73px off the card. Measured, not estimated. On app.gogorilla.com the 360px rule
   already gives one column at the same card width, so this is the same answer
   keyed off the card instead.
   CORRECTED 18 Sep 2026: a container query reads the card's CONTENT box, the
   card less 27px of padding on phones, so 340px here is a 367px card. That
   includes app.gogorilla.com at 390px, where two columns did fit but wrapped
   "AI Implementation & Training Specialist" over four lines; one column reads
   better there and was checked on screen, so the threshold stays. ── */
@container (max-width: 340px) {
  .gg-scope .df-role-grid{ grid-template-columns: minmax(0, 1fr); }
}


/* ── 3. "WHICH CLIENTS DOES THIS SERVICE WORK WELL FOR?" RAN OFF THE CARD ─────
   The link under the white-label margin hint is white-space: nowrap (app.v2.css,
   Loom 61). At 320px, and on every phone inside the portal, the line is wider
   than the card and the last word and arrow were cut off at the card edge. On
   narrow cards it may wrap like the sentence above it. ── */
@container (max-width: 520px) {
  .gg-scope .svc-margin__fit-link{ white-space: normal; text-align: left; }
}


/* ── 4. PAID ADS BUDGET TILES: "FOUNDATIONS" RAN UNDER ITS OWN CHECKBOX ───────
   Two tiles a row on a phone leaves about 90px of text width per tile, the
   checkbox sits absolutely in the top right corner, and the label reserves
   1.7rem for it. "FOUNDATIONS" is one word about 93px wide in its tracking, so
   it could not wrap and ran under the box ("FOUNDATI[ ]S"), and the ranges
   broke mid-figure ("£25-" / "50/day"). Measured at 320px (tile 113px) and in
   the portal at 390px (tile 114px). The query reads the card's content box, so
   this covers cards up to about 387px, which is phones up to 414px.
   On narrow cards the checkbox keeps its corner and the text starts beneath it,
   so the label has the tile's full width, and the range holds together. ── */
@container (max-width: 360px) {
  .gg-scope .pa-spend__tile{ padding: 2rem 0.6rem 0.8rem; }
  .gg-scope .pa-spend__tile-label{ padding-right: 0; letter-spacing: 0.04em; }
  .gg-scope .pa-spend__tile-range{ white-space: nowrap; font-size: 0.78rem; letter-spacing: -0.01em; }
}


/* ── 5. QUOTE SUMMARY: THE WAITING LIST PILL SQUEEZED ITS LINE TO THREE ROWS ──
   On a waiting-list line the pill sits where the price would, and it is wider
   than a price, so the service name was squeezed into a column two words wide
   ("Content" / "Creation ·" / "Starter") beside it. When the line is too narrow
   for both, the pill now drops to its own row on the right, where prices sit,
   and the name keeps the full width. A line with room for both is unchanged. ── */
.gg-scope .summary__line--waitlist{ flex-wrap: wrap; row-gap: 4px; }
.gg-scope .summary__line--waitlist .summary__line-label{ flex: 1 1 11rem; min-width: 0; }
.gg-scope .summary__line--waitlist .summary__line-val{ margin-left: auto; }


/* ── 6. "APPLIED SAVINGS" BROKE ONTO TWO LINES ────────────────────────────────
   Its "View available savings" link is nowrap and pushed right, so on a phone
   the heading gave way instead and read "APPLIED" / "SAVINGS", taller than the
   ACCOUNTABILITY DISCOUNT heading in the card below it. The heading now holds
   one line and the link takes the next row, still on the right. ── */
.gg-scope .summary__applied-savings-head{ flex-wrap: wrap; row-gap: 2px; }
.gg-scope .summary__applied-savings-head .summary__heading-link{ white-space: nowrap; }


/* ── 7. "PROPOSALS AND CONTRACTS, PREPARED FOR YOU": HEADING INDENTED BESIDE FREE ─
   The FREE pill and the heading share one flex row. On a phone the heading wraps
   to three lines and every line stays indented past the pill, although the pill
   is only one line tall, which leaves an empty column under it. When the row
   cannot hold the heading at a readable width, the pill now sits above the
   heading like an eyebrow and the heading takes the full width. A row with room
   for both is unchanged. ── */
.gg-scope .free-prep__head{ flex-wrap: wrap; row-gap: 0.35rem; }
.gg-scope .free-prep__title{ flex: 1 1 14rem; min-width: 0; }


/* ── 8. THE PARTNER DISCOUNT BADGE ON "GROWING MY OWN BUSINESS" ─────────────────
   "15% discount available with one active referral or white-label client" is a
   sentence in a 999px capsule. On a phone it wraps to two lines, three inside the
   portal, and fully rounded ends around a block of text read as a stretched,
   broken pill. Below 720px, where the intent cards stack, the badge keeps its
   colours and takes a soft rectangle radius, which is identical to the pill on a
   one-line badge and tidy on a wrapped one. ── */
@media (max-width: 720px) {
  .gg-scope .agency-intent-card__discount{ border-radius: 10px; line-height: 1.45; }
}


/* ═══ ADDED 18 Sep 2026, second pass on the same audit ═══════════════════════ */


/* ── 9. THE FLOATING SCROLL DOT COVERED THE CHECKOUT FORM ON PHONES ───────────
   .scroll-progress-dot is fixed 16px from the bottom right corner on phones.
   On every service step the mobile bar paints over it, so it was already
   invisible there. It only showed on the last step, which has no mobile bar,
   and there it sat on the form as the page scrolled: first name, email,
   company and website inputs, the monthly budget select's chevron, and at the
   bottom the "Your quote is saved in this browser" line. Measured at 360px
   and inside the portal at 390px. A phone has no gutter for it to sit in, and
   thumb scrolling does its job, so it is hidden below 600px, where it was
   already hidden on every other step. Desktop and tablet keep it. ── */
@media (max-width: 600px) {
  .gg-scope .scroll-progress-dot{ display: none; }
}


/* ── 10. SUMMARY TOTALS: LABELS BROKE ACROSS TWO LINES BESIDE THEIR FIGURES ────
   Each totals row is label left, figure right, on one line that never wraps.
   Inside the portal the totals card is 246px wide (214px of row), so the label
   gave way: "MONTHLY TOTAL" over two lines beside a large figure, "NET PROFIT
   (MONTHLY)" in two lines beside "Set your prices", and "NET PROFIT (ONE-OFF)"
   with its info icon pushed onto a line of its own. Natural widths measured:
   168px for the monthly profit label plus its icon against 90px for the link.
   Labels now keep one line, and when label and figure cannot share the row the
   figure drops to its own line on the right, where figures sit. A row with room
   for both, which is every desktop sidebar, looks exactly as before. ── */
.gg-scope .summary__total .summary__total-row,
.gg-scope .summary__total .summary__total-row--setup-fees{ flex-wrap: wrap; row-gap: 2px; }
.gg-scope .summary__total .summary__total-label,
.gg-scope .summary__total .summary__total-label--setup-fees{ flex-wrap: nowrap; }
.gg-scope .summary__total .summary__total-label > span:first-child{ white-space: nowrap; }
.gg-scope .summary__total .summary__total-row > .summary__total-val{ margin-left: auto; }


/* ── 11. CHANNEL PICKER: ONE ICON LEFT ALONE ON A ROW ───────────────────────────
   The channel tiles are 60px squares in a wrapping row, so the count per row is
   whatever fits. On phones that left a lone tile: five channels as 4 + 1 at
   360px (LinkedIn on its own), six as 5 + 1 on a 430px phone, and inside the
   portal four channels as 3 + 1. Keyed off the card (the .svc container) in the
   bands where each happens. A container query reads the card's CONTENT box,
   the card less 27px of padding on phones, and the tile grid is that less
   another 31px, so 3, 4, 5 and 6 tiles a row need content widths of 230, 300,
   369.5 and 439px. Measured, not estimated. Each band picks a column count that
   leaves no row of one. Wider cards, including desktop, are unchanged. ── */
@container (min-width: 230px) and (max-width: 299px) {
  .gg-scope .channels-panel__grid:has(> :nth-child(4):last-child){ display: grid; grid-template-columns: repeat(2, 60px); }
}
@container (min-width: 300px) and (max-width: 369px) {
  .gg-scope .channels-panel__grid:has(> :nth-child(5):last-child),
  .gg-scope .channels-panel__grid:has(> :nth-child(9):last-child){ display: grid; grid-template-columns: repeat(3, 60px); }
}
@container (min-width: 300px) and (max-width: 438px) {
  .gg-scope .channels-panel__grid:has(> :nth-child(6):last-child){ display: grid; grid-template-columns: repeat(3, 60px); }
}