/* Isolated visual test: Como funciona through footer only.
   Test 4 separates the observed platform headline and matte secondary treatments.
   No full-page light overlays, brushed textures, filters, or added motion. */
.bp-lower,.ux-footer{
 --bp-blue:#159BFF;--bp-cyan:#00E5FF;
 --bp-silver:linear-gradient(104deg,#F7F8FA 0%,#9CA2AC 22%,#FFFFFF 43%,#AAB0B9 66%,#E7E9ED 100%);
 --bp-heading-font:"Inter Tight",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
/* Keep the existing soft entry below the metrics, then the exact platform field. */
.bp-lower{position:relative;isolation:isolate;background:radial-gradient(circle at 78% -12%,rgba(225,228,235,.07),transparent 28rem),radial-gradient(circle at 13% 108%,rgba(150,156,168,.055),transparent 31rem),linear-gradient(transparent 0,#020203 140px,#050506 46%,#020203 100%)}
.bp-lower:before{content:none}
body[data-ux-review] .ux-footer{position:relative;isolation:isolate}
body[data-ux-review] .ux-footer:before{content:"";position:absolute;z-index:-1;top:-18px;bottom:0;left:calc((100% - 100vw)/2);right:calc((100% - 100vw)/2);background:#020203;pointer-events:none}
body[data-ux-review] .bp-lower :is(h2,h3),
body[data-ux-review] .bp-lower .ux-plan-title,
body[data-ux-review] .bp-lower .ux-trial-days,
body[data-ux-review] .bp-lower #como-funciona>.eyebrow,
body[data-ux-review] .ux-footer h2{font-family:var(--bp-heading-font);font-weight:600;color:transparent;background-image:var(--bp-silver);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 18px rgba(255,255,255,.027);background-size:auto;background-position:0% 0%;-webkit-text-stroke:0 transparent;filter:none}
/* This parent heading explicitly keeps its pre-refinement treatment. */
body[data-ux-review] .bp-lower .ux-trial-summary h3{font-family:var(--font-heading);font-weight:500;background-image:linear-gradient(118deg,#EEF1F3 0%,#B5BCC3 54%,#AEB5BD 100%);text-shadow:none}
body[data-ux-review] .bp-lower :is(.ux-scene-copy>p,.ux-section-intro,.ux-connection-route>p:not(.ux-route-index),.ux-details p,.ux-plan>p:not(.eyebrow):not(.ux-plan-price),.ux-plan>.ux-plan-price,.ux-plan>ul,.ux-trial-summary p,.ux-faq details>p,.institutional-copy,.ux-note){color:#8E97A5;-webkit-text-fill-color:currentColor;background-image:none;background-clip:border-box;-webkit-background-clip:border-box;text-shadow:none;filter:none}
body[data-ux-review] .bp-lower :is(.eyebrow,.dp-eyebrow){color:#AEB5BD}
body[data-ux-review] .bp-lower :is(.ux-step-number,.ux-route-index){color:#00E5FF;text-shadow:none}
body[data-ux-review] .bp-lower .ux-plan-title>span{-webkit-text-fill-color:#8E97A5;color:#8E97A5;background:none;background-clip:border-box;-webkit-background-clip:border-box;text-shadow:none;filter:none}
body[data-ux-review] .bp-lower :is(.ux-route-steps li,.ux-details summary,.ux-faq summary){color:#A0A4AD;-webkit-text-fill-color:currentColor;background-image:none;text-shadow:none}
body[data-ux-review] .bp-lower .ux-route-steps li:before{color:#00E5FF}
body[data-ux-review] .bp-lower :is(.ux-route-steps,.ux-details,.ux-plan,.ux-connection-brands,.ux-faq details){border-color:#B5BCC32B}
body[data-ux-review] .bp-lower .ux-connection-routes:after{background:linear-gradient(transparent,#B5BCC32B,transparent)}
body[data-ux-review] .bp-lower .ux-trial-summary:before{background:none}
body[data-ux-review] .bp-lower .ux-plan-pro:before{background:linear-gradient(90deg,#159BFF,#00E5FF55,transparent)}
body[data-ux-review] .ux-footer .ef-main{border-color:#B5BCC32B}
body[data-ux-review] .ux-footer :is(nav a,.ef-identity>p){color:#8E97A5;-webkit-text-fill-color:currentColor;background-image:none;text-shadow:none}
/* Graph blue is bright; dark text keeps the existing CTA labels readable. */
body[data-ux-review] .bp-lower .button.button-primary{color:#020203;-webkit-text-fill-color:currentColor;border-color:#159BFF;background:#159BFF;box-shadow:none;text-shadow:none}
body[data-ux-review] .bp-lower .button.button-secondary{color:#159BFF;border-color:#159BFF;background:transparent;box-shadow:none}
body[data-ux-review] .bp-lower .button.button-primary:hover{border-color:#159BFF;background:#159BFF;box-shadow:none}
body[data-ux-review] .bp-lower .button.button-secondary:hover{border-color:#159BFF;box-shadow:none}
body[data-ux-review] .bp-lower :is(a,button):focus-visible{outline-color:#00E5FF}
body[data-ux-review] .bp-lower .ux-text-link{color:#159BFF}
/* Exact observed platform surface: simple paint, unchanged diagram timing. */
body[data-ux-review] .bp-lower .ux-flow-visual:before{background:none}
body[data-ux-review] .bp-lower :is(.ux-flow-surface,.ux-token){color:#EEF1F3;background:linear-gradient(135deg,rgba(255,255,255,.024),transparent 22%),linear-gradient(rgba(13,13,15,.976),rgba(5,5,6,.99));border-color:rgba(236,238,243,.106);box-shadow:none}
body[data-ux-review] .bp-lower :is(.ux-ai-destination,.ux-same-ai){border-color:#159BFF88}
body[data-ux-review] .bp-lower :is(.ux-scene-phases,.ux-flow-origin-label,.ux-observer-heading span,.ux-usage-map>div,.ux-margin-gate span,.ux-duplicate-label,.ux-audit-heading span,.ux-audit-inputs>.ux-flow-surface>span,.ux-check-plan-note){color:#B5BCC3}
body[data-ux-review] .bp-lower .ux-scene-phases>span:nth-child(2){color:#159BFF}
body[data-ux-review] .bp-lower .ux-scene-phases>span:nth-child(3){color:#9edaff}
body[data-ux-review] .bp-lower .ux-main-track>i{border-color:#159BFF;background:#159BFF;box-shadow:none}
body[data-ux-review] .bp-lower .ux-observation-branch{border-color:#159BFF99}
body[data-ux-review] .bp-lower .ux-observation-branch>i{background:#00E5FF;box-shadow:none}
body[data-ux-review] .bp-lower .ux-usage-map i{background:linear-gradient(90deg,#159BFF,#00E5FF)}
body[data-ux-review] .bp-lower .ux-token-request{border-color:#159BFFaa}
body[data-ux-review] .bp-lower .ux-token-needed{border-color:#00E5FF77}
body[data-ux-review] .bp-lower .ux-token-duplicate{border-color:#B5BCC344}
body[data-ux-review] .bp-lower .ux-margin-savings{color:#EEF1F3;text-shadow:none}
body[data-ux-review] .bp-lower :is(.ux-savings-input strong,.ux-currency-mark){color:#00E5FF;text-shadow:none}
body[data-ux-review] .bp-lower #planos .ux-plan>.ux-pro-capacity,
body[data-ux-review] .bp-lower #planos .ux-plan>.ux-enterprise-dedicated{color:#A0A4AD;-webkit-text-fill-color:currentColor;background-image:none;text-shadow:none}
body[data-ux-review] .bp-lower #planos .ux-plan>.ux-enterprise-scope{color:#8E97A5;-webkit-text-fill-color:currentColor;background-image:none;text-shadow:none}
body[data-ux-review] .bp-lower .ux-plan>ul>li:before{color:#00E5FF}
body[data-ux-review] .bp-lower .ux-savings-cost{color:#EEF1F3}
body[data-ux-review] .bp-lower :is(.ux-savings-equals,.ux-savings-context){color:#B5BCC3}
body[data-ux-review] .bp-lower .ux-currency-mark{border-color:#159BFFaa;background:#050506;box-shadow:none}
body[data-ux-review] .bp-lower .ux-margin-gate{animation-name:bp-margin-gate-light}
@keyframes bp-margin-gate-light{0%,24%,100%{border-color:rgba(236,238,243,.106);box-shadow:none}39%,65%{border-color:#159BFF;box-shadow:none}}
body[data-ux-review] .bp-lower #como-funciona>.eyebrow{font-size:clamp(26px,3.2vw,42px);font-weight:650;line-height:1.18;letter-spacing:-.035em;text-transform:none;margin-bottom:28px}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-1>#operation-title{font-size:20px;font-weight:400;line-height:1.35;letter-spacing:-.015em;text-shadow:none}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-art{position:relative;top:24px}
@media(min-width:761px){body[data-ux-review] .bp-lower #como-funciona :is(.ux-scene-2,.ux-scene-3)>.ux-scene-art{top:0}}
@media(max-width:760px){.bp-lower{background:radial-gradient(circle at 78% -12%,rgba(225,228,235,.07),transparent 28rem),radial-gradient(circle at 13% 108%,rgba(150,156,168,.055),transparent 31rem),linear-gradient(transparent 0,#020203 100px,#050506 46%,#020203 100%)}body[data-ux-review] .bp-lower #como-funciona>.eyebrow{font-size:28px;margin-bottom:20px}body[data-ux-review] .bp-lower #como-funciona .ux-scene-art{top:14px}body[data-ux-review] .bp-lower #como-funciona .ux-scene-1>#operation-title{font-size:17px;margin-bottom:12px}}
/* Platform supporting-copy shade. No reflective fill can leak into notes. */
body[data-ux-review] #segunda-divisao .bp-lower :is(.ux-note,.ux-check-plan-note,.ux-details p,.ux-savings-context,.ux-plan>.ux-plan-price){color:#8E97A5;-webkit-text-fill-color:currentColor;background-image:none;background-clip:border-box;-webkit-background-clip:border-box;text-shadow:none;filter:none}
/* A nested inline phrase continues the headline fill; it is not body copy. */
body[data-ux-review] .bp-lower #como-funciona h3 .ux-ai-phrase{color:transparent;-webkit-text-fill-color:transparent;text-shadow:inherit}
@media(forced-colors:active){body[data-ux-review] .bp-lower :is(h2,h3,.ux-plan-title,.ux-trial-days),body[data-ux-review] .bp-lower .ux-trial-summary h3,body[data-ux-review] .bp-lower #como-funciona>.eyebrow,body[data-ux-review] .ux-footer h2,body[data-ux-review] .bp-lower #como-funciona h3 .ux-ai-phrase{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;text-shadow:none}}

/* Test 5: keep the whole Shadow copy group inside its own text column.
   The number has a real gutter; headline and description share its inner edge. */
body[data-ux-review] .bp-lower #como-funciona .ux-scene-1>.ux-scene-copy{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin-inline:0;padding-inline-start:12px}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-1 .ux-step-heading{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;width:100%;max-width:100%;min-width:0}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-1 .ux-step-heading>.ux-step-number{grid-column:1;grid-row:1}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-1 .ux-step-heading>h3{grid-column:2;grid-row:1;min-width:0;max-width:min(370px,100%);overflow-wrap:break-word}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-1>.ux-scene-copy>p{box-sizing:border-box;margin-inline-start:32px;width:calc(100% - 32px);max-width:35ch;min-width:0;overflow-wrap:break-word}
/* Test 5: the existing dialogs share the approved visual identity.
   Only surfaces and typography change; existing CTA colors, sizing, scroll, actions and content stay native. */
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog){
 --bp-blue:#159BFF;
 --bp-silver:linear-gradient(104deg,#F7F8FA 0%,#9CA2AC 22%,#FFFFFF 43%,#AAB0B9 66%,#E7E9ED 100%);
 --bp-heading-font:"Inter Tight",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:#8E97A5;border-color:rgba(236,238,243,.106);
 background:radial-gradient(circle at 78% -12%,rgba(225,228,235,.07),transparent 28rem),radial-gradient(circle at 13% 108%,rgba(150,156,168,.055),transparent 31rem),linear-gradient(#020203 0%,#050506 46%,#020203 100%);
}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog)::backdrop{background:rgba(0,0,0,.72);backdrop-filter:none}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(.trial-surface,.dialog-content){background:none}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(.trial-bar,.trial-action-bar,.ux-plan-dialog-bar,.ux-plan-dialog-action){background:#050506;border-color:rgba(236,238,243,.106)}
body[data-ux-review] #ux-plan-dialog .ux-plan-dialog-bar:before{background:linear-gradient(90deg,transparent,#AAB0B955,transparent)}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(p,li,summary,.eyebrow,#ux-dialog-body){color:#8E97A5;-webkit-text-fill-color:currentColor;background-image:none;background-clip:border-box;-webkit-background-clip:border-box;text-shadow:none;filter:none}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(h2,h3,#trial-intro){font-family:var(--bp-heading-font);font-weight:600;color:transparent;background-image:var(--bp-silver);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 18px rgba(255,255,255,.027);-webkit-text-stroke:0 transparent;filter:none}
body[data-ux-review] #ux-plan-dialog #ux-plan-dialog-intro{color:#8E97A5;-webkit-text-fill-color:currentColor;text-shadow:none;background:none}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(.trial-product,.trial-count,.trial-metering,.ux-plan-detail-group,.ux-plan-action-status){border-color:rgba(236,238,243,.106)}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(.trial-next strong,.trial-limit){color:#A0A4AD;-webkit-text-fill-color:currentColor;text-shadow:none}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(.trial-close,.ux-plan-close,.dialog-close,.ux-dialog-close:not(.button)){color:#A0A4AD;-webkit-text-fill-color:currentColor;background:#0D0D0F;border-color:rgba(236,238,243,.106);box-shadow:none;text-shadow:none}
body[data-ux-review] #ux-plan-dialog .ux-plan-item-mark,body[data-ux-review] #ux-plan-dialog [data-kind="included"] .ux-plan-item-mark{color:#AAB0B9;-webkit-text-fill-color:currentColor}
body[data-ux-review] #trial-dialog .trial-next li:before,body[data-ux-review] #trial-dialog .trial-product li:before{color:#AAB0B9;-webkit-text-fill-color:currentColor}
body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(.trial-scroll,.ux-plan-dialog-scroll){scrollbar-color:#8E97A5 #050506}
@media(forced-colors:active){body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog){background:Canvas;color:CanvasText;border-color:CanvasText}body[data-ux-review] dialog:is(#trial-dialog,#ux-dialog,#ux-plan-dialog,#preview-dialog) :is(h2,h3,#trial-intro){color:CanvasText;-webkit-text-fill-color:CanvasText;background:none;text-shadow:none}}

body[data-ux-review] #ux-dialog .ux-method-steps>li{border-color:rgba(236,238,243,.106)}
body[data-ux-review] #trial-dialog #trial-start-status{border-color:rgba(236,238,243,.106)}
body[data-ux-review] dialog#trial-dialog{box-shadow:0 30px 110px #000b,inset 0 1px 0 rgba(236,238,243,.106)}

/* Quiet secondary label and a little breathing room between Shadow and Margin. */
@media(min-width:761px){body[data-ux-review] .bp-lower #como-funciona .ux-scene-1{row-gap:18px}}
body[data-ux-review] .bp-lower #como-funciona .ux-scene-2{margin-top:20px}
@media(max-width:760px){body[data-ux-review] .bp-lower #como-funciona .ux-scene-2{margin-top:16px}}