/* ==============================================================
   DREAM PAYOUTS — STEP 9 / 97+ FINAL POLISH
   Typography, accessibility, responsiveness, performance, and QA.
   Loaded last so it can refine the complete design system safely.
   ============================================================== */
:root{
  --muted:#64748b;
  --dp-focus:#155eef;
  --dp-focus-ring:0 0 0 3px #fff,0 0 0 6px rgba(21,94,239,.9);
  --dp-reading:68ch;
  --dp-section-space:clamp(72px,8vw,112px);
  --dp-card-shadow:0 10px 30px rgba(6,26,58,.055);
  --dp-card-shadow-hover:0 22px 54px rgba(6,26,58,.10);
}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{font-size:16px;font-synthesis:none;text-rendering:optimizeLegibility}
main{isolation:isolate}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
p{max-width:var(--dp-reading)}
.section{padding-block:var(--dp-section-space)}
.section-head{margin-bottom:clamp(34px,5vw,56px)}
.section-head p,.page-hero .lead{max-width:62ch}

/* Strong, consistent keyboard affordance. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--dp-focus)!important;
  outline-offset:3px!important;
  box-shadow:var(--dp-focus-ring)!important;
}
.skip-link:focus-visible{outline-color:#fff!important;box-shadow:0 0 0 3px var(--navy),0 0 0 6px #fff!important}

/* Header clarity and calm. */
.site-header{box-shadow:0 1px 0 rgba(7,26,61,.03);transition:box-shadow .22s ease,background .22s ease}
body[data-scrolled="true"] .site-header{background:rgba(255,255,255,.975);box-shadow:0 12px 36px rgba(6,26,58,.075)}
.nav-links a{position:relative}
.nav-links a.active,.nav-links a[aria-current="page"]{background:transparent;color:var(--dream-cobalt)}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:99px;background:var(--dream-thread)
}
.mobile-panel{visibility:hidden;pointer-events:none;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.mobile-panel.open{visibility:visible;pointer-events:auto}
.mobile-panel a{min-height:52px;display:flex;align-items:center}
.menu-btn{touch-action:manipulation}

/* Buttons: meaningful feedback without visual noise. */
.btn,.text-link,.faq-q,.menu-btn{touch-action:manipulation}
.btn{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn:active{transform:translateY(1px) scale(.992)}
.text-link{min-height:44px}
@media(hover:hover) and (pointer:fine){
  .card{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease}
  .card:hover{transform:translateY(-2px);box-shadow:var(--dp-card-shadow-hover)}
}
@media(hover:none){.card:hover{transform:none!important}}

/* Cards and product UI: sharper hierarchy, more legible demonstrations. */
.card{box-shadow:var(--dp-card-shadow)}
.product-window,.mini-ui,.platform-ui,.pt-screenshot{box-shadow:0 16px 44px rgba(6,26,58,.085)}
.product-window{background:#fff}
.product-window :where(.fake-input,.choice,.method,.table-row){font-variant-numeric:tabular-nums}
.product-window button{min-height:44px}
.status.good,.status-stage.delivered{font-weight:850}

/* Images keep intended crops and stable layout. */
.hero-media>img,.editorial-image,.image-card img,.solution-card img,.industry-card img{background:#eef3fa}
.hero-media>img{object-position:center 42%}
img[loading="lazy"]{content-visibility:auto}

/* Forms: more trustworthy and accessible. */
input,select,textarea{color:var(--navy);background:#fff;border-color:#cbd9e8}
input::placeholder,textarea::placeholder{color:#7d8ca1;opacity:1}
input:hover,select:hover,textarea:hover{border-color:#9fb5d3}
input:focus,select:focus,textarea:focus{border-color:var(--dream-cobalt)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:#c73b4d;background:#fffafb}
.form-success,.form-message,[data-form-status]{font-weight:650}
.form-success.show,.form-message.show,[data-form-status].show{padding:12px 14px;border-radius:10px;background:#eefbf5;color:#08734a;border:1px solid #bfe9d5}

/* FAQ answers stay readable and do not clip. */
.faq-q{min-height:56px}
.faq-a p{max-width:76ch}
.faq-item.open .faq-a{max-height:800px}

/* Pricing and banking disclosures: visible, calm, not fine-print camouflage. */
.cc-trust-disclosure,.dp-legal-disclosure{font-size:12px;line-height:1.65;color:#53647b;background:#f7faff;border:1px solid #dfe8f5;border-radius:12px;padding:14px 16px}
.dp-last-updated{font-size:13px;color:var(--muted);margin-top:8px}

/* Section index is useful on desktop, invisible to touch-first layouts. */
.dp-section-index a{min-width:8px;min-height:8px}
@media(pointer:coarse){.dp-section-index{display:none!important}}

/* Footer rhythm and legal-link clarity. */
.site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.footer-col a{min-height:30px;display:flex;align-items:center}
.footer-bottom{line-height:1.6}

/* Tablet: prevent crowded split layouts and overly tall hero compositions. */
@media(max-width:1080px){
  .page-hero{padding-block:clamp(46px,7vw,68px)}
  body.dp-secondary-page .page-hero{min-height:auto}
  .hero-grid{gap:36px}
  .footer-grid{gap:28px}
}
@media(max-width:900px){
  .section{padding-block:clamp(64px,9vw,88px)}
  .hero-media:not(.product-only)>img{height:340px}
  .dp-page-rail-wrap{position:relative;z-index:3}
}

/* Mobile: clearer hierarchy, proper touch sizes, no horizontal clipping. */
@media(max-width:760px){
  html{scroll-padding-top:82px}
  body{font-size:16px}
  h1{line-height:1.035;letter-spacing:-.045em}
  h2{font-size:clamp(32px,9vw,42px);line-height:1.08}
  h3{font-size:19px}
  .lead{font-size:17px;line-height:1.65}
  .section{padding-block:64px}
  .section-head{text-align:left;margin-bottom:34px}
  .section-head .lead{margin-left:0}
  .page-hero{text-align:left}
  .page-hero .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .page-hero .actions .btn{width:100%}
  .hero-proof{font-size:13px}
  .hero-media:not(.product-only)>img{height:280px;border-radius:20px}
  .product-window,.card,.mini-ui,.platform-ui{border-radius:16px}
  .product-window{overflow:hidden}
  .cta{padding-block:64px}
  .cta-shell{border-radius:22px}
  .footer-grid{gap:22px}
  .footer-col a{min-height:40px}
  .cc-mobile-cta{padding-inline:12px}
  .dp-early-access-banner{border-radius:16px}
  .dp-page-rail-intro b{font-size:17px}
}
@media(max-width:430px){
  .eyebrow{font-size:10px;letter-spacing:.055em;padding-block:6px}
  .brand{gap:7px}
  .header-actions{gap:6px}
  .site-header .header-actions .btn,.site-header .menu-btn{width:42px;min-width:42px;height:42px;min-height:42px}
  .page-hero{padding-top:30px}
  .hero-media:not(.product-only)>img{height:250px}
  .card-pad{padding:21px}
  .cta-shell{padding:32px 20px}
}

/* High-contrast and forced-colour resilience. */
@media(prefers-contrast:more){
  :root{--line:#b8c9df;--body:#233550;--muted:#4e6078}
  .card,.product-window,input,select,textarea{border-width:2px}
  .muted{color:#465970}
}
@media(forced-colors:active){
  .blue,.blue-text,.dream-sweep{color:LinkText!important}
  .blue::after,.blue-text::after,.dream-sweep::after,.brand::after,.benefit-icon::after,.trust-icon::after,.icon-box::after{display:none!important}
  .btn{border:1px solid ButtonText}
}

/* Print / PDF: remove sticky and interactive chrome. */
@media print{
  .site-header,.mobile-panel,.cc-mobile-cta,.dp-section-index,.site-footer,.page-progress{display:none!important}
  body{padding:0!important;color:#000;background:#fff}
  main{overflow:visible!important}
  .section,.page-hero{padding:30px 0!important;content-visibility:visible!important}
  .card,.product-window{box-shadow:none!important;break-inside:avoid}
  a{text-decoration:underline}
}

@media(prefers-reduced-motion:reduce){
  .btn:active{transform:none}
  .mobile-panel{transition:none!important}
}

/* WCAG 2.2 target-size refinements for compact product and utility controls. */
.pt-btn,.btn-link,.fallback-replay{min-height:44px;display:inline-flex;align-items:center}
.field-wrap input,.field-wrap select{min-height:48px}.field-wrap textarea{min-height:140px}
.comparison{scrollbar-width:thin;scrollbar-color:#a8bad2 #eef3f9;overscroll-behavior-inline:contain}
.comparison:focus-visible{outline:3px solid var(--dp-focus)!important;outline-offset:4px!important}
.dp-section-index a{width:24px!important;height:24px!important;min-width:24px;min-height:24px;background:transparent!important;display:grid;place-items:center}
.dp-section-index a::before{content:"";width:8px;height:8px;border-radius:50%;background:#cbd8e9;transition:.25s ease}
.dp-section-index a.active{height:24px!important;background:transparent!important}
.dp-section-index a.active::before{width:8px;height:18px;border-radius:999px;background:linear-gradient(180deg,var(--dp-page-accent),var(--dp-page-mint))}
.dp-section-index a::after{right:28px}