/* Geometry measured against the approved 941 × 1672 reference.
   Real HTML remains selectable; this layer changes presentation only. */
:root{--font:'Roboto',Arial,sans-serif}
.header{box-shadow:0 1px 5px #65d7ff80;background:#011426a6}
.header nav{gap:25px;font-family:'Roboto Condensed',Arial,sans-serif;font-size:13px}
.header nav .login{border-radius:7px}
.header nav .primary{border-radius:13px}
.brand small{font-family:'Roboto Condensed',Arial,sans-serif}
.intro{top:18px}
.intro h1{font-family:'Roboto',Arial,sans-serif;font-size:29px;line-height:1.035;letter-spacing:-.65px;font-weight:800}
.intro p{margin-top:9px;letter-spacing:-.25px}
.section-head h2{font-family:'Roboto',Arial,sans-serif;font-weight:750;letter-spacing:-.55px}
.section-head p{font-family:'Roboto Condensed',Arial,sans-serif}
.btn{background:linear-gradient(180deg,#4b819f 0,#123e5d 20%,#052039 70%,#0b3f67);box-shadow:inset 0 1px 2px #e4f5ff99,0 0 9px #46c6ff70;border-color:#a5dbfa;font-family:'Roboto Condensed',Arial,sans-serif}
.btn.primary{background:linear-gradient(180deg,#62dfff 0,#08a9ff 25%,#0070e7 73%,#098cf2 100%);box-shadow:inset 0 1px 2px #fff,0 0 5px #42d9ff,0 0 17px #008cff99}
.big{font-family:'Roboto',Arial,sans-serif;font-size:23px;font-weight:500;letter-spacing:-.45px}
.hero-actions{bottom:14px}
.tour{font-family:'Roboto',Arial,sans-serif;font-size:14px;font-weight:500}
.metal{--cut:12px;--panel-fill:linear-gradient(130deg,#244860 0,#06283f 13%,#02182ddd 60%,#073454 100%);isolation:isolate;clip-path:none!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 0 2px #85cfff55);overflow:visible}
.metal:before,.metal:after{content:'';position:absolute;pointer-events:none;border:0;border-radius:0;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.metal:before{inset:0;z-index:-2;background:linear-gradient(132deg,#e8f6ff 0,#5b8da9 8%,#d6efff 17%,#527a92 19%,#12455f 31%,#5ea9cb 49%,#e8fbff 53%,#5d8aa3 55%,#12344d 71%,#a1c0d3 87%,#e5f3fa 98%)}
.metal:after{inset:3px;z-index:-1;--cut:10px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px #bddff080,inset 0 0 0 3px #032139,inset 0 0 0 4px #96c4db65,inset 0 0 16px #76c9ef22}
.metal:is(a,button):hover{filter:drop-shadow(0 0 5px #56cfffaa) brightness(1.1)}
.tax-panels{left:25px;top:132px;grid-template-columns:179px 194px 175px;gap:8px;width:564px;height:250px}
.tax-panel{padding:10px 15px 11px;--cut:12px}
.tax-panel h2{font-family:'Roboto Condensed',Arial,sans-serif;font-size:16px;font-weight:500;gap:9px;height:29px;margin-bottom:3px}
.tax-panel h2 .icon{width:26px;height:26px}
.metric small{font-family:'Roboto Condensed',Arial,sans-serif;font-size:11px;line-height:1.15;margin-bottom:2px}
.metric b{font-family:'Roboto Condensed',Arial,sans-serif;font-size:16px}
.tax-lines{font-family:'Roboto Condensed',Arial,sans-serif;font-size:10px;line-height:1.2;margin:5px 0}
.tax-lines dt,.tax-lines dd{padding:3px 0}
.tax-lines dt{max-width:100px}
.tax-panel .total{position:relative}
.tax-panel .total b{font-size:18px}
.tax-panel .total em{position:absolute;right:0;bottom:2px;font-size:17px}
.tax-panel .basis{font-family:'Roboto Condensed',Arial,sans-serif;font-size:10px;margin-top:1px}
.tax-panel[data-regime=presumido] .tax-lines{min-height:123px}
.tax-panel[data-regime=presumido] .total b{font-size:17px}
.tax-panel .chart{width:100%;height:91px;margin-top:0}
.tax-panel[data-regime=real] .chart{height:76px}
.analysis .metal{--cut:9px;padding:10px 12px}
.analysis h3{font-family:'Roboto Condensed',Arial,sans-serif;font-size:9px;letter-spacing:.7px;margin-bottom:5px}
.compare a{font-family:'Roboto Condensed',Arial,sans-serif;font-size:10px;padding:3px 2px}
.saving strong{font-family:'Roboto Condensed',Arial,sans-serif;font-size:30px;font-weight:600}
.saving small{font-family:'Roboto Condensed',Arial,sans-serif;font-size:12px}
.saving .chart{right:9px;width:82px;height:78px;bottom:0}
.checklist h3{font-size:8px;letter-spacing:0}
.checklist li{font-family:'Roboto Condensed',Arial,sans-serif;font-size:8.5px;gap:5px;margin-top:6px}
.checklist .icon{width:13px;height:13px}
.demo-note{top:385px;font-family:'Roboto Condensed',Arial,sans-serif;font-size:9px;background:#00162dc9}
.trust{font-family:'Roboto',Arial,sans-serif;font-size:11px;gap:8px;margin-left:17px}
.trust .icon{width:55px}
.benefits{padding:5px 17px;gap:0}
.benefits button{--cut:9px;gap:16px;padding:8px 23px;font-family:'Roboto',Arial,sans-serif;font-size:12px}
.benefits .icon{width:38px;height:38px}
.band{background-color:transparent;box-shadow:inset 0 1px 2px #dcefff99,0 -1px 7px #47bfff77}
.band:before{inset:0;border-left-width:7px;border-right-width:7px}
.solutions{padding:10px 39px}
.solutions .section-head{padding-left:15px}
.solutions h2{font-size:34px;font-weight:800;line-height:1.03}
.solutions .section-head p{font-size:14px;margin-top:4px}
.solution-grid{margin-top:8px;gap:8px}
.solution{height:148px;padding:13px 15px}
.solution-title{gap:16px}
.solution-title .icon{width:47px;height:41px}
.solution h3{font-family:'Roboto Condensed',Arial,sans-serif;font-size:17px;font-weight:600}
.solution p{font-family:'Roboto',Arial,sans-serif;font-size:11px;line-height:1.2}
.mini-dashboard{height:72px;margin-top:7px;padding:10px 12px;border-color:#5188ad;box-shadow:inset 0 0 7px #3686bc55}
.mini-dashboard b{font-family:'Roboto Condensed',Arial,sans-serif;font-size:17px;font-weight:500}
.mini-dashboard span{font-family:'Roboto Condensed',Arial,sans-serif;font-size:11px;margin-top:5px}
.plans .section-head h2{font-family:'Roboto',Arial,sans-serif;font-size:28px;font-weight:700}
.plan-grid{grid-template-columns:284px 289px 276px;gap:8px;margin-top:9px}
.plan{padding:19px 24px 12px;height:174px}
.plan-title{gap:22px}
.plan-title h3{font-family:'Roboto Condensed',Arial,sans-serif;font-size:22px;font-weight:600}
.plan-title .icon{height:43px;width:44px}
.price{font-family:'Roboto Condensed',Arial,sans-serif;font-size:23px;margin-top:-2px;margin-left:25px;line-height:1}
.price strong{font-size:42px;font-weight:700}
.price small{font-size:18px}
.plan>p:not(.price){font-family:'Roboto',Arial,sans-serif;font-size:13px;margin-top:6px}
.plan .btn{margin-top:10px;font-family:'Roboto',Arial,sans-serif;font-size:13px;height:36px;border-radius:9px}
.plan.best{padding-top:19px;filter:drop-shadow(0 0 7px #08c8ff)}
.plan.best:before{background:linear-gradient(135deg,#e8ffff,#67eeff 15%,#00a7e3 34%,#ddffff 49%,#28dfff 55%,#007eaf 75%,#baffff 94%)}
.plan.best:after{inset:4px;box-shadow:inset 0 0 0 1px #d5ffff,inset 0 0 0 3px #008fc0,inset 0 0 13px #04c8ff88}
.ribbon{font-family:'Roboto Condensed',Arial,sans-serif;left:65px;right:58px;font-size:10px;top:1px;z-index:1}
.discount{font-family:'Roboto Condensed',Arial,sans-serif;right:10px;top:13px}
.included{padding:13px 23px;height:179px}
.included h3{font-family:'Roboto',Arial,sans-serif;font-size:12px}
.included li{font-family:'Roboto Condensed',Arial,sans-serif;font-size:12px;gap:8px}
.payment-types{font-family:'Roboto Condensed',Arial,sans-serif}
.news .section-head h2{font-family:'Roboto Condensed',Arial,sans-serif;font-size:27px;font-weight:700;letter-spacing:-.4px}
.news-card{--cut:7px;padding:2px;overflow:hidden;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%,0 7px)!important}
.news-card:after{inset:1px;--cut:6px}
.news-copy{padding:9px 9px 5px}
.news-copy h3{font-family:'Roboto',Arial,sans-serif;font-size:11.5px;line-height:1.15}
.news-copy .category{font-family:'Roboto Condensed',Arial,sans-serif;font-size:9px}
.news-copy small{font-family:'Roboto',Arial,sans-serif;font-size:8.5px}
.how .section-head h2{font-family:'Roboto Condensed',Arial,sans-serif;font-size:21px;letter-spacing:-.3px}
.how li a{gap:13px}
.how li span{font-family:'Roboto',Arial,sans-serif;font-size:11px}
.how li small{font-size:10px;line-height:1.1;margin-top:2px}
.how li b{font-family:'Roboto Condensed',Arial,sans-serif;font-weight:600}
.faq .section-head h2{font-family:'Roboto Condensed',Arial,sans-serif;font-size:20px;letter-spacing:-.2px}
.faq details{background:linear-gradient(#062944,#011a30)!important;border:1px solid #79bfec!important;border-radius:8px!important;box-shadow:inset 0 1px 2px #e6f9ff55,0 0 5px #29b1eb77!important;font-family:'Roboto Condensed',Arial,sans-serif}
.faq details:before,.faq details:after{display:none}
.footer{background:#001b30aa}
@media(max-width:767px){
 .intro h1{font-size:29px;line-height:1.16}.intro{top:auto}
 .tax-panels{left:auto;top:auto;width:100%;height:auto}.tax-panel{padding:20px}
 .tax-panel h2{font-size:22px}.tax-lines{font-size:14px;line-height:1.4}.tax-lines dt{max-width:none}
 .metric small{font-size:14px}.metric b{font-size:23px}.tax-panel .total em{position:static}
 .tax-panel .chart{height:115px}.tax-panel[data-regime=real] .chart{height:90px}
 .demo-note{top:auto;font-size:12px}.hero-actions{bottom:auto}.trust{margin-left:0;font-size:12px}
 .analysis h3{font-size:10px}.checklist li{font-size:13px}.checklist h3{font-size:12px}
 .benefits{padding:12px;gap:7px}.benefits button{padding:15px 10px;gap:8px;font-size:12px}.benefits .icon{width:28px}
 .solutions{padding:24px 16px}.solutions .section-head{padding-left:0}.solutions h2{font-size:29px}
 .solution-grid{gap:15px}.solution{height:178px;padding:20px}.solution h3{font-size:21px}.solution p{font-size:13px}
 .plan-grid{grid-template-columns:1fr;gap:15px;margin-top:22px}.plan,.plan.best{height:213px;padding:25px}.plan .btn{height:43px}
 .included{height:auto;padding:23px}.included h3{font-size:19px}.included li{font-size:15px}
 .news .section-head h2{font-size:27px}.news-copy h3{font-size:16px}.news-copy small{font-size:11px}
 .how .section-head h2,.faq .section-head h2{font-size:23px}.how li span{font-size:17px}.how li small{font-size:14px}
}
@media(min-width:768px){.page{background-image:url('/assets/home-metallic/atrium-refined.webp');background-size:941px 520px}.hero{background:none}}
/* Refine edge thickness and typography after native-scale comparison. */
.intro h1{font-size:30px;letter-spacing:-.35px}
.tour{white-space:nowrap;font-family:'Roboto Condensed',Arial,sans-serif}
.benefits button{font-family:'Roboto Condensed',Arial,sans-serif;font-size:14px;padding:8px 22px}
.metal:before{background:linear-gradient(132deg,#f0f8ff 0,#7794a8 3%,#1d4762 7%,#bedfed 17%,#567688 19%,#18405b 31%,#508aa8 49%,#d2e9f5 53%,#43647a 55%,#17334b 71%,#759db6 87%,#ecfaff 98%)}
.metal:after{inset:2px;box-shadow:inset 0 0 0 1px #b4d1e088,inset 0 0 0 3px #032139,inset 0 0 0 4px #83b4cc77,inset 0 0 12px #57b4e133}
.band{background-image:repeating-linear-gradient(133deg,transparent 0,transparent 71px,#03467236 72px,#051c3288 89px,#00243a44 91px,#3e7e9944 92px,transparent 94px),linear-gradient(100deg,#00192ef5,#011528ed)}
.solutions .solution-grid{margin-top:4px}
.tax-panel[data-regime=presumido] .tax-lines{font-size:9.5px}
.tax-panel .tax-lines dt{max-width:none}
@media(max-width:767px){.intro h1{font-size:29px}.benefits button{font-size:13px;padding:15px 10px}.tax-panel[data-regime=presumido] .tax-lines{font-size:14px}}
/* Original frame finish only: a 7px masked perimeter, never the UI contents.
   Text, data, controls and chart interiors remain native HTML/SVG. */
@media(min-width:768px){
 .tax-panel,.analysis .metal,.solution,.plan,.included{--frame-x:0px;--frame-y:0px}
 .tax-panel:before,.analysis .metal:before,.solution:before,.plan:before,.included:before{inset:0;background-image:url('/assets/home-metallic/reference.webp');background-size:941px 1672px;background-position:var(--frame-x) var(--frame-y);background-repeat:no-repeat;padding:7px;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;z-index:0;clip-path:none;box-shadow:none}
 .tax-panel:after,.analysis .metal:after,.solution:after,.plan:after,.included:after{inset:6px;background:linear-gradient(125deg,#153b53e8,#02172de8 50%,#042c49e8);box-shadow:inset 0 0 7px #6baac633;--cut:5px}
 .tax-panel[data-regime=simples]{--frame-x:-25px;--frame-y:-185px}
 .tax-panel[data-regime=presumido]{--frame-x:-209px;--frame-y:-185px}
 .tax-panel[data-regime=real]{--frame-x:-409px;--frame-y:-185px}
 .analysis .compare{--frame-x:-591px;--frame-y:-93px}
 .analysis .saving{--frame-x:-591px;--frame-y:-197px}
 .analysis .checklist{--frame-x:-591px;--frame-y:-281px}
 .solution:nth-child(1){--frame-x:-39px;--frame-y:-671px}
 .solution:nth-child(2){--frame-x:-334px;--frame-y:-671px}
 .solution:nth-child(3){--frame-x:-616px;--frame-y:-671px}
 .plan{--frame-x:-40px;--frame-y:-910px}
 .plan.best{--frame-x:-332px;--frame-y:-910px}
 .included{--frame-x:-629px;--frame-y:-902px}
 .plan.best:after{background:linear-gradient(125deg,#005a85bb,#031b32 45%,#00618a99);box-shadow:inset 0 0 8px #3be5ff}
 .benefits{grid-template-columns:225px 212px 235px 235px}
 .benefits button{padding:8px 20px;gap:16px;font-size:13px}
 .benefits button:nth-child(3){gap:12px;padding-left:22px}
 .solution-grid{grid-template-columns:289px 274px 288px;gap:8px;margin-top:-2px}
 .solutions .section-head p{letter-spacing:.05px}
 .plan-grid{margin-top:9px}.included{top:-8px;height:187px}
}
@media(min-width:768px){.tax-panels{gap:5px;width:558px}.tax-panel .chart{height:91px}.tax-panel[data-regime=real] .chart{height:76px}}
@media(min-width:768px){
 .tax-panel{height:250px;min-height:0;overflow:hidden}.tax-panel[data-regime=simples] .chart{height:79px}
 .solutions h2{font-size:32px}.solution-grid{margin-top:-6px}
 .plan-grid{margin-top:6px}
}
@media(min-width:768px){
 .plan-grid{height:174px;align-items:start}
 .plan-title{padding-left:16px;gap:24px}.plan.best .plan-title{padding-left:4px}
 .price{margin-top:-12px}.plan>p:not(.price){margin-top:2px}
 .plan.best:before{background-image:url('/assets/home-metallic/reference.webp');background-size:941px 1672px;background-position:-332px -910px;background-repeat:no-repeat;inset:0;clip-path:none;padding:7px;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
 .how ol{margin-top:1px}
}
@media(min-width:768px){
 .intro{top:17px}.intro h1{letter-spacing:-.5px}.intro h1 span{letter-spacing:-.05px}.hero .intro p{font-size:15.8px;margin-top:7px}
 .solution p{font-size:12px}.mini-dashboard{margin-top:2px}
}
@media(min-width:768px){.solutions .solution-grid{margin-top:0}}
@media(min-width:768px){
 .band{--band-y:0px}
 .band:before{inset:0;border:0;clip-path:none;z-index:0;background:url('/assets/home-metallic/reference.webp') 0 var(--band-y)/941px 1672px no-repeat;padding:5px 30px;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
 .benefits{--band-y:-520px}.solutions{--band-y:-590px}.plans{--band-y:-829px}.news{--band-y:-1113px}.how{--band-y:-1390px}.faq{--band-y:-1494px}.footer{--band-y:-1607px}
 .checklist li{font-size:9px}.checklist h3{font-size:8.2px}
 .included li{font-family:'Roboto',Arial,sans-serif;font-size:11px;line-height:1.2}
 .included h3{font-weight:500}
 .news-copy h3{font-size:12px}.news-copy small{font-size:9px}
}
@media(max-width:767px){.page{background:#01172a}.header{background:#031b2e}.hero{background:linear-gradient(180deg,transparent 420px,#01172a 800px),url('/assets/home-metallic/atrium-refined.webp') center top/auto 700px no-repeat}}
@media(min-width:768px){
 .page{background-size:941px 600px}
 .hero:before{content:'';position:absolute;left:0;top:0;width:585px;height:132px;background:linear-gradient(90deg,#001328aa,#00132830);pointer-events:none}
 .checklist li{font-size:8.5px}
}

/* 16/10/2026 — avatar retirado da tela inicial. A coluna à direita mostra apenas dados dos gráficos
   (carga anual por regime, alíquota efetiva e economia anual), lidos do mesmo home-demo.json dos painéis. */
.analysis-side{position:absolute;left:794px;top:39px;width:139px;height:321px;display:grid;grid-template-rows:1.25fr 1fr .8fr;gap:6px;z-index:2}
.analysis-side .metal{padding:10px 11px;border-radius:9px;box-shadow:inset 0 0 0 2px #0c2d44,inset 0 0 0 3px #456982,0 0 10px #40b5ed77;overflow:hidden}
.analysis-side h3{font-family:'Roboto Condensed',Arial,sans-serif;font-size:8px;letter-spacing:.7px;color:#83e5f5;margin:0 0 5px}
.side-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:end;height:76px;border-bottom:1px solid #39718c66}
.side-bars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:7.5px;color:#d9eef8;font-variant-numeric:tabular-nums}
.side-bars i{display:block;width:100%;border-radius:2px 2px 0 0;background:linear-gradient(#68dcfa,#007dc6);margin-top:3px}
.side-bars div.best i,.side-rates div.best s b{background:linear-gradient(#7ff5c8,#0f9b74)}
.side-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;text-align:center;font-size:7.5px;color:#bbd6e7;margin-top:3px}
.side-rates{display:grid;gap:6px;font-size:7.5px;color:#d9eef8}
.side-rates div{display:grid;grid-template-columns:1fr auto;gap:2px 4px}
.side-rates s{grid-column:1/-1;display:block;height:5px;border-radius:3px;background:#0b2f47;text-decoration:none;overflow:hidden}
.side-rates s b{display:block;height:100%;background:linear-gradient(90deg,#007dc6,#68dcfa)}
.side-total strong{display:block;font-size:17px;color:#7ff5c8;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.side-total small{font-size:7.5px;color:#bbd6e7}
/* a moldura do quadro "Análise completa" era recortada da arte antiga e trazia um pedaço da mão do avatar: usa a moldura metálica padrão */
.analysis .checklist:before{background:linear-gradient(132deg,#f0f8ff 0,#7794a8 3%,#1d4762 7%,#bedfed 17%,#567688 19%,#18405b 31%,#508aa8 49%,#d2e9f5 53%,#43647a 55%,#17334b 71%,#759db6 87%,#ecfaff 98%)}
@media(max-width:767px){
 .analysis-side{position:relative;inset:auto;order:4;width:100%;height:auto;grid-template-rows:none;grid-template-columns:1fr 1fr;gap:12px}
 .analysis-side .metal{padding:16px}
 .analysis-side h3{font-size:10px}
 .side-total{grid-column:1/-1}
 .side-bars{height:110px}
 .side-bars div,.side-legend,.side-rates{font-size:11px}
 .side-total strong{font-size:28px}
 .side-total small{font-size:12px}
}