/* pd.cash public-page layer. Loaded after pd-responsive-fixes on all 25 public pages.
   2026-10-10 consolidation: sections 1-23 from 10-08..10-10 merged into one ordered file.
   Rules: one section rhythm, left-aligned section heads (closing call-to-action card stays centred),
   dark surfaces only, no decoration for its own sake. Page-specific fixes are at the end. */

/* ---------- 1. Global ---------- */

/* Page-to-page crossfade (same-origin navigations, Chromium/Safari 18+) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

/* No decoration for its own sake: glow layer, cursor aura, glowing scroll bar, blur blobs,
   shimmer word, green glows, orbit rings, floating/breathing animations, sheen, tilt, spotlights */
:has(> #aura), #prog { display: none !important; }
.absolute.rounded-full[class*=" blur-"] { display: none !important; }
.shine { background: none !important; -webkit-text-fill-color: currentColor; color: inherit !important; }
.shadow-green-sm, .shadow-green-md, .shadow-green-lg { --tw-shadow: 0 0 #0000 !important; }
.btn-green, .btn-green:hover, .orbit-dot, .pp-final, [class*="shadow-[0_0_12px"] { box-shadow: none !important; }
.pdig-glow, .orbit { display: none !important; }
.animate-float, .animate-breathe, .animate-gridpan, .animate-shimmer, .animate-spinslow, .animate-spinrev { animation: none !important; }
body .btn-green:after, body .btn-outline:before { content: none; }
body .card, body .card:hover { transform: none; box-shadow: none; }
body .card:before, body .card:after { content: none; }
body .card:not(a):not(:has(a)):hover { border-color: hsla(0,0%,100%,.08); }

/* Reveal: fade + short slide, no blur; never leaves content hidden (print, previews, stalled observer) */
@keyframes revealIn { 0% { transform: translateY(12px); } to { transform: none; } }
@keyframes pdRevealFailsafe { to { opacity: 1; transform: none; } }
body .reveal { filter: none; }
body .reveal:not(.in) { transform: translateY(12px); animation: pdRevealFailsafe .6s ease 2.5s forwards; }
@media print { body .reveal { opacity: 1 !important; transform: none !important; animation: none; } }

/* Readability and tap size: nothing under 12px, dim small text brightened, 48px pills */
body .text-\[10px\]:not(svg), body .text-\[11px\]:not(svg), body span.text-\[11\.5px\] { font-size: 12px; }
@media (min-width: 640px) { body .sm\:text-\[11px\]:not(svg) { font-size: 12px; } }
body :is(.text-\[11px\], .text-\[12px\], .text-\[13px\]):is(.text-white\/40, .text-white\/45, .text-white\/50, .text-white\/55) { color: rgba(255,255,255,.7); }
footer .pd-motion-foot, body #pdMotionSkip { min-height: 44px; }
footer .pd-motion-foot { display: inline-flex; align-items: center; }
main pre { font-size: 12.5px; }
@media (max-width: 639px) { main pre { white-space: pre-wrap; overflow-wrap: anywhere; } }

/* ---------- 2. Type ---------- */

main h1.display { text-wrap: balance; }
main h2.display { line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
main .display-2 { line-height: 1.2; }

/* One h2 scale: solution pages use the homepage size */
main h2.display[class~="text-[1.9rem]"][class~="lg:text-[2.7rem]"],
main h2.display[class~="text-[2rem]"][class~="sm:text-[2.6rem]"] { font-size: 2.1rem; }
@media (min-width: 640px) {
  main h2.display[class~="text-[1.9rem]"][class~="lg:text-[2.7rem]"],
  main h2.display[class~="text-[2rem]"][class~="sm:text-[2.6rem]"],
  main .shadow-green-lg h2.display[class~="sm:text-4xl"] { font-size: 3rem; }
}
@media (min-width: 1024px) {
  main h2.display[class~="text-[1.9rem]"][class~="lg:text-[2.7rem]"],
  main h2.display[class~="text-[2rem]"][class~="sm:text-[2.6rem]"],
  main .shadow-green-lg h2.display[class~="sm:text-4xl"] { font-size: 3.2rem; }
}

/* Section labels: only the hero keeps one; no numbered chips, no mono label above any other h2 */
main span.mr-3.inline-flex.h-6.rounded-full.font-mono { display: none; }
main .font-mono.uppercase:has(+ h2) { display: none !important; }
main > section:not(:first-child) :is(.reveal, .reveal-now) > span:is(.font-mono.uppercase, :has(> .font-mono.uppercase)):has(+ h2) { display: none; }
main > section:not(:first-child) :is(.reveal, .reveal-now) > span:is(.font-mono.uppercase, :has(> .font-mono.uppercase)) + h2 { margin-top: 0; }

/* ---------- 3. Layout rhythm ---------- */

/* Phones: content sections 80px top and bottom */
main > section.relative.py-16:not(.border-t):not(#verticals) { padding-top: 5rem; padding-bottom: 5rem; }
main > section#product { padding-top: 5rem; }

/* 640+: every content section 96px (was 96 on home, 112 on solution pages, 64 on plugin docs, 0 under the home dashboard).
   Legal, contact and /pricing keep their own document rhythm; the closing call-to-action keeps its top. */
@media (min-width: 640px) {
  main:not(:has(details.toc, #onboarding-form, .pp)) > section:not(:first-child) { padding-bottom: 96px; }
  main:not(:has(details.toc, #onboarding-form, .pp)) > section:not(:first-child):not(:last-child) { padding-top: 96px; }
}
main > section.relative.py-20:has(> div > .reveal.rounded-5xl.shadow-green-lg) { padding-top: 0; }

/* Section heads: left-aligned on the content edge everywhere, FAQ included.
   The closing call-to-action card (last section) stays centred. */
main > section:not(:first-child):not(:last-child) .mx-auto.text-center:is(.max-w-xl, .max-w-2xl, .max-w-3xl) { margin-left: 0; text-align: left; }
main > section:not(:first-child):not(:last-child) .mx-auto.text-center:is(.max-w-xl, .max-w-2xl, .max-w-3xl) .mx-auto { margin-left: 0; }
main > section:not(:first-child):not(:last-child) .mx-auto.text-center:is(.max-w-xl, .max-w-2xl, .max-w-3xl) .justify-center { justify-content: flex-start; }
main > section:not(:first-child):not(:last-child) .mx-auto:is(.max-w-3xl, .max-w-4xl):has(> details, > .reveal > details, .faq-q) { margin-left: 0; }
main > section:not(:first-child):not(:last-child) > div > .reveal.text-center:has(> a.pill) { text-align: left; }
main > section:not(:first-child):not(:last-child) > div > .reveal.text-center:has(> a.pill) > .mx-auto { margin-left: 0; }
main > section:not(:first-child):not(:last-child) > div > .flex.justify-center:has(> a.pill) { justify-content: flex-start; }
/* One content width: narrow centred containers (WordPress plans table, version card) join the edge */
main > section:not(:first-child):not(:last-child) > .mx-auto.max-w-5xl { max-width: 80rem; }
main > section:not(:first-child):not(:last-child) > div > p.reveal.text-center { text-align: left; }
main > section:not(:first-child):not(:last-child) > div > .card.mx-auto { margin-left: 0; }
@media (min-width: 1024px) { main .reveal.mx-auto.text-center.max-w-2xl { max-width: 48rem; } }

/* ---------- 4. Components ---------- */

/* Pills: one line, 48px, two-button groups stack full width on phones */
main a.pill { min-height: 48px; white-space: nowrap; }
main a.pill:not([class*="flex"]) { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 639px) {
  main .flex:has(> a.pill + a.pill) { flex-direction: column; align-items: stretch; }
  main .flex:has(> a.pill + a.pill) > a.pill { width: 100%; justify-content: center; padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 640px) { main .flex:has(> a.pill + a.pill) { flex-wrap: wrap; } }

/* Icon cards: compact, icon-left on phones (one-line items were ~290px tall each) */
@media (max-width: 639px) {
  main .grid > article.card.p-7 { padding: 1.25rem 1.35rem; }
  main .grid > article.card > a.mt-6 { margin-top: .9rem; }
  main .grid > article.card:has(> span.mb-6:first-child) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 20px; }
  main .grid > article.card > span.mb-6:first-child { grid-row: span 3; margin-bottom: 0; height: 2.25rem; width: 2.25rem; }
  main .grid > article.card:has(> span.mb-6:first-child) > :not(:first-child) { grid-column: 2; margin-top: 0; }
  main .grid > article.card:has(> span.mb-6:first-child) > :nth-child(n+3) { margin-top: .5rem; }
  main .grid > article.card:has(> span.mb-6:first-child) > a { justify-self: start; }
}

/* Features add-on grid: 11 cards in 3 columns leave a hole; last card spans it */
@media (min-width: 1024px) {
  main .grid[class~="lg:grid-cols-3"] > article.card:last-child:nth-child(3n+2) { grid-column: span 2; }
}

/* "Keep reading" cards: even excerpts */
main section.border-t article p.flex-1[class~="text-[14px]"],
main section.border-t a p.flex-1[class~="text-[14px]"] {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Step markers: 4 matches 1-3 */
main ol > li > span.z-10.bg-cash-green { border: 1px solid rgba(54,210,64,.4); background: #000; color: #36d240; box-shadow: none; }

/* Related-policies nav (legal pages) */
main .pd-related ul { display: grid; gap: 4px 32px; margin-top: 12px; }
@media (min-width: 640px) { main .pd-related ul { grid-template-columns: 1fr 1fr; } }
main .pd-related a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 4px; }
main .pd-related a:hover { color: #36d240; }

/* Footer: two link columns on phones instead of one ~2,500px stack */
@media (max-width: 767px) {
  footer .grid.md\:grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 2.5rem; }
  footer .grid.md\:grid-cols-5 > :first-child { grid-column: 1 / -1; }
}

/* Bottom sign-up bar stays off legal pages (it covered the policy text) */
body:has(details.toc) #mobileCta { display: none; }

/* ---------- 5. Home ---------- */

/* Hero: copy left, checkout mock right, vertically centred. The typing API panel and the floating
   webhook badge stacked a second 300px block under the phone (empty block beside the copy, panel cut
   off mid-word, blank panel on phones). The API demo lives on /cash-app-api and in "Three ways to connect". */
main > section:first-child #codePanel,
main > section:first-child .reveal-now.relative > .absolute.animate-float { display: none; }
main > section:first-child .reveal-now.relative p.sm\:text-right { text-align: center; padding-right: 0; }
@media (min-width: 1024px) {
  main > section:first-child .grid[class~="lg:grid-cols-[1.05fr_1fr]"] { align-items: center; }
}

/* Pricing band: dark surface like every other section (was a full-bleed bright green block) */
main > section#pricing { background: #0a0b0a; color: #fff; border-top: 1px solid hsla(0,0%,100%,.07); }
main > section#pricing > .pointer-events-none.absolute { display: none; }
#pricing .text-black { color: #fff; }
#pricing :is(.text-black\/75, .text-black\/70, .text-black\/65) { color: rgba(255,255,255,.7); }
#pricing :is(.border-black\/15, .border-black\/25) { border-color: hsla(0,0%,100%,.1); }
#pricing :is(.border-black\/80, .border-black\/40) { border-color: hsla(0,0%,100%,.25); }
#pricing .hover\:border-black:hover { border-color: hsla(0,0%,100%,.45); }
#pricing :is(.bg-black\/\[0\.04\], .bg-black\/\[\.06\], .bg-black\/\[0\.07\]) { background-color: hsla(0,0%,100%,.03); }
#pricing :is(.hover\:bg-black\/10, .hover\:bg-black\/\[\.11\]):hover { background-color: hsla(0,0%,100%,.06); }
#pricing .bg-black { border: 1px solid hsla(0,0%,100%,.1); }
#pricing a:not(.pill) { color: #36d240; }
/* ...on the site content edge, left-aligned like the sections around it (was a narrower centred column) */
main > section#pricing > .relative.mx-auto { max-width: 80rem; }
#pricing > .relative .text-center { text-align: left; }
#pricing > .relative .mx-auto { margin-left: 0; }
#pricing > .relative .justify-center { justify-content: flex-start; }

/* Signup steps: button at its own width beside the note (was stretched to half the page) */
@media (min-width: 640px) {
  #onboarding .reveal.flex:has(> a.pill) { justify-content: flex-start; gap: 1.5rem; }
  #onboarding .reveal.flex > a.pill { flex: none; width: auto; }
  #onboarding .reveal.flex > a.pill + p { flex: 0 1 34rem; text-align: left; }
}

/* ---------- 6. Other pages ---------- */

/* Fee calculator: site radii; phones get a 2-column plan picker instead of a clipped scroller */
body .pdc-section a.pdc-cta { border-radius: 9999px; }
body .pdc-plan { border-radius: 1.5rem; }
body .pdc-card, body .pdc-result { border-radius: 2rem; }
@media (max-width: 639px) {
  body .pdc-plans { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; margin: 0 0 1rem; padding: 0; }
  body .pdc-plans > .pdc-plan:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}

/* /pricing document view on the site type scale */
body .pp { padding-top: 3.5rem; }
body .pp h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.04; }
body .pp h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.025em; margin-top: 3.5rem; }
body .pp h2.pdc-h2 { margin-top: 0; }
body .pp .pp-card { border-radius: 1.5rem; background: linear-gradient(180deg, #121412, #0a0b0a); border-color: hsla(0,0%,100%,.08); }
body .pp .pp-table { border-radius: 1.5rem; }
body .pp details.pp-card > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
body .pp details.pp-card > summary::-webkit-details-marker { display: none; }
body .pp details.pp-card > summary::after { content: "+"; color: #36d240; font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform .25s; }
body .pp details.pp-card[open] > summary::after { transform: rotate(45deg); }
body .pp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
body .pp a.pill { color: inherit; text-decoration: none; }
body .pp a.pill.btn-green, body .pp a.pill.btn-green:hover { color: #04180a; }
body .pp a.pill.btn-outline, body .pp a.pill.btn-outline:hover { color: #fff; }
body .pp-final { margin-top: 4.5rem; text-align: center; border: 1px solid hsla(0,0%,100%,.1); border-radius: 2.5rem; background: #0a0b0a; padding: 3.5rem 1.5rem; }
body .pp .pp-final h2 { margin-top: 0; }
body .pp-final .pp-actions { justify-content: center; }
@media (max-width: 639px) {
  .pp-actions { flex-direction: column; }
  .pp-actions > a.pill { width: 100%; justify-content: center; }
}

/* Legal pages: hero aligned with the article column, TOC as a site label with an active state */
main:has(details.toc) > section:first-of-type { padding-top: 2rem; padding-bottom: 2.5rem; }
@media (min-width: 640px) { main:has(details.toc) > section:first-of-type { padding-top: 3.5rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) {
  main:has(details.toc) > section:first-of-type > .max-w-4xl { max-width: 80rem; text-align: left; padding-left: calc(2rem + 260px + 3.5rem); }
  aside:has(> details.toc) { max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: thin; }
  .toc .toc-nav { max-height: none; overflow: visible; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .toc > summary { cursor: pointer; pointer-events: auto; min-height: 44px; }
  .toc > summary .toc-chev { display: inline-block; }
}
.toc .toc-summary { font-family: "JetBrains Mono", ui-monospace, monospace; color: #36d240; letter-spacing: .28em; }
.toc .toc-link { white-space: normal; overflow: visible; text-overflow: clip; border-radius: .6rem; padding-left: .75rem; box-shadow: inset 2px 0 0 transparent; transition: color .2s, box-shadow .2s, background-color .2s; }
.toc .toc-link[aria-current="true"] { color: #36d240; background: rgba(54,210,64,.06); box-shadow: inset 2px 0 0 #36d240; }
main article p.pd-meta { margin-top: 0; font-size: 14px; color: rgba(255,255,255,.6); font-family: inherit; text-transform: none; letter-spacing: normal; }
main article p.pd-meta + p.pd-meta { margin-top: .35rem; }
main article .pd-callout { margin-top: 2.5rem; border: 1px solid rgba(54,210,64,.25); border-radius: 1.5rem; background: rgba(54,210,64,.05); padding: 1.5rem 1.6rem; }
main article .pd-callout > h2 { margin-top: 0; font-size: 1.15rem; }

/* iGaming diagrams: readable label size on phones (horizontal scroll) */
@media (max-width: 639px) {
  main .pdig-svg { min-width: 820px; }
  main .pdig-svg.pdig-svg-sm { min-width: 600px; }
}

/* WordPress plugin maintenance blocks: site gutter and radii */
@media (max-width: 639px) { main .wp-maintenance > .mx-auto { padding-left: 1.25rem; padding-right: 1.25rem; } }
main .wp-maintenance__steps li, main .wp-maintenance__evidence { border-radius: 1.5rem; }
main aside.wp-maintenance__update { border-radius: 1.5rem; border: 1px solid rgba(54,210,64,.25); }

/* Contact on phones: form starts sooner; safety note at note size */
@media (max-width: 639px) {
  main:has(#onboarding-form) > section:first-child { padding-bottom: 1.5rem; }
  main:has(#onboarding-form) > section:nth-child(2) { padding-top: 1.5rem; }
}
main #onboarding-form p.mt-4 { font-size: 14px; }

/* ---------- 7. Viewport fixes ---------- */

/* lg 1024-1279: hero copy column wider so the h1 does not wrap to 4 lines */
@media (min-width: 1024px) and (max-width: 1279px) {
  main .grid[class~="lg:grid-cols-[1.1fr_1fr]"] { grid-template-columns: 1.35fr 1fr; column-gap: 2.5rem; }
}

/* 320-359px: hero feature pills push the main button off the first screen */
@media (max-width: 359px) { main .reveal-now > .mt-7.flex.flex-wrap.gap-2 { display: none; } }

/* Phone landscape: header, breadcrumb and hero fit one short screen; no bottom bar */
@media (orientation: landscape) and (max-height: 500px) {
  #navShell { height: 52px; margin-top: 6px; }
  nav[aria-label="Breadcrumb"] > ol { padding-top: 4.25rem; padding-bottom: .5rem; }
  main > section:first-child { padding-top: 4.75rem; padding-bottom: 2.5rem; }
  nav[aria-label="Breadcrumb"] ~ main > section:first-child { padding-top: 1.5rem; }
  main > section:first-child h1.display { font-size: 2rem; }
  main > section:first-child h1.display + p { margin-top: 1rem; }
  main > section:first-child .mt-9 { margin-top: 1.5rem; }
  main > section.min-h-\[70vh\] { min-height: 0; }
  main .reveal-now > .mt-7.flex.flex-wrap.gap-2 { display: none; }
  body #mobileCta { display: none; }
}