/* The post-payment screen, 18 September 2026 (src/post-payment.js). Layout glue and the
   money block only. The container is .client-section-card, the columns .lp3__grid and
   .lp3__rail, the cards .lp3__card.glass-frame, the steps .lp3__steps, the receipt card
   .lp3__host, the type .lp2__*, the buttons .btn--*, all from app.v2.css. No background here:
   the page's own grain shows through. Nothing below the fold at 1280 by 800. */
html.gg-pp-on #root { display: none; }
.gg-scope.gg-pp { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 22px 18px 24px; box-sizing: border-box; min-height: 100vh; }
.gg-scope.gg-pp .gg-pp__wordmark { height: 32px; width: auto; display: block; margin: 0 0 16px; }
.gg-scope.gg-pp .gg-pp__inner { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 22px; max-width: none; margin: 0; }
.gg-scope.gg-pp .lp2__eyebrow { margin-bottom: 4px; }
.gg-scope.gg-pp .lp2__h1 { margin-bottom: 6px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.gg-scope.gg-pp .lp2__lede { margin-bottom: 4px; max-width: none; } /* was 70ch: it wrapped at 1280 with room to its right (Nicole, 18 Sep) */
.gg-scope.gg-pp .gg-pp__grid { margin-top: 4px; }
.gg-scope.gg-pp .gg-pp__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; }
/* The money card grows to meet the bottom of the rail, so the panel has no dead band under the buttons (Nicole, 18 Sep). */
.gg-scope.gg-pp .gg-pp__main > .gg-pp__card { flex: 1 1 auto; }
.gg-scope.gg-pp .gg-pp__card { display: flex; flex-direction: column; }
.gg-scope.gg-pp .gg-pp__card .lp3__card-h { margin-bottom: 8px; }
/* The money block, the quote email's hierarchy (api/send-quote.js): label small and blue, the
   figure big and blue with the unit muted, the one-time figure beside it in ink. */
.gg-scope.gg-pp .gg-pp__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 2px 0 8px; }
.gg-scope.gg-pp .gg-pp__money { display: flex; flex-direction: column; gap: 2px; }
.gg-scope.gg-pp .gg-pp__money + .gg-pp__money { border-left: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 16%, transparent); padding-left: 16px; }
.gg-scope.gg-pp .gg-pp__money-l { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gg-blue, #002ABF); }
.gg-scope.gg-pp .gg-pp__money + .gg-pp__money .gg-pp__money-l { color: #6B7590; }
.gg-scope.gg-pp .gg-pp__money-v { font-size: 1.6rem; font-weight: 800; color: var(--gg-heading, #111111); white-space: nowrap; line-height: 1.2; }
.gg-scope.gg-pp .gg-pp__money--big .gg-pp__money-v { font-size: clamp(1.9rem, 3.2vw, 2.4rem); color: var(--gg-blue, #002ABF); line-height: 1; }
.gg-scope.gg-pp .gg-pp__money-u { font-size: 0.5em; font-weight: 700; color: #6B7590; margin-left: 4px; }
.gg-scope.gg-pp .gg-pp__discount { font-size: 0.9rem; font-weight: 700; color: #0F7A3E; padding: 4px 0; }
.gg-scope.gg-pp .gg-pp__lines { list-style: none; margin: 4px 0 0; padding: 0; }
.gg-scope.gg-pp .gg-pp__line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 0.92rem; color: var(--gg-body, #3A3A3A); border-top: 1px solid rgba(15, 28, 53, 0.07); }
.gg-scope.gg-pp .gg-pp__line--sub .gg-pp__line-l { padding-left: 1.1em; }
.gg-scope.gg-pp .gg-pp__line-v { font-weight: 700; color: var(--gg-heading, #111111); white-space: nowrap; }
.gg-scope.gg-pp .gg-pp__line-v--free { color: #0F7A3E; }
.gg-scope.gg-pp .gg-pp__noplan { margin: 0 0 6px; }
/* The foot of the money card (Nicole 18 Sept 21:2x): pinned to the bottom so it fills what the
   card grows into, a rule above it, the text left and the link right. The link is a plain blue
   hyperlink, underlined only on hover and only its words; the arrow sits outside the underline
   and moves on hover, the pricing link's arrow pattern (.svc__pricing-link-arrow) without the pill. */
/* The foot is the house metal banner (.alert--metal from app.v2.css, the concrete fill and the
   brass frame, .alert from app.css for the flex row); these lines only pin it to the card's
   bottom and undo .alert's own margins. Was: a rule above a plain row (Nicole, 21:4x). */
.gg-scope.gg-pp .gg-pp__foot { margin: auto 0 0; padding: 14px 16px; align-items: center; gap: 14px; flex-wrap: wrap; }
.gg-scope.gg-pp .gg-pp__foot .alert__icon img { height: 2rem; }
.gg-scope.gg-pp .gg-pp__foot-text { flex: 1 1 240px; min-width: 0; } /* was 1 1 0: at 375 the text ran one word a line beside the nowrap link (built-in browser, 21:5x) */
.gg-scope.gg-pp .gg-pp__foot-t { margin: 0 0 2px; font-size: 0.95rem; font-weight: 800; color: var(--gg-heading, #111111); }
.gg-scope.gg-pp .gg-pp__foot-d { margin: 0; font-size: 0.88rem; color: var(--gg-body, #3A3A3A); max-width: 60ch; }
.gg-scope.gg-pp .gg-pp__link { display: inline-flex; align-items: center; gap: 6px; color: var(--gg-blue, #002ABF); font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.gg-scope.gg-pp .gg-pp__link:hover .gg-pp__link-t, .gg-scope.gg-pp .gg-pp__link:focus-visible .gg-pp__link-t { text-decoration: underline; text-underline-offset: 3px; }
.gg-scope.gg-pp .gg-pp__link-arrow { display: inline-block; opacity: 0.75; transition: transform 0.15s ease, opacity 0.15s ease; }
.gg-scope.gg-pp .gg-pp__link:hover .gg-pp__link-arrow, .gg-scope.gg-pp .gg-pp__link:focus-visible .gg-pp__link-arrow { opacity: 1; transform: translateX(4px); }
.gg-scope.gg-pp .gg-pp__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } /* was left-aligned; Nicole 18 Sept 21:2x: to the right */
.gg-scope.gg-pp .gg-pp__portal { justify-content: center; text-decoration: none; } /* was flex-grow: 1, which stretched the button across the column (Nicole, 18 Sep) */
.gg-scope.gg-pp.gg-pp--reading .lp2__lede { margin: 0; }
@media (max-width: 980px) {
  .gg-scope.gg-pp .lp3__rail { order: 2; }
  .gg-scope.gg-pp .gg-pp__main { order: 1; }
}
@media (max-width: 480px) {
  .gg-scope.gg-pp .gg-pp__inner { padding: 1.25rem 1rem; }
  .gg-scope.gg-pp .gg-pp__totals { grid-template-columns: 1fr; }
  .gg-scope.gg-pp .gg-pp__money + .gg-pp__money { border-left: 0; padding-left: 0; border-top: 1px solid rgba(15, 28, 53, 0.08); padding-top: 8px; }
  .gg-scope.gg-pp .gg-pp__portal, .gg-scope.gg-pp .gg-pp__back { width: 100%; justify-content: center; }
  .gg-scope.gg-pp .gg-pp__link { flex: 0 0 100%; padding-left: calc(2rem + 14px); } /* its own row, aligned with the text past the icon */
}