/* claryt.com — folha única do site do Claryt Commerce.
   Origem: claryt-commerce-brand/site/rodada-01/dist/v11 (site.css, dark.css e editorial.css, nessa ordem).
   Fora do site: faixa de estudo, saída do acesso de prévia, aviso de formulário demonstrativo, lista de lojas clientes e faixa de disponibilidade (.availability).
   Acréscimos do claryt.com no bloco final. */
/* ── v11/site.css ── */
@font-face{font-family:Inter;src:url(/fonts/Inter.woff2) format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
:root{--ink:#202020;--muted:#646464;--line:#e1e1e1;--soft:#f5f5f5;--blue:#005bd3;--mono:"JetBrains Mono",ui-monospace,monospace;font-family:Inter,system-ui,sans-serif;font-size:16px;color:var(--ink);background:#fff;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:4px}img{max-width:100%;display:block}button span,a span{pointer-events:none}[hidden]{display:none!important}main{overflow:clip}.section-width{width:min(1200px,calc(100% - 80px));margin-inline:auto}.eyebrow{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.13em;line-height:1.6}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:400}.header{position:sticky;top:0;z-index:10;background:#ffffffee;backdrop-filter:blur(16px);border-bottom:1px solid #e6e6e6}.header-inner{width:min(1320px,calc(100% - 64px));margin:auto;min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:28px}.logo{flex-shrink:0}.header nav{display:flex;align-items:center;gap:30px;font-size:.875rem}.header nav a{white-space:nowrap}.header nav a:hover{color:var(--blue)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:49px;border:1px solid #242424;background:#242424;color:white;border-radius:6px;padding:13px 19px;font-size:.875rem;font-weight:550;line-height:1.4;text-align:left}.button>span{font-size:1.25rem;line-height:1}.button.small{min-height:40px;font-size:.8125rem;padding:10px 15px;gap:20px}.button.outline{background:white;color:var(--ink);border-color:#c7c7c7}.button.white{background:white;color:var(--ink);border-color:white}.button:hover{background:#3b3b3b;color:white}.button.outline:hover{background:#f3f3f3;color:var(--ink)}.button.white:hover{background:#e9e9e9;color:var(--ink)}.quiet-link{display:inline-flex;align-items:center;gap:18px;padding:0;font-size:.875rem;font-weight:500;line-height:1.5}.quiet-link:hover{text-decoration:underline;text-underline-offset:4px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1.03fr 1fr;gap:64px;align-items:center;padding-block:82px 74px}.hero-copy .eyebrow{margin-bottom:26px}.hero h1{font-size:clamp(3rem,5.4vw,5rem);line-height:1.03;font-weight:550;letter-spacing:-.06em}.hero h1>span{color:#767676}.hero-intro{max-width:470px;font-size:1.3125rem;letter-spacing:-.025em;line-height:1.5;margin-top:28px}.hero-support{color:var(--muted);font-size:1rem;line-height:1.75;max-width:460px;margin-top:14px}.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}.hero-bottom{display:flex;gap:13px;align-items:center;margin-top:36px;font-size:.75rem;line-height:1.5;color:var(--muted)}.brand-symbol{display:inline-block;flex-shrink:0;width:24px;height:24px;background:currentColor;mask:url(/favicon.svg) center/contain no-repeat;-webkit-mask:url(/favicon.svg) center/contain no-repeat}.hero-visual{background:#f2f4f6;border:1px solid #e0e4e7;border-radius:12px;padding:25px 23px;color:#263443;min-width:0}.visual-heading{display:flex;justify-content:space-between;gap:15px;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:#65717d;line-height:1.5}.source-card{margin:28px 15px 0;background:#fff;border:1px solid #d8dfe6;border-radius:7px;padding:17px 15px;display:flex;align-items:center;gap:12px;position:relative}.source-card:before{content:'';position:absolute;left:9px;right:9px;top:-6px;height:5px;background:#f9fbfc;border:1px solid #d8dfe6;border-radius:4px 4px 0 0;border-bottom:0}.source-icon{font-size:1.8rem;line-height:1;color:#536b85}.source-card small{font:400 .75rem/1.4 var(--mono);letter-spacing:.13em;color:#6b7682;display:block;margin-bottom:5px}.source-card strong{display:block;font-size:.875rem;line-height:1.4;font-weight:500;max-width:290px}.connection{height:27px;width:1px;background:#a8bfd5;margin:auto}.order-example{padding:21px;background:#fff;border-radius:8px;border:1px solid #dce2e7;box-shadow:0 10px 25px #31486009}.order-example-top{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.75rem;color:#596879;letter-spacing:.04em}.badge{display:inline-flex;align-items:center;font-family:Inter,sans-serif;font-size:.75rem;font-weight:500;line-height:1.4;padding:3px 7px;border-radius:4px;white-space:nowrap;letter-spacing:0}.badge.success{background:#dcf0e6;color:#176041}.badge.warning{background:#fff0ce;color:#775100}.badge.info{background:#e2f0ff;color:#1d5a94}.badge.neutral{background:#ededed;color:#616161}.example-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:26px 0 22px}.example-title h2{font-size:1.65rem;line-height:1.18;font-weight:500;letter-spacing:-.055em}.example-title>span{font-size:2rem;color:#aebfce;align-self:start}.order-example dl{margin:0}.order-example dl>div{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:11px 0;border-top:1px solid #e8ecf0;font-size:.8125rem}.order-example dt{color:#6f7a84}.order-example dd{margin:0;font-weight:500}.order-example dd.mono{font-weight:400}.action-box{display:flex;gap:11px;align-items:center;background:#ebf3ff;border:1px solid #d9e7fb;border-radius:5px;padding:13px 11px;margin-top:8px;color:#0050b8}.action-number{border:1px solid #b7d1f1;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font:400 .75rem var(--mono);flex-shrink:0}.action-box small{display:block;font:400 .75rem/1.5 var(--mono);letter-spacing:.05em;margin-bottom:3px}.action-box strong{font-size:.8125rem;font-weight:550}.action-box>span:last-child{margin-left:auto}.progress-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:23px;color:#737e89;font-size:.75rem;letter-spacing:-.02em}.progress-steps>span{padding-top:9px;border-top:3px solid #e5e9ed;line-height:1.5;overflow-wrap:anywhere}.progress-steps .done{border-color:#467c62}.progress-steps .active{border-color:#005bd3;color:#005bd3}.visual-foot{display:flex;justify-content:space-between;gap:10px;font-size:.75rem;line-height:1.5;color:#6b7782;margin-top:17px}.section-heading{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:70px;margin-bottom:40px}.section-heading h2{font-size:clamp(1.875rem,3.05vw,2.875rem);line-height:1.12;font-weight:500;letter-spacing:-.055em;margin-top:17px}.section-heading>p{color:var(--muted);font-size:1rem;line-height:1.75;max-width:420px;justify-self:end}.product-section{padding-block:96px}.product-tabs{display:flex;gap:36px;border-bottom:1px solid #d7d7d7;margin-bottom:0}.product-tabs>button{padding:17px 0;font-size:.875rem;color:#777;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:12px;align-items:center}.product-tabs>button>span{font:400 .75rem var(--mono);color:#888}.product-tabs>button[aria-selected="true"]{border-bottom-color:#202020;color:#202020;font-weight:550}.product-tabs>button[aria-selected="true"]>span{color:var(--blue)}#product-panel,.product-panel{display:grid;grid-template-columns:300px 1fr;gap:38px;align-items:center;background:#f5f5f5;border:1px solid #e5e5e5;border-top:0;padding:38px 28px;border-radius:0 0 10px 10px;min-height:370px}.product-copy h3{font-size:1.65rem;font-weight:500;letter-spacing:-.05em;line-height:1.2;max-width:280px}.product-copy p{font-size:.9375rem;color:#696969;line-height:1.65;margin-top:15px}.product-copy ul{list-style:none;margin:22px 0 0;padding:0}.product-copy li{font-size:.8125rem;padding:5px 0;color:#4f4f4f;line-height:1.6}.product-copy li:before{content:'✓';margin-right:8px;font-size:.75rem;color:#797979}.app-window{background:white;min-width:0;border:1px solid #d5d5d5;border-radius:8px;overflow:hidden;box-shadow:0 10px 25px #00000005}.app-toolbar{height:47px;border-bottom:1px solid #e3e3e3;display:flex;align-items:center;gap:22px;padding:0 17px;background:#fafafa;font-size:.75rem;color:#616161}.app-toolbar>img{width:82px;height:auto}.app-context{color:#969696;margin-left:5px}.app-avatar{font-size:.75rem;background:#eaeaea;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-left:auto;flex-shrink:0}.app-body{padding:18px 17px 13px}.app-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.app-title h4{font-size:1rem;letter-spacing:-.025em;font-weight:600}.app-title>span{font-size:.75rem;color:#737373;font-family:var(--mono)}.app-table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:.8125rem}th{font-weight:500}.app-window table{min-width:490px;font-size:.75rem}.app-window th{font:400 .75rem/1.5 var(--mono);letter-spacing:.04em;background:#f7f7f7;color:#707070;padding:9px 10px;border-bottom:1px solid #e3e3e3;text-transform:uppercase;white-space:nowrap}.app-window td{padding:12px 10px;border-bottom:1px solid #e8e8e8;line-height:1.5;white-space:nowrap}.app-window td:first-child{font-weight:450}.app-window td small{display:block;font-size:.75rem;color:#777;margin-top:3px}.app-window .badge{font-size:.75rem;padding:3px 6px}.app-note{font-size:.75rem;line-height:1.5;color:#777;margin-top:14px}.feature-foot{display:flex;justify-content:space-between;gap:20px;padding:14px 0;font-size:.75rem;line-height:1.6;color:#787878}.feature-foot a{color:#333}.feature-foot a span{margin-left:8px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;margin-top:39px}.feature-grid article{border-top:1px solid #d8d8d8;padding-top:21px}.feature-index{font:400 .75rem var(--mono);letter-spacing:.07em;color:#797979}.feature-grid h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.035em;font-weight:500;max-width:310px;margin-top:15px}.feature-grid p{color:#646464;font-size:.9375rem;line-height:1.7;margin-top:14px}.flow-section{background:#f6f7f8;border-block:1px solid #e8e8e8;padding:78px 0 55px}.flow-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0}.flow-track button{padding:20px 16px 24px;border:1px solid #dce0e4;border-left:0;text-align:left;position:relative;background:#f6f7f8;min-width:0}.flow-track button:first-child{border-left:1px solid #dce0e4;border-radius:7px 0 0 7px}.flow-track button:last-child{border-radius:0 7px 7px 0}.flow-track button>span{font:400 .75rem var(--mono);display:block;color:#767e88;margin-bottom:22px}.flow-track strong{font-size:1rem;font-weight:500;display:block}.flow-track small{display:block;font-size:.75rem;color:#68727e;margin-top:7px;line-height:1.4}.flow-track button.selected{background:white;box-shadow:inset 0 -3px var(--blue)}.flow-track button.selected>span{color:var(--blue)}.flow-detail{display:grid;grid-template-columns:1.1fr 1.5fr;gap:16px 50px;padding:28px 0 17px;border-bottom:1px solid #d9dee3;min-height:150px;align-items:start}.flow-detail>p:first-child{font-size:1.25rem;font-weight:500;letter-spacing:-.035em;line-height:1.4}.flow-detail>p:nth-child(2){font-size:.9375rem;line-height:1.7;color:#616b75;grid-row:span 2}.flow-detail>span{font:400 .75rem/1.6 var(--mono);letter-spacing:.06em;color:#737d89;align-self:end}.flow-note{font-size:.75rem;line-height:1.7;color:#6f7982;margin-top:18px}.offers-section{padding-block:100px 75px}.offers-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.offer-card{border:1px solid #d8d8d8;border-radius:10px;padding:30px;display:flex;flex-direction:column;position:relative}.signature-card{border-color:#767676;background:#fafafa}.offer-top{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:25px;margin-bottom:24px}.offer-category{font:400 .75rem/1.5 var(--mono);letter-spacing:.1em;color:#666}.signature-symbol{width:21px;height:21px}.offer-card h3{font-size:1.7rem;font-weight:550;letter-spacing:-.05em}.offer-lead{font-size:1.2rem!important;color:#252525!important;line-height:1.4!important;letter-spacing:-.03em;margin-top:24px!important}.offer-card>p{font-size:.9375rem;color:#676767;line-height:1.7;margin-top:15px;max-width:400px}.offer-card ul{list-style:none;margin:25px 0 29px;padding:0}.offer-card li{font-size:.875rem;line-height:1.5;border-top:1px solid #e5e5e5;padding:11px 0;display:flex;gap:12px}.offer-card li:before{content:'✓';color:#777;flex-shrink:0}.offer-price{border-top:1px solid #d9d9d9;padding-top:24px;margin-top:auto;margin-bottom:25px}.offer-price strong{display:block;font-size:1rem;font-weight:500;letter-spacing:-.02em;line-height:1.7}.offer-price strong .mono{font-size:1.65rem;vertical-align:baseline;line-height:1}.offer-price>span{font-size:.75rem;line-height:1.6;color:#737373;display:block;margin-top:8px}.offer-card>.button{width:100%;font-size:.875rem}.responsibilities{margin-top:23px;border-bottom:1px solid #dedede}.responsibilities summary{padding:18px 0;font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none}.responsibilities summary>span{font-size:1.5rem;font-weight:300}.comparison-scroll{overflow-x:auto;margin:10px 0 25px}.comparison-scroll table{min-width:600px}.comparison-scroll caption{text-align:left;font-size:.75rem;color:#767676;padding:0 12px 16px}.comparison-scroll th,.comparison-scroll td{padding:14px 12px;border-bottom:1px solid #e6e6e6;font-size:.875rem}.comparison-scroll thead{background:#f5f5f5}.comparison-scroll tbody th{font-weight:400}.comparison-scroll td{color:#616161}.integrations{border-top:1px solid #dedede;border-bottom:1px solid #dedede;padding:43px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}.integrations h2{font-size:1.65rem;font-weight:500;letter-spacing:-.05em;line-height:1.25;margin-top:15px}.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px}.integration-grid>div>span{font-size:.75rem;color:#777;display:block;margin-bottom:11px}.integration-grid strong{font-size:.875rem;font-weight:500;line-height:1.6}.integration-grid i{font-style:normal;color:#a6a6a6;margin:0 3px}.integration-grid>p{grid-column:1/-1;font-size:.75rem;line-height:1.65;color:#777}.industry{padding-block:85px;display:grid;grid-template-columns:1fr 2fr;gap:70px;border-bottom:1px solid var(--line)}.industry-label .badge{margin-top:14px}.industry-content h2{font-size:2.1rem;font-weight:500;line-height:1.15;letter-spacing:-.045em}.industry-content>p{font-size:1rem;line-height:1.75;color:#686868;max-width:640px;margin-top:23px}.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.channels>div{border-top:1px solid #d9d9d9;padding-top:18px}.channels .mono{font-size:.75rem;letter-spacing:.06em}.channels p{font-size:.875rem;line-height:1.5;color:#6d6d6d;margin-top:12px}.faq{display:grid;grid-template-columns:1fr 1.7fr;gap:100px;padding-block:85px}.faq h2{font-size:2.6rem;line-height:1.13;font-weight:500;letter-spacing:-.055em;margin-top:18px}.faq>div>p:last-child:not(.eyebrow){font-size:.9375rem;line-height:1.7;color:#727272;max-width:285px;margin-top:22px}.faq-list{border-top:1px solid #d9d9d9}.faq details{border-bottom:1px solid #d9d9d9}.faq summary{display:flex;align-items:center;justify-content:space-between;gap:26px;list-style:none;cursor:pointer;padding:21px 0;font-size:.9375rem;font-weight:450;line-height:1.5}.faq summary>span{font-size:1.6rem;line-height:1;font-weight:300;color:#707070;flex-shrink:0}summary::-webkit-details-marker{display:none}details[open]>summary>span{transform:rotate(45deg)}.faq details>p{font-size:.9375rem;line-height:1.75;color:#656565;padding:0 30px 23px 0}.closing{background:#202020;color:white;border-radius:11px;padding:58px 60px 34px;position:relative;display:grid;grid-template-columns:1fr 260px;gap:30px;align-items:center;overflow:hidden}.closing .eyebrow{color:#b8b8b8}.closing h2{font-size:3.5rem;font-weight:450;line-height:1.07;letter-spacing:-.055em;margin-top:24px}.closing p:not(.eyebrow){font-size:1rem;line-height:1.7;color:#c5c5c5;max-width:460px;margin-top:24px}.closing .button{margin-top:26px}.closing-mark{width:235px;height:235px;justify-self:end;background:#4b4b4b;mask:url(/favicon.svg) center/contain no-repeat;-webkit-mask:url(/favicon.svg) center/contain no-repeat}.closing-foot{font:400 .75rem/1.5 var(--mono);letter-spacing:.11em;color:#969696;grid-column:1/-1;border-top:1px solid #454545;padding-top:25px;margin-top:12px}.footer{padding-block:53px 28px}.footer-top{display:grid;grid-template-columns:1fr 1.3fr 1fr .8fr;gap:35px;padding-bottom:45px}.footer-top>p{font-size:.875rem;line-height:1.6;color:#777}.footer-top>div{display:flex;flex-direction:column;gap:12px;font-size:.8125rem;line-height:1.5}.footer-top button{text-align:left;padding:0;font-size:inherit}.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #dedede;padding-top:21px;font-size:.75rem;line-height:1.7;color:#7b7b7b}dialog{width:min(570px,calc(100% - 28px));max-height:90dvh;overflow:auto;border:1px solid #cfcfcf;border-radius:12px;padding:34px;color:#202020;box-shadow:0 24px 80px #0003}dialog::backdrop{background:#101010b8;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:13px;top:10px;font-size:1.75rem;line-height:1;padding:6px 10px;color:#777}dialog h2{font-size:2rem;letter-spacing:-.055em;font-weight:500;line-height:1.12;margin:18px 0}form{display:grid;gap:14px}form label{display:block;font-size:.8125rem;font-weight:500}input,select,textarea{display:block;width:100%;border:1px solid #b9b9b9;border-radius:5px;padding:10px 11px;margin-top:6px;background:white;font-size:.875rem;line-height:1.5}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#858585;font-size:.8125rem}form>.button{margin-top:5px;width:100%}#contact-result h3{font-size:1.4rem;letter-spacing:-.03em;font-weight:500;margin-bottom:16px}#contact-result p{font-size:.9375rem;line-height:1.7;color:#656565}#contact-result button{margin-top:24px}
@media(min-width:1450px){.section-width{width:min(1280px,calc(100% - 112px))}.hero{gap:85px;padding-top:95px}.hero h1{font-size:5.4rem}.hero-visual{padding:29px}.hero-support{max-width:490px}.source-card strong{max-width:none}.example-title h2{font-size:1.9rem}.product-copy{max-width:315px}#product-panel,.product-panel{grid-template-columns:335px 1fr;gap:48px}.app-window table{font-size:.8125rem}.app-window th{font-size:.75rem}}
@media(max-width:1100px){.header-inner{gap:20px}.header nav{gap:20px;font-size:.8125rem}.header .button.small{font-size:.75rem;gap:12px}.hero{gap:35px}.hero h1{font-size:4.1rem}.hero-intro{font-size:1.2rem}.hero-actions{gap:18px}.hero-actions .quiet-link{font-size:.8125rem}.hero-visual{padding:21px 17px}.source-card{margin-left:7px;margin-right:7px}.example-title h2{font-size:1.45rem}.order-example{padding:17px}.visual-foot{flex-wrap:wrap}.section-heading{gap:40px}.section-heading h2{font-size:2.2rem}.section-heading h2 br{display:none}#product-panel,.product-panel{grid-template-columns:260px 1fr;gap:25px;padding:30px 22px}.product-copy h3{font-size:1.4rem}.app-context{display:none}.app-toolbar{padding:0 12px;gap:15px}.app-body{padding:16px 10px}.feature-grid{gap:24px}.flow-track button{padding-inline:12px}.flow-track strong{font-size:.9375rem}.flow-track small{font-size:.75rem}.offer-card{padding:25px}.offer-card h3{font-size:1.5rem}.integration-grid{grid-template-columns:1fr 1fr}.integration-grid>div:last-of-type{grid-column:1/-1}.faq{gap:55px}.closing{padding-inline:40px;grid-template-columns:1fr 180px}.closing-mark{width:175px;height:175px}}
@media(max-width:800px){.section-width{width:calc(100% - 40px)}.header-inner{width:calc(100% - 40px);min-height:72px;flex-wrap:wrap;gap:15px;position:relative}.logo img{width:103px;height:auto}.header nav{display:none;position:absolute;top:72px;left:-20px;right:-20px;background:white;padding:24px 20px;border-bottom:1px solid #ddd;box-shadow:0 10px 15px #00000006;font-size:.9375rem;flex-direction:column;align-items:start;gap:22px}.header nav.open{display:flex}.menu-toggle{display:flex;align-items:center;gap:7px;font-size:.75rem;margin-left:auto;padding:7px 0}.header .button.small{font-size:.75rem;padding:8px 10px;min-height:34px;gap:12px}.hero{grid-template-columns:1fr;gap:38px;padding:43px 0 44px}.hero-copy{max-width:570px}.hero h1{font-size:clamp(3.25rem,9vw,4.8rem);letter-spacing:-.06em}.hero-copy .eyebrow{margin-bottom:20px}.hero-intro{font-size:1.25rem;max-width:440px;margin-top:24px}.hero-support{font-size:1rem;max-width:510px}.hero-actions{gap:21px;margin-top:25px}.hero-bottom{margin-top:24px}.hero-visual{max-width:580px;width:100%;justify-self:center;padding:23px}.visual-heading{font-size:.75rem}.source-card{margin:26px 17px 0}.source-card strong{font-size:.9375rem}.example-title h2{font-size:1.8rem}.order-example{padding:22px}.progress-steps{font-size:.75rem}.visual-foot{font-size:.75rem}.action-box small{font-size:.75rem}.action-box strong{font-size:.875rem}.section-heading{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.section-heading h2{font-size:2.2rem}.section-heading>p{max-width:550px;justify-self:start;font-size:1rem}.product-section{padding-block:62px}.product-tabs{gap:24px;overflow-x:auto}.product-tabs>button{white-space:nowrap;font-size:.8125rem;gap:8px;padding:16px 0}.product-tabs>button>span{font-size:.75rem}#product-panel,.product-panel{grid-template-columns:1fr;gap:26px;padding:26px 20px;min-height:0}.product-copy h3{font-size:1.7rem;max-width:360px}.product-copy p{max-width:530px}.product-copy ul{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:17px}.product-copy li{font-size:.8125rem}.app-window th{font-size:.75rem}.app-window table{min-width:480px}.app-window td{font-size:.75rem}.app-body{padding:17px 12px}.feature-foot{font-size:.75rem;flex-wrap:wrap;gap:8px}.feature-grid{grid-template-columns:1fr;gap:26px;margin-top:28px}.feature-grid h3{max-width:none;font-size:1.2rem;margin-top:12px}.feature-grid p{margin-top:10px;max-width:550px;font-size:1rem}.flow-section{padding-block:52px 35px}.flow-track{display:grid;grid-template-columns:repeat(5,minmax(128px,1fr));overflow-x:auto;padding-bottom:5px}.flow-track button{padding:18px 12px}.flow-track strong{font-size:.875rem}.flow-track small{font-size:.75rem}.flow-detail{grid-template-columns:1fr;gap:15px;padding-top:22px;min-height:200px}.flow-detail>p:nth-child(2){grid-row:auto;font-size:1rem}.flow-detail>span{margin-top:3px}.flow-note{font-size:.75rem}.offers-section{padding-block:65px 48px}.offers-grid{grid-template-columns:1fr;gap:20px}.offer-card{padding:28px;max-width:none}.offer-card h3{font-size:1.7rem}.offer-card>p{max-width:530px;font-size:1rem}.offer-card li{font-size:.875rem}.offer-price{margin-bottom:22px}.offer-price>span{font-size:.8125rem}.integrations{grid-template-columns:1fr;gap:32px;padding-block:35px}.integrations h2{font-size:1.75rem}.integration-grid{grid-template-columns:repeat(3,1fr);gap:24px 14px}.integration-grid>div:last-of-type{grid-column:auto}.integration-grid>div>span,.integration-grid>p{font-size:.75rem}.industry{padding-block:55px;grid-template-columns:1fr;gap:26px}.industry-label{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.industry-label .badge{margin-top:0}.industry-content h2{font-size:2rem}.industry-content>p{margin-top:20px}.channels{gap:18px;margin-block:26px}.channels p{font-size:.8125rem}.faq{grid-template-columns:1fr;padding-block:57px;gap:28px}.faq h2{font-size:2.25rem}.faq h2 br{display:none}.faq>div>p:last-child:not(.eyebrow){max-width:none;margin-top:16px}.faq summary{font-size:.9375rem;padding:18px 0;gap:15px}.faq details>p{padding-right:12px;font-size:1rem}.closing{grid-template-columns:1fr;gap:25px;padding:35px 28px 25px;border-radius:8px}.closing h2{font-size:2.9rem;margin-top:19px}.closing-mark{display:none}.closing p:not(.eyebrow){font-size:1rem;margin-top:20px}.closing-foot{font-size:.75rem;padding-top:20px;margin-top:0}.footer{padding-block:36px 22px}.footer-top{grid-template-columns:1fr 1fr;gap:25px;padding-bottom:30px}.footer-top>p{font-size:.8125rem}.footer-top>div{font-size:.875rem;gap:13px}.footer-bottom{flex-direction:column;gap:10px;font-size:.75rem}dialog{padding:30px 24px}}
@media(max-width:400px){.header-inner{gap:11px}.header .button.small{font-size:.75rem;padding:8px;gap:5px}.header .button.small>span{display:none}.logo img{width:91px}.hero h1{font-size:3.05rem}.hero-intro{font-size:1.125rem}.hero-actions{gap:19px}.hero-actions .button{font-size:.8125rem}.hero-visual{padding:19px 13px}.visual-heading{font-size:.75rem}.source-card{margin-left:8px;margin-right:8px;padding:15px 11px}.source-card strong{font-size:.8125rem}.order-example{padding:18px 13px}.example-title h2{font-size:1.5rem}.progress-steps{font-size:.75rem}.action-box{gap:8px;padding:12px 9px}.action-box strong{font-size:.75rem}.action-box small{font-size:.75rem}.action-number{width:25px;height:25px}.order-example dl>div{font-size:.75rem}.visual-foot{font-size:.75rem}.section-heading h2{font-size:1.95rem}.offer-card{padding:24px 20px}.offer-card h3{font-size:1.5rem}.offer-category{font-size:.75rem}.offer-top{gap:10px}.offer-top .badge{font-size:.75rem}.offer-card>.button{font-size:.8125rem}.integration-grid{grid-template-columns:1fr 1fr}.integration-grid>div:last-of-type{grid-column:1/-1}.channels{grid-template-columns:1fr;gap:18px}.channels>div{display:flex;gap:25px;align-items:start}.channels .mono{width:70px;flex-shrink:0}.channels p{margin:0}.channels p br{display:none}.closing{padding-inline:24px}.closing h2{font-size:2.4rem}.footer-top{gap:24px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* V02 — arquitetura em páginas, identidade compartilhada. */
.header nav [aria-current="page"]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px;color:#202020}.page-bridge{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:60px;border-bottom:1px solid #dedede}.page-bridge h2{font-size:2rem;line-height:1.2;font-weight:500;letter-spacing:-.045em;margin-top:17px}.page-bridge p:not(.eyebrow){font-size:1rem;line-height:1.75;color:#666;max-width:630px;margin-top:17px}.page-bridge .button{flex-shrink:0}.page-hero h1{font-size:clamp(2.9rem,4.65vw,4.55rem)}.team-panel{border:1px solid #d7d7d7;border-radius:10px;overflow:hidden;background:#f7f7f7;padding:26px 28px}.team-panel-top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid #d9d9d9}.team-panel-top .eyebrow{color:#646464}.team-group{padding:25px 0}.team-group>.mono{font-size:.75rem;color:#6b6b6b;letter-spacing:.1em}.team-group h2{font-size:2.1rem;font-weight:500;letter-spacing:-.045em;line-height:1.15;margin-top:15px}.team-group p{color:#737373;font-size:.8125rem;line-height:1.6;margin-top:12px}.team-group.merchant{border-top:1px solid #d9d9d9;padding:21px 0}.team-group h3{font-size:1.25rem;font-weight:500;letter-spacing:-.035em;line-height:1.4;margin-top:10px}.team-price{display:flex;align-items:center;gap:18px;padding-top:22px;border-top:1px solid #d9d9d9}.team-price>strong{font-size:2.6rem;font-weight:400;line-height:1}.team-price>div{font-size:.875rem;line-height:1.5}.team-price small{display:block;color:#737373;font-size:.75rem;margin-top:5px}.service-scope,.industry-channels{padding-block:78px}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px}.service-grid article{border-top:1px solid #d9d9d9;padding-top:23px}.service-grid h3{font-size:1.35rem;font-weight:500;letter-spacing:-.035em;line-height:1.3;margin-top:17px;max-width:360px}.service-grid p{font-size:1rem;line-height:1.75;color:#676767;margin-top:14px;max-width:500px}.service-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.service-grid ul{list-style:none;padding:0;margin:23px 0 0}.service-grid li{font-size:.875rem;line-height:1.6;border-top:1px solid #e7e7e7;padding:10px 0}.service-grid li:before{content:'—';color:#929292;margin-right:9px}.commercial-model{display:grid;grid-template-columns:1.5fr 1fr;gap:40px 70px;align-items:center;padding-block:80px 40px}.commercial-model h2{font-size:2.25rem;line-height:1.15;letter-spacing:-.055em;font-weight:500;margin-top:18px}.commercial-model p{font-size:1rem;line-height:1.75;color:#686868;margin-top:24px;max-width:650px}.commercial-model .quiet-link{margin-top:25px}.model-figure{border-left:1px solid #d9d9d9;padding-left:50px;justify-self:end}.model-figure>.mono{font-size:5.6rem;letter-spacing:-.08em;line-height:1.1;white-space:nowrap}.model-figure>.mono>span{font-size:3.5rem;letter-spacing:-.05em}.model-figure p{font-size:1rem;margin-top:10px}.model-figure small{display:block;font-size:.75rem;color:#777;margin-top:8px;line-height:1.6}.commercial-model .responsibilities{grid-column:1/-1;margin-top:0;width:100%}.fit-section{padding-block:50px 20px}.fit-section .feature-grid{margin-top:0}.channel-panel{background:#f6f7f8;border:1px solid #dce0e4;border-radius:10px;padding:28px}.channel-origin{display:flex;align-items:center;gap:20px;padding:9px 0 29px}.channel-origin .brand-symbol{width:38px;height:38px}.channel-origin .eyebrow{font-size:.75rem;color:#6b737d}.channel-origin h2{font-size:1.7rem;font-weight:500;letter-spacing:-.04em;margin-top:7px}.channel-destination{display:flex;gap:20px;align-items:center;border-top:1px solid #d7dde3;padding:24px 0}.channel-destination>.mono{font-size:.8125rem;color:#727e8a}.channel-destination strong{font-size:1rem;font-weight:500}.channel-destination small{display:block;font-size:.8125rem;color:#69747d;margin-top:7px;line-height:1.6}.channel-destination>span:last-child{margin-left:auto;color:#727e8a}.channel-panel>p{font-size:.8125rem;line-height:1.7;color:#6a757f;border-top:1px solid #d7dde3;padding-top:23px}.industry-hero .hero-bottom{align-items:center;gap:15px}.industry-channels{border-top:1px solid #ddd}.scope-note{font-size:.75rem;line-height:1.7;color:#737373;margin-top:30px}.project-steps{padding-top:10px;padding-bottom:45px}.project-steps .feature-grid{margin-top:0}
@media(max-width:1050px){.page-hero h1{font-size:3.3rem}.team-panel{padding:23px}.team-group h2{font-size:1.85rem}.commercial-model{gap:40px}.commercial-model h2{font-size:2rem}.model-figure{padding-left:35px}.channel-panel{padding:24px}.service-grid.three{gap:24px}}
@media(max-width:800px){.page-hero h1{font-size:clamp(2.9rem,8.5vw,4.3rem)}.page-bridge{flex-direction:column;align-items:start;gap:25px;padding-block:42px}.page-bridge h2{font-size:1.85rem}.page-bridge .button{font-size:.875rem}.team-panel,.channel-panel{max-width:580px;width:100%;justify-self:center;padding:24px}.team-group h2{font-size:2rem}.team-group h3{font-size:1.2rem}.team-price{padding-top:20px}.service-scope,.industry-channels{padding-block:52px}.service-grid,.service-grid.three{grid-template-columns:1fr;gap:29px}.service-grid h3{max-width:none;font-size:1.3rem}.service-grid p{max-width:none}.commercial-model{grid-template-columns:1fr;padding-block:54px 30px;gap:30px}.commercial-model h2{font-size:2rem}.model-figure{border-left:0;border-top:1px solid #ddd;padding:24px 0 0;justify-self:stretch}.model-figure>.mono{font-size:4.5rem}.commercial-model .responsibilities{grid-column:auto}.fit-section{padding-block:30px 0}.channel-origin h2{font-size:1.65rem}.channel-destination{padding-block:21px}.industry-hero .hero-bottom{flex-wrap:wrap}.project-steps{padding-top:5px;padding-bottom:20px}.scope-note{margin-top:22px}}
@media(max-width:400px){.page-hero h1{font-size:2.85rem}.team-panel,.channel-panel{padding:21px}.team-panel-top .eyebrow{font-size:.6875rem;letter-spacing:.08em}.team-group h2{font-size:1.9rem}.commercial-model h2{font-size:1.85rem}.channel-destination{gap:13px}.channel-destination small{font-size:.75rem}.hero-actions>.button{font-size:.8125rem;gap:15px}.page-bridge h2 br{display:none}}
/* ── v11/dark.css ── */
/* V03 preta. A estrutura e a tipografia são preservadas; superfícies e estados
   são tratados por contexto para manter a leitura em fundo escuro. */
:root{--ink:#f0f0f0;--muted:#a9a9ad;--line:#303034;--soft:#17181b;--blue:#8abaff;background:#090a0b;color:#f0f0f0;color-scheme:dark}
body{background:#090a0b;color:#f0f0f0}
::selection{background:#9bc5ff;color:#081322}
.header{background:#090a0bef;border-color:#292a2d}.header nav a{color:#bfc0c5}.header nav a:hover{color:#fff}.header nav [aria-current="page"]{color:#fff;text-decoration-color:#f0f0f0}
.button{background:#f0f0f0;border-color:#f0f0f0;color:#131416}.button:hover{background:#fff;border-color:#fff;color:#090a0b}.button.outline{background:transparent;border-color:#63656c;color:#eee}.button.outline:hover{background:#232428;border-color:#8e9099;color:#fff}.button.white{background:#f0f0f0;border-color:#f0f0f0;color:#131416}.button.white:hover{background:#fff;color:#090a0b}
.hero h1>span{color:#919297}.hero-intro{color:#dddde0}.hero-support,.hero-bottom{color:#a8a9b0}.hero-copy .eyebrow{color:#c3c4ca}.hero-bottom .brand-symbol{color:#e1e2e6}
.hero-visual{background:#12161c;border-color:#303844;color:#e9edf2;box-shadow:0 18px 70px #00000035}.visual-heading{color:#aab5c5}.source-card{background:#20262f;border-color:#3d4756}.source-card:before{background:#181d25;border-color:#3d4756}.source-icon{color:#b0c6e3}.source-card small{color:#a8b6ca}.source-card strong{color:#e7edf6}.connection{background:#54657d}
.order-example{background:#151b23;border-color:#3a4657;box-shadow:0 12px 30px #0002}.order-example-top{color:#b3c1d4}.example-title h2{color:#eef3fa}.example-title>span{color:#94a7c0}.order-example dl>div{border-color:#333d4b}.order-example dt{color:#a9b5c6}.order-example dd{color:#e1e9f3}.action-box{background:#192f4c;border-color:#36577f;color:#b8d7ff}.action-number{border-color:#5f85b7;color:#c3ddff}.progress-steps{color:#a3b0c2}.progress-steps>span{border-color:#3b485b}.progress-steps .done{border-color:#7ab99a}.progress-steps .active{border-color:#8abaff;color:#bdd7ff}.visual-foot{color:#a3b0c2}
.badge.success{background:#1c3c2f;color:#a7dfbf}.badge.warning{background:#433719;color:#f0d28b}.badge.info{background:#213a56;color:#b9d8ff}.badge.neutral{background:#292b30;color:#c4c6cd}
.section-heading>p{color:#abacb3}.eyebrow{color:#b8b9c0}.product-tabs{border-color:#41434a}.product-tabs>button{color:#b0b1b9}.product-tabs>button>span{color:#9ea0aa}.product-tabs>button[aria-selected="true"]{color:#f0f0f0;border-bottom-color:#ededed}.product-tabs>button[aria-selected="true"]>span{color:#98c3ff}
#product-panel,.product-panel{background:#141518;border-color:#33353b}.product-copy h3{color:#ebebef}.product-copy p{color:#b0b1b8}.product-copy li{color:#b9bac2}.product-copy li:before{color:#adaeb8}
.app-window{background:#1a1b1e;border-color:#47494f;color:#e3e3e8;box-shadow:0 12px 35px #0003}.app-toolbar{background:#232428;border-color:#404148;color:#babcc5}.app-context{color:#a9abb4}.app-avatar{background:#3c3e46;color:#e9eaf0}.app-body{background:#1a1b1e}.app-title h4{color:#eeeef2}.app-title>span{color:#aeb0bb}.app-window th{background:#24252a;color:#c1c3cd;border-color:#42444d}.app-window td{color:#e3e4eb;border-color:#383a42}.app-window td small{color:#b0b3bf}.app-note{color:#b1b3be}
.feature-foot{color:#a4a6b0}.feature-foot a{color:#d8d9e2}.feature-grid article{border-color:#393b42}.feature-index{color:#a7aab4}.feature-grid h3{color:#e6e6ec}.feature-grid p{color:#abafb9}
.flow-section{background:#111318;border-color:#2b3038}.flow-track button{background:#171b22;border-color:#3c434e;color:#e6eaf0}.flow-track button:first-child{border-color:#3c434e}.flow-track button>span{color:#a7b2c4}.flow-track small{color:#b0b9c8}.flow-track button.selected{background:#222b39;box-shadow:inset 0 -3px #8abaff}.flow-track button.selected>span{color:#bdd7ff}.flow-detail{border-color:#3b414c}.flow-detail>p:first-child{color:#e1e6ef}.flow-detail>p:nth-child(2){color:#b7bfce}.flow-detail>span{color:#aab5c8}.flow-note{color:#a4b0c3}
.offer-card{background:#141518;border-color:#3b3d43}.signature-card{background:#1a1b20;border-color:#757883}.offer-category{color:#b1b2bb}.offer-card>p{color:#b0b2bd}.offer-lead{color:#e2e3e9!important}.offer-card li{border-color:#363840;color:#c9cbd5}.offer-card li:before{color:#aeb2c0}.offer-price{border-color:#41444e}.offer-price>span{color:#b0b4c1}
.responsibilities{border-color:#42454f}.responsibilities summary{color:#dedfe7}.comparison-scroll caption{color:#b0b4c1}.comparison-scroll th,.comparison-scroll td{border-color:#3b3e47}.comparison-scroll thead{background:#24262d;color:#e1e3ed}.comparison-scroll tbody th{color:#d1d4df}.comparison-scroll td{color:#b8bdcc}
.integrations{border-color:#393b42}.integration-grid>div>span,.integration-grid>p{color:#aeb2bd}.integration-grid strong{color:#e4e6ee}.integration-grid i{color:#a3a8b5}
.industry{border-color:#393b42}.industry-content>p{color:#aeb2be}.channels>div{border-color:#393e49}.channels .mono{color:#dce0ed}.channels p{color:#b4bbcc}
.faq>div>p:last-child:not(.eyebrow){color:#aaadb8}.faq-list,.faq details{border-color:#3c3e47}.faq summary{color:#e5e7ef}.faq summary>span{color:#b4b9c8}.faq details>p{color:#b1b7c7}
.closing{background:#181a1e;border:1px solid #3b3e46;color:#f2f2f4}.closing .eyebrow{color:#b3b8c6}.closing p:not(.eyebrow){color:#c2c6d1}.closing-mark{background:#727783}.closing-foot{border-color:#434852;color:#b0b8c8}
.footer-top>p{color:#adb2c0}.footer-top>div{color:#c9ceda}.footer-bottom{border-color:#3a3e48;color:#aeb6c6}
.page-bridge{border-color:#383d48}.page-bridge p:not(.eyebrow){color:#b0b7c6}.page-bridge h2{color:#e3e6ee}
.team-panel{background:#151619;border-color:#464953}.team-panel-top{border-color:#3f434e}.team-panel-top .eyebrow{color:#b8bfce}.team-panel-top .brand-symbol{color:#e4e8f0}.team-group>.mono{color:#aeb8cd}.team-group h2,.team-group h3{color:#ebedf4}.team-group p{color:#b5bdd0}.team-group.merchant{border-color:#454c59}.team-price{border-color:#454c59}.team-price>strong{color:#edf0f7}.team-price>div{color:#d6dce9}.team-price small{color:#b2bed2}
.service-grid article{border-color:#3e4450}.service-grid h3{color:#e8ebf3}.service-grid p{color:#aeb8cc}.service-grid li{border-color:#3a424f;color:#c4cdde}.service-grid li:before{color:#a8b6cf}.commercial-model h2{color:#e9ecf3}.commercial-model p{color:#b2bdcf}.model-figure{border-color:#485265}.model-figure>.mono{color:#eaf0fb}.model-figure small{color:#aebbd2}
.channel-panel{background:#15181d;border-color:#3b424d}.channel-origin .eyebrow{color:#b5bfd2}.channel-origin h2{color:#e5ebf5}.channel-origin .brand-symbol{color:#cdd9ef}.channel-destination{border-color:#3a4556}.channel-destination>.mono,.channel-destination>span:last-child{color:#b3c3dc}.channel-destination strong{color:#e0e8f6}.channel-destination small{color:#b2c1d8}.channel-panel>p{border-color:#3a4556;color:#b2c1d8}.industry-channels{border-color:#394455}.scope-note{color:#b1c0d8}
dialog{background:#191b20;color:#eef0f5;border-color:#545a69;box-shadow:0 25px 90px #000b}dialog::backdrop{background:#000c}.dialog-close{color:#b9c1d1}input,select,textarea{background:#101319;color:#e5eaf3;border-color:#67748b}input::placeholder,textarea::placeholder{color:#a5b4cb}#contact-result p{color:#b8c5db}
@media(max-width:800px){.header nav{background:#121418;border-color:#454952;box-shadow:0 10px 25px #0005}.header nav a{color:#c6cbd6}.model-figure{border-top-color:#485265}}
/* ── v11/editorial.css ── */
/* V08 — seções de marca independentes das seções de produto e operação. */
.brand-story{background:#0d0f11;border-block:1px solid #25282d;margin-block:32px;padding-block:60px;scroll-margin-top:100px}
.brand-story-inner{max-width:1120px;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(48px,6.5vw,100px);align-items:center}
.brand-story-copy{grid-column:2;grid-row:1;min-width:0;max-width:580px;justify-self:start}
.brand-story-copy>.eyebrow{color:#b8bcc4;font-size:.8125rem;letter-spacing:.15em;line-height:1.6;margin:0 0 25px}
.brand-story-copy h2{font-size:clamp(2.7rem,4.2vw,3.75rem);font-weight:450;line-height:1.08;letter-spacing:-.045em;color:#f0f0f1;margin:0;text-wrap:balance}
.brand-story-copy>.brand-story-text{font-size:1.0625rem;line-height:1.85;color:#b5b8c0;max-width:490px;margin:28px 0 0;text-align:left;justify-self:start}
.brand-story-photo{grid-column:1;grid-row:1;margin:0;display:block;width:100%;max-width:380px;aspect-ratio:2 / 3;overflow:hidden;justify-self:start;border:1px solid #35383d;border-radius:5px;background:#17191d}
.brand-story-photo img{display:block;width:100%;height:100%;object-fit:contain}
.brand-story-reverse{background:#101214}
.brand-story-reverse .brand-story-inner{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.brand-story-reverse .brand-story-copy{grid-column:1}
.brand-story-reverse .brand-story-photo{grid-column:2;max-width:340px;justify-self:end}
@media(max-width:1050px){.brand-story{padding-block:48px}.brand-story-inner{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:44px}.brand-story-reverse .brand-story-inner{grid-template-columns:minmax(0,1fr) minmax(0,300px)}.brand-story-copy h2{font-size:2.75rem}.brand-story-copy>.brand-story-text{font-size:1rem;line-height:1.75;margin-top:24px}}
@media(max-width:800px){.brand-story{padding-block:42px;margin-block:24px}.brand-story-inner,.brand-story-reverse .brand-story-inner{grid-template-columns:minmax(0,1fr);gap:30px}.brand-story-copy,.brand-story-reverse .brand-story-copy,.brand-story-photo,.brand-story-reverse .brand-story-photo{grid-column:auto;grid-row:auto}.brand-story-copy{max-width:590px}.brand-story-copy h2{font-size:clamp(2.25rem,7.2vw,3.25rem);max-width:560px}.brand-story-copy>.eyebrow{margin-bottom:20px}.brand-story-copy>.brand-story-text{max-width:560px}.brand-story-photo,.brand-story-reverse .brand-story-photo{max-width:360px;justify-self:center}}
@media(max-width:400px){.brand-story-copy h2{font-size:2.2rem}.brand-story-copy h2 br{display:none}.brand-story-copy>.brand-story-text{margin-top:20px}.brand-story{padding-block:34px}}

/* ── claryt.com: acréscimos ao desenho da v11 ── */

/* "Entrar": no desktop fica à direita, antes de "Vamos conversar", no tom dos links do menu; no celular
   (menu fechado) sai do topo e vira mais um item do menu. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-login {
  font-size: .875rem;
  color: #bfc0c5;
}
.header-login:hover {
  color: #fff;
}
.header nav .nav-login {
  display: none;
}
@media (max-width: 1100px) {
  .header-actions { gap: 16px; }
  .header-login { font-size: .8125rem; }
}
@media (max-width: 800px) {
  .header-login { display: none; }
  .header nav .nav-login { display: inline; }
}

/* Privacidade e Termos no rodapé e "abra por aqui" no fim do diálogo:
   a cor do texto ao redor, sublinhado discreto */
.footer-bottom a,
#contact-result a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #63656c;
  text-underline-offset: 3px;
}
.footer-bottom a:hover,
#contact-result a:hover {
  text-decoration-color: currentColor;
}

/* exemplo da seção de IA (#ia): o mesmo painel das abas (.product-panel, já no escuro), mas solto —
   borda e cantos nos 4 lados. As colunas seguem as do .product-panel em cada largura. */
.ai-example {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 38px;
  align-items: center;
  background: #141518;
  border: 1px solid #33353b;
  border-radius: 10px;
  padding: 38px 28px;
  min-height: 370px;
}
@media (min-width: 1450px) {
  .ai-example {
    grid-template-columns: 335px 1fr;
    gap: 48px;
  }
}
@media (max-width: 1100px) {
  .ai-example {
    grid-template-columns: 260px 1fr;
    gap: 25px;
    padding: 30px 22px;
  }
}
@media (max-width: 800px) {
  .ai-example {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 20px;
    min-height: 0;
  }
}

/* integrações em 2 colunas (≤1100 e ≤400): a última categoria só ocupa a linha inteira quando sobra
   sozinha (total ímpar). Com total par ela fica na sua coluna. */
.integration-grid > div:nth-of-type(even):last-of-type {
  grid-column: auto;
}

/* fio entre as duas .product-section seguidas (#plataforma → #ia): cai no meio do vão, na largura do
   conteúdo, com a cor de borda das .integrations */
.ai-section {
  border-top: 1px solid #393b42;
}

/* ── divisões entre seções ──
   Entre duas seções de conteúdo seguidas, UM fio na largura do conteúdo, no começo da segunda (o mesmo do
   #ia). Faixa com fundo próprio (.brand-story, .flow-section) já traz a sua borda: o vizinho não repete o
   fio, e duas faixas seguidas encostam numa linha só. Os fios de fim de seção da v11 (.integrations,
   .page-bridge) saem: o fio da seção seguinte, ou a borda da faixa, já faz a divisão. */
:where(main > .section-width) + .section-width:not(.closing) {
  border-top: 1px solid #393b42;
}
.integrations,
.page-bridge {
  border-bottom: 0;
}
:is(.brand-story, .flow-section) + .section-width {
  border-top: 0;
}
/* o preço do Signature termina em "Veja o que fica com cada equipe", que já é uma linha */
.commercial-model + .fit-section {
  border-top: 0;
}
.brand-story:has(+ .flow-section) {
  margin-bottom: 0;
}
.brand-story + .flow-section {
  border-top: 0;
}
.flow-section + .brand-story {
  margin-top: 0;
  border-top: 0;
}
/* respiro das seções de borda curta quando ficam entre fios ou antes de uma faixa */
.flow-section + .integrations {
  padding-top: 78px;
}
.section-width + .project-steps {
  padding-block: 78px 60px;
}
.fit-section {
  padding-bottom: 60px;
}
@media (max-width: 800px) {
  .flow-section + .integrations {
    padding-top: 52px;
  }
  .section-width + .project-steps {
    padding-block: 52px 42px;
  }
  .fit-section {
    padding-bottom: 42px;
  }
}

/* ── movimento ──
   Régua: opacidade + até 16 px, 300–600 ms, sempre a mesma curva (ease-out). Estado escondido só sob
   html.js-motion (o site.js liga quando há JS e não há "reduzir movimento") e só com
   prefers-reduced-motion: no-preference — sem isso a página mostra o estado final, parado. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}
@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* sobe e aparece; a distância vem de --rise (padrão 12 px) */
@keyframes motion-rise {
  from { opacity: 0; transform: translateY(var(--rise, 12px)); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes motion-lift {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* hover de botões e links: só cor, borda e sublinhado (nada de opacidade/posição, que são do data-reveal) */
.button {
  transition: background-color .3s var(--motion-ease), border-color .3s var(--motion-ease), color .3s var(--motion-ease);
}
.header nav a,
.footer-top a,
.footer-top button,
.feature-foot a,
.dialog-close,
.product-tabs > button,
.product-tabs > button > span,
summary {
  transition: color .3s var(--motion-ease), border-color .3s var(--motion-ease);
}
.footer-top a:hover,
.footer-top button:hover {
  color: #fff;
}
/* o sublinhado do link discreto já existe, transparente, e só ganha cor no hover */
.quiet-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.quiet-link:hover {
  text-decoration-color: currentColor;
}
.quiet-link,
.footer-bottom a,
#contact-result a {
  transition: text-decoration-color .3s var(--motion-ease);
}
summary > span {
  transition: transform .3s var(--motion-ease);
}

/* cross docking: as explicações das etapas ficam empilhadas na mesma célula — a altura é a da mais longa
   e a página não pula na troca; a escondida fica invisível no lugar em vez de sair do fluxo */
[data-steps] > [aria-live] {
  display: grid;
}
[data-steps] > [aria-live] > .flow-detail {
  grid-area: 1 / 1;
}
[data-steps] > [aria-live] > .flow-detail[hidden] {
  display: grid !important;
  visibility: hidden;
  opacity: 0;
}
/* etapa já percorrida: um traço baixo e discreto, abaixo do azul da etapa atual */
.flow-track button.is-done {
  box-shadow: inset 0 -2px #54657d;
}
.flow-track button {
  transition: background-color .4s var(--motion-ease), box-shadow .4s var(--motion-ease);
}
.flow-track button > span {
  transition: color .4s var(--motion-ease);
}

@media (prefers-reduced-motion: no-preference) {
  /* troca de etapa e de aba: a nova aparece com um fade curto */
  .js-motion [data-steps] > [aria-live] > .flow-detail:not([hidden]) {
    transition: opacity .45s var(--motion-ease);
  }
  .js-motion .product-panel:not([hidden]) {
    animation: motion-fade .35s var(--motion-ease);
  }
  /* resposta de uma dúvida ao abrir */
  .js-motion details[open] > :not(summary) {
    animation: motion-fade .35s var(--motion-ease);
  }

  /* diálogo de contato: a caixa sobe 8 px e o fundo escurece junto */
  .js-motion dialog[open] {
    animation: motion-lift .4s var(--motion-ease);
  }
  .js-motion dialog[open]::backdrop {
    animation: motion-fade .4s var(--motion-ease);
  }

  /* [data-cycle]: quem recebe .is-active/.is-done troca de estado suave (o desenho de cada estado é da seção) */
  .js-motion [data-cycle-at] {
    transition: opacity .45s var(--motion-ease), color .45s var(--motion-ease), border-color .45s var(--motion-ease), background-color .45s var(--motion-ease), fill .45s var(--motion-ease), stroke .45s var(--motion-ease);
  }

  /* [data-play] abaixo da dobra: cada .play-item entra uma vez, em sequência por --i, quando o contêiner
     ganha .is-in. Linha de tabela só aparece (transform em <tr> não é confiável). Painel do topo (hero) não
     espera o .is-in: anima no carregamento, nas regras da própria página. */
  .js-motion [data-play] .play-item {
    opacity: 0;
  }
  .js-motion [data-play].is-in .play-item {
    --rise: 10px;
    animation: motion-rise .5s var(--motion-ease) calc(var(--i, 0) * .45s + .15s) both;
  }
  .js-motion [data-play].is-in tr.play-item {
    animation-name: motion-fade;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 800px) {
  /* menu do celular desce 8 px ao abrir */
  .js-motion .header nav.open {
    animation: motion-drop .3s var(--motion-ease);
  }
}
/* ── Plataforma: painel do topo (pedido #1048, [data-cycle]) ── */
/* estados de uma etapa empilhados no mesmo lugar; só o atual aparece (vale sem JS: o servidor já marca a etapa 1) */
.cycle-stack {
  display: inline-grid;
}
.cycle-stack > * {
  grid-area: 1 / 1;
}
.cycle-stack > :not(.is-active) {
  opacity: 0;
}
.order-example-top .cycle-stack {
  justify-items: end;
}
.action-box .cycle-stack {
  flex: 1;
  min-width: 0;
}
.action-step {
  display: flex;
  align-items: center;
  gap: 11px;
}
.progress-steps > .is-done {
  border-color: #7ab99a;
}
.progress-steps > .is-active {
  border-color: #8abaff;
  color: #bdd7ff;
}
/* um ponto desce o fio do catálogo ao pedido a cada troca de etapa */
.connection {
  position: relative;
}
.connection-dot {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8abaff;
  opacity: 0;
}
@keyframes connection-drop {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(22px); }
}
@media (max-width: 400px) {
  .action-step {
    gap: 8px;
  }
}

/* ── Plataforma: vitrine em miniatura (#loja) — janela escura no desenho da .app-window ── */
.store-preview {
  margin-bottom: 48px;
  background: #1a1b1e;
  border: 1px solid #47494f;
  border-radius: 8px;
  overflow: hidden;
  color: #e3e3e8;
}
.store-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 47px;
  padding: 0 17px;
  background: #232428;
  border-bottom: 1px solid #404148;
  color: #babcc5;
  font-size: .75rem;
}
.store-url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid #404148;
  border-radius: 999px;
  font: 400 .75rem var(--mono);
  color: #e3e3e8;
  white-space: nowrap;
}
.store-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.store-url .store-icon {
  color: #a7dfbf;
}
.store-flags {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.store-body {
  padding: 18px 17px 20px;
}
.store-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.store-brand {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #eeeef2;
}
.store-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  padding: 6px 10px;
  border: 1px solid #404148;
  border-radius: 6px;
  font-size: .75rem;
  color: #aeb0bb;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.store-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #141518;
  border: 1px solid #383a42;
  border-radius: 6px;
}
.store-art {
  display: block;
  width: 100%;
  height: 132px;
  margin-bottom: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #aeb0bb;
}
/* o traço não engrossa com a escala do viewBox */
.store-art * {
  vector-effect: non-scaling-stroke;
}
.store-name {
  font-size: .8125rem;
  line-height: 1.4;
  color: #e3e4eb;
}
.store-price {
  font-size: .8125rem;
  color: #eeeef2;
}
/* "Comprar" de mentira (o bloco é role="img"), nas cores do .button escuro */
.store-buy {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 5px;
  background: #f0f0f0;
  color: #131416;
  font-size: .75rem;
  font-weight: 550;
}
@media (max-width: 1100px) {
  .store-art {
    height: 110px;
  }
}
@media (max-width: 800px) {
  .store-preview {
    margin-bottom: 32px;
  }
  .store-bar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 12px;
  }
  .store-flags {
    margin-left: 0;
  }
  .store-body {
    padding: 14px 12px 16px;
  }
  .store-grid {
    gap: 10px;
  }
  .store-art {
    height: 90px;
  }
  .store-name,
  .store-price {
    font-size: .75rem;
  }
}
@media (max-width: 480px) {
  .store-search {
    width: auto;
  }
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .store-card:nth-child(3) {
    display: none;
  }
  .store-art {
    height: 76px;
  }
}

/* ── Signature: quadro ao vivo (figure.live-board[data-play], no fim do #escopo) ──
   Estado final parado: a situação nova e quem agiu. A anterior (.live-from) fica empilhada embaixo, invisível. */
.live-board {
  margin: 56px 0 0;
  background: #12161c;
  border: 1px solid #303844;
  border-radius: 12px;
  overflow: hidden;
  color: #f0f0f0;
}
.live-board-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #303844;
  font-size: .75rem;
  letter-spacing: .08em;
  color: #a9a9ad;
}
.live-board-scope {
  margin-left: auto;
}
.live-board-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a7dfbf;
}
.live-board-head,
.live-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 160px 140px;
  gap: 16px;
  padding: 0 20px;
}
.live-board-head {
  padding-block: 10px;
  border-bottom: 1px solid #303034;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: #a9a9ad;
}
.live-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.live-row {
  position: relative;
  align-items: center;
  padding-block: 14px;
  border-bottom: 1px solid #303034;
}
.live-row:last-child {
  border-bottom: 0;
}
/* marca de "agindo agora" na borda esquerda: só aparece durante a entrada */
.live-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #8abaff;
  opacity: 0;
}
.live-store {
  font-size: .875rem;
  font-weight: 500;
}
.live-store small {
  display: block;
  margin-top: 3px;
  font-size: .6875rem;
  letter-spacing: .08em;
  color: #a9a9ad;
}
.live-what {
  font-size: .875rem;
  color: #c4c6cd;
}
.live-state {
  display: grid;
}
.live-state > .badge {
  grid-area: 1 / 1;
  justify-self: start;
}
.live-from {
  opacity: 0;
}
.live-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  white-space: nowrap;
}
.live-who svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.live-who.agent {
  color: #8abaff;
}
.live-who.person {
  color: #c4c6cd;
}
.live-board figcaption {
  padding: 14px 20px;
  border-top: 1px solid #303844;
  font-size: .8125rem;
  line-height: 1.6;
  color: #a9a9ad;
}
@keyframes live-mark {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 800px) {
  .live-board {
    margin-top: 40px;
  }
  .live-board-bar,
  .live-board figcaption {
    padding-inline: 16px;
  }
  .live-board-head {
    display: none;
  }
  .live-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "store state" "what what" "who who";
    row-gap: 6px;
    padding-inline: 16px;
  }
  .live-store { grid-area: store; }
  .live-what { grid-area: what; }
  .live-state { grid-area: state; }
  .live-who { grid-area: who; }
  /* a situação fica na borda direita da linha, mesmo quando a anterior era mais larga */
  .live-state > .badge {
    justify-self: end;
  }
}
@media (max-width: 560px) {
  .live-board-scope {
    display: none;
  }
}

/* ── Indústrias: painel do topo (.channel-panel) — a árvore da indústria aos três compradores ── */
/* recuo de 58 px (estrela de 38 + gap de 20 da .channel-origin): o "01" alinha com "PONTO DE PARTIDA" */
.channel-map {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  padding-left: 58px;
}
.channel-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
}
.channel-seg,
.channel-branch {
  stroke: #3d4756;
  stroke-width: 1;
}
.channel-node {
  stroke: #3d4756;
  stroke-width: 1;
  fill: #15181d;
}
/* comprador da vez: o caminho da estrela até ele acende no azul de ativo */
.channel-seg.is-active,
.channel-seg.is-done,
.channel-branch.is-active {
  stroke: #8abaff;
}
.channel-node.is-active {
  stroke: #8abaff;
  fill: #8abaff;
}
.channel-destination.is-active > .mono,
.channel-destination.is-active > span:last-child {
  color: #8abaff;
}
@keyframes channel-draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  8% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* ── Indústrias: registro de uma atividade (.ai-record[data-play], no fim da #ia) ── */
.ai-record {
  margin-top: 48px;
  padding: 28px;
  background: #12161c;
  border: 1px solid #303844;
  border-radius: 10px;
}
.ai-record-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
}
.ai-record-head .eyebrow {
  color: #a9a9ad;
}
.ai-record-head strong {
  font-size: 1rem;
  font-weight: 500;
  color: #f0f0f0;
}
.ai-record-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-record-steps > li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid #303844;
}
.ai-record-k {
  font: 400 .75rem var(--mono);
  letter-spacing: .07em;
  color: #a9a9ad;
}
.ai-record-steps li p {
  max-width: 640px;
  font-size: .9375rem;
  line-height: 1.6;
  color: #f0f0f0;
}
.ai-record-file {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #303844;
  border-radius: 4px;
  font: 400 .75rem var(--mono);
  color: #a9a9ad;
  white-space: nowrap;
}
.ai-record-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ai-record-option {
  padding: 3px 8px;
  border: 1px solid #303844;
  border-radius: 4px;
  font-size: .8125rem;
  color: #a9a9ad;
}
.ai-record-option.is-chosen {
  border-color: #8abaff;
  color: #8abaff;
}
.ai-record-steps .ai-record-note {
  margin-top: 8px;
  font-size: .8125rem;
  color: #a9a9ad;
}
@media (max-width: 800px) {
  .ai-record {
    margin-top: 32px;
    padding: 24px;
  }
  .ai-record-steps > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ai-record-steps > li > .badge {
    justify-self: start;
  }
}
@media (max-width: 400px) {
  .ai-record {
    padding: 21px;
  }
}

/* ── leitura em qualquer largura ── */
/* títulos de seção e de grade sem palavra sozinha na última linha */
h2,
h3 {
  text-wrap: balance;
}
/* nota de escopo (Indústrias) numa medida de leitura */
.scope-note {
  max-width: 68ch;
}
/* provedores das integrações: cada nome inteiro numa linha; o "/" fica no FIM do item, então nenhuma linha
   começa por ele */
.provider-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
  color: #e4e6ee;
}
.provider-list > li {
  white-space: nowrap;
}
.provider-list > li:not(:last-child)::after {
  content: "/";
  margin: 0 6px;
  font-weight: 400;
  color: #a3a8b5;
}
/* nomes inteiros não encolhem: com 3 colunas a grade passava da tela até ~440 px ("WhatsApp oficial /"
   tem 131 px); abaixo de 480 px ficam 2 colunas, como já era abaixo de 400 */
@media (max-width: 480px) {
  .integration-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* barra de etapas do pedido #1048: palavra nunca quebra no meio. Onde as 5 colunas ficam estreitas para
   "Recebimento" (a barra com menos de 384 px: celular e o topo em 2 colunas até ~1080 px), só o rótulo da
   etapa atual aparece, embaixo do seu traço; os outros ficam no lugar, transparentes */
.order-example {
  container-type: inline-size;
}
.progress-steps > span {
  overflow-wrap: normal;
}
@container (max-width: 383px) {
  .progress-steps > span {
    white-space: nowrap;
    color: transparent;
  }
  .progress-steps > .is-active {
    color: #bdd7ff;
  }
}

@media (max-width: 600px) {
  /* abas de produto: as 3 inteiras numa grade, número em cima e rótulo embaixo (pode ir a 2 linhas) */
  .product-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
  }
  .product-tabs > button {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }

  /* tabelas ilustrativas (abas de produto e #ia): cada linha vira um bloco — o nome em cima, as outras
     colunas embaixo, a última (situação) encostada à direita; sem cabeçalho e sem rolagem lateral */
  .app-table-scroll {
    overflow: visible;
  }
  .app-window table {
    min-width: 0;
  }
  .app-window thead {
    display: none;
  }
  .app-window table,
  .app-window tbody {
    display: block;
  }
  .app-window tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 0;
    border-bottom: 1px solid #383a42;
  }
  .app-window td {
    display: block;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .app-window td:first-child {
    flex: 1 0 100%;
  }
  .app-window td:last-child {
    margin-left: auto;
  }
  /* se a célula trouxer data-label (o nome da coluna), ele aparece antes do valor */
  .app-window td[data-label]::before {
    content: attr(data-label) " ";
    color: #a9a9ad;
  }
  /* a 1ª célula (o nome, em cima) dispensa o rótulo */
  .app-window td[data-label]:first-child::before {
    content: none;
  }

  /* cross docking: as 5 etapas numa lista vertical compacta — número, etapa e rota na mesma linha; a atual
     com o mesmo fundo e o traço azul, agora na borda esquerda (e o traço discreto nas já percorridas) */
  .flow-track {
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
  }
  .flow-track button {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
    padding: 12px 14px;
    border: 1px solid #3c434e;
    border-top: 0;
    border-radius: 0;
  }
  .flow-track button:first-child {
    border-top: 1px solid #3c434e;
    border-radius: 7px 7px 0 0;
  }
  .flow-track button:last-child {
    border-radius: 0 0 7px 7px;
  }
  .flow-track button > span {
    margin-bottom: 0;
  }
  .flow-track small {
    margin-top: 0;
    text-align: right;
  }
  .flow-track button.selected {
    box-shadow: inset 3px 0 #8abaff;
  }
  .flow-track button.is-done {
    box-shadow: inset 2px 0 #54657d;
  }
}

/* ── movimento das páginas ── */
@media (prefers-reduced-motion: no-preference) {
  /* Plataforma: os textos da etapa trocam por opacidade; o ponto desce o fio quando a etapa muda */
  .js-motion .cycle-stack > * {
    transition: opacity .45s var(--motion-ease);
  }
  .js-motion .connection-dot.is-active {
    animation: connection-drop 1.1s var(--motion-ease) both;
  }

  /* Signature, painel do topo: o conteúdo entra no carregamento (acima da dobra, não espera o .is-in) */
  .js-motion .team-panel[data-play] > * {
    animation: motion-rise .5s var(--motion-ease) calc(150ms + var(--i, 0) * 110ms) both;
  }

  /* Signature, quadro ao vivo: cada linha troca de situação e mostra quem agiu, uma depois da outra */
  .js-motion .live-board:not(.is-in) .live-from {
    opacity: 1;
  }
  .js-motion .live-board:not(.is-in) .live-to,
  .js-motion .live-board:not(.is-in) .live-who {
    opacity: 0;
  }
  .js-motion .live-board.is-in .live-row {
    --d: calc(500ms + var(--i, 0) * 650ms);
  }
  .js-motion .live-board.is-in .live-from {
    animation: motion-fade-out .3s var(--motion-ease) var(--d) both;
  }
  .js-motion .live-board.is-in .live-to {
    --rise: 6px;
    animation: motion-rise .45s var(--motion-ease) var(--d) both;
  }
  .js-motion .live-board.is-in .live-who {
    --rise: 6px;
    animation: motion-rise .45s var(--motion-ease) calc(var(--d) + 120ms) both;
  }
  .js-motion .live-board.is-in .live-row::before {
    animation: live-mark .9s var(--motion-ease) calc(var(--d) - 150ms) both;
  }

  /* Indústrias, painel do topo: o traço se desenha no carregamento (acima da dobra), trecho a trecho */
  .js-motion .channel-panel[data-play] .channel-lines line {
    stroke-dasharray: 1;
    animation: channel-draw .45s var(--motion-ease) calc(var(--i, 0) * 180ms) both;
  }
  .js-motion .channel-panel[data-play] .channel-lines circle {
    animation: motion-fade .4s var(--motion-ease) calc(var(--i, 0) * 180ms) both;
  }

  /* Indústrias, registro: as linhas entram em sequência, num passo mais lento para ler como história */
  .js-motion .ai-record[data-play] .ai-record-steps > li {
    opacity: 0;
  }
  .js-motion .ai-record[data-play].is-in .ai-record-steps > li {
    animation: motion-rise .6s var(--motion-ease) calc(var(--i, 0) * 260ms + 120ms) both;
  }
}

/* "reduzir movimento": nada anima nem transita */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    animation: none !important;
    transition: none !important;
  }
}